frontend: add and use charts colors

[jecr]

This PR adds the color palette to be used in charts and updates current usages with references to the theme. A new property was added to the theme object: chartColors, to hold an static array of colors.

Added default colors to the theme.colors object for the Pie and LinearTimeline components, TimeseriesChart does not use default colors, but their stories now use colors from theme.

Changed components:

Linear Timeline

before

after

Custom styled

before

after

Pie Chart

Chart now uses colors from theme
Changed labels to get colors from palette

before

after

TimeseriesChart

before

after

before

after

Testing Performed

manual, unit tests

[jdslaugh]

I think this will need to be handled slightly differently but good initial work overall!

[jdslaugh]

Hmm, I wonder if we should be a little more descriptive with how we approach this. If we're to support multiple themes then this will likely not work well as it is very static. Also it should probably be a child of colors so it will inherit the variant that is passed down. Then also, what would we do if we wanted to hold different colors based on the chart/type etc?

[jecr]

Adjusted the charts colors prop to be under colors, so it'll look like

interface ChartColors {
  common: string[];
}

export interface ClutchColors {
  neutral: Color;
  blue: Color;
  green: Color;
  amber: Color;
  red: Color;
  charts: ChartColors;
}

commons felt right since the colors collection could be used by multiple charts. Having charts, with a different structure, within ClutchColors seems a bit odd though, wdyt?

[jdslaugh]

So one structure we could utilize is:

charts: {
  data: [],
  pie: {},
  graph: {},
}

This way we have the common data colors that all charts will likely use and then in the future we have the capability of subbing the type of charts with further data.

common feels like it could work but the word intones that these are all common colors shared across and therefore would likely have children of its own, such as common.data.

So I think we can utilize what I mentioned above as:

charts: {
  common: {
    data: []
  },
  pie: {},
  graph: {},
}

This way it allows us to add further common variables in the future if we need to.

[jdslaugh]

Sadly I don't know 'what' we'll need in the future, so this is just preparation to make sure we can support it :)

[github-actions]

This PR has been marked as stale after 7 or more days of inactivity. Please have a maintainer add the on hold label if this PR should remain open. If there is no further activity or the on hold label is not added, this PR will be closed in 3 days.

[jdslaugh]

Looks good