diff --git a/packages/charts/package.json b/packages/charts/package.json index 70e09d1d608..bb17637dfab 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -17,7 +17,7 @@ "postbuild": "rollup -c" }, "devDependencies": { - "@types/chart.js": "^2.7.53" + "@types/chart.js": "^2.7.56" }, "dependencies": { "@ui5/webcomponents-react-base": "0.4.2-rc.7", diff --git a/packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap b/packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap index d61865f9b5d..9f6620cb655 100644 --- a/packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap +++ b/packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap @@ -114,5 +114,8 @@ exports[`BarChart loading placeholder 1`] = ` +
`; diff --git a/packages/charts/src/components/BarChart/index.tsx b/packages/charts/src/components/BarChart/index.tsx index 63786742fe5..119dee6dca4 100644 --- a/packages/charts/src/components/BarChart/index.tsx +++ b/packages/charts/src/components/BarChart/index.tsx @@ -1,11 +1,13 @@ import { useConsolidatedRef } from '@ui5/webcomponents-react-base'; import bestContrast from 'get-best-contrast-color'; -import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react'; +import React, { forwardRef, Ref, useMemo } from 'react'; import { HorizontalBar } from 'react-chartjs-2'; import { useTheme } from 'react-jss'; import { DEFAULT_OPTIONS } from '../../config'; import { ChartBaseProps } from '../../interfaces/ChartBaseProps'; -import { withChartContainer } from '../../internal/ChartContainer/withChartContainer'; +import { InternalProps } from '../../interfaces/InternalProps'; +import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend'; +import { withChartContainer } from '../../internal/withChartContainer'; import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps'; import { useChartData } from '../../util/populateData'; import { formatTooltipLabel, getTextWidth, useMergedConfig } from '../../util/utils'; @@ -25,38 +27,14 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref) = colors, width, height, - noLegend - } = props as BarChartPropTypes; + noLegend, + legendRef + } = props as BarChartPropTypes & InternalProps; const theme: any = useTheme(); const data = useChartData(labels, datasets, colors, theme.theme); const chartRef = useConsolidatedRef(ref); - const legendRef: RefObject = useRef(); - - const handleLegendItemPress = useCallback( - (e) => { - const clickTarget = (e.currentTarget as unknown) as HTMLLIElement; - const datasetIndex = parseInt(clickTarget.dataset.datasetindex); - const { chartInstance } = chartRef.current; - const meta = chartInstance.getDatasetMeta(datasetIndex); - meta.hidden = meta.hidden === null ? !chartInstance.data.datasets[datasetIndex].hidden : null; - chartInstance.update(); - clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset'; - }, - [legendRef.current, chartRef.current] - ); - - useEffect(() => { - if (noLegend) { - legendRef.current.innerHTML = ''; - } else { - legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend(); - legendRef.current.querySelectorAll('li').forEach((legendItem) => { - legendItem.addEventListener('click', handleLegendItemPress); - }); - } - }, [chartRef.current, legendRef.current, noLegend]); const barChartDefaultConfig = useMemo(() => { return { @@ -109,24 +87,24 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref) = } }; }, [valueAxisFormatter, categoryAxisFormatter]); - const mergedOptions = useMergedConfig(barChartDefaultConfig, options); + const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef); + useLegend(chartRef, legendRef, noLegend, handleLegendItemPress); + return ( - <> - -
- + ); }); + // @ts-ignore BarChartComponent.LoadingPlaceholder = BarChartPlaceholder; const BarChart = withChartContainer(BarChartComponent); diff --git a/packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap b/packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap index b03a83cc180..792b764c17b 100644 --- a/packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap +++ b/packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap @@ -114,5 +114,8 @@ exports[`ColumnChart loading placeholder 1`] = ` +
`; diff --git a/packages/charts/src/components/ColumnChart/index.tsx b/packages/charts/src/components/ColumnChart/index.tsx index 040eea787d8..0540b7220e5 100644 --- a/packages/charts/src/components/ColumnChart/index.tsx +++ b/packages/charts/src/components/ColumnChart/index.tsx @@ -1,11 +1,13 @@ import { useConsolidatedRef } from '@ui5/webcomponents-react-base'; import bestContrast from 'get-best-contrast-color'; -import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react'; +import React, { forwardRef, Ref, useMemo } from 'react'; import { Bar } from 'react-chartjs-2'; import { useTheme } from 'react-jss'; import { DEFAULT_OPTIONS } from '../../config'; import { ChartBaseProps } from '../../interfaces/ChartBaseProps'; -import { withChartContainer } from '../../internal/ChartContainer/withChartContainer'; +import { InternalProps } from '../../interfaces/InternalProps'; +import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend'; +import { withChartContainer } from '../../internal/withChartContainer'; import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps'; import { useChartData } from '../../util/populateData'; import { formatTooltipLabel, getTextHeight, getTextWidth, useMergedConfig } from '../../util/utils'; @@ -25,38 +27,17 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref(ref); - const legendRef: RefObject = useRef(); - const handleLegendItemPress = useCallback( - (e) => { - const clickTarget = (e.currentTarget as unknown) as HTMLLIElement; - const datasetIndex = parseInt(clickTarget.dataset.datasetindex); - const { chartInstance } = chartRef.current; - const meta = chartInstance.getDatasetMeta(datasetIndex); - meta.hidden = meta.hidden === null ? !chartInstance.data.datasets[datasetIndex].hidden : null; - chartInstance.update(); - clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset'; - }, - [legendRef.current, chartRef.current] - ); - - useEffect(() => { - if (noLegend) { - legendRef.current.innerHTML = ''; - } else { - legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend(); - legendRef.current.querySelectorAll('li').forEach((legendItem) => { - legendItem.addEventListener('click', handleLegendItemPress); - }); - } - }, [chartRef.current, legendRef.current, noLegend]); + const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef); + useLegend(chartRef, legendRef, noLegend, handleLegendItemPress); const columnChartDefaultConfig = useMemo(() => { return { @@ -116,18 +97,15 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref - -
- + ); }); // @ts-ignore diff --git a/packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index e5814213911..611eee3d859 100644 --- a/packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -77,5 +77,8 @@ exports[`DonutChart loading placeholder 1`] = ` +
`; diff --git a/packages/charts/src/components/DonutChart/index.tsx b/packages/charts/src/components/DonutChart/index.tsx index 65e7c4a462c..fd8caa7ca01 100644 --- a/packages/charts/src/components/DonutChart/index.tsx +++ b/packages/charts/src/components/DonutChart/index.tsx @@ -1,9 +1,11 @@ import { useConsolidatedRef } from '@ui5/webcomponents-react-base'; -import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react'; +import React, { forwardRef, Ref, useMemo } from 'react'; import { Pie } from 'react-chartjs-2'; import { useTheme } from 'react-jss'; import { ChartBaseProps } from '../../interfaces/ChartBaseProps'; -import { withChartContainer } from '../../internal/ChartContainer/withChartContainer'; +import { InternalProps } from '../../interfaces/InternalProps'; +import { useLegend, usePieLegendItemClickHandler } from '../../internal/ChartLegend'; +import { withChartContainer } from '../../internal/withChartContainer'; import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps'; import { useChartData } from '../../util/populateData'; import { formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/utils'; @@ -23,8 +25,9 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Ref(ref); - const legendRef: RefObject = useRef(); - const handleLegendItemPress = useCallback( - (e) => { - const clickTarget = (e.currentTarget as unknown) as HTMLLIElement; - const datasetIndex = parseInt(clickTarget.dataset.datasetindex); - const { chartInstance } = chartRef.current; - const meta = chartInstance.getDatasetMeta(0).data[datasetIndex]; - meta.hidden = !meta.hidden; - chartInstance.update(); - clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset'; - }, - [legendRef.current, chartRef.current] - ); - - useEffect(() => { - if (noLegend) { - legendRef.current.innerHTML = ''; - } else { - legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend(); - legendRef.current.querySelectorAll('li').forEach((legendItem) => { - legendItem.addEventListener('click', handleLegendItemPress); - }); - } - }, [chartRef.current, legendRef.current, noLegend]); + const handleLegendItemPress = usePieLegendItemClickHandler(chartRef, legendRef); + useLegend(chartRef, legendRef, noLegend, handleLegendItemPress); return ( - <> - -
- + ); }); // @ts-ignore diff --git a/packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap index da37c708777..3234b66a9a4 100644 --- a/packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap +++ b/packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap @@ -77,5 +77,8 @@ exports[`LineChart loading placeholder 1`] = ` +
`; diff --git a/packages/charts/src/components/LineChart/index.tsx b/packages/charts/src/components/LineChart/index.tsx index 30abcf2f781..7af29858af1 100644 --- a/packages/charts/src/components/LineChart/index.tsx +++ b/packages/charts/src/components/LineChart/index.tsx @@ -1,10 +1,12 @@ import { useConsolidatedRef } from '@ui5/webcomponents-react-base'; -import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react'; +import React, { forwardRef, Ref, useMemo } from 'react'; import { Line } from 'react-chartjs-2'; import { useTheme } from 'react-jss'; import { DEFAULT_OPTIONS } from '../../config'; import { ChartBaseProps } from '../../interfaces/ChartBaseProps'; -import { withChartContainer } from '../../internal/ChartContainer/withChartContainer'; +import { InternalProps } from '../../interfaces/InternalProps'; +import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend'; +import { withChartContainer } from '../../internal/withChartContainer'; import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps'; import { useChartData } from '../../util/populateData'; import { formatTooltipLabel, useMergedConfig } from '../../util/utils'; @@ -24,8 +26,9 @@ const LineChartComponent = forwardRef((props: LineChartPropTypes, ref: Ref) getDatasetAtEvent, width, height, - noLegend - } = props; + noLegend, + legendRef + } = props as LineChartPropTypes & InternalProps; const lineChartDefaultConfig = useMemo(() => { return { @@ -60,44 +63,19 @@ const LineChartComponent = forwardRef((props: LineChartPropTypes, ref: Ref) const data = useChartData(labels, datasets, colors, theme.theme); const chartRef = useConsolidatedRef(ref); - const legendRef: RefObject = useRef(); - const handleLegendItemPress = useCallback( - (e) => { - const clickTarget = (e.currentTarget as unknown) as HTMLLIElement; - const datasetIndex = parseInt(clickTarget.dataset.datasetindex); - const { chartInstance } = chartRef.current; - const meta = chartInstance.getDatasetMeta(datasetIndex); - meta.hidden = meta.hidden === null ? !chartInstance.data.datasets[datasetIndex].hidden : null; - chartInstance.update(); - clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset'; - }, - [legendRef.current, chartRef.current] - ); - - useEffect(() => { - if (noLegend) { - legendRef.current.innerHTML = ''; - } else { - legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend(); - legendRef.current.querySelectorAll('li').forEach((legendItem) => { - legendItem.addEventListener('click', handleLegendItemPress); - }); - } - }, [chartRef.current, legendRef.current, noLegend]); + const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef); + useLegend(chartRef, legendRef, noLegend, handleLegendItemPress); return ( - <> - -
- + ); }); // @ts-ignore diff --git a/packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap b/packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap index e5e831a830e..22709a1f06e 100644 --- a/packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap +++ b/packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap @@ -77,5 +77,8 @@ exports[`PieChart loading placeholder 1`] = ` +
`; diff --git a/packages/charts/src/components/PieChart/index.tsx b/packages/charts/src/components/PieChart/index.tsx index bc500769580..b43cfc7090c 100644 --- a/packages/charts/src/components/PieChart/index.tsx +++ b/packages/charts/src/components/PieChart/index.tsx @@ -1,9 +1,11 @@ import { useConsolidatedRef } from '@ui5/webcomponents-react-base'; -import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react'; +import React, { forwardRef, Ref, useMemo } from 'react'; import { Pie } from 'react-chartjs-2'; import { useTheme } from 'react-jss'; import { ChartBaseProps } from '../../interfaces/ChartBaseProps'; -import { withChartContainer } from '../../internal/ChartContainer/withChartContainer'; +import { InternalProps } from '../../interfaces/InternalProps'; +import { useLegend, usePieLegendItemClickHandler } from '../../internal/ChartLegend'; +import { withChartContainer } from '../../internal/withChartContainer'; import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps'; import { useChartData } from '../../util/populateData'; import { formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/utils'; @@ -23,8 +25,9 @@ const PieChartComponent = forwardRef((props: PieChartPropTypes, ref: Ref) = options, width, height, - noLegend - } = props; + noLegend, + legendRef + } = props as PieChartPropTypes & InternalProps; const theme: any = useTheme(); const data = useChartData(labels, datasets, colors, theme.theme, true); @@ -52,45 +55,20 @@ const PieChartComponent = forwardRef((props: PieChartPropTypes, ref: Ref) = const mergedOptions = useMergedConfig(pieChartDefaultConfig, options); const chartRef = useConsolidatedRef(ref); - const legendRef: RefObject = useRef(); - const handleLegendItemPress = useCallback( - (e) => { - const clickTarget = (e.currentTarget as unknown) as HTMLLIElement; - const datasetIndex = parseInt(clickTarget.dataset.datasetindex); - const { chartInstance } = chartRef.current; - const meta = chartInstance.getDatasetMeta(0).data[datasetIndex]; - meta.hidden = !meta.hidden; - chartInstance.update(); - clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset'; - }, - [legendRef.current, chartRef.current] - ); - - useEffect(() => { - if (noLegend) { - legendRef.current.innerHTML = ''; - } else { - legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend(); - legendRef.current.querySelectorAll('li').forEach((legendItem) => { - legendItem.addEventListener('click', handleLegendItemPress); - }); - } - }, [chartRef.current, legendRef.current, noLegend]); + const handleLegendItemPress = usePieLegendItemClickHandler(chartRef, legendRef); + useLegend(chartRef, legendRef, noLegend, handleLegendItemPress); return ( - <> - -
- + ); }); // @ts-ignore diff --git a/packages/charts/src/components/RadarChart/index.tsx b/packages/charts/src/components/RadarChart/index.tsx index 66d9b1b9e57..83b53381d10 100644 --- a/packages/charts/src/components/RadarChart/index.tsx +++ b/packages/charts/src/components/RadarChart/index.tsx @@ -1,9 +1,11 @@ import { useConsolidatedRef } from '@ui5/webcomponents-react-base'; -import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react'; +import React, { forwardRef, Ref, useMemo } from 'react'; import { Radar } from 'react-chartjs-2'; import { useTheme } from 'react-jss'; import { ChartBaseProps } from '../../interfaces/ChartBaseProps'; -import { withChartContainer } from '../../internal/ChartContainer/withChartContainer'; +import { InternalProps } from '../../interfaces/InternalProps'; +import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend'; +import { withChartContainer } from '../../internal/withChartContainer'; import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps'; import { useChartData } from '../../util/populateData'; import { formatTooltipLabel, useMergedConfig } from '../../util/utils'; @@ -22,8 +24,9 @@ const RadarChartComponent = forwardRef((props: RadarChartPropTypes, ref: Ref(ref); - const legendRef: RefObject = useRef(); - const handleLegendItemPress = useCallback( - (e) => { - const clickTarget = (e.currentTarget as unknown) as HTMLLIElement; - const datasetIndex = parseInt(clickTarget.dataset.datasetindex); - const { chartInstance } = chartRef.current; - const meta = chartInstance.getDatasetMeta(datasetIndex); - meta.hidden = meta.hidden === null ? !chartInstance.data.datasets[datasetIndex].hidden : null; - chartInstance.update(); - clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset'; - }, - [legendRef.current, chartRef.current] - ); - - useEffect(() => { - if (noLegend) { - legendRef.current.innerHTML = ''; - } else { - legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend(); - legendRef.current.querySelectorAll('li').forEach((legendItem) => { - legendItem.addEventListener('click', handleLegendItemPress); - }); - } - }, [chartRef.current, legendRef.current, noLegend]); + const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef); + useLegend(chartRef, legendRef, noLegend, handleLegendItemPress); return ( - <> - {' '} -
- + ); }); const RadarChart = withChartContainer(RadarChartComponent); diff --git a/packages/charts/src/config.ts b/packages/charts/src/config.ts index d8c51af73f8..b119aa83d86 100644 --- a/packages/charts/src/config.ts +++ b/packages/charts/src/config.ts @@ -11,6 +11,8 @@ defaults.global.animation.duration = 0; defaults.scale.ticks.fontStyle = 'bold'; defaults.global.layout.padding = 16; +defaults.global.maintainAspectRatio = false; + // Legend Configuration defaults.global.legend.display = false; defaults.global.legendCallback = generateLegend; diff --git a/packages/charts/src/interfaces/InternalProps.ts b/packages/charts/src/interfaces/InternalProps.ts new file mode 100644 index 00000000000..80fa965b0a5 --- /dev/null +++ b/packages/charts/src/interfaces/InternalProps.ts @@ -0,0 +1,5 @@ +import { RefObject } from 'react'; + +export interface InternalProps { + legendRef: RefObject; +} diff --git a/packages/charts/src/internal/ChartLegend.ts b/packages/charts/src/internal/ChartLegend.ts index 63b6ce4e9ed..b4d93cc7d5f 100644 --- a/packages/charts/src/internal/ChartLegend.ts +++ b/packages/charts/src/internal/ChartLegend.ts @@ -1,4 +1,5 @@ import { Optional } from '@ui5/webcomponents-react-base'; +import { useEffect, Ref, RefObject, useCallback } from 'react'; const getSymbolForDataset = (type, dataset) => { const datasetMeta: any = dataset.hasOwnProperty('_meta') ? Object.values(dataset._meta)[0] : null; @@ -33,7 +34,55 @@ export const generateLegend = (chart) => { let pieDataSet = Object.values(datasets[0]._meta)[0] as any; itemsForLegend = pieDataSet.data.map((meta) => meta._model); } - return `
-${itemsForLegend.map((item, index) => getLegendEntry(item, type, index)).join(' ')} -
`; + return itemsForLegend.map((item, index) => getLegendEntry(item, type, index)).join(' '); +}; + +export const useLegend = ( + chartRef: RefObject, + legendRef: RefObject, + noLegend: boolean, + handleLegendItemPress: (e: any) => void +) => { + useEffect(() => { + if (chartRef && legendRef) { + if (noLegend) { + legendRef.current.innerHTML = ''; + } else { + legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend(); + legendRef.current.querySelectorAll('li').forEach((legendItem) => { + legendItem.addEventListener('click', handleLegendItemPress); + }); + } + } + }, [chartRef.current, legendRef.current, noLegend, handleLegendItemPress]); +}; + +export const usePieLegendItemClickHandler = (chartRef: RefObject, legendRef: RefObject) => { + return useCallback( + (e) => { + const clickTarget = (e.currentTarget as unknown) as HTMLLIElement; + const datasetIndex = parseInt(clickTarget.dataset.datasetindex); + const { chartInstance } = chartRef.current; + const meta = chartInstance.getDatasetMeta(0).data[datasetIndex]; + meta.hidden = !meta.hidden; + chartInstance.update(); + clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset'; + }, + [legendRef.current, chartRef.current] + ); +}; + +export const useLegendItemClickHandler = (chartRef: RefObject, legendRef: RefObject) => { + return useCallback( + (e) => { + const clickTarget = (e.currentTarget as unknown) as HTMLLIElement; + const datasetIndex = parseInt(clickTarget.dataset.datasetindex); + const { chartInstance } = chartRef.current; + const meta = chartInstance.getDatasetMeta(datasetIndex); + meta.hidden = meta.hidden === null ? !chartInstance.data.datasets[datasetIndex].hidden : null; + chartInstance.update(); + clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset'; + }, + [legendRef.current, chartRef.current] + ); }; diff --git a/packages/charts/src/internal/ChartContainer/withChartContainer.tsx b/packages/charts/src/internal/withChartContainer.tsx similarity index 58% rename from packages/charts/src/internal/ChartContainer/withChartContainer.tsx rename to packages/charts/src/internal/withChartContainer.tsx index 1e0042aebbd..b9c2a298b92 100644 --- a/packages/charts/src/internal/ChartContainer/withChartContainer.tsx +++ b/packages/charts/src/internal/withChartContainer.tsx @@ -1,17 +1,20 @@ -import React, { ComponentType, CSSProperties, forwardRef, Ref, useMemo } from 'react'; +import React, { ComponentType, CSSProperties, forwardRef, Ref, useMemo, useRef } from 'react'; import { createUseStyles } from 'react-jss'; -import { ChartBaseProps } from '../../interfaces/ChartBaseProps'; -import { getLoadingState } from '../Placeholder'; +import { ChartBaseProps } from '../interfaces/ChartBaseProps'; +import { getLoadingState } from './Placeholder'; + +const chartHeight = (props) => { + if (props.noLegend) { + return `${props.height}px`; + } + return `${props.height - 60}px`; +}; const styles = { chart: { - '& canvas': { - maxWidth: (props) => `${props.width}px`, - maxHeight: (props) => `${props.height - props.noLegend ? 0 : 60}px` - }, '& svg': { width: (props) => `${props.width}px`, - height: (props) => `${props.height - props.noLegend ? 0 : 60}px` + height: chartHeight }, '& .legend': { height: '55px', @@ -19,7 +22,9 @@ const styles = { marginTop: '5px', overflowY: 'auto', display: 'flex', - alignItems: 'center' + flexWrap: 'wrap', + padding: '0 1rem', + boxSizing: 'border-box' } } }; @@ -28,7 +33,7 @@ const useStyles = createUseStyles(styles, { name: 'ChartContainer' }); export const withChartContainer = (Component: ComponentType) => { const ChartContainer = forwardRef((props: ChartBaseProps, ref: Ref) => { - const { style, className, tooltip, loading, datasets, slot, noLegend, height, ...rest } = props; + const { style, className, tooltip, loading, datasets, slot, noLegend, height, width, ...rest } = props; const classes = useStyles(props); let classNames = classes.chart; @@ -44,28 +49,39 @@ export const withChartContainer = (Component: ComponentType) => { () => ({ position: 'relative', paddingTop: '6px', - width: `${props.width}px`, - height: `${props.height}px`, + width: `${width}px`, + height: `${height}px`, ...style }), - [props.width, props.height, style] + [width, height, style] ); const chartHeight = useMemo(() => (noLegend ? height : height - 60), [noLegend, height]); + const chartWrapperStyles: CSSProperties = useMemo( + () => ({ position: 'relative', height: `${chartHeight}px`, width: `${width}px` }), + [chartHeight, width] + ); + + const legendRef = useRef(null); return (
{loadingIndicator} {datasets.length > 0 && ( - +
+ +
)} +
); }); diff --git a/packages/charts/src/themes/themeMap.ts b/packages/charts/src/themes/themeMap.ts index 6e9a3702d08..3a97ac0f0a6 100644 --- a/packages/charts/src/themes/themeMap.ts +++ b/packages/charts/src/themes/themeMap.ts @@ -9,15 +9,6 @@ themeMap.set('sap_belize_plus', sap_belize_plus); themeMap.set('sap_fiori_3', sap_fiori_3); themeMap.set('sap_fiori_3_dark', sap_fiori_3_dark); -// export const getOrLoadTheme = async (theme) => { -// if (themeMap.has(theme)) { -// return themeMap.get(theme); -// } -// const { semanticColors, sequentialColors } = await import(`./${theme}`); -// themeMap.set(theme, { semanticColors, sequentialColors }); -// return { semanticColors, sequentialColors }; -// }; - export const getOrLoadTheme = (theme) => { return themeMap.get(theme); }; diff --git a/packages/charts/src/util/populateData.ts b/packages/charts/src/util/populateData.ts index ecbc141fe1c..ca14ba6ddac 100644 --- a/packages/charts/src/util/populateData.ts +++ b/packages/charts/src/util/populateData.ts @@ -1,5 +1,5 @@ -import { getOrLoadTheme } from '../themes/themeMap'; import { useMemo } from 'react'; +import { getOrLoadTheme } from '../themes/themeMap'; export const populateData = (labels, datasets, colors, theme, isPie = false) => { const colorPalette = resolveColors(colors, theme); diff --git a/yarn.lock b/yarn.lock index 126a29d575b..62c568c0d3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2648,10 +2648,10 @@ resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.7.tgz#1b8e33b61a8c09cbe1f85133071baa0dbf9fa71a" integrity sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA== -"@types/chart.js@^2.7.53": - version "2.7.55" - resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.7.55.tgz#42fa503865ccbbcebe3399d90c00125bbcafcf9a" - integrity sha512-CACGbxPkr0vcyrZFpDAr4dqpfgu/PiHWzsKAhXdY+g72Laebjn/dijr7ExwVv9JS/99KrhtKmfJ0vBEhPTJBTQ== +"@types/chart.js@^2.7.56": + version "2.7.56" + resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.7.56.tgz#f7cc5c1b9d702e544bea5760c39b5f26fbeddb82" + integrity sha512-toWLqetzDO32PtrDCRKCsMmOYgHzOQUbWh3h7dGuupDpxoyx+o33lZkBBXFV0FoOUuMMEHluZBjw9Xye9ubYvg== "@types/cheerio@*": version "0.22.12"