Feat: frontend chart filters

app/src/components/PackageChart.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="alert alert-danger" role="alert" v-if="error.length > 0">{{ error }}</div>
     <loading-spinner v-if="isFetching"></loading-spinner>
-    <chart-js v-if="isFinished && error.length === 0" :data="data" :width="1280" :height="720" data-test="package-chart"></chart-js>
+    <chart-js v-if="isFinished && error.length === 0" :data="chartData" :width="1280" :height="720" data-test="package-chart"></chart-js>
   </div>
 </template>
 
@@ -11,6 +11,7 @@ import LoadingSpinner from './LoadingSpinner'
 import ChartJs from './ChartJs'
 import { useFetchPackagesSeries } from '../composables/useFetchPackagesSeries'
 import { useConvertDataSeries } from '../composables/useConvertDataSeries'
+import { computed } from 'vue'
 
 const props = defineProps({
   packages: {
@@ -31,10 +32,25 @@ const props = defineProps({
   limit: {
     type: Number,
     required: false
+  },
+  filter: {
+    type: String,
+    default: 'All'
   }
 })
 
 const { data: fetchedData, isFetching, isFinished, error } = useFetchPackagesSeries(props.packages, { startMonth: props.startMonth, endMonth: props.endMonth, limit: props.limit })
 
 const data = useConvertDataSeries(fetchedData, 'packagePopularities')
+
+const chartData = computed(() => {
+  if (props.filter === 'Top 5') {
+    return {
+      ...data.value,
+      datasets: data.value.datasets.slice(0, 5)
+    }
+  }
+  return data.value
+})
+
 </script>

app/src/composables/useConvertDataSeries.js

@@ -32,7 +32,15 @@ const convertToDataSeries = (PopularitiesArray, pupularitiesKey) => {
     datasets: []
   }
 
-  tempSeries.forEach((series, name) => {
+  // sort packages by current popularity (desc)
+  const sortedTempSeries = Array.from(tempSeries.entries()).sort((a, b) => {
+    const lastLabel = data.labels[data.labels.length - 1]
+    const popA = a[1].get(lastLabel) || 0
+    const popB = b[1].get(lastLabel) || 0
+    return popB - popA
+  })
+
+  sortedTempSeries.forEach(([name, series]) => {
     data.datasets.push({
       label: name,
       data: (() => {

app/src/views/FunDetail.vue

@@ -10,7 +10,23 @@
       </li>
     </ul>
     <packages-bar-chart v-if="showBarChart" :packages="pkgs"></packages-bar-chart>
-    <package-chart v-if="showGraph" :limit="0" :packages="pkgs" :start-month="0"></package-chart>
+    <package-chart v-if="showGraph" :limit="0" :packages="pkgs" :start-month="0" :filter="filter"></package-chart>
+
+    <div v-if="route.path.endsWith('/history')">
+      <h2 class="mt-4">Filters</h2>
+      <div class="btn-group" role="group" aria-label="Filter chart data">
+        <input type="radio" class="btn-check" id="packagesRadioAll" value="All" v-model="filter" autocomplete="off">
+        <label class="btn" :class="filter === 'All' ? 'btn-primary' : 'btn-outline-primary'" for="packagesRadioAll">
+          All
+        </label>
+
+        <input type="radio" class="btn-check" id="packagesRadioTop5" value="Top 5" v-model="filter" autocomplete="off">
+        <label class="btn" :class="filter === 'Top 5' ? 'btn-primary' : 'btn-outline-primary'" for="packagesRadioTop5">
+          Top 5
+        </label>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -21,9 +37,12 @@ import FunConfig from '../config/fun.json'
 import PackageChart from '../components/PackageChart.vue'
 import { ref, watch } from 'vue'
 import { useRouteParams } from '@vueuse/router'
+import { useRoute } from 'vue-router'
 
 const category = useRouteParams('category')
 const preset = useRouteParams('preset')
+const route = useRoute()
+const filter = ref('All')
 
 const pkgs = FunConfig[category.value]
 

justfile

@@ -95,22 +95,23 @@ console *args:
 phpunit *args:
 	{{PHP-RUN}} php -dmemory_limit=-1 vendor/bin/phpunit {{args}}
 
-# run phpstan inside a php containre
+# run phpstan inside a php container
 phpstan *args:
 	{{PHP-RUN}} php -dmemory_limit=-1 vendor/bin/phpstan {{args}}
 
+# run rector inside the php container
 rector *args:
 	{{PHP-RUN}} php -dmemory_limit=-1 vendor/bin/rector {{args}}
 
 # run node inside a node container
 node *args='-h':
 	{{NODE-RUN}} node {{args}}
 
-# run pnpm inside a php containre
+# run pnpm inside a php container
 pnpm *args='-h':
 	{{NODE-RUN}} pnpm {{args}}
 
-# run jest inside a node containre
+# run jest inside a node container
 jest *args:
 	{{NODE-RUN}} node_modules/.bin/jest --passWithNoTests {{args}}
 
@@ -194,6 +195,7 @@ update:
 	{{PHP-RUN}} composer --no-interaction update --lock --no-scripts
 	{{NODE-RUN}} pnpm update --latest
 
+# runs on server after deploy; install deps, build assets, run migrations
 deploy:
 	cd app && pnpm install --frozen-lockfile --prod
 	cd app && NODE_OPTIONS=--no-experimental-webstorage pnpm run build
@@ -205,6 +207,7 @@ deploy:
 	cd api && bin/console doctrine:migrations:sync-metadata-storage --no-interaction
 	cd api && bin/console doctrine:migrations:migrate --no-interaction --allow-no-migration
 
+# runs on server after deploy; sets correct permissions
 deploy-permissions:
 	cd api && sudo setfacl -dR -m u:php-pkgstats:rwX -m u:deployer:rwX var
 	cd api && sudo setfacl -R -m u:php-pkgstats:rwX -m u:deployer:rwX var