Shopify/polaris-viz

Hover markers on StackedAreaChart are inaccurate when isAnimated is false

Closed this issue · 1 comments

Bug summary

For some data sets, especially where a zero seems to be involved, the markers can be wrong when the isAnimated prop is false.

Expected behavior

The marker Y location for the hovered dataset matches the value.

Actual behavior

See screenshot, the second blue marker should be at "0" instead of "1":

image

Steps to reproduce the problem

  1. Create a StackedAreaChart with data showed in reduced test case.
  2. Set the isAnimated prop to false. It works fine when animations are on.
  3. Hover over the graph to see the incorrect markers.

Reduced test case

https://codesandbox.io/s/shopify-polaris-viz-react-typescript-playground-forked-0m3gvl?file=/src/index.js:870-899

Specifications

  • Polaris-Viz version number: 6.6.0
  • Browser: Chrome
  • Device: MacBook Pro
  • Operating System: macOS Monterey

In case the sandbox is not working, here's the code for index.js:

import * as React from "react";
import { render } from "react-dom";
import { PolarisVizProvider, StackedAreaChart } from "@shopify/polaris-viz";
import "@shopify/polaris-viz/build/esm/styles.css";
import "./styles.css";

class Playground extends React.Component {
  render() {
    return (
      <PolarisVizProvider>
        <StackedAreaChart
          data={[
            {
              name: "Impressions",
              data: [
                { key: "2022-07-10", value: 1 },
                { key: "2022-07-11", value: 0 },
                { key: "2022-07-12", value: 0 }
              ]
            },
            {
              name: "Conversions",
              data: [
                { key: "2022-07-10", value: 0 },
                { key: "2022-07-11", value: 0 },
                { key: "2022-07-12", value: 0 }
              ]
            }
          ]}
          isAnimated={false}
        />
      </PolarisVizProvider>
    );
  }
}

render(<Playground />, document.getElementById("root"));