Issue 279 extract global performance line chart (#279)

language/en.yml

@@ -15,5 +15,8 @@ view-1:
   description: "A line graph per project to compare their global performance(user choice of Average or Median) + a bar graph with the error count"
   meta:
     title: "View 1"
-  global-performance: "Global Performance"
+global-performance-chart:
+  title: "Global Performance"
+  mean: "Mean"
+  average: "Average"
 loading: "Loading..."

language/it.yml

@@ -15,5 +15,8 @@ view-1:
   description: "Un grafico a linee per progetto per confrontare le prestazioni globali (scelta dell'utente tra Media o Mediana) + un grafico a barre con il conteggio degli errori"
   meta:
     title: "Vista 1"
-  global-performance: "Performance Globale"
+global-performance-chart:
+  title: "Performance Globale"
+  mean: "Mediana"
+  average: "Media"
 loading: "Caricamento..."

src/View1.svelte

@@ -1,39 +1,17 @@
 <script async lang="ts" context="module">
-  import { Line } from 'svelte-chartjs'
-  import 'chart.js/auto'; // lazy loading
-  import { getProjects } from './lib/http-client.js';
-  import type { ChartData } from 'chart.js';
   import t from "./lib/t";
+  import { getProjects } from './lib/http-client.js';
+  import type { ProjectsResponse } from './lib/response-types';
+  import GlobalPerformanceLineChart from './components/GlobalPerformanceLineChart.svelte';
 
-  const response = await getProjects();
-
-  export const lineChartData: ChartData<'line'> =
-    {
-      labels: Array.from(new Set(Object.values(response).map(projectMetrics => Object.keys(projectMetrics)).flat())),
-      datasets: Object.keys(response).map(project => (
-        {
-          data: Object.values(response[ project ]).map(metrics => metrics.mean ? Number(metrics.mean) : 0),
-          fill: false,
-          label: project,
-          tension: 0.1
-        }
-      )),
-    };
+  const projectMetricsResponse: ProjectsResponse = await getProjects();
+</script>
+<script>
 </script>
 
 <div class="view-1">
-  <!-- TODO: translate -->
   <h1>{t('view-1.title')}</h1>
   <p>{t('view-1.description')}</p>
 
-  <h2>{t('view-1.global-performance')}</h2>
-  {#if lineChartData}
-    <Line data="{lineChartData}"/>
-  {:else}
-    <p>{t('loading')}</p>
-  {/if}
+  <GlobalPerformanceLineChart {projectMetricsResponse}/>
 </div>
-
-<style>
-
-</style>

src/components/GlobalPerformanceLineChart.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  export let projectMetricsResponse: ProjectsResponse; // prop
+
+  import 'chart.js/auto'; // lazy loading
+  import t from '../lib/t.js';
+  import type { ChartData } from 'chart.js';
+  import type { ProjectMetrics, ProjectsResponse } from '../lib/response-types';
+  import type { Writable } from 'svelte/store';
+  import { Line } from 'svelte-chartjs';
+  import { writable } from 'svelte/store';
+
+  export const selectedMetric: Writable<keyof ProjectMetrics> = writable('mean');
+
+  let data: ChartData<'line'>;
+
+  $: {
+    data = {
+      labels: Array.from(new Set(Object.values(projectMetricsResponse).map(projectMetrics => Object.keys(projectMetrics)).flat())),
+      datasets: Object.keys(projectMetricsResponse).map(project => (
+        {
+          data: Object.values(projectMetricsResponse[ project ]).map(metrics => metrics[ $selectedMetric ] ? Number(metrics[ $selectedMetric ]) : 0),
+          fill: false,
+          label: project,
+          tension: 0.1
+        }
+      )),
+    };
+  }
+</script>
+
+<h2>{t('global-performance-chart.title')}</h2>
+<select bind:value={$selectedMetric}>
+  <option value="mean">{t('global-performance-chart.mean')}</option>
+  <option value="average">{t('global-performance-chart.average')}</option>
+</select>
+{#if data}
+  <Line {data}/>
+{:else}
+  <p>{t('loading')}</p>
+{/if}