new(vx-react-spring): add package + AnimatedAxis #779

williaster · 2020-08-13T23:06:07Z

🚀 Enhancements

This PR adds a new AnimatedAxis component to @vx/axis and the needed react-spring dependency. The surface area is pretty minimal because only ticks are animated so we can fully re-use Axis/AxisBottom/etc and override a new ticksComponent prop which defaults to the old behavior.

I'm a little conflicted because generally vx is not opinionated on animation libraries and we don't want to bloat bundle sizes. However, the incentive for this comes from the XYChart POC in #745 where we would like to support animation if users opt in for it. So, we could either
~~a) simply add the needed Axis hooks (ticksComponent) to enable this cleanly, and keep AnimatedAxis in XYChart. or~~
~~b) add it to @vx/axis to let users opt into using it. It shouldn't affect bundle sizes if consumers use tree shaking or deep imports~~

~~To make b) a bit cleaner we could consider~~

~~avoid exporting AnimatedAxis from the index and require a deep import~~
~~add react-spring as a peer-dep if we want consumers to be able to use an existing version they have~~

UPDATE based on feedback

@vx/axis

@vx/axis Axis is refactored to accept a ticksComponent which allows us to animate them
adds a third argument values to tickFormat(value, index, values) so that format logic can more easily leverage all ticks (because numTicks is approximate, lib consumers do not know how many tick values exist a priori)

@vx/react-spring

adds a new package @vx/react-spring that includes react-spring as a peerDep and can be a home for things that depend on react-spring
Adds an <AnimatedAxis /> and <AnimatedTicksRender /> in @vx/react-spring
updates the vx-demo/axis demo to use <AnimatedAxis />

Updated `/axis` demo

@hshoff @kristw @techniq

williaster · 2020-08-13T23:06:44Z

packages/vx-axis/package.json

-    "prop-types": "^15.6.0"
-  },
-  "devDependencies": {
-    "@vx/scale": "0.0.198"


this is now a dep so don't need to duplicate it

williaster · 2020-08-13T23:09:31Z

packages/vx-axis/src/axis/AnimatedTicksRenderer/index.tsx

+  return animatedTicks.map(({ item, key, props }, index) => {
+    // @ts-ignore react-spring types don't handle fromX, etc.
+    const { fromX, toX, fromY, toY, opacity } = props;
+    const tickLabelProps = allTickLabelProps[index] ?? allTickLabelProps[0] ?? {};


I couldn't come up with a great solution for this. when tick values update, there may not be a tickLabelProps for that index.

ultimately the weirdness comes from the Axis component trying to find the max tick label font size to correctly offset the axis label (will comment on this). maybe we should deprecate that logic and clean this up?

williaster · 2020-08-13T23:11:10Z

packages/vx-axis/src/axis/Axis.tsx

+      index,
+      from: createPoint({ x: scaledValue, y: 0 }, horizontal),
+      to: createPoint({ x: scaledValue, y: tickLength * tickSign }, horizontal),
+      formattedValue: format(value, index, filteredTickValues),


have been wanting to add this for a while (will update the PR description): we now pass all ticks as a third argument (common d3 pattern) so that users can determine if a tick is first/last, etc. with index only you couldn't ever determine this because you may not know the exact # ticks unless you specify tickValues

williaster · 2020-08-13T23:12:13Z

packages/vx-axis/src/axis/AxisBottom.tsx

-  axisClassName,
-  labelOffset = 8,
-  tickLabelProps = (/** tickValue, index */) => ({
+export const bottomTickLabelProps = (/** tickValue, index */) =>


exporting these so that they could be used outside the component. tick label props are the primary differences between axis configurations

williaster · 2020-08-13T23:13:48Z

packages/vx-axis/src/axis/AxisRenderer.tsx

-  let tickLabelFontSize = 10; // track the max tick label size to compute label offset
-
+  // compute the max tick label size to compute label offset
+  const allTickLabelProps = ticks.map(({ value, index }) => tickLabelProps(value, index));


this is the jank logic I alluded to above. The label and ticks were previously coupled with this, so I updated the logic to pass an array of tickLabelProps to ticksComponent.

Might be worth a breaking change to remove this?

williaster · 2020-08-13T23:15:36Z

packages/vx-demo/src/sandboxes/vx-axis/Example.tsx

+                numTicksColumns={numTickColumns}
+              />
+              <AnimatedAxis
+                orientation={Orientation.bottom}


this is all just indented and we use AnimatedAxis + specify orientation

hshoff · 2020-08-19T03:44:33Z

I'd like to propose option c): create a new package @vx/react-spring that includes react-spring as a peerDep and can be a home for things that depend on react-spring and exports things like <AnimatedAxis />

williaster · 2020-08-19T04:40:50Z

🤯 I dig it! Noting that I think a lot of the XYChart elements might end up living there like AnimatedBars, AnimatedStackedBars, etc. (likely animated equivalents of many things in @vx/shape).

Organizing that over time might be tricky, but I think it'll be a good forcing function to keep things modular / might converge on good patterns over time.

…matedAxis

…erer

williaster · 2020-08-19T23:30:02Z

doc page for the new package

hshoff

Coverage decreased (-0.5%) to 44.264%

Let's add some tests, could just be simple exports/defined checks.

williaster · 2020-08-20T23:49:16Z

@hshoff 🎉

Coverage increased (+2.2%) to 46.97%

I have an AnimatedGrid PR stacked on this, will add some more legit ones there

hshoff · 2020-08-21T13:12:49Z

packages/vx-react-spring/package.json

+    "@vx/scale": "0.0.198",
+    "@vx/text": "0.0.198",
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.2"


Do we need prop-types here?

yeah, nimbus has a parser that adds propTypes to components during the build based on the types.

hshoff · 2020-08-21T13:39:55Z

packages/vx-react-spring/src/axis/AnimatedTicks/useTickTransitionConfig.ts

+    const fromLeave = ({ from, to, value }: ComputedTick<Scale>) => {
+      const scaledValue = scale(value) ?? 0;
+
+      return {
+        fromX: horizontal
+          ? // for top/bottom scales, enter from left or right based on value
+            scaledValue < scaleLength / 2
+            ? minPosition
+            : maxPosition
+          : // for left/right scales, don't animate x
+            from.x,
+        // same logic as above for the `to` Point
+        toX: horizontal ? (scaledValue < scaleLength / 2 ? minPosition : maxPosition) : to.x,
+        // for top/bottom scales, don't animate y
+        fromY: horizontal
+          ? // for top/bottom scales, don't animate y
+            from.y
+          : // for left/right scales, animate from top or bottom based on value
+          scaledValue < scaleLength / 2
+          ? minPosition
+          : maxPosition,
+        // same logic as above for the `to` Point
+        toY: horizontal ? to.y : scaledValue < scaleLength / 2 ? minPosition : maxPosition,
+        opacity: 0,
+      };
+    };


Would something like this work? would be great to avoid nested ternaries

const fromLeave = ({ from, to, value }: ComputedTick<Scale>) => { const scaledValue = scale(value) ?? 0; const lhs = scaledValue < scaleLength / 2; const opacity = 0; // vertical let fromX = from.x; let toX = to.x; let fromY = lhs ? minPosition : maxPosition; let toY = lhs ? minPosition : maxPosition; if (horizontal) { fromX = lhs ? minPosition : maxPosition; toX = lhs ? minPosition : maxPosition; fromY: from.y; toY: to.y; } return { opacity, fromX, toX, fromY, toY };

I agree this isn't great, but I cleaned it up / refactored a bunch in #787 here.

williaster added 🚀enhancement 🐯 example labels Aug 13, 2020

williaster added this to the 0.0.199 milestone Aug 13, 2020

williaster commented Aug 13, 2020

View reviewed changes

williaster added 6 commits August 19, 2020 14:27

new(vx-axis): add ticksComponent prop, AnimatedTicksRenderer, and Ani…

a75cd1e

…matedAxis

new(vx-demo/vx-axis): update demo to use AnimatedAxis

92a1b2e

fix(vx-demo/gallery): clear package filter on click if already selected

6d6117e

lint(vx-demo/axis)

3127ea5

new(react-spring): add package, move AnimatedAxis + AnimatedTicksRend…

88239bb

…erer

fix(vx-react-spring): fix imports and types

ffc5235

williaster force-pushed the chris--animated-axis branch from 8a196ef to ffc5235 Compare August 19, 2020 22:39

williaster changed the title ~~new(vx-axis): add AnimatedAxis~~ new(vx-react-spring): add package + AnimatedAxis Aug 19, 2020

williaster added 2 commits August 19, 2020 16:06

internal: TicksRenderer => Ticks, AnimatedTicksRenderer => AnimatedTicks

7082246

docs(react-spring): add package docs page

46d1979

williaster added 2 commits August 19, 2020 16:35

docs(axis, react-spring): tweaks

ec05f4b

fix(demo/react-spring): fix import casing

b15a1c4

hshoff requested changes Aug 20, 2020

View reviewed changes

test(vx-react-spring): add basic tests

0af9877

williaster mentioned this pull request Aug 21, 2020

new(vx-react-spring): add AnimatedGridRows/Columns + animationTrajectory #787

Merged

2 tasks

hshoff approved these changes Aug 21, 2020

View reviewed changes

williaster merged commit ef2db11 into master Aug 21, 2020

williaster deleted the chris--animated-axis branch August 21, 2020 14:56

williaster mentioned this pull request Sep 29, 2020

fix(Axis): tick index = post-filtered index #818

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

new(vx-react-spring): add package + AnimatedAxis #779

new(vx-react-spring): add package + AnimatedAxis #779

williaster commented Aug 13, 2020 •

edited

Loading

williaster Aug 13, 2020

williaster Aug 13, 2020

williaster Aug 13, 2020

williaster Aug 13, 2020

williaster Aug 13, 2020

williaster Aug 13, 2020

hshoff commented Aug 19, 2020 •

edited

Loading

williaster commented Aug 19, 2020

williaster commented Aug 19, 2020 •

edited

Loading

hshoff left a comment

williaster commented Aug 20, 2020

hshoff Aug 21, 2020

williaster Aug 21, 2020

hshoff Aug 21, 2020

williaster Aug 21, 2020

new(vx-react-spring): add package + AnimatedAxis #779

new(vx-react-spring): add package + AnimatedAxis #779

Conversation

williaster commented Aug 13, 2020 • edited Loading

🚀 Enhancements

Updated /axis demo

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hshoff commented Aug 19, 2020 • edited Loading

williaster commented Aug 19, 2020

williaster commented Aug 19, 2020 • edited Loading

hshoff left a comment

Choose a reason for hiding this comment

williaster commented Aug 20, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

williaster commented Aug 13, 2020 •

edited

Loading

Updated `/axis` demo

hshoff commented Aug 19, 2020 •

edited

Loading

williaster commented Aug 19, 2020 •

edited

Loading