feat(treemap): fix static mapping and sample

packages/static/src/mappings/treemap.ts

@@ -1,15 +1,21 @@
 import { FunctionComponent } from 'react'
 import Joi from 'joi'
 import { Dimensions } from '@nivo/core'
-import { TreeMap, TreeMapSvgProps } from '@nivo/treemap'
+import { TreeMap, TreeMapSvgProps, DefaultTreeMapDatum, TreeMapDatum } from '@nivo/treemap'
 import { custom } from './common'
 import { ordinalColors, inheritedColor } from './commons/colors'
 import { dimensions } from './commons/dimensions'
 import { OmitStrict } from '../types'
 
-export type TreeMapApiProps = OmitStrict<
-    TreeMapSvgProps & Dimensions,
-    'isInteractive' | 'onMouseEnter' | 'onMouseMove' | 'onMouseLeave' | 'onClick' | 'animate'
+export type TreeMapApiProps<Datum extends TreeMapDatum = DefaultTreeMapDatum> = OmitStrict<
+    TreeMapSvgProps<Datum> & Dimensions,
+    | 'isInteractive'
+    | 'onMouseEnter'
+    | 'onMouseMove'
+    | 'onMouseLeave'
+    | 'onClick'
+    | 'animate'
+    | 'renderWrapper'
 >
 
 export const treemapMapping = {
@@ -38,6 +44,7 @@ export const treemapMapping = {
         labelSkipSize: Joi.number(),
         orientLabel: Joi.boolean(),
         labelTextColor: inheritedColor,
+
         enableParentLabel: Joi.boolean(),
         parentLabel: Joi.string(),
         parentLabelSize: Joi.number().min(0),

packages/static/src/samples/index.ts

@@ -39,7 +39,7 @@ export const samples: Record<
             value: 'loc',
             label: 'name',
             margin: { top: 0, right: 0, bottom: 0, left: 0 },
-        },
+        } as ChartProps<'circle_packing'>,
     },
     chord: {
         type: 'chord',
@@ -154,7 +154,7 @@ export const samples: Record<
             enableArcLabels: true,
             arcLabelsSkipAngle: 10,
             arcLabelsTextColor: { from: 'color', modifiers: [['darker', 1.4]] },
-        },
+        } as ChartProps<'sunburst'>,
     },
     treemap: {
         type: 'treemap',
@@ -168,6 +168,6 @@ export const samples: Record<
             leavesOnly: false,
             innerPadding: 3,
             outerPadding: 3,
-        },
+        } as unknown as ChartProps<'treemap'>,
     },
 }

packages/treemap/src/index.ts

@@ -4,7 +4,6 @@ export * from './TreeMapHtml'
 export * from './ResponsiveTreeMapHtml'
 export * from './TreeMapCanvas'
 export * from './ResponsiveTreeMapCanvas'
-export * from './props'
 export * from './types'
 export * from './defaults'
 export * from './transitions'

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

@@ -1,5 +1,4 @@
-// @ts-ignore
-import { TreeMapDefaultProps } from '@nivo/treemap'
+import { commonDefaultProps as defaults } from '@nivo/treemap'
 import {
     motionProperties,
     defsProperties,
@@ -11,8 +10,6 @@ import { ChartProperty, Flavor } from '../../../types'
 
 const allFlavors: Flavor[] = ['svg', 'html', 'canvas', 'api']
 
-const defaults = TreeMapDefaultProps
-
 const props: ChartProperty[] = [
     {
         key: 'data',

website/src/pages/treemap/api.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 // @ts-ignore
-import { TreeMapDefaultProps } from '@nivo/treemap'
+import { svgDefaultProps as defaults } from '@nivo/treemap'
 import { Seo } from '../../components/Seo'
 import { ApiClient } from '../../components/components/api-client/ApiClient'
 import { groups } from '../../data/components/treemap/props'
@@ -46,10 +46,10 @@ const TreeMapApi = () => {
                     identity: 'name',
                     value: 'loc',
                     valueFormat: { format: '.02s', enabled: true },
-                    tile: TreeMapDefaultProps.tile,
-                    leavesOnly: TreeMapDefaultProps.leavesOnly,
-                    innerPadding: TreeMapDefaultProps.innerPadding,
-                    outerPadding: TreeMapDefaultProps.outerPadding,
+                    tile: defaults.tile,
+                    leavesOnly: defaults.leavesOnly,
+                    innerPadding: defaults.innerPadding,
+                    outerPadding: defaults.outerPadding,
 
                     width: 800,
                     height: 560,
@@ -60,28 +60,28 @@ const TreeMapApi = () => {
                         left: 10,
                     },
 
-                    enableLabel: TreeMapDefaultProps.enableLabel,
-                    label: TreeMapDefaultProps.label,
+                    enableLabel: defaults.enableLabel,
+                    label: defaults.label,
                     labelSkipSize: 12,
                     labelTextColor: {
                         from: 'color',
                         modifiers: [['darker', 1.2]],
                     },
-                    orientLabel: TreeMapDefaultProps.orientLabel,
-                    enableParentLabel: TreeMapDefaultProps.enableParentLabel,
-                    parentLabel: TreeMapDefaultProps.parentLabel,
-                    parentLabelSize: TreeMapDefaultProps.parentLabelSize,
-                    parentLabelPosition: TreeMapDefaultProps.parentLabelPosition,
-                    parentLabelPadding: TreeMapDefaultProps.parentLabelPadding,
+                    orientLabel: defaults.orientLabel,
+                    enableParentLabel: defaults.enableParentLabel,
+                    parentLabel: defaults.parentLabel,
+                    parentLabelSize: defaults.parentLabelSize,
+                    parentLabelPosition: defaults.parentLabelPosition,
+                    parentLabelPadding: defaults.parentLabelPadding,
                     parentLabelTextColor: {
                         from: 'color',
                         modifiers: [['darker', 2]],
                     },
 
-                    colors: TreeMapDefaultProps.colors,
-                    colorBy: TreeMapDefaultProps.colorBy,
-                    nodeOpacity: TreeMapDefaultProps.nodeOpacity,
-                    borderWidth: TreeMapDefaultProps.borderWidth,
+                    colors: defaults.colors,
+                    colorBy: defaults.colorBy,
+                    nodeOpacity: defaults.nodeOpacity,
+                    borderWidth: defaults.borderWidth,
                     borderColor: {
                         from: 'color',
                         modifiers: [['darker', 0.1]],

website/src/pages/treemap/canvas.tsx

@@ -1,21 +1,24 @@
 import React from 'react'
-import {
-    ResponsiveTreeMapCanvas,
-    TreeMapCanvasDefaultProps,
-    TreeMapDefaultProps,
-} from '@nivo/treemap'
+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[]
+}
+
 const initialProperties = {
-    identity: TreeMapCanvasDefaultProps.identity,
-    value: TreeMapCanvasDefaultProps.value,
+    identity: defaults.identity,
+    value: defaults.value,
     valueFormat: { format: '.02s', enabled: true },
-    tile: TreeMapCanvasDefaultProps.tile,
+    tile: defaults.tile,
     leavesOnly: true,
     innerPadding: 0,
     outerPadding: 0,
@@ -31,27 +34,27 @@ const initialProperties = {
         typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1,
 
     enableLabel: true,
-    label: TreeMapDefaultProps.label,
+    label: defaults.label,
     labelSkipSize: 18,
     labelTextColor: {
         from: 'color',
         modifiers: [['darker', 3]],
     },
-    orientLabel: TreeMapCanvasDefaultProps.orientLabel,
+    orientLabel: defaults.orientLabel,
 
     colors: { scheme: 'spectral' },
     colorBy: 'id',
-    nodeOpacity: TreeMapCanvasDefaultProps.nodeOpacity,
-    borderWidth: TreeMapCanvasDefaultProps.borderWidth,
+    nodeOpacity: defaults.nodeOpacity,
+    borderWidth: defaults.borderWidth,
     borderColor: {
         from: 'color',
         modifiers: [['darker', 0.8]],
     },
 
-    animate: TreeMapDefaultProps.animate,
-    motionConfig: TreeMapDefaultProps.motionConfig,
+    animate: defaults.animate,
+    motionConfig: defaults.motionConfig,
 
-    isInteractive: TreeMapDefaultProps.isInteractive,
+    isInteractive: defaults.isInteractive,
 }
 
 const TreeMapCanvas = () => {
@@ -78,14 +81,14 @@ const TreeMapCanvas = () => {
             currentFlavor="canvas"
             properties={groups}
             initialProperties={initialProperties}
-            defaultProperties={TreeMapCanvasDefaultProps}
+            defaultProperties={defaults}
             propertiesMapper={mapper}
             generateData={generateHeavyDataSet}
             image={image}
         >
             {(properties, data, theme, logAction) => {
                 return (
-                    <ResponsiveTreeMapCanvas
+                    <ResponsiveTreeMapCanvas<Datum>
                         data={data.root}
                         {...properties}
                         theme={theme}