Unit is now inside charts (#417)

green-coding-solutions · Aug 8, 2023 · b07325e · b07325e
1 parent 2c2c71e
commit b07325e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/frontend/js/helpers/charts.js b/frontend/js/helpers/charts.js
@@ -1,4 +1,4 @@
-const getCompareChartOptions = (legend, series, mark_area=null, x_axis='time', chart_type='line', graphic=null) => {
+const getCompareChartOptions = (legend, series, chart_type='line', x_axis='time', y_axis_name, mark_area=null,  graphic=null) => {
     let tooltip_trigger = (chart_type=='line') ? 'axis' : 'item';
 
     let series_count = series.length;
@@ -83,10 +83,13 @@ const getCompareChartOptions = (legend, series, mark_area=null, x_axis='time', c
 
     })
     options.yAxis[0].axisLabel = {show: true};
+    options.yAxis[0].name = `Unit: [${y_axis_name}]`;
+
     return options;
 }
 
-const getLineBarChartOptions = (legend, series, mark_area=null, x_axis='time', no_toolbox = false, graphic=null) => {
+
+const getLineBarChartOptions = (legend, series, x_axis_name=null, y_axis_name='', x_axis='time', mark_area=null, no_toolbox=false, graphic=null, moving_average=false, show_x_axis_label=true) => {
 
     if(Object.keys(series).length == 0) {
         return {graphic: getChartGraphic("No energy reporter active")};
@@ -99,20 +102,22 @@ const getLineBarChartOptions = (legend, series, mark_area=null, x_axis='time', n
         grid: {
                 left: '0%',
                 right: 70,
-                bottom: 0,
+                bottom: 5,
                 containLabel: true
         },
         xAxis: {
+            name: x_axis_name,
             type: x_axis,
             splitLine: {show: false},
             data: legend,
             axisLabel: {
-                show: true,
+                show: show_x_axis_label,
                 interval: 0,
                 rotate: -15,
             },
         },
         yAxis: {
+            name: `Unit: [${y_axis_name}]`,
             type: 'value',
             splitLine: {show: true}
         },
@@ -147,6 +152,7 @@ const getLineBarChartOptions = (legend, series, mark_area=null, x_axis='time', n
             }
         }
     }
+
     return options;
 }
 
@@ -371,7 +377,7 @@ const displayKeyMetricsBarChart = (legend, labels, data, phase) => {
     document.querySelector(`.ui.tab[data-tab='${phase}'] .bar-chart .chart-title`).innerText = TOP_BAR_CHART_TITLE;
 
     let myChart = echarts.init(chartDom);
-    let options = getLineBarChartOptions(labels, series, null, 'category', true);
+    let options = getLineBarChartOptions(labels, series, null, TOP_BAR_CHART_UNIT, 'category', null, true);
     myChart.setOption(options);
 
     // set callback when ever the user changes the viewport
@@ -455,7 +461,7 @@ const displayTotalChart = (legend, labels, data) => {
     }
 
 
-    let options = getLineBarChartOptions(labels, series, null, 'category')
+    let options = getLineBarChartOptions(labels, series, null, TOTAL_CHART_UNIT, 'category', null, true)
     myChart.setOption(options);
         // set callback when ever the user changes the viewport
     // we need to use jQuery here and not Vanilla JS to not overwrite but add multiple resize callbacks
@@ -467,11 +473,11 @@ const displayTotalChart = (legend, labels, data) => {
 }
 
 
-const displayCompareChart = (phase, title, legend, data, mark_area, graphic) => {
+const displayCompareChart = (phase, title, y_axis_name, legend, data, mark_area, graphic) => {
 
     const element = createChartContainer(`.ui.tab[data-tab='${phase}'] .compare-chart-container`, title);
     const myChart = echarts.init(element);
-    let options = getCompareChartOptions(legend, data, mark_area, 'category', 'bar');
+    let options = getCompareChartOptions(legend, data, 'bar', 'category', y_axis_name, mark_area);
     myChart.setOption(options);
     // set callback when ever the user changes the viewport
     // we need to use jQuery here and not Vanilla JS to not overwrite but add multiple resize callbacks

diff --git a/frontend/js/helpers/config.js.example b/frontend/js/helpers/config.js.example
@@ -8,16 +8,18 @@ METRICS_URL = "__METRICS_URL__"
 */
 
 // title and filter function for the top left most chart in the Detailed Metrics / Compare view
-const TOTAL_CHART_BOTTOM_TITLE = 'Total energy consumption [mJ]';
+const TOTAL_CHART_BOTTOM_TITLE = 'Total energy consumption';
 const TOTAL_CHART_BOTTOM_LABEL = 'Machine Energy';
+const TOTAL_CHART_UNIT = 'mJ';
 // function must return boolean
 const total_chart_bottom_condition = (metric) => {
     if(metric.match(/^.*_energy.*_machine$/) !== null) return true;
     return false;
 }
 
 // title and filter function for the top left most chart in the Detailed Metrics / Compare view
-const TOP_BAR_CHART_TITLE = 'Energy metrics [mJ]'
+const TOP_BAR_CHART_TITLE = 'Energy metrics'
+const TOP_BAR_CHART_UNIT = 'mJ'
 const top_bar_chart_condition = (metric) => {
     if(metric.indexOf('_energy_') !== -1) return true;
     return false;

diff --git a/frontend/js/helpers/phase-stats.js b/frontend/js/helpers/phase-stats.js
@@ -218,7 +218,8 @@ const displayComparisonMetrics = (phase_stats_object) => {
                 if(phase_stats_object.comparison_case !== null) { // compare charts will display for everything apart stats.html
                     displayCompareChart(
                         phase,
-                        `${metric_data.clean_name} (${detail}) - [${metric_data.unit}]`,
+                        `${metric_data.clean_name} (${detail})`,
+                        metric_data.unit,
                         compare_chart_labels,
                         compare_chart_data,
                         compare_chart_mark,

diff --git a/frontend/js/stats.js b/frontend/js/stats.js
@@ -222,7 +222,7 @@ const displayTimelineCharts = (metrics, notes) => {
 
     for ( metric_name in metrics) {
 
-        const element = createChartContainer("#chart-container", `${metric_name} [${metrics[metric_name].converted_unit}]`);
+        const element = createChartContainer("#chart-container", metric_name);
 
         let legend = [];
         let series = [];
@@ -262,7 +262,7 @@ const displayTimelineCharts = (metrics, notes) => {
         });
 
         const chart_instance = echarts.init(element);
-        let options = getLineBarChartOptions(legend, series);
+        let options = getLineBarChartOptions(legend, series, 'Time', metrics[metric_name].converted_unit);
         chart_instance.setOption(options);
         chart_instances.push(chart_instance);