Skip to content

Commit b032dac

Browse files
Mash707Mash707
authored
chore(skeletons): convert to typescript (#11902)
* chore(skeletons): convert to typescript * corrected function names
1 parent be2b744 commit b032dac

7 files changed

Lines changed: 398 additions & 308 deletions

File tree

‎packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsAreaChart.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import {
2+
Chart,
3+
ChartArea,
4+
ChartAxis,
5+
ChartGroup,
6+
ChartThemeColor,
7+
ChartVoronoiContainer
8+
} from '@patternfly/react-charts/victory';
9+
import { Switch } from '@patternfly/react-core';
10+
import { useState } from 'react';
11+
12+
interface PetData {
13+
name?: string;
14+
x?: string;
15+
y?: number;
16+
}
17+
18+
export const SkeletonsAreaChart: React.FunctionComponent = () => {
19+
const [isChecked, setIsChecked] = useState<boolean>(true);
20+
21+
const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
22+
setIsChecked(checked);
23+
};
24+
25+
const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }];
26+
const data1: PetData[] = [
27+
{ name: 'Cats', x: '2015', y: 3 },
28+
{ name: 'Cats', x: '2016', y: 4 },
29+
{ name: 'Cats', x: '2017', y: 8 },
30+
{ name: 'Cats', x: '2018', y: 6 }
31+
];
32+
33+
const data2: PetData[] = [
34+
{ name: 'Dogs', x: '2015', y: 2 },
35+
{ name: 'Dogs', x: '2016', y: 3 },
36+
{ name: 'Dogs', x: '2017', y: 4 },
37+
{ name: 'Dogs', x: '2018', y: 5 },
38+
{ name: 'Dogs', x: '2019', y: 6 }
39+
];
40+
41+
const data3: PetData[] = [
42+
{ name: 'Birds', x: '2015', y: 1 },
43+
{ name: 'Birds', x: '2016', y: 2 },
44+
{ name: 'Birds', x: '2017', y: 3 },
45+
{ name: 'Birds', x: '2018', y: 2 },
46+
{ name: 'Birds', x: '2019', y: 4 }
47+
];
48+
49+
return (
50+
<>
51+
<Switch id="area-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
52+
<div style={{ height: '200px', width: '800px' }}>
53+
<Chart
54+
ariaDesc="Average number of pets"
55+
ariaTitle="Area chart example"
56+
containerComponent={
57+
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
58+
}
59+
legendData={legendData}
60+
legendOrientation="vertical"
61+
legendPosition="right"
62+
height={200}
63+
maxDomain={{ y: 9 }}
64+
name="chart1"
65+
padding={{
66+
bottom: 50,
67+
left: 50,
68+
right: 200, // Adjusted to accommodate legend
69+
top: 50
70+
}}
71+
themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
72+
width={800}
73+
>
74+
<ChartAxis />
75+
<ChartAxis dependentAxis showGrid />
76+
<ChartGroup>
77+
<ChartArea data={data1} interpolation="monotoneX" />
78+
<ChartArea data={data2} interpolation="monotoneX" />
79+
<ChartArea data={data3} interpolation="monotoneX" />
80+
</ChartGroup>
81+
</Chart>
82+
</div>
83+
</>
84+
);
85+
};

‎packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBarChart.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { Switch } from '@patternfly/react-core';
2+
import {
3+
Chart,
4+
ChartBar,
5+
ChartAxis,
6+
ChartGroup,
7+
ChartThemeColor,
8+
ChartVoronoiContainer
9+
} from '@patternfly/react-charts/victory';
10+
import { useState } from 'react';
11+
12+
interface PetData {
13+
name?: string;
14+
x?: string;
15+
y?: number;
16+
}
17+
18+
export const SkeletonsBarChart: React.FunctionComponent = () => {
19+
const [isChecked, setIsChecked] = useState<boolean>(true);
20+
21+
const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
22+
setIsChecked(checked);
23+
};
24+
25+
const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }];
26+
const data1: PetData[] = [
27+
{ name: 'Cats', x: '2015', y: 1 },
28+
{ name: 'Cats', x: '2016', y: 2 },
29+
{ name: 'Cats', x: '2017', y: 5 },
30+
{ name: 'Cats', x: '2018', y: 3 }
31+
];
32+
33+
const data2: PetData[] = [
34+
{ name: 'Dogs', x: '2015', y: 2 },
35+
{ name: 'Dogs', x: '2016', y: 1 },
36+
{ name: 'Dogs', x: '2017', y: 7 },
37+
{ name: 'Dogs', x: '2018', y: 4 }
38+
];
39+
40+
const data3: PetData[] = [
41+
{ name: 'Birds', x: '2015', y: 4 },
42+
{ name: 'Birds', x: '2016', y: 4 },
43+
{ name: 'Birds', x: '2017', y: 9 },
44+
{ name: 'Birds', x: '2018', y: 7 }
45+
];
46+
47+
const data4: PetData[] = [
48+
{ name: 'Mice', x: '2015', y: 3 },
49+
{ name: 'Mice', x: '2016', y: 3 },
50+
{ name: 'Mice', x: '2017', y: 8 },
51+
{ name: 'Mice', x: '2018', y: 5 }
52+
];
53+
54+
return (
55+
<>
56+
<Switch id="bar-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
57+
<div style={{ height: '250px', width: '600px' }}>
58+
<Chart
59+
ariaDesc="Average number of pets"
60+
ariaTitle="Bar chart example"
61+
containerComponent={
62+
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
63+
}
64+
domain={{ y: [0, 9] }}
65+
domainPadding={{ x: [30, 25] }}
66+
legendData={legendData}
67+
legendOrientation="vertical"
68+
legendPosition="right"
69+
height={250}
70+
name="chart2"
71+
padding={{
72+
bottom: 50,
73+
left: 50,
74+
right: 200, // Adjusted to accommodate legend
75+
top: 50
76+
}}
77+
themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
78+
width={600}
79+
>
80+
<ChartAxis />
81+
<ChartAxis dependentAxis showGrid />
82+
<ChartGroup offset={11}>
83+
<ChartBar data={data1} />
84+
<ChartBar data={data2} />
85+
<ChartBar data={data3} />
86+
<ChartBar data={data4} />
87+
</ChartGroup>
88+
</Chart>
89+
</div>
90+
</>
91+
);
92+
};

‎packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBoxPlotChart.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Switch } from '@patternfly/react-core';
2+
import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
3+
import { useState } from 'react';
4+
5+
interface PetData {
6+
name?: string;
7+
x?: string;
8+
y?: number[];
9+
}
10+
11+
export const SkeletonsBoxPlotChart: React.FunctionComponent = () => {
12+
const [isChecked, setIsChecked] = useState<boolean>(true);
13+
14+
const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
15+
setIsChecked(checked);
16+
};
17+
18+
const legendData: PetData[] = [{ name: 'Cats' }];
19+
const data: PetData[] = [
20+
{ name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
21+
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
22+
{ name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
23+
{ name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
24+
];
25+
26+
return (
27+
<>
28+
<Switch id="boxplot-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
29+
<div style={{ height: '300px', width: '750px' }}>
30+
<Chart
31+
ariaDesc="Average number of pets"
32+
ariaTitle="Bar chart example"
33+
domain={{ y: [0, 12] }}
34+
domainPadding={{ x: [30, 25] }}
35+
legendData={legendData}
36+
legendOrientation="vertical"
37+
legendPosition="right"
38+
height={300}
39+
name="chart3"
40+
padding={{
41+
bottom: 50,
42+
left: 50,
43+
right: 200, // Adjusted to accommodate legend
44+
top: 50
45+
}}
46+
themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
47+
width={750}
48+
>
49+
<ChartAxis />
50+
<ChartAxis dependentAxis showGrid />
51+
<ChartBoxPlot data={data} />
52+
</Chart>
53+
</div>
54+
</>
55+
);
56+
};

‎packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBulletChart.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Switch } from '@patternfly/react-core';
2+
import { ChartBullet, ChartLegend, ChartThemeColor } from '@patternfly/react-charts/victory';
3+
import { useState } from 'react';
4+
5+
interface Data {
6+
name?: string;
7+
y?: number;
8+
}
9+
10+
export const SkeletonsBulletChart: React.FunctionComponent = () => {
11+
const [isChecked, setIsChecked] = useState<boolean>(true);
12+
13+
const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
14+
setIsChecked(checked);
15+
};
16+
17+
const comparativeWarningMeasureData: Data[] = [{ name: 'Warning', y: 88 }];
18+
const comparativeWarningMeasureLegendData: Data[] = [{ name: 'Warning' }];
19+
const primarySegmentedMeasureData: Data[] = [
20+
{ name: 'Measure', y: 25 },
21+
{ name: 'Measure', y: 60 }
22+
];
23+
const primarySegmentedMeasureLegendData: Data[] = [{ name: 'Measure' }, { name: 'Measure' }];
24+
const qualitativeRangeData: Data[] = [
25+
{ name: 'Range', y: 50 },
26+
{ name: 'Range', y: 75 }
27+
];
28+
const qualitativeRangeLegendData: Data[] = [{ name: 'Range' }, { name: 'Range' }];
29+
30+
return (
31+
<>
32+
<Switch id="bullet-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
33+
<div style={{ height: '200px', width: '600px' }}>
34+
<ChartBullet
35+
ariaDesc="Storage capacity"
36+
ariaTitle="Bullet chart example"
37+
comparativeWarningMeasureData={comparativeWarningMeasureData}
38+
comparativeWarningMeasureLegendData={comparativeWarningMeasureLegendData}
39+
constrainToVisibleArea
40+
height={200}
41+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
42+
legendComponent={<ChartLegend gutter={isChecked ? 50 : undefined} />}
43+
maxDomain={{ y: 100 }}
44+
name="chart4"
45+
padding={{
46+
bottom: 50,
47+
left: 150, // Adjusted to accommodate labels
48+
right: 50,
49+
top: 50
50+
}}
51+
primarySegmentedMeasureData={primarySegmentedMeasureData}
52+
primarySegmentedMeasureLegendData={primarySegmentedMeasureLegendData}
53+
qualitativeRangeData={qualitativeRangeData}
54+
qualitativeRangeLegendData={qualitativeRangeLegendData}
55+
subTitle="Details"
56+
title="Text label"
57+
themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
58+
width={600}
59+
/>
60+
</div>
61+
</>
62+
);
63+
};

‎packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutChart.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Switch } from '@patternfly/react-core';
2+
import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
3+
import { useState } from 'react';
4+
5+
interface PetData {
6+
name?: string;
7+
x?: string;
8+
y?: number;
9+
}
10+
11+
export const SkeletonsDonutChart: React.FunctionComponent = () => {
12+
const [isChecked, setIsChecked] = useState<boolean>(true);
13+
14+
const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
15+
setIsChecked(checked);
16+
};
17+
18+
const data: PetData[] = [
19+
{ x: 'Cats', y: 35 },
20+
{ x: 'Dogs', y: 55 },
21+
{ x: 'Birds', y: 10 }
22+
];
23+
24+
return (
25+
<>
26+
<Switch id="donut-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
27+
<div style={{ height: '230px', width: '230px' }}>
28+
<ChartDonut
29+
ariaDesc="Average number of pets"
30+
ariaTitle="Donut chart example"
31+
constrainToVisibleArea
32+
data={data}
33+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
34+
name="chart5"
35+
subTitle="Pets"
36+
themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
37+
title="100"
38+
/>
39+
</div>
40+
</>
41+
);
42+
};

‎packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutUtilizationChart.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Switch } from '@patternfly/react-core';
2+
import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
3+
import { useState } from 'react';
4+
5+
interface Data {
6+
name?: string;
7+
x?: string;
8+
y?: number;
9+
}
10+
11+
export const SkeletonsDonutUtilizationChart: React.FunctionComponent = () => {
12+
const [isChecked, setIsChecked] = useState<boolean>(true);
13+
14+
const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
15+
setIsChecked(checked);
16+
};
17+
18+
const legendData: Data[] = [{ name: `Storage capacity: 75%` }, { name: 'Unused' }];
19+
const data: Data = { x: 'GBps capacity', y: 35 };
20+
21+
return (
22+
<>
23+
<Switch
24+
id="donut-utilization-skeleton-switch"
25+
label="Enable skeleton"
26+
isChecked={isChecked}
27+
onChange={handleChange}
28+
/>
29+
<div style={{ height: '230px', width: '435px' }}>
30+
<ChartDonutUtilization
31+
ariaDesc="Storage capacity"
32+
ariaTitle="Donut utilization chart example"
33+
constrainToVisibleArea
34+
data={data}
35+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
36+
legendData={legendData}
37+
legendOrientation="vertical"
38+
name="chart6"
39+
padding={{
40+
bottom: 20,
41+
left: 20,
42+
right: 225, // Adjusted to accommodate legend
43+
top: 20
44+
}}
45+
subTitle="of 100 GBps"
46+
title="35%"
47+
thresholds={[{ value: 60 }, { value: 90 }]}
48+
themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
49+
width={435}
50+
/>
51+
</div>
52+
</>
53+
);
54+
};

0 commit comments

Comments
 (0)