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..ad918b49195 100644 --- a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md @@ -6,6 +6,7 @@ hideDarkMode: true --- import { createRef } from 'react'; +import { useRef, useState, useEffect } from 'react'; import { Chart, ChartArea, @@ -540,355 +541,46 @@ class EmbeddedLegendAlt extends React.Component { This demonstrates an alternate way of applying tooltips using data labels. -```js -import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory'; +```ts file = "ChartTooltipDataLabel.tsx" -
- - - - - } - /> - } - /> - } - /> - } - /> - - -
``` ### Fixed tooltip This demonstrates how to adjust the tooltip position and label radius -```js -import { ChartDonut, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory'; - -
- } - labelRadius={46} - labels={({ datum }) => `${datum.x}: ${datum.y}%`} - name="chart5" - subTitle="Pets" - title="100" - themeColor={ChartThemeColor.teal} - width={150} - /> -
+```ts file = "ChartTooltipFixed.tsx" + ``` ### Legend This demonstrates an approach for applying tooltips to a legend using a custom legend label component. -```js -import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory'; -import { Tooltip } from '@patternfly/react-core'; +```ts file = "ChartTooltipLegend.tsx" -class TooltipPieChart extends React.Component { - constructor(props) { - super(props); - - // Custom legend label component - // Note: Tooltip wraps children with a div tag, so we add a reference to ChartLabel instead - this.LegendLabel = ({datum, ...rest}) => { - const ref = createRef(); - return ( - - - - - ); - } - - // Custom legend component - this.getLegend = (legendData) => ( - } - /> - ); - } - - render() { - return ( -
- `${datum.x}: ${datum.y}`} - legendComponent={this.getLegend([ - { name: 'Cats: 35' }, - { name: 'Dogs: 55' }, - { name: 'Birds: 10' } - ])} - legendPosition="bottom" - name="chart7" - padding={{ - bottom: 65, - left: 20, - right: 20, - top: 20 - }} - themeColor={ChartThemeColor.multiOrdered} - width={300} - /> -
- ); - } -} ``` ### Left aligned This demonstrates how to customize tooltip label alignment using theme properties. -```js -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts/victory'; - -class TooltipThemeChart extends React.Component { - constructor(props) { - super(props); - - // Victory theme properties only - this.themeProps = { - voronoi: { - style: { - labels: { - textAnchor: 'start' // Align tooltip labels left - } - } - } - }; - - // Applies theme color and variant to base theme - this.myCustomTheme = getCustomTheme( - ChartThemeColor.default, - this.themeProps - ); - } +```ts file = "ChartTooltipLeftAligned.tsx" - render() { - return ( -
- `${datum.name}: ${datum.y}`} constrainToVisibleArea voronoiDimension="x"/>} - legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]} - legendOrientation="vertical" - legendPosition="right" - height={250} - maxDomain={{y: 10}} - minDomain={{y: 0}} - name="chart8" - padding={{ - bottom: 50, - left: 50, - right: 200, // Adjusted to accommodate legend - top: 50 - }} - theme={this.myCustomTheme} - width={600} - > - - - - - - - - - -
- ); - } -} ``` ### CSS overflow This demonstrates an alternate way of applying tooltips using CSS overflow instead of constrainToVisibleArea. -```js -import { ChartArea, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; - -// Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455 -const sheet = (() => { - var style = document.createElement("style"); - document.head.appendChild(style); - return style.sheet; -})(); - -sheet.insertRule(".ws-react-charts-tooltip-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }", sheet.cssRules.length); -sheet.insertRule(".ws-react-charts-tooltip-overflow svg { overflow: visible; }", sheet.cssRules.length); - -
-
- `${datum.name}: ${datum.y}`} />} - height={100} - maxDomain={{y: 9}} - name="chart9" - padding={0} - themeColor={ChartThemeColor.green} - width={400} - > - - - -
-
+```ts file = "ChartTooltipCssOverflow.tsx" + ``` ### Wrapped chart This demonstrates an alternate way of applying tooltips by wrapping charts with the Tooltip component. -```js -import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory'; -import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core'; +```ts file = "ChartTooltipWrappedChart.tsx" -class TooltipChart extends React.Component { - constructor(props) { - super(props); - this.state = { - isVisible: false - }; - this.showTooltip = () => { - this.setState({ isVisible: !this.state.isVisible }); - }; - } - - render() { - const { isVisible } = this.state; - - return ( -
-
- My custom tooltip
} isVisible={isVisible} position={TooltipPosition.right} trigger="manual"> - null} - name="chart10" - > - null} - subTitle="of 100 GBps" - title="45%" - /> - - -
-
- -
- - ); - } -} ``` ## Documentation diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipCssOverflow.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipCssOverflow.tsx new file mode 100644 index 00000000000..3933f0deb34 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipCssOverflow.tsx @@ -0,0 +1,58 @@ +import { + ChartArea, + ChartGroup, + ChartLabel, + ChartThemeColor, + ChartVoronoiContainer +} from '@patternfly/react-charts/victory'; +import { useEffect } from 'react'; + +interface PetData { + name: string; + x: string; + y: number; +} + +export const ChartTooltipCssOverflow: React.FunctionComponent = () => { + // Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455 + useEffect(() => { + const sheet = (() => { + const style = document.createElement('style'); + document.head.appendChild(style); + return style.sheet; + })(); + + sheet.insertRule( + '.ws-react-charts-tooltip-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }', + sheet.cssRules.length + ); + sheet.insertRule('.ws-react-charts-tooltip-overflow svg { overflow: visible; }', sheet.cssRules.length); + }, []); + + const data: 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 } + ]; + return ( +
+
+ `${datum.name}: ${datum.y}`} />} + height={100} + maxDomain={{ y: 9 }} + name="chart9" + padding={0} + themeColor={ChartThemeColor.green} + width={400} + > + + + +
+
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipDataLabel.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipDataLabel.tsx new file mode 100644 index 00000000000..f834f852f83 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipDataLabel.tsx @@ -0,0 +1,77 @@ +import { + Chart, + ChartAxis, + ChartBar, + ChartStack, + ChartThemeColor, + ChartTooltip +} from '@patternfly/react-charts/victory'; + +interface PetData { + name?: string; + x?: string; + y?: number; + label?: string; +} + +export const ChartTooltipDataLabel: React.FunctionComponent = () => { + const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]; + const data1: PetData[] = [ + { name: 'Cats', x: '2015', y: 1, label: 'Cats: 1' }, + { name: 'Cats', x: '2016', y: 2, label: 'Cats: 2' }, + { name: 'Cats', x: '2017', y: 5, label: 'Cats: 5' }, + { name: 'Cats', x: '2018', y: 3, label: 'Cats: 3' } + ]; + + const data2: PetData[] = [ + { name: 'Dogs', x: '2015', y: 2, label: 'Dogs: 2' }, + { name: 'Dogs', x: '2016', y: 1, label: 'Dogs: 1' }, + { name: 'Dogs', x: '2017', y: 7, label: 'Dogs: 7' }, + { name: 'Dogs', x: '2018', y: 4, label: 'Dogs: 4' } + ]; + + const data3: PetData[] = [ + { name: 'Birds', x: '2015', y: 4, label: 'Birds: 4' }, + { name: 'Birds', x: '2016', y: 4, label: 'Birds: 4' }, + { name: 'Birds', x: '2017', y: 9, label: 'Birds: 9' }, + { name: 'Birds', x: '2018', y: 7, label: 'Birds: 7' } + ]; + + const data4: PetData[] = [ + { name: 'Mice', x: '2015', y: 3, label: 'Mice: 3' }, + { name: 'Mice', x: '2016', y: 3, label: 'Mice: 3' }, + { name: 'Mice', x: '2017', y: 8, label: 'Mice: 8' }, + { name: 'Mice', x: '2018', y: 5, label: 'Mice: 5' } + ]; + + return ( +
+ + + + + } /> + } /> + } /> + } /> + + +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipFixed.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipFixed.tsx new file mode 100644 index 00000000000..92a3552644f --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipFixed.tsx @@ -0,0 +1,34 @@ +import { ChartDonut, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory'; + +interface PetData { + x: string; + y: number; +} + +export const ChartTooltipFixed: React.FunctionComponent = () => { + const data: PetData[] = [ + { x: 'Cats', y: 35 }, + { x: 'Dogs', y: 55 }, + { x: 'Birds', y: 10 } + ]; + + return ( +
+ } + labelRadius={46} + labels={({ datum }) => `${datum.x}: ${datum.y}%`} + name="chart5" + subTitle="Pets" + title="100" + themeColor={ChartThemeColor.teal} + width={150} + /> +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipLeftAligned.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipLeftAligned.tsx new file mode 100644 index 00000000000..cf2b6adbf03 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipLeftAligned.tsx @@ -0,0 +1,114 @@ +import { + Chart, + ChartAxis, + ChartGroup, + ChartLine, + ChartThemeColor, + ChartVoronoiContainer, + getCustomTheme +} from '@patternfly/react-charts/victory'; + +interface PetData { + name?: string; + symbol?: { type: string }; + x?: string; + y?: number; +} + +export const ChartTooltipLeftAligned: React.FunctionComponent = () => { + // Victory theme properties only + const themeProps = { + voronoi: { + style: { + labels: { + textAnchor: 'start' // Align tooltip labels left + } + } + } + }; + + // Applies theme color and variant to base theme + const myCustomTheme = getCustomTheme(ChartThemeColor.default, themeProps); + + 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}`} + constrainToVisibleArea + voronoiDimension="x" + /> + } + legendData={legendData} + legendOrientation="vertical" + legendPosition="right" + height={250} + maxDomain={{ y: 10 }} + minDomain={{ y: 0 }} + name="chart8" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + theme={myCustomTheme} + width={600} + > + + + + + + + + + +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipLegend.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipLegend.tsx new file mode 100644 index 00000000000..c60b74a25f3 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipLegend.tsx @@ -0,0 +1,55 @@ +import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory'; +import { Tooltip } from '@patternfly/react-core'; +import { useRef } from 'react'; + +interface PetData { + x: string; + y: number; +} + +export const ChartTooltipLegend: React.FunctionComponent = () => { + // Custom legend label component + // Note: Tooltip wraps children with a div tag, so we add a reference to ChartLabel instead + const LegendLabel = ({ datum, ...rest }) => { + const ref = useRef(null); + return ( + + + + + ); + }; + + // Custom legend component + const getLegend = (legendData) => } />; + + const data: PetData[] = [ + { x: 'Cats', y: 35 }, + { x: 'Dogs', y: 55 }, + { x: 'Birds', y: 10 } + ]; + + return ( +
+ `${datum.x}: ${datum.y}`} + legendComponent={getLegend([{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }])} + legendPosition="bottom" + name="chart7" + padding={{ + bottom: 65, + left: 20, + right: 20, + top: 20 + }} + themeColor={ChartThemeColor.multiOrdered} + width={300} + /> +
+ ); +}; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipWrappedChart.tsx b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipWrappedChart.tsx new file mode 100644 index 00000000000..b56f1b69b6e --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltipWrappedChart.tsx @@ -0,0 +1,54 @@ +import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory'; +import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core'; +import { useState } from 'react'; + +interface Data { + x: string; + y: number; +} + +export const ChartTooltipWrappedChart: React.FunctionComponent = () => { + const [isVisible, setIsVisible] = useState(false); + + const showTooltip = () => { + setIsVisible(!isVisible); + }; + + const data: Data[] = [ + { x: 'Warning at 60%', y: 60 }, + { x: 'Danger at 90%', y: 90 } + ]; + + return ( +
+
+ My custom tooltip
} + isVisible={isVisible} + position={TooltipPosition.right} + trigger="manual" + > + null} + name="chart10" + > + null} + subTitle="of 100 GBps" + title="45%" + /> + + +
+
+ +
+ + ); +};