From b2f0cf84043bbfd7d4c60bc04519b1e92b58cd75 Mon Sep 17 00:00:00 2001 From: Nathan Kluth Date: Tue, 12 Nov 2024 10:14:44 -0700 Subject: [PATCH] doc change --- .changeset/forty-shrimps-hug.md | 5 - demo/ts/components/victory-box-plot-demo.tsx | 22 --- .../victory-tooltip/src/victory-tooltip.tsx | 42 ++--- website/docs/charts/box-plot.mdx | 144 +++++++++++++----- 4 files changed, 121 insertions(+), 92 deletions(-) delete mode 100644 .changeset/forty-shrimps-hug.md diff --git a/.changeset/forty-shrimps-hug.md b/.changeset/forty-shrimps-hug.md deleted file mode 100644 index 13da029b0..000000000 --- a/.changeset/forty-shrimps-hug.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"victory-tooltip": minor ---- - -add new properties labelTarget and dataTargets for tooltip event support diff --git a/demo/ts/components/victory-box-plot-demo.tsx b/demo/ts/components/victory-box-plot-demo.tsx index 65329a588..bdc9ba8a0 100644 --- a/demo/ts/components/victory-box-plot-demo.tsx +++ b/demo/ts/components/victory-box-plot-demo.tsx @@ -272,28 +272,6 @@ export default class VictoryBoxPlotDemo extends React.Component< boxWidth={10} data={this.state.data} /> - - - } - data={[ - { x: "red", y: [5, 10, 9, 2] }, - { x: "blue", y: [1, 15, 6, 8] }, - { x: "green", y: [3, 5, 6, 9] }, - { x: "yellow", y: [5, 20, 8, 12] }, - { x: "white", y: [2, 11, 12, 13] }, - ]} - /> - ); } diff --git a/packages/victory-tooltip/src/victory-tooltip.tsx b/packages/victory-tooltip/src/victory-tooltip.tsx index 77a24d2d1..c851cda71 100644 --- a/packages/victory-tooltip/src/victory-tooltip.tsx +++ b/packages/victory-tooltip/src/victory-tooltip.tsx @@ -39,7 +39,6 @@ export interface VictoryTooltipProps }; constrainToVisibleArea?: boolean; cornerRadius?: NumberOrCallback; - dataTargets: string[]; events?: any; height?: number; horizontal?: boolean; @@ -50,7 +49,6 @@ export interface VictoryTooltipProps flyoutWidth?: NumberOrCallback; id?: number | string; index?: number | string; - labelTarget: string; orientation?: OrientationTypes | ((...args: any[]) => OrientationTypes); pointerLength?: NumberOrCallback; pointerOrientation?: @@ -106,8 +104,6 @@ export class VictoryTooltip extends React.Component { labelComponent: , flyoutComponent: , groupComponent: , - labelTarget: "labels", - dataTargets: ["data"], }; static defaultEvents(props: VictoryTooltipProps): { @@ -116,35 +112,29 @@ export class VictoryTooltip extends React.Component { }[] { const activate = props.activateData ? [ - { target: props.labelTarget, mutation: () => ({ active: true }) }, + { target: "labels", mutation: () => ({ active: true }) }, { target: "data", mutation: () => ({ active: true }) }, ] - : [{ target: props.labelTarget, mutation: () => ({ active: true }) }]; + : [{ target: "labels", mutation: () => ({ active: true }) }]; const deactivate = props.activateData ? [ - { - target: props.labelTarget, - mutation: () => ({ active: undefined }), - }, + { target: "labels", mutation: () => ({ active: undefined }) }, { target: "data", mutation: () => ({ active: undefined }) }, ] - : [ - { - target: props.labelTarget, - mutation: () => ({ active: undefined }), - }, - ]; - return props.dataTargets.map((dataTarget) => ({ - target: dataTarget, - eventHandlers: { - onMouseOver: () => activate, - onFocus: () => activate, - onTouchStart: () => activate, - onMouseOut: () => deactivate, - onBlur: () => deactivate, - onTouchEnd: () => deactivate, + : [{ target: "labels", mutation: () => ({ active: undefined }) }]; + return [ + { + target: "data", + eventHandlers: { + onMouseOver: () => activate, + onFocus: () => activate, + onTouchStart: () => activate, + onMouseOut: () => deactivate, + onBlur: () => deactivate, + onTouchEnd: () => deactivate, + }, }, - })); + ]; } id: string | number; diff --git a/website/docs/charts/box-plot.mdx b/website/docs/charts/box-plot.mdx index a705ee4e6..83c4d2694 100644 --- a/website/docs/charts/box-plot.mdx +++ b/website/docs/charts/box-plot.mdx @@ -252,6 +252,111 @@ Events can be handled by passing an array of event objects to the `events` prop ``` +## Box Plot - Tooltips + +Tooltips are not displayed by default on VictoryBoxPlot; to enable tooltips, use a custom events prop to handle interactions. + +```jsx live noInline +function App() { + const activate = + (label: string) => () => + [ + { + target: label, + mutation: () => ({ + active: true, + }), + }, + ]; + + const deactivate = + (label: string) => () => + [ + { + target: label, + mutation: () => ({ + active: undefined, + }), + }, + ]; + + const dataTypes = [ + "min", + "max", + "q1", + "q3", + "median", + ]; + + const events = dataTypes.map( + (dataType) => ({ + target: dataType, + eventHandlers: { + onMouseOver: activate( + `${dataType}Labels`, + ), + onFocus: activate( + `${dataType}Labels`, + ), + onTouchStart: activate( + `${dataType}Labels`, + ), + onMouseOut: deactivate( + `${dataType}Labels`, + ), + onBlur: deactivate( + `${dataType}Labels`, + ), + onTouchEnd: deactivate( + `${dataType}Labels`, + ), + }, + }), + ); + + return ( + + } + maxLabelComponent={ + + } + q1LabelComponent={ + + } + q3LabelComponent={ + + } + medianLabelComponent={ + + } + data={[ + { x: "red", y: [5, 10, 9, 2] }, + { x: "blue", y: [1, 15, 6, 8] }, + { x: "green", y: [3, 5, 6, 9] }, + { + x: "yellow", + y: [5, 20, 8, 12], + }, + { + x: "white", + y: [2, 11, 12, 13], + }, + ]} + /> + ); +} + +render(); +``` + ## Standalone Rendering Box Plot charts can be rendered outside a VictoryChart. @@ -311,42 +416,3 @@ They can also be embeded in other SVG components by using the `standalone` prop. /> ``` - -## Box Plot - Tooltips - -```jsx live - - } - minLabelComponent={ - - } - data={[ - { x: "red", y: [5, 10, 9, 2] }, - { x: "blue", y: [1, 15, 6, 8] }, - { x: "green", y: [3, 5, 6, 9] }, - { - x: "yellow", - y: [5, 20, 8, 12], - }, - { - x: "white", - y: [2, 11, 12, 13], - }, - ]} -/> -```