diff --git a/docs/MigrationGuide.md b/docs/MigrationGuide.md index e7b9982665f..e132a23cae3 100644 --- a/docs/MigrationGuide.md +++ b/docs/MigrationGuide.md @@ -1,5 +1,88 @@ # Migration Guide +## 0.9.5 - Charts Migration +With version v0.9.5 of `@ui5/webcomponents-react-charts` we replace the canvas based charts with SVG based charts and +streamlined the ChartAPI to work similar to the `AnalyticalTable` API. +This requires a couple of changes on your side: + +1. Change the import from `@ui5/webcomponents-react-charts/lib/[ChartType]` to `@ui5/webcomponents-react-charts/lib/[ChartType]` +2. Don't split the dataset into labels and single dataset entries as before, you can pass your dataset "as-is" to the chart. +3. Your labels are now part of the dataset, but you need to tell the chart which element of the data is your dimension + Use the `dimensions` prop for that. +4. Instead of passing multiple datasets with their own data into the datasets prop, define your `measures` by specifying at least the `accessor`. + +To illustrate the required changes, you can find the migration of a bar chart with two bars per dimension below: + +Old Bar Chart: +```jsx +import React from 'react'; +import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart'; + +const MyComponent = () => { + return ( + + ); +}; +``` + +New Bar Chart: +```jsx +import React from 'react'; +import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart'; + +const MyComponent = () => { + return ( + + ); +}; +``` + ## Migrating from 0.8.X to 0.9.0 Migrating your app from 0.8.X to 0.9.0 requires a few updates to the API properties, this includes dependencies, theming, event handling and prop changes. diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx index 2a40dfe9a09..22a25ca9058 100644 --- a/packages/charts/src/components/BarChart/BarChart.tsx +++ b/packages/charts/src/components/BarChart/BarChart.tsx @@ -91,7 +91,6 @@ export interface BarChartProps extends RechartBaseProps { /** * import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart'; - * **This component is under active development. The API is not stable yet and might change without further notice.** */ const BarChart: FC = forwardRef((props: BarChartProps, ref: Ref) => { const { @@ -119,6 +118,7 @@ const BarChart: FC = forwardRef((props: BarChartProps, ref: Ref = forwardRef((props: BarChartProps, ref: Ref ) = legendRef } = props as BarChartPropTypes & InternalProps; + useEffect(() => { + deprecationNotice( + 'BarChart', + "This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/BarChart' instead." + ); + }, []); + const theme = getTheme(); const data = useChartData(labels, datasets, colors, theme); @@ -115,6 +123,8 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref) = BarChartComponent.LoadingPlaceholder = BarChartPlaceholder; /** * import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart'; + *
+ * This component is deprecated and will be removed with v0.10.0. Please use [this component](https://sap.github.io/ui5-webcomponents-react/?path=/docs/charts-barchart) instead. */ const BarChart: FC = withChartContainer(BarChartComponent); diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx index c7891f2390e..bc53cd5778f 100644 --- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx +++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx @@ -89,7 +89,6 @@ const measureDefaults = { /** * import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/next/ColumnChart'; - * **This component is under active development. The API is not stable yet and might change without further notice.** */ const ColumnChart: FC = forwardRef((props: ColumnChartProps, ref: Ref) => { const { @@ -116,6 +115,7 @@ const ColumnChart: FC = forwardRef((props: ColumnChartProps, r legendHorizontalAlign: 'left', barGap: 3, zoomingTool: false, + resizeDebounce: 250, ...props.chartConfig }; }, [props.chartConfig]); @@ -179,6 +179,7 @@ const ColumnChart: FC = forwardRef((props: ColumnChartProps, r className={className} tooltip={tooltip} slot={slot} + resizeDebounce={chartConfig.resizeDebounce} > ; +export const loadingPlaceholder = () => ; loadingPlaceholder.story = { name: 'Loading placeholder' diff --git a/packages/charts/src/components/ColumnChart/demo.stories.tsx b/packages/charts/src/components/ColumnChart/demo.stories.tsx index 54848c75734..b0a022017a6 100644 --- a/packages/charts/src/components/ColumnChart/demo.stories.tsx +++ b/packages/charts/src/components/ColumnChart/demo.stories.tsx @@ -68,7 +68,7 @@ const growthLineOptions = { }; export default { - title: 'Charts / ColumnChart', + title: 'Charts - Deprecated / ColumnChart', component: ColumnChart }; diff --git a/packages/charts/src/components/ColumnChart/index.tsx b/packages/charts/src/components/ColumnChart/index.tsx index 6a881a36306..f6bd3256740 100644 --- a/packages/charts/src/components/ColumnChart/index.tsx +++ b/packages/charts/src/components/ColumnChart/index.tsx @@ -1,9 +1,10 @@ import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme'; +import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils'; import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; import { getTextHeight, getTextWidth } from '@ui5/webcomponents-react-charts/lib/Utils'; import { withChartContainer } from '@ui5/webcomponents-react-charts/lib/withChartContainer'; import bestContrast from 'get-best-contrast-color'; -import React, { FC, forwardRef, Ref, useMemo } from 'react'; +import React, { FC, forwardRef, Ref, useEffect, useMemo } from 'react'; import { Bar } from 'react-chartjs-2'; import { DEFAULT_OPTIONS } from '../../config'; import { ChartBaseProps } from '../../interfaces/ChartBaseProps'; @@ -33,6 +34,13 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref { + deprecationNotice( + 'ColumnChart', + "This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/ColumnChart' instead." + ); + }, []); + const theme = getTheme(); const data = useChartData(labels, datasets, colors, theme); @@ -118,6 +126,8 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Refimport { ColumnChart } from '@ui5/webcomponents-react-charts/lib/ColumnChart'; + *
+ * This component is deprecated and will be removed with v0.10.0. Please use [this component](https://sap.github.io/ui5-webcomponents-react/?path=/docs/charts-columnchart) instead. */ const ColumnChart: FC = withChartContainer(ColumnChartComponent); diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx index 2bca0cc1f62..b264fc9c66b 100644 --- a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx +++ b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx @@ -5,7 +5,7 @@ import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } import { boolean, select } from '@storybook/addon-knobs'; export default { - title: 'Charts - Unstable / ComposedChart', + title: 'Charts / ComposedChart', component: ComposedChart }; diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx index d4819612e1c..01678196392 100644 --- a/packages/charts/src/components/ComposedChart/index.tsx +++ b/packages/charts/src/components/ComposedChart/index.tsx @@ -106,7 +106,6 @@ type AvailableChartTypes = 'line' | 'bar' | 'area' | string; /** * import { ComposedChart } from '@ui5/webcomponents-react-charts/lib/next/ComposedChart'; - * **This component is under active development. The API is not stable yet and might change without further notice.** */ const ComposedChart: FC = forwardRef((props: ComposedChartProps, ref: Ref) => { const { @@ -135,6 +134,7 @@ const ComposedChart: FC = forwardRef((props: ComposedChartPr legendPosition: 'bottom', legendHorizontalAlign: 'left', zoomingTool: false, + resizeDebounce: 250, ...props.chartConfig }; }, [props.chartConfig]); @@ -223,6 +223,7 @@ const ComposedChart: FC = forwardRef((props: ComposedChartPr className={className} tooltip={tooltip} slot={slot} + resizeDebounce={chartConfig.resizeDebounce} > - ( - - ); +export const renderCustomColorStory = () => ( + +); renderCustomColorStory.story = { name: 'With custom color' }; -export const withPaddingStory = () => - ( - - ); +export const withPaddingStory = () => ( + +); withPaddingStory.story = { name: 'With padding angle' }; -export const withCustomRadiusStory = () => - ( - - ); +export const withCustomRadiusStory = () => ( + +); withCustomRadiusStory.story = { name: 'With custom inner radius' @@ -114,26 +111,25 @@ loadingPlaceholder.story = { name: 'Loading placeholder' }; -export const withFormatter = () => - ( - el.slice(0, 3) - }} - measure={{ - accessor: 'users', - formatter: (el) => el / 10 - }} - /> - ); +export const withFormatter = () => ( + el.slice(0, 3) + }} + measure={{ + accessor: 'users', + formatter: (el) => el / 10 + }} + /> +); withFormatter.story = { name: 'With formatter' diff --git a/packages/charts/src/components/DonutChart/DonutChart.tsx b/packages/charts/src/components/DonutChart/DonutChart.tsx index 905193d9b88..39cb33a93fd 100644 --- a/packages/charts/src/components/DonutChart/DonutChart.tsx +++ b/packages/charts/src/components/DonutChart/DonutChart.tsx @@ -3,7 +3,6 @@ import { PieChart, PieChartProps } from '../PieChart/PieChart'; /** * import { DonutChart } from '@ui5/webcomponents-react-charts/lib/next/DonutChart'; - * **This component is under active development. The API is not stable yet and might change without further notice.** */ const DonutChart: FC = forwardRef((props: PieChartProps, ref) => { const chartConfig = useMemo(() => { diff --git a/packages/charts/src/components/DonutChart/demo.stories.tsx b/packages/charts/src/components/DonutChart/demo.stories.tsx index 6dbbc19bdb6..8457528e6a4 100644 --- a/packages/charts/src/components/DonutChart/demo.stories.tsx +++ b/packages/charts/src/components/DonutChart/demo.stories.tsx @@ -6,7 +6,7 @@ const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; const dataset = [{ data: [65, 59, 80, 81, 56, 55, 40] }]; export default { - title: 'Charts / DonutChart', + title: 'Charts - Deprecated / DonutChart', component: DonutChart }; diff --git a/packages/charts/src/components/DonutChart/index.tsx b/packages/charts/src/components/DonutChart/index.tsx index 3d371f41442..018e3cf8125 100644 --- a/packages/charts/src/components/DonutChart/index.tsx +++ b/packages/charts/src/components/DonutChart/index.tsx @@ -1,6 +1,7 @@ +import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils'; import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; import { withChartContainer } from '@ui5/webcomponents-react-charts/lib/withChartContainer'; -import React, { FC, forwardRef, Ref, useMemo } from 'react'; +import React, { FC, forwardRef, Ref, useEffect, useMemo } from 'react'; import { Pie } from 'react-chartjs-2'; import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme'; import { ChartBaseProps } from '../../interfaces/ChartBaseProps'; @@ -30,6 +31,13 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Ref { + deprecationNotice( + 'DonutChart', + "This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/DonutChart' instead." + ); + }, []); + const theme = getTheme(); const data = useChartData(labels, datasets, colors, theme, true); @@ -75,6 +83,8 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Refimport { DonutChart } from '@ui5/webcomponents-react-charts/lib/DonutChart'; + *
+ * This component is deprecated and will be removed with v0.10.0. Please use [this component](https://sap.github.io/ui5-webcomponents-react/?path=/docs/charts-donutchart) instead. */ const DonutChart: FC = withChartContainer(DonutChartComponent); diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx index 62637d8c909..9b115f75f82 100644 --- a/packages/charts/src/components/LineChart/LineChart.tsx +++ b/packages/charts/src/components/LineChart/LineChart.tsx @@ -82,7 +82,6 @@ const measureDefaults = { /** * import { LineChart } from '@ui5/webcomponents-react-charts/lib/next/LineChart'; - * **This component is under active development. The API is not stable yet and might change without further notice.** */ const LineChart: FC = forwardRef((props: LineChartProps, ref: Ref) => { const { @@ -108,6 +107,7 @@ const LineChart: FC = forwardRef((props: LineChartProps, ref: Re legendPosition: 'bottom', legendHorizontalAlign: 'left', zoomingTool: false, + resizeDebounce: 250, ...props.chartConfig }; }, [props.chartConfig]); @@ -169,6 +169,7 @@ const LineChart: FC = forwardRef((props: LineChartProps, ref: Re className={className} tooltip={tooltip} slot={slot} + resizeDebounce={chartConfig.resizeDebounce} > - ( - `${d} 2019`, - interval: 0 - } - ]} - measures={[ - { - accessor: 'users', - label: 'Users', - formatter: (val) => val.toLocaleString() - }, - { - accessor: 'sessions', - label: 'Active Sessions', - formatter: (val) => `${val} sessions`, - hideDataLabel: true - }, - { - accessor: 'volume', - label: 'Vol.' - } - ]} - /> - ); +export const renderStory = () => ( + `${d} 2019`, + interval: 0 + } + ]} + measures={[ + { + accessor: 'users', + label: 'Users', + formatter: (val) => val.toLocaleString() + }, + { + accessor: 'sessions', + label: 'Active Sessions', + formatter: (val) => `${val} sessions`, + hideDataLabel: true + }, + { + accessor: 'volume', + label: 'Vol.' + } + ]} + /> +); renderStory.story = { name: 'Default' diff --git a/packages/charts/src/components/LineChart/demo.stories.tsx b/packages/charts/src/components/LineChart/demo.stories.tsx index add4758573b..df121115773 100644 --- a/packages/charts/src/components/LineChart/demo.stories.tsx +++ b/packages/charts/src/components/LineChart/demo.stories.tsx @@ -30,7 +30,7 @@ const renderStoryWithCustomColors = () => ( ); export default { - title: 'Charts / Line Chart', + title: 'Charts - Deprecated / Line Chart', component: LineChart }; diff --git a/packages/charts/src/components/LineChart/index.tsx b/packages/charts/src/components/LineChart/index.tsx index a07a80acede..a620026ef9e 100644 --- a/packages/charts/src/components/LineChart/index.tsx +++ b/packages/charts/src/components/LineChart/index.tsx @@ -1,6 +1,7 @@ +import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils'; import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; import { withChartContainer } from '@ui5/webcomponents-react-charts/lib/withChartContainer'; -import React, { FC, forwardRef, Ref, useMemo } from 'react'; +import React, { FC, forwardRef, Ref, useEffect, useMemo } from 'react'; import { Line } from 'react-chartjs-2'; import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme'; import { DEFAULT_OPTIONS } from '../../config'; @@ -30,6 +31,13 @@ const LineChartComponent = forwardRef((props: LineChartPropTypes, ref: Ref) legendRef } = props as LineChartPropTypes & InternalProps; + useEffect(() => { + deprecationNotice( + 'LineChart', + "This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/LineChart' instead." + ); + }, []); + const lineChartDefaultConfig = useMemo(() => { return { scales: { @@ -87,6 +95,8 @@ const LineChartComponent = forwardRef((props: LineChartPropTypes, ref: Ref) LineChartComponent.LoadingPlaceholder = LineChartPlaceholder; /** * import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart'; + *
+ * This component is deprecated and will be removed with v0.10.0. Please use [this component](https://sap.github.io/ui5-webcomponents-react/?path=/docs/charts-linechart) instead. */ const LineChart: FC = withChartContainer(LineChartComponent); diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx index 7fafae4a4c8..9743eda662a 100644 --- a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx +++ b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx @@ -77,7 +77,6 @@ const microBarChartMargin = { left: -30, right: 30, top: 40, bottom: 30 }; /** * import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/next/MicroBarChart'; - * **This component is under active development. The API is not stable yet and might change without further notice.** */ const MicroBarChart: FC = forwardRef((props: MicroBarChartProps, ref: Ref) => { const { loading, dataset, onDataPointClick, style, className, tooltip, slot } = props; @@ -142,6 +141,7 @@ const MicroBarChart: FC = forwardRef((props: MicroBarChartPr className={className} tooltip={tooltip} slot={slot} + resizeDebounce={250} > diff --git a/packages/charts/src/components/MicroBarChart/MicroBarRechart.stories.tsx b/packages/charts/src/components/MicroBarChart/MicroBarRechart.stories.tsx index 9fcc87cd4e1..eca00b02625 100644 --- a/packages/charts/src/components/MicroBarChart/MicroBarRechart.stories.tsx +++ b/packages/charts/src/components/MicroBarChart/MicroBarRechart.stories.tsx @@ -27,7 +27,7 @@ const singleData = [ ]; export default { - title: 'Charts - Unstable / MicroBarChart', + title: 'Charts / MicroBarChart', component: MicroBarChart }; diff --git a/packages/charts/src/components/MicroBarChart/demo.stories.tsx b/packages/charts/src/components/MicroBarChart/demo.stories.tsx index f1033fb5bac..da1d28231b7 100644 --- a/packages/charts/src/components/MicroBarChart/demo.stories.tsx +++ b/packages/charts/src/components/MicroBarChart/demo.stories.tsx @@ -14,7 +14,7 @@ const valueFormatter = (value) => `${value}$`; const labelFormatter = (value) => `${value} in Dollar`; export default { - title: 'Charts / Micro Bar Chart', + title: 'Charts - Deprecated / Micro Bar Chart', component: MicroBarChart }; diff --git a/packages/charts/src/components/MicroBarChart/index.tsx b/packages/charts/src/components/MicroBarChart/index.tsx index 9a32a051096..d23332ccb65 100644 --- a/packages/charts/src/components/MicroBarChart/index.tsx +++ b/packages/charts/src/components/MicroBarChart/index.tsx @@ -1,8 +1,9 @@ -import React, { CSSProperties, FC, forwardRef, Ref } from 'react'; +import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme'; +import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils'; +import React, { CSSProperties, FC, forwardRef, Ref, useEffect } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { resolveColors } from '../../util/populateData'; -import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme'; const BarStyles = { container: { @@ -67,6 +68,8 @@ export interface MicroBarChartPropTypes extends CommonProps { /** * import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart'; + *
+ * This component is deprecated and will be removed with v0.10.0. Please use [this component](https://sap.github.io/ui5-webcomponents-react/?path=/docs/charts-microbarchart) instead. */ const MicroBarChart: FC = forwardRef( (props: MicroBarChartPropTypes, ref: Ref) => { @@ -79,6 +82,13 @@ const MicroBarChart: FC = forwardRef( const maxValue = Math.max(...dataset.map((item) => item.value)); + useEffect(() => { + deprecationNotice( + 'MicroBarChart', + "This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/MicroBarChart' instead." + ); + }, []); + return (
{visibleDatasetArray.map((item, index) => { diff --git a/packages/charts/src/components/PieChart/PieChart.stories.tsx b/packages/charts/src/components/PieChart/PieChart.stories.tsx index a41f3e02393..eb420d0f32b 100644 --- a/packages/charts/src/components/PieChart/PieChart.stories.tsx +++ b/packages/charts/src/components/PieChart/PieChart.stories.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { simpleDataSet } from '../../resources/DemoProps'; export default { - title: 'Charts - Unstable / PieChart', + title: 'Charts / PieChart', component: PieChart }; diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx index 5430ea7350e..2bce5a5df24 100644 --- a/packages/charts/src/components/PieChart/PieChart.tsx +++ b/packages/charts/src/components/PieChart/PieChart.tsx @@ -57,7 +57,6 @@ export interface PieChartProps extends RechartBaseProps { /** * import { PieChart } from '@ui5/webcomponents-react-charts/lib/next/PieChart'; - * **This component is under active development. The API is not stable yet and might change without further notice.** */ const PieChart: FC = forwardRef((props: PieChartProps, ref: Ref) => { const { @@ -81,6 +80,7 @@ const PieChart: FC = forwardRef((props: PieChartProps, ref: Ref = forwardRef((props: PieChartProps, ref: Ref ) = legendRef } = props as PieChartPropTypes & InternalProps; + useEffect(() => { + deprecationNotice( + 'PieChart', + "This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/PieChart' instead." + ); + }, []); + const theme = getTheme(); const data = useChartData(labels, datasets, colors, theme, true); @@ -76,6 +84,8 @@ const PieChartComponent = forwardRef((props: PieChartPropTypes, ref: Ref) = PieChartComponent.LoadingPlaceholder = PieChartPlaceholder; /** * import { PieChart } from '@ui5/webcomponents-react-charts/lib/PieChart'; + *
+ * This component is deprecated and will be removed with v0.10.0. Please use [this component](https://sap.github.io/ui5-webcomponents-react/?path=/docs/charts-piechart) instead. */ const PieChart: FC = withChartContainer(PieChartComponent); diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx index 67f99cfee25..1535b168e52 100644 --- a/packages/charts/src/components/RadarChart/RadarChart.tsx +++ b/packages/charts/src/components/RadarChart/RadarChart.tsx @@ -67,7 +67,6 @@ const measureDefaults = { /** * import { RadarChart } from '@ui5/webcomponents-react-charts/lib/next/RadarChart'; - * **This component is under active development. The API is not stable yet and might change without further notice.** */ const RadarChart: FC = forwardRef((props: RadarChartProps, ref: Ref) => { const { @@ -89,6 +88,7 @@ const RadarChart: FC = forwardRef((props: RadarChartProps, ref: legendHorizontalAlign: 'center', dataLabel: true, polarGridType: 'circle', + resizeDebounce: 250, ...props.chartConfig }; }, [props.chartConfig]); @@ -140,6 +140,7 @@ const RadarChart: FC = forwardRef((props: RadarChartProps, ref: className={className} tooltip={tooltip} slot={slot} + resizeDebounce={chartConfig.resizeDebounce} > { + deprecationNotice( + 'RadarChart', + "This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/RadarChart' instead." + ); + }, []); + const theme = getTheme(); const data = useChartData(labels, datasets, colors, theme); @@ -69,6 +77,8 @@ const RadarChartComponent = forwardRef((props: RadarChartPropTypes, ref: Refimport { RadarChart } from '@ui5/webcomponents-react-charts/lib/RadarChart'; + *
+ * This component is deprecated and will be removed with v0.10.0. Please use [this component](https://sap.github.io/ui5-webcomponents-react/?path=/docs/charts-radarchart) instead. */ const RadarChart: FC = withChartContainer(RadarChartComponent); diff --git a/packages/charts/src/components/RadialChart/RadialChart.stories.tsx b/packages/charts/src/components/RadialChart/RadialChart.stories.tsx index 0f6b9afb797..3dcc550a79d 100644 --- a/packages/charts/src/components/RadialChart/RadialChart.stories.tsx +++ b/packages/charts/src/components/RadialChart/RadialChart.stories.tsx @@ -4,7 +4,7 @@ import { RadialChart } from '@ui5/webcomponents-react-charts/lib/next/RadialChar import React from 'react'; export default { - title: 'Charts - Unstable / RadialChart', + title: 'Charts / RadialChart', component: RadialChart }; diff --git a/packages/charts/src/components/RadialChart/RadialChart.tsx b/packages/charts/src/components/RadialChart/RadialChart.tsx index 5f155327839..83a7bbeb39e 100644 --- a/packages/charts/src/components/RadialChart/RadialChart.tsx +++ b/packages/charts/src/components/RadialChart/RadialChart.tsx @@ -20,7 +20,6 @@ const radialBarLabelStyle = { fontSize: ThemingParameters.sapFontHeader3Size, fi /** * import { RadialChart } from '@ui5/webcomponents-react-charts/lib/next/RadialChart'; - * **This component is under active development. The API is not stable yet and might change without further notice.** */ const RadialChart: FC = forwardRef((props: RadialChartProps, ref: Ref) => { const { maxValue = 100, value, displayValue, onDataPointClick, color, style, className, tooltip, slot } = props; @@ -55,6 +54,7 @@ const RadialChart: FC = forwardRef((props: RadialChartProps, r className={className} tooltip={tooltip} slot={slot} + resizeDebounce={250} > import { RadialChart } from '@ui5/webcomponents-react-charts/lib/RadialChart'; + *
+ * This component is deprecated and will be removed with v0.10.0. Please use [this component](https://sap.github.io/ui5-webcomponents-react/?path=/docs/charts-radialchart) instead. */ const RadialChart: FC = forwardRef((props: RadialChartPropTypes, ref: Ref) => { const { maxValue, value, displayValue, style, className, colors, options, width, height } = props; + useEffect(() => { + deprecationNotice( + 'RadialChart', + "This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/RadialChart' instead." + ); + }, []); + const data = [value, maxValue - value]; const radialChartDefaultConfig = useMemo(() => { return { diff --git a/packages/charts/src/interfaces/RechartBaseProps.ts b/packages/charts/src/interfaces/RechartBaseProps.ts index 35e216bccf3..fc93d84fbea 100644 --- a/packages/charts/src/interfaces/RechartBaseProps.ts +++ b/packages/charts/src/interfaces/RechartBaseProps.ts @@ -21,5 +21,7 @@ export interface RechartBaseProps extends CommonProps legendPosition?: string; legendHorizontalAlign?: string; + + resizeDebounce?: number; }; } diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx index 58927ded7c3..52902b567df 100644 --- a/packages/charts/src/internal/ChartContainer.tsx +++ b/packages/charts/src/internal/ChartContainer.tsx @@ -2,14 +2,15 @@ import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createC import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters'; import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps'; import { Loader } from '@ui5/webcomponents-react/lib/Loader'; -import React, { ComponentType, CSSProperties, FC, forwardRef, ReactNode, Ref, useMemo } from 'react'; +import React, { ComponentType, CSSProperties, FC, forwardRef, ReactElement, Ref, useMemo } from 'react'; import { ResponsiveContainer } from 'recharts'; export interface ContainerProps extends CommonProps { - children: ReactNode; + children: ReactElement; Placeholder?: ComponentType; dataset: unknown[]; loading?: boolean; + resizeDebounce: number; } const loaderStyles: CSSProperties = { @@ -32,7 +33,7 @@ const chartContainerStyles = { const useStyles = createComponentStyles(chartContainerStyles, { name: 'ChartContainer' }); const ChartContainer: FC = forwardRef((props: ContainerProps, ref: Ref) => { - const { Placeholder, loading = false, dataset, style, className, tooltip, slot, children } = props; + const { Placeholder, loading = false, dataset, style, className, tooltip, slot, children, resizeDebounce } = props; useStyles(); const internalStyles: CSSProperties = useMemo(() => { @@ -52,7 +53,7 @@ const ChartContainer: FC = forwardRef((props: ContainerProps, re {dataset?.length > 0 ? ( <> {loading && dataset.length > 0 && } - {dataset.length > 0 && {children}} + {dataset.length > 0 && {children}} ) : (