feat(treemap): adjust website according to new typings

examples/codesandbox/src/charts/TreeMap.tsx

@@ -13,15 +13,17 @@ const props = {
   valueFormat: '.02s',
 }
 
+type Datum = ReturnType<typeof generateLibTree>
+
 export function TreeMap() {
   const [data, flavor] = useChart(generateLibTree)
 
   switch (flavor) {
     case 'canvas':
-      return <ResponsiveTreeMapCanvas data={data} {...props} />
+      return <ResponsiveTreeMapCanvas<Datum> data={data} {...props} />
     case 'html':
-      return <ResponsiveTreeMapHtml data={data} {...props} />
+      return <ResponsiveTreeMapHtml<Datum> data={data} {...props} />
     case 'svg':
-      return <ResponsiveTreeMap data={data} {...props} />
+      return <ResponsiveTreeMap<Datum> data={data} {...props} />
   }
 }

packages/generators/src/index.ts

@@ -226,13 +226,24 @@ const libTreeItems = [
     ],
 ]
 
-export const generateLibTree = (name = 'nivo', limit?: number | null, children = libTreeItems) => {
+interface LibTreeDatum {
+    name: string
+    loc?: number
+    color: string
+    children?: LibTreeDatum[]
+}
+
+export const generateLibTree = (
+    name = 'nivo',
+    limit?: number | null,
+    children = libTreeItems
+): LibTreeDatum => {
     limit = limit || children.length
     if (limit > children.length) {
         limit = children.length
     }
 
-    const tree: Record<string, unknown> = {
+    const tree: LibTreeDatum = {
         name,
         color: randColor(),
     }

packages/treemap/tests/TreeMap.test.tsx

@@ -45,6 +45,8 @@ afterAll(() => {
     Globals.assign({ skipAnimation: false })
 })
 
+it('should render a basic treemap chart', () => {})
+
 /*
 it('should render a basic network chart', () => {
     const wrapper = mount(<Network {...baseProps} />)

website/src/@types/file_types.d.ts

@@ -265,3 +265,9 @@ declare module '*waffle/meta.yml' {
 
     export default meta
 }
+
+declare module '*.png' {
+    const file: string
+
+    export default file
+}

website/src/components/icons/ChordIcon.tsx

@@ -6,6 +6,7 @@ import chordLightColoredImg from '../../assets/icons/chord-light-colored.png'
 import chordDarkNeutralImg from '../../assets/icons/chord-dark-neutral.png'
 import chordDarkColoredImg from '../../assets/icons/chord-dark-colored.png'
 import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
 
 const Wrapper = styled.div<{
     ribbonColor: string
@@ -48,7 +49,7 @@ const chartProps = {
     animate: false,
 }
 
-const ChordIconItem = ({ type }) => (
+const ChordIconItem = ({ type }: { type: IconType }) => (
     <Icon id={`chord-${type}`} type={type}>
         <Wrapper ribbonColor={colors[type].colors[1]}>
             <Chord {...chartProps} colors={[colors[type].colors[4]]} />

website/src/components/icons/Icons.js

@@ -25,7 +25,7 @@ import StreamIcon from './StreamIcon'
 import SunburstIcon from './SunburstIcon'
 import SwarmPlotIcon from './SwarmPlotIcon'
 import TimeRangeIcon from './TimeRangeIcon'
-import TreeMapIcon from './TreeMapIcon'
+import { TreeMapIcon } from './TreeMapIcon'
 import WaffleIcon from './WaffleIcon'
 import ParallelCoordinatesIcon from './ParallelCoordinatesIcon'
 import VoronoiIcon from './VoronoiIcon'

website/src/components/icons/NetworkIcon.tsx

@@ -27,7 +27,7 @@ const getData = (currentColors: any) => {
 
     const leaves: Node[] = []
     nodes.forEach(node => {
-        Array.from({ length: 7 }, (v, k) => {
+        Array.from({ length: 7 }, (_v, k) => {
             leaves.push({
                 id: `${node.id}.${k}`,
                 size: 6,

website/src/components/icons/TreeMapIcon.js → website/src/components/icons/TreeMapIcon.tsx

@@ -4,12 +4,13 @@ import treemapLightColoredImg from '../../assets/icons/treemap-light-colored.png
 import treemapDarkNeutralImg from '../../assets/icons/treemap-dark-neutral.png'
 import treemapDarkColoredImg from '../../assets/icons/treemap-dark-colored.png'
 import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
 
 const width = ICON_SIZE
 const height = ICON_SIZE * 0.7
 const spacing = 2
 
-const TreeMapIconItem = ({ type }) => (
+const TreeMapIconItem = ({ type }: { type: IconType }) => (
     <Icon id={`treemap-${type}`} type={type}>
         <svg width={ICON_SIZE} height={ICON_SIZE}>
             <g transform={`translate(${(ICON_SIZE - width) / 2},${(ICON_SIZE - height) / 2})`}>
@@ -67,7 +68,7 @@ const TreeMapIconItem = ({ type }) => (
     </Icon>
 )
 
-const TreeMapIcon = () => (
+export const TreeMapIcon = () => (
     <>
         <TreeMapIconItem type="lightNeutral" />
         <IconImg url={treemapLightNeutralImg} />
@@ -79,5 +80,3 @@ const TreeMapIcon = () => (
         <IconImg url={treemapDarkColoredImg} />
     </>
 )
-
-export default TreeMapIcon

website/src/data/components/treemap/generator.ts

@@ -2,7 +2,7 @@ import { generateLibTree } from '@nivo/generators'
 import range from 'lodash/range'
 import random from 'lodash/random'
 
-export const generateLightDataSet = () => ({ root: generateLibTree() })
+export const generateLightDataSet = () => generateLibTree()
 
 const HEAVY_NODE_COUNT = 600
 

website/src/pages/treemap/api.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-// @ts-ignore
+import React, { useMemo } from 'react'
 import { svgDefaultProps as defaults } from '@nivo/treemap'
 import { Seo } from '../../components/Seo'
 import { ApiClient } from '../../components/components/api-client/ApiClient'
@@ -9,8 +8,6 @@ import { generateLightDataSet } from '../../data/components/treemap/generator'
 import meta from '../../data/components/treemap/meta.yml'
 import { graphql, useStaticQuery } from 'gatsby'
 
-const data = generateLightDataSet().root
-
 const TreeMapApi = () => {
     const {
         image: {
@@ -26,6 +23,8 @@ const TreeMapApi = () => {
         }
     `)
 
+    const data = useMemo(() => generateLightDataSet(), [])
+
     return (
         <>
             <Seo

website/src/pages/treemap/canvas.tsx

@@ -1,18 +1,13 @@
 import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import { ResponsiveTreeMapCanvas, canvasDefaultProps as defaults } from '@nivo/treemap'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/treemap/meta.yml'
 import mapper from '../../data/components/treemap/mapper'
 import { groups } from '../../data/components/treemap/props'
 import { generateHeavyDataSet } from '../../data/components/treemap/generator'
-import { graphql, useStaticQuery } from 'gatsby'
 
-interface Datum {
-    name: string
-    loc?: number
-    color: string
-    children?: Datum[]
-}
+type Datum = ReturnType<typeof generateHeavyDataSet>['root']
 
 const initialProperties = {
     identity: defaults.identity,
@@ -84,6 +79,8 @@ const TreeMapCanvas = () => {
             defaultProperties={defaults}
             propertiesMapper={mapper}
             generateData={generateHeavyDataSet}
+            getTabData={data => data.root}
+            getDataSize={data => data.nodeCount}
             image={image}
         >
             {(properties, data, theme, logAction) => {

website/src/pages/treemap/html.tsx

@@ -7,12 +7,7 @@ import mapper from '../../data/components/treemap/mapper'
 import { groups } from '../../data/components/treemap/props'
 import { generateLightDataSet } from '../../data/components/treemap/generator'
 
-interface Datum {
-    name: string
-    loc?: number
-    color: string
-    children?: Datum[]
-}
+type Datum = ReturnType<typeof generateLightDataSet>
 
 const initialProperties = {
     identity: 'name',
@@ -95,7 +90,7 @@ const TreeMapHtml = () => {
             {(properties, data, theme, logAction) => {
                 return (
                     <ResponsiveTreeMapHtml<Datum>
-                        data={data.root}
+                        data={data}
                         {...properties}
                         theme={theme}
                         onClick={node => {

website/src/pages/treemap/index.tsx

@@ -7,14 +7,7 @@ import mapper from '../../data/components/treemap/mapper'
 import { groups } from '../../data/components/treemap/props'
 import { generateLightDataSet } from '../../data/components/treemap/generator'
 
-const generateData = () => generateLightDataSet().root
-
-interface Datum {
-    name: string
-    loc?: number
-    color: string
-    children?: Datum[]
-}
+type Datum = ReturnType<typeof generateLightDataSet>
 
 const initialProperties = {
     identity: 'name',
@@ -91,7 +84,7 @@ const TreeMap = () => {
             initialProperties={initialProperties}
             defaultProperties={defaults}
             propertiesMapper={mapper}
-            generateData={generateData}
+            generateData={generateLightDataSet}
             image={image}
         >
             {(properties, data, theme, logAction) => {