feat(website): improve typings of ComponentTemplate and use it at its…

… full potential for the heatmap

packages/heatmap/src/types.ts

@@ -145,7 +145,10 @@ export type HeatMapCommonProps<Datum extends HeatMapDatum> = {
     >
     labelTextColor: InheritedColorConfig<Omit<ComputedCell<Datum>, 'labelTextColor'>>
 
-    legends: Omit<AnchoredContinuousColorsLegendProps, 'containerWidth' | 'containerHeight'>[]
+    legends: Omit<
+        AnchoredContinuousColorsLegendProps,
+        'scale' | 'containerWidth' | 'containerHeight'
+    >[]
 
     annotations: AnnotationMatcher<ComputedCell<Datum>>[]
 

website/src/components/components/ActionsLogger.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useCallback } from 'react'
 import styled from 'styled-components'
 import { FaRegHandPointer } from 'react-icons/fa'
-import { ActionsLoggerLog } from './ActionsLoggerLog'
+import { ActionsLoggerLog, ActionsLoggerLogData } from './ActionsLoggerLog'
 import media from '../../theming/mediaQueries'
 
-export const useActionsLogger = (): [any[], (action: any) => void] => {
-    const [actions, setActions] = useState<any[]>([])
+export type ActionLoggerLogFn = (action: ActionsLoggerLogData) => void
+
+export const useActionsLogger = (): [ActionsLoggerLogData[], ActionLoggerLogFn] => {
+    const [actions, setActions] = useState<ActionsLoggerLogData[]>([])
     const logAction = useCallback(
-        action => {
+        (action: ActionsLoggerLogData) => {
             setActions(actions => [action, ...actions])
         },
         [setActions]
@@ -17,7 +19,7 @@ export const useActionsLogger = (): [any[], (action: any) => void] => {
 }
 
 interface ActionsLoggerProps {
-    actions: any[]
+    actions: ActionsLoggerLogData[]
     isFullWidth?: boolean
 }
 
@@ -31,11 +33,9 @@ export const ActionsLogger = ({ actions, isFullWidth = false }: ActionsLoggerPro
                     <EmptyMessage>Start interacting with the chart to log actions</EmptyMessage>
                 </EmptyContainer>
             )}
-            {actions.map((action, i) => {
-                return (
-                    <ActionsLoggerLog key={`${i}.${action.type}.${action.label}`} action={action} />
-                )
-            })}
+            {actions.map((action, i) => (
+                <ActionsLoggerLog key={`${i}.${action.type}.${action.label}`} action={action} />
+            ))}
         </Wrapper>
     )
 }

website/src/components/components/ActionsLoggerLog.tsx

@@ -1,7 +1,14 @@
 import React, { useState, useCallback } from 'react'
 import styled from 'styled-components'
 
-export const ActionsLoggerLog = ({ action }: { action: any }) => {
+export interface ActionsLoggerLogData {
+    type: string
+    label: string
+    color?: string
+    data?: object
+}
+
+export const ActionsLoggerLog = ({ action }: { action: ActionsLoggerLogData }) => {
     const [isOpen, setIsOpen] = useState(false)
     const toggle = useCallback(() => setIsOpen(flag => !flag), [setIsOpen])
 

website/src/components/components/ComponentTemplate.tsx

@@ -11,12 +11,17 @@ import { ComponentHeader } from './ComponentHeader'
 import { ComponentFlavorSelector } from './ComponentFlavorSelector'
 import { ComponentDescription } from './ComponentDescription'
 import { ComponentTabs } from './ComponentTabs'
-import { ActionsLogger, useActionsLogger } from './ActionsLogger'
+import { ActionsLogger, useActionsLogger, ActionLoggerLogFn } from './ActionsLogger'
 import { ComponentSettings } from './ComponentSettings'
 import { Stories } from './Stories'
 import { ChartMeta, ChartProperty, Flavor } from '../../types'
 
-interface ComponentTemplateProps<UnmappedProps extends object, Props extends object, Data> {
+interface ComponentTemplateProps<
+    UnmappedProps extends object,
+    MappedProps extends object,
+    Data,
+    ComponentProps extends object
+> {
     name: string
     meta: ChartMeta
     icon: string
@@ -32,22 +37,27 @@ interface ComponentTemplateProps<UnmappedProps extends object, Props extends obj
     // initial props of the demo, unmapped
     initialProperties: UnmappedProps
     // default props as defined in the package component
-    defaultProperties?: Partial<Props>
-    propertiesMapper?: (unmappedProps: UnmappedProps) => Props
-    codePropertiesMapper?: Function
-    hasData?: boolean
-    generateData?: (previousData?: Data | null) => Data | undefined
+    defaultProperties?: Partial<ComponentProps>
+    propertiesMapper?: (props: UnmappedProps, data: Data) => MappedProps
+    codePropertiesMapper?: (props: MappedProps, data: Data) => MappedProps
+    generateData: (previousData?: Data | null) => Data
     dataKey?: string
     getDataSize?: (data: Data) => number
     getTabData?: (data: Data) => Data
-    children: (properties: Props, data: Data, theme: NivoTheme, logAction: any) => JSX.Element
+    children: (
+        properties: MappedProps,
+        data: Data,
+        theme: NivoTheme,
+        logAction: ActionLoggerLogFn
+    ) => JSX.Element
     image?: IGatsbyImageData
 }
 
 export const ComponentTemplate = <
     UnmappedProps extends object = any,
-    Props extends object = any,
-    Data = any
+    MappedProps extends object = any,
+    Data = any,
+    ComponentProps extends object = any
 >({
     name,
     meta,
@@ -59,29 +69,30 @@ export const ComponentTemplate = <
     defaultProperties = {},
     propertiesMapper,
     codePropertiesMapper,
-    hasData = true,
-    generateData = () => undefined,
-    dataKey,
+    generateData,
+    dataKey = 'data',
     getDataSize,
     getTabData = data => data,
     image,
     children,
-}: ComponentTemplateProps<UnmappedProps, Props, Data>) => {
+}: ComponentTemplateProps<UnmappedProps, MappedProps, Data, ComponentProps>) => {
     const theme = useTheme()
 
-    const [settings, setSettings] = useState(initialProperties)
+    const [settings, setSettings] = useState<UnmappedProps>(initialProperties)
+
+    const [data, setData] = useState<Data>(() => generateData())
 
-    const initialData = useMemo(() => (hasData ? generateData() : null), [])
-    const [data, setData] = useState(initialData)
     const diceRoll = useCallback(() => {
         setData(currentData => generateData(currentData))
-    }, [setData])
+    }, [setData, generateData])
 
     const [actions, logAction] = useActionsLogger()
 
-    let mappedProperties = settings as unknown as Props
+    let mappedProperties: MappedProps
     if (propertiesMapper !== undefined) {
         mappedProperties = propertiesMapper(settings, data)
+    } else {
+        mappedProperties = settings as unknown as MappedProps
     }
 
     let codeProperties = mappedProperties
@@ -92,7 +103,7 @@ export const ComponentTemplate = <
     const code = generateChartCode(`Responsive${name}`, codeProperties, {
         pkg: meta.package,
         defaults: defaultProperties,
-        dataKey: hasData ? dataKey : undefined,
+        dataKey: data !== undefined ? dataKey : undefined,
     })
 
     const hasStories = meta.stories !== undefined && meta.stories.length > 0
@@ -103,6 +114,8 @@ export const ComponentTemplate = <
 
     const flavorKeys = useMemo(() => flavors.map(flavor => flavor.flavor), [flavors])
 
+    const tabData = useMemo(() => getTabData(data), [data])
+
     return (
         <Layout>
             <ComponentPage>
@@ -113,12 +126,10 @@ export const ComponentTemplate = <
                 <ComponentTabs<Data>
                     chartClass={icon}
                     code={code}
-                    data={hasData ? getTabData(data!) : undefined}
+                    data={tabData}
                     dataKey={dataKey}
-                    nodeCount={
-                        hasData && getDataSize !== undefined ? getDataSize(data!) : undefined
-                    }
-                    diceRoll={hasData ? diceRoll : undefined}
+                    nodeCount={getDataSize !== undefined ? getDataSize(data) : undefined}
+                    diceRoll={data !== undefined ? diceRoll : undefined}
                 >
                     {children(mappedProperties, data, theme.nivo, logAction)}
                 </ComponentTabs>

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

@@ -1,70 +1,30 @@
-import { generateCountriesData } from '@nivo/generators'
+import { generateXYSeries, sets } from '@nivo/generators'
+import { Data } from './types'
 
-const dishes = [
-    'hot dog',
-    'burger',
-    'sandwich',
-    'kebab',
-    'fries',
-    'donut',
-    'junk',
-    'sushi',
-    'ramen',
-    'curry',
-    'udon',
-    'bagel',
-    'yakitori',
-    'takoyaki',
-    'tacos',
-    'miso soup',
-    'tortilla',
-    'tapas',
-    'chipirones',
-    'gazpacho',
-    'soba',
-    'bavette',
-    'steak',
-    'pizza',
-    'spaghetti',
-    'ravioli',
-    'salad',
-    'pad thai',
-    'bun',
-    'waffle',
-    'crepe',
-    'churros',
-    'paella',
-    'empanadas',
-    'bruschetta',
-    'onion soup',
-    'cassoulet',
-    'bouillabaisse',
-    'unagi',
-    'tempura',
-    'tonkatsu',
-    'shabu-shabu',
-    'twinkies',
-    'jerky',
-    'fajitas',
-    'jambalaya',
-    'meatloaf',
-    `mac n' cheese`,
-    'baked beans',
-    'popcorn',
-    'buffalo wings',
-    'BBQ ribs',
-    'apple pie',
-    'nachos',
-    'risotto',
-    'tiramisu',
-]
+export const getLightData = () =>
+    generateXYSeries({
+        serieIds: ['Japan', 'France', 'US', 'Germany', 'Norway', 'Iceland', 'UK', 'Vietnam'],
+        x: {
+            values: ['Train', 'Subway', 'Bus', 'Car', 'Boat', 'Moto', 'Moped', 'Bicycle', 'Others'],
+        },
+        y: {
+            length: NaN,
+            min: -100_000,
+            max: 100_000,
+            round: true,
+        },
+    }) as Data
 
-export const generateLightDataSet = () => ({
-    data: generateCountriesData(dishes.slice(0, 11), { size: 9, min: 0, max: 100 }),
-    keys: dishes.slice(0, 11),
-})
-
-export const generateHeavyDataSet = () => ({
-    data: generateCountriesData(dishes, { size: 22, min: 0, max: 100 }),
-    keys: dishes,
-})
+export const getHeavyData = () =>
+    generateXYSeries({
+        serieIds: sets.countryCodes.slice(0, 26),
+        x: {
+            values: sets.names,
+        },
+        y: {
+            length: NaN,
+            min: -100_000,
+            max: 100_000,
+            round: true,
+        },
+    }) as Data

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

@@ -0,0 +1,21 @@
+import { settingsMapper, mapAxis, mapFormat } from '../../../lib/settings'
+import { SvgUnmappedProps, SvgMappedProps } from './types'
+
+export default settingsMapper(
+    {
+        valueFormat: mapFormat,
+        axisTop: mapAxis('top'),
+        axisRight: mapAxis('right'),
+        axisBottom: mapAxis('bottom'),
+        axisLeft: mapAxis('left'),
+        legends: (legends: SvgUnmappedProps['legends'][number][]): SvgMappedProps['legends'] => {
+            return legends.map(legend => ({
+                ...legend,
+                tickFormat: mapFormat(legend.tickFormat),
+            }))
+        },
+    },
+    {
+        exclude: ['enable axisTop', 'enable axisRight', 'enable axisBottom', 'enable axisLeft'],
+    }
+)

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

@@ -426,7 +426,7 @@ const props: ChartProperty[] = [
         defaultValue: 'rect',
         control: {
             type: 'choices',
-            choices: ['rect', 'circle', 'CustomCell'].map(key => ({
+            choices: ['rect', 'circle'].map(key => ({
                 label: key,
                 value: key,
             })),