Skip to content

Commit a635304

Browse files
Mash707Mash707
committed
converted remaining examples
1 parent f658294 commit a635304

3 files changed

Lines changed: 224 additions & 228 deletions

File tree

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

Lines changed: 3 additions & 228 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ propComponents: [
1111
hideDarkMode: true
1212
---
1313

14-
import { createRef } from 'react';
1514
import {
1615
Chart,
1716
ChartArea,
@@ -25,6 +24,7 @@ import {
2524
createContainer
2625
} from '@patternfly/react-charts/victory';
2726
import { getResizeObserver } from '@patternfly/react-core';
27+
import { useEffect, useRef, useState } from 'react';
2828

2929
## Introduction
3030
Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
@@ -51,241 +51,16 @@ This demonstrates an alternate way of applying tooltips using data labels.
5151
```
5252

5353
### Monthly data with responsive container
54-
```js
55-
import { Chart, ChartAxis, ChartBar, ChartStack, ChartTooltip } from '@patternfly/react-charts/victory';
56-
import { getResizeObserver } from '@patternfly/react-core';
57-
58-
class MonthlyResponsiveStack extends React.Component {
59-
constructor(props) {
60-
super(props);
61-
this.containerRef = createRef();
62-
this.observer = () => {};
63-
this.state = {
64-
width: 0
65-
};
66-
67-
this.handleResize = () => {
68-
if(this.containerRef.current && this.containerRef.current.clientWidth){
69-
this.setState({ width: this.containerRef.current.clientWidth });
70-
}
71-
};
72-
73-
this.bars = [];
74-
for(let i = 1; i < 32; i++){
75-
this.bars.push({ x: `Aug. ${i}`, y: Math.floor(Math.random() * 6) + 1 });
76-
};
77-
78-
this.renderSocketBars = () => {
79-
let socketBars = this.bars.map((tick, index) => {
80-
return {
81-
x: tick.x,
82-
y: tick.y,
83-
name: 'Sockets',
84-
label: `${tick.x} Sockets: ${tick.y}`
85-
};
86-
});
87-
return <ChartBar data={socketBars} labelComponent={<ChartTooltip constrainToVisibleArea />} />;
88-
}
89-
90-
this.renderCoresBars = () => {
91-
let coresBars = this.bars.map((tick, index) => {
92-
return {
93-
x: tick.x,
94-
y: tick.y,
95-
name: 'Cores',
96-
label: `${tick.x} Cores: ${tick.y}`
97-
};
98-
});
99-
return <ChartBar data={coresBars} labelComponent={<ChartTooltip constrainToVisibleArea />} />;
100-
}
101-
102-
this.renderNodesBars = () => {
103-
let nodesBars = this.bars.map((tick, index) => {
104-
return {
105-
key: index,
106-
x: tick.x,
107-
y: tick.y,
108-
name: 'Nodes',
109-
label: `${tick.x} Nodes: ${tick.y}`
110-
};
111-
});
112-
return <ChartBar data={nodesBars} labelComponent={<ChartTooltip constrainToVisibleArea />} />;
113-
}
54+
```ts file = "ChartStackMonthlyResponsive.tsx"
11455

115-
this.getTickValues = (offset = 2) => {
116-
let tickValues = [];
117-
for(let i = 1; i < 32; i++){
118-
if (i % offset == 0){
119-
tickValues.push(`Aug. ${i}`);
120-
}
121-
}
122-
return tickValues;
123-
}
124-
}
125-
126-
componentDidMount() {
127-
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
128-
this.handleResize();
129-
}
130-
131-
componentWillUnmount() {
132-
this.observer();
133-
}
134-
135-
render(){
136-
const { width } = this.state;
137-
return (
138-
<div ref={this.containerRef}>
139-
<div style={{ height: '225px' }}>
140-
<Chart
141-
ariaDesc="Stack Chart with monthly metric data"
142-
ariaTitle="Monthly Stack Chart"
143-
domainPadding={{ x: [30, 25] }}
144-
legendData={[{ name: 'Sockets' }, { name: 'Cores' }, { name: 'Nodes' }]}
145-
legendPosition="bottom"
146-
height={225}
147-
name="chart4"
148-
padding={{
149-
bottom: 75, // Adjusted to accommodate legend
150-
left: 50,
151-
right: 50,
152-
top: 50
153-
}}
154-
width={width}
155-
>
156-
<ChartAxis tickValues = {this.getTickValues()} fixLabelOverlap />
157-
<ChartAxis dependentAxis showGrid />
158-
<ChartStack domainPadding={{x: [10, 2]}}>
159-
{ this.renderSocketBars() }
160-
{ this.renderCoresBars() }
161-
{ this.renderNodesBars() }
162-
</ChartStack>
163-
</Chart>
164-
</div>
165-
</div>
166-
)
167-
}
168-
}
16956
```
17057

17158
### Multi-color (unordered) responsive container
17259

17360
This demonstrates monthly data with a bottom aligned legend and responsiveness for mobile.
17461

175-
```js
176-
import { Chart, ChartArea, ChartAxis, ChartStack, ChartLegendTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory';
177-
import { getResizeObserver } from '@patternfly/react-core';
178-
179-
class MultiColorChart extends React.Component {
180-
constructor(props) {
181-
super(props);
182-
this.containerRef = createRef();
183-
this.observer = () => {};
184-
this.state = {
185-
width: 0
186-
};
187-
this.handleResize = () => {
188-
if(this.containerRef.current && this.containerRef.current.clientWidth){
189-
this.setState({ width: this.containerRef.current.clientWidth });
190-
}
191-
};
192-
}
193-
194-
componentDidMount() {
195-
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
196-
this.handleResize();
197-
}
198-
199-
componentWillUnmount() {
200-
this.observer();
201-
}
62+
```ts file = "ChartStackMultiColorUnordered.tsx"
20263

203-
render() {
204-
const { width } = this.state;
205-
206-
// Note: Container order is important
207-
const CursorVoronoiContainer = createContainer("voronoi", "cursor");
208-
const legendData = [{ childName: 'cats', name: 'Cats' }, { childName: 'dogs', name: 'Dogs' }, { childName: 'birds', name: 'Birds' }];
209-
210-
return (
211-
<div ref={this.containerRef}>
212-
<div style={{ height: '225px' }}>
213-
<Chart
214-
ariaDesc="Average number of pets"
215-
ariaTitle="Area chart example"
216-
containerComponent={
217-
<CursorVoronoiContainer
218-
cursorDimension="x"
219-
labels={({ datum }) => `${datum.y !== null ? datum.y : 'no data'}`}
220-
labelComponent={<ChartLegendTooltip legendData={legendData} title={(datum) => datum.x}/>}
221-
mouseFollowTooltips
222-
voronoiDimension="x"
223-
voronoiPadding={50}
224-
/>
225-
}
226-
legendData={legendData}
227-
legendPosition="bottom-left"
228-
height={225}
229-
name="chart5"
230-
padding={{
231-
bottom: 75, // Adjusted to accomodate legend
232-
left: 50,
233-
right: 50,
234-
top: 50,
235-
}}
236-
maxDomain={{y: 30}}
237-
themeColor={ChartThemeColor.multiUnordered}
238-
width={width}
239-
>
240-
<ChartAxis />
241-
<ChartAxis dependentAxis showGrid />
242-
<ChartStack>
243-
<ChartArea
244-
data={[
245-
{ x: 'Sunday', y: 6 },
246-
{ x: 'Monday', y: 2 },
247-
{ x: 'Tuesday', y: 8 },
248-
{ x: 'Wednesday', y: 15 },
249-
{ x: 'Thursday', y: 6 },
250-
{ x: 'Friday', y: 2 },
251-
{ x: 'Saturday', y: 0 }
252-
]}
253-
interpolation="monotoneX"
254-
name="cats"
255-
/>
256-
<ChartArea
257-
data={[
258-
{ x: 'Sunday', y: 4 },
259-
{ x: 'Monday', y: 5 },
260-
{ x: 'Tuesday', y: 7 },
261-
{ x: 'Wednesday', y: 6 },
262-
{ x: 'Thursday', y: 10 },
263-
{ x: 'Friday', y: 3 },
264-
{ x: 'Saturday', y: 5 }
265-
]}
266-
interpolation="monotoneX"
267-
name="dogs"
268-
/>
269-
<ChartArea
270-
data={[
271-
{ x: 'Sunday', y: 8 },
272-
{ x: 'Monday', y: 18 },
273-
{ x: 'Tuesday', y: 14 },
274-
{ x: 'Wednesday', y: 8 },
275-
{ x: 'Thursday', y: 6 },
276-
{ x: 'Friday', y: 8 },
277-
{ x: 'Saturday', y: 12 }
278-
]}
279-
interpolation="monotoneX"
280-
name="birds"
281-
/>
282-
</ChartStack>
283-
</Chart>
284-
</div>
285-
</div>
286-
);
287-
}
288-
}
28964
```
29065

29166
## Documentation

‎packages/react-charts/src/victory/components/ChartStack/examples/ChartStackMonthlyResponsive.tsx‎

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

0 commit comments

Comments
 (0)