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..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,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" -
- - - - - -
``` ### 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" -
- - - - - -
``` ### 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 ( -
- labelFormatter(datum)} - labelComponent={ 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} - > - - - - - -
- ); - } -} ``` ### 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}) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{title(datum)}
Max{datum._max}
Median{datum._median}
Min{datum._min}
Q1{datum._q1}
Q3{datum._q3}
- - - ); +```ts file = "ChartBoxPlotEmbeddedHtml.tsx" - return ( -
- `${datum.y}`} - labelComponent={ - 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} - > - - - - -
- ); - } -} ``` ## Documentation diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedHtml.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedHtml.tsx new file mode 100644 index 00000000000..edf1e21b724 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedHtml.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 ChartBoxPlotEmbeddedHtml: 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 }) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ {title(datum)} +
Max{datum._max}
Median{datum._median}
Min{datum._min}
Q1{datum._q1}
Q3{datum._q3}
+ + + ); + + return ( +
+ `${datum.y}`} + labelComponent={ + 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} + > + + + + +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx new file mode 100644 index 00000000000..78baf4eed01 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotEmbeddedLegend.tsx @@ -0,0 +1,109 @@ +import { + Chart, + ChartAxis, + ChartBoxPlot, + ChartLegendTooltip, + ChartThemeColor, + 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 { + name: string; + x: string; + y: number[] | number; +} + +export const ChartBoxPlotEmbeddedLegend: 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', + /* eslint-disable-next-line */ + 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 ( +
+ labelFormatter(datum)} + labelComponent={ 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} + > + + + + + +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabelsLegend.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabelsLegend.tsx new file mode 100644 index 00000000000..fc34a6e6104 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotLabelsLegend.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 ChartBoxPlotLabelsLegend: 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 ( +
+ + + + + +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotRightAlignedLegend.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotRightAlignedLegend.tsx new file mode 100644 index 00000000000..87a8a98b9ef --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlotRightAlignedLegend.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 ChartBoxPlotRightAlignedLegend: 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 ( +
+ + + + + +
+ ); +};