feat(charts): Update V9 Charts to use DataVizGradientPalette

[shawn-grant]

Implement DataVizGradientPalette and rounded corners in v9 charts as default

Modified

• DonutChart
• HorizontalBarChart

New Behavior (UI)

DonutChart

With Custom Gradient

HorizontalBarChart

With Custom Gradient

Notable Changes:

• Added DataVizGradientPalette in utilities/gradients.ts
• Updated color properties to support gradients in types/DataPoint.ts
• Added new stories showing custom gradients

New Usage

const data: ChartProps = {
  chartData: [
    {
      legend: 'first',
      data: 20000,
      // single color (existing behavior)
      color: "#5cc300",
    },
    {
      legend: 'second',
      data: 39000,
      // using DataVizGradientPalette
      color: getGradientFromToken(DataVizGradientPalette.gradient1),
    },
    {
      legend: 'second',
      data: 10000,
      // using custom gradient
      color: [ '#ff88cc', '#db3794' ],
    },
  ],
};

TODO

• VerticalBarChart

Related

#32008

[AtishayMsft]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[github-actions]

📊 Bundle size report

✅ No changes found

[AtishayMsft]

PR CI is failing.

[github-actions]

Pull request demo site: URL

[AtishayMsft]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[shawn-grant]

PR CI is failing.

CI error should be fixed with this commit 0cc5413

[AtishayMsft]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[AtishayMsft]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[AtishayMsft]

the term gradient is confusing. Lets use color only with this structure -> string | [string, string]

[AtishayMsft]

I meant in all places.

[shawn-grant]

ohh, ok, so it should work with either a single color string or gradient tuple. Will make the changes

[AtishayMsft]

correct.