From 1867b606111ad1253cadb7e3cbcab2663c3275c5 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Wed, 12 Jan 2022 11:00:59 +0900
Subject: [PATCH] feat(heatmap): adjust stories

---
 packages/funnel/stories/funnel.stories.tsx    |   2 +-
 packages/heatmap/stories/CustomTooltip.tsx    |  26 +++
 packages/heatmap/stories/data.ts              |  14 ++
 packages/heatmap/stories/heatmap.stories.js   | 150 ------------------
 packages/heatmap/stories/heatmap.stories.tsx  |  87 ++++++++++
 .../heatmap/stories/heatmapCanvas.stories.js  | 103 ------------
 .../heatmap/stories/heatmapCanvas.stories.tsx |  57 +++++++
 website/src/data/components/heatmap/meta.yml  |  14 +-
 8 files changed, 195 insertions(+), 258 deletions(-)
 create mode 100644 packages/heatmap/stories/CustomTooltip.tsx
 create mode 100644 packages/heatmap/stories/data.ts
 delete mode 100644 packages/heatmap/stories/heatmap.stories.js
 create mode 100644 packages/heatmap/stories/heatmap.stories.tsx
 delete mode 100644 packages/heatmap/stories/heatmapCanvas.stories.js
 create mode 100644 packages/heatmap/stories/heatmapCanvas.stories.tsx

diff --git a/packages/funnel/stories/funnel.stories.tsx b/packages/funnel/stories/funnel.stories.tsx
index 5b10a19fa7..48bd39183e 100644
--- a/packages/funnel/stories/funnel.stories.tsx
+++ b/packages/funnel/stories/funnel.stories.tsx
@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
-
+// @ts-ignore
 import { ResponsiveFunnel } from '../src'
 
 const commonProps = {
diff --git a/packages/heatmap/stories/CustomTooltip.tsx b/packages/heatmap/stories/CustomTooltip.tsx
new file mode 100644
index 0000000000..39b7fe54bb
--- /dev/null
+++ b/packages/heatmap/stories/CustomTooltip.tsx
@@ -0,0 +1,26 @@
+// @ts-ignore
+import { ComputedCell } from '../src'
+
+export const CustomTooltip = ({ cell }: { cell: ComputedCell<any> }) => {
+    return (
+        <div
+            style={{
+                backgroundColor: cell.color,
+                color: '#ffffff',
+                padding: '6px 9px',
+                borderRadius: '2px',
+                minWidth: '160px',
+                boxShadow: '0 3px 5px rgba(0, 0, 0, .25)',
+                whiteSpace: 'pre',
+            }}
+        >
+            {'id   '}&nbsp;<strong>{cell.id}</strong>
+            <br />
+            {'serie'}&nbsp;<strong>{cell.serieId}</strong>
+            <br />
+            {'x    '}&nbsp;<strong>{cell.data.x}</strong>
+            <br />
+            {'value'}&nbsp;<strong>{cell.formattedValue}</strong>
+        </div>
+    )
+}
diff --git a/packages/heatmap/stories/data.ts b/packages/heatmap/stories/data.ts
new file mode 100644
index 0000000000..cf04d52efe
--- /dev/null
+++ b/packages/heatmap/stories/data.ts
@@ -0,0 +1,14 @@
+import { generateXYSeries } from '@nivo/generators'
+
+export const sampleData = generateXYSeries({
+    serieIds: ['Japan', 'France', 'US', 'Germany', 'Norway', 'Iceland', 'UK', 'Vietnam'],
+    x: {
+        values: ['Train', 'Subway', 'Bus', 'Car', 'Boat', 'Moto', 'Moped', 'Bicycle', 'Others'],
+    },
+    y: {
+        length: NaN,
+        min: -100_000,
+        max: 100_000,
+        round: true,
+    },
+})
diff --git a/packages/heatmap/stories/heatmap.stories.js b/packages/heatmap/stories/heatmap.stories.js
deleted file mode 100644
index 0c212f8bd4..0000000000
--- a/packages/heatmap/stories/heatmap.stories.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import { storiesOf } from '@storybook/react'
-import { generateCountriesData } from '@nivo/generators'
-import { HeatMap } from '../src'
-
-const CustomCell = ({
-    value,
-    x,
-    y,
-    width,
-    height,
-    color,
-    opacity,
-    borderWidth,
-    borderColor,
-    textColor,
-}) => (
-    <g transform={`translate(${x}, ${y})`}>
-        <path
-            transform={`rotate(${value < 50 ? 180 : 0})`}
-            fill={color}
-            fillOpacity={opacity}
-            strokeWidth={borderWidth}
-            stroke={borderColor}
-            d={`
-                M0 -${Math.round(height / 2)}
-                L${Math.round(width / 2)} ${Math.round(height / 2)}
-                L-${Math.round(width / 2)} ${Math.round(height / 2)}
-                L0 -${Math.round(height / 2)}
-            `}
-        />
-        <text
-            dominantBaseline="central"
-            textAnchor="middle"
-            style={{ fill: textColor }}
-            dy={value < 50 ? -6 : 6}
-        >
-            {value}
-        </text>
-    </g>
-)
-
-const keys = [
-    'hot dogs',
-    'burgers',
-    'sandwich',
-    'kebab',
-    'fries',
-    'donut',
-    'junk',
-    'sushi',
-    'ramen',
-    'curry',
-    'udon',
-    'bagel',
-]
-const commonProperties = {
-    width: 900,
-    height: 500,
-    margin: { top: 60, right: 80, bottom: 60, left: 80 },
-    data: generateCountriesData(keys, { size: 9, min: 0, max: 100 }),
-    indexBy: 'country',
-    keys,
-}
-
-const stories = storiesOf('HeatMap', module)
-
-stories.add('default', () => <HeatMap {...commonProperties} />)
-
-stories.add('square cells', () => (
-    <HeatMap
-        {...commonProperties}
-        forceSquare={true}
-        axisTop={{
-            orient: 'top',
-            tickSize: 5,
-            tickPadding: 5,
-            tickRotation: -55,
-            legend: '',
-            legendOffset: 36,
-        }}
-    />
-))
-
-stories.add('circle cells', () => (
-    <HeatMap {...commonProperties} cellShape="circle" padding={2} enableGridY={true} />
-))
-
-stories.add('alternative colors', () => <HeatMap {...commonProperties} colors="BrBG" />)
-
-stories.add('variable cell size', () => (
-    <HeatMap
-        {...commonProperties}
-        colors="BuPu"
-        cellShape="circle"
-        padding={2}
-        sizeVariation={0.6}
-        enableGridX={true}
-        enableGridY={true}
-    />
-))
-
-stories.add('Custom cell component', () => (
-    <HeatMap
-        {...commonProperties}
-        cellShape={CustomCell}
-        padding={4}
-        colors="GnBu"
-        labelTextColor="inherit:darker(1.6)"
-    />
-))
-
-stories.add('with formatted values', () => (
-    <HeatMap
-        {...commonProperties}
-        tooltipFormat={value =>
-            `${Number(value).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
-
-stories.add('with formatted labels', () => (
-    <HeatMap
-        {...commonProperties}
-        label={(datum, key) =>
-            `${Number(datum[key]).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
-
-stories.add('custom tooltip', () => (
-    <HeatMap
-        {...commonProperties}
-        tooltip={({ xKey, yKey, value, color }) => (
-            <strong style={{ color }}>
-                {xKey} / {yKey}: {value}
-            </strong>
-        )}
-        theme={{
-            tooltip: {
-                container: {
-                    background: 'gray',
-                },
-            },
-        }}
-    />
-))
diff --git a/packages/heatmap/stories/heatmap.stories.tsx b/packages/heatmap/stories/heatmap.stories.tsx
new file mode 100644
index 0000000000..098a23a782
--- /dev/null
+++ b/packages/heatmap/stories/heatmap.stories.tsx
@@ -0,0 +1,87 @@
+import { storiesOf } from '@storybook/react'
+// @ts-ignore
+import { HeatMap, ComputedCell } from '../src'
+// @ts-ignore
+import { sampleData } from './data'
+// @ts-ignore
+import { CustomTooltip } from './CustomTooltip'
+
+const commonProperties = {
+    width: 900,
+    height: 500,
+    margin: { top: 60, right: 80, bottom: 60, left: 80 },
+    data: sampleData,
+}
+
+const stories = storiesOf('HeatMap', module)
+
+stories.add('default', () => <HeatMap<any, Record<string, unknown>> {...commonProperties} />)
+
+stories.add('Variable Cell Size', () => (
+    <HeatMap<any, Record<string, unknown>>
+        {...commonProperties}
+        valueFormat=">-.2s"
+        cellComponent="circle"
+        sizeVariation={{
+            sizes: [0.6, 1],
+        }}
+        forceSquare
+        enableGridX={true}
+        enableGridY={true}
+    />
+))
+
+const CustomCell = ({ cell, borderWidth }: { cell: ComputedCell<any>; borderWidth: number }) => {
+    if (cell.value === null) return null
+
+    return (
+        <g transform={`translate(${cell.x}, ${cell.y})`}>
+            <path
+                transform={`rotate(${cell.value < 50 ? 180 : 0})`}
+                fill={cell.color}
+                fillOpacity={cell.opacity}
+                strokeWidth={borderWidth}
+                stroke={cell.borderColor}
+                d={`
+                M0 -${Math.round(cell.height / 2)}
+                L${Math.round(cell.width / 2)} ${Math.round(cell.height / 2)}
+                L-${Math.round(cell.width / 2)} ${Math.round(cell.height / 2)}
+                L0 -${Math.round(cell.height / 2)}
+            `}
+            />
+            <text
+                dominantBaseline="central"
+                textAnchor="middle"
+                style={{ fill: cell.labelTextColor }}
+                dy={cell.value < 50 ? -6 : 6}
+            >
+                {cell.formattedValue}
+            </text>
+        </g>
+    )
+}
+
+stories.add('Custom Cell Component', () => (
+    <HeatMap<any, Record<string, unknown>>
+        {...commonProperties}
+        enableGridY
+        cellComponent={CustomCell}
+        labelTextColor="inherit:darker(1.6)"
+    />
+))
+
+stories.add('Custom Tooltip', () => (
+    <HeatMap<any, Record<string, unknown>>
+        {...commonProperties}
+        colors={{
+            type: 'quantize',
+            scheme: 'cividis',
+            steps: 7,
+        }}
+        tooltip={CustomTooltip}
+        labelTextColor={{
+            from: 'color',
+            modifiers: [['brighter', 2.6]],
+        }}
+    />
+))
diff --git a/packages/heatmap/stories/heatmapCanvas.stories.js b/packages/heatmap/stories/heatmapCanvas.stories.js
deleted file mode 100644
index 0529a1847c..0000000000
--- a/packages/heatmap/stories/heatmapCanvas.stories.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { storiesOf } from '@storybook/react'
-import { generateCountriesData } from '@nivo/generators'
-import { HeatMapCanvas } from '../src'
-
-const keys = [
-    'hot dogs',
-    'burgers',
-    'sandwich',
-    'kebab',
-    'fries',
-    'donut',
-    'junk',
-    'sushi',
-    'ramen',
-    'curry',
-    'udon',
-    'bagel',
-]
-const commonProperties = {
-    width: 900,
-    height: 500,
-    margin: { top: 60, right: 80, bottom: 60, left: 80 },
-    data: generateCountriesData(keys, { size: 9, min: 0, max: 100 }),
-    indexBy: 'country',
-    keys,
-}
-
-const stories = storiesOf('HeatMapCanvas', module)
-
-stories.add('default', () => <HeatMapCanvas {...commonProperties} />)
-
-stories.add('square cells', () => (
-    <HeatMapCanvas
-        {...commonProperties}
-        forceSquare={true}
-        axisTop={{
-            orient: 'top',
-            tickSize: 5,
-            tickPadding: 5,
-            tickRotation: -55,
-            legend: '',
-            legendOffset: 36,
-        }}
-    />
-))
-
-stories.add('circle cells', () => (
-    <HeatMapCanvas {...commonProperties} cellShape="circle" padding={2} enableGridY={true} />
-))
-
-stories.add('alternative colors', () => <HeatMapCanvas {...commonProperties} colors="BrBG" />)
-
-stories.add('variable cell size', () => (
-    <HeatMapCanvas
-        {...commonProperties}
-        colors="BuPu"
-        cellShape="circle"
-        padding={2}
-        sizeVariation={0.6}
-        enableGridX={true}
-        enableGridY={true}
-    />
-))
-
-stories.add('with formatted values', () => (
-    <HeatMapCanvas
-        {...commonProperties}
-        tooltipFormat={value =>
-            `${Number(value).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
-
-stories.add('with formatted labels', () => (
-    <HeatMapCanvas
-        {...commonProperties}
-        label={(datum, key) =>
-            `${Number(datum[key]).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
-
-stories.add('custom tooltip', () => (
-    <HeatMapCanvas
-        {...commonProperties}
-        tooltip={({ xKey, yKey, value, color }) => (
-            <strong style={{ color }}>
-                {xKey} / {yKey}: {value}
-            </strong>
-        )}
-        theme={{
-            tooltip: {
-                container: {
-                    background: 'gray',
-                },
-            },
-        }}
-    />
-))
diff --git a/packages/heatmap/stories/heatmapCanvas.stories.tsx b/packages/heatmap/stories/heatmapCanvas.stories.tsx
new file mode 100644
index 0000000000..c36633debe
--- /dev/null
+++ b/packages/heatmap/stories/heatmapCanvas.stories.tsx
@@ -0,0 +1,57 @@
+import { storiesOf } from '@storybook/react'
+import { generateXYSeries } from '@nivo/generators'
+// @ts-ignore
+import { HeatMapCanvas } from '../src'
+// @ts-ignore
+import { CustomTooltip } from './CustomTooltip'
+
+const sampleData = generateXYSeries({
+    serieIds: ['Japan', 'France', 'US', 'Germany', 'Norway', 'Iceland', 'UK', 'Vietnam'],
+    x: {
+        values: ['Train', 'Subway', 'Bus', 'Car', 'Boat', 'Moto', 'Moped', 'Bicycle', 'Others'],
+    },
+    y: {
+        length: NaN,
+        min: -100_000,
+        max: 100_000,
+        round: true,
+    },
+})
+
+const commonProperties = {
+    width: 900,
+    height: 500,
+    margin: { top: 60, right: 80, bottom: 60, left: 80 },
+    data: sampleData,
+}
+
+const stories = storiesOf('HeatMapCanvas', module)
+
+stories.add('default', () => <HeatMapCanvas<any, Record<string, unknown>> {...commonProperties} />)
+
+stories.add('Variable Cell Size', () => (
+    <HeatMapCanvas<any, Record<string, unknown>>
+        {...commonProperties}
+        valueFormat=">-.2s"
+        renderCell="circle"
+        sizeVariation={{
+            sizes: [0.6, 1],
+        }}
+        forceSquare
+        enableGridX={true}
+        enableGridY={true}
+    />
+))
+
+stories.add('Custom Tooltip', () => (
+    <HeatMapCanvas<any, Record<string, unknown>>
+        {...commonProperties}
+        valueFormat=">-.2s"
+        colors={{
+            type: 'quantize',
+            scheme: 'red_yellow_blue',
+            steps: 7,
+        }}
+        tooltip={CustomTooltip}
+    />
+))
diff --git a/website/src/data/components/heatmap/meta.yml b/website/src/data/components/heatmap/meta.yml
index bd5eb3e8a4..06100b0f77 100644
--- a/website/src/data/components/heatmap/meta.yml
+++ b/website/src/data/components/heatmap/meta.yml
@@ -10,10 +10,12 @@ HeatMap:
   package: '@nivo/heatmap'
   tags: []
   stories:
-    - label: Custom cell component
+    - label: Variable Cell Size
+      link: heatmap--variable-cell-size
+    - label: Custom Cell Component
       link: heatmap--custom-cell-component
-    - label: Custom tooltip
-      link: heatmap-custom-tooltip
+    - label: Custom Tooltip
+      link: heatmap--custom-tooltip
   description: |
     An heat map matrix, you can chose between various colors scales,
     you also have the ability to change the cell shape
@@ -31,7 +33,11 @@ HeatMapCanvas:
   package: '@nivo/heatmap'
   tags:
     - canvas
-  stories: []
+  stories:
+    - label: Variable Cell Size
+      link: heatmapcanvas--variable-cell-size
+    - label: Custom Tooltip
+      link: heatmapcanvas--custom-tooltip
   description: |
     A variation around the [HeatMap](self:/heatmap/) component.
     Well suited for large data sets as it does not impact DOM tree depth,