Upgrade Chartjs to the latest 3.8.0. Fixes #7469

docs/en_US/release_notes_6_11.rst

@@ -16,12 +16,13 @@ Housekeeping
 
   | `Issue #7315 <https://redmine.postgresql.org/issues/7315>`_ -  Updates documentation for the Traefik v2 container deployment.
   | `Issue #7411 <https://redmine.postgresql.org/issues/7411>`_ -  Update pgcli to latest release 3.4.1.
+  | `Issue #7469 <https://redmine.postgresql.org/issues/7469>`_ -  Upgrade Chartjs to the latest 3.8.0.
 
 Bug fixes
 *********
 
-  | `Issue #7411 <https://redmine.postgresql.org/issues/7411>`_ -  Fixed an issue where the Database restriction is not working.
   | `Issue #7423 <https://redmine.postgresql.org/issues/7423>`_ -  Fixed an issue where there is no setting to turn off notifications in the Query Tool.
   | `Issue #7441 <https://redmine.postgresql.org/issues/7441>`_ -  Ensure that the Query Editor should be focused when switching between query tool tabs.
   | `Issue #7443 <https://redmine.postgresql.org/issues/7443>`_ -  Fixed and issue where 'Use spaces' not working in the query tool.
+  | `Issue #7453 <https://redmine.postgresql.org/issues/7453>`_ -  Fixed an issue where the Database restriction is not working.
   | `Issue #7468 <https://redmine.postgresql.org/issues/7468>`_ -  Skip the history records if the JSON info can't be parsed instead of showing 'No history'.

web/package.json

@@ -105,7 +105,7 @@
     "bootstrap4-toggle": "^3.6.1",
     "brace": "^0.11.1",
     "browserfs": "^1.4.3",
-    "chart.js": "^2.9.3",
+    "chart.js": "^3.0.0",
     "classnames": "^2.2.6",
     "closest": "^0.0.1",
     "codemirror": "^5.59.2",

web/pgadmin/dashboard/static/js/Graphs.jsx

@@ -40,7 +40,7 @@ export function transformData(labels, refreshRate) {
 }
 
 /* Custom ChartJS legend callback */
-export function legendCallback(chart) {
+export function generateLegend(chart) {
   var text = [];
   text.push('<div class="' + chart.id + '-legend d-flex">');
   for (let chart_val of chart.data.datasets) {
@@ -262,70 +262,41 @@ export function GraphsWrapper(props) {
   const bioStatsLegendRef = useRef();
   const options = useMemo(()=>({
     normalized: true,
-    legendCallback: legendCallback,
-    animation: {
-      duration: 0,
-    },
-    hover: {
-      animationDuration: 0,
-    },
-    responsiveAnimationDuration: 0,
-    legend: {
-      display: false,
-    },
     elements: {
       point: {
         radius: props.showDataPoints ? POINT_SIZE : 0,
       },
     },
-    tooltips: {
+    plugins: {
-      enabled: props.showTooltip,
+      legend: {
-      callbacks: {
+        display: false,
-        title: function(tooltipItem, data) {
-          let title = '';
-          try {
-            title = parseInt(tooltipItem[0].xLabel)*data.refreshRate + gettext(' seconds ago');
-          } catch (error) {
-            title = '';
-          }
-          return title;
-        },
       },
+      tooltip: {
+        enabled: props.showTooltip,
+        callbacks: {
+          title: function(tooltipItem) {
+            let title = '';
+            try {
+              title = parseInt(tooltipItem[0].label) * tooltipItem[0].chart?.data.refreshRate + gettext(' seconds ago');
+            } catch (error) {
+              title = '';
+            }
+            return title;
+          },
+        },
+      }
     },
     scales: {
-      yAxes: [{
+      x: {
-        ticks: {
+        reverse: true,
-          min: 0,
+      },
-          userCallback: function(label) {
-            if (Math.floor(label) === label) {
-              return label;
-            }
-          },
-          fontColor: getComputedStyle(document.documentElement).getPropertyValue('--color-fg'),
-        },
-        gridLines: {
-          drawBorder: false,
-          zeroLineColor: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
-          color: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
-        },
-      }],
-      xAxes: [{
-        display: false,
-        gridLines: {
-          display: false,
-        },
-        ticks: {
-          display: false,
-          reverse: true,
-        },
-      }],
     },
   }), [props.showTooltip, props.showDataPoints]);
   const updateOptions = useMemo(()=>({duration: 0}), []);
 
   const onInitCallback = useCallback(
     (legendRef)=>(chart)=>{
-      legendRef.current.innerHTML = chart.generateLegend();
+      legendRef.current.innerHTML = generateLegend(chart);
     }
   );
 

web/pgadmin/static/js/chartjs/index.jsx

@@ -7,12 +7,22 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useEffect } from 'react';
-import Chart from 'chart.js';
+import { Chart, registerables } from 'chart.js';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 
 const defaultOptions = {
   responsive: true,
   maintainAspectRatio: false,
+  animation: {
+    duration: 0,
+    active: {
+      duration: 0,
+    },
+    resize: {
+      duration: 0,
+    },
+  },
   elements: {
     line: {
       tension: 0,
@@ -23,17 +33,42 @@ const defaultOptions = {
   layout: {
     padding: 8,
   },
-  hover: {
+  scales: {
-    animationDuration:0,
+    x: {
-  },
+      display: false,
+      grid: {
+        display: false,
+      },
+      ticks: {
+        display: false,
+      },
+    },
+    y: {
+      min: 0,
+      ticks: {
+        callback: function(label) {
+          if (Math.floor(label) === label) {
+            return label;
+          }
+        },
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-fg'),
+      },
+      grid: {
+        drawBorder: false,
+        zeroLineColor: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
+        color: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
+      },
+    },
+  }
 };
 
 export default function BaseChart({type='line', id, options, data, redraw=false, ...props}) {
   const chartRef = React.useRef();
   const chartObj = React.useRef();
-  let optionsMerged = Chart.helpers.configMerge(defaultOptions, options);
+  let optionsMerged = _.merge(defaultOptions, options);
 
   const initChart = function() {
+    Chart.register(...registerables);
     let chartContext = chartRef.current.getContext('2d');
     chartObj.current = new Chart(chartContext, {
       type: type,

web/regression/javascript/dashboard/graphs_spec.js

@@ -27,30 +27,6 @@ describe('Graphs.js', ()=>{
     });
   });
 
-  it('legendCallback', ()=>{
-    expect(legendCallback({
-      id: 1,
-      data: {
-        datasets: [{
-          label: 'Label1',
-          backgroundColor: '#00BCD4',
-        },{
-          label: 'Label2',
-          backgroundColor: '#9CCC65',
-        }],
-      },
-    })).toEqual([
-      '<div class="1-legend d-flex">',
-      '<div class="legend-value"><span style="background-color:#00BCD4">&nbsp;&nbsp;&nbsp;&nbsp;</span>',
-      '<span class="legend-label">Label1</span>',
-      '</div>',
-      '<div class="legend-value"><span style="background-color:#9CCC65">&nbsp;&nbsp;&nbsp;&nbsp;</span>',
-      '<span class="legend-label">Label2</span>',
-      '</div>',
-      '</div>',
-    ].join(''));
-  });
-
   describe('getStatsUrl', ()=>{
     it('for server', ()=>{
       expect(getStatsUrl(432, -1, ['chart1'])).toEqual('/dashboard/dashboard_stats/432?chart_names=chart1');

web/yarn.lock

@@ -3939,28 +3939,10 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chart.js@^2.9.3:
+chart.js@^3.0.0:
-  version "2.9.4"
+  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.8.0.tgz#c6c14c457b9dc3ce7f1514a59e9b262afd6f1a94"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  integrity sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg==
-  dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
 
 cheerio-select@^1.5.0:
   version "1.5.0"
@@ -4094,7 +4076,7 @@ codemirror@^5.59.2:
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.63.3.tgz#97042a242027fe0c87c09b36bc01931d37b76527"
   integrity sha512-1C+LELr+5grgJYqwZKqxrcbPsHFHapVaVAloBsFBASbpLnQqLw1U8yXJ3gT5D+rhxIiSpo+kTqN+hQ+9ialIXw==
 
-color-convert@^1.9.0, color-convert@^1.9.3:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -4113,7 +4095,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -7382,7 +7364,7 @@ moment-timezone@^0.5.34:
   dependencies:
     moment ">= 2.9.0"
 
-"moment@>= 2.9.0", moment@^2.10.2, moment@^2.29.0, moment@^2.29.3, moment@~2.29.2:
+"moment@>= 2.9.0", moment@^2.29.0, moment@^2.29.3, moment@~2.29.2:
   version "2.29.3"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
   integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==