Skip to content

Commit 82682ce

Browse files
MarcusNotheisMarcusNotheis
committed
deprecate old charts
1 parent fb5888f commit 82682ce

34 files changed

+221
-155
lines changed

‎packages/charts/src/components/BarChart/BarChart.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@ export interface BarChartProps extends RechartBaseProps {
9191

9292
/**
9393
* <code>import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart';</code>
94-
* **This component is under active development. The API is not stable yet and might change without further notice.**
9594
*/
9695
const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<any>) => {
9796
const {

‎packages/charts/src/components/BarChart/BarRechart.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React from 'react';
55
import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
66

77
export default {
8-
title: 'Charts - Unstable / BarChart',
8+
title: 'Charts / BarChart',
99
component: BarChart
1010
};
1111

‎packages/charts/src/components/BarChart/demo.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const options = {
3535
};
3636

3737
export default {
38-
title: 'Charts / BarChart',
38+
title: 'Charts - Deprecated / BarChart',
3939
component: BarChart
4040
};
4141

‎packages/charts/src/components/BarChart/index.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1+
import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
12
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
3+
import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils';
4+
import { getTextWidth } from '@ui5/webcomponents-react-charts/lib/Utils';
25
import { withChartContainer } from '@ui5/webcomponents-react-charts/lib/withChartContainer';
36
import bestContrast from 'get-best-contrast-color';
4-
import React, { FC, forwardRef, Ref, useMemo } from 'react';
7+
import React, { FC, forwardRef, Ref, useEffect, useMemo } from 'react';
58
import { HorizontalBar } from 'react-chartjs-2';
6-
import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
79
import { DEFAULT_OPTIONS } from '../../config';
810
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
911
import { InternalProps } from '../../interfaces/InternalProps';
1012
import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
1113
import { getCssVariableValue } from '../../themes/Utils';
1214
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
1315
import { useChartData } from '../../util/populateData';
14-
import { getTextWidth } from '@ui5/webcomponents-react-charts/lib/Utils';
1516
import { formatAxisCallback, formatDataLabel, formatTooltipLabel, useMergedConfig } from '../../util/utils_deprecated';
1617
import { BarChartPlaceholder } from './Placeholder';
1718

@@ -33,6 +34,13 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref<any>) =
3334
legendRef
3435
} = props as BarChartPropTypes & InternalProps;
3536

37+
useEffect(() => {
38+
deprecationNotice(
39+
'BarChart',
40+
"This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/BarChart' instead."
41+
);
42+
}, []);
43+
3644
const theme = getTheme();
3745
const data = useChartData(labels, datasets, colors, theme);
3846

@@ -115,6 +123,8 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref<any>) =
115123
BarChartComponent.LoadingPlaceholder = BarChartPlaceholder;
116124
/**
117125
* <code>import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';</code>
126+
* <br />
127+
* <b>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.</b>
118128
*/
119129
const BarChart: FC<BarChartPropTypes> = withChartContainer(BarChartComponent);
120130

‎packages/charts/src/components/ColumnChart/ColumnChart.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ const measureDefaults = {
8989

9090
/**
9191
* <code>import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/next/ColumnChart';</code>
92-
* **This component is under active development. The API is not stable yet and might change without further notice.**
9392
*/
9493
const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, ref: Ref<any>) => {
9594
const {

‎packages/charts/src/components/ColumnChart/ColumnRechart.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React from 'react';
55
import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
66

77
export default {
8-
title: 'Charts - Unstable / ColumnChart',
8+
title: 'Charts / ColumnChart',
99
component: ColumnChart
1010
};
1111

@@ -148,7 +148,7 @@ renderCustomDataLabelStory.story = {
148148
name: 'With formatter'
149149
};
150150

151-
export const loadingPlaceholder = () => <ColumnChart style={{ width: '30%' }} dimensions={[]} measures={[]}/>;
151+
export const loadingPlaceholder = () => <ColumnChart style={{ width: '30%' }} dimensions={[]} measures={[]} />;
152152

153153
loadingPlaceholder.story = {
154154
name: 'Loading placeholder'

‎packages/charts/src/components/ColumnChart/demo.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const growthLineOptions = {
6868
};
6969

7070
export default {
71-
title: 'Charts / ColumnChart',
71+
title: 'Charts - Deprecated / ColumnChart',
7272
component: ColumnChart
7373
};
7474

‎packages/charts/src/components/ColumnChart/index.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
2+
import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils';
23
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
34
import { getTextHeight, getTextWidth } from '@ui5/webcomponents-react-charts/lib/Utils';
45
import { withChartContainer } from '@ui5/webcomponents-react-charts/lib/withChartContainer';
56
import bestContrast from 'get-best-contrast-color';
6-
import React, { FC, forwardRef, Ref, useMemo } from 'react';
7+
import React, { FC, forwardRef, Ref, useEffect, useMemo } from 'react';
78
import { Bar } from 'react-chartjs-2';
89
import { DEFAULT_OPTIONS } from '../../config';
910
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
@@ -33,6 +34,13 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref<a
3334
legendRef
3435
} = props as ColumnChartPropTypes & InternalProps;
3536

37+
useEffect(() => {
38+
deprecationNotice(
39+
'ColumnChart',
40+
"This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/ColumnChart' instead."
41+
);
42+
}, []);
43+
3644
const theme = getTheme();
3745
const data = useChartData(labels, datasets, colors, theme);
3846

@@ -118,6 +126,8 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref<a
118126
ColumnChartComponent.LoadingPlaceholder = ColumnChartPlaceholder;
119127
/**
120128
* <code>import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/ColumnChart';</code>
129+
* <br />
130+
* <b>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.</b>
121131
*/
122132
const ColumnChart: FC<ColumnChartPropTypes> = withChartContainer(ColumnChartComponent);
123133

‎packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet }
55
import { boolean, select } from '@storybook/addon-knobs';
66

77
export default {
8-
title: 'Charts - Unstable / ComposedChart',
8+
title: 'Charts / ComposedChart',
99
component: ComposedChart
1010
};
1111

‎packages/charts/src/components/ComposedChart/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ type AvailableChartTypes = 'line' | 'bar' | 'area' | string;
106106

107107
/**
108108
* <code>import { ComposedChart } from '@ui5/webcomponents-react-charts/lib/next/ComposedChart';</code>
109-
* **This component is under active development. The API is not stable yet and might change without further notice.**
110109
*/
111110
const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartProps, ref: Ref<any>) => {
112111
const {

‎packages/charts/src/components/DonutChart/DonutChart.stories.tsx

Lines changed: 77 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React from 'react';
55
import { simpleDataSet } from '../../resources/DemoProps';
66

77
export default {
8-
title: 'Charts - Unstable / DonutChart',
8+
title: 'Charts / DonutChart',
99
component: DonutChart
1010
};
1111

@@ -33,76 +33,73 @@ renderStory.story = {
3333
name: 'Default'
3434
};
3535

36-
export const renderCustomColorStory = () =>
37-
(
38-
<DonutChart
39-
loading={boolean('loading', false)}
40-
noLegend={boolean('noLegend', false)}
41-
noAnimation={boolean('noAnimation', false)}
42-
onLegendClick={action('onLegendClick')}
43-
onDataPointClick={action('onDataPointClick')}
44-
style={{ width: '50%' }}
45-
dataset={simpleDataSet}
46-
dimension={{
47-
accessor: 'name'
48-
}}
49-
measure={{
50-
accessor: 'users',
51-
colors: ['#f00', 'green', 'var(--sapNegativeColor)']
52-
}}
53-
/>
54-
);
36+
export const renderCustomColorStory = () => (
37+
<DonutChart
38+
loading={boolean('loading', false)}
39+
noLegend={boolean('noLegend', false)}
40+
noAnimation={boolean('noAnimation', false)}
41+
onLegendClick={action('onLegendClick')}
42+
onDataPointClick={action('onDataPointClick')}
43+
style={{ width: '50%' }}
44+
dataset={simpleDataSet}
45+
dimension={{
46+
accessor: 'name'
47+
}}
48+
measure={{
49+
accessor: 'users',
50+
colors: ['#f00', 'green', 'var(--sapNegativeColor)']
51+
}}
52+
/>
53+
);
5554

5655
renderCustomColorStory.story = {
5756
name: 'With custom color'
5857
};
5958

60-
export const withPaddingStory = () =>
61-
(
62-
<DonutChart
63-
loading={boolean('loading', false)}
64-
noLegend={boolean('noLegend', false)}
65-
noAnimation={boolean('noAnimation', false)}
66-
onLegendClick={action('onLegendClick')}
67-
onDataPointClick={action('onDataPointClick')}
68-
style={{ width: '50%' }}
69-
dataset={simpleDataSet}
70-
dimension={{
71-
accessor: 'name'
72-
}}
73-
measure={{
74-
accessor: 'users'
75-
}}
76-
chartConfig={{ paddingAngle: 5 }}
77-
/>
78-
);
59+
export const withPaddingStory = () => (
60+
<DonutChart
61+
loading={boolean('loading', false)}
62+
noLegend={boolean('noLegend', false)}
63+
noAnimation={boolean('noAnimation', false)}
64+
onLegendClick={action('onLegendClick')}
65+
onDataPointClick={action('onDataPointClick')}
66+
style={{ width: '50%' }}
67+
dataset={simpleDataSet}
68+
dimension={{
69+
accessor: 'name'
70+
}}
71+
measure={{
72+
accessor: 'users'
73+
}}
74+
chartConfig={{ paddingAngle: 5 }}
75+
/>
76+
);
7977

8078
withPaddingStory.story = {
8179
name: 'With padding angle'
8280
};
8381

84-
export const withCustomRadiusStory = () =>
85-
(
86-
<DonutChart
87-
loading={boolean('loading', false)}
88-
noLegend={boolean('noLegend', false)}
89-
noAnimation={boolean('noAnimation', false)}
90-
onLegendClick={action('onLegendClick')}
91-
onDataPointClick={action('onDataPointClick')}
92-
style={{ width: '50%' }}
93-
dataset={simpleDataSet}
94-
chartConfig={{
95-
innerRadius: text('innerRadius', '20%'),
96-
outerRadius: text('outerRadius', '90%'),
97-
}}
98-
dimension={{
99-
accessor: 'name'
100-
}}
101-
measure={{
102-
accessor: 'users'
103-
}}
104-
/>
105-
);
82+
export const withCustomRadiusStory = () => (
83+
<DonutChart
84+
loading={boolean('loading', false)}
85+
noLegend={boolean('noLegend', false)}
86+
noAnimation={boolean('noAnimation', false)}
87+
onLegendClick={action('onLegendClick')}
88+
onDataPointClick={action('onDataPointClick')}
89+
style={{ width: '50%' }}
90+
dataset={simpleDataSet}
91+
chartConfig={{
92+
innerRadius: text('innerRadius', '20%'),
93+
outerRadius: text('outerRadius', '90%')
94+
}}
95+
dimension={{
96+
accessor: 'name'
97+
}}
98+
measure={{
99+
accessor: 'users'
100+
}}
101+
/>
102+
);
106103

107104
withCustomRadiusStory.story = {
108105
name: 'With custom inner radius'
@@ -114,26 +111,25 @@ loadingPlaceholder.story = {
114111
name: 'Loading placeholder'
115112
};
116113

117-
export const withFormatter = () =>
118-
(
119-
<DonutChart
120-
loading={boolean('loading', false)}
121-
noLegend={boolean('noLegend', false)}
122-
noAnimation={boolean('noAnimation', false)}
123-
onLegendClick={action('onLegendClick')}
124-
onDataPointClick={action('onDataPointClick')}
125-
style={{ width: '50%' }}
126-
dataset={simpleDataSet}
127-
dimension={{
128-
accessor: 'name',
129-
formatter: (el) => el.slice(0, 3)
130-
}}
131-
measure={{
132-
accessor: 'users',
133-
formatter: (el) => el / 10
134-
}}
135-
/>
136-
);
114+
export const withFormatter = () => (
115+
<DonutChart
116+
loading={boolean('loading', false)}
117+
noLegend={boolean('noLegend', false)}
118+
noAnimation={boolean('noAnimation', false)}
119+
onLegendClick={action('onLegendClick')}
120+
onDataPointClick={action('onDataPointClick')}
121+
style={{ width: '50%' }}
122+
dataset={simpleDataSet}
123+
dimension={{
124+
accessor: 'name',
125+
formatter: (el) => el.slice(0, 3)
126+
}}
127+
measure={{
128+
accessor: 'users',
129+
formatter: (el) => el / 10
130+
}}
131+
/>
132+
);
137133

138134
withFormatter.story = {
139135
name: 'With formatter'

‎packages/charts/src/components/DonutChart/DonutChart.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { PieChart, PieChartProps } from '../PieChart/PieChart';
33

44
/**
55
* <code>import { DonutChart } from '@ui5/webcomponents-react-charts/lib/next/DonutChart';</code>
6-
* **This component is under active development. The API is not stable yet and might change without further notice.**
76
*/
87
const DonutChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref) => {
98
const chartConfig = useMemo(() => {

‎packages/charts/src/components/DonutChart/demo.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
66
const dataset = [{ data: [65, 59, 80, 81, 56, 55, 40] }];
77

88
export default {
9-
title: 'Charts / DonutChart',
9+
title: 'Charts - Deprecated / DonutChart',
1010
component: DonutChart
1111
};
1212

‎packages/charts/src/components/DonutChart/index.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils';
12
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
23
import { withChartContainer } from '@ui5/webcomponents-react-charts/lib/withChartContainer';
3-
import React, { FC, forwardRef, Ref, useMemo } from 'react';
4+
import React, { FC, forwardRef, Ref, useEffect, useMemo } from 'react';
45
import { Pie } from 'react-chartjs-2';
56
import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
67
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
@@ -30,6 +31,13 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Ref<any
3031
legendRef
3132
} = props as DonutChartPropTypes & InternalProps;
3233

34+
useEffect(() => {
35+
deprecationNotice(
36+
'DonutChart',
37+
"This component is deprecated and will be removed with v0.10.0. Please use '@ui5/webcomponents-react-charts/lib/next/DonutChart' instead."
38+
);
39+
}, []);
40+
3341
const theme = getTheme();
3442
const data = useChartData(labels, datasets, colors, theme, true);
3543

@@ -75,6 +83,8 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Ref<any
7583
DonutChartComponent.LoadingPlaceholder = PieChartPlaceholder;
7684
/**
7785
* <code>import { DonutChart } from '@ui5/webcomponents-react-charts/lib/DonutChart';</code>
86+
* <br />
87+
* <b>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.</b>
7888
*/
7989
const DonutChart: FC<DonutChartPropTypes> = withChartContainer(DonutChartComponent);
8090

0 commit comments

Comments
 (0)