Skip to content

Commit 7a8a8cc

Browse files
Mash707Mash707
committed
chore(chart donut utilization): convert to typescript part two
1 parent f8b21b5 commit 7a8a8cc

10 files changed

Lines changed: 490 additions & 357 deletions

‎packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartDonutUtilization.md‎

Lines changed: 9 additions & 357 deletions
Large diffs are not rendered by default.

‎packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartUtilInvertedStatic.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
2+
3+
interface UsageData {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const ChartUtilInvertedStatic: React.FunctionComponent = () => {
10+
const [used, setUsed] = React.useState(100);
11+
12+
React.useEffect(() => {
13+
const interval = setInterval(() => {
14+
setUsed((prevUsed) => {
15+
const val = (prevUsed - 10 + 100) % 100;
16+
return val;
17+
});
18+
}, 1000);
19+
20+
return () => clearInterval(interval);
21+
}, []);
22+
23+
const dataThreshold: UsageData[] = [
24+
{ x: 'Warning at 60%', y: 60 },
25+
{ x: 'Danger at 20%', y: 20 }
26+
];
27+
const dataUtil: UsageData = { x: 'Storage capacity', y: used };
28+
const legendData: UsageData[] = [
29+
{ name: `Storage capacity: ${used}%` },
30+
{ name: 'Warning threshold at 60%' },
31+
{ name: 'Danger threshold at 20%' }
32+
];
33+
34+
return (
35+
<div style={{ height: '230px', width: '500px' }}>
36+
<ChartDonutThreshold
37+
ariaDesc="Storage capacity"
38+
ariaTitle="Donut utilization chart with static threshold example"
39+
constrainToVisibleArea
40+
data={dataThreshold}
41+
invert
42+
labels={({ datum }) => (datum.x ? datum.x : null)}
43+
name="chart12"
44+
padding={{
45+
bottom: 20,
46+
left: 20,
47+
right: 290, // Adjusted to accommodate legend
48+
top: 20
49+
}}
50+
width={500}
51+
>
52+
<ChartDonutUtilization
53+
data={dataUtil}
54+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
55+
legendData={legendData}
56+
legendOrientation="vertical"
57+
subTitle="of 100 GBps"
58+
title={`${used}%`}
59+
thresholds={[{ value: 60 }, { value: 20 }]}
60+
/>
61+
</ChartDonutThreshold>
62+
</div>
63+
);
64+
};

‎packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartUtilSmallRightAlignedSubtitle.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
2+
3+
interface UsageData {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const ChartUtilSmallRightAlignedSubtitle: React.FunctionComponent = () => {
10+
const dataThreshold: UsageData[] = [
11+
{ x: 'Warning at 60%', y: 60 },
12+
{ x: 'Danger at 90%', y: 90 }
13+
];
14+
const dataUtil: UsageData = { x: 'Storage capacity', y: 45 };
15+
const legendData: UsageData[] = [
16+
{ name: `Storage capacity: 45%` },
17+
{ name: 'Warning threshold at 60%' },
18+
{ name: 'Danger threshold at 90%' }
19+
];
20+
21+
return (
22+
<div style={{ height: '225px', width: '675px' }}>
23+
<ChartDonutThreshold
24+
ariaDesc="Storage capacity"
25+
ariaTitle="Donut utilization chart with static threshold example"
26+
constrainToVisibleArea
27+
data={dataThreshold}
28+
height={225}
29+
labels={({ datum }) => (datum.x ? datum.x : null)}
30+
name="chart18"
31+
padding={{
32+
bottom: 60, // Adjusted to accommodate legend
33+
left: 20,
34+
right: 20,
35+
top: 20
36+
}}
37+
subTitlePosition="right"
38+
width={675}
39+
>
40+
<ChartDonutUtilization
41+
data={dataUtil}
42+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
43+
legendData={legendData}
44+
legendPosition="bottom"
45+
subTitle="of 100 GBps"
46+
title="45%"
47+
thresholds={[{ value: 60 }, { value: 90 }]}
48+
/>
49+
</ChartDonutThreshold>
50+
</div>
51+
);
52+
};

‎packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartUtilSmallStatic.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
2+
3+
interface UsageData {
4+
x: string;
5+
y: number;
6+
}
7+
8+
export const ChartUtilSmallStatic: React.FunctionComponent = () => {
9+
const dataThreshold: UsageData[] = [
10+
{ x: 'Warning at 60%', y: 60 },
11+
{ x: 'Danger at 90%', y: 90 }
12+
];
13+
const dataUtil: UsageData = { x: 'Storage capacity', y: 45 };
14+
15+
return (
16+
<div style={{ height: '185px', width: '185px' }}>
17+
<ChartDonutThreshold
18+
ariaDesc="Storage capacity"
19+
ariaTitle="Donut utilization chart with static threshold example"
20+
constrainToVisibleArea
21+
data={dataThreshold}
22+
height={185}
23+
labels={({ datum }) => (datum.x ? datum.x : null)}
24+
name="chart15"
25+
width={185}
26+
>
27+
<ChartDonutUtilization
28+
data={dataUtil}
29+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
30+
subTitle="of 100 GBps"
31+
title="45%"
32+
/>
33+
</ChartDonutThreshold>
34+
</div>
35+
);
36+
};

‎packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartUtilSmallStaticRightLegend.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
2+
3+
interface UsageData {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const ChartUtilSmallStaticRightLegend: React.FunctionComponent = () => {
10+
const [used, setUsed] = React.useState(0);
11+
12+
React.useEffect(() => {
13+
const interval = setInterval(() => {
14+
setUsed((prevUsed) => {
15+
const val = (prevUsed + 10) % 100;
16+
return val;
17+
});
18+
}, 1000);
19+
20+
return () => clearInterval(interval);
21+
}, []);
22+
23+
const dataThreshold: UsageData[] = [
24+
{ x: 'Warning at 60%', y: 60 },
25+
{ x: 'Danger at 90%', y: 90 }
26+
];
27+
const dataUtil: UsageData = { x: 'Storage capacity', y: used };
28+
const legendData: UsageData[] = [
29+
{ name: `Storage capacity: ${used}%` },
30+
{ name: 'Warning threshold at 60%' },
31+
{ name: 'Danger threshold at 90%' }
32+
];
33+
34+
return (
35+
<div style={{ height: '185px', width: '425px' }}>
36+
<ChartDonutThreshold
37+
ariaDesc="Storage capacity"
38+
ariaTitle="Donut utilization chart with static threshold example"
39+
constrainToVisibleArea
40+
data={dataThreshold}
41+
height={185}
42+
labels={({ datum }) => (datum.x ? datum.x : null)}
43+
name="chart16"
44+
padding={{
45+
bottom: 20,
46+
left: 20,
47+
right: 260, // Adjusted to accommodate legend
48+
top: 20
49+
}}
50+
width={425}
51+
>
52+
<ChartDonutUtilization
53+
data={dataUtil}
54+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
55+
legendData={legendData}
56+
legendOrientation="vertical"
57+
subTitle="of 100 GBps"
58+
title={`${used}%`}
59+
thresholds={[{ value: 60 }, { value: 90 }]}
60+
/>
61+
</ChartDonutThreshold>
62+
</div>
63+
);
64+
};

‎packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartUtilSmallSubtitle.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
2+
3+
interface UsageData {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const ChartUtilSmallSubtitle: React.FunctionComponent = () => {
10+
const dataThreshold: UsageData[] = [
11+
{ x: 'Warning at 60%', y: 60 },
12+
{ x: 'Danger at 90%', y: 90 }
13+
];
14+
const dataUtil: UsageData = { x: 'Storage capacity', y: 45 };
15+
const legendData: UsageData[] = [
16+
{ name: `Storage capacity: 45%` },
17+
{ name: 'Warning threshold at 60%' },
18+
{ name: 'Danger threshold at 90%' }
19+
];
20+
21+
return (
22+
<div style={{ height: '200px', width: '425px' }}>
23+
<ChartDonutThreshold
24+
ariaDesc="Storage capacity"
25+
ariaTitle="Donut utilization chart with static threshold example"
26+
constrainToVisibleArea
27+
data={dataThreshold}
28+
height={200}
29+
labels={({ datum }) => (datum.x ? datum.x : null)}
30+
name="chart17"
31+
padding={{
32+
bottom: 30, // Adjusted to accommodate label
33+
left: 20,
34+
right: 260, // Adjusted to accommodate legend
35+
top: 20
36+
}}
37+
subTitlePosition="bottom"
38+
width={425}
39+
>
40+
<ChartDonutUtilization
41+
data={dataUtil}
42+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
43+
legendData={legendData}
44+
legendOrientation="vertical"
45+
subTitle="of 100 GBps"
46+
title="45%"
47+
thresholds={[{ value: 60 }, { value: 90 }]}
48+
/>
49+
</ChartDonutThreshold>
50+
</div>
51+
);
52+
};

‎packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartUtilStatic.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
2+
3+
interface UsageData {
4+
x: string;
5+
y: number;
6+
}
7+
8+
export const ChartUtilStatic: React.FunctionComponent = () => {
9+
const dataThreshold: UsageData[] = [
10+
{ x: 'Warning at 60%', y: 60 },
11+
{ x: 'Danger at 90%', y: 90 }
12+
];
13+
const dataUtil: UsageData = { x: 'Storage capacity', y: 45 };
14+
15+
return (
16+
<div style={{ height: '230px', width: '230px' }}>
17+
<ChartDonutThreshold
18+
ariaDesc="Storage capacity"
19+
ariaTitle="Donut utilization chart with static threshold example"
20+
constrainToVisibleArea
21+
data={dataThreshold}
22+
labels={({ datum }) => (datum.x ? datum.x : null)}
23+
name="chart10"
24+
>
25+
<ChartDonutUtilization
26+
data={dataUtil}
27+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
28+
subTitle="of 100 GBps"
29+
title="45%"
30+
/>
31+
</ChartDonutThreshold>
32+
</div>
33+
);
34+
};

‎packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartUtilStaticBottomLegend.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
2+
3+
interface UsageData {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const ChartUtilStaticBottomLegend: React.FunctionComponent = () => {
10+
const dataThreshold: UsageData[] = [
11+
{ x: 'Warning at 60%', y: 60 },
12+
{ x: 'Danger at 90%', y: 90 }
13+
];
14+
const dataUtil: UsageData = { x: 'Storage capacity', y: 45 };
15+
const legendData: UsageData[] = [
16+
{ name: `Storage capacity: 45%` },
17+
{ name: 'Warning threshold at 60%' },
18+
{ name: 'Danger threshold at 90%' }
19+
];
20+
21+
return (
22+
<div style={{ height: '275px', width: '675px' }}>
23+
<ChartDonutThreshold
24+
ariaDesc="Storage capacity"
25+
ariaTitle="Donut utilization chart with static threshold example"
26+
constrainToVisibleArea
27+
data={dataThreshold}
28+
height={275}
29+
labels={({ datum }) => (datum.x ? datum.x : null)}
30+
name="chart14"
31+
padding={{
32+
bottom: 65, // Adjusted to accommodate legend
33+
left: 20,
34+
right: 20,
35+
top: 20
36+
}}
37+
width={675}
38+
>
39+
<ChartDonutUtilization
40+
data={dataUtil}
41+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
42+
legendData={legendData}
43+
legendPosition="bottom"
44+
subTitle="of 100 GBps"
45+
title="45%"
46+
/>
47+
</ChartDonutThreshold>
48+
</div>
49+
);
50+
};

0 commit comments

Comments
 (0)