From da44298ef67480bbeff513ca0ed1f63e180613d5 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sat, 8 Jan 2022 05:23:38 +0900
Subject: [PATCH] feat(heatmap): update codesandbox example to reflect API
 changes

---
 examples/codesandbox/src/charts/HeatMap.tsx | 43 +++++++++------------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/examples/codesandbox/src/charts/HeatMap.tsx b/examples/codesandbox/src/charts/HeatMap.tsx
index 3102aa55fa..78f65e0cd3 100644
--- a/examples/codesandbox/src/charts/HeatMap.tsx
+++ b/examples/codesandbox/src/charts/HeatMap.tsx
@@ -1,26 +1,10 @@
 import {
-  HeatMapDatum,
   ResponsiveHeatMap,
   ResponsiveHeatMapCanvas,
 } from '@nivo/heatmap'
-import { generateCountriesData } from '@nivo/generators'
+import { generateXYSeries } from '@nivo/generators'
 import { useChart } from '../hooks'
 
-const keys = [
-  'hot dogs',
-  'burgers',
-  'sandwich',
-  'kebab',
-  'fries',
-  'donut',
-  'junk',
-  'sushi',
-  'ramen',
-  'curry',
-  'udon',
-  'bagel',
-]
-
 const props = {
   axisTop: {
     orient: 'top',
@@ -31,18 +15,29 @@ const props = {
     legendOffset: 36,
   },
   margin: { top: 60, right: 80, bottom: 60, left: 80 },
-  indexBy: 'country',
-  keys,
 }
 
 export function HeatMap() {
   const [data, flavor] = useChart(
     () =>
-      generateCountriesData(keys, {
-        size: 9,
-        min: 0,
-        max: 100,
-      }) as HeatMapDatum[]
+      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,
+        },
+      }) as {
+        id: string
+        data: {
+          x: string
+          y: number
+        }[]
+      }[]
   )
 
   if (flavor === 'canvas') {