From 8946b02fe312ef7007c4679179dde994670eda60 Mon Sep 17 00:00:00 2001 From: plouc Date: Mon, 3 Jan 2022 00:30:03 +0900 Subject: [PATCH] feat(treemap): adjust website according to new typings --- examples/codesandbox/src/charts/TreeMap.tsx | 8 +++++--- packages/generators/src/index.ts | 15 +++++++++++++-- packages/treemap/tests/TreeMap.test.tsx | 2 ++ website/src/@types/file_types.d.ts | 6 ++++++ website/src/components/icons/ChordIcon.tsx | 3 ++- website/src/components/icons/Icons.js | 2 +- website/src/components/icons/NetworkIcon.tsx | 2 +- .../icons/{TreeMapIcon.js => TreeMapIcon.tsx} | 7 +++---- website/src/data/components/treemap/generator.ts | 2 +- website/src/pages/treemap/api.tsx | 7 +++---- website/src/pages/treemap/canvas.tsx | 11 ++++------- website/src/pages/treemap/html.tsx | 9 ++------- website/src/pages/treemap/index.tsx | 11 ++--------- 13 files changed, 45 insertions(+), 40 deletions(-) rename website/src/components/icons/{TreeMapIcon.js => TreeMapIcon.tsx} (95%) diff --git a/examples/codesandbox/src/charts/TreeMap.tsx b/examples/codesandbox/src/charts/TreeMap.tsx index f748f59469..31c1af8f5d 100644 --- a/examples/codesandbox/src/charts/TreeMap.tsx +++ b/examples/codesandbox/src/charts/TreeMap.tsx @@ -13,15 +13,17 @@ const props = { valueFormat: '.02s', } +type Datum = ReturnType + export function TreeMap() { const [data, flavor] = useChart(generateLibTree) switch (flavor) { case 'canvas': - return + return data={data} {...props} /> case 'html': - return + return data={data} {...props} /> case 'svg': - return + return data={data} {...props} /> } } diff --git a/packages/generators/src/index.ts b/packages/generators/src/index.ts index 1662ec1faf..436dc7c50c 100644 --- a/packages/generators/src/index.ts +++ b/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 = { + const tree: LibTreeDatum = { name, color: randColor(), } diff --git a/packages/treemap/tests/TreeMap.test.tsx b/packages/treemap/tests/TreeMap.test.tsx index 43e29f103d..04623da2e5 100644 --- a/packages/treemap/tests/TreeMap.test.tsx +++ b/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() diff --git a/website/src/@types/file_types.d.ts b/website/src/@types/file_types.d.ts index 5f0b97123e..96576d8f19 100644 --- a/website/src/@types/file_types.d.ts +++ b/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 +} diff --git a/website/src/components/icons/ChordIcon.tsx b/website/src/components/icons/ChordIcon.tsx index e3fa3124d2..f7f1c83016 100644 --- a/website/src/components/icons/ChordIcon.tsx +++ b/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 }) => ( diff --git a/website/src/components/icons/Icons.js b/website/src/components/icons/Icons.js index a90bdb9752..d5e20c4b75 100644 --- a/website/src/components/icons/Icons.js +++ b/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' diff --git a/website/src/components/icons/NetworkIcon.tsx b/website/src/components/icons/NetworkIcon.tsx index c5a6b536ed..2f8475b763 100644 --- a/website/src/components/icons/NetworkIcon.tsx +++ b/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, diff --git a/website/src/components/icons/TreeMapIcon.js b/website/src/components/icons/TreeMapIcon.tsx similarity index 95% rename from website/src/components/icons/TreeMapIcon.js rename to website/src/components/icons/TreeMapIcon.tsx index 058a8f9c89..cac25c6916 100644 --- a/website/src/components/icons/TreeMapIcon.js +++ b/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 }) => ( @@ -67,7 +68,7 @@ const TreeMapIconItem = ({ type }) => ( ) -const TreeMapIcon = () => ( +export const TreeMapIcon = () => ( <> @@ -79,5 +80,3 @@ const TreeMapIcon = () => ( ) - -export default TreeMapIcon diff --git a/website/src/data/components/treemap/generator.ts b/website/src/data/components/treemap/generator.ts index 66f552ce80..cc861fdbe0 100644 --- a/website/src/data/components/treemap/generator.ts +++ b/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 diff --git a/website/src/pages/treemap/api.tsx b/website/src/pages/treemap/api.tsx index cf93da5404..c1dfe749f2 100644 --- a/website/src/pages/treemap/api.tsx +++ b/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 ( <> ['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) => { diff --git a/website/src/pages/treemap/html.tsx b/website/src/pages/treemap/html.tsx index 22619b9d5c..f04c20d83c 100644 --- a/website/src/pages/treemap/html.tsx +++ b/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 const initialProperties = { identity: 'name', @@ -95,7 +90,7 @@ const TreeMapHtml = () => { {(properties, data, theme, logAction) => { return ( - data={data.root} + data={data} {...properties} theme={theme} onClick={node => { diff --git a/website/src/pages/treemap/index.tsx b/website/src/pages/treemap/index.tsx index 6e9b69450e..29a4fb82af 100644 --- a/website/src/pages/treemap/index.tsx +++ b/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 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) => {