Skip to content

Commit 04558cb

Browse files
Mash707Mash707
committed
added alerts timeline example
1 parent 2435082 commit 04558cb

File tree

2 files changed

+194
-178
lines changed

2 files changed

+194
-178
lines changed

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

Lines changed: 1 addition & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -49,185 +49,8 @@ This demonstrates zoom for both the x and y axis.
4949

5050
A gnatt-like chart using `y` and `y0` data properties for alert start/end dates
5151

52-
```js
53-
import {
54-
Chart,
55-
ChartAxis,
56-
ChartBar,
57-
ChartGroup,
58-
ChartLabel,
59-
ChartTooltip,
60-
ChartVoronoiContainer
61-
} from '@patternfly/react-charts/victory';
62-
import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100';
63-
import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100';
64-
import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100';
52+
```ts file = "ChartBarAlerts.tsx"
6553

66-
class Timeline extends React.Component {
67-
render() {
68-
// Start = y0, end = y
69-
const alerts = [
70-
[
71-
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-09T02:30:00'), severity: 'danger' },
72-
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'danger' },
73-
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' }
74-
],
75-
[
76-
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' },
77-
{ y0: new Date('2024-08-07T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' },
78-
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
79-
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' }
80-
],
81-
[
82-
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' },
83-
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' },
84-
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'info' },
85-
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
86-
],
87-
[
88-
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'info' },
89-
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'info' },
90-
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
91-
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'info' }
92-
],
93-
[
94-
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' },
95-
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
96-
{ y0: new Date('2024-08-09T11:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
97-
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
98-
],
99-
[
100-
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' },
101-
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
102-
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
103-
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
104-
],
105-
[
106-
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' },
107-
{ y0: new Date('2024-08-07T04:30:00'), y: new Date('2024-08-08T05:30:00'), severity: 'warn' },
108-
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
109-
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
110-
{ y0: new Date('2024-08-11T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
111-
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
112-
],
113-
[
114-
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' },
115-
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
116-
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
117-
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
118-
]
119-
];
120-
121-
const formatDate = (date, isTime) => {
122-
const dateString = date?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
123-
const timeString = date?.toLocaleTimeString('en-US', { hour12: false });
124-
return isTime ? `${dateString} ${timeString}` : dateString;
125-
};
126-
127-
const getChart = (alert, index) => {
128-
const data = [];
129-
130-
alert?.map((datum) => {
131-
data.push({
132-
...datum,
133-
x: alerts.length - index,
134-
fill:
135-
datum.severity === 'danger'
136-
? t_global_color_status_danger_100.var
137-
: datum.severity === 'warn'
138-
? t_global_color_status_warning_100.var
139-
: t_global_color_status_info_100.var
140-
});
141-
});
142-
143-
if (data?.length === 0) {
144-
return null;
145-
}
146-
return (
147-
<ChartBar
148-
data={data}
149-
key={index}
150-
style={{
151-
data: {
152-
fill: ({ datum }) => datum.fill,
153-
stroke: ({ datum }) => datum.fill
154-
}
155-
}}
156-
/>
157-
);
158-
};
159-
160-
return (
161-
<div style={{ height: '400px', width: '450px' }}>
162-
<Chart
163-
ariaDesc="Average number of pets"
164-
ariaTitle="Bar chart example"
165-
containerComponent={
166-
<ChartVoronoiContainer
167-
labelComponent={
168-
<ChartTooltip
169-
constrainToVisibleArea
170-
dx={({ x, x0 }) => -(x - x0) / 2} // Position tooltip so pointer appears centered
171-
dy={-5} // Position tooltip so pointer appears above bar
172-
labelComponent={<ChartLabel dx={-68} textAnchor="start" />}
173-
orientation="top" // Mimic bullet chart tooltip orientation
174-
/>
175-
}
176-
labels={({ datum }) =>
177-
`Severity: ${datum.severity}\nStart: ${formatDate(new Date(datum.y0), true)}\nEnd: ${formatDate(new Date(datum.y), true)}`
178-
}
179-
/>
180-
}
181-
domainPadding={{ x: [20, 20], y: [20, 20] }}
182-
legendData={[
183-
{ name: 'Danger', symbol: { fill: t_global_color_status_danger_100.var } },
184-
{ name: 'Info', symbol: { fill: t_global_color_status_info_100.var } },
185-
{ name: 'Warning', symbol: { fill: t_global_color_status_warning_100.var } }
186-
]}
187-
legendPosition="bottom-left"
188-
height={400}
189-
name="chart5"
190-
padding={{
191-
bottom: 75, // Adjusted to accommodate legend
192-
left: 100,
193-
right: 50, // Adjusted to accommodate tooltip
194-
top: 50
195-
}}
196-
width={450}
197-
>
198-
<ChartAxis
199-
dependentAxis
200-
showGrid
201-
tickFormat={(t) => new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
202-
tickValues={[
203-
new Date('2024-08-06T00:00:00'),
204-
new Date('2024-08-08T00:00:00'),
205-
new Date('2024-08-10T00:00:00'),
206-
new Date('2024-08-12T00:00:00')
207-
]}
208-
/>
209-
<ChartAxis
210-
axisLabelComponent={<ChartLabel angle={0} dy={-125} />}
211-
label="Incidents"
212-
padding={{ top: 20, bottom: 60 }}
213-
style={{
214-
axis: {
215-
stroke: 'transparent'
216-
},
217-
ticks: {
218-
stroke: 'transparent'
219-
},
220-
tickLabels: {
221-
fill: 'transparent'
222-
}
223-
}}
224-
/>
225-
<ChartGroup horizontal>{alerts.map((alert, index) => getChart(alert, index))}</ChartGroup>
226-
</Chart>
227-
</div>
228-
);
229-
}
230-
}
23154
```
23255

23356
## Documentation

‎packages/react-charts/src/victory/components/ChartBar/examples/ChartBarAlerts.tsx‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
/* eslint-disable camelcase */
2+
import {
3+
Chart,
4+
ChartAxis,
5+
ChartBar,
6+
ChartGroup,
7+
ChartLabel,
8+
ChartTooltip,
9+
ChartVoronoiContainer
10+
} from '@patternfly/react-charts/victory';
11+
12+
import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100';
13+
import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100';
14+
import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100';
15+
16+
interface AlertData {
17+
y0: Date;
18+
y: Date;
19+
severity: string;
20+
x?: number;
21+
fill?: string;
22+
}
23+
24+
export const ChartBarAlerts: React.FunctionComponent = () => {
25+
// Start = y0, end = y
26+
const alerts = [
27+
[
28+
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-09T02:30:00'), severity: 'danger' },
29+
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'danger' },
30+
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' }
31+
],
32+
[
33+
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' },
34+
{ y0: new Date('2024-08-07T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' },
35+
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
36+
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' }
37+
],
38+
[
39+
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' },
40+
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' },
41+
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'info' },
42+
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
43+
],
44+
[
45+
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'info' },
46+
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'info' },
47+
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
48+
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'info' }
49+
],
50+
[
51+
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' },
52+
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
53+
{ y0: new Date('2024-08-09T11:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
54+
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
55+
],
56+
[
57+
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' },
58+
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
59+
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
60+
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
61+
],
62+
[
63+
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' },
64+
{ y0: new Date('2024-08-07T04:30:00'), y: new Date('2024-08-08T05:30:00'), severity: 'warn' },
65+
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
66+
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
67+
{ y0: new Date('2024-08-11T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
68+
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
69+
],
70+
[
71+
{ y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' },
72+
{ y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
73+
{ y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' },
74+
{ y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
75+
]
76+
];
77+
78+
const legendData = [
79+
{ name: 'Danger', symbol: { fill: t_global_color_status_danger_100.var } },
80+
{ name: 'Info', symbol: { fill: t_global_color_status_info_100.var } },
81+
{ name: 'Warning', symbol: { fill: t_global_color_status_warning_100.var } }
82+
];
83+
84+
const getSeverityColor = (severity) => {
85+
if (severity === 'danger') {
86+
return t_global_color_status_danger_100.var;
87+
} else if (severity === 'warn') {
88+
return t_global_color_status_warning_100.var;
89+
} else {
90+
return t_global_color_status_info_100.var;
91+
}
92+
};
93+
94+
const formatDate = (date: Date, isTime: boolean) => {
95+
const dateString = date?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
96+
const timeString = date?.toLocaleTimeString('en-US', { hour12: false });
97+
return isTime ? `${dateString} ${timeString}` : dateString;
98+
};
99+
100+
const getChart = (alert: AlertData[], index: number) => {
101+
const data: AlertData[] = [];
102+
103+
alert?.map((datum) => {
104+
data.push({
105+
...datum,
106+
x: alerts.length - index,
107+
fill: getSeverityColor(datum.severity)
108+
});
109+
});
110+
111+
if (data?.length === 0) {
112+
return null;
113+
}
114+
return (
115+
<ChartBar
116+
data={data}
117+
key={index}
118+
style={{
119+
data: {
120+
fill: ({ datum }) => datum.fill,
121+
stroke: ({ datum }) => datum.fill
122+
}
123+
}}
124+
/>
125+
);
126+
};
127+
128+
return (
129+
<div style={{ height: '400px', width: '450px' }}>
130+
<Chart
131+
ariaDesc="Average number of pets"
132+
ariaTitle="Bar chart example"
133+
containerComponent={
134+
<ChartVoronoiContainer
135+
labelComponent={
136+
<ChartTooltip
137+
constrainToVisibleArea
138+
dx={({ x, x0 }) => -(x - x0) / 2} // Position tooltip so pointer appears centered
139+
dy={-5} // Position tooltip so pointer appears above bar
140+
labelComponent={<ChartLabel dx={-68} textAnchor="start" />}
141+
orientation="top" // Mimic bullet chart tooltip orientation
142+
/>
143+
}
144+
labels={({ datum }) =>
145+
`Severity: ${datum.severity}\nStart: ${formatDate(new Date(datum.y0), true)}\nEnd: ${formatDate(new Date(datum.y), true)}`
146+
}
147+
/>
148+
}
149+
domainPadding={{ x: [20, 20], y: [20, 20] }}
150+
legendData={legendData}
151+
legendPosition="bottom-left"
152+
height={400}
153+
name="chart5"
154+
padding={{
155+
bottom: 75, // Adjusted to accommodate legend
156+
left: 100,
157+
right: 50, // Adjusted to accommodate tooltip
158+
top: 50
159+
}}
160+
width={450}
161+
>
162+
<ChartAxis
163+
dependentAxis
164+
showGrid
165+
tickFormat={(t) => new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
166+
tickValues={[
167+
new Date('2024-08-06T00:00:00'),
168+
new Date('2024-08-08T00:00:00'),
169+
new Date('2024-08-10T00:00:00'),
170+
new Date('2024-08-12T00:00:00')
171+
]}
172+
/>
173+
<ChartAxis
174+
axisLabelComponent={<ChartLabel angle={0} dy={-125} />}
175+
label="Incidents"
176+
padding={{ top: 20, bottom: 60 }}
177+
style={{
178+
axis: {
179+
stroke: 'transparent'
180+
},
181+
ticks: {
182+
stroke: 'transparent'
183+
},
184+
tickLabels: {
185+
fill: 'transparent'
186+
}
187+
}}
188+
/>
189+
<ChartGroup horizontal>{alerts.map((alert, index) => getChart(alert, index))}</ChartGroup>
190+
</Chart>
191+
</div>
192+
);
193+
};

0 commit comments

Comments
 (0)