Skip to content

Commit 970ca14

Browse files
Mash707mattnolting
Mash707
authored and
mattnolting
committed
chore(chart donut utilization): convert to typescript part two (patternfly#11822)
* chore(chart donut utilization): convert to typescript part two * updated usage of hooks * updated markdown file to include necessary imports
1 parent 5749c67 commit 970ca14

10 files changed

+495
-357
lines changed

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

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

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

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

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

‎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)