feat(heatmap): fix the http API documentation

packages/axes/src/canvas.ts

@@ -2,7 +2,7 @@ import { degreesToRadians, CompleteTheme } from '@nivo/core'
 import { ScaleValue, AnyScale, TicksSpec } from '@nivo/scales'
 import { computeCartesianTicks, getFormatter, computeGridLines } from './compute'
 import { positions } from './props'
-import { AxisLegendPosition, CanvasAxisProp, ValueFormatter } from './types'
+import { AxisLegendPosition, CanvasAxisProps, ValueFormatter } from './types'
 
 export const renderAxisToCanvas = <Value extends ScaleValue>(
     ctx: CanvasRenderingContext2D,
@@ -176,19 +176,19 @@ export const renderAxesToCanvas = <X extends ScaleValue, Y extends ScaleValue>(
         yScale: AnyScale
         width: number
         height: number
-        top?: CanvasAxisProp<X> | null
-        right?: CanvasAxisProp<Y> | null
-        bottom?: CanvasAxisProp<X> | null
-        left?: CanvasAxisProp<Y> | null
+        top?: CanvasAxisProps<X> | null
+        right?: CanvasAxisProps<Y> | null
+        bottom?: CanvasAxisProps<X> | null
+        left?: CanvasAxisProps<Y> | null
         theme: CompleteTheme
     }
 ) => {
     const axes = { top, right, bottom, left }
 
     positions.forEach(position => {
         const axis = axes[position] as typeof position extends 'bottom' | 'top'
-            ? CanvasAxisProp<X> | undefined
-            : CanvasAxisProp<Y> | undefined
+            ? CanvasAxisProps<X> | undefined
+            : CanvasAxisProps<Y> | undefined
 
         if (!axis) return null
 

packages/axes/src/types.ts

@@ -35,7 +35,8 @@ export interface AxisProps<Value extends ScaleValue = any> {
     ariaHidden?: boolean
 }
 
-export interface CanvasAxisProp<Value extends ScaleValue> extends Omit<AxisProps<Value>, 'legend'> {
+export interface CanvasAxisProps<Value extends ScaleValue = any>
+    extends Omit<AxisProps<Value>, 'legend'> {
     legend?: string
 }
 

packages/bar/src/types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { AnnotationMatcher } from '@nivo/annotations'
-import { AxisProps, CanvasAxisProp, GridValues } from '@nivo/axes'
+import { AxisProps, CanvasAxisProps, GridValues } from '@nivo/axes'
 import {
     Box,
     CartesianMarkerProps,
@@ -289,10 +289,10 @@ export type BarCanvasProps<RawDatum extends BarDatum> = Partial<BarCommonProps<R
     BarHandlers<RawDatum, HTMLCanvasElement> &
     Dimensions &
     Partial<{
-        axisBottom: CanvasAxisProp<any>
-        axisLeft: CanvasAxisProp<any>
-        axisRight: CanvasAxisProp<any>
-        axisTop: CanvasAxisProp<any>
+        axisBottom: CanvasAxisProps<any>
+        axisLeft: CanvasAxisProps<any>
+        axisRight: CanvasAxisProps<any>
+        axisTop: CanvasAxisProps<any>
 
         renderBar: (context: CanvasRenderingContext2D, props: RenderBarProps<RawDatum>) => void
 

packages/heatmap/src/defaults.ts

@@ -22,7 +22,7 @@ export const commonDefaultProps: Omit<
     xOuterPadding: 0,
     yInnerPadding: 0,
     yOuterPadding: 0,
-    sizeVariation: 0,
+    sizeVariation: false,
 
     opacity: 1,
     activeOpacity: 1,
@@ -61,7 +61,7 @@ export const svgDefaultProps = {
     axisBottom: null,
     axisLeft: {},
     borderRadius: 0,
-    cellComponent: 'rect',
+    cellComponent: 'rect' as const,
 }
 
 export const canvasDefaultProps = {
@@ -70,6 +70,6 @@ export const canvasDefaultProps = {
     axisRight: null,
     axisBottom: null,
     axisLeft: {},
-    renderCell: 'rect',
+    renderCell: 'rect' as const,
     pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
 }

packages/heatmap/src/types.ts

@@ -9,7 +9,7 @@ import {
     PropertyAccessor,
     ValueFormat,
 } from '@nivo/core'
-import { AxisProps, CanvasAxisProp } from '@nivo/axes'
+import { AxisProps, CanvasAxisProps } from '@nivo/axes'
 import { InheritedColorConfig, ContinuousColorScaleConfig } from '@nivo/colors'
 import { AnchoredContinuousColorsLegendProps } from '@nivo/legends'
 import { AnnotationMatcher } from '@nivo/annotations'
@@ -62,6 +62,11 @@ export interface HeatMapDataProps<Datum extends HeatMapDatum, ExtraProps extends
     data: HeatMapSerie<Datum, ExtraProps>[]
 }
 
+export interface SizeVariationConfig {
+    values: [min: number, max: number]
+    sizes: [min: number, max: number]
+}
+
 export type LayerId = 'grid' | 'axes' | 'cells' | 'legends' | 'annotations'
 export interface CustomLayerProps<Datum extends HeatMapDatum> {
     cells: ComputedCell<Datum>[]
@@ -111,7 +116,7 @@ export type HeatMapCommonProps<Datum extends HeatMapDatum> = {
     margin: Box
 
     forceSquare: boolean
-    sizeVariation: number
+    sizeVariation: false | SizeVariationConfig
     xInnerPadding: number
     xOuterPadding: number
     yInnerPadding: number
@@ -188,10 +193,10 @@ export type HeatMapCanvasProps<Datum extends HeatMapDatum, ExtraProps extends ob
     HeatMapDataProps<Datum, ExtraProps> &
     Dimensions &
     Partial<{
-        axisTop: CanvasAxisProp<Datum['x']> | null
-        axisRight: CanvasAxisProp<string> | null
-        axisBottom: CanvasAxisProp<Datum['x']> | null
-        axisLeft: CanvasAxisProp<string> | null
+        axisTop: CanvasAxisProps<Datum['x']> | null
+        axisRight: CanvasAxisProps<string> | null
+        axisBottom: CanvasAxisProps<Datum['x']> | null
+        axisLeft: CanvasAxisProps<string> | null
         layers: (LayerId | CustomCanvasLayer<Datum>)[]
         renderCell: CellShape | CellCanvasRenderer<Datum>
         pixelRatio: number

packages/scatterplot/src/ScatterPlotCanvas.tsx

@@ -1,7 +1,7 @@
 import { createElement, useRef, useState, useEffect, useCallback, useMemo } from 'react'
 import { Container, useDimensions, useTheme, getRelativeCursor, isCursorInRect } from '@nivo/core'
 import { renderAnnotationsToCanvas } from '@nivo/annotations'
-import { CanvasAxisProp, renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
+import { CanvasAxisProps, renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
 import { renderLegendToCanvas } from '@nivo/legends'
 import { useTooltip } from '@nivo/tooltip'
 import { useVoronoiMesh, renderVoronoiToCanvas, renderVoronoiCellToCanvas } from '@nivo/voronoi'
@@ -140,18 +140,18 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
                     yScale: yScale as any,
                     width: innerWidth,
                     height: innerHeight,
-                    top: axisTop as CanvasAxisProp<RawDatum['x']>,
-                    right: axisRight as CanvasAxisProp<RawDatum['y']>,
-                    bottom: axisBottom as CanvasAxisProp<RawDatum['x']>,
-                    left: axisLeft as CanvasAxisProp<RawDatum['y']>,
+                    top: axisTop as CanvasAxisProps<RawDatum['x']>,
+                    right: axisRight as CanvasAxisProps<RawDatum['y']>,
+                    bottom: axisBottom as CanvasAxisProps<RawDatum['x']>,
+                    left: axisLeft as CanvasAxisProps<RawDatum['y']>,
                     theme,
                 })
             } else if (layer === 'nodes') {
                 nodes.forEach(node => {
                     renderNode(ctx, node)
                 })
             } else if (layer === 'mesh') {
-                if (debugMesh === true) {
+                if (debugMesh) {
                     renderVoronoiToCanvas(ctx, voronoi!)
                     if (currentNode) {
                         renderVoronoiCellToCanvas(ctx, voronoi!, currentNode.index)

packages/swarmplot/src/types.ts

@@ -3,7 +3,7 @@ import { Interpolation, SpringValue } from '@react-spring/web'
 import { ForceX, ForceY, ForceCollide } from 'd3-force'
 import { PropertyAccessor, ValueFormat, Theme, ModernMotionProps, Box, Margin } from '@nivo/core'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
-import { AxisProps, CanvasAxisProp } from '@nivo/axes'
+import { AxisProps, CanvasAxisProps } from '@nivo/axes'
 import { ScaleLinear, ScaleLinearSpec, ScaleTime, ScaleTimeSpec, TicksSpec } from '@nivo/scales'
 import { AnnotationMatcher } from '@nivo/annotations'
 import { ScaleOrdinal } from 'd3-scale'
@@ -143,10 +143,10 @@ export type SwarmPlotSvgProps<RawDatum> = SwarmPlotCommonProps<RawDatum> &
 
 export type SwarmPlotCanvasProps<RawDatum> = SwarmPlotCommonProps<RawDatum> &
     Pick<MouseHandlers<RawDatum>, 'onMouseMove' | 'onClick'> & {
-        axisTop?: CanvasAxisProp<string> | null
-        axisRight?: CanvasAxisProp<string> | null
-        axisBottom?: CanvasAxisProp<string> | null
-        axisLeft?: CanvasAxisProp<string> | null
+        axisTop?: CanvasAxisProps<string> | null
+        axisRight?: CanvasAxisProps<string> | null
+        axisBottom?: CanvasAxisProps<string> | null
+        axisLeft?: CanvasAxisProps<string> | null
         pixelRatio: number
         renderCircle: (
             ctx: CanvasRenderingContext2D,

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

@@ -1,4 +1,5 @@
 import { HeatMapDataProps, HeatMapSvgProps, HeatMapCanvasProps } from '@nivo/heatmap'
+import { AxisWithToggle } from '../../../lib/settings'
 
 export type Datum = {
     x: string
@@ -21,10 +22,10 @@ export type SvgUnmappedProps = Omit<
         format: string
         enabled: boolean
     }
-    axisTop: SvgMappedProps['axisTop'] & { enable: boolean }
-    axisRight: SvgMappedProps['axisRight'] & { enable: boolean }
-    axisBottom: SvgMappedProps['axisBottom'] & { enable: boolean }
-    axisLeft: SvgMappedProps['axisLeft'] & { enable: boolean }
+    axisTop: AxisWithToggle<NonNullable<SvgMappedProps['axisTop']>>
+    axisRight: AxisWithToggle<NonNullable<SvgMappedProps['axisRight']>>
+    axisBottom: AxisWithToggle<NonNullable<SvgMappedProps['axisBottom']>>
+    axisLeft: AxisWithToggle<NonNullable<SvgMappedProps['axisLeft']>>
     legends: (Omit<LegendProps, 'tickFormat'> & {
         tickFormat: {
             format: string
@@ -51,10 +52,10 @@ export type CanvasUnmappedProps = Omit<
         format: string
         enabled: boolean
     }
-    axisTop: SvgMappedProps['axisTop'] & { enable: boolean }
-    axisRight: SvgMappedProps['axisRight'] & { enable: boolean }
-    axisBottom: SvgMappedProps['axisBottom'] & { enable: boolean }
-    axisLeft: SvgMappedProps['axisLeft'] & { enable: boolean }
+    axisTop: AxisWithToggle<NonNullable<CanvasMappedProps['axisTop']>>
+    axisRight: AxisWithToggle<NonNullable<CanvasMappedProps['axisRight']>>
+    axisBottom: AxisWithToggle<NonNullable<CanvasMappedProps['axisBottom']>>
+    axisLeft: AxisWithToggle<NonNullable<CanvasMappedProps['axisLeft']>>
     legends: (Omit<LegendProps, 'tickFormat'> & {
         tickFormat: {
             format: string

website/src/lib/settings.ts

@@ -1,5 +1,6 @@
 import omit from 'lodash/omit'
 import upperFirst from 'lodash/upperFirst'
+import { AxisProps, CanvasAxisProps } from '@nivo/axes'
 
 export const settingsMapper =
     (mapping: any, { exclude = [] }: { exclude?: string[] } = {}) =>
@@ -18,7 +19,11 @@ export const settingsMapper =
         }
     }
 
-export const mapAxis = (type: string) => (value: any, settings: any) =>
+export type AxisWithToggle<Axis extends AxisProps | CanvasAxisProps> = NonNullable<Axis> & {
+    enable: boolean
+}
+
+export const mapAxis = (type: 'top' | 'right' | 'bottom' | 'left') => (value: any, settings: any) =>
     settings[`axis${upperFirst(type)}`].enable ? omit(value, ['enable']) : null
 
 export const mapFormat = ({ format, enabled }: { format: string; enabled: boolean }) =>

website/src/pages/heatmap/api.tsx

@@ -1,13 +1,12 @@
-import React from 'react'
+import React, { useMemo } from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import { svgDefaultProps as defaults } from '@nivo/heatmap'
 import { Seo } from '../../components/Seo'
 import { ApiClient } from '../../components/components/api-client/ApiClient'
 import { groups } from '../../data/components/heatmap/props'
 import mapper from '../../data/components/heatmap/mapper'
 import { getLightData } from '../../data/components/heatmap/generator'
 import meta from '../../data/components/heatmap/meta.yml'
-import { graphql, useStaticQuery } from 'gatsby'
-
-const data = getLightData()
 
 const HeatMapApi = () => {
     const {
@@ -24,6 +23,8 @@ const HeatMapApi = () => {
         }
     `)
 
+    const data = useMemo(() => getLightData(), [])
+
     return (
         <>
             <Seo
@@ -42,27 +43,32 @@ const HeatMapApi = () => {
                 defaultProps={{
                     width: 800,
                     height: 600,
-                    data: JSON.stringify(data.data, null, '  '),
-                    keys: data.keys,
-                    indexBy: 'country',
-
+                    data: JSON.stringify(data, null, '  '),
                     margin: {
                         top: 100,
                         right: 60,
                         bottom: 30,
                         left: 60,
                     },
-
-                    minValue: 'auto',
-                    maxValue: 'auto',
-                    forceSquare: true,
-                    sizeVariation: 0.4,
-                    padding: 2,
-                    colors: 'nivo',
-
+                    valueFormat: { format: '>-.2s', enabled: true },
+                    forceSquare: defaults.forceSquare,
+                    sizeVariation: defaults.sizeVariation,
+                    xOuterPadding: defaults.xOuterPadding,
+                    xInnerPadding: defaults.xInnerPadding,
+                    yOuterPadding: defaults.yOuterPadding,
+                    yInnerPadding: defaults.yInnerPadding,
+                    colors: {
+                        type: 'diverging',
+                        scheme: 'red_yellow_blue',
+                        divergeAt: 0.5,
+                        minValue: -100_000,
+                        maxValue: 100_000,
+                    },
+                    emptyColor: '#555555',
+                    enableGridX: false,
+                    enableGridY: true,
                     axisTop: {
                         enable: true,
-                        orient: 'top',
                         tickSize: 5,
                         tickPadding: 5,
                         tickRotation: -55,
@@ -71,7 +77,6 @@ const HeatMapApi = () => {
                     },
                     axisRight: {
                         enable: false,
-                        orient: 'right',
                         tickSize: 5,
                         tickPadding: 5,
                         tickRotation: 0,
@@ -81,7 +86,6 @@ const HeatMapApi = () => {
                     },
                     axisBottom: {
                         enable: false,
-                        orient: 'bottom',
                         tickSize: 5,
                         tickPadding: 5,
                         tickRotation: 0,
@@ -91,31 +95,28 @@ const HeatMapApi = () => {
                     },
                     axisLeft: {
                         enable: true,
-                        orient: 'left',
                         tickSize: 5,
                         tickPadding: 5,
                         tickRotation: 0,
                         legend: 'country',
                         legendPosition: 'middle',
                         legendOffset: -40,
                     },
-
-                    enableGridX: false,
-                    enableGridY: true,
-
-                    cellShape: 'circle',
-                    cellOpacity: 1,
-                    cellBorderWidth: 0,
-                    cellBorderColor: {
+                    cellComponent: defaults.cellComponent,
+                    borderRadius: defaults.borderRadius,
+                    opacity: defaults.opacity,
+                    borderWidth: defaults.borderWidth,
+                    borderColor: {
                         from: 'color',
                         modifiers: [['darker', 0.4]],
                     },
-
                     enableLabels: true,
                     labelTextColor: {
                         from: 'color',
                         modifiers: [['darker', 1.4]],
                     },
+                    legends: [],
+                    annotations: [],
                 }}
             />
         </>