From b63eb04147d8e07e5aa75d9f606cfc6807703c1b Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Sun, 30 Mar 2025 18:35:40 +0530
Subject: [PATCH 1/8] chore(chart box plot) - convert to typescript
---
.../ChartBoxPlot/examples/ChartBoxPlot.md | 35 +--------------
.../examples/ChartBoxPlotBasic.tsx | 45 +++++++++++++++++++
2 files changed, 46 insertions(+), 34 deletions(-)
create mode 100644 packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotBasic.tsx
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
index bd82ff34236..ddd7c1ead32 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
@@ -24,41 +24,8 @@ 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 = "ChartBoxPlotBasic.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
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotBasic.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotBasic.tsx
new file mode 100644
index 00000000000..9206d608e42
--- /dev/null
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotBasic.tsx
@@ -0,0 +1,45 @@
+import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
+
+interface PetData {
+ name: string;
+ x: string;
+ y: number[];
+}
+
+export const ChartBoxPlotBasic: React.FunctionComponent = () => {
+ const catsData: PetData[] = [
+ { 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] }
+ ];
+
+ const legendData = [{ name: 'Cats' }];
+ return (
+ <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={legendData}
+ 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={catsData} />
+ </Chart>
+ </div>
+ );
+};
From 31e6bc9d0ccd6c65f668650f75807aefd29bce14 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Sun, 30 Mar 2025 19:10:13 +0530
Subject: [PATCH 2/8] added example - Labels with bottom aligned legend
---
.../ChartBoxPlot/examples/ChartBoxPlot.md | 40 +--------------
.../examples/ChartBoxPlotLabels.tsx | 51 +++++++++++++++++++
2 files changed, 52 insertions(+), 39 deletions(-)
create mode 100644 packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabels.tsx
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
index ddd7c1ead32..48ed32b6cb9 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
@@ -32,46 +32,8 @@ The examples below are based on the [Victory](https://formidable.com/open-source
This demonstrates how to display labels.
-```js
-import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file= "ChartBoxPlotLabels.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
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabels.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabels.tsx
new file mode 100644
index 00000000000..095575de77e
--- /dev/null
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabels.tsx
@@ -0,0 +1,51 @@
+import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
+
+interface PetData {
+ name: string;
+ x: string;
+ y: number[];
+}
+
+export const ChartBoxPlotLabels: React.FunctionComponent = () => {
+ const catsData: PetData[] = [
+ { 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] }
+ ];
+ const legendData = [{ name: 'Cats' }];
+ return (
+ <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={legendData}
+ 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={catsData}
+ labelOrientation={{
+ min: 'right',
+ max: 'right'
+ }}
+ maxLabels
+ minLabels
+ />
+ </Chart>
+ </div>
+ );
+};
From 6394bf19985316471d3a934bf42933b76768880a Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Sun, 30 Mar 2025 22:46:23 +0530
Subject: [PATCH 3/8] addded examples - embedded legend and embedded html
---
.../ChartBoxPlot/examples/ChartBoxPlot.md | 211 +-----------------
.../examples/ChartBoxPlotHtml.tsx | 125 +++++++++++
.../examples/ChartBoxPlotLegend.tsx | 106 +++++++++
3 files changed, 233 insertions(+), 209 deletions(-)
create mode 100644 packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotHtml.tsx
create mode 100644 packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
index 48ed32b6cb9..3bd1d3a83ea 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
@@ -40,223 +40,16 @@ This demonstrates how to display labels.
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 = "ChartBoxPlotLegend.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 = "ChartBoxPlotHtml.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
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotHtml.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotHtml.tsx
new file mode 100644
index 00000000000..ec977433e95
--- /dev/null
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotHtml.tsx
@@ -0,0 +1,125 @@
+import {
+ Chart,
+ ChartAxis,
+ ChartBoxPlot,
+ ChartCursorTooltip,
+ ChartThemeColor,
+ createContainer
+} from '@patternfly/react-charts/victory';
+
+interface PetData {
+ name: string;
+ x: string;
+ y: number[] | number;
+}
+
+export const ChartBoxPlotHtml: React.FunctionComponent = () => {
+ const 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'
+ };
+ const leftColumn = {
+ paddingLeft: '10px',
+ width: '50%'
+ };
+ const rightColumn = {
+ paddingRight: '20px',
+ textAlign: 'right',
+ width: '50%'
+ };
+
+ // Note: Container order is important
+ const CursorVoronoiContainer = createContainer('voronoi', 'cursor');
+ const catsData: PetData[] = [
+ { 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] }
+ ];
+ 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={{ ...baseStyles, ...leftColumn, fontWeight: 700 }}>
+ {title(datum)}
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr style={baseStyles}>
+ <td style={leftColumn}>Max</td>
+ <td style={rightColumn}>{datum._max}</td>
+ </tr>
+ <tr style={baseStyles}>
+ <td style={leftColumn}>Median</td>
+ <td style={rightColumn}>{datum._median}</td>
+ </tr>
+ <tr style={baseStyles}>
+ <td style={leftColumn}>Min</td>
+ <td style={rightColumn}>{datum._min}</td>
+ </tr>
+ <tr style={baseStyles}>
+ <td style={leftColumn}>Q1</td>
+ <td style={rightColumn}>{datum._q1}</td>
+ </tr>
+ <tr style={baseStyles}>
+ <td style={leftColumn}>Q3</td>
+ <td style={rightColumn}>{datum._q3}</td>
+ </tr>
+ </tbody>
+ </table>
+ </foreignObject>
+ </g>
+ );
+
+ 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={catsData} />
+ </Chart>
+ </div>
+ );
+};
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
new file mode 100644
index 00000000000..20e0b12e377
--- /dev/null
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
@@ -0,0 +1,106 @@
+import {
+ Chart,
+ ChartAxis,
+ ChartBoxPlot,
+ ChartLegendTooltip,
+ ChartThemeColor,
+ ChartThreshold,
+ createContainer
+} from '@patternfly/react-charts/victory';
+import chartColorOrange300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
+
+interface Data {
+ name: string;
+ x: string;
+ y: number[] | number;
+}
+
+export const ChartBoxPlotLegend: React.FunctionComponent = () => {
+ const catsData: 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] }
+ ];
+
+ // Note: Container order is important
+ const CursorVoronoiContainer = createContainer('voronoi', 'cursor');
+ const limitData: 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 }
+ ];
+ const legendData = [
+ {
+ childName: 'limit',
+ name: 'Limit',
+ symbol: { fill: chartColorOrange300.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={limitData}
+ name="limit"
+ style={{
+ data: {
+ stroke: chartColorOrange300.var
+ }
+ }}
+ />
+ <ChartBoxPlot data={catsData} name="cats" />
+ </Chart>
+ </div>
+ );
+};
From 559adada2b9fdd21aec01e921ba451b038fb79e1 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Sun, 30 Mar 2025 23:02:47 +0530
Subject: [PATCH 4/8] disabled camel case rule
---
.../ChartBoxPlot/examples/ChartBoxPlotLegend.tsx | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
index 20e0b12e377..a3236d52550 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
@@ -7,7 +7,8 @@ import {
ChartThreshold,
createContainer
} from '@patternfly/react-charts/victory';
-import chartColorOrange300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
+// eslint-disable-next-line camelcase
+import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
interface Data {
name: string;
@@ -35,7 +36,8 @@ export const ChartBoxPlotLegend: React.FunctionComponent = () => {
{
childName: 'limit',
name: 'Limit',
- symbol: { fill: chartColorOrange300.var, type: 'threshold' }
+ // eslint-disable-next-line camelcase
+ symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
},
{ childName: 'cats', name: 'Cats' },
// Force extra space below for line wrapping
@@ -95,7 +97,8 @@ export const ChartBoxPlotLegend: React.FunctionComponent = () => {
name="limit"
style={{
data: {
- stroke: chartColorOrange300.var
+ // eslint-disable-next-line camelcase
+ stroke: chart_color_orange_300.var
}
}}
/>
From 28c0bf3c720b1e92fb2bcef45e1bf92ae7862a42 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Sun, 30 Mar 2025 23:05:39 +0530
Subject: [PATCH 5/8] disabled camel case rule
---
.../components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
index a3236d52550..f3803f84e9e 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
import {
Chart,
ChartAxis,
@@ -7,7 +8,7 @@ import {
ChartThreshold,
createContainer
} from '@patternfly/react-charts/victory';
-// eslint-disable-next-line camelcase
+
import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
interface Data {
@@ -36,7 +37,7 @@ export const ChartBoxPlotLegend: React.FunctionComponent = () => {
{
childName: 'limit',
name: 'Limit',
- // eslint-disable-next-line camelcase
+
symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
},
{ childName: 'cats', name: 'Cats' },
@@ -97,7 +98,6 @@ export const ChartBoxPlotLegend: React.FunctionComponent = () => {
name="limit"
style={{
data: {
- // eslint-disable-next-line camelcase
stroke: chart_color_orange_300.var
}
}}
From 91e44e005b4846c3246dfefb27d5873e0ebc227c Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 1 Apr 2025 00:02:25 +0530
Subject: [PATCH 6/8] disable eslint camelcase
---
.../components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
index f3803f84e9e..d5e7b06156f 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
import {
Chart,
ChartAxis,
@@ -8,7 +7,7 @@ import {
ChartThreshold,
createContainer
} from '@patternfly/react-charts/victory';
-
+/* eslint-disable-next-line */
import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
interface Data {
@@ -37,7 +36,7 @@ export const ChartBoxPlotLegend: React.FunctionComponent = () => {
{
childName: 'limit',
name: 'Limit',
-
+ /* eslint-disable-next-line */
symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
},
{ childName: 'cats', name: 'Cats' },
@@ -98,6 +97,7 @@ export const ChartBoxPlotLegend: React.FunctionComponent = () => {
name="limit"
style={{
data: {
+ /* eslint-disable-next-line */
stroke: chart_color_orange_300.var
}
}}
From 68e5f1bfb9e978fe8635fc4fafc059613aff1880 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Wed, 9 Apr 2025 16:11:47 +0530
Subject: [PATCH 7/8] renamed files and functions
---
.../components/ChartBoxPlot/examples/ChartBoxPlot.md | 8 ++++----
...{ChartBoxPlotHtml.tsx => ChartBoxPlotEmbeddedHtml.tsx} | 2 +-
...rtBoxPlotLegend.tsx => ChartBoxPlotEmbeddedLegend.tsx} | 2 +-
...hartBoxPlotLabels.tsx => ChartBoxPlotLabelsLegend.tsx} | 2 +-
...oxPlotBasic.tsx => ChartBoxPlotRightAlignedLegend.tsx} | 2 +-
5 files changed, 8 insertions(+), 8 deletions(-)
rename packages/react-charts/src/victory/components/ChartBoxPlot/examples/{ChartBoxPlotHtml.tsx => ChartBoxPlotEmbeddedHtml.tsx} (98%)
rename packages/react-charts/src/victory/components/ChartBoxPlot/examples/{ChartBoxPlotLegend.tsx => ChartBoxPlotEmbeddedLegend.tsx} (97%)
rename packages/react-charts/src/victory/components/ChartBoxPlot/examples/{ChartBoxPlotLabels.tsx => ChartBoxPlotLabelsLegend.tsx} (94%)
rename packages/react-charts/src/victory/components/ChartBoxPlot/examples/{ChartBoxPlotBasic.tsx => ChartBoxPlotRightAlignedLegend.tsx} (93%)
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
index 3bd1d3a83ea..c6b1a37da37 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
@@ -24,7 +24,7 @@ The examples below are based on the [Victory](https://formidable.com/open-source
## Examples
### Basic with right aligned legend
-```ts file = "ChartBoxPlotBasic.tsx"
+```ts file = "ChartBoxPlotRightAlignedLegend.tsx"
```
@@ -32,7 +32,7 @@ The examples below are based on the [Victory](https://formidable.com/open-source
This demonstrates how to display labels.
-```ts file= "ChartBoxPlotLabels.tsx"
+```ts file= "ChartBoxPlotLabelsLegend.tsx"
```
@@ -40,7 +40,7 @@ This demonstrates how to display labels.
This demonstrates how to embed a legend within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
-```ts file = "ChartBoxPlotLegend.tsx"
+```ts file = "ChartBoxPlotEmbeddedLegend.tsx"
```
@@ -48,7 +48,7 @@ This demonstrates how to embed a legend within a tooltip. Combining cursor and v
This demonstrates how to embed HTML within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
-```ts file = "ChartBoxPlotHtml.tsx"
+```ts file = "ChartBoxPlotEmbeddedHtml.tsx"
```
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotHtml.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedHtml.tsx
similarity index 98%
rename from packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotHtml.tsx
rename to packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedHtml.tsx
index ec977433e95..edf1e21b724 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotHtml.tsx
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedHtml.tsx
@@ -13,7 +13,7 @@ interface PetData {
y: number[] | number;
}
-export const ChartBoxPlotHtml: React.FunctionComponent = () => {
+export const ChartBoxPlotEmbeddedHtml: React.FunctionComponent = () => {
const baseStyles = {
color: '#f0f0f0',
fontFamily:
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx
similarity index 97%
rename from packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
rename to packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx
index d5e7b06156f..78baf4eed01 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLegend.tsx
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx
@@ -16,7 +16,7 @@ interface Data {
y: number[] | number;
}
-export const ChartBoxPlotLegend: React.FunctionComponent = () => {
+export const ChartBoxPlotEmbeddedLegend: React.FunctionComponent = () => {
const catsData: Data[] = [
{ name: 'Cats', x: '2015', y: [null] },
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabels.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabelsLegend.tsx
similarity index 94%
rename from packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabels.tsx
rename to packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabelsLegend.tsx
index 095575de77e..fc34a6e6104 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabels.tsx
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabelsLegend.tsx
@@ -6,7 +6,7 @@ interface PetData {
y: number[];
}
-export const ChartBoxPlotLabels: React.FunctionComponent = () => {
+export const ChartBoxPlotLabelsLegend: React.FunctionComponent = () => {
const catsData: PetData[] = [
{ name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotBasic.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotRightAlignedLegend.tsx
similarity index 93%
rename from packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotBasic.tsx
rename to packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotRightAlignedLegend.tsx
index 9206d608e42..87a8a98b9ef 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotBasic.tsx
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotRightAlignedLegend.tsx
@@ -6,7 +6,7 @@ interface PetData {
y: number[];
}
-export const ChartBoxPlotBasic: React.FunctionComponent = () => {
+export const ChartBoxPlotRightAlignedLegend: React.FunctionComponent = () => {
const catsData: PetData[] = [
{ name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
{ name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
From ecefffbb0391ba918fe2882277eace503f3386b7 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 29 Apr 2025 22:05:35 +0530
Subject: [PATCH 8/8] remove eslint camelcase
---
.../ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx | 3 ---
1 file changed, 3 deletions(-)
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx
index 78baf4eed01..fd06bf7064d 100644
--- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx
+++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx
@@ -7,7 +7,6 @@ import {
ChartThreshold,
createContainer
} from '@patternfly/react-charts/victory';
-/* eslint-disable-next-line */
import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
interface Data {
@@ -36,7 +35,6 @@ export const ChartBoxPlotEmbeddedLegend: React.FunctionComponent = () => {
{
childName: 'limit',
name: 'Limit',
- /* eslint-disable-next-line */
symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
},
{ childName: 'cats', name: 'Cats' },
@@ -97,7 +95,6 @@ export const ChartBoxPlotEmbeddedLegend: React.FunctionComponent = () => {
name="limit"
style={{
data: {
- /* eslint-disable-next-line */
stroke: chart_color_orange_300.var
}
}}