doc change

FormidableLabs · Nov 12, 2024 · b2f0cf8 · b2f0cf8
1 parent 1f2650d
commit b2f0cf8
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 92 deletions.
diff --git a/.changeset/forty-shrimps-hug.md b/.changeset/forty-shrimps-hug.md
diff --git 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}
         />
-        <VictoryChart
-          style={chartStyle}
-          minDomain={0}
-          theme={VictoryTheme.clean}
-        >
-          <VictoryBoxPlot
-            minLabels
-            minLabelComponent={
-              <VictoryTooltip
-                labelTarget="minLabels"
-                dataTargets={["min", "max", "q1", "q3", "median"]}
-              />
-            }
-            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] },
-            ]}
-          />
-        </VictoryChart>
       </div>
     );
   }

diff --git 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<VictoryTooltipProps> {
     labelComponent: <VictoryLabel />,
     flyoutComponent: <Flyout />,
     groupComponent: <g />,
-    labelTarget: "labels",
-    dataTargets: ["data"],
   };
 
   static defaultEvents(props: VictoryTooltipProps): {
@@ -116,35 +112,29 @@ export class VictoryTooltip extends React.Component<VictoryTooltipProps> {
   }[] {
     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
@@ -252,6 +252,111 @@ Events can be handled by passing an array of event objects to the `events` prop
 </VictoryChart>
 ```
 
+## 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 (
+    <VictoryBoxPlot
+      minLabels
+      maxLabels
+      q1Labels
+      q3Labels
+      medianLabels
+      events={events}
+      minLabelComponent={
+        <VictoryTooltip />
+      }
+      maxLabelComponent={
+        <VictoryTooltip />
+      }
+      q1LabelComponent={
+        <VictoryTooltip />
+      }
+      q3LabelComponent={
+        <VictoryTooltip />
+      }
+      medianLabelComponent={
+        <VictoryTooltip />
+      }
+      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(<App />);
+```
+
 ## 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.
   />
 </svg>
 ```
-
-## Box Plot - Tooltips
-
-```jsx live
-<VictoryBoxPlot
-  minLabels
-  q3Labels
-  q3LabelComponent={
-    <VictoryTooltip
-      labelTarget="q3Labels"
-      dataTargets={["q3"]}
-    />
-  }
-  minLabelComponent={
-    <VictoryTooltip
-      labelTarget="minLabels"
-      dataTargets={[
-        "min",
-        "max",
-        "q1",
-        "median",
-      ]}
-    />
-  }
-  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],
-    },
-  ]}
-/>
-```