Skip to content

Commit 6394bf1

Browse files
Mash707Mash707
committed
addded examples - embedded legend and embedded html
1 parent 31e6bc9 commit 6394bf1

File tree

3 files changed

+233
-209
lines changed

3 files changed

+233
-209
lines changed

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

Lines changed: 2 additions & 209 deletions
Original file line numberDiff line numberDiff line change
@@ -40,223 +40,16 @@ This demonstrates how to display labels.
4040

4141
This demonstrates how to embed a legend within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
4242

43-
```js
44-
import { Chart, ChartAxis, ChartBoxPlot, ChartLegendTooltip, ChartThemeColor, ChartThreshold, createContainer } from '@patternfly/react-charts/victory';
45-
import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
43+
```ts file = "ChartBoxPlotLegend.tsx"
4644

47-
class EmbeddedLegend extends React.Component {
48-
render() {
49-
// Note: Container order is important
50-
const CursorVoronoiContainer = createContainer("voronoi", "cursor");
51-
const legendData = [
52-
{
53-
childName: 'limit',
54-
name: 'Limit',
55-
symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
56-
},
57-
{ childName: 'cats', name: 'Cats' },
58-
// Force extra space below for line wrapping
59-
{
60-
childName: 'cats',
61-
name: '',
62-
symbol: { fill: 'none' }
63-
},
64-
{
65-
childName: 'cats',
66-
name: '',
67-
symbol: { fill: 'none' }
68-
},
69-
];
70-
const labelFormatter = (datum) => {
71-
// With box plot data, datum.y will also be an array
72-
if (datum && (datum._min || datum._median || datum._max || datum._q1 || datum._q3)) {
73-
return `Min: ${datum._min}, Max: ${datum._max}\nMedian: ${datum._median}\nQ1: ${datum._q1}, Q3: ${datum._q3}`;
74-
}
75-
const yVal = Array.isArray(datum.y) ? datum.y[0] : datum.y;
76-
return yVal !== null ? yVal : 'no data';
77-
}
78-
return (
79-
<div style={{ height: '350px', width: '600px' }}>
80-
<Chart
81-
ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
82-
ariaTitle="Embedded legend example chart title"
83-
containerComponent={
84-
<CursorVoronoiContainer
85-
cursorDimension="x"
86-
labels={({ datum }) => labelFormatter(datum)}
87-
labelComponent={<ChartLegendTooltip legendData={legendData} title={(datum) => datum.x} />}
88-
mouseFollowTooltips
89-
voronoiDimension="x"
90-
voronoiPadding={50}
91-
/>
92-
}
93-
domain={{y: [0, 13]}}
94-
domainPadding={{ x: [30, 25] }}
95-
legendData={legendData}
96-
legendPosition="bottom"
97-
height={350}
98-
name="chart5"
99-
padding={{
100-
bottom: 75, // Adjusted to accommodate legend
101-
left: 50,
102-
right: 50,
103-
top: 50
104-
}}
105-
themeColor={ChartThemeColor.green}
106-
width={600}
107-
>
108-
<ChartAxis />
109-
<ChartAxis dependentAxis showGrid />
110-
<ChartThreshold
111-
data={[
112-
{ name: 'Limit', x: '2015', y: 12 },
113-
{ name: 'Limit', x: '2016', y: 12 },
114-
{ name: 'Limit', x: '2017', y: 12 },
115-
{ name: 'Limit', x: '2018', y: 12 }
116-
]}
117-
name="limit"
118-
style={{
119-
data: {
120-
stroke: chart_color_orange_300.var
121-
}
122-
}}
123-
/>
124-
<ChartBoxPlot
125-
data={[
126-
{ name: 'Cats', x: '2015', y: [null] },
127-
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
128-
{ name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
129-
{ name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
130-
]}
131-
name="cats"
132-
/>
133-
</Chart>
134-
</div>
135-
);
136-
}
137-
}
13845
```
13946

14047
### Embedded HTML
14148

14249
This demonstrates how to embed HTML within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
14350

144-
```js
145-
import { Chart, ChartAxis, ChartBoxPlot, ChartCursorTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory';
146-
147-
class EmbeddedHtml extends React.Component {
148-
constructor(props) {
149-
super(props);
150-
this.baseStyles = {
151-
color: '#f0f0f0',
152-
fontFamily: '"Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif',
153-
fontSize: '14px'
154-
};
155-
this.leftColumn = {
156-
paddingLeft: '10px',
157-
width: '50%'
158-
}
159-
this.rightColumn = {
160-
paddingRight: '20px',
161-
textAlign: 'right',
162-
width: '50%'
163-
}
164-
}
165-
166-
render() {
167-
// Note: Container order is important
168-
const CursorVoronoiContainer = createContainer("voronoi", "cursor");
169-
const legendData = [{ name: 'Cats' }];
170-
171-
// Custom HTML component to create a legend layout
172-
const HtmlLegendContent = ({datum, text, title, x, y, ...rest}) => (
173-
<g>
174-
<foreignObject height="100%" width="100%" x={x - 30} y={y - 62} >
175-
<table>
176-
<thead>
177-
<tr>
178-
<th colSpan={2} style={{...this.baseStyles, ...this.leftColumn, fontWeight: 700}}>{title(datum)}</th>
179-
</tr>
180-
</thead>
181-
<tbody>
182-
<tr style={this.baseStyles}>
183-
<td style={this.leftColumn}>Max</td>
184-
<td style={this.rightColumn}>{datum._max}</td>
185-
</tr>
186-
<tr style={this.baseStyles}>
187-
<td style={this.leftColumn}>Median</td>
188-
<td style={this.rightColumn}>{datum._median}</td>
189-
</tr>
190-
<tr style={this.baseStyles}>
191-
<td style={this.leftColumn}>Min</td>
192-
<td style={this.rightColumn}>{datum._min}</td>
193-
</tr>
194-
<tr style={this.baseStyles}>
195-
<td style={this.leftColumn}>Q1</td>
196-
<td style={this.rightColumn}>{datum._q1}</td>
197-
</tr>
198-
<tr style={this.baseStyles}>
199-
<td style={this.leftColumn}>Q3</td>
200-
<td style={this.rightColumn}>{datum._q3}</td>
201-
</tr>
202-
</tbody>
203-
</table>
204-
</foreignObject>
205-
</g>
206-
);
51+
```ts file = "ChartBoxPlotHtml.tsx"
20752

208-
return (
209-
<div style={{ height: '300px', width: '600px' }}>
210-
<Chart
211-
ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
212-
ariaTitle="Embedded html example chart title"
213-
containerComponent={
214-
<CursorVoronoiContainer
215-
cursorDimension="x"
216-
labels={({ datum }) => `${datum.y}`}
217-
labelComponent={
218-
<ChartCursorTooltip
219-
flyoutHeight={145}
220-
flyoutWidth={110}
221-
labelComponent={<HtmlLegendContent title={(datum) => datum.x} />}
222-
/>
223-
}
224-
mouseFollowTooltips
225-
voronoiDimension="x"
226-
voronoiPadding={50}
227-
/>
228-
}
229-
domain={{y: [0, 12]}}
230-
domainPadding={{ x: [30, 25] }}
231-
legendData={legendData}
232-
legendPosition="bottom"
233-
height={300}
234-
name="chart4"
235-
padding={{
236-
bottom: 75, // Adjusted to accommodate legend
237-
left: 50,
238-
right: 50,
239-
top: 50,
240-
}}
241-
maxDomain={{y: 9}}
242-
themeColor={ChartThemeColor.orange}
243-
width={600}
244-
>
245-
<ChartAxis />
246-
<ChartAxis dependentAxis showGrid />
247-
<ChartBoxPlot
248-
data={[
249-
{ name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
250-
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
251-
{ name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
252-
{ name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
253-
]}
254-
/>
255-
</Chart>
256-
</div>
257-
);
258-
}
259-
}
26053
```
26154

26255
## Documentation

‎packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotHtml.tsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import {
2+
Chart,
3+
ChartAxis,
4+
ChartBoxPlot,
5+
ChartCursorTooltip,
6+
ChartThemeColor,
7+
createContainer
8+
} from '@patternfly/react-charts/victory';
9+
10+
interface PetData {
11+
name: string;
12+
x: string;
13+
y: number[] | number;
14+
}
15+
16+
export const ChartBoxPlotHtml: React.FunctionComponent = () => {
17+
const baseStyles = {
18+
color: '#f0f0f0',
19+
fontFamily:
20+
'"Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif',
21+
fontSize: '14px'
22+
};
23+
const leftColumn = {
24+
paddingLeft: '10px',
25+
width: '50%'
26+
};
27+
const rightColumn = {
28+
paddingRight: '20px',
29+
textAlign: 'right',
30+
width: '50%'
31+
};
32+
33+
// Note: Container order is important
34+
const CursorVoronoiContainer = createContainer('voronoi', 'cursor');
35+
const catsData: PetData[] = [
36+
{ name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
37+
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
38+
{ name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
39+
{ name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
40+
];
41+
const legendData = [{ name: 'Cats' }];
42+
43+
// Custom HTML component to create a legend layout
44+
const HtmlLegendContent = ({ datum, _text, title, x, y, ..._rest }) => (
45+
<g>
46+
<foreignObject height="100%" width="100%" x={x - 30} y={y - 62}>
47+
<table>
48+
<thead>
49+
<tr>
50+
<th colSpan={2} style={{ ...baseStyles, ...leftColumn, fontWeight: 700 }}>
51+
{title(datum)}
52+
</th>
53+
</tr>
54+
</thead>
55+
<tbody>
56+
<tr style={baseStyles}>
57+
<td style={leftColumn}>Max</td>
58+
<td style={rightColumn}>{datum._max}</td>
59+
</tr>
60+
<tr style={baseStyles}>
61+
<td style={leftColumn}>Median</td>
62+
<td style={rightColumn}>{datum._median}</td>
63+
</tr>
64+
<tr style={baseStyles}>
65+
<td style={leftColumn}>Min</td>
66+
<td style={rightColumn}>{datum._min}</td>
67+
</tr>
68+
<tr style={baseStyles}>
69+
<td style={leftColumn}>Q1</td>
70+
<td style={rightColumn}>{datum._q1}</td>
71+
</tr>
72+
<tr style={baseStyles}>
73+
<td style={leftColumn}>Q3</td>
74+
<td style={rightColumn}>{datum._q3}</td>
75+
</tr>
76+
</tbody>
77+
</table>
78+
</foreignObject>
79+
</g>
80+
);
81+
82+
return (
83+
<div style={{ height: '300px', width: '600px' }}>
84+
<Chart
85+
ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
86+
ariaTitle="Embedded html example chart title"
87+
containerComponent={
88+
<CursorVoronoiContainer
89+
cursorDimension="x"
90+
labels={({ datum }) => `${datum.y}`}
91+
labelComponent={
92+
<ChartCursorTooltip
93+
flyoutHeight={145}
94+
flyoutWidth={110}
95+
labelComponent={<HtmlLegendContent title={(datum) => datum.x} />}
96+
/>
97+
}
98+
mouseFollowTooltips
99+
voronoiDimension="x"
100+
voronoiPadding={50}
101+
/>
102+
}
103+
domain={{ y: [0, 12] }}
104+
domainPadding={{ x: [30, 25] }}
105+
legendData={legendData}
106+
legendPosition="bottom"
107+
height={300}
108+
name="chart4"
109+
padding={{
110+
bottom: 75, // Adjusted to accommodate legend
111+
left: 50,
112+
right: 50,
113+
top: 50
114+
}}
115+
maxDomain={{ y: 9 }}
116+
themeColor={ChartThemeColor.orange}
117+
width={600}
118+
>
119+
<ChartAxis />
120+
<ChartAxis dependentAxis showGrid />
121+
<ChartBoxPlot data={catsData} />
122+
</Chart>
123+
</div>
124+
);
125+
};

0 commit comments

Comments
 (0)