Skip to content

Commit 37136c9

Browse files
ploucplouc
committedJan 12, 2022
feat(website): improve typings of ComponentTemplate and use it at its full potential for the heatmap
·
v0.88.0v0.79.0
1 parent bda98c8 commit 37136c9

File tree

16 files changed

+214
-238
lines changed

16 files changed

+214
-238
lines changed
 

‎packages/heatmap/src/types.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,10 @@ export type HeatMapCommonProps<Datum extends HeatMapDatum> = {
145145
>
146146
labelTextColor: InheritedColorConfig<Omit<ComputedCell<Datum>, 'labelTextColor'>>
147147

148-
legends: Omit<AnchoredContinuousColorsLegendProps, 'containerWidth' | 'containerHeight'>[]
148+
legends: Omit<
149+
AnchoredContinuousColorsLegendProps,
150+
'scale' | 'containerWidth' | 'containerHeight'
151+
>[]
149152

150153
annotations: AnnotationMatcher<ComputedCell<Datum>>[]
151154

‎website/src/components/components/ActionsLogger.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React, { useState, useCallback } from 'react'
22
import styled from 'styled-components'
33
import { FaRegHandPointer } from 'react-icons/fa'
4-
import { ActionsLoggerLog } from './ActionsLoggerLog'
4+
import { ActionsLoggerLog, ActionsLoggerLogData } from './ActionsLoggerLog'
55
import media from '../../theming/mediaQueries'
66

7-
export const useActionsLogger = (): [any[], (action: any) => void] => {
8-
const [actions, setActions] = useState<any[]>([])
7+
export type ActionLoggerLogFn = (action: ActionsLoggerLogData) => void
8+
9+
export const useActionsLogger = (): [ActionsLoggerLogData[], ActionLoggerLogFn] => {
10+
const [actions, setActions] = useState<ActionsLoggerLogData[]>([])
911
const logAction = useCallback(
10-
action => {
12+
(action: ActionsLoggerLogData) => {
1113
setActions(actions => [action, ...actions])
1214
},
1315
[setActions]
@@ -17,7 +19,7 @@ export const useActionsLogger = (): [any[], (action: any) => void] => {
1719
}
1820

1921
interface ActionsLoggerProps {
20-
actions: any[]
22+
actions: ActionsLoggerLogData[]
2123
isFullWidth?: boolean
2224
}
2325

@@ -31,11 +33,9 @@ export const ActionsLogger = ({ actions, isFullWidth = false }: ActionsLoggerPro
3133
<EmptyMessage>Start interacting with the chart to log actions</EmptyMessage>
3234
</EmptyContainer>
3335
)}
34-
{actions.map((action, i) => {
35-
return (
36-
<ActionsLoggerLog key={`${i}.${action.type}.${action.label}`} action={action} />
37-
)
38-
})}
36+
{actions.map((action, i) => (
37+
<ActionsLoggerLog key={`${i}.${action.type}.${action.label}`} action={action} />
38+
))}
3939
</Wrapper>
4040
)
4141
}

‎website/src/components/components/ActionsLoggerLog.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import React, { useState, useCallback } from 'react'
22
import styled from 'styled-components'
33

4-
export const ActionsLoggerLog = ({ action }: { action: any }) => {
4+
export interface ActionsLoggerLogData {
5+
type: string
6+
label: string
7+
color?: string
8+
data?: object
9+
}
10+
11+
export const ActionsLoggerLog = ({ action }: { action: ActionsLoggerLogData }) => {
512
const [isOpen, setIsOpen] = useState(false)
613
const toggle = useCallback(() => setIsOpen(flag => !flag), [setIsOpen])
714

‎website/src/components/components/ComponentTemplate.tsx

+36-25
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,17 @@ import { ComponentHeader } from './ComponentHeader'
1111
import { ComponentFlavorSelector } from './ComponentFlavorSelector'
1212
import { ComponentDescription } from './ComponentDescription'
1313
import { ComponentTabs } from './ComponentTabs'
14-
import { ActionsLogger, useActionsLogger } from './ActionsLogger'
14+
import { ActionsLogger, useActionsLogger, ActionLoggerLogFn } from './ActionsLogger'
1515
import { ComponentSettings } from './ComponentSettings'
1616
import { Stories } from './Stories'
1717
import { ChartMeta, ChartProperty, Flavor } from '../../types'
1818

19-
interface ComponentTemplateProps<UnmappedProps extends object, Props extends object, Data> {
19+
interface ComponentTemplateProps<
20+
UnmappedProps extends object,
21+
MappedProps extends object,
22+
Data,
23+
ComponentProps extends object
24+
> {
2025
name: string
2126
meta: ChartMeta
2227
icon: string
@@ -32,22 +37,27 @@ interface ComponentTemplateProps<UnmappedProps extends object, Props extends obj
3237
// initial props of the demo, unmapped
3338
initialProperties: UnmappedProps
3439
// default props as defined in the package component
35-
defaultProperties?: Partial<Props>
36-
propertiesMapper?: (unmappedProps: UnmappedProps) => Props
37-
codePropertiesMapper?: Function
38-
hasData?: boolean
39-
generateData?: (previousData?: Data | null) => Data | undefined
40+
defaultProperties?: Partial<ComponentProps>
41+
propertiesMapper?: (props: UnmappedProps, data: Data) => MappedProps
42+
codePropertiesMapper?: (props: MappedProps, data: Data) => MappedProps
43+
generateData: (previousData?: Data | null) => Data
4044
dataKey?: string
4145
getDataSize?: (data: Data) => number
4246
getTabData?: (data: Data) => Data
43-
children: (properties: Props, data: Data, theme: NivoTheme, logAction: any) => JSX.Element
47+
children: (
48+
properties: MappedProps,
49+
data: Data,
50+
theme: NivoTheme,
51+
logAction: ActionLoggerLogFn
52+
) => JSX.Element
4453
image?: IGatsbyImageData
4554
}
4655

4756
export const ComponentTemplate = <
4857
UnmappedProps extends object = any,
49-
Props extends object = any,
50-
Data = any
58+
MappedProps extends object = any,
59+
Data = any,
60+
ComponentProps extends object = any
5161
>({
5262
name,
5363
meta,
@@ -59,29 +69,30 @@ export const ComponentTemplate = <
5969
defaultProperties = {},
6070
propertiesMapper,
6171
codePropertiesMapper,
62-
hasData = true,
63-
generateData = () => undefined,
64-
dataKey,
72+
generateData,
73+
dataKey = 'data',
6574
getDataSize,
6675
getTabData = data => data,
6776
image,
6877
children,
69-
}: ComponentTemplateProps<UnmappedProps, Props, Data>) => {
78+
}: ComponentTemplateProps<UnmappedProps, MappedProps, Data, ComponentProps>) => {
7079
const theme = useTheme()
7180

72-
const [settings, setSettings] = useState(initialProperties)
81+
const [settings, setSettings] = useState<UnmappedProps>(initialProperties)
82+
83+
const [data, setData] = useState<Data>(() => generateData())
7384

74-
const initialData = useMemo(() => (hasData ? generateData() : null), [])
75-
const [data, setData] = useState(initialData)
7685
const diceRoll = useCallback(() => {
7786
setData(currentData => generateData(currentData))
78-
}, [setData])
87+
}, [setData, generateData])
7988

8089
const [actions, logAction] = useActionsLogger()
8190

82-
let mappedProperties = settings as unknown as Props
91+
let mappedProperties: MappedProps
8392
if (propertiesMapper !== undefined) {
8493
mappedProperties = propertiesMapper(settings, data)
94+
} else {
95+
mappedProperties = settings as unknown as MappedProps
8596
}
8697

8798
let codeProperties = mappedProperties
@@ -92,7 +103,7 @@ export const ComponentTemplate = <
92103
const code = generateChartCode(`Responsive${name}`, codeProperties, {
93104
pkg: meta.package,
94105
defaults: defaultProperties,
95-
dataKey: hasData ? dataKey : undefined,
106+
dataKey: data !== undefined ? dataKey : undefined,
96107
})
97108

98109
const hasStories = meta.stories !== undefined && meta.stories.length > 0
@@ -103,6 +114,8 @@ export const ComponentTemplate = <
103114

104115
const flavorKeys = useMemo(() => flavors.map(flavor => flavor.flavor), [flavors])
105116

117+
const tabData = useMemo(() => getTabData(data), [data])
118+
106119
return (
107120
<Layout>
108121
<ComponentPage>
@@ -113,12 +126,10 @@ export const ComponentTemplate = <
113126
<ComponentTabs<Data>
114127
chartClass={icon}
115128
code={code}
116-
data={hasData ? getTabData(data!) : undefined}
129+
data={tabData}
117130
dataKey={dataKey}
118-
nodeCount={
119-
hasData && getDataSize !== undefined ? getDataSize(data!) : undefined
120-
}
121-
diceRoll={hasData ? diceRoll : undefined}
131+
nodeCount={getDataSize !== undefined ? getDataSize(data) : undefined}
132+
diceRoll={data !== undefined ? diceRoll : undefined}
122133
>
123134
{children(mappedProperties, data, theme.nivo, logAction)}
124135
</ComponentTabs>

‎website/src/data/components/heatmap/generator.ts

+28-68
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,30 @@
1-
import { generateCountriesData } from '@nivo/generators'
1+
import { generateXYSeries, sets } from '@nivo/generators'
2+
import { Data } from './types'
23

3-
const dishes = [
4-
'hot dog',
5-
'burger',
6-
'sandwich',
7-
'kebab',
8-
'fries',
9-
'donut',
10-
'junk',
11-
'sushi',
12-
'ramen',
13-
'curry',
14-
'udon',
15-
'bagel',
16-
'yakitori',
17-
'takoyaki',
18-
'tacos',
19-
'miso soup',
20-
'tortilla',
21-
'tapas',
22-
'chipirones',
23-
'gazpacho',
24-
'soba',
25-
'bavette',
26-
'steak',
27-
'pizza',
28-
'spaghetti',
29-
'ravioli',
30-
'salad',
31-
'pad thai',
32-
'bun',
33-
'waffle',
34-
'crepe',
35-
'churros',
36-
'paella',
37-
'empanadas',
38-
'bruschetta',
39-
'onion soup',
40-
'cassoulet',
41-
'bouillabaisse',
42-
'unagi',
43-
'tempura',
44-
'tonkatsu',
45-
'shabu-shabu',
46-
'twinkies',
47-
'jerky',
48-
'fajitas',
49-
'jambalaya',
50-
'meatloaf',
51-
`mac n' cheese`,
52-
'baked beans',
53-
'popcorn',
54-
'buffalo wings',
55-
'BBQ ribs',
56-
'apple pie',
57-
'nachos',
58-
'risotto',
59-
'tiramisu',
60-
]
4+
export const getLightData = () =>
5+
generateXYSeries({
6+
serieIds: ['Japan', 'France', 'US', 'Germany', 'Norway', 'Iceland', 'UK', 'Vietnam'],
7+
x: {
8+
values: ['Train', 'Subway', 'Bus', 'Car', 'Boat', 'Moto', 'Moped', 'Bicycle', 'Others'],
9+
},
10+
y: {
11+
length: NaN,
12+
min: -100_000,
13+
max: 100_000,
14+
round: true,
15+
},
16+
}) as Data
6117

62-
export const generateLightDataSet = () => ({
63-
data: generateCountriesData(dishes.slice(0, 11), { size: 9, min: 0, max: 100 }),
64-
keys: dishes.slice(0, 11),
65-
})
66-
67-
export const generateHeavyDataSet = () => ({
68-
data: generateCountriesData(dishes, { size: 22, min: 0, max: 100 }),
69-
keys: dishes,
70-
})
18+
export const getHeavyData = () =>
19+
generateXYSeries({
20+
serieIds: sets.countryCodes.slice(0, 26),
21+
x: {
22+
values: sets.names,
23+
},
24+
y: {
25+
length: NaN,
26+
min: -100_000,
27+
max: 100_000,
28+
round: true,
29+
},
30+
}) as Data

‎website/src/data/components/heatmap/mapper.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { settingsMapper, mapAxis, mapFormat } from '../../../lib/settings'
2+
import { SvgUnmappedProps, SvgMappedProps } from './types'
3+
4+
export default settingsMapper(
5+
{
6+
valueFormat: mapFormat,
7+
axisTop: mapAxis('top'),
8+
axisRight: mapAxis('right'),
9+
axisBottom: mapAxis('bottom'),
10+
axisLeft: mapAxis('left'),
11+
legends: (legends: SvgUnmappedProps['legends'][number][]): SvgMappedProps['legends'] => {
12+
return legends.map(legend => ({
13+
...legend,
14+
tickFormat: mapFormat(legend.tickFormat),
15+
}))
16+
},
17+
},
18+
{
19+
exclude: ['enable axisTop', 'enable axisRight', 'enable axisBottom', 'enable axisLeft'],
20+
}
21+
)

‎website/src/data/components/heatmap/mapper.tsx

-62
This file was deleted.

‎website/src/data/components/heatmap/props.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -426,7 +426,7 @@ const props: ChartProperty[] = [
426426
defaultValue: 'rect',
427427
control: {
428428
type: 'choices',
429-
choices: ['rect', 'circle', 'CustomCell'].map(key => ({
429+
choices: ['rect', 'circle'].map(key => ({
430430
label: key,
431431
value: key,
432432
})),

‎website/src/data/components/heatmap/types.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { HeatMapDataProps, HeatMapSvgProps, HeatMapCanvasProps } from '@nivo/heatmap'
2+
3+
export type Datum = {
4+
x: string
5+
y: number
6+
}
7+
8+
export type ExtraProps = Record<string, never>
9+
10+
export type Data = HeatMapDataProps<Datum, ExtraProps>['data']
11+
12+
export type SvgMappedProps = Omit<HeatMapSvgProps<Datum, ExtraProps>, 'data' | 'width' | 'height'>
13+
14+
type LegendProps = NonNullable<SvgMappedProps['legends']>[number]
15+
16+
export type SvgUnmappedProps = Omit<
17+
SvgMappedProps,
18+
'valueFormat' | 'axisTop' | 'axisRight' | 'axisBottom' | 'axisLeft' | 'legends'
19+
> & {
20+
valueFormat: {
21+
format: string
22+
enabled: boolean
23+
}
24+
axisTop: SvgMappedProps['axisTop'] & { enable: boolean }
25+
axisRight: SvgMappedProps['axisRight'] & { enable: boolean }
26+
axisBottom: SvgMappedProps['axisBottom'] & { enable: boolean }
27+
axisLeft: SvgMappedProps['axisLeft'] & { enable: boolean }
28+
legends: (Omit<LegendProps, 'tickFormat'> & {
29+
tickFormat: {
30+
format: string
31+
enabled: boolean
32+
}
33+
})[]
34+
}
35+
36+
export type SvgComponentProps = Omit<
37+
HeatMapSvgProps<Datum, ExtraProps>,
38+
'data' | 'width' | 'height'
39+
>
40+
41+
export type CanvasMappedProps = Omit<
42+
HeatMapCanvasProps<Datum, ExtraProps>,
43+
'data' | 'width' | 'height'
44+
>
45+
46+
export type CanvasUnmappedProps = Omit<
47+
CanvasMappedProps,
48+
'valueFormat' | 'axisTop' | 'axisRight' | 'axisBottom' | 'axisLeft' | 'legends'
49+
> & {
50+
valueFormat: {
51+
format: string
52+
enabled: boolean
53+
}
54+
axisTop: SvgMappedProps['axisTop'] & { enable: boolean }
55+
axisRight: SvgMappedProps['axisRight'] & { enable: boolean }
56+
axisBottom: SvgMappedProps['axisBottom'] & { enable: boolean }
57+
axisLeft: SvgMappedProps['axisLeft'] & { enable: boolean }
58+
legends: (Omit<LegendProps, 'tickFormat'> & {
59+
tickFormat: {
60+
format: string
61+
enabled: boolean
62+
}
63+
})[]
64+
}
65+
66+
export type CanvasComponentProps = Omit<
67+
HeatMapCanvasProps<Datum, ExtraProps>,
68+
'data' | 'width' | 'height'
69+
>

‎website/src/lib/generateChartCode.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const generateChartCode = (
3434
name: string,
3535
props: any,
3636
{
37-
dataKey = 'data',
37+
dataKey,
3838
children = [],
3939
defaults = {},
4040
pkg = 'nivo',
@@ -48,7 +48,7 @@ export const generateChartCode = (
4848
const properties = []
4949
let args = ''
5050

51-
if (dataKey !== null) {
51+
if (dataKey !== undefined) {
5252
properties.push(`${dataKey}={${dataKey}}`)
5353
args = `{ ${dataKey} /* see ${dataKey} tab */ }`
5454
}

‎website/src/lib/settings.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,5 @@ export const settingsMapper =
2121
export const mapAxis = (type: string) => (value: any, settings: any) =>
2222
settings[`axis${upperFirst(type)}`].enable ? omit(value, ['enable']) : null
2323

24-
export const mapFormat = ({ format, enabled }: { format: any; enabled: boolean }) =>
24+
export const mapFormat = ({ format, enabled }: { format: string; enabled: boolean }) =>
2525
enabled ? format : undefined

‎website/src/pages/geomap/canvas.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const GeoMapCanvas = () => {
6565
features: '/* please have a look at the description for usage */',
6666
...properties,
6767
})}
68-
hasData={false}
68+
generateData={() => undefined}
6969
image={image}
7070
>
7171
{(properties, data, theme, logAction) => {

‎website/src/pages/geomap/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const GeoMap = () => {
6262
features: '/* please have a look at the description for usage */',
6363
...properties,
6464
})}
65-
hasData={false}
65+
generateData={() => undefined}
6666
image={image}
6767
>
6868
{(properties, data, theme, logAction) => {

‎website/src/pages/heatmap/api.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { Seo } from '../../components/Seo'
33
import { ApiClient } from '../../components/components/api-client/ApiClient'
44
import { groups } from '../../data/components/heatmap/props'
55
import mapper from '../../data/components/heatmap/mapper'
6-
import { generateLightDataSet } from '../../data/components/heatmap/generator'
6+
import { getLightData } from '../../data/components/heatmap/generator'
77
import meta from '../../data/components/heatmap/meta.yml'
88
import { graphql, useStaticQuery } from 'gatsby'
99

10-
const data = generateLightDataSet()
10+
const data = getLightData()
1111

1212
const HeatMapApi = () => {
1313
const {

‎website/src/pages/heatmap/canvas.tsx

+15-31
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,21 @@
11
import React from 'react'
22
import { graphql, useStaticQuery } from 'gatsby'
3-
import isFunction from 'lodash/isFunction'
43
import { ResponsiveHeatMapCanvas, canvasDefaultProps as defaults } from '@nivo/heatmap'
5-
import { generateXYSeries, sets } from '@nivo/generators'
64
import { ComponentTemplate } from '../../components/components/ComponentTemplate'
75
import meta from '../../data/components/heatmap/meta.yml'
86
import mapper from '../../data/components/heatmap/mapper'
97
import { groups } from '../../data/components/heatmap/props'
8+
import { getHeavyData } from '../../data/components/heatmap/generator'
9+
import {
10+
Datum,
11+
ExtraProps,
12+
Data,
13+
CanvasUnmappedProps,
14+
CanvasMappedProps,
15+
CanvasComponentProps,
16+
} from '../../data/components/heatmap/types'
1017

11-
const getData = () =>
12-
generateXYSeries({
13-
serieIds: sets.countryCodes.slice(0, 26),
14-
x: {
15-
values: sets.names,
16-
},
17-
y: {
18-
length: NaN,
19-
min: -100_000,
20-
max: 100_000,
21-
round: true,
22-
},
23-
})
24-
25-
const initialProperties = {
18+
const initialProperties: CanvasUnmappedProps = {
2619
margin: {
2720
top: 70,
2821
right: 90,
@@ -48,7 +41,6 @@ const initialProperties = {
4841
enableGridY: false,
4942
axisTop: {
5043
enable: true,
51-
orient: 'top',
5244
tickSize: 5,
5345
tickPadding: 5,
5446
tickRotation: -90,
@@ -57,7 +49,6 @@ const initialProperties = {
5749
},
5850
axisRight: {
5951
enable: true,
60-
orient: 'right',
6152
tickSize: 5,
6253
tickPadding: 5,
6354
tickRotation: 0,
@@ -67,7 +58,6 @@ const initialProperties = {
6758
},
6859
axisBottom: {
6960
enable: false,
70-
orient: 'bottom',
7161
tickSize: 5,
7262
tickPadding: 5,
7363
tickRotation: -90,
@@ -77,7 +67,6 @@ const initialProperties = {
7767
},
7868
axisLeft: {
7969
enable: true,
80-
orient: 'left',
8170
tickSize: 5,
8271
tickPadding: 5,
8372
tickRotation: 0,
@@ -106,6 +95,7 @@ const initialProperties = {
10695

10796
legends: [
10897
{
98+
id: 'default',
10999
anchor: 'bottom',
110100
translateX: 0,
111101
translateY: 30,
@@ -148,29 +138,23 @@ const HeatMapCanvas = () => {
148138
`)
149139

150140
return (
151-
<ComponentTemplate
141+
<ComponentTemplate<CanvasUnmappedProps, CanvasMappedProps, Data, CanvasComponentProps>
152142
name="HeatMapCanvas"
153143
meta={meta.HeatMapCanvas}
154144
icon="heatmap"
155145
flavors={meta.flavors}
156146
currentFlavor="canvas"
157147
properties={groups}
158148
initialProperties={initialProperties}
149+
defaultProperties={defaults as CanvasComponentProps}
159150
propertiesMapper={mapper}
160-
codePropertiesMapper={(properties, data) => ({
161-
keys: data.keys,
162-
...properties,
163-
cellShape: isFunction(properties.cellShape)
164-
? 'Custom(props) => (…)'
165-
: properties.cellShape,
166-
})}
167-
generateData={getData}
151+
generateData={getHeavyData}
168152
getDataSize={data => data.length * data[0].data.length}
169153
image={image}
170154
>
171155
{(properties, data, theme, logAction) => {
172156
return (
173-
<ResponsiveHeatMapCanvas
157+
<ResponsiveHeatMapCanvas<Datum, ExtraProps>
174158
data={data}
175159
{...properties}
176160
theme={theme}

‎website/src/pages/heatmap/index.tsx

+15-32
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,21 @@
11
import React from 'react'
22
import { graphql, useStaticQuery } from 'gatsby'
3-
import isFunction from 'lodash/isFunction'
43
import { ResponsiveHeatMap, svgDefaultProps as defaults } from '@nivo/heatmap'
5-
import { generateXYSeries } from '@nivo/generators'
64
import { ComponentTemplate } from '../../components/components/ComponentTemplate'
75
import meta from '../../data/components/heatmap/meta.yml'
86
import mapper from '../../data/components/heatmap/mapper'
7+
import { getLightData } from '../../data/components/heatmap/generator'
98
import { groups } from '../../data/components/heatmap/props'
9+
import {
10+
Datum,
11+
ExtraProps,
12+
Data,
13+
SvgUnmappedProps,
14+
SvgMappedProps,
15+
SvgComponentProps,
16+
} from '../../data/components/heatmap/types'
1017

11-
const getData = () =>
12-
generateXYSeries({
13-
serieIds: ['Japan', 'France', 'US', 'Germany', 'Norway', 'Iceland', 'UK', 'Vietnam'],
14-
x: {
15-
values: ['Train', 'Subway', 'Bus', 'Car', 'Boat', 'Moto', 'Moped', 'Bicycle', 'Others'],
16-
},
17-
y: {
18-
length: NaN,
19-
min: -100_000,
20-
max: 100_000,
21-
round: true,
22-
},
23-
})
24-
25-
const initialProperties = {
18+
const initialProperties: SvgUnmappedProps = {
2619
margin: {
2720
top: 60,
2821
right: 90,
@@ -45,7 +38,6 @@ const initialProperties = {
4538
enableGridY: defaults.enableGridY,
4639
axisTop: {
4740
enable: true,
48-
orient: 'top',
4941
tickSize: 5,
5042
tickPadding: 5,
5143
tickRotation: -90,
@@ -54,7 +46,6 @@ const initialProperties = {
5446
},
5547
axisRight: {
5648
enable: true,
57-
orient: 'right',
5849
tickSize: 5,
5950
tickPadding: 5,
6051
tickRotation: 0,
@@ -64,7 +55,6 @@ const initialProperties = {
6455
},
6556
axisBottom: {
6657
enable: false,
67-
orient: 'bottom',
6858
tickSize: 5,
6959
tickPadding: 5,
7060
tickRotation: -90,
@@ -74,7 +64,6 @@ const initialProperties = {
7464
},
7565
axisLeft: {
7666
enable: true,
77-
orient: 'left',
7867
tickSize: 5,
7968
tickPadding: 5,
8069
tickRotation: 0,
@@ -104,6 +93,7 @@ const initialProperties = {
10493

10594
legends: [
10695
{
96+
id: 'default',
10797
anchor: 'bottom',
10898
translateX: 0,
10999
translateY: 30,
@@ -146,29 +136,22 @@ const HeatMap = () => {
146136
`)
147137

148138
return (
149-
<ComponentTemplate
139+
<ComponentTemplate<SvgUnmappedProps, SvgMappedProps, Data, SvgComponentProps>
150140
name="HeatMap"
151141
meta={meta.HeatMap}
152142
icon="heatmap"
153143
flavors={meta.flavors}
154144
currentFlavor="svg"
155145
properties={groups}
156146
initialProperties={initialProperties}
157-
defaultProperties={defaults}
147+
defaultProperties={defaults as SvgComponentProps}
158148
propertiesMapper={mapper}
159-
codePropertiesMapper={properties => ({
160-
...properties,
161-
cellShape: isFunction(properties.cellShape)
162-
? 'Custom(props) => (…)'
163-
: properties.cellShape,
164-
})}
165-
generateData={getData}
166-
// getTabData={data => data.data}
149+
generateData={getLightData}
167150
image={image}
168151
>
169152
{(properties, data, theme, logAction) => {
170153
return (
171-
<ResponsiveHeatMap
154+
<ResponsiveHeatMap<Datum, ExtraProps>
172155
data={data}
173156
{...properties}
174157
theme={theme}

0 commit comments

Comments
 (0)
Please sign in to comment.