feat(marimekko): add support for mouse handlers

packages/marimekko/src/Bar.tsx

@@ -1,10 +1,10 @@
-import React, { createElement, MouseEvent } from 'react'
+import React, { createElement, MouseEvent, useCallback } from 'react'
 import { animated, SpringValues, to } from 'react-spring'
 import { useTooltip } from '@nivo/tooltip'
-import { BarDatum } from './types'
+import { BarDatum, MouseEventHandlers } from './types'
 import { BarTooltip } from './BarTooltip'
 
-interface BarProps<RawDatum> {
+interface BarProps<RawDatum> extends MouseEventHandlers<RawDatum, SVGRectElement> {
     bar: BarDatum<RawDatum>
     animatedProps: SpringValues<{
         x: number
@@ -15,17 +15,59 @@ interface BarProps<RawDatum> {
         color: string
         borderColor: string
     }>
+    isInteractive: boolean
 }
 
-export const Bar = <RawDatum,>({ bar, animatedProps }: BarProps<RawDatum>) => {
+export const Bar = <RawDatum,>({
+    bar,
+    animatedProps,
+    isInteractive,
+    onClick,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
+}: BarProps<RawDatum>) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
-    const handle = (event: MouseEvent) => {
-        showTooltipFromEvent(
-            createElement<{ bar: BarDatum<RawDatum> }>(BarTooltip, { bar }),
-            event
-        )
-    }
+    const showTooltip = useCallback(
+        event =>
+            showTooltipFromEvent(
+                createElement<{ bar: BarDatum<RawDatum> }>(BarTooltip, { bar }),
+                event
+            ),
+        [showTooltipFromEvent, bar]
+    )
+
+    const handleClick = useCallback(
+        (event: MouseEvent<SVGRectElement>) => {
+            onClick?.(bar, event)
+        },
+        [onClick, bar]
+    )
+
+    const handleMouseEnter = useCallback(
+        (event: MouseEvent<SVGRectElement>) => {
+            onMouseEnter?.(bar, event)
+            showTooltip(event)
+        },
+        [showTooltip, bar]
+    )
+
+    const handleMouseMove = useCallback(
+        (event: MouseEvent<SVGRectElement>) => {
+            onMouseMove?.(bar, event)
+            showTooltip(event)
+        },
+        [showTooltip, bar]
+    )
+
+    const handleMouseLeave = useCallback(
+        (event: MouseEvent<SVGRectElement>) => {
+            onMouseLeave?.(bar, event)
+            hideTooltip()
+        },
+        [onMouseLeave, bar, hideTooltip]
+    )
 
     return (
         <animated.rect
@@ -36,9 +78,10 @@ export const Bar = <RawDatum,>({ bar, animatedProps }: BarProps<RawDatum>) => {
             fill={animatedProps.color}
             stroke={animatedProps.borderColor}
             strokeWidth={bar.borderWidth}
-            onMouseEnter={handle}
-            onMouseMove={handle}
-            onMouseLeave={hideTooltip}
+            onClick={isInteractive ? handleClick : undefined}
+            onMouseEnter={isInteractive ? handleMouseEnter : undefined}
+            onMouseMove={isInteractive ? handleMouseMove : undefined}
+            onMouseLeave={isInteractive ? handleMouseLeave : undefined}
         />
     )
 }

packages/marimekko/src/Bars.tsx

@@ -1,13 +1,21 @@
 import React from 'react'
 import { useTransition, config } from 'react-spring'
-import { BarDatum } from './types'
+import { BarDatum, MouseEventHandlers } from './types'
 import { Bar } from './Bar'
 
-interface BarsProps<RawDatum> {
+interface BarsProps<RawDatum> extends MouseEventHandlers<RawDatum, SVGRectElement> {
+    isInteractive: boolean
     bars: BarDatum<RawDatum>[]
 }
 
-export const Bars = <RawDatum,>({ bars }: BarsProps<RawDatum>) => {
+export const Bars = <RawDatum,>({
+    bars,
+    isInteractive,
+    onClick,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
+}: BarsProps<RawDatum>) => {
     const transition = useTransition<
         BarDatum<RawDatum>,
         {
@@ -71,9 +79,18 @@ export const Bars = <RawDatum,>({ bars }: BarsProps<RawDatum>) => {
 
     return (
         <>
-            {transition((style, bar) => {
-                return <Bar<RawDatum> key={bar.key} bar={bar} animatedProps={style} />
-            })}
+            {transition((style, bar) => (
+                <Bar<RawDatum>
+                    key={bar.key}
+                    bar={bar}
+                    animatedProps={style}
+                    isInteractive={isInteractive}
+                    onClick={onClick}
+                    onMouseEnter={onMouseEnter}
+                    onMouseMove={onMouseMove}
+                    onMouseLeave={onMouseLeave}
+                />
+            ))}
         </>
     )
 }

packages/marimekko/src/Marimekko.tsx

@@ -21,6 +21,11 @@ const InnerMarimekko = <RawDatum,>({
     >,
     borderWidth = defaultProps.borderWidth,
     borderColor = defaultProps.borderColor as InheritedColorConfig<DimensionDatum<RawDatum>>,
+    isInteractive = defaultProps.isInteractive,
+    onClick,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
     role,
 }: SvgProps<RawDatum>) => {
     const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions(
@@ -49,7 +54,17 @@ const InnerMarimekko = <RawDatum,>({
         legends: null,
     }
 
-    layerById.bars = <Bars<RawDatum> key="bars" bars={bars} />
+    layerById.bars = (
+        <Bars<RawDatum>
+            key="bars"
+            bars={bars}
+            isInteractive={isInteractive}
+            onClick={onClick}
+            onMouseEnter={onMouseEnter}
+            onMouseMove={onMouseMove}
+            onMouseLeave={onMouseLeave}
+        />
+    )
 
     const layerContext = useLayerContext<RawDatum>({
         data: computedData,
@@ -79,8 +94,12 @@ const InnerMarimekko = <RawDatum,>({
     )
 }
 
-export const Marimekko = <RawDatum,>(props: SvgProps<RawDatum>) => (
-    <Container theme={props.theme} isInteractive={props.isInteractive} animate={props.animate}>
-        <InnerMarimekko<RawDatum> {...props} />
+export const Marimekko = <RawDatum,>({
+    isInteractive = defaultProps.isInteractive,
+    animate = defaultProps.animate,
+    ...otherProps
+}: SvgProps<RawDatum>) => (
+    <Container theme={otherProps.theme} isInteractive={isInteractive} animate={animate}>
+        <InnerMarimekko<RawDatum> isInteractive={isInteractive} animate={animate} {...otherProps} />
     </Container>
 )

packages/marimekko/src/props.ts

@@ -11,4 +11,8 @@ export const defaultProps = {
         from: 'color',
         modifiers: [['darker', 1]],
     },
+
+    isInteractive: true,
+
+    animate: true,
 }

packages/marimekko/src/types.ts

@@ -101,29 +101,29 @@ export type CommonProps<RawDatum> = {
 }
 
 export type MouseEventHandler<RawDatum, ElementType> = (
-    datum: ComputedDatum<RawDatum>,
+    datum: BarDatum<RawDatum>,
     event: React.MouseEvent<ElementType>
 ) => void
 
-export type MouseEventHandlers<RawDatum, ElementType> = {
+export type MouseEventHandlers<RawDatum, ElementType> = Partial<{
     onClick: MouseEventHandler<RawDatum, ElementType>
     onMouseEnter: MouseEventHandler<RawDatum, ElementType>
     onMouseMove: MouseEventHandler<RawDatum, ElementType>
     onMouseLeave: MouseEventHandler<RawDatum, ElementType>
-}
+}>
 
 export type SvgProps<RawDatum> = DataProps<RawDatum> &
     Dimensions &
     Partial<CommonProps<RawDatum>> &
     SvgDefsAndFill<ComputedDatum<RawDatum>> &
-    Partial<MouseEventHandlers<RawDatum, SVGPathElement>> & {
+    MouseEventHandlers<RawDatum, SVGRectElement> & {
         layers?: Layer<RawDatum>[]
     }
 
 export type CompleteSvgProps<RawDatum> = DataProps<RawDatum> &
     Dimensions &
     CommonProps<RawDatum> &
     SvgDefsAndFill<ComputedDatum<RawDatum>> &
-    Partial<MouseEventHandlers<RawDatum, SVGPathElement>> & {
+    MouseEventHandlers<RawDatum, SVGRectElement> & {
         layers: Layer<RawDatum>[]
     }

website/src/data/components/marimekko/props.js

@@ -203,35 +203,35 @@ const props = [
         controlType: 'switch',
     },
     {
-        key: 'onMouseEnter',
-        flavors: ['svg'],
+        key: 'onClick',
+        flavors: ['svg', 'canvas'],
         group: 'Interactivity',
-        help: 'onMouseEnter handler, it receives target node data and mouse event.',
-        type: '(node, event) => void',
+        help: 'onClick handler, it receives target bar data and mouse event.',
+        type: '(bar: BarDatum<RawDatum>, event: MouseEvent) => void',
         required: false,
     },
     {
-        key: 'onMouseMove',
+        key: 'onMouseEnter',
         flavors: ['svg', 'canvas'],
         group: 'Interactivity',
-        help: 'onMouseMove handler, it receives target node data and mouse event.',
-        type: '(node, event) => void',
+        help: 'onMouseEnter handler, it receives target bar data and mouse event.',
+        type: '(bar: BarDatum<RawDatum>, event: MouseEvent) => void',
         required: false,
     },
     {
-        key: 'onMouseLeave',
-        flavors: ['svg'],
+        key: 'onMouseMove',
+        flavors: ['svg', 'canvas'],
         group: 'Interactivity',
-        help: 'onMouseLeave handler, it receives target node data and mouse event.',
-        type: '(node, event) => void',
+        help: 'onMouseMove handler, it receives target bar data and mouse event.',
+        type: '(bar: BarDatum<RawDatum>, event: MouseEvent) => void',
         required: false,
     },
     {
-        key: 'onClick',
+        key: 'onMouseLeave',
         flavors: ['svg', 'canvas'],
         group: 'Interactivity',
-        help: 'onClick handler, it receives target node data and mouse event.',
-        type: '(node, event) => void',
+        help: 'onMouseLeave handler, it receives target bar data and mouse event.',
+        type: '(bar: BarDatum<RawDatum>, event: MouseEvent) => void',
         required: false,
     },
     {

website/src/pages/marimekko/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ResponsiveMarimekko, defaultProps } from '@nivo/marimekko'
-import { random } from 'lodash'
+import { random, omit } from 'lodash'
 import ComponentTemplate from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/marimekko/meta.yml'
 import mapper from '../../data/components/marimekko/mapper'
@@ -103,12 +103,16 @@ const Marimekko = () => {
             generateData={generateData}
         >
             {(properties, data, theme, logAction) => {
-                const handleArcClick = slice => {
+                const handleClick = bar => {
                     logAction({
                         type: 'click',
-                        label: `[arc] ${slice.id}: ${slice.formattedValue}`,
-                        color: slice.color,
-                        data: slice,
+                        label: `[bar] ${bar.datum.id} - ${bar.id}: ${bar.value}`,
+                        color: bar.color,
+                        // prevent cyclic dependency
+                        data: {
+                            ...omit(bar, ['datum']),
+                            datum: omit(bar.datum, ['dimensions']),
+                        },
                     })
                 }
 
@@ -126,7 +130,7 @@ const Marimekko = () => {
                         data={data}
                         {...properties}
                         theme={theme}
-                        onClick={handleArcClick}
+                        onClick={handleClick}
                         legends={properties.legends.map(legend => ({
                             ...legend,
                             onClick: handleLegendClick,