Upgrade Chartjs to the latest 3.8.0. Fixes #7469

2025-02-25 18:55:31 -06:00 · 2022-06-13 17:26:17 +05:30
parent 628e609e6a
commit 3381516013
6 changed files with 72 additions and 107 deletions
--- a/docs/en_US/release_notes_6_11.rst
+++ b/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'.
--- a/web/package.json
+++ b/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",
--- a/web/pgadmin/dashboard/static/js/Graphs.jsx
+++ b/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: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
        enabled: props.showTooltip,
        callbacks: {
-        title: function(tooltipItem, data) {
+          title: function(tooltipItem) {
            let title = '';
            try {
-            title = parseInt(tooltipItem[0].xLabel)*data.refreshRate + gettext(' seconds ago');
+              title = parseInt(tooltipItem[0].label) * tooltipItem[0].chart?.data.refreshRate + gettext(' seconds ago');
            } catch (error) {
              title = '';
            }
            return title;
          },
        },
-    },
-    scales: {
-      yAxes: [{
-        ticks: {
-          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,
+    scales: {
+      x: {
        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);
    }
  );

--- a/web/pgadmin/static/js/chartjs/index.jsx
+++ b/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: {
-    animationDuration:0,
+  scales: {
+    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,
--- a/web/regression/javascript/dashboard/graphs_spec.js
+++ b/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');
--- a/web/yarn.lock
+++ b/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:
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
-  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"
+chart.js@^3.0.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.8.0.tgz#c6c14c457b9dc3ce7f1514a59e9b262afd6f1a94"
+  integrity sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg==

 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==