Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(treemap): adjust website according to new typings
  • Loading branch information
plouc committed Jan 2, 2022
1 parent a7a4400 commit 8946b02
Show file tree
Hide file tree
Showing 13 changed files with 45 additions and 40 deletions.
8 changes: 5 additions & 3 deletions examples/codesandbox/src/charts/TreeMap.tsx
Expand Up @@ -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} />
}
}
15 changes: 13 additions & 2 deletions packages/generators/src/index.ts
Expand Up @@ -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(),
}
Expand Down
2 changes: 2 additions & 0 deletions packages/treemap/tests/TreeMap.test.tsx
Expand Up @@ -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} />)
Expand Down
6 changes: 6 additions & 0 deletions website/src/@types/file_types.d.ts
Expand Up @@ -265,3 +265,9 @@ declare module '*waffle/meta.yml' {

export default meta
}

declare module '*.png' {
const file: string

export default file
}
3 changes: 2 additions & 1 deletion website/src/components/icons/ChordIcon.tsx
Expand Up @@ -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
Expand Down Expand Up @@ -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]]} />
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/icons/Icons.js
Expand Up @@ -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'
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/icons/NetworkIcon.tsx
Expand Up @@ -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,
Expand Down
Expand Up @@ -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})`}>
Expand Down Expand Up @@ -67,7 +68,7 @@ const TreeMapIconItem = ({ type }) => (
</Icon>
)

const TreeMapIcon = () => (
export const TreeMapIcon = () => (
<>
<TreeMapIconItem type="lightNeutral" />
<IconImg url={treemapLightNeutralImg} />
Expand All @@ -79,5 +80,3 @@ const TreeMapIcon = () => (
<IconImg url={treemapDarkColoredImg} />
</>
)

export default TreeMapIcon
2 changes: 1 addition & 1 deletion website/src/data/components/treemap/generator.ts
Expand Up @@ -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

Expand Down
7 changes: 3 additions & 4 deletions 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'
Expand All @@ -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: {
Expand All @@ -26,6 +23,8 @@ const TreeMapApi = () => {
}
`)

const data = useMemo(() => generateLightDataSet(), [])

return (
<>
<Seo
Expand Down
11 changes: 4 additions & 7 deletions 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,
Expand Down Expand Up @@ -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) => {
Expand Down
9 changes: 2 additions & 7 deletions website/src/pages/treemap/html.tsx
Expand Up @@ -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',
Expand Down Expand Up @@ -95,7 +90,7 @@ const TreeMapHtml = () => {
{(properties, data, theme, logAction) => {
return (
<ResponsiveTreeMapHtml<Datum>
data={data.root}
data={data}
{...properties}
theme={theme}
onClick={node => {
Expand Down
11 changes: 2 additions & 9 deletions website/src/pages/treemap/index.tsx
Expand Up @@ -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',
Expand Down Expand Up @@ -91,7 +84,7 @@ const TreeMap = () => {
initialProperties={initialProperties}
defaultProperties={defaults}
propertiesMapper={mapper}
generateData={generateData}
generateData={generateLightDataSet}
image={image}
>
{(properties, data, theme, logAction) => {
Expand Down

0 comments on commit 8946b02

Please sign in to comment.