feat(heatmap): add missing event handlers to the documentation

plouc · Jan 12, 2022 · bac7d7a · bac7d7a
1 parent 849c7d7
commit bac7d7a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 61 deletions.
diff --git a/packages/heatmap/src/canvas.tsx b/packages/heatmap/src/canvas.tsx
@@ -14,7 +14,6 @@ export const renderRect = <Datum extends HeatMapDatum>(
 
     ctx.fillStyle = color
     if (borderWidth > 0) {
-        console.log(borderWidth)
         ctx.strokeStyle = borderColor
         ctx.lineWidth = borderWidth
     }

diff --git a/packages/heatmap/src/hooks.ts b/packages/heatmap/src/hooks.ts
@@ -260,46 +260,6 @@ export const useHeatMap = <
             offsetY,
         }
     }, [data, keys, width, height, padding, forceSquare])
-
-    const sizeScale = useMemo(() => {
-        if (sizeVariation > 0) {
-            return scaleLinear()
-                .range([1 - sizeVariation, 1])
-                .domain([values.min, values.max])
-        }
-    }, [sizeVariation, values])
-
-    const cells = useMemo(
-        () =>
-            computeCells<Datum>({
-                data,
-                keys,
-                getIndex,
-                xScale: scales.x,
-                yScale: scales.y,
-                sizeScale,
-                cellOpacity,
-                cellWidth: layoutConfig.cellWidth,
-                cellHeight: layoutConfig.cellHeight,
-                colorScale,
-                nanColor,
-                getLabel,
-                getLabelTextColor,
-            }),
-        [
-            data,
-            keys,
-            getIndex,
-            scales,
-            sizeScale,
-            cellOpacity,
-            layoutConfig,
-            colorScale,
-            nanColor,
-            getLabel,
-            getLabelTextColor,
-        ]
-    )
     */
 }
 

diff --git a/website/src/data/components/heatmap/props.ts b/website/src/data/components/heatmap/props.ts
@@ -31,6 +31,8 @@ const props: ChartProperty[] = [
             }[]
         }[]
         \`\`\`
+        
+        Please note that each serie **MUST** have the same length.
         `,
     },
     {
@@ -418,30 +420,41 @@ const props: ChartProperty[] = [
         defaultValue: defaults.isInteractive,
     }),
     {
-        key: 'onClick',
-        flavors: ['svg', 'canvas'],
+        key: 'tooltip',
         group: 'Interactivity',
-        type: '(cell, event) => void',
-        help: 'onClick handler.',
+        type: 'TooltipComponent',
+        help: 'Custom tooltip component.',
+        flavors: ['svg', 'canvas'],
         description: `
-            onClick handler, will receive node data
-            as first argument & event as second one.
-            The node data has the following shape:
-            \`\`\`
-            {
-                key:        string,
-                value:      number,
-                x:          number,
-                xKey:       {string|number},
-                y:          number,
-                yKey:       {string|number},
-                width:      number,
-                height:     number,
-                opacity:    number
-            }
-            \`\`\`
+            An optional component allowing complete tooltip customisation,
+            it must return a valid HTML element and will receive
+            the cell's data as a property.
         `,
     },
+    {
+        key: 'onMouseEnter',
+        flavors: ['svg'],
+        group: 'Interactivity',
+        type: '(cell: ComputedCell, event: MouseEvent) => void',
+    },
+    {
+        key: 'onMouseMove',
+        flavors: ['svg'],
+        group: 'Interactivity',
+        type: '(cell: ComputedCell, event: MouseEvent) => void',
+    },
+    {
+        key: 'onMouseLeave',
+        flavors: ['svg'],
+        group: 'Interactivity',
+        type: '(cell: ComputedCell, event: MouseEvent) => void',
+    },
+    {
+        key: 'onClick',
+        flavors: ['svg', 'canvas'],
+        group: 'Interactivity',
+        type: '(cell: ComputedCell, event: MouseEvent) => void',
+    },
     {
         key: 'hoverTarget',
         flavors: ['svg', 'canvas'],