add date stamp to performance graphs / increase number of performance rating snapshots / localize graph timestamps

WebfrontCore/wwwroot/js/stats.js

@@ -1,83 +1,125 @@
-function getStatsChart(id, width, height) {
+function getClosestMultiple(baseValue, value) {
+    return Math.round(value / baseValue) * baseValue;
+}
+
+function getStatsChart(id) {
     const data = $('#' + id).data('history');
-    
+
     if (data === undefined) {
         return;
     }
-    
-    let fixedData = [];
-    data.forEach(function (item, i) {
-        fixedData[i] = { x: i, y: Math.floor(item) };
-    });
+    if (data.length <= 1) {
+        // only 0 perf
+        return;
+    }
 
-    let dataMin = Math.min(...data);
-    const dataMax = Math.max(...data);
+    const labels = [];
+    const values = [];
+
+    data.forEach(function (item, i) {
+        labels.push(item.OccurredAt);
+        values.push(item.Performance)
+    });
+    
+
+    const padding = 4;
+    let dataMin = Math.min(...values);
+    const dataMax = Math.max(...values);
 
     if (dataMax - dataMin === 0) {
         dataMin = 0;
     }
 
-    const padding = (dataMax - dataMin) * 0.5;
-    const min = Math.max(0, dataMin - padding);
-    const max = dataMax + padding;
-    let interval = Math.floor((max - min) / 2);
+    dataMin = Math.max(0, dataMin);
 
-    if (interval < 1)
-        interval = 1;
+    const min = getClosestMultiple(padding, dataMin - padding);
+    const max = getClosestMultiple(padding, dataMax + padding);
 
-    return new CanvasJS.Chart(id, {
-        backgroundColor: 'transparent',
-        height: height,
-        width: width,
-        animationEnabled: false,
-        toolTip: {
-            contentFormatter: function (e) {
-                return `${_localization['WEBFRONT_ADV_STATS_RANKING_METRIC']} ${Math.round(e.entries[0].dataPoint.y, 1)}`;
+    const chartData = {
+        labels: labels,
+        datasets: [{
+            data: values,
+            pointBackgroundColor: 'rgba(255, 255, 255, 0)',
+            pointBorderColor: 'rgba(255, 255, 255, 0)',
+            pointHoverRadius: 5,
+            pointHoverBackgroundColor: 'rgba(255, 255, 255, 1)',
+        }]
+    };
+
+    const options = {
+        defaultFontFamily: '-apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: false,
+        tooltips: {
+            callbacks: {
+                label: context => moment.utc(context.label).local().calendar(),
+                title: items => Math.round(items[0].yLabel) + ' ' + _localization['WEBFRONT_ADV_STATS_RANKING_METRIC']
+            },
+            mode: 'nearest',
+            intersect: false,
+            animationDuration: 0,
+            cornerRadius: 0,
+            displayColors: false
+        },
+        hover: {
+            mode: 'nearest',
+            intersect: false
+        },
+        elements: {
+            line: {
+                fill: false,
+                borderColor: halfmoon.getPreferredMode() === "light-mode" ? 'rgba(0, 0, 0, 0.85)' : 'rgba(255, 255, 255, 0.75)',
+                borderWidth: 2
+            },
+            point: {
+                radius: 5
             }
         },
-        title: {
-            fontSize: 0
+        scales: {
+            xAxes: [{
+                display: false,
+            }],
+            yAxes: [{
+                gridLines: {
+                    display: false
+                },
+
+                position: 'right',
+                ticks: {
+                    callback: function (value, index, values) {
+                        if (index === values.length - 1) {
+                            return min;
+                        } else if (index === 0) {
+                            return max;
+                        } else {
+                            return '';
+                        }
+                    },
+                    fontColor: 'rgba(255, 255, 255, 0.25)'
+                }
+            }]
         },
-        axisX: {
-            gridThickness: 0,
-            lineThickness: 0,
-            tickThickness: 0,
-            margin: 0,
-            valueFormatString: ' '
+        layout: {
+            padding: {
+                left: 15
+            }
         },
-        axisY: {
-            labelFontSize: 12,
-            interval: interval,
-            gridThickness: 0,
-            lineThickness: 0.5,
-            valueFormatString: '#,##0',
-            minimum: min,
-            maximum: max
-        },
-        legend: {
-            dockInsidePlotArea: true
-        },
-        data: [{
-            type: 'spline',
-            color: '#c0c0c0',
-            markerSize: 0,
-            dataPoints: fixedData,
-            lineThickness: 2
-        }]
-    });
+    };
+
+    new Chart(id, {
+        type: 'line',
+        data: chartData,
+        options: options
+    }); 
 }
 
 $(document).ready(function () {
     $('.client-rating-graph').each(function (i, element) {
-        getStatsChart($(element).attr('id'), $(element).width(), $(element).height()).render();
-    });
-
-    $(window).resize(function () {
-        $('.client-rating-graph').each(function (index, element) {
-            getStatsChart($(element).attr('id'), $(element).width(), $(element).height()).render();
-        });
+        getStatsChart($(element).children('canvas').attr('id'));
     });
 
+  
     $('.top-players-link').click(function (event) {
         $($(this).attr('href')).html('');
         initLoader('/Stats/GetTopPlayersAsync?serverId=' + $(this).data('serverid'), $(this).attr('href'), 10, 0);
@@ -88,6 +130,6 @@ $(document).ready(function () {
 $(document).on("loaderFinished", function (event, response) {
     const ids = $.map($(response).find('.client-rating-graph'), function (elem) { return $(elem).attr('id'); });
     ids.forEach(function (item, index) {
-        getStatsChart(item, $(item).width(), $(item).height()).render();
+        getStatsChart($(item).children('canvas').attr('id'));
     });
 });