feat(website): add option to showcase custom scatterplot tooltip

plouc · Aug 24, 2018 · 68b72a4 · 68b72a4
1 parent 4ef0fd7
commit 68b72a4
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 23 deletions.
diff --git a/website/src/components/charts/pie/propsMapper.js b/website/src/components/charts/pie/propsMapper.js
@@ -21,20 +21,18 @@ const TooltipKey = styled.span`
 `
 const TooltipValue = styled.span``
 
-const CustomTooltip = data => {
-    return (
-        <TooltipWrapper style={{ color: data.color }}>
-            <TooltipKey>id</TooltipKey>
-            <TooltipValue>{data.id}</TooltipValue>
-            <TooltipKey>value</TooltipKey>
-            <TooltipValue>{data.value}</TooltipValue>
-            <TooltipKey>label</TooltipKey>
-            <TooltipValue>{data.label}</TooltipValue>
-            <TooltipKey>color</TooltipKey>
-            <TooltipValue>{data.color}</TooltipValue>
-        </TooltipWrapper>
-    )
-}
+const CustomTooltip = data => (
+    <TooltipWrapper style={{ color: data.color }}>
+        <TooltipKey>id</TooltipKey>
+        <TooltipValue>{data.id}</TooltipValue>
+        <TooltipKey>value</TooltipKey>
+        <TooltipValue>{data.value}</TooltipValue>
+        <TooltipKey>label</TooltipKey>
+        <TooltipValue>{data.label}</TooltipValue>
+        <TooltipKey>color</TooltipKey>
+        <TooltipValue>{data.color}</TooltipValue>
+    </TooltipWrapper>
+)
 
 export default settingsMapper(
     {

diff --git a/website/src/components/charts/scatterplot/ScatterPlot.js b/website/src/components/charts/scatterplot/ScatterPlot.js
@@ -92,6 +92,11 @@ export default class ScatterPlot extends Component {
             // interactivity
             isInteractive: true,
 
+            'custom tooltip example': false,
+            tooltip: null,
+
+            theme: nivoTheme,
+
             legends: [
                 {
                     anchor: 'bottom-right',
@@ -183,14 +188,6 @@ export default class ScatterPlot extends Component {
                         <ResponsiveScatterPlot
                             data={data}
                             {...mappedSettings}
-                            theme={{
-                                ...nivoTheme,
-                                grid: {
-                                    stroke: '#ccc',
-                                    strokeWidth: 1,
-                                    strokeDasharray: '6 6',
-                                },
-                            }}
                             onClick={this.handleNodeClick}
                         />
                     </ChartTabs>

diff --git a/website/src/components/charts/scatterplot/props.js b/website/src/components/charts/scatterplot/props.js
@@ -13,6 +13,7 @@ import {
     axesProperties,
     motionProperties,
 } from '../../../lib/componentProperties'
+import dedent from 'dedent-js'
 
 export default [
     {
@@ -164,6 +165,43 @@ export default [
         controlType: 'switch',
         controlGroup: 'Interactivity',
     },
+    {
+        key: 'tooltip',
+        scopes: ['ScatterPlot'],
+        type: '{Function}',
+        required: false,
+        description: (
+            <div>
+                A function allowing complete tooltip customisation, it must return a valid HTML
+                element and will receive the following data:
+                <pre className="code code-block">
+                    {dedent`
+                        {
+                            id:    {string|number},
+                            serie: {string|number},
+                            color: {string},
+                            x:     {number},
+                            y:     {number},
+                        }
+                    `}
+                </pre>
+            </div>
+        ),
+    },
+    {
+        key: 'custom tooltip example',
+        scopes: ['ScatterPlot'],
+        excludeFromDoc: true,
+        description: (
+            <span>
+                You can customize the tooltip using the <code>tooltip</code> property and{' '}
+                <code>theme.tooltip</code> object.
+            </span>
+        ),
+        type: '{boolean}',
+        controlType: 'switch',
+        controlGroup: 'Interactivity',
+    },
     {
         key: 'onClick',
         scopes: ['ScatterPlot', 'ScatterPlotCanvas'],

diff --git a/website/src/components/charts/scatterplot/propsMapper.js b/website/src/components/charts/scatterplot/propsMapper.js
@@ -6,8 +6,35 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+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}</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(
     {
         colorBy: value => {
@@ -19,8 +46,46 @@ export default settingsMapper(
         axisRight: mapAxis('right'),
         axisBottom: mapAxis('bottom'),
         axisLeft: mapAxis('left'),
+        tooltip: (value, values) => {
+            if (!values['custom tooltip example']) return undefined
+
+            return CustomTooltip
+        },
+        theme: (value, values) => {
+            if (!values['custom tooltip example']) {
+                return {
+                    ...value,
+                    grid: {
+                        stroke: '#ccc',
+                        strokeWidth: 1,
+                        strokeDasharray: '6 6',
+                    },
+                }
+            }
+
+            return {
+                ...values.theme,
+                grid: {
+                    stroke: '#ccc',
+                    strokeWidth: 1,
+                    strokeDasharray: '6 6',
+                },
+                tooltip: {
+                    container: {
+                        ...values.theme.tooltip.container,
+                        background: '#333',
+                    },
+                },
+            }
+        },
     },
     {
-        exclude: ['enable axisTop', 'enable axisRight', 'enable axisBottom', 'enable axisLeft'],
+        exclude: [
+            'enable axisTop',
+            'enable axisRight',
+            'enable axisBottom',
+            'enable axisLeft',
+            'custom tooltip example',
+        ],
     }
 )