feat(marimekko): use react-spring@next and add animation support to bars

plouc · Nov 16, 2020 · 001b671 · 001b671
1 parent 5f18b05
commit 001b671
Show file tree

Hide file tree

Showing 18 changed files with 247 additions and 47 deletions.
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
@@ -29,7 +29,7 @@
   "dependencies": {
     "@nivo/colors": "0.64.0",
     "lodash": "^4.17.11",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",

diff --git a/packages/axes/package.json b/packages/axes/package.json
@@ -30,7 +30,7 @@
     "d3-format": "^1.4.4",
     "d3-time": "^1.0.11",
     "d3-time-format": "^2.1.3",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",

diff --git a/packages/bullet/package.json b/packages/bullet/package.json
@@ -33,7 +33,7 @@
     "@nivo/legends": "0.64.0",
     "@nivo/tooltip": "0.64.0",
     "d3-scale": "^3.0.0",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "devDependencies": {
     "@nivo/core": "*",

diff --git a/packages/bump/package.json b/packages/bump/package.json
@@ -35,7 +35,7 @@
     "@nivo/legends": "0.64.0",
     "@nivo/tooltip": "0.64.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -29,7 +29,7 @@
     "d3-shape": "^1.3.5",
     "d3-time-format": "^2.1.3",
     "lodash": "^4.17.11",
-    "react-spring": "^8.0.27",
+    "react-spring": "next",
     "recompose": "^0.30.0",
     "resize-observer-polyfill": "^1.5.1"
   },

diff --git a/packages/funnel/package.json b/packages/funnel/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/annotations": "0.63.1",

diff --git a/packages/heatmap/package.json b/packages/heatmap/package.json
@@ -32,7 +32,7 @@
     "@nivo/colors": "0.64.0",
     "@nivo/tooltip": "0.64.0",
     "d3-scale": "^3.0.0",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",

diff --git a/packages/line/package.json b/packages/line/package.json
@@ -36,7 +36,7 @@
     "@nivo/tooltip": "0.64.0",
     "@nivo/voronoi": "0.64.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",

diff --git a/packages/marimekko/package.json b/packages/marimekko/package.json
@@ -24,7 +24,7 @@
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
     "lodash": "^4.17.11",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "devDependencies": {
     "@nivo/core": "*",

diff --git a/packages/marimekko/src/Bar.tsx b/packages/marimekko/src/Bar.tsx
@@ -0,0 +1,46 @@
+import React, { createElement, MouseEvent } from 'react'
+import { animated, SpringValues } from 'react-spring'
+import { useTooltip } from '@nivo/tooltip'
+import { DimensionDatum } from './types'
+import { BarTooltip } from './BarTooltip'
+
+interface BarProps<RawDatum> {
+    datum: DimensionDatum<RawDatum>
+    borderWidth: number
+    borderColor: string
+    animatedProps: SpringValues<{
+        x: number
+        y: number
+        width: number
+        height: number
+        opacity: number
+        color: string
+        borderColor: string
+    }>
+}
+
+export const Bar = <RawDatum,>({ datum, borderWidth, animatedProps }: BarProps<RawDatum>) => {
+    const { showTooltipFromEvent, hideTooltip } = useTooltip()
+
+    const handle = (event: MouseEvent) => {
+        showTooltipFromEvent(
+            createElement<{ datum: DimensionDatum<RawDatum> }>(BarTooltip, { datum }),
+            event
+        )
+    }
+
+    return (
+        <animated.rect
+            x={animatedProps.x}
+            y={animatedProps.y}
+            width={animatedProps.width}
+            height={animatedProps.height}
+            fill={animatedProps.color}
+            stroke={animatedProps.borderColor}
+            strokeWidth={borderWidth}
+            onMouseEnter={handle}
+            onMouseMove={handle}
+            onMouseLeave={hideTooltip}
+        />
+    )
+}
diff --git a/packages/marimekko/src/Bars.tsx b/packages/marimekko/src/Bars.tsx
@@ -1,13 +1,12 @@
-import React, { createElement, useMemo, MouseEvent } from 'react'
-// import { useTransition } from 'react-spring'
+import React, { useMemo } from 'react'
+import { useTransition, config } from 'react-spring'
 // @ts-ignore
 import { useTheme } from '@nivo/core'
 import { InheritedColorConfig, useInheritedColor } from '@nivo/colors'
-import { useTooltip } from '@nivo/tooltip'
 import { ComputedDatum, DimensionDatum } from './types'
-import { BarTooltip } from './BarTooltip'
+import { Bar } from './Bar'
 
-interface NodesProps<RawDatum> {
+interface BarsProps<RawDatum> {
     data: ComputedDatum<RawDatum>[]
     borderWidth: number
     borderColor: InheritedColorConfig<DimensionDatum<RawDatum>>
@@ -18,7 +17,7 @@ interface BarData<RawDatum> extends DimensionDatum<RawDatum> {
     borderColor: string
 }
 
-export const Bars = <RawDatum,>({ data, borderWidth, borderColor }: NodesProps<RawDatum>) => {
+export const Bars = <RawDatum,>({ data, borderWidth, borderColor }: BarsProps<RawDatum>) => {
     const theme = useTheme()
     const getBorderColor = useInheritedColor<DimensionDatum<RawDatum>>(borderColor, theme)
 
@@ -37,32 +36,77 @@ export const Bars = <RawDatum,>({ data, borderWidth, borderColor }: NodesProps<R
         return all
     }, [data, borderWidth, getBorderColor])
 
-    const { showTooltipFromEvent, hideTooltip } = useTooltip()
-
-    const handle = (datum: DimensionDatum<RawDatum>, event: MouseEvent) => {
-        showTooltipFromEvent(
-            createElement<{ datum: DimensionDatum<RawDatum> }>(BarTooltip, { datum }),
-            event
-        )
-    }
+    const transition = useTransition<
+        BarData<RawDatum>,
+        {
+            x: number
+            y: number
+            width: number
+            height: number
+            color: string
+            opacity: number
+            borderColor: string
+        }
+    >(allBars, {
+        key: bar => bar.key,
+        initial: bar => ({
+            x: bar.x,
+            y: bar.y,
+            width: bar.width,
+            height: bar.height,
+            color: bar.color,
+            opacity: 1,
+            borderColor: bar.borderColor,
+        }),
+        from: bar => ({
+            x: bar.x,
+            y: bar.y,
+            width: bar.width,
+            height: bar.height,
+            color: bar.color,
+            opacity: 0,
+            borderColor: bar.borderColor,
+        }),
+        enter: bar => ({
+            x: bar.x,
+            y: bar.y,
+            width: bar.width,
+            height: bar.height,
+            color: bar.color,
+            opacity: 1,
+            borderColor: bar.borderColor,
+        }),
+        update: bar => ({
+            x: bar.x,
+            y: bar.y,
+            width: bar.width,
+            height: bar.height,
+            color: bar.color,
+            opacity: 1,
+            borderColor: bar.borderColor,
+        }),
+        leave: bar => ({
+            opacity: 0,
+            x: bar.x,
+            y: bar.y,
+            width: bar.width,
+            height: bar.height,
+            color: bar.color,
+        }),
+        config: config.wobbly,
+        //immediate: !animate,
+    })
 
     return (
         <>
-            {allBars.map(bar => {
+            {transition((style, bar) => {
                 return (
-                    <rect
+                    <Bar<RawDatum>
                         key={bar.key}
-                        id={bar.key}
-                        x={bar.x}
-                        y={bar.y}
-                        width={bar.width}
-                        height={bar.height}
-                        fill={bar.color}
-                        stroke={bar.borderColor}
-                        strokeWidth={borderWidth}
-                        onMouseEnter={event => handle(bar, event)}
-                        onMouseMove={event => handle(bar, event)}
-                        onMouseLeave={hideTooltip}
+                        datum={bar}
+                        borderWidth={borderWidth}
+                        borderColor={bar.borderColor}
+                        animatedProps={style}
                     />
                 )
             })}

diff --git a/packages/parallel-coordinates/package.json b/packages/parallel-coordinates/package.json
@@ -33,7 +33,7 @@
     "@nivo/tooltip": "0.64.0",
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",

diff --git a/packages/radar/package.json b/packages/radar/package.json
@@ -33,7 +33,7 @@
     "@nivo/tooltip": "0.64.0",
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",

diff --git a/packages/sankey/package.json b/packages/sankey/package.json
@@ -34,7 +34,7 @@
     "d3-sankey": "^0.12.1",
     "d3-shape": "^1.3.5",
     "lodash": "^4.17.11",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",

diff --git a/packages/stream/package.json b/packages/stream/package.json
@@ -35,7 +35,7 @@
     "@nivo/tooltip": "0.64.0",
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",

diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
@@ -20,7 +20,7 @@
     "dist/"
   ],
   "dependencies": {
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "devDependencies": {
     "@nivo/core": "*"

diff --git a/packages/treemap/package.json b/packages/treemap/package.json
@@ -32,7 +32,7 @@
     "@nivo/tooltip": "0.64.0",
     "d3-hierarchy": "^1.1.8",
     "lodash": "^4.17.11",
-    "react-spring": "^8.0.27"
+    "react-spring": "next"
   },
   "peerDependencies": {
     "@nivo/core": "0.63.1",