diff --git a/packages/static/src/mappings/treemap.ts b/packages/static/src/mappings/treemap.ts index cfb664ba24..f62d851759 100644 --- a/packages/static/src/mappings/treemap.ts +++ b/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 = OmitStrict< + TreeMapSvgProps & 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), diff --git a/packages/static/src/samples/index.ts b/packages/static/src/samples/index.ts index 89287c98ec..510dfb92a5 100644 --- a/packages/static/src/samples/index.ts +++ b/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'>, }, } diff --git a/packages/treemap/src/index.ts b/packages/treemap/src/index.ts index 40f8261073..832538de2f 100644 --- a/packages/treemap/src/index.ts +++ b/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' diff --git a/packages/treemap/src/props.js b/packages/treemap/src/props.js deleted file mode 100644 index 6a1879b0c8..0000000000 --- a/packages/treemap/src/props.js +++ /dev/null @@ -1,118 +0,0 @@ -import PropTypes from 'prop-types' -import { treeMapTilePropType, defsPropTypes } from '@nivo/core' -import { - ordinalColorsPropType, - colorPropertyAccessorPropType, - inheritedColorPropType, -} from '@nivo/colors' -import { TreeMapNode } from './TreeMapNode' -import { TreeMapHtmlNode } from './TreeMapHtmlNode' - -const commonPropTypes = { - identity: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - value: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - valueFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - - colors: ordinalColorsPropType.isRequired, - colorBy: colorPropertyAccessorPropType.isRequired, - nodeOpacity: PropTypes.number.isRequired, - - leavesOnly: PropTypes.bool.isRequired, - tile: treeMapTilePropType.isRequired, - innerPadding: PropTypes.number.isRequired, - outerPadding: PropTypes.number.isRequired, - - enableLabel: PropTypes.bool.isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - labelFormat: PropTypes.string, - labelSkipSize: PropTypes.number.isRequired, - labelTextColor: inheritedColorPropType.isRequired, - orientLabel: PropTypes.bool.isRequired, - - enableParentLabel: PropTypes.bool.isRequired, - parentLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - parentLabelSize: PropTypes.number.isRequired, - parentLabelPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired, - parentLabelPadding: PropTypes.number.isRequired, - parentLabelTextColor: inheritedColorPropType.isRequired, - - borderWidth: PropTypes.number.isRequired, - borderColor: inheritedColorPropType.isRequired, - - isInteractive: PropTypes.bool.isRequired, - onMouseEnter: PropTypes.func, - onMouseMove: PropTypes.func, - onMouseLeave: PropTypes.func, - onClick: PropTypes.func, - tooltip: PropTypes.func, -} - -export const TreeMapPropTypes = { - ...commonPropTypes, - nodeComponent: PropTypes.elementType.isRequired, - role: PropTypes.string.isRequired, - ...defsPropTypes, -} - -export const TreeMapHtmlPropTypes = { - ...commonPropTypes, - nodeComponent: PropTypes.elementType.isRequired, -} - -export const TreeMapCanvasPropTypes = { - ...commonPropTypes, - pixelRatio: PropTypes.number.isRequired, -} - -const commonDefaultProps = { - identity: 'id', - value: 'value', - - tile: 'squarify', - leavesOnly: false, - innerPadding: 0, - outerPadding: 0, - - colors: { scheme: 'nivo' }, - colorBy: 'pathComponents.1', - nodeOpacity: 0.33, - - enableLabel: true, - label: 'formattedValue', - labelSkipSize: 0, - labelTextColor: { from: 'color', modifiers: [['darker', 1]] }, - orientLabel: true, - - enableParentLabel: true, - parentLabel: 'id', - parentLabelSize: 20, - parentLabelPosition: 'top', - parentLabelPadding: 6, - parentLabelTextColor: { from: 'color', modifiers: [['darker', 1]] }, - - borderWidth: 1, - borderColor: { from: 'color', modifiers: [['darker', 1]] }, - - isInteractive: true, - - animate: true, - motionConfig: 'gentle', -} - -export const TreeMapDefaultProps = { - ...commonDefaultProps, - nodeComponent: TreeMapNode, - role: 'img', - defs: [], - fill: [], -} - -export const TreeMapHtmlDefaultProps = { - ...commonDefaultProps, - nodeComponent: TreeMapHtmlNode, -} - -export const TreeMapCanvasDefaultProps = { - ...commonDefaultProps, - pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1, -} diff --git a/website/src/data/components/treemap/props.ts b/website/src/data/components/treemap/props.ts index f2527fc805..931e30036d 100644 --- a/website/src/data/components/treemap/props.ts +++ b/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', diff --git a/website/src/pages/treemap/api.tsx b/website/src/pages/treemap/api.tsx index ab757ecf31..cf93da5404 100644 --- a/website/src/pages/treemap/api.tsx +++ b/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]], diff --git a/website/src/pages/treemap/canvas.tsx b/website/src/pages/treemap/canvas.tsx index 56cfdc1eac..d67dc83d40 100644 --- a/website/src/pages/treemap/canvas.tsx +++ b/website/src/pages/treemap/canvas.tsx @@ -1,9 +1,5 @@ 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' @@ -11,11 +7,18 @@ 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 ( - data={data.root} {...properties} theme={theme} diff --git a/website/src/pages/treemap/html.tsx b/website/src/pages/treemap/html.tsx index 18a8ac3321..532a8f93ab 100644 --- a/website/src/pages/treemap/html.tsx +++ b/website/src/pages/treemap/html.tsx @@ -1,20 +1,27 @@ import React from 'react' -import { ResponsiveTreeMapHtml, TreeMapDefaultProps } from '@nivo/treemap' +import { graphql, useStaticQuery } from 'gatsby' +import { ResponsiveTreeMapHtml, htmlDefaultProps 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 { generateLightDataSet } from '../../data/components/treemap/generator' -import { graphql, useStaticQuery } from 'gatsby' + +interface Datum { + name: string + loc: number + color: string + children: Datum[] +} const initialProperties = { 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, margin: { top: 10, @@ -24,36 +31,36 @@ const initialProperties = { }, enableLabel: true, - label: TreeMapDefaultProps.label, + label: defaults.label, labelSkipSize: 12, labelTextColor: { from: 'color', modifiers: [['darker', 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', 3]], }, colors: { scheme: 'yellow_orange_red' }, - colorBy: TreeMapDefaultProps.colorBy, - nodeOpacity: TreeMapDefaultProps.nodeOpacity, - borderWidth: TreeMapDefaultProps.borderWidth, + colorBy: defaults.colorBy, + nodeOpacity: defaults.nodeOpacity, + borderWidth: defaults.borderWidth, borderColor: { from: 'color', modifiers: [['darker', 0.1]], }, - animate: TreeMapDefaultProps.animate, - motionConfig: TreeMapDefaultProps.motionConfig, + animate: defaults.animate, + motionConfig: defaults.motionConfig, - isInteractive: TreeMapDefaultProps.isInteractive, + isInteractive: defaults.isInteractive, } const TreeMapHtml = () => { @@ -80,14 +87,14 @@ const TreeMapHtml = () => { currentFlavor="html" properties={groups} initialProperties={initialProperties} - defaultProperties={TreeMapDefaultProps} + defaultProperties={defaults} propertiesMapper={mapper} generateData={generateLightDataSet} image={image} > {(properties, data, theme, logAction) => { return ( - data={data.root} {...properties} theme={theme} diff --git a/website/src/pages/treemap/index.tsx b/website/src/pages/treemap/index.tsx index 89f1464b36..05bd231871 100644 --- a/website/src/pages/treemap/index.tsx +++ b/website/src/pages/treemap/index.tsx @@ -1,22 +1,29 @@ import React from 'react' -import { ResponsiveTreeMap, TreeMapDefaultProps } from '@nivo/treemap' +import { graphql, useStaticQuery } from 'gatsby' +import { ResponsiveTreeMap, svgDefaultProps 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 { generateLightDataSet } from '../../data/components/treemap/generator' -import { graphql, useStaticQuery } from 'gatsby' const generateData = () => generateLightDataSet().root +interface Datum { + name: string + loc: number + color: string + children: Datum[] +} + const initialProperties = { 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, margin: { top: 10, @@ -26,36 +33,36 @@ const initialProperties = { }, enableLabel: true, - label: TreeMapDefaultProps.label, + label: defaults.label, labelSkipSize: 12, labelTextColor: { from: 'color', modifiers: [['darker', 1.2]], }, - orientLabel: TreeMapDefaultProps.orientLabel, - enableParentLabel: TreeMapDefaultProps.enableParentLabel, - parentLabel: TreeMapDefaultProps.parentLabel, - parentLabelSize: TreeMapDefaultProps.parentLabelSize, + orientLabel: defaults.orientLabel, + enableParentLabel: defaults.enableParentLabel, + parentLabel: defaults.parentLabel, + parentLabelSize: defaults.parentLabelSize, parentLabelPosition: 'left', - parentLabelPadding: TreeMapDefaultProps.parentLabelPadding, + 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]], }, - animate: TreeMapDefaultProps.animate, - motionConfig: TreeMapDefaultProps.motionConfig, + animate: defaults.animate, + motionConfig: defaults.motionConfig, - isInteractive: TreeMapDefaultProps.isInteractive, + isInteractive: defaults.isInteractive, } const TreeMap = () => { @@ -82,14 +89,14 @@ const TreeMap = () => { currentFlavor="svg" properties={groups} initialProperties={initialProperties} - defaultProperties={TreeMapDefaultProps} + defaultProperties={defaults} propertiesMapper={mapper} generateData={generateData} image={image} > {(properties, data, theme, logAction) => { return ( - data={data} {...properties} theme={theme}