feat(scatterplot): fix TypeScript definitions

plouc · Jun 8, 2019 · ac012ba · ac012ba
1 parent 81bf6fd
commit ac012ba
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 74 deletions.
diff --git a/packages/scatterplot/index.d.ts b/packages/scatterplot/index.d.ts
@@ -1,3 +1,11 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 import * as React from 'react'
 import {
     Dimensions,
@@ -13,39 +21,70 @@ import { AxisProps } from '@nivo/axes'
 import { Scale } from '@nivo/scales'
 
 declare module '@nivo/scatterplot' {
-    export type TooltipFormatter = (value: { x: number | string; y: number | string }) => string
+    export type Value = number | string | Date
+    export type ValueFormatter = (value: Value) => string | number
 
-    export interface ScatterPlotDatum {
-        serie: string
-        id: string | number
-        x: string | number
-        y: string | number
+    export interface Datum {
+        x: Value
+        y: Value
+    }
+
+    export type DerivedDatumProp<T> = (node: Datum) => T
+
+    export interface Serie {
+        id: string
+        data: Datum[]
+    }
+
+    export interface Node {
+        id: string
+        serieId: string
+        x: number
+        y: number
+        size: number
+        style: {
+            color: string
+        }
+        data: {
+            x: Value
+            formattedX: string | number
+            y: Value
+            formattedY: string | number
+        }
+    }
+
+    export type DerivedNodeProp<T> = (node: Node) => T
+
+    export interface NodeProps {
+        node: Node
+
+        x: number
+        y: number
+        size: number
         color: string
+        blendMode: CssMixBlendMode
+
+        onMouseEnter?: VoidFunction
+        onMouseMove?: VoidFunction
+        onMouseLeave?: VoidFunction
+        onClick?: VoidFunction
     }
 
-    export type ScatterPlotMouseHandler = (
-        data: ScatterPlotDatum,
-        event: React.MouseEvent<any>
-    ) => void
+    export type NodeComponent = (props: NodeProps) => React.ReactNode
+    export type NodeCanvasComponent = (ctx: CanvasRenderingContext2D, props: NodeProps) => void
 
-    type DatumAccessor<T> = (datum: ScatterPlotDatum) => T
+    export type MouseHandler = (node: Node, event: React.MouseEvent<any>) => void
 
     export interface DynamicSizeSpec {
         key: string
         values: [number, number]
         sizes: [number, number]
     }
 
-    type ValueFormatter = (value: number | string | Date) => string | number
+    export type CustomTooltip = ({ node: Node }) => React.ReactNode
 
     export interface ScatterPlotProps {
-        data: Array<{
-            id: string
-            data: Array<{
-                x: number
-                y: number
-            }>
-        }>
+        data: Serie[]
 
         xScale?: Scale
         xFormat?: string | ValueFormatter
@@ -67,22 +106,22 @@ declare module '@nivo/scatterplot' {
         axisBottom?: AxisProps | null
         axisLeft?: AxisProps | null
 
-        nodeSize?: number | DatumAccessor<number> | DynamicSizeSpec
+        nodeSize?: number | DerivedDatumProp<number> | DynamicSizeSpec
 
         isInteractive?: boolean
         useMesh?: boolean
         debugMesh?: boolean
-        onMouseEnter?: ScatterPlotMouseHandler
-        onMouseMove?: ScatterPlotMouseHandler
-        onMouseLeave?: ScatterPlotMouseHandler
-        onClick?: ScatterPlotMouseHandler
-
-        tooltip?: (data: ScatterPlotDatum) => React.ReactNode
+        onMouseEnter?: MouseHandler
+        onMouseMove?: MouseHandler
+        onMouseLeave?: MouseHandler
+        onClick?: MouseHandler
+        tooltip?: CustomTooltip
 
         legends?: LegendProps[]
     }
 
     export interface ScatterPlotSvgProps extends ScatterPlotProps, MotionProps {
+        renderNode?: NodeComponent
         markers?: CartesianMarkerProps[]
     }
 
@@ -91,6 +130,7 @@ declare module '@nivo/scatterplot' {
 
     export interface ScatterPlotCanvasProps extends ScatterPlotProps {
         pixelRatio?: number
+        renderNode?: NodeCanvasComponent
     }
 
     export class ScatterPlotCanvas extends React.Component<ScatterPlotCanvasProps & Dimensions> {}

diff --git a/website/src/data/components/scatterplot/mapper.js b/website/src/data/components/scatterplot/mapper.js
@@ -10,50 +10,14 @@ import React from 'react'
 import styled from 'styled-components'
 import { settingsMapper, mapAxis } from '../../../lib/settings'
 
-const TooltipWrapper = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: 12px;
-`
-const TooltipKey = styled.span`
-    font-weight: 600;
-`
-const TooltipValue = styled.span``
-
-const CustomTooltip = data => (
-    <TooltipWrapper style={{ color: data.color }}>
-        <TooltipKey>id</TooltipKey>
-        <TooltipValue>{data.id}</TooltipValue>
-        <TooltipKey>serie</TooltipKey>
-        <TooltipValue>{data.serie.id}</TooltipValue>
-        <TooltipKey>color</TooltipKey>
-        <TooltipValue>{data.color}</TooltipValue>
-        <TooltipKey>x</TooltipKey>
-        <TooltipValue>{data.x}</TooltipValue>
-        <TooltipKey>y</TooltipKey>
-        <TooltipValue>{data.y}</TooltipValue>
-    </TooltipWrapper>
-)
-
 export default settingsMapper(
     {
         axisTop: mapAxis('top'),
         axisRight: mapAxis('right'),
         axisBottom: mapAxis('bottom'),
         axisLeft: mapAxis('left'),
-        tooltip: (value, values) => {
-            if (!values['custom tooltip example']) return undefined
-
-            return CustomTooltip
-        },
     },
     {
-        exclude: [
-            'enable axisTop',
-            'enable axisRight',
-            'enable axisBottom',
-            'enable axisLeft',
-            'custom tooltip example',
-        ],
+        exclude: ['enable axisTop', 'enable axisRight', 'enable axisBottom', 'enable axisLeft'],
     }
 )
diff --git a/website/src/data/components/scatterplot/props.js b/website/src/data/components/scatterplot/props.js
@@ -366,14 +366,6 @@ const props = [
             using the \`theme.tooltip\` object.
         `,
     },
-    {
-        key: 'custom tooltip example',
-        flavors: ['svg'],
-        group: 'Interactivity',
-        help: 'Showcase custom tooltip.',
-        type: 'boolean',
-        controlType: 'switch',
-    },
     {
         key: 'onMouseEnter',
         group: 'Interactivity',

diff --git a/website/src/pages/scatterplot/index.js b/website/src/pages/scatterplot/index.js
@@ -91,9 +91,6 @@ const initialProperties = {
     useMesh: false,
     debugMesh: false,
 
-    'custom tooltip example': false,
-    tooltip: null,
-
     legends: [
         {
             anchor: 'bottom-right',