Add gradient palette & rounded corners to Charting

[t-shawngrant]

Overview

Implemented Viva gradient color palette and rounded corners in charting

New color tokens

export const DataVizGradientPalette = {
  gradient1: 'default.1',
  gradient2: 'default.2',
  gradient3: 'default.3',
  gradient4: 'default.4',
  gradient5: 'default.5',
  gradient6: 'default.6',
  gradient7: 'default.7',
  gradient8: 'default.8',
  gradient9: 'default.9',
  gradient10: 'default.10',
  // status gradients
  success: 'semantic.success',
  highSuccess: 'semantic.highSuccess',
  warning: 'semantic.warning',
  error: 'semantic.error',
  highError: 'semantic.highError',
  disabled: 'semantic.disabled',
};

New chart props

export interface ChartProps{
  // ... existing props
  /* Used to enable gradient fill for the chart.  */
  enableGradient?: boolean;
  /* Used to enable rounded corners for the chart. */
  roundCorners?: boolean;
}

Example Usage

const data: IChartProps = {
  chartTitle: 'Donut chart basic example',
  chartData: [
    {
      legend: 'first',
      data: 20000,
      // new `gradient` prop for chart data interfaces
      // use instead of `color` prop, when `enableGradient` is true for the chart
      gradient: getGradientFromToken(DataVizGradientPalette.gradient1),
      xAxisCalloutData: '2020/04/30',
    },
    {
      legend: 'second',
      data: 39000,
      gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
      xAxisCalloutData: '2020/04/20',
    },
  ],
};

// ... in render method
<DonutChart
  data={data}
  valueInsideDonut={39000}
  enableGradient={true} // new prop
  roundCorners={true} // new prop
  // ... other props
/>

New Behavior

charts will accept enableGradient and roundCorners boolean flags in their props.

Donut Chart

Gauge Chart

Horizontal Bar Chart

Horizontal Bar Chart With Axis

Stacked Horizontal Bar Chart

Multi Stacked Bar Chart

Vertical Bar Chart

Vertical Stacked Bar Chart

Grouped Vertical Bar Chart

TODO

• Remove border radius from interior edges of stacked bar charts

[t-shawngrant]

@t-shawngrant please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@microsoft-github-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree company="Microsoft"

[AtishayMsft]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 4 pipeline(s).

[fabricteam]

📊 Bundle size report

✅ No changes found

[fabricteam]

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[fabricteam]

🕵 FluentUIV0 No visual regressions between this PR and main

[azure-pipelines]

Commenter does not have sufficient privileges for PR 32008 in repo microsoft/fluentui

[t-shawngrant]

/azp run

[azure-pipelines]

Commenter does not have sufficient privileges for PR 32008 in repo microsoft/fluentui

[AtishayMsft]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 4 pipeline(s).

[fabricteam]

🕵 fluentuiv8 No visual regressions between this PR and main

[AtishayMsft]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 4 pipeline(s).

[AtishayMsft]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 4 pipeline(s).

[fabricteam]

🕵 fluentuiv8 No visual regressions between this PR and main

[AtishayMsft]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 4 pipeline(s).