[WIP] feat: click trigger treemap tooltip

src/chart/Treemap.tsx

@@ -360,8 +360,9 @@
     e.persist();
     const { onMouseEnter, children } = this.props;
     const tooltipItem = findChildByType(children, Tooltip);
+    const tooltipTrigger = tooltipItem.props.trigger;
 
-    if (tooltipItem) {
+    if (tooltipItem && tooltipTrigger === 'hover') {
       this.setState(
         {
           isTooltipActive: true,
@@ -382,8 +383,9 @@
     e.persist();
     const { onMouseLeave, children } = this.props;
     const tooltipItem = findChildByType(children, Tooltip);
+    const tooltipTrigger = tooltipItem.props.trigger;
 
-    if (tooltipItem) {
+    if (tooltipItem && tooltipTrigger === 'hover') {
       this.setState(
         {
           isTooltipActive: false,
@@ -419,8 +421,30 @@
   };
 
   handleClick(node: TreemapNode) {
-    const { onClick, type } = this.props;
-    if (type === 'nest' && node.children) {
+    const { onClick, type, children } = this.props;
+    const tooltipItem = findChildByType(children, Tooltip);
+    const tooltipTrigger = tooltipItem.props.trigger;
+    const { activeNode } = this.state;
+    const isNestedParentNode = type === 'nest' && node.children;
+
+    if (tooltipTrigger === 'click') {
+      if (
+        (!activeNode || (activeNode && (activeNode.index !== node.index || activeNode.depth !== node.depth))) &&
+        !isNestedParentNode
+      ) {
+        this.setState({
+          isTooltipActive: true,
+          activeNode: node,
+        });
+      } else {
+        this.setState({
+          isTooltipActive: false,
+          activeNode: null,
+        });
+      }
+    }
+
+    if (isNestedParentNode) {
       const { width, height, dataKey, aspectRatio } = this.props;
       const root = computeNode({
         depth: 0,
@@ -446,7 +470,7 @@
   }
 
   handleNestIndex(node: TreemapNode, i: number) {
-    let { nestIndex } = this.state;
+    const { nestIndex, isTooltipActive } = this.state;
     const { width, height, dataKey, aspectRatio } = this.props;
     const root = computeNode({
       depth: 0,
@@ -455,13 +479,16 @@
       dataKey,
     });
 
+    if (isTooltipActive) {
+      this.setState({ isTooltipActive: false, activeNode: null });
+    }
+
     const formatRoot = squarify(root, aspectRatio);
 
-    nestIndex = nestIndex.slice(0, i + 1);
     this.setState({
       formatRoot,
       currentRoot: node,
-      nestIndex,
+      nestIndex: nestIndex.slice(0, i + 1),
     });
   }
 
@@ -479,7 +506,7 @@
     const { isAnimationFinished } = this.state;
     const { width, height, x, y, depth } = nodeProps;
     const translateX = parseInt(`${(Math.random() * 2 - 1) * width}`, 10);
-    let event = {} as any;
+    let event = {};
     if (isLeaf || type === 'nest') {
       event = {
         onMouseEnter: this.handleMouseEnter.bind(this, nodeProps),

storybook/stories/API/chart/Treemap.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { sizeData } from '../../data';
+import { nestedCategoryData, sizeData } from '../../data';
 import { ResponsiveContainer, Tooltip, Treemap } from '../../../../src';
 import { ChartSizeProps, data } from '../props/ChartProps';
 import {
@@ -108,3 +108,21 @@ export const WithTooltip = {
     isAnimationActive: false,
   },
 };
+
+export const NestedWithClickLockedTooltip = {
+  render: (args: Record<string, any>) => {
+    return (
+      <ResponsiveContainer width="100%" height={400}>
+        <Treemap {...args} aspectRatio={4 / 3} type="nest">
+          <Tooltip trigger="click" />
+        </Treemap>
+      </ResponsiveContainer>
+    );
+  },
+  args: {
+    data: nestedCategoryData,
+    dataKey: 'size',
+    nameKey: 'name',
+    isAnimationActive: false,
+  },
+};

storybook/stories/data/Size.ts

@@ -19,8 +19,141 @@ const sizeData = [
   },
   {
     name: 'physics',
-    children: [{ name: 'DragForce', size: 200 }],
+    children: [{ name: 'DragForce', size: 100 }],
   },
 ];
 
-export { sizeData };
+const nestedCategoryData = [
+  {
+    name: 'axis',
+    children: [
+      { name: 'Axes', size: 1302 },
+      { name: 'Axis', size: 24593 },
+      { name: 'AxisGridLine', size: 652 },
+      { name: 'AxisLabel', size: 636 },
+      { name: 'CartesianAxes', size: 6703 },
+    ],
+  },
+  {
+    name: 'controls',
+    children: [
+      { name: 'AnchorControl', size: 2138 },
+      { name: 'ClickControl', size: 3824 },
+      { name: 'Control', size: 1353 },
+      { name: 'ControlList', size: 4665 },
+      { name: 'DragControl', size: 2649 },
+      { name: 'ExpandControl', size: 2832 },
+      { name: 'HoverControl', size: 4896 },
+      { name: 'IControl', size: 763 },
+      { name: 'PanZoomControl', size: 5222 },
+      { name: 'SelectionControl', size: 7862 },
+      { name: 'TooltipControl', size: 8435 },
+    ],
+  },
+  {
+    name: 'data',
+    children: [
+      { name: 'Data', size: 20544 },
+      { name: 'DataList', size: 19788 },
+      { name: 'DataSprite', size: 10349 },
+      { name: 'EdgeSprite', size: 3301 },
+      { name: 'NodeSprite', size: 19382 },
+      {
+        name: 'render',
+        children: [
+          { name: 'ArrowType', size: 698 },
+          { name: 'EdgeRenderer', size: 5569 },
+          { name: 'IRenderer', size: 353 },
+          { name: 'ShapeRenderer', size: 2247 },
+        ],
+      },
+      { name: 'ScaleBinding', size: 11275 },
+      { name: 'Tree', size: 7147 },
+      { name: 'TreeBuilder', size: 9930 },
+    ],
+  },
+  {
+    name: 'events',
+    children: [
+      { name: 'DataEvent', size: 7313 },
+      { name: 'SelectionEvent', size: 6880 },
+      { name: 'TooltipEvent', size: 3701 },
+      { name: 'VisualizationEvent', size: 2117 },
+    ],
+  },
+  {
+    name: 'legend',
+    children: [
+      { name: 'Legend', size: 20859 },
+      { name: 'LegendItem', size: 4614 },
+      { name: 'LegendRange', size: 10530 },
+    ],
+  },
+  {
+    name: 'operator',
+    children: [
+      {
+        name: 'distortion',
+        children: [
+          { name: 'BifocalDistortion', size: 4461 },
+          { name: 'Distortion', size: 6314 },
+          { name: 'FisheyeDistortion', size: 3444 },
+        ],
+      },
+      {
+        name: 'encoder',
+        children: [
+          { name: 'ColorEncoder', size: 3179 },
+          { name: 'Encoder', size: 4060 },
+          { name: 'PropertyEncoder', size: 4138 },
+          { name: 'ShapeEncoder', size: 1690 },
+          { name: 'SizeEncoder', size: 1830 },
+        ],
+      },
+      {
+        name: 'filter',
+        children: [
+          { name: 'FisheyeTreeFilter', size: 5219 },
+          { name: 'GraphDistanceFilter', size: 3165 },
+          { name: 'VisibilityFilter', size: 3509 },
+        ],
+      },
+      { name: 'IOperator', size: 1286 },
+      {
+        name: 'label',
+        children: [
+          { name: 'Labeler', size: 9956 },
+          { name: 'RadialLabeler', size: 3899 },
+          { name: 'StackedAreaLabeler', size: 3202 },
+        ],
+      },
+      {
+        name: 'layout',
+        children: [
+          { name: 'AxisLayout', size: 6725 },
+          { name: 'BundledEdgeRouter', size: 3727 },
+          { name: 'CircleLayout', size: 9317 },
+          { name: 'CirclePackingLayout', size: 12003 },
+          { name: 'DendrogramLayout', size: 4853 },
+          { name: 'ForceDirectedLayout', size: 8411 },
+          { name: 'IcicleTreeLayout', size: 4864 },
+          { name: 'IndentedTreeLayout', size: 3174 },
+          { name: 'Layout', size: 7881 },
+          { name: 'NodeLinkTreeLayout', size: 12870 },
+          { name: 'PieLayout', size: 2728 },
+          { name: 'RadialTreeLayout', size: 12348 },
+          { name: 'RandomLayout', size: 870 },
+          { name: 'StackedAreaLayout', size: 9121 },
+          { name: 'TreeMapLayout', size: 9191 },
+        ],
+      },
+      { name: 'Operator', size: 2490 },
+      { name: 'OperatorList', size: 5248 },
+      { name: 'OperatorSequence', size: 4190 },
+      { name: 'OperatorSwitch', size: 2581 },
+      { name: 'SortOperator', size: 2023 },
+    ],
+  },
+];
+
+export { sizeData, nestedCategoryData };