Skip to content

Commit 51ad688

Browse files
Mash707mattnolting
Mash707
authored and
mattnolting
committed
chore(chart donut utilization): convert to typescript (patternfly#11819)
* chore(chart donut utilization): convert to typescript * updated usage of hooks
1 parent a76363d commit 51ad688

10 files changed

Lines changed: 402 additions & 337 deletions

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

Lines changed: 18 additions & 337 deletions
Original file line numberDiff line numberDiff line change
@@ -18,370 +18,51 @@ The examples below are based on the [Victory](https://formidable.com/open-source
1818

1919
## Donut utilization examples
2020
### Basic
21-
```js
22-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
23-
24-
<div style={{ height: '230px', width: '230px' }}>
25-
<ChartDonutUtilization
26-
ariaDesc="Storage capacity"
27-
ariaTitle="Donut utilization chart example"
28-
constrainToVisibleArea
29-
data={{ x: 'GBps capacity', y: 75 }}
30-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
31-
name="chart1"
32-
subTitle="of 100 GBps"
33-
title="75%"
34-
/>
35-
</div>
21+
```ts file = "ChartUtilBasic.tsx"
22+
3623
```
3724

3825
### Right aligned legend
39-
```js
40-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
41-
42-
class DonutUtilizationChart extends React.Component {
43-
constructor(props) {
44-
super(props);
45-
this.state = {
46-
spacer: '',
47-
used: 0
48-
};
49-
}
50-
51-
componentDidMount() {
52-
this.interval = setInterval(() => {
53-
const { used } = this.state;
54-
const val = (used + 10) % 100;
55-
this.setState({
56-
spacer: val < 10 ? ' ' : '',
57-
used: val
58-
});
59-
}, 1000);
60-
}
61-
62-
componentWillUnmount() {
63-
clearInterval(this.interval);
64-
}
65-
66-
render() {
67-
const { spacer, used } = this.state;
68-
return (
69-
<div style={{ height: '230px', width: '435px' }}>
70-
<ChartDonutUtilization
71-
ariaDesc="Storage capacity"
72-
ariaTitle="Donut utilization chart example"
73-
constrainToVisibleArea
74-
data={{ x: 'GBps capacity', y: used }}
75-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
76-
legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
77-
legendOrientation="vertical"
78-
name="chart2"
79-
padding={{
80-
bottom: 20,
81-
left: 20,
82-
right: 225, // Adjusted to accommodate legend
83-
top: 20
84-
}}
85-
subTitle="of 100 GBps"
86-
title={`${used}%`}
87-
thresholds={[{ value: 60 }, { value: 90 }]}
88-
width={435}
89-
/>
90-
</div>
91-
);
92-
}
93-
}
26+
```ts file = "ChartUtilRightAlignedLegend.tsx"
27+
9428
```
9529

9630
### Inverted with right aligned legend
97-
```js
98-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
99-
100-
class InvertedDonutUtilizationChart extends React.Component {
101-
constructor(props) {
102-
super(props);
103-
this.state = {
104-
spacer: '',
105-
used: 100
106-
};
107-
}
108-
109-
componentDidMount() {
110-
this.interval = setInterval(() => {
111-
const { used } = this.state;
112-
const val = (((used - 10) % 100) + 100) % 100;
113-
this.setState({
114-
spacer: val < 10 ? ' ' : '',
115-
used: val
116-
});
117-
}, 1000);
118-
}
119-
120-
componentWillUnmount() {
121-
clearInterval(this.interval);
122-
}
123-
124-
render() {
125-
const { spacer, used } = this.state;
126-
return (
127-
<div style={{ height: '230px', width: '435px' }}>
128-
<ChartDonutUtilization
129-
ariaDesc="Storage capacity"
130-
ariaTitle="Donut utilization chart example"
131-
constrainToVisibleArea
132-
data={{ x: 'GBps capacity', y: used }}
133-
invert
134-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
135-
legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
136-
legendOrientation="vertical"
137-
name="chart3"
138-
padding={{
139-
bottom: 20,
140-
left: 20,
141-
right: 225, // Adjusted to accommodate legend
142-
top: 20
143-
}}
144-
subTitle="of 100 GBps"
145-
title={`${used}%`}
146-
thresholds={[{ value: 60 }, { value: 20 }]}
147-
width={435}
148-
/>
149-
</div>
150-
);
151-
}
152-
}
31+
```ts file = "ChartUtilInvertedRightLegend.tsx"
32+
15333
```
15434

15535
### Right aligned vertical legend
156-
```js
157-
import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
158-
159-
class VerticalLegendUtilizationChart extends React.Component {
160-
constructor(props) {
161-
super(props);
162-
this.state = {
163-
spacer: '',
164-
used: 0
165-
};
166-
}
167-
168-
componentDidMount() {
169-
this.interval = setInterval(() => {
170-
const { used } = this.state;
171-
const val = (used + 10) % 100;
172-
this.setState({
173-
spacer: val < 10 ? ' ' : '',
174-
used: val
175-
});
176-
}, 1000);
177-
}
178-
179-
componentWillUnmount() {
180-
clearInterval(this.interval);
181-
}
182-
183-
render() {
184-
const { spacer, used } = this.state;
185-
return (
186-
<div style={{ height: '300px', width: '230px' }}>
187-
<ChartDonutUtilization
188-
ariaDesc="Storage capacity"
189-
ariaTitle="Donut utilization chart example"
190-
constrainToVisibleArea
191-
data={{ x: 'Storage capacity', y: used }}
192-
height={300}
193-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
194-
legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
195-
legendOrientation="vertical"
196-
legendPosition="bottom"
197-
name="chart4"
198-
padding={{
199-
bottom: 75, // Adjusted to accommodate legend
200-
left: 20,
201-
right: 20,
202-
top: 20
203-
}}
204-
subTitle="of 100 GBps"
205-
title={`${used}%`}
206-
themeColor={ChartThemeColor.green}
207-
thresholds={[{ value: 60 }, { value: 90 }]}
208-
width={230}
209-
/>
210-
</div>
211-
);
212-
}
213-
}
36+
```ts file = "ChartUtilRightVerticalLegend.tsx"
37+
21438
```
21539

21640
### Bottom aligned legend
217-
```js
218-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
219-
220-
<div style={{ height: '275px', width: '300px' }}>
221-
<ChartDonutUtilization
222-
ariaDesc="Storage capacity"
223-
ariaTitle="Donut utilization chart example"
224-
constrainToVisibleArea
225-
data={{ x: 'Storage capacity', y: 45 }}
226-
height={275}
227-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
228-
legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}
229-
legendPosition="bottom"
230-
name="chart5"
231-
padding={{
232-
bottom: 65, // Adjusted to accommodate legend
233-
left: 20,
234-
right: 20,
235-
top: 20
236-
}}
237-
subTitle="of 100 GBps"
238-
title="45%"
239-
thresholds={[{ value: 60 }, { value: 90 }]}
240-
width={300}
241-
/>
242-
</div>
41+
```ts file = "ChartUtilBottomAlignedLegend.tsx"
42+
24343
```
24444

24545
### Small
246-
```js
247-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
248-
249-
<div style={{ height: '175px', width: '175px' }}>
250-
<ChartDonutUtilization
251-
ariaDesc="Storage capacity"
252-
ariaTitle="Donut utilization chart example"
253-
constrainToVisibleArea
254-
data={{ x: 'Storage capacity', y: 75 }}
255-
height={175}
256-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
257-
name="chart6"
258-
subTitle="of 100 GBps"
259-
title="75%"
260-
width={175}
261-
/>
262-
</div>
46+
```ts file = "ChartUtilSmall.tsx"
47+
26348
```
26449

26550
### Small with right aligned legend
266-
```js
267-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
268-
269-
class UtilizationChart extends React.Component {
270-
constructor(props) {
271-
super(props);
272-
this.state = {
273-
spacer: '',
274-
used: 0
275-
};
276-
}
277-
278-
componentDidMount() {
279-
this.interval = setInterval(() => {
280-
const { used } = this.state;
281-
const val = (used + 10) % 100;
282-
this.setState({
283-
spacer: val < 10 ? ' ' : '',
284-
used: val
285-
});
286-
}, 1000);
287-
}
288-
289-
componentWillUnmount() {
290-
clearInterval(this.interval);
291-
}
292-
293-
render() {
294-
const { spacer, used } = this.state;
295-
return (
296-
<div style={{ width: '350px', height: '175px' }}>
297-
<ChartDonutUtilization
298-
ariaDesc="Storage capacity"
299-
ariaTitle="Donut utilization chart example"
300-
constrainToVisibleArea
301-
data={{ x: 'Storage capacity', y: used }}
302-
height={175}
303-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
304-
legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
305-
legendOrientation="vertical"
306-
name="chart7"
307-
padding={{
308-
bottom: 20,
309-
left: 20,
310-
right: 195, // Adjusted to accommodate legend
311-
top: 20
312-
}}
313-
subTitle="of 100 GBps"
314-
title={`${used}%`}
315-
thresholds={[{ value: 60 }, { value: 90 }]}
316-
width={350}
317-
/>
318-
</div>
319-
);
320-
}
321-
}
51+
```ts file = "ChartUtilSmallRightLegend.tsx"
52+
32253
```
32354

32455
### Small with bottom aligned subtitle
32556

32657
This is a small donut utilization chart with bottom aligned legend and right aligned subtitle.
32758

328-
```js
329-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
330-
331-
<div style={{ height: '185px', width: '350px' }}>
332-
<ChartDonutUtilization
333-
ariaDesc="Storage capacity"
334-
ariaTitle="Donut utilization chart example"
335-
constrainToVisibleArea
336-
data={{ x: 'Storage capacity', y: 45 }}
337-
height={185}
338-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
339-
legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}
340-
legendOrientation="vertical"
341-
name="chart8"
342-
padding={{
343-
bottom: 25, // Adjusted to accommodate subTitle
344-
left: 20,
345-
right: 195, // Adjusted to accommodate legend
346-
top: 20
347-
}}
348-
subTitle="of 100 GBps"
349-
subTitlePosition="bottom"
350-
title="45%"
351-
thresholds={[{ value: 60 }, { value: 90 }]}
352-
width={350}
353-
/>
354-
</div>
59+
```ts file = "ChartUtilSmallBottomSubtitle.tsx"
60+
35561
```
35662

35763
### Small with right aligned subtitle
358-
```js
359-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
360-
361-
<div style={{ height: '200px', width: '350px' }}>
362-
<ChartDonutUtilization
363-
ariaDesc="Storage capacity"
364-
ariaTitle="Donut utilization chart example"
365-
constrainToVisibleArea
366-
data={{ x: 'Storage capacity', y: 45 }}
367-
height={200}
368-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
369-
legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}
370-
legendPosition="bottom"
371-
name="chart9"
372-
padding={{
373-
bottom: 45, // Adjusted to accommodate legend
374-
left: 20,
375-
right: 20,
376-
top: 20
377-
}}
378-
subTitle="of 100 GBps"
379-
subTitlePosition="right"
380-
title="45%"
381-
thresholds={[{ value: 60 }, { value: 90 }]}
382-
width={350}
383-
/>
384-
</div>
64+
```ts file = "ChartUtilSmallRightSubtitle.tsx"
65+
38566
```
38667

38768
## Donut utilization threshold examples

0 commit comments

Comments
 (0)