Skip to content

Commit cdfaf05

Browse files
Mash707Mash707
committed
chore(chart bullet): convert to typescript part two
1 parent 25558ac commit cdfaf05

File tree

4 files changed

+159
-96
lines changed

4 files changed

+159
-96
lines changed

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

Lines changed: 3 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -373,111 +373,18 @@ import { ChartBullet } from '@patternfly/react-charts/victory';
373373
```
374374

375375
### Vertical with segmented primary measure
376-
```js
377-
import { ChartBullet } from '@patternfly/react-charts/victory';
376+
```ts file = "ChartBulletVerticalSegmented.tsx"
378377

379-
<div style={{ height: '500px', width: '500px' }}>
380-
<ChartBullet
381-
ariaDesc="Storage capacity"
382-
ariaTitle="Bullet chart example"
383-
comparativeWarningMeasureData={[{name: 'Warning', y: 88}]}
384-
comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
385-
constrainToVisibleArea
386-
height={500}
387-
horizontal={false}
388-
labels={({ datum }) => `${datum.name}: ${datum.y}`}
389-
maxDomain={{y: 100}}
390-
name="chart10"
391-
padding={{
392-
bottom: 125, // Adjusted to accommodate legend
393-
left: 400,
394-
right: 50,
395-
top: 50
396-
}}
397-
primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}
398-
primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
399-
qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
400-
qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
401-
subTitle="Measure details"
402-
title="Text label"
403-
width={500}
404-
/>
405-
</div>
406378
```
407379

408380
### Vertical primary measure outside max range
409-
```js
410-
import { ChartBullet, ChartThemeColor } from '@patternfly/react-charts/victory';
381+
```ts file = "ChartBulletVerticalMaxRange.tsx"
411382

412-
<div style={{ height: '500px', width: '500px' }}>
413-
<ChartBullet
414-
ariaDesc="Storage capacity"
415-
ariaTitle="Bullet chart example"
416-
comparativeWarningMeasureData={[{name: 'Warning', y: 100}]}
417-
comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
418-
constrainToVisibleArea
419-
height={500}
420-
horizontal={false}
421-
labels={({ datum }) => `${datum.name}: ${datum.y}`}
422-
maxDomain={{y: 125}}
423-
minDomain={{y: 50}}
424-
name="chart11"
425-
padding={{
426-
bottom: 125, // Adjusted to accommodate legend
427-
left: 400,
428-
right: 50,
429-
top: 50 // Adjusted to accommodate primary segmented measure tooltip
430-
}}
431-
primarySegmentedMeasureData={[{ name: 'Measure', y: 75 }, { name: 'Measure', y: 135 }]}
432-
primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
433-
qualitativeRangeData={[{ name: 'Range', y: 85 }, { name: 'Range', y: 125 }]}
434-
qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
435-
subTitle="Measure details"
436-
title="Text label"
437-
themeColor={ChartThemeColor.yellow}
438-
width={500}
439-
/>
440-
</div>
441383
```
442384

443385
### Custom labels
444-
```js
445-
import { ChartAxis, ChartBullet } from '@patternfly/react-charts/victory';
386+
```ts file = "ChartBulletCustomLabels.tsx"
446387

447-
<div style={{ height: '150px', width: '600px' }}>
448-
<ChartBullet
449-
ariaDesc="Storage capacity"
450-
ariaTitle="Bullet chart example"
451-
axisComponent={
452-
<ChartAxis
453-
tickValues={[0, 25, 50, 75, 100]}
454-
tickFormat={val => {
455-
switch (val) {
456-
case 0:
457-
return 'New';
458-
case 25:
459-
return 'Beginner';
460-
case 50:
461-
return 'Intermediate';
462-
case 75:
463-
return 'Advanced';
464-
case 100:
465-
return 'Expert';
466-
}
467-
}}
468-
/>
469-
}
470-
comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}
471-
constrainToVisibleArea
472-
height={150}
473-
labels={({ datum }) => `${datum.name}: ${datum.y}`}
474-
maxDomain={{y: 100}}
475-
name="chart12"
476-
primarySegmentedMeasureData={[{ name: 'Measure', y: 60 }]}
477-
qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
478-
width={600}
479-
/>
480-
</div>
481388
```
482389

483390
### Custom size

‎packages/react-charts/src/victory/components/ChartBullet/examples/ChartBulletCustomLabels.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ChartAxis, ChartBullet } from '@patternfly/react-charts/victory';
2+
3+
interface ChartData {
4+
name: string;
5+
y?: number;
6+
}
7+
8+
export const ChartBulletCustomLabels: React.FunctionComponent = () => {
9+
const comparativeWarningMeasureData: ChartData[] = [{ name: 'Warning', y: 88 }];
10+
const primarySegmentedMeasureData: ChartData[] = [{ name: 'Measure', y: 60 }];
11+
const qualitativeRangeData: ChartData[] = [
12+
{ name: 'Range', y: 50 },
13+
{ name: 'Range', y: 75 }
14+
];
15+
16+
return (
17+
<div style={{ height: '150px', width: '600px' }}>
18+
<ChartBullet
19+
ariaDesc="Storage capacity"
20+
ariaTitle="Bullet chart example"
21+
axisComponent={
22+
<ChartAxis
23+
tickValues={[0, 25, 50, 75, 100]}
24+
tickFormat={(val) => {
25+
switch (val) {
26+
case 0:
27+
return 'New';
28+
case 25:
29+
return 'Beginner';
30+
case 50:
31+
return 'Intermediate';
32+
case 75:
33+
return 'Advanced';
34+
case 100:
35+
return 'Expert';
36+
}
37+
}}
38+
/>
39+
}
40+
comparativeWarningMeasureData={comparativeWarningMeasureData}
41+
constrainToVisibleArea
42+
height={150}
43+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
44+
maxDomain={{ y: 100 }}
45+
name="chart12"
46+
primarySegmentedMeasureData={primarySegmentedMeasureData}
47+
qualitativeRangeData={qualitativeRangeData}
48+
width={600}
49+
/>
50+
</div>
51+
);
52+
};

‎packages/react-charts/src/victory/components/ChartBullet/examples/ChartBulletVerticalMaxRange.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { ChartBullet, ChartThemeColor } from '@patternfly/react-charts/victory';
2+
3+
interface ChartData {
4+
name: string;
5+
y?: number;
6+
}
7+
8+
export const ChartBulletVerticalMaxRange: React.FunctionComponent = () => {
9+
const comparativeWarningMeasureData: ChartData[] = [{ name: 'Warning', y: 100 }];
10+
const comparativeWarningMeasureLegendData: ChartData[] = [{ name: 'Warning' }];
11+
const primarySegmentedMeasureData: ChartData[] = [
12+
{ name: 'Measure', y: 75 },
13+
{ name: 'Measure', y: 135 }
14+
];
15+
const primarySegmentedMeasureLegendData: ChartData[] = [{ name: 'Measure 1' }, { name: 'Measure 2' }];
16+
const qualitativeRangeData: ChartData[] = [
17+
{ name: 'Range', y: 85 },
18+
{ name: 'Range', y: 125 }
19+
];
20+
const qualitativeRangeLegendData: ChartData[] = [{ name: 'Range 1' }, { name: 'Range 2' }];
21+
22+
return (
23+
<div style={{ height: '500px', width: '500px' }}>
24+
<ChartBullet
25+
ariaDesc="Storage capacity"
26+
ariaTitle="Bullet chart example"
27+
comparativeWarningMeasureData={comparativeWarningMeasureData}
28+
comparativeWarningMeasureLegendData={comparativeWarningMeasureLegendData}
29+
constrainToVisibleArea
30+
height={500}
31+
horizontal={false}
32+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
33+
maxDomain={{ y: 125 }}
34+
minDomain={{ y: 50 }}
35+
name="chart11"
36+
padding={{
37+
bottom: 125, // Adjusted to accommodate legend
38+
left: 400,
39+
right: 50,
40+
top: 50 // Adjusted to accommodate primary segmented measure tooltip
41+
}}
42+
primarySegmentedMeasureData={primarySegmentedMeasureData}
43+
primarySegmentedMeasureLegendData={primarySegmentedMeasureLegendData}
44+
qualitativeRangeData={qualitativeRangeData}
45+
qualitativeRangeLegendData={qualitativeRangeLegendData}
46+
subTitle="Measure details"
47+
title="Text label"
48+
themeColor={ChartThemeColor.yellow}
49+
width={500}
50+
/>
51+
</div>
52+
);
53+
};

‎packages/react-charts/src/victory/components/ChartBullet/examples/ChartBulletVerticalSegmented.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { ChartBullet } from '@patternfly/react-charts/victory';
2+
3+
interface ChartData {
4+
name: string;
5+
y?: number;
6+
}
7+
8+
export const ChartBulletVerticalSegmented: React.FunctionComponent = () => {
9+
const comparativeWarningMeasureData: ChartData[] = [{ name: 'Warning', y: 88 }];
10+
const comparativeWarningMeasureLegendData: ChartData[] = [{ name: 'Warning' }];
11+
const primarySegmentedMeasureData: ChartData[] = [
12+
{ name: 'Measure', y: 25 },
13+
{ name: 'Measure', y: 60 }
14+
];
15+
const primarySegmentedMeasureLegendData: ChartData[] = [{ name: 'Measure 1' }, { name: 'Measure 2' }];
16+
const qualitativeRangeData: ChartData[] = [
17+
{ name: 'Range', y: 50 },
18+
{ name: 'Range', y: 75 }
19+
];
20+
const qualitativeRangeLegendData: ChartData[] = [{ name: 'Range 1' }, { name: 'Range 2' }];
21+
22+
return (
23+
<div style={{ height: '500px', width: '500px' }}>
24+
<ChartBullet
25+
ariaDesc="Storage capacity"
26+
ariaTitle="Bullet chart example"
27+
comparativeWarningMeasureData={comparativeWarningMeasureData}
28+
comparativeWarningMeasureLegendData={comparativeWarningMeasureLegendData}
29+
constrainToVisibleArea
30+
height={500}
31+
horizontal={false}
32+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
33+
maxDomain={{ y: 100 }}
34+
name="chart10"
35+
padding={{
36+
bottom: 125, // Adjusted to accommodate legend
37+
left: 400,
38+
right: 50,
39+
top: 50
40+
}}
41+
primarySegmentedMeasureData={primarySegmentedMeasureData}
42+
primarySegmentedMeasureLegendData={primarySegmentedMeasureLegendData}
43+
qualitativeRangeData={qualitativeRangeData}
44+
qualitativeRangeLegendData={qualitativeRangeLegendData}
45+
subTitle="Measure details"
46+
title="Text label"
47+
width={500}
48+
/>
49+
</div>
50+
);
51+
};

0 commit comments

Comments
 (0)