Fill linear charts when necessary

[envex]

What does this implement/fix?

Now that we're allowing consumers to create custom charts, we're getting into issues where we have a LineChart, but the data provided doesn't include all the data we expect.

For example, we assume that linear data isn't matched up to keys and that each item would be index based.

For example, we don't care about the labels themselves. We take the series with the longest DataSeries.data length and use those keys as the labels. When this chart is rendered we will render the following labels:

January February March April May June July August September October November December

So when we start looping through the This Year data set, we don't care if January is actually January it's rendered in the 0 index and then moves to the next item.

  {
    name: 'This Year',
    data: [
      {key: 'January', value: 10},
      {key: 'February', value: 20},
      {key: 'March', value: 30},
      {key: 'April', value: 10},
      {key: 'May', value: 20},
      {key: 'June', value: 30},
    ],
  },
  {
    name: 'Last Year',
    data: [
      {key: 'January', value: 0},
      {key: 'February', value: 5},
      {key: 'March', value: 10},
      {key: 'April', value: 0},
      {key: 'May', value: 5},
      {key: 'June', value: 10},
      {key: 'July', value: 10},
      {key: 'August', value: 10},
      {key: 'September', value: 10},
      {key: 'October', value: 10},
      {key: 'November', value: 10},
      {key: 'December', value: 10},
    ],
    isComparison: true
  }

It's assumed that linear charts should contain the same amount of keys with the same date provided.

The exception is data sets with isComparison: true because those keys could be different when timestamps are provided.

The issue (...finally)

The image above shows a set of linear data, but based on the dimensions we have some days that include come products and other days that don't.

  {
    name: 'Biltong Taster Pack',
    data: [
      {
        key: 'Mon Nov 06 2023 23:00:00 GMT-0600 (Central Standard Time)',
        value: 123.99,
      },
      {
        key: 'Wed Nov 08 2023 23:00:00 GMT-0600 (Central Standard Time)',
        value: 123.99,
      },
    ],
  },
  {
    name: 'Chili Biltong Slab 8oz',
    data: [
      {
        key: 'Mon Nov 06 2023 23:00:00 GMT-0600 (Central Standard Time)',
        value: 69.98,
      },
      {
        key: 'Fri Nov 10 2023 23:00:00 GMT-0600 (Central Standard Time)',
        value: 31.11,
      },
    ],
  },

An example is that we have Biltong Taster Pack and Chili Biltong Slab 8oz both included on the 6th, but don't share any other days.

Before	After

You can see that before all the items were placed at the beginning of the chart, even though their dates didn't start at the beginning. Now they start in the right position.

Before merging

• Check your changes on a variety of browsers and devices.

• Update the Changelog's Unreleased section with your changes.

• Update relevant documentation, tests, and Storybook.

• Make sure you're exporting any new shared Components, Types and Utilities from the top level index file of the package

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
polaris-viz-core-cjs	61.31 KB (0%)	1.3 s (0%)	745 ms (-9.35% 🔽)	2 s
polaris-viz-cjs	211.36 KB (+0.05% 🔺)	4.3 s (+0.05% 🔺)	2.1 s (-1.25% 🔽)	6.3 s
polaris-viz-esm	173.66 KB (+0.03% 🔺)	3.5 s (+0.03% 🔺)	1.6 s (+25.35% 🔺)	5.1 s
polaris-viz-css	4.57 KB (0%)	92 ms (0%)	232 ms (-23.58% 🔽)	324 ms
polaris-viz-esnext	178.76 KB (+0.01% 🔺)	3.6 s (+0.01% 🔺)	1.3 s (-18% 🔽)	4.9 s

[maryamkaka]

📈