Skip to content

Commit 0c056ca

Browse files
Mash707Mash707
committed
chore(chart donut utilization): convert to typescript
1 parent f8b21b5 commit 0c056ca

10 files changed

Lines changed: 389 additions & 328 deletions

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

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

1818
## Donut utilization examples
1919
### Basic
20-
```js
21-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
20+
```ts file = "ChartUtilBasic.tsx"
2221

23-
<div style={{ height: '230px', width: '230px' }}>
24-
<ChartDonutUtilization
25-
ariaDesc="Storage capacity"
26-
ariaTitle="Donut utilization chart example"
27-
constrainToVisibleArea
28-
data={{ x: 'GBps capacity', y: 75 }}
29-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
30-
name="chart1"
31-
subTitle="of 100 GBps"
32-
title="75%"
33-
/>
34-
</div>
3522
```
3623

3724
### Right aligned legend
38-
```js
39-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
40-
41-
class DonutUtilizationChart extends React.Component {
42-
constructor(props) {
43-
super(props);
44-
this.state = {
45-
spacer: '',
46-
used: 0
47-
};
48-
}
49-
50-
componentDidMount() {
51-
this.interval = setInterval(() => {
52-
const { used } = this.state;
53-
const val = (used + 10) % 100;
54-
this.setState({
55-
spacer: val < 10 ? ' ' : '',
56-
used: val
57-
});
58-
}, 1000);
59-
}
25+
```ts file = "ChartUtilRightAlignedLegend.tsx"
6026

61-
componentWillUnmount() {
62-
clearInterval(this.interval);
63-
}
64-
65-
render() {
66-
const { spacer, used } = this.state;
67-
return (
68-
<div style={{ height: '230px', width: '435px' }}>
69-
<ChartDonutUtilization
70-
ariaDesc="Storage capacity"
71-
ariaTitle="Donut utilization chart example"
72-
constrainToVisibleArea
73-
data={{ x: 'GBps capacity', y: used }}
74-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
75-
legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
76-
legendOrientation="vertical"
77-
name="chart2"
78-
padding={{
79-
bottom: 20,
80-
left: 20,
81-
right: 225, // Adjusted to accommodate legend
82-
top: 20
83-
}}
84-
subTitle="of 100 GBps"
85-
title={`${used}%`}
86-
thresholds={[{ value: 60 }, { value: 90 }]}
87-
width={435}
88-
/>
89-
</div>
90-
);
91-
}
92-
}
9327
```
9428

9529
### Inverted with right aligned legend
96-
```js
97-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
98-
99-
class InvertedDonutUtilizationChart extends React.Component {
100-
constructor(props) {
101-
super(props);
102-
this.state = {
103-
spacer: '',
104-
used: 100
105-
};
106-
}
107-
108-
componentDidMount() {
109-
this.interval = setInterval(() => {
110-
const { used } = this.state;
111-
const val = (((used - 10) % 100) + 100) % 100;
112-
this.setState({
113-
spacer: val < 10 ? ' ' : '',
114-
used: val
115-
});
116-
}, 1000);
117-
}
118-
119-
componentWillUnmount() {
120-
clearInterval(this.interval);
121-
}
30+
```ts file = "ChartUtilInvertedRightLegend.tsx"
12231

123-
render() {
124-
const { spacer, used } = this.state;
125-
return (
126-
<div style={{ height: '230px', width: '435px' }}>
127-
<ChartDonutUtilization
128-
ariaDesc="Storage capacity"
129-
ariaTitle="Donut utilization chart example"
130-
constrainToVisibleArea
131-
data={{ x: 'GBps capacity', y: used }}
132-
invert
133-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
134-
legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
135-
legendOrientation="vertical"
136-
name="chart3"
137-
padding={{
138-
bottom: 20,
139-
left: 20,
140-
right: 225, // Adjusted to accommodate legend
141-
top: 20
142-
}}
143-
subTitle="of 100 GBps"
144-
title={`${used}%`}
145-
thresholds={[{ value: 60 }, { value: 20 }]}
146-
width={435}
147-
/>
148-
</div>
149-
);
150-
}
151-
}
15232
```
15333

15434
### Right aligned vertical legend
155-
```js
156-
import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
157-
158-
class VerticalLegendUtilizationChart extends React.Component {
159-
constructor(props) {
160-
super(props);
161-
this.state = {
162-
spacer: '',
163-
used: 0
164-
};
165-
}
166-
167-
componentDidMount() {
168-
this.interval = setInterval(() => {
169-
const { used } = this.state;
170-
const val = (used + 10) % 100;
171-
this.setState({
172-
spacer: val < 10 ? ' ' : '',
173-
used: val
174-
});
175-
}, 1000);
176-
}
177-
178-
componentWillUnmount() {
179-
clearInterval(this.interval);
180-
}
35+
```ts file = "ChartUtilRightVerticalLegend.tsx"
18136

182-
render() {
183-
const { spacer, used } = this.state;
184-
return (
185-
<div style={{ height: '300px', width: '230px' }}>
186-
<ChartDonutUtilization
187-
ariaDesc="Storage capacity"
188-
ariaTitle="Donut utilization chart example"
189-
constrainToVisibleArea
190-
data={{ x: 'Storage capacity', y: used }}
191-
height={300}
192-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
193-
legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
194-
legendOrientation="vertical"
195-
legendPosition="bottom"
196-
name="chart4"
197-
padding={{
198-
bottom: 75, // Adjusted to accommodate legend
199-
left: 20,
200-
right: 20,
201-
top: 20
202-
}}
203-
subTitle="of 100 GBps"
204-
title={`${used}%`}
205-
themeColor={ChartThemeColor.green}
206-
thresholds={[{ value: 60 }, { value: 90 }]}
207-
width={230}
208-
/>
209-
</div>
210-
);
211-
}
212-
}
21337
```
21438

21539
### Bottom aligned legend
216-
```js
217-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
40+
```ts file = "ChartUtilBottomAlignedLegend.tsx"
21841

219-
<div style={{ height: '275px', width: '300px' }}>
220-
<ChartDonutUtilization
221-
ariaDesc="Storage capacity"
222-
ariaTitle="Donut utilization chart example"
223-
constrainToVisibleArea
224-
data={{ x: 'Storage capacity', y: 45 }}
225-
height={275}
226-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
227-
legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}
228-
legendPosition="bottom"
229-
name="chart5"
230-
padding={{
231-
bottom: 65, // Adjusted to accommodate legend
232-
left: 20,
233-
right: 20,
234-
top: 20
235-
}}
236-
subTitle="of 100 GBps"
237-
title="45%"
238-
thresholds={[{ value: 60 }, { value: 90 }]}
239-
width={300}
240-
/>
241-
</div>
24242
```
24343

24444
### Small
245-
```js
246-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
45+
```ts file = "ChartUtilSmall.tsx"
24746

248-
<div style={{ height: '175px', width: '175px' }}>
249-
<ChartDonutUtilization
250-
ariaDesc="Storage capacity"
251-
ariaTitle="Donut utilization chart example"
252-
constrainToVisibleArea
253-
data={{ x: 'Storage capacity', y: 75 }}
254-
height={175}
255-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
256-
name="chart6"
257-
subTitle="of 100 GBps"
258-
title="75%"
259-
width={175}
260-
/>
261-
</div>
26247
```
26348

26449
### Small with right aligned legend
265-
```js
266-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
267-
268-
class UtilizationChart extends React.Component {
269-
constructor(props) {
270-
super(props);
271-
this.state = {
272-
spacer: '',
273-
used: 0
274-
};
275-
}
276-
277-
componentDidMount() {
278-
this.interval = setInterval(() => {
279-
const { used } = this.state;
280-
const val = (used + 10) % 100;
281-
this.setState({
282-
spacer: val < 10 ? ' ' : '',
283-
used: val
284-
});
285-
}, 1000);
286-
}
287-
288-
componentWillUnmount() {
289-
clearInterval(this.interval);
290-
}
50+
```ts file = "ChartUtilSmallRightLegend.tsx"
29151

292-
render() {
293-
const { spacer, used } = this.state;
294-
return (
295-
<div style={{ width: '350px', height: '175px' }}>
296-
<ChartDonutUtilization
297-
ariaDesc="Storage capacity"
298-
ariaTitle="Donut utilization chart example"
299-
constrainToVisibleArea
300-
data={{ x: 'Storage capacity', y: used }}
301-
height={175}
302-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
303-
legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
304-
legendOrientation="vertical"
305-
name="chart7"
306-
padding={{
307-
bottom: 20,
308-
left: 20,
309-
right: 195, // Adjusted to accommodate legend
310-
top: 20
311-
}}
312-
subTitle="of 100 GBps"
313-
title={`${used}%`}
314-
thresholds={[{ value: 60 }, { value: 90 }]}
315-
width={350}
316-
/>
317-
</div>
318-
);
319-
}
320-
}
32152
```
32253

32354
### Small with bottom aligned subtitle
32455

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

327-
```js
328-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
58+
```ts file = "ChartUtilSmallBottomSubtitle.tsx"
32959

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

35662
### Small with right aligned subtitle
357-
```js
358-
import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
63+
```ts file = "ChartUtilSmallRightSubtitle.tsx"
35964

360-
<div style={{ height: '200px', width: '350px' }}>
361-
<ChartDonutUtilization
362-
ariaDesc="Storage capacity"
363-
ariaTitle="Donut utilization chart example"
364-
constrainToVisibleArea
365-
data={{ x: 'Storage capacity', y: 45 }}
366-
height={200}
367-
labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
368-
legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}
369-
legendPosition="bottom"
370-
name="chart9"
371-
padding={{
372-
bottom: 45, // Adjusted to accommodate legend
373-
left: 20,
374-
right: 20,
375-
top: 20
376-
}}
377-
subTitle="of 100 GBps"
378-
subTitlePosition="right"
379-
title="45%"
380-
thresholds={[{ value: 60 }, { value: 90 }]}
381-
width={350}
382-
/>
383-
</div>
38465
```
38566

38667
## Donut utilization threshold examples

0 commit comments

Comments
 (0)