Function BaseChart

web/pgadmin/static/js/chartjs/index.jsx:85–167

({type='line', id, options, data, redraw=false, plugins={}, ...props})

};

export default function BaseChart({type='line', id, options, data, redraw=false, plugins={}, ...props}) {
  const chartRef = React.useRef();
  const chartObj = React.useRef();
  const theme = useTheme();

  const initChart = function() {
    Chart.register(...registerables);
    // Register for Zoom Plugin
    Chart.register(zoomPlugin);
    let chartContext = chartRef.current.getContext('2d');
    chartObj.current = new Chart(chartContext, {
      type: type,
      data: data,
      plugins: [plugins],
      options: options,
    });
    props.onInit?.(chartObj.current);
  };

  const destroyChart = function() {
    chartObj.current?.resetZoom?.();
    chartObj.current?.destroy();
  };

  useEffect(()=>{
    initChart();
    return destroyChart;
  }, []);

  useEffect(()=>{
    let scaleColors = {
      scales: {
        x: {
          ticks: {
            color: theme.palette.text.primary,
          },
        },
        y: {
          ticks: {
            color: theme.palette.text.primary,
          },
          grid: {
            zeroLineColor: theme.otherVars.borderColor,
            color: theme.otherVars.borderColor
          },
        },
      },
    };
    let merged = options;
    // Override only if scales are actually defined.
    if(options.scales && Object.keys(options.scales).length > 0) {
      merged = _.merge(options, scaleColors);
    }
    chartObj.current.options = merged;
    chartObj.current.update(props.updateOptions || {});
  },[theme]);

  useEffect(()=>{