Skip to content

Commit bcadbea

Browse files
kleinju1017kleinju1017
authored
feat(ScatterChart): initial component implementation (#577)
Closes #570
1 parent 605cb06 commit bcadbea

File tree

17 files changed

+794
-9
lines changed

17 files changed

+794
-9
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export interface BarChartProps extends IChartBaseProps {
9898
/**
9999
* <code>import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';</code>
100100
*/
101-
const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<any>) => {
101+
const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<HTMLDivElement>) => {
102102
const {
103103
loading,
104104
dataset,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const valueAccessor = (attribute) => ({ payload }) => {
9696
/**
9797
* <code>import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/ColumnChart';</code>
9898
*/
99-
const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, ref: Ref<any>) => {
99+
const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, ref: Ref<HTMLDivElement>) => {
100100
const {
101101
loading,
102102
dataset,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ type AvailableChartTypes = 'line' | 'bar' | 'area' | string;
107107
/**
108108
* <code>import { ComposedChart } from '@ui5/webcomponents-react-charts/lib/ComposedChart';</code>
109109
*/
110-
const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartProps, ref: Ref<any>) => {
110+
const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartProps, ref: Ref<HTMLDivElement>) => {
111111
const {
112112
loading,
113113
dataset,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const measureDefaults = {
8383
/**
8484
* <code>import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';</code>
8585
*/
86-
const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Ref<any>) => {
86+
const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Ref<HTMLDivElement>) => {
8787
const {
8888
dataset,
8989
loading,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const microBarChartMargin = { left: -30, right: 30, top: 40, bottom: 30 };
7878
/**
7979
* <code>import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';</code>
8080
*/
81-
const MicroBarChart: FC<MicroBarChartProps> = forwardRef((props: MicroBarChartProps, ref: Ref<any>) => {
81+
const MicroBarChart: FC<MicroBarChartProps> = forwardRef((props: MicroBarChartProps, ref: Ref<HTMLDivElement>) => {
8282
const { loading, dataset, onDataPointClick, style, className, tooltip, slot } = props;
8383

8484
const chartRef = useConsolidatedRef<any>(ref);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export interface PieChartProps extends IChartBaseProps<IPolarChartConfig> {
5858
/**
5959
* <code>import { PieChart } from '@ui5/webcomponents-react-charts/lib/PieChart';</code>
6060
*/
61-
const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<any>) => {
61+
const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<HTMLDivElement>) => {
6262
const {
6363
loading,
6464
dataset,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const measureDefaults = {
6868
/**
6969
* <code>import { RadarChart } from '@ui5/webcomponents-react-charts/lib/RadarChart';</code>
7070
*/
71-
const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref: Ref<any>) => {
71+
const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref: Ref<HTMLDivElement>) => {
7272
const {
7373
loading,
7474
dataset,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const radialBarLabelStyle = { fontSize: ThemingParameters.sapFontHeader3Size, fi
2121
/**
2222
* <code>import { RadialChart } from '@ui5/webcomponents-react-charts/lib/RadialChart';</code>
2323
*/
24-
const RadialChart: FC<RadialChartProps> = forwardRef((props: RadialChartProps, ref: Ref<any>) => {
24+
const RadialChart: FC<RadialChartProps> = forwardRef((props: RadialChartProps, ref: Ref<HTMLDivElement>) => {
2525
const { maxValue = 100, value, displayValue, onDataPointClick, color, style, className, tooltip, slot } = props;
2626

2727
const range = useMemo(() => {

‎packages/charts/src/components/ScatterChart/Placeholder.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
2+
import React from 'react';
3+
import ContentLoader from 'react-content-loader';
4+
5+
export const ScatterChartPlaceholder = (props) => {
6+
return (
7+
<ContentLoader
8+
viewBox="0 0 165 145"
9+
preserveAspectRatio="xMidYMid meet"
10+
width="100%"
11+
height="100%"
12+
speed={2}
13+
backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
14+
foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
15+
backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
16+
{...props}
17+
>
18+
<rect x="10" y="135" width="135" height="1" />
19+
<circle cx="20" cy="90" r="2" />
20+
<circle cx="40" cy="58" r="3" />
21+
<circle cx="60" cy="108" r="14" />
22+
<circle cx="85" cy="87" r="8" />
23+
<circle cx="105" cy="50" r="6" />
24+
<circle cx="125" cy="115" r="4" />
25+
<circle cx="78" cy="58" r="10" />
26+
<circle cx="28" cy="115" r="4" />
27+
</ContentLoader>
28+
);
29+
};

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { action } from '@storybook/addon-actions';
2+
import { boolean } from '@storybook/addon-knobs';
3+
import React from 'react';
4+
import { ScatterChart } from '@ui5/webcomponents-react-charts/lib/ScatterChart';
5+
import { scatterColorDataSet, scatterComplexDataSet } from '../../resources/DemoProps';
6+
7+
export default {
8+
title: 'Charts / ScatterChart',
9+
component: ScatterChart
10+
};
11+
12+
export const renderStory = () => (
13+
<ScatterChart
14+
loading={boolean('loading', false)}
15+
noLegend={boolean('noLegend', false)}
16+
noAnimation={boolean('noAnimation', false)}
17+
onDataPointClick={action('onDataPointClick')}
18+
onLegendClick={action('onLegendClick')}
19+
dataset={scatterComplexDataSet}
20+
style={{ width: '100%' }}
21+
measures={[
22+
{
23+
accessor: 'users',
24+
label: 'Users',
25+
axis: 'x'
26+
},
27+
{
28+
accessor: 'sessions',
29+
label: 'Sessions',
30+
formatter: (val) => `${val}k`,
31+
axis: 'y'
32+
},
33+
{
34+
accessor: 'volume',
35+
axis: 'z'
36+
}
37+
]}
38+
/>
39+
);
40+
41+
renderStory.story = {
42+
name: 'Default'
43+
};
44+
45+
export const renderStoryWithCustomColor = () => (
46+
<ScatterChart
47+
loading={boolean('loading', false)}
48+
noLegend={boolean('noLegend', false)}
49+
noAnimation={boolean('noAnimation', false)}
50+
onDataPointClick={action('onDataPointClick')}
51+
dataset={scatterColorDataSet}
52+
style={{ width: '100%' }}
53+
measures={[
54+
{
55+
accessor: 'users',
56+
label: 'Users',
57+
axis: 'x'
58+
},
59+
{
60+
accessor: 'sessions',
61+
label: 'Sessions',
62+
axis: 'y'
63+
},
64+
{
65+
accessor: 'volume',
66+
axis: 'z'
67+
}
68+
]}
69+
/>
70+
);
71+
72+
renderStoryWithCustomColor.story = {
73+
name: 'With custom color'
74+
};
75+
76+
export const loadingPlaceholder = () => <ScatterChart style={{ width: '100%' }} measures={[]} />;
77+
78+
loadingPlaceholder.story = {
79+
name: 'Loading placeholder'
80+
};

‎packages/charts/src/components/ScatterChart/ScatterChart.test.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { action } from '@storybook/addon-actions';
2+
import { boolean } from '@storybook/addon-knobs';
3+
import { mount } from 'enzyme';
4+
import * as React from 'react';
5+
import { scatterComplexDataSet } from '../../resources/DemoProps';
6+
import { ScatterChart } from '@ui5/webcomponents-react-charts/lib/ScatterChart';
7+
8+
describe('Scatter Chart', () => {
9+
test('Renders with data', () => {
10+
expect(
11+
mount(
12+
<ScatterChart
13+
loading={boolean('loading', false)}
14+
onDataPointClick={action('onDataPointClick')}
15+
onLegendClick={action('onLegendClick')}
16+
dataset={scatterComplexDataSet}
17+
style={{ width: '100%' }}
18+
measures={[
19+
{
20+
accessor: 'users',
21+
label: 'Users',
22+
axis: 'x'
23+
},
24+
{
25+
accessor: 'sessions',
26+
label: 'Sessions',
27+
axis: 'y'
28+
},
29+
{
30+
accessor: 'volume',
31+
axis: 'z'
32+
}
33+
]}
34+
/>
35+
).render()
36+
).toMatchSnapshot();
37+
});
38+
39+
test('loading placeholder', () => {
40+
const wrapper = mount(<ScatterChart style={{ width: '30%' }} measures={[]} />);
41+
expect(wrapper.render()).toMatchSnapshot();
42+
});
43+
});

0 commit comments

Comments
 (0)