patternfly-react/packages/react-charts/src/victory/components/ChartBullet/examples/ChartBulletHorizontalGroup.tsx at cb6fef5c503a0873865b85db8ac933c43c9793a1 · Mash707/patternfly-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import { ChartBullet, ChartContainer } from '@patternfly/react-charts/victory';

export const ChartBulletHorizontalGroup: React.FunctionComponent = () => (
  <div style={{ height: '500px', width: '600px' }}>
    <ChartContainer title="Bullet chart example" height={500} width={600}>
      <ChartBullet
        comparativeWarningMeasureData={[{ name: 'Warning', y: 78 }]}
        constrainToVisibleArea
        height={500}
        labels={({ datum }) => `${datum.name}: ${datum.y}`}
        maxDomain={{ y: 100 }}
        name="chart14"
        padding={{
          bottom: 100, // Adjusted to accommodate legend
          left: 150, // Adjusted to accommodate labels
          right: 50,
          top: 75
        }}
        primarySegmentedMeasureData={[
          { name: 'Measure', y: 15 },
          { name: 'Measure', y: 50 }
        ]}
        qualitativeRangeData={[
          { name: 'Range', y: 40 },
          { name: 'Range', y: 65 }
        ]}
        standalone={false}
        subTitle="Measure details"
        title="Text label"
        width={600}
      />
      <ChartBullet
        comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}
        constrainToVisibleArea
        height={500}
        labels={({ datum }) => `${datum.name}: ${datum.y}`}
        maxDomain={{ y: 100 }}
        name="chart15"
        padding={{
          bottom: 100, // Adjusted to accommodate legend
          left: 150, // Adjusted to accommodate labels
          right: 50,
          top: 300
        }}
        primarySegmentedMeasureData={[
          { name: 'Measure', y: 25 },
          { name: 'Measure', y: 60 }
        ]}
        qualitativeRangeData={[
          { name: 'Range', y: 50 },
          { name: 'Range', y: 75 }
        ]}
        standalone={false}
        subTitle="Measure details"
        title="Text label"
        width={600}
      />
      <ChartBullet
        comparativeWarningMeasureData={[{ name: 'Warning', y: 98 }]}
        constrainToVisibleArea
        height={500}
        labels={({ datum }) => `${datum.name}: ${datum.y}`}
        maxDomain={{ y: 100 }}
        name="chart16"
        padding={{
          bottom: 100, // Adjusted to accommodate legend
          left: 150, // Adjusted to accommodate labels
          right: 50,
          top: 525
        }}
        primarySegmentedMeasureData={[
          { name: 'Measure', y: 35 },
          { name: 'Measure', y: 70 }
        ]}
        qualitativeRangeData={[
          { name: 'Range', y: 60 },
          { name: 'Range', y: 85 }
        ]}
        standalone={false}
        subTitle="Measure details"
        title="Text label"
        width={600}
      />
      <ChartBullet
        comparativeWarningMeasureData={[{ name: 'Warning', y: 78 }]}
        comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
        constrainToVisibleArea
        height={500}
        labels={({ datum }) => `${datum.name}: ${datum.y}`}
        maxDomain={{ y: 100 }}
        name="chart17"
        padding={{
          bottom: 100, // Adjusted to accommodate legend
          left: 150, // Adjusted to accommodate labels
          right: 50,
          top: 750
        }}
        primarySegmentedMeasureData={[
          { name: 'Measure', y: 15 },
          { name: 'Measure', y: 50 }
        ]}
        primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
        qualitativeRangeData={[
          { name: 'Range', y: 40 },
          { name: 'Range', y: 65 }
        ]}
        qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
        standalone={false}
        subTitle="Measure details"
        title="Text label"
        width={600}
      />
    </ChartContainer>
  </div>
);