From 2edb189898b967d3cb8bfd4f4df34537cf2f4768 Mon Sep 17 00:00:00 2001 From: melloware Date: Thu, 14 Jul 2022 10:23:04 -0400 Subject: [PATCH] Fix #3059: ChartJS allow loading by script tag --- components/lib/chart/Chart.js | 58 +++++++++++++++++++++-------------- 1 file changed, 35 insertions(+), 23 deletions(-) diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js index 2e70448bf6..83dc83ba5c 100644 --- a/components/lib/chart/Chart.js +++ b/components/lib/chart/Chart.js @@ -2,32 +2,42 @@ import * as React from 'react'; import { useUnmountEffect } from '../hooks/Hooks'; import { classNames, ObjectUtils } from '../utils/Utils'; -export const Chart = React.memo(React.forwardRef((props, ref) => { +// GitHub #3059 wrapper if loaded by script tag +const ChartJS = function() {try {return Chart;} catch {return null;}}(); + +const PrimeReactChart = React.memo(React.forwardRef((props, ref) => { const chartRef = React.useRef(null); const canvasRef = React.useRef(null); const initChart = () => { - import('chart.js/auto').then((module) => { - if (chartRef.current) { - chartRef.current.destroy(); - chartRef.current = null; - } - - const configuration = { - type: props.type, - data: props.data, - options: props.options, - plugins: props.plugins - }; + if (chartRef.current) { + chartRef.current.destroy(); + chartRef.current = null; + } - if (module) { - if (module.default) { - chartRef.current = new module.default(canvasRef.current, configuration); - } else { - chartRef.current = new module(canvasRef.current, configuration); + const configuration = { + type: props.type, + data: props.data, + options: props.options, + plugins: props.plugins + }; + if (ChartJS) { + // GitHub #3059 loaded by script only + chartRef.current = new ChartJS(canvasRef.current, configuration); + } + else { + import('chart.js/auto').then((module) => { + if (module) { + if (module.default) { + // WebPack + chartRef.current = new module.default(canvasRef.current, configuration); + } else { + // ParcelJS + chartRef.current = new module(canvasRef.current, configuration); + } } - } - }); + }); + } } React.useImperativeHandle(ref, () => ({ @@ -50,7 +60,7 @@ export const Chart = React.memo(React.forwardRef((props, ref) => { } }); - const otherProps = ObjectUtils.findDiffKeys(props, Chart.defaultProps); + const otherProps = ObjectUtils.findDiffKeys(props, PrimeReactChart.defaultProps); const className = classNames('p-chart', props.className); const style = Object.assign({ width: props.width, height: props.height }, props.style); @@ -61,8 +71,8 @@ export const Chart = React.memo(React.forwardRef((props, ref) => { ); }), (prevProps, nextProps) => prevProps.data === nextProps.data && prevProps.options === nextProps.options && prevProps.type === nextProps.type); -Chart.displayName = 'Chart'; -Chart.defaultProps = { +PrimeReactChart.displayName = 'Chart'; +PrimeReactChart.defaultProps = { __TYPE: 'Chart', id: null, type: null, @@ -74,3 +84,5 @@ Chart.defaultProps = { style: null, className: null } + +export { PrimeReactChart as Chart };