feat(marimekko): add support for custom tooltip

plouc · Nov 16, 2020 · ed74e9f · ed74e9f
1 parent 914f185
commit ed74e9f
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 30 deletions.
diff --git a/packages/marimekko/src/Bar.tsx b/packages/marimekko/src/Bar.tsx
@@ -1,8 +1,7 @@
 import React, { createElement, MouseEvent, useCallback } from 'react'
 import { animated, SpringValues, to } from 'react-spring'
 import { useTooltip } from '@nivo/tooltip'
-import { BarDatum, MouseEventHandlers } from './types'
-import { BarTooltip } from './BarTooltip'
+import { BarDatum, CommonProps, MouseEventHandlers } from './types'
 
 interface BarProps<RawDatum> extends MouseEventHandlers<RawDatum, SVGRectElement> {
     bar: BarDatum<RawDatum>
@@ -16,12 +15,14 @@ interface BarProps<RawDatum> extends MouseEventHandlers<RawDatum, SVGRectElement
         borderColor: string
     }>
     isInteractive: boolean
+    tooltip: CommonProps<RawDatum>['tooltip']
 }
 
 export const Bar = <RawDatum,>({
     bar,
     animatedProps,
     isInteractive,
+    tooltip,
     onClick,
     onMouseEnter,
     onMouseMove,
@@ -30,12 +31,8 @@ export const Bar = <RawDatum,>({
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
     const showTooltip = useCallback(
-        event =>
-            showTooltipFromEvent(
-                createElement<{ bar: BarDatum<RawDatum> }>(BarTooltip, { bar }),
-                event
-            ),
-        [showTooltipFromEvent, bar]
+        event => showTooltipFromEvent(createElement(tooltip, { bar }), event),
+        [showTooltipFromEvent, tooltip, bar]
     )
 
     const handleClick = useCallback(

diff --git a/packages/marimekko/src/Bars.tsx b/packages/marimekko/src/Bars.tsx
@@ -1,17 +1,19 @@
 import React from 'react'
 import { useTransition } from 'react-spring'
 import { useMotionConfig } from '@nivo/core'
-import { BarDatum, MouseEventHandlers } from './types'
+import { BarDatum, CommonProps, MouseEventHandlers } from './types'
 import { Bar } from './Bar'
 
 interface BarsProps<RawDatum> extends MouseEventHandlers<RawDatum, SVGRectElement> {
     isInteractive: boolean
     bars: BarDatum<RawDatum>[]
+    tooltip: CommonProps<RawDatum>['tooltip']
 }
 
 export const Bars = <RawDatum,>({
     bars,
     isInteractive,
+    tooltip,
     onClick,
     onMouseEnter,
     onMouseMove,
@@ -88,6 +90,7 @@ export const Bars = <RawDatum,>({
                     bar={bar}
                     animatedProps={style}
                     isInteractive={isInteractive}
+                    tooltip={tooltip}
                     onClick={onClick}
                     onMouseEnter={onMouseEnter}
                     onMouseMove={onMouseMove}

diff --git a/packages/marimekko/src/Marimekko.tsx b/packages/marimekko/src/Marimekko.tsx
@@ -5,6 +5,7 @@ import { SvgProps, LayerId, DimensionDatum } from './types'
 import { defaultProps } from './props'
 import { useMarimekko, useLayerContext } from './hooks'
 import { Bars } from './Bars'
+import { BarTooltip } from './BarTooltip'
 
 const InnerMarimekko = <RawDatum,>({
     data,
@@ -23,6 +24,7 @@ const InnerMarimekko = <RawDatum,>({
     borderWidth = defaultProps.borderWidth,
     borderColor = defaultProps.borderColor as InheritedColorConfig<DimensionDatum<RawDatum>>,
     isInteractive = defaultProps.isInteractive,
+    tooltip = BarTooltip,
     onClick,
     onMouseEnter,
     onMouseMove,
@@ -61,6 +63,7 @@ const InnerMarimekko = <RawDatum,>({
             key="bars"
             bars={bars}
             isInteractive={isInteractive}
+            tooltip={tooltip}
             onClick={onClick}
             onMouseEnter={onMouseEnter}
             onMouseMove={onMouseMove}

diff --git a/packages/marimekko/src/types.ts b/packages/marimekko/src/types.ts
@@ -72,9 +72,11 @@ export type CustomLayer<RawDatum> = React.FC<CustomLayerProps<RawDatum>>
 export type Layer<RawDatum> = LayerId | CustomLayer<RawDatum>
 
 export interface TooltipProps<RawDatum> {
-    datum: ComputedDatum<RawDatum>
+    bar: BarDatum<RawDatum>
 }
 
+export type BarTooltipType<RawDatum> = (props: TooltipProps<RawDatum>) => JSX.Element
+
 export type Layout = 'horizontal' | 'vertical'
 
 export const offsetById = {
@@ -119,7 +121,7 @@ export type CommonProps<RawDatum> = {
 
     // interactivity
     isInteractive: boolean
-    tooltip: React.FC<TooltipProps<RawDatum>>
+    tooltip: BarTooltipType<RawDatum>
 
     legends: LegendProps[]
 

diff --git a/website/src/data/components/marimekko/mapper.js b/website/src/data/components/marimekko/mapper.js
@@ -17,16 +17,18 @@ const TooltipValue = styled.span`
     font-weight: 600;
 `
 
-const CustomTooltip = ({ datum }) => (
-    <TooltipWrapper style={{ color: datum.color }}>
+const CustomTooltip = ({ bar }) => (
+    <TooltipWrapper style={{ color: bar.color }}>
+        <TooltipKey>datum.id</TooltipKey>
+        <TooltipValue>{bar.datum.id}</TooltipValue>
         <TooltipKey>id</TooltipKey>
-        <TooltipValue>{datum.id}</TooltipValue>
+        <TooltipValue>{bar.id}</TooltipValue>
         <TooltipKey>value</TooltipKey>
-        <TooltipValue>{datum.value}</TooltipValue>
-        <TooltipKey>formattedValue</TooltipKey>
-        <TooltipValue>{datum.formattedValue}</TooltipValue>
+        <TooltipValue>{bar.value}</TooltipValue>
         <TooltipKey>color</TooltipKey>
-        <TooltipValue>{datum.color}</TooltipValue>
+        <TooltipValue>{bar.color}</TooltipValue>
+        <TooltipKey>thickness</TooltipKey>
+        <TooltipValue>{bar.datum.thickness}</TooltipValue>
     </TooltipWrapper>
 )
 

diff --git a/website/src/pages/marimekko/index.js b/website/src/pages/marimekko/index.js
@@ -9,29 +9,34 @@ import { groups } from '../../data/components/marimekko/props'
 const getRandomValue = () => random(0, 32)
 
 const generateData = () =>
-    ['A', 'B', 'C', 'D', 'E'].map(id => ({
-        id,
+    [`it's good`, `it's sweet`, `it's spicy`, 'worth eating', 'worth buying'].map(statement => ({
+        statement,
         value: getRandomValue(),
-        cool: getRandomValue(),
-        notCool: getRandomValue(),
-        yabai: getRandomValue(),
+        stronglyAgree: getRandomValue(),
+        agree: getRandomValue(),
+        disagree: getRandomValue(),
+        stronglyDisagree: getRandomValue(),
     }))
 
 const initialProperties = {
-    id: 'id',
+    id: 'statement',
     value: 'value',
     dimensions: [
         {
-            id: 'cool stuff',
-            value: 'cool',
+            id: 'agree strongly',
+            value: 'stronglyAgree',
         },
         {
-            id: 'not cool stuff',
-            value: 'notCool',
+            id: 'agree',
+            value: 'agree',
         },
         {
-            id: 'YABAI!',
-            value: 'yabai',
+            id: 'disagree',
+            value: 'disagree',
+        },
+        {
+            id: 'disagree strongly',
+            value: 'stronglyDisagree',
         },
     ],
     layout: defaultProps.layout,