Make sure all styles of the chart come from the Theme

[krystalcampioni]

Context

All Polaris Viz Charts should fetch styles from the Theme definition

TODO

• [x] get the curerent theme by using the useTheme hook from @shopify/polaris-viz-core
• [x] passselectedTheme.bar.hasRoundedCorners to <Bar/>
• [x] use selectedTheme.seriesColors.single as bar colors
• [x] Allow overwriting the bar colors if a color is provided to data.color as per the Data Structure
• [x] Make sure all colors of legends, backgrounds and fronts come from the theme

Designs

@adamperron @aieaee if you have the time could you work on a dark mode mock for the chart? Most of the colors we can get from the theme definition, but I don't think we have a dark mode equivalent of that gray area between bars

[clairedeboer]

TODO 2: @krystalcampioni @juwanpetty We're using roundedBorder, should we be using hasRoundedCorners instead?

[clairedeboer]

TODO 1: @krystalcampioni @envex We have useTheme coming from @shopify/polaris-viz-core in the Label which works fine, but useTheme is coming from ../../hooksin the Chart and Funnel Chart and when I change it to @shopify/polaris-viz-core I get a reference error saying useTheme is not defined. Any ideas?

[clairedeboer]

TODO 3: @juwanpetty @krystalcampioni We have the bar color coming from MASK_HIGHLIGHT_COLOR

In looking at using the seriesColors.single I see it only has 3 elements and we have four bars. Would we be using seriesColors.upToFour instead?

[envex]

@clairedeboer I just tried on the feature/FunnelChart branch and it seems to work, make sure you're importing on it's own and not with import type.

// This way is correct
import type {
  DataSeries,
  XAxisOptions,
  YAxisOptions,
} from '@shopify/polaris-viz-core';
import {useTheme} from '@shopify/polaris-viz-core';

// This will error
import type {
  DataSeries,
  useTheme,
  XAxisOptions,
  YAxisOptions,
} from '@shopify/polaris-viz-core';

When I initially checked, vscode auto imported it into the import type {} group.

[clairedeboer]

@envex Yep that was definitely the problem, works now. Thank you thank you!

[krystalcampioni]

@clairedeboer @juwanpetty the bars should use seriesColors.single because the chart will always display a single series, and not many, regardless of how many bars it displays.

I also noticed that the feature/FunnelChart branch has some conflicts with main. Make sure you get the latest changes so you don't work on top of stale code 🫂

[clairedeboer]

@krystalcampioni Good call on getting the latest changes, thank you!

Also, I'm still confused on this.single is an array of 3 items and I don't see how it fits into our bar. How do we know which one to choose? https://github.com/Shopify/polaris-viz/blob/main/packages/polaris-viz-core/src/constants.ts#L96

[envex]

@clairedeboer NEUTRAL_SINGLE_GRADIENT is a single gradient, so the array is an array of stops.