diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md index 5950df0c986..18e017cbf7f 100644 --- a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md @@ -48,492 +48,40 @@ The examples below are based on the [Victory](https://formidable.com/open-source This demonstrates how to use a voronoi container to display tooltips. -```js -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; +```ts file = "ChartTooltipVoronoi.tsx" -
- `${datum.name}: ${datum.y}`} constrainToVisibleArea />} - legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]} - legendOrientation="vertical" - legendPosition="right" - height={200} - maxDomain={{y: 9}} - name="chart1" - padding={{ - bottom: 50, - left: 50, - right: 200, // Adjusted to accommodate legend - top: 50 - }} - width={800} - > - - - - - - - - -
``` ### Combined cursor and voronoi containers This demonstrates how to combine cursor and voronoi containers to display tooltips along with a vertical cursor. -```js -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory'; - -class CombinedCursorVoronoiContainer extends React.Component { - render() { - // Note: Container order is important - const CursorVoronoiContainer = createContainer("voronoi", "cursor"); +```ts file = "ChartTooltipCombinedCursorVoronoi.tsx" - return ( -
- `${datum.name}: ${datum.y}`} - mouseFollowTooltips - voronoiDimension="x" - voronoiPadding={50} - /> - } - legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]} - legendPosition="bottom" - height={275} - maxDomain={{y: 10}} - minDomain={{y: 0}} - name="chart2" - padding={{ - bottom: 75, // Adjusted to accommodate legend - left: 50, - right: 50, - top: 50 - }} - themeColor={ChartThemeColor.orange} - width={450} - > - - - - - - - - - -
- ); - } -} ``` ### 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, ChartGroup, ChartLegendTooltip, ChartLine, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory'; +```ts file = "ChartTooltipEmbeddedLegend.tsx" -class EmbeddedLegend extends React.Component { - render() { - // Note: Container order is important - const CursorVoronoiContainer = createContainer("voronoi", "cursor"); - const legendData = [{ childName: 'cats', name: 'Cats' }, { childName: 'dogs', name: 'Dogs', symbol: { type: 'dash' }}, { childName: 'birds', name: 'Birds' }, { childName: 'mice', name: 'Mice' }]; - - return ( -
- `${datum.y !== null ? datum.y : 'no data'}`} - labelComponent={ datum.x}/>} - mouseFollowTooltips - voronoiDimension="x" - voronoiPadding={50} - /> - } - legendData={legendData} - legendPosition="bottom" - height={275} - maxDomain={{y: 10}} - minDomain={{y: 0}} - name="chart3" - padding={{ - bottom: 75, // Adjusted to accommodate legend - left: 50, - right: 50, - top: 50 - }} - themeColor={ChartThemeColor.green} - width={450} - > - - - - - - - - - -
- ); - } -} ``` ### 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, ChartArea, ChartAxis, ChartCursorTooltip, ChartGroup, ChartPoint, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory'; +```ts file = "ChartTooltipEmbeddedHtml.tsx" -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' - }; - } - - render() { - // Note: Container order is important - const CursorVoronoiContainer = createContainer("voronoi", "cursor"); - const legendData = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]; - - // Custom HTML component to create a legend layout - const HtmlLegendContent = ({datum, legendData, text, theme, title, x, y, ...rest}) => ( - - - - - - - - - - {text.map((val, index) => ( - - - - - - ))} - -
{title(datum)}
- - - - { - - } - - - - {legendData[index].name}{val}
- - - ); - - return ( -
- `${datum.y !== null ? datum.y : 'no data'}`} - labelComponent={ - width > center.x + flyoutWidth + 10 ? offset : -offset}} - // flyoutComponent={} - flyoutHeight={110} - flyoutWidth={({ datum }) => datum.y === null ? 160 : 125 } - labelComponent={ datum.x} />} - /> - } - mouseFollowTooltips - voronoiDimension="x" - voronoiPadding={50} - /> - } - legendData={legendData} - legendPosition="bottom-left" - height={225} - name="chart4" - padding={{ - bottom: 75, // Adjusted to accommodate legend - left: 50, - right: 50, - top: 50, - }} - maxDomain={{y: 9}} - themeColor={ChartThemeColor.multiUnordered} - width={650} - > - - - - - - - - -
- ); - } -} ``` ### Embedded legend with custom font size This demonstrates how to embed a legend within a tooltip, but with a custom font size. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor. -```js -import { Chart, ChartAxis, ChartGroup, ChartLegendTooltip, ChartLegend, ChartLine, ChartLegendTooltipContent, ChartLegendTooltipLabel, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory'; +```ts file = "ChartTooltipEmbeddedCustomFontSize.tsx" -class EmbeddedLegendAlt extends React.Component { - render() { - // Note: Container order is important - const CursorVoronoiContainer = createContainer("voronoi", "cursor"); - const legendData = [{ childName: 'cats', name: 'Cats' }, { childName: 'dogs', name: 'Dogs', symbol: { type: 'dash' }}, { childName: 'birds', name: 'Birds' }, { childName: 'mice', name: 'Mice' }]; - - const legend = ; - const legendTooltipLabel = ; - const legendTooltipContent = ; - - return ( -
- `${datum.y !== null ? datum.y : 'no data'}`} - labelComponent={ datum.x} />} - mouseFollowTooltips - voronoiDimension="x" - voronoiPadding={50} - /> - } - legendData={legendData} - legendPosition="bottom" - height={275} - maxDomain={{y: 10}} - minDomain={{y: 0}} - name="chart5" - padding={{ - bottom: 75, // Adjusted to accommodate legend - left: 50, - right: 50, - top: 50 - }} - themeColor={ChartThemeColor.yellow} - width={450} - > - - - - - - - - - -
- ); - } -} ``` ### Data label diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipCombinedCursorVoronoi.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipCombinedCursorVoronoi.tsx new file mode 100644 index 00000000000..763610b524d --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipCombinedCursorVoronoi.tsx @@ -0,0 +1,102 @@ +import { + Chart, + ChartAxis, + ChartGroup, + ChartLine, + ChartThemeColor, + createContainer +} from '@patternfly/react-charts/victory'; + +interface PetData { + name?: string; + symbol?: { type: string }; + x?: string; + y?: number; +} + +export const ChartTooltipCombinedCursorVoronoi: React.FunctionComponent = () => { + // Note: Container order is important + const CursorVoronoiContainer = createContainer('voronoi', 'cursor'); + const legendData: PetData[] = [ + { name: 'Cats' }, + { name: 'Dogs', symbol: { type: 'dash' } }, + { name: 'Birds' }, + { name: 'Mice' } + ]; + + const data1: PetData[] = [ + { name: 'Cats', x: '2015', y: 1 }, + { name: 'Cats', x: '2016', y: 2 }, + { name: 'Cats', x: '2017', y: 5 }, + { name: 'Cats', x: '2018', y: 3 } + ]; + + const data2: PetData[] = [ + { name: 'Dogs', x: '2015', y: 2 }, + { name: 'Dogs', x: '2016', y: 1 }, + { name: 'Dogs', x: '2017', y: 7 }, + { name: 'Dogs', x: '2018', y: 4 } + ]; + + const data3: PetData[] = [ + { name: 'Birds', x: '2015', y: 3 }, + { name: 'Birds', x: '2016', y: 4 }, + { name: 'Birds', x: '2017', y: 9 }, + { name: 'Birds', x: '2018', y: 5 } + ]; + + const data4: PetData[] = [ + { name: 'Mice', x: '2015', y: 3 }, + { name: 'Mice', x: '2016', y: 3 }, + { name: 'Mice', x: '2017', y: 8 }, + { name: 'Mice', x: '2018', y: 7 } + ]; + + return ( +
+ `${datum.name}: ${datum.y}`} + mouseFollowTooltips + voronoiDimension="x" + voronoiPadding={50} + /> + } + legendData={legendData} + legendPosition="bottom" + height={275} + maxDomain={{ y: 10 }} + minDomain={{ y: 0 }} + name="chart2" + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 50, + right: 50, + top: 50 + }} + themeColor={ChartThemeColor.orange} + width={450} + > + + + + + + + + + +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipEmbeddedCustomFontSize.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipEmbeddedCustomFontSize.tsx new file mode 100644 index 00000000000..35e09573ed4 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipEmbeddedCustomFontSize.tsx @@ -0,0 +1,121 @@ +import { + Chart, + ChartAxis, + ChartGroup, + ChartLegendTooltip, + ChartLegend, + ChartLine, + ChartLegendTooltipContent, + ChartLegendTooltipLabel, + ChartThemeColor, + createContainer +} from '@patternfly/react-charts/victory'; + +interface PetData { + childName?: string; + name?: string; + symbol?: { type: string }; + x?: string; + y?: number | null; +} + +export const ChartTooltipEmbeddedLegendFont: React.FunctionComponent = () => { + // Note: Container order is important + const CursorVoronoiContainer = createContainer('voronoi', 'cursor'); + const legendData: PetData[] = [ + { childName: 'cats', name: 'Cats' }, + { childName: 'dogs', name: 'Dogs', symbol: { type: 'dash' } }, + { childName: 'birds', name: 'Birds' }, + { childName: 'mice', name: 'Mice' } + ]; + + const legend = ; + const legendTooltipLabel = ; + const legendTooltipContent = ( + + ); + + const data1: PetData[] = [ + { name: 'Cats', x: '2015', y: 1 }, + { name: 'Cats', x: '2016', y: 2 }, + { name: 'Cats', x: '2017', y: 5 }, + { name: 'Cats', x: '2018', y: 3 } + ]; + + const data2: PetData[] = [ + { name: 'Dogs', x: '2015', y: 2 }, + { name: 'Dogs', x: '2016', y: 1 }, + { name: 'Dogs', x: '2017', y: 7 }, + { name: 'Dogs', x: '2018', y: 4 } + ]; + + const data3: PetData[] = [ + { name: 'Birds', x: '2015', y: 3 }, + { name: 'Birds', x: '2016', y: 4 }, + { name: 'Birds', x: '2017', y: 9 }, + { name: 'Birds', x: '2018', y: 5 } + ]; + + const data4: PetData[] = [ + { name: 'Mice', x: '2015', y: 3 }, + { name: 'Mice', x: '2016', y: null }, + { name: 'Mice', x: '2017', y: 8 }, + { name: 'Mice', x: '2018', y: 7 } + ]; + + return ( +
+ `${datum.y !== null ? datum.y : 'no data'}`} + labelComponent={ + datum.x} + /> + } + mouseFollowTooltips + voronoiDimension="x" + voronoiPadding={50} + /> + } + legendData={legendData} + legendPosition="bottom" + height={275} + maxDomain={{ y: 10 }} + minDomain={{ y: 0 }} + name="chart5" + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 50, + right: 50, + top: 50 + }} + themeColor={ChartThemeColor.yellow} + width={450} + > + + + + + + + + + +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipEmbeddedHtml.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipEmbeddedHtml.tsx new file mode 100644 index 00000000000..d339f2fc868 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipEmbeddedHtml.tsx @@ -0,0 +1,149 @@ +import { + Chart, + ChartArea, + ChartAxis, + ChartCursorTooltip, + ChartGroup, + ChartPoint, + ChartThemeColor, + createContainer +} from '@patternfly/react-charts/victory'; + +interface PetData { + name?: string; + x?: string; + y?: number | null; +} + +export const ChartTooltipEmbeddedHtml: 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' + }; + + // Note: Container order is important + const CursorVoronoiContainer = createContainer('voronoi', 'cursor'); + const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]; + + const data1: PetData[] = [ + { name: 'Cats', x: '2015', y: 3 }, + { name: 'Cats', x: '2016', y: 4 }, + { name: 'Cats', x: '2017', y: 8 }, + { name: 'Cats', x: '2018', y: 6 }, + { name: 'Cats', x: '2019', y: null } + ]; + + const data2: PetData[] = [ + { name: 'Dogs', x: '2015', y: 2 }, + { name: 'Dogs', x: '2016', y: 3 }, + { name: 'Dogs', x: '2017', y: 4 }, + { name: 'Dogs', x: '2018', y: 5 }, + { name: 'Dogs', x: '2019', y: 6 } + ]; + + const data3: PetData[] = [ + { name: 'Birds', x: '2015', y: 1 }, + { name: 'Birds', x: '2016', y: 2 }, + { name: 'Birds', x: '2017', y: 3 }, + { name: 'Birds', x: '2018', y: 2 }, + { name: 'Birds', x: '2019', y: 4 } + ]; + + // Custom HTML component to create a legend layout + const HtmlLegendContent = ({ datum, legendData, text, theme, title, x, y, ..._rest }) => ( + + + + + + + + + + {text.map((val, index) => ( + + + + + + ))} + +
+ {title(datum)} +
+ + + + { + + } + + + + {legendData[index].name}{val}
+ + + ); + + return ( +
+ `${datum.y !== null ? datum.y : 'no data'}`} + labelComponent={ + width > center.x + flyoutWidth + 10 ? offset : -offset}} + // flyoutComponent={} + flyoutHeight={110} + flyoutWidth={({ datum }) => (datum.y === null ? 160 : 125)} + labelComponent={ datum.x} />} + /> + } + mouseFollowTooltips + voronoiDimension="x" + voronoiPadding={50} + /> + } + legendData={legendData} + legendPosition="bottom-left" + height={225} + name="chart4" + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 50, + right: 50, + top: 50 + }} + maxDomain={{ y: 9 }} + themeColor={ChartThemeColor.multiUnordered} + width={650} + > + + + + + + + + +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipEmbeddedLegend.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipEmbeddedLegend.tsx new file mode 100644 index 00000000000..fc4fc6c1dd3 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipEmbeddedLegend.tsx @@ -0,0 +1,106 @@ +import { + Chart, + ChartAxis, + ChartGroup, + ChartLegendTooltip, + ChartLine, + ChartThemeColor, + createContainer +} from '@patternfly/react-charts/victory'; + +interface PetData { + childName?: string; + name?: string; + symbol?: { type: string }; + x?: string; + y?: number; +} + +export const ChartTooltipEmbeddedLegend: React.FunctionComponent = () => { + // Note: Container order is important + const CursorVoronoiContainer = createContainer('voronoi', 'cursor'); + const legendData: PetData[] = [ + { childName: 'cats', name: 'Cats' }, + { childName: 'dogs', name: 'Dogs', symbol: { type: 'dash' } }, + { childName: 'birds', name: 'Birds' }, + { childName: 'mice', name: 'Mice' } + ]; + + const data1: PetData[] = [ + { name: 'Cats', x: '2015', y: 1 }, + { name: 'Cats', x: '2016', y: 2 }, + { name: 'Cats', x: '2017', y: 5 }, + { name: 'Cats', x: '2018', y: 3 } + ]; + + const data2: PetData[] = [ + { name: 'Dogs', x: '2015', y: 2 }, + { name: 'Dogs', x: '2016', y: 1 }, + { name: 'Dogs', x: '2017', y: 7 }, + { name: 'Dogs', x: '2018', y: 4 } + ]; + + const data3: PetData[] = [ + { name: 'Birds', x: '2015', y: 3 }, + { name: 'Birds', x: '2016', y: 4 }, + { name: 'Birds', x: '2017', y: 9 }, + { name: 'Birds', x: '2018', y: 5 } + ]; + + const data4: PetData[] = [ + { name: 'Mice', x: '2015', y: 3 }, + { name: 'Mice', x: '2016', y: null }, + { name: 'Mice', x: '2017', y: 8 }, + { name: 'Mice', x: '2018', y: 7 } + ]; + + return ( +
+ `${datum.y !== null ? datum.y : 'no data'}`} + labelComponent={ datum.x} />} + mouseFollowTooltips + voronoiDimension="x" + voronoiPadding={50} + /> + } + legendData={legendData} + legendPosition="bottom" + height={275} + maxDomain={{ y: 10 }} + minDomain={{ y: 0 }} + name="chart3" + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 50, + right: 50, + top: 50 + }} + themeColor={ChartThemeColor.green} + width={450} + > + + + + + + + + + +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipVoronoi.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipVoronoi.tsx new file mode 100644 index 00000000000..11afad2adc7 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipVoronoi.tsx @@ -0,0 +1,67 @@ +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; + +interface PetData { + name?: string; + x?: string; + y?: number; +} + +export const ChartTooltipVoronoi: React.FunctionComponent = () => { + const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]; + + const data1: PetData[] = [ + { name: 'Cats', x: '2015', y: 3 }, + { name: 'Cats', x: '2016', y: 4 }, + { name: 'Cats', x: '2017', y: 8 }, + { name: 'Cats', x: '2018', y: 6 } + ]; + + const data2: PetData[] = [ + { name: 'Dogs', x: '2015', y: 2 }, + { name: 'Dogs', x: '2016', y: 3 }, + { name: 'Dogs', x: '2017', y: 4 }, + { name: 'Dogs', x: '2018', y: 5 }, + { name: 'Dogs', x: '2019', y: 6 } + ]; + + const data3: PetData[] = [ + { name: 'Birds', x: '2015', y: 1 }, + { name: 'Birds', x: '2016', y: 2 }, + { name: 'Birds', x: '2017', y: 3 }, + { name: 'Birds', x: '2018', y: 2 }, + { name: 'Birds', x: '2019', y: 4 } + ]; + + return ( +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea /> + } + legendData={legendData} + legendOrientation="vertical" + legendPosition="right" + height={200} + maxDomain={{ y: 9 }} + name="chart1" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + width={800} + > + + + + + + + + +
+ ); +};