From a91066fdf3264c9aab9b69f531d358b8c345e5e5 Mon Sep 17 00:00:00 2001 From: plouc Date: Mon, 10 Jan 2022 08:01:06 +0900 Subject: [PATCH] feat(heatmap): fix the http API documentation --- packages/axes/src/canvas.ts | 14 ++--- packages/axes/src/types.ts | 3 +- packages/bar/src/types.ts | 10 ++-- packages/heatmap/src/defaults.ts | 6 +- packages/heatmap/src/types.ts | 17 ++++-- .../scatterplot/src/ScatterPlotCanvas.tsx | 12 ++-- packages/swarmplot/src/types.ts | 10 ++-- website/src/data/components/heatmap/types.ts | 17 +++--- website/src/lib/settings.ts | 7 ++- website/src/pages/heatmap/api.tsx | 59 ++++++++++--------- website/src/pages/heatmap/canvas.tsx | 16 +---- website/src/pages/heatmap/index.tsx | 19 ++---- 12 files changed, 92 insertions(+), 98 deletions(-) diff --git a/packages/axes/src/canvas.ts b/packages/axes/src/canvas.ts index 4620b9b89d..5ea5800e6e 100644 --- a/packages/axes/src/canvas.ts +++ b/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 = ( ctx: CanvasRenderingContext2D, @@ -176,10 +176,10 @@ export const renderAxesToCanvas = ( yScale: AnyScale width: number height: number - top?: CanvasAxisProp | null - right?: CanvasAxisProp | null - bottom?: CanvasAxisProp | null - left?: CanvasAxisProp | null + top?: CanvasAxisProps | null + right?: CanvasAxisProps | null + bottom?: CanvasAxisProps | null + left?: CanvasAxisProps | null theme: CompleteTheme } ) => { @@ -187,8 +187,8 @@ export const renderAxesToCanvas = ( positions.forEach(position => { const axis = axes[position] as typeof position extends 'bottom' | 'top' - ? CanvasAxisProp | undefined - : CanvasAxisProp | undefined + ? CanvasAxisProps | undefined + : CanvasAxisProps | undefined if (!axis) return null diff --git a/packages/axes/src/types.ts b/packages/axes/src/types.ts index fcd25d1d54..9c35327835 100644 --- a/packages/axes/src/types.ts +++ b/packages/axes/src/types.ts @@ -35,7 +35,8 @@ export interface AxisProps { ariaHidden?: boolean } -export interface CanvasAxisProp extends Omit, 'legend'> { +export interface CanvasAxisProps + extends Omit, 'legend'> { legend?: string } diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts index 05c7459766..78d6d3c2b5 100644 --- a/packages/bar/src/types.ts +++ b/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 = Partial & Dimensions & Partial<{ - axisBottom: CanvasAxisProp - axisLeft: CanvasAxisProp - axisRight: CanvasAxisProp - axisTop: CanvasAxisProp + axisBottom: CanvasAxisProps + axisLeft: CanvasAxisProps + axisRight: CanvasAxisProps + axisTop: CanvasAxisProps renderBar: (context: CanvasRenderingContext2D, props: RenderBarProps) => void diff --git a/packages/heatmap/src/defaults.ts b/packages/heatmap/src/defaults.ts index 3ff0f5dd95..f2dd2103e0 100644 --- a/packages/heatmap/src/defaults.ts +++ b/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, } diff --git a/packages/heatmap/src/types.ts b/packages/heatmap/src/types.ts index d248a2140a..fd29894556 100644 --- a/packages/heatmap/src/types.ts +++ b/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[] } +export interface SizeVariationConfig { + values: [min: number, max: number] + sizes: [min: number, max: number] +} + export type LayerId = 'grid' | 'axes' | 'cells' | 'legends' | 'annotations' export interface CustomLayerProps { cells: ComputedCell[] @@ -111,7 +116,7 @@ export type HeatMapCommonProps = { margin: Box forceSquare: boolean - sizeVariation: number + sizeVariation: false | SizeVariationConfig xInnerPadding: number xOuterPadding: number yInnerPadding: number @@ -188,10 +193,10 @@ export type HeatMapCanvasProps & Dimensions & Partial<{ - axisTop: CanvasAxisProp | null - axisRight: CanvasAxisProp | null - axisBottom: CanvasAxisProp | null - axisLeft: CanvasAxisProp | null + axisTop: CanvasAxisProps | null + axisRight: CanvasAxisProps | null + axisBottom: CanvasAxisProps | null + axisLeft: CanvasAxisProps | null layers: (LayerId | CustomCanvasLayer)[] renderCell: CellShape | CellCanvasRenderer pixelRatio: number diff --git a/packages/scatterplot/src/ScatterPlotCanvas.tsx b/packages/scatterplot/src/ScatterPlotCanvas.tsx index cdaf76005d..2a72640688 100644 --- a/packages/scatterplot/src/ScatterPlotCanvas.tsx +++ b/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,10 +140,10 @@ const InnerScatterPlotCanvas = ({ yScale: yScale as any, width: innerWidth, height: innerHeight, - top: axisTop as CanvasAxisProp, - right: axisRight as CanvasAxisProp, - bottom: axisBottom as CanvasAxisProp, - left: axisLeft as CanvasAxisProp, + top: axisTop as CanvasAxisProps, + right: axisRight as CanvasAxisProps, + bottom: axisBottom as CanvasAxisProps, + left: axisLeft as CanvasAxisProps, theme, }) } else if (layer === 'nodes') { @@ -151,7 +151,7 @@ const InnerScatterPlotCanvas = ({ renderNode(ctx, node) }) } else if (layer === 'mesh') { - if (debugMesh === true) { + if (debugMesh) { renderVoronoiToCanvas(ctx, voronoi!) if (currentNode) { renderVoronoiCellToCanvas(ctx, voronoi!, currentNode.index) diff --git a/packages/swarmplot/src/types.ts b/packages/swarmplot/src/types.ts index 624648de5a..0b4521a830 100644 --- a/packages/swarmplot/src/types.ts +++ b/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 = SwarmPlotCommonProps & export type SwarmPlotCanvasProps = SwarmPlotCommonProps & Pick, 'onMouseMove' | 'onClick'> & { - axisTop?: CanvasAxisProp | null - axisRight?: CanvasAxisProp | null - axisBottom?: CanvasAxisProp | null - axisLeft?: CanvasAxisProp | null + axisTop?: CanvasAxisProps | null + axisRight?: CanvasAxisProps | null + axisBottom?: CanvasAxisProps | null + axisLeft?: CanvasAxisProps | null pixelRatio: number renderCircle: ( ctx: CanvasRenderingContext2D, diff --git a/website/src/data/components/heatmap/types.ts b/website/src/data/components/heatmap/types.ts index 9d411345a5..7300a24590 100644 --- a/website/src/data/components/heatmap/types.ts +++ b/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> + axisRight: AxisWithToggle> + axisBottom: AxisWithToggle> + axisLeft: AxisWithToggle> legends: (Omit & { 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> + axisRight: AxisWithToggle> + axisBottom: AxisWithToggle> + axisLeft: AxisWithToggle> legends: (Omit & { tickFormat: { format: string diff --git a/website/src/lib/settings.ts b/website/src/lib/settings.ts index 5d6d9c0e61..a16d878c8a 100644 --- a/website/src/lib/settings.ts +++ b/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 = NonNullable & { + 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 }) => diff --git a/website/src/pages/heatmap/api.tsx b/website/src/pages/heatmap/api.tsx index b979a9bf22..2e13867c62 100644 --- a/website/src/pages/heatmap/api.tsx +++ b/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 ( <> { 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,7 +95,6 @@ const HeatMapApi = () => { }, axisLeft: { enable: true, - orient: 'left', tickSize: 5, tickPadding: 5, tickRotation: 0, @@ -99,23 +102,21 @@ const HeatMapApi = () => { 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: [], }} /> diff --git a/website/src/pages/heatmap/canvas.tsx b/website/src/pages/heatmap/canvas.tsx index 7833b21523..a3d81a2ba7 100644 --- a/website/src/pages/heatmap/canvas.tsx +++ b/website/src/pages/heatmap/canvas.tsx @@ -22,19 +22,15 @@ const initialProperties: CanvasUnmappedProps = { bottom: 20, left: 80, }, - valueFormat: { format: '>-.2s', enabled: true }, - pixelRatio: typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1, - forceSquare: defaults.forceSquare, - sizeVariation: 0, + sizeVariation: defaults.sizeVariation, xOuterPadding: defaults.xOuterPadding, xInnerPadding: defaults.xInnerPadding, yOuterPadding: defaults.yOuterPadding, yInnerPadding: defaults.yInnerPadding, - enableGridX: false, enableGridY: false, axisTop: { @@ -72,7 +68,6 @@ const initialProperties: CanvasUnmappedProps = { legendPosition: 'middle', legendOffset: -42, }, - renderCell: 'rect', colors: { type: 'quantize', @@ -87,10 +82,8 @@ const initialProperties: CanvasUnmappedProps = { inactiveOpacity: defaults.inactiveOpacity, borderWidth: 1, borderColor: '#000000', - enableLabels: false, labelTextColor: defaults.labelTextColor, - legends: [ { anchor: 'left', @@ -109,14 +102,11 @@ const initialProperties: CanvasUnmappedProps = { titleOffset: 4, }, ], - annotations: [], - - animate: true, - motionConfig: defaults.motionConfig, - isInteractive: true, hoverTarget: 'rowColumn', + animate: true, + motionConfig: defaults.motionConfig, } const HeatMapCanvas = () => { diff --git a/website/src/pages/heatmap/index.tsx b/website/src/pages/heatmap/index.tsx index 4a66ddd895..bf50ce6334 100644 --- a/website/src/pages/heatmap/index.tsx +++ b/website/src/pages/heatmap/index.tsx @@ -22,16 +22,13 @@ const initialProperties: SvgUnmappedProps = { bottom: 60, left: 90, }, - valueFormat: { format: '>-.2s', enabled: true }, - forceSquare: defaults.forceSquare, - sizeVariation: 0, + sizeVariation: defaults.sizeVariation, xOuterPadding: defaults.xOuterPadding, xInnerPadding: defaults.xInnerPadding, yOuterPadding: defaults.yOuterPadding, yInnerPadding: defaults.yInnerPadding, - enableGridX: defaults.enableGridX, enableGridY: defaults.enableGridY, axisTop: { @@ -69,7 +66,6 @@ const initialProperties: SvgUnmappedProps = { legendPosition: 'middle', legendOffset: -72, }, - colors: { type: 'diverging', scheme: 'red_yellow_blue', @@ -78,17 +74,15 @@ const initialProperties: SvgUnmappedProps = { maxValue: 100_000, }, emptyColor: '#555555', - cellComponent: 'rect', + cellComponent: defaults.cellComponent, + borderRadius: defaults.borderRadius, opacity: defaults.opacity, activeOpacity: defaults.activeOpacity, inactiveOpacity: defaults.inactiveOpacity, - borderRadius: defaults.borderRadius, borderWidth: defaults.borderWidth, borderColor: defaults.borderColor, - enableLabels: defaults.enableLabels, labelTextColor: defaults.labelTextColor, - legends: [ { anchor: 'bottom', @@ -107,14 +101,11 @@ const initialProperties: SvgUnmappedProps = { titleOffset: 4, }, ], - annotations: defaults.annotations, - - animate: defaults.animate, - motionConfig: defaults.motionConfig, - isInteractive: defaults.isInteractive, hoverTarget: defaults.hoverTarget, + animate: defaults.animate, + motionConfig: defaults.motionConfig, } const HeatMap = () => {