Skip to content

chore(chart box plot) - convert to typescript #11728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

chore(chart box plot) - convert to typescript #11728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6f2bf24
chore(chart box plot) - convert to typescript
Mash707 Mar 30, 2025
142a89b
added example - Labels with bottom aligned legend
Mash707 Mar 30, 2025
9c361d4
addded examples - embedded legend and embedded html
Mash707 Mar 30, 2025
81a7066
disabled camel case rule
Mash707 Mar 30, 2025
29969b9
disabled camel case rule
Mash707 Mar 30, 2025
ef47ad7
disable eslint camelcase
Mash707 Mar 31, 2025
9b98542
renamed files and functions
Mash707 Apr 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
286 changes: 4 additions & 282 deletions packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,310 +24,32 @@ The examples below are based on the [Victory](https://formidable.com/open-source

## Examples
### Basic with right aligned legend
```js
import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
```ts file = "ChartBoxPlotRightAlignedLegend.tsx"

<div style={{ height: '300px', width: '750px' }}>
<Chart
ariaDesc="Average number of pets"
ariaTitle="Bar chart example"
domain={{y: [0, 12]}}
domainPadding={{ x: [30, 25] }}
legendData={[{ name: 'Cats' }]}
legendOrientation="vertical"
legendPosition="right"
height={300}
name="chart3"
padding={{
bottom: 50,
left: 50,
right: 200, // Adjusted to accommodate legend
top: 50
}}
themeColor={ChartThemeColor.blue}
width={750}
>
<ChartAxis />
<ChartAxis dependentAxis showGrid />
<ChartBoxPlot
data={[
{ name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
{ name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
{ name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
]}
/>
</Chart>
</div>
```

### Labels with bottom aligned legend

This demonstrates how to display labels.

```js
import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
```ts file= "ChartBoxPlotLabelsLegend.tsx"

<div style={{ height: '300px', width: '600px' }}>
<Chart
ariaDesc="Average number of pets"
ariaTitle="Bar chart example"
domain={{y: [0, 12]}}
domainPadding={{ x: [30, 25] }}
legendData={[{ name: 'Cats' }]}
legendPosition="bottom"
height={300}
name="chart2"
padding={{
bottom: 75, // Adjusted to accommodate legend
left: 50,
right: 50,
top: 50
}}
themeColor={ChartThemeColor.yellow}
width={600}
>
<ChartAxis />
<ChartAxis dependentAxis showGrid />
<ChartBoxPlot
data={[
{ name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
{ name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
{ name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
]}
labelOrientation={{
min: "right",
max: "right",
}}
maxLabels
minLabels
/>
</Chart>
</div>
```

### Embedded legend

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

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

class EmbeddedLegend extends React.Component {
render() {
// Note: Container order is important
const CursorVoronoiContainer = createContainer("voronoi", "cursor");
const legendData = [
{
childName: 'limit',
name: 'Limit',
symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
},
{ childName: 'cats', name: 'Cats' },
// Force extra space below for line wrapping
{
childName: 'cats',
name: '',
symbol: { fill: 'none' }
},
{
childName: 'cats',
name: '',
symbol: { fill: 'none' }
},
];
const labelFormatter = (datum) => {
// With box plot data, datum.y will also be an array
if (datum && (datum._min || datum._median || datum._max || datum._q1 || datum._q3)) {
return `Min: ${datum._min}, Max: ${datum._max}\nMedian: ${datum._median}\nQ1: ${datum._q1}, Q3: ${datum._q3}`;
}
const yVal = Array.isArray(datum.y) ? datum.y[0] : datum.y;
return yVal !== null ? yVal : 'no data';
}
return (
<div style={{ height: '350px', width: '600px' }}>
<Chart
ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
ariaTitle="Embedded legend example chart title"
containerComponent={
<CursorVoronoiContainer
cursorDimension="x"
labels={({ datum }) => labelFormatter(datum)}
labelComponent={<ChartLegendTooltip legendData={legendData} title={(datum) => datum.x} />}
mouseFollowTooltips
voronoiDimension="x"
voronoiPadding={50}
/>
}
domain={{y: [0, 13]}}
domainPadding={{ x: [30, 25] }}
legendData={legendData}
legendPosition="bottom"
height={350}
name="chart5"
padding={{
bottom: 75, // Adjusted to accommodate legend
left: 50,
right: 50,
top: 50
}}
themeColor={ChartThemeColor.green}
width={600}
>
<ChartAxis />
<ChartAxis dependentAxis showGrid />
<ChartThreshold
data={[
{ name: 'Limit', x: '2015', y: 12 },
{ name: 'Limit', x: '2016', y: 12 },
{ name: 'Limit', x: '2017', y: 12 },
{ name: 'Limit', x: '2018', y: 12 }
]}
name="limit"
style={{
data: {
stroke: chart_color_orange_300.var
}
}}
/>
<ChartBoxPlot
data={[
{ name: 'Cats', x: '2015', y: [null] },
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
{ name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
{ name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
]}
name="cats"
/>
</Chart>
</div>
);
}
}
```

### Embedded HTML

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

```js
import { Chart, ChartAxis, ChartBoxPlot, ChartCursorTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory';

class EmbeddedHtml extends React.Component {
constructor(props) {
super(props);
this.baseStyles = {
color: '#f0f0f0',
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',
fontSize: '14px'
};
this.leftColumn = {
paddingLeft: '10px',
width: '50%'
}
this.rightColumn = {
paddingRight: '20px',
textAlign: 'right',
width: '50%'
}
}

render() {
// Note: Container order is important
const CursorVoronoiContainer = createContainer("voronoi", "cursor");
const legendData = [{ name: 'Cats' }];

// Custom HTML component to create a legend layout
const HtmlLegendContent = ({datum, text, title, x, y, ...rest}) => (
<g>
<foreignObject height="100%" width="100%" x={x - 30} y={y - 62} >
<table>
<thead>
<tr>
<th colSpan={2} style={{...this.baseStyles, ...this.leftColumn, fontWeight: 700}}>{title(datum)}</th>
</tr>
</thead>
<tbody>
<tr style={this.baseStyles}>
<td style={this.leftColumn}>Max</td>
<td style={this.rightColumn}>{datum._max}</td>
</tr>
<tr style={this.baseStyles}>
<td style={this.leftColumn}>Median</td>
<td style={this.rightColumn}>{datum._median}</td>
</tr>
<tr style={this.baseStyles}>
<td style={this.leftColumn}>Min</td>
<td style={this.rightColumn}>{datum._min}</td>
</tr>
<tr style={this.baseStyles}>
<td style={this.leftColumn}>Q1</td>
<td style={this.rightColumn}>{datum._q1}</td>
</tr>
<tr style={this.baseStyles}>
<td style={this.leftColumn}>Q3</td>
<td style={this.rightColumn}>{datum._q3}</td>
</tr>
</tbody>
</table>
</foreignObject>
</g>
);
```ts file = "ChartBoxPlotEmbeddedHtml.tsx"

return (
<div style={{ height: '300px', width: '600px' }}>
<Chart
ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
ariaTitle="Embedded html example chart title"
containerComponent={
<CursorVoronoiContainer
cursorDimension="x"
labels={({ datum }) => `${datum.y}`}
labelComponent={
<ChartCursorTooltip
flyoutHeight={145}
flyoutWidth={110}
labelComponent={<HtmlLegendContent title={(datum) => datum.x} />}
/>
}
mouseFollowTooltips
voronoiDimension="x"
voronoiPadding={50}
/>
}
domain={{y: [0, 12]}}
domainPadding={{ x: [30, 25] }}
legendData={legendData}
legendPosition="bottom"
height={300}
name="chart4"
padding={{
bottom: 75, // Adjusted to accommodate legend
left: 50,
right: 50,
top: 50,
}}
maxDomain={{y: 9}}
themeColor={ChartThemeColor.orange}
width={600}
>
<ChartAxis />
<ChartAxis dependentAxis showGrid />
<ChartBoxPlot
data={[
{ name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
{ name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
{ name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
]}
/>
</Chart>
</div>
);
}
}
```

## Documentation
Expand Down
Loading
Loading