Skip to content

Commit f632014

Browse files
Mash707Mash707
authored
chore(resize observer): convert to typescript (patternfly#11901)
1 parent 411fd30 commit f632014

4 files changed

Lines changed: 346 additions & 341 deletions

File tree

‎packages/react-charts/src/victory/components/ResizeObserver/examples/ResizeObserverResponsiveBullet.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { ChartBullet } from '@patternfly/react-charts/victory';
2+
import { getResizeObserver } from '@patternfly/react-core';
3+
import { useEffect, useRef, useState } from 'react';
4+
5+
interface Data {
6+
name?: string;
7+
y?: number;
8+
}
9+
10+
export const ResizeObserverResponsiveBullet: React.FunctionComponent = () => {
11+
const containerRef = useRef(null);
12+
const observer = useRef(() => {});
13+
const [extraHeight, setExtraHeight] = useState(0);
14+
const [width, setWidth] = useState(0);
15+
16+
const handleResize = () => {
17+
if (containerRef.current && containerRef.current.clientWidth) {
18+
setWidth(containerRef.current.clientWidth);
19+
}
20+
};
21+
22+
const handleLegendAllowWrap = (newExtraHeight) => {
23+
if (newExtraHeight !== extraHeight) {
24+
setExtraHeight(newExtraHeight);
25+
}
26+
};
27+
28+
const getHeight = (baseHeight) => baseHeight + extraHeight;
29+
30+
useEffect(() => {
31+
observer.current = getResizeObserver(containerRef.current, handleResize);
32+
handleResize();
33+
34+
return () => {
35+
observer.current();
36+
};
37+
}, []);
38+
39+
const height = getHeight(200);
40+
const comparativeWarningMeasureData: Data[] = [{ name: 'Warning', y: 88 }];
41+
const comparativeWarningMeasureLegendData: Data[] = [{ name: 'Warning' }];
42+
const primarySegmentedMeasureData: Data[] = [
43+
{ name: 'Measure', y: 25 },
44+
{ name: 'Measure', y: 60 }
45+
];
46+
const primarySegmentedMeasureLegendData: Data[] = [{ name: 'Measure 1' }, { name: 'Measure 2' }];
47+
const qualitativeRangeData: Data[] = [
48+
{ name: 'Range', y: 50 },
49+
{ name: 'Range', y: 75 }
50+
];
51+
const qualitativeRangeLegendData: Data[] = [{ name: 'Range 1' }, { name: 'Range 2' }];
52+
53+
return (
54+
<div ref={containerRef} style={{ height: height + 'px' }}>
55+
<ChartBullet
56+
ariaDesc="Storage capacity"
57+
ariaTitle="Bullet chart example"
58+
comparativeWarningMeasureData={comparativeWarningMeasureData}
59+
comparativeWarningMeasureLegendData={comparativeWarningMeasureLegendData}
60+
constrainToVisibleArea
61+
height={height}
62+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
63+
legendAllowWrap={handleLegendAllowWrap}
64+
legendPosition="bottom-left"
65+
maxDomain={{ y: 100 }}
66+
name="chart1"
67+
padding={{
68+
bottom: 50,
69+
left: 50,
70+
right: 50,
71+
top: 100 // Adjusted to accommodate labels
72+
}}
73+
primarySegmentedMeasureData={primarySegmentedMeasureData}
74+
primarySegmentedMeasureLegendData={primarySegmentedMeasureLegendData}
75+
qualitativeRangeData={qualitativeRangeData}
76+
qualitativeRangeLegendData={qualitativeRangeLegendData}
77+
subTitle="Measure details"
78+
title="Text label"
79+
titlePosition="top-left"
80+
width={width}
81+
/>
82+
</div>
83+
);
84+
};

‎packages/react-charts/src/victory/components/ResizeObserver/examples/ResizeObserverResponsiveStack.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { Chart, ChartAxis, ChartBar, ChartStack, ChartTooltip } from '@patternfly/react-charts/victory';
2+
import { getResizeObserver } from '@patternfly/react-core';
3+
import { useEffect, useRef, useState } from 'react';
4+
5+
interface Data {
6+
name?: string;
7+
x?: string;
8+
y?: number;
9+
}
10+
11+
export const ResizeObserverResponsiveStack: React.FunctionComponent = () => {
12+
const containerRef = useRef(null);
13+
const observer = useRef(() => {});
14+
const [width, setWidth] = useState(0);
15+
16+
const handleResize = () => {
17+
if (containerRef.current && containerRef.current.clientWidth) {
18+
setWidth(containerRef.current.clientWidth);
19+
}
20+
};
21+
22+
const bars: Data[] = [];
23+
for (let i = 1; i < 32; i++) {
24+
bars.push({ x: `Aug. ${i}`, y: Math.floor(Math.random() * 6) + 1 });
25+
}
26+
27+
const renderSocketBars = () => {
28+
const socketBars = bars.map((tick, index) => ({
29+
key: index,
30+
x: tick.x,
31+
y: tick.y,
32+
name: 'Sockets',
33+
label: `${tick.x} Sockets: ${tick.y}`
34+
}));
35+
return <ChartBar data={socketBars} labelComponent={<ChartTooltip constrainToVisibleArea />} />;
36+
};
37+
38+
const renderCoresBars = () => {
39+
const coresBars = bars.map((tick, index) => ({
40+
key: index,
41+
x: tick.x,
42+
y: tick.y,
43+
name: 'Cores',
44+
label: `${tick.x} Cores: ${tick.y}`
45+
}));
46+
return <ChartBar data={coresBars} labelComponent={<ChartTooltip constrainToVisibleArea />} />;
47+
};
48+
49+
const renderNodesBars = () => {
50+
const nodesBars = bars.map((tick, index) => ({
51+
key: index,
52+
x: tick.x,
53+
y: tick.y,
54+
name: 'Nodes',
55+
label: `${tick.x} Nodes: ${tick.y}`
56+
}));
57+
return <ChartBar data={nodesBars} labelComponent={<ChartTooltip constrainToVisibleArea />} />;
58+
};
59+
60+
const getTickValues = (offset = 2) => {
61+
const tickValues: string[] = [];
62+
for (let i = 1; i < 32; i++) {
63+
if (i % offset === 0) {
64+
tickValues.push(`Aug. ${i}`);
65+
}
66+
}
67+
return tickValues;
68+
};
69+
70+
useEffect(() => {
71+
observer.current = getResizeObserver(containerRef.current, handleResize);
72+
handleResize();
73+
74+
return () => {
75+
observer.current();
76+
};
77+
}, []);
78+
79+
const legendData: Data[] = [{ name: 'Sockets' }, { name: 'Cores' }, { name: 'Nodes' }];
80+
81+
return (
82+
<div ref={containerRef}>
83+
<div style={{ height: '225px' }}>
84+
<Chart
85+
ariaDesc="Stack Chart with monthly metric data"
86+
ariaTitle="Monthly Stack Chart"
87+
domainPadding={{ x: [30, 25] }}
88+
legendData={legendData}
89+
legendPosition="bottom"
90+
height={225}
91+
name="chart3"
92+
padding={{
93+
bottom: 75, // Adjusted to accommodate legend
94+
left: 50,
95+
right: 50,
96+
top: 50
97+
}}
98+
width={width}
99+
>
100+
<ChartAxis tickValues={getTickValues()} fixLabelOverlap />
101+
<ChartAxis dependentAxis showGrid />
102+
<ChartStack domainPadding={{ x: [10, 2] }}>
103+
{renderSocketBars()}
104+
{renderCoresBars()}
105+
{renderNodesBars()}
106+
</ChartStack>
107+
</Chart>
108+
</div>
109+
</div>
110+
);
111+
};

‎packages/react-charts/src/victory/components/ResizeObserver/examples/ResizeObserverResponsiveThreshold.tsx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import {
2+
Chart,
3+
ChartArea,
4+
ChartAxis,
5+
ChartLegend,
6+
ChartGroup,
7+
ChartThreshold,
8+
ChartThemeColor,
9+
ChartVoronoiContainer
10+
} from '@patternfly/react-charts/victory';
11+
import { getResizeObserver } from '@patternfly/react-core';
12+
import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
13+
import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
14+
import { useEffect, useRef, useState } from 'react';
15+
16+
interface PetData {
17+
name?: string;
18+
symbol?: { fill: string; type: string };
19+
x?: number;
20+
y?: number;
21+
}
22+
23+
export const ResizeObserverResponsiveThreshold: React.FunctionComponent = () => {
24+
const containerRef = useRef(null);
25+
const observer = useRef(() => {});
26+
const [extraHeight, setExtraHeight] = useState(0);
27+
const [width, setWidth] = useState(0);
28+
29+
const handleResize = () => {
30+
if (containerRef.current && containerRef.current.clientWidth) {
31+
setWidth(containerRef.current.clientWidth);
32+
}
33+
};
34+
35+
const handleLegendAllowWrap = (newExtraHeight) => {
36+
if (newExtraHeight !== extraHeight) {
37+
setExtraHeight(newExtraHeight);
38+
}
39+
};
40+
41+
const getHeight = (baseHeight) => baseHeight + extraHeight;
42+
43+
const getPadding = () => ({
44+
bottom: 100 + extraHeight, // Adjusted to accomodate legend
45+
left: 50,
46+
right: 50,
47+
top: 50
48+
});
49+
50+
useEffect(() => {
51+
observer.current = getResizeObserver(containerRef.current, handleResize);
52+
handleResize();
53+
54+
return () => {
55+
observer.current();
56+
};
57+
}, []);
58+
59+
const height = getHeight(250);
60+
const data1: PetData[] = [
61+
{ name: 'Cats' },
62+
{
63+
name: 'Cats Threshold',
64+
symbol: { fill: chart_color_blue_300.var, type: 'threshold' }
65+
},
66+
{ name: 'Birds' },
67+
{
68+
name: 'Birds Threshold',
69+
symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
70+
}
71+
];
72+
73+
const data2: PetData[] = [
74+
{ name: 'Cats', x: 1, y: 3 },
75+
{ name: 'Cats', x: 2, y: 4 },
76+
{ name: 'Cats', x: 3, y: 8 },
77+
{ name: 'Cats', x: 4, y: 6 }
78+
];
79+
80+
const data3: PetData[] = [
81+
{ name: 'Birds', x: 1, y: 2 },
82+
{ name: 'Birds', x: 2, y: 3 },
83+
{ name: 'Birds', x: 3, y: 4 },
84+
{ name: 'Birds', x: 4, y: 5 },
85+
{ name: 'Birds', x: 5, y: 6 }
86+
];
87+
88+
const data4: PetData[] = [
89+
{ name: 'Cats Threshold', x: 0, y: 4 },
90+
{ name: 'Cats Threshold', x: 3, y: 4 },
91+
{ name: 'Cats Threshold', x: 3, y: 6 },
92+
{ name: 'Cats Threshold', x: 5, y: 6 }
93+
];
94+
95+
const data5: PetData[] = [
96+
{ name: 'Birds Threshold', x: 0, y: 2 },
97+
{ name: 'Birds Threshold', x: 2, y: 2 },
98+
{ name: 'Birds Threshold', x: 2, y: 3 },
99+
{ name: 'Birds Threshold', x: 5, y: 3 }
100+
];
101+
102+
return (
103+
<div ref={containerRef}>
104+
<div style={{ height: height + 'px' }}>
105+
<Chart
106+
ariaDesc="Average number of pets"
107+
ariaTitle="Area chart example"
108+
containerComponent={
109+
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
110+
}
111+
legendAllowWrap={handleLegendAllowWrap}
112+
legendPosition="bottom-left"
113+
legendComponent={<ChartLegend data={data1} />}
114+
height={height}
115+
name="chart2"
116+
padding={getPadding()}
117+
maxDomain={{ y: 9 }}
118+
themeColor={ChartThemeColor.multiUnordered}
119+
width={width}
120+
>
121+
<ChartAxis />
122+
<ChartAxis dependentAxis showGrid />
123+
<ChartGroup>
124+
<ChartArea data={data2} interpolation="monotoneX" />
125+
<ChartArea data={data3} interpolation="monotoneX" />
126+
</ChartGroup>
127+
<ChartThreshold
128+
data={data4}
129+
style={{
130+
data: {
131+
stroke: chart_color_blue_300.var
132+
}
133+
}}
134+
/>
135+
<ChartThreshold
136+
data={data5}
137+
style={{
138+
data: {
139+
stroke: chart_color_orange_300.var
140+
}
141+
}}
142+
/>
143+
</Chart>
144+
</div>
145+
</div>
146+
);
147+
};

0 commit comments

Comments
 (0)