feat(charts): Update V9 Charts to use DataVizGradientPalette

apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx

@@ -18,8 +18,8 @@ export default {
 
 export const Basic = () => {
   const points: ChartDataPoint[] = [
-    { legend: 'first', data: 20000, color: '#DADADA', xAxisCalloutData: '2020/04/30' },
-    { legend: 'second', data: 39000, color: '#0078D4', xAxisCalloutData: '2020/04/20' },
+    { legend: 'first', data: 20000, gradient: ['#DADADA', '#DADADA'], xAxisCalloutData: '2020/04/30' },
+    { legend: 'second', data: 39000, gradient: ['#0078D4', '#0078D4'], xAxisCalloutData: '2020/04/20' },
   ];
 
   const data: ChartProps = {
@@ -54,22 +54,22 @@ export const Dynamic = () => {
       {
         legend: 'first',
         data: Math.floor(120),
-        color: '#00bcf2',
+        gradient: ['#00bcf2', '#00bcf2'],
       },
       {
         legend: 'second',
         data: Math.floor(130),
-        color: '#b4a0ff',
+        gradient: ['#b4a0ff', '#b4a0ff'],
       },
       {
         legend: 'third',
         data: Math.floor(10),
-        color: '#fff100',
+        gradient: ['#fff100', '#fff100'],
       },
       {
         legend: 'fourth',
         data: Math.floor(270),
-        color: '#605e5c',
+        gradient: ['#605e5c', '#605e5c'],
       },
     ],
   };

apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx

@@ -35,7 +35,7 @@ export const Basic = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: '#4cb4b7',
+          gradient: ['#4cb4b7', '#4cb4b7'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '10%',
         },
@@ -47,7 +47,7 @@ export const Basic = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: '#800080',
+          gradient: ['#800080', '#800080'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '5%',
         },
@@ -59,7 +59,7 @@ export const Basic = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: '#ff0000',
+          gradient: ['#ff0000', '#ff0000'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '59%',
         },
@@ -71,7 +71,7 @@ export const Basic = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: '#fbc0c3',
+          gradient: ['#fbc0c3', '#fbc0c3'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '105%',
         },
@@ -83,7 +83,7 @@ export const Basic = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: '#f7630c',
+          gradient: ['#f7630c', '#f7630c'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '76%',
         },
@@ -95,7 +95,7 @@ export const Basic = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: '#107c10',
+          gradient: ['#107c10', '#107c10'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '93%',
         },
@@ -107,7 +107,7 @@ export const Basic = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: '#6e0811',
+          gradient: ['#6e0811', '#6e0811'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '65%',
         },
@@ -119,7 +119,7 @@ export const Basic = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: '#3a96dd',
+          gradient: ['#3a96dd', '#3a96dd'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '28%',
         },
@@ -149,7 +149,7 @@ export const WithBenchmark = () => {
           legend: 'one',
           data: 50,
           horizontalBarChartdata: { x: 10, y: 100 },
-          color: '#4cb4b7',
+          gradient: ['#4cb4b7', '#4cb4b7'],
         },
       ],
     },
@@ -160,7 +160,7 @@ export const WithBenchmark = () => {
           legend: 'two',
           data: 30,
           horizontalBarChartdata: { x: 30, y: 200 },
-          color: '#800080',
+          gradient: ['#800080', '#800080'],
         },
       ],
     },
@@ -171,7 +171,7 @@ export const WithBenchmark = () => {
           legend: 'three',
           data: 5,
           horizontalBarChartdata: { x: 15, y: 50 },
-          color: '#ff0000',
+          gradient: ['#ff0000', '#ff0000'],
         },
       ],
     },
@@ -198,7 +198,7 @@ export const Variant = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: '#4cb4b7',
+          gradient: ['#4cb4b7', '#4cb4b7'],
         },
       ],
     },
@@ -208,7 +208,7 @@ export const Variant = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: '#800080',
+          gradient: ['#800080', '#800080'],
         },
       ],
     },
@@ -218,7 +218,7 @@ export const Variant = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: '#ff0000',
+          gradient: ['#ff0000', '#ff0000'],
         },
       ],
     },
@@ -228,7 +228,7 @@ export const Variant = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: '#fbc0c3',
+          gradient: ['#fbc0c3', '#fbc0c3'],
         },
       ],
     },
@@ -238,7 +238,7 @@ export const Variant = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: '#f7630c',
+          gradient: ['#f7630c', '#f7630c'],
         },
       ],
     },
@@ -248,7 +248,7 @@ export const Variant = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: '#107c10',
+          gradient: ['#107c10', '#107c10'],
         },
       ],
     },
@@ -258,7 +258,7 @@ export const Variant = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: '#6e0811',
+          gradient: ['#6e0811', '#6e0811'],
         },
       ],
     },
@@ -268,7 +268,7 @@ export const Variant = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: '#3a96dd',
+          gradient: ['#3a96dd', '#3a96dd'],
         },
       ],
     },

change/@fluentui-react-charts-preview-4a4fc3a5-16b8-4e2c-9fea-5cb5888e977f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Introduce gradients and rounded corners to v9 charts",
+  "packageName": "@fluentui/react-charts-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-virtualizer-5968650e-f0eb-40bc-908a-49286af1ddbd.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "updated to use gradient property for charts-preview",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/charts/react-charts-preview/library/etc/react-charts-preview.api.md

@@ -164,8 +164,8 @@ export type ChartDataMode = 'default' | 'fraction' | 'percentage';
 // @public (undocumented)
 export interface ChartDataPoint {
     callOutAccessibilityData?: AccessibilityProps;
-    color?: string;
     data?: number;
+    gradient?: [string, string];
     horizontalBarChartdata?: HorizontalDataPoint;
     legend?: string;
     onClick?: VoidFunction;
@@ -304,6 +304,36 @@ export interface DataPoint {
     y: number;
 }
 
+// @public (undocumented)
+export const DataVizGradientPalette: {
+    gradient1: string;
+    gradient2: string;
+    gradient3: string;
+    gradient4: string;
+    gradient5: string;
+    gradient6: string;
+    gradient7: string;
+    gradient8: string;
+    gradient9: string;
+    gradient10: string;
+    gradient1Ext: string;
+    gradient2Ext: string;
+    gradient3Ext: string;
+    gradient4Ext: string;
+    gradient5Ext: string;
+    gradient6Ext: string;
+    gradient7Ext: string;
+    gradient8Ext: string;
+    gradient9Ext: string;
+    gradient10Ext: string;
+    success: string;
+    highSuccess: string;
+    warning: string;
+    error: string;
+    highError: string;
+    disabled: string;
+};
+
 // @public (undocumented)
 export const DataVizPalette: {
     color1: string;
@@ -403,9 +433,15 @@ export interface EventsAnnotationProps {
 // @public (undocumented)
 export const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
 
+// @public (undocumented)
+export const getGradientFromToken: (token: string, isDarkTheme?: boolean) => [string, string];
+
 // @public (undocumented)
 export const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
 
+// @public (undocumented)
+export const getNextGradient: (index: number, offset?: number, isDarkTheme?: boolean) => [string, string];
+
 // @public (undocumented)
 export interface GroupedVerticalBarChartData {
     name: string;

packages/charts/react-charts-preview/library/package.json

@@ -24,6 +24,7 @@
     "start": "yarn storybook",
     "storybook": "yarn --cwd ../stories storybook",
     "test": "jest --passWithNoTests",
+    "update-snapshots": "jest -u",
     "type-check": "just-scripts type-check"
   },
   "syncpack": {

packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx

@@ -5,6 +5,7 @@ import { ChartDataPoint } from '../index';
 import { ArcProps } from './index';
 import { format as d3Format } from 'd3-format';
 import { formatValueWithSIPrefix, useRtl } from '../../../utilities/index';
+import { useId } from '@fluentui/react-utilities';
 
 // Create a Arc within Donut Chart variant which uses these default styles and this styled subcomponent.
 /**
@@ -13,7 +14,7 @@ import { formatValueWithSIPrefix, useRtl } from '../../../utilities/index';
  */
 export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivElement, ArcProps>(
   (props, forwardedRef) => {
-    const arc = d3Arc();
+    const arc = d3Arc().cornerRadius(5);
     const currentRef = React.createRef<SVGPathElement>();
     const _isRTL: boolean = useRtl();
     const classes = useArcStyles_unstable(props);
@@ -90,33 +91,54 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
     //TO DO 'replace' is throwing error
     const id = props.uniqText! + props.data!.data.legend!.replace(/\s+/, '') + props.data!.data.data;
     const opacity: number = props.activeArc === props.data!.data.legend || props.activeArc === '' ? 1 : 0.1;
+
+    const clipId = useId('Arc_clip') + `${props.gradient[0]}_${props.gradient[1]}`;
+    const gradientFill = `conic-gradient(
+      from ${props.data?.startAngle}rad,
+      ${props.gradient[0]},
+      ${props.gradient[1]} ${props.data?.endAngle}rad
+    )`;
+
+    const pathData = arc({ ...props.data!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!;
+    const focusPathData = arc({ ...props.focusData!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!;
+
     return (
       <g ref={currentRef}>
         {!!focusedArcId && focusedArcId === id && (
           // TODO innerradius and outerradius were absent
-          <path
-            id={id + 'focusRing'}
-            d={arc({ ...props.focusData!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!}
-            className={classes.focusRing}
-          />
+          <path id={id + 'focusRing'} d={focusPathData} className={classes.focusRing} />
         )}
         <path
           // TODO innerradius and outerradius were absent
           id={id}
-          d={arc({ ...props.data!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!}
-          className={classes.root}
-          style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}
+          d={pathData}
+          style={{ fill: 'transparent', cursor: href ? 'pointer' : 'default' }}
           onFocus={_onFocus.bind(this, props.data!.data, id)}
           data-is-focusable={props.activeArc === props.data!.data.legend || props.activeArc === ''}
           onMouseOver={_hoverOn.bind(this, props.data!.data)}
           onMouseMove={_hoverOn.bind(this, props.data!.data)}
           onMouseLeave={_hoverOff}
           onBlur={_onBlur}
-          opacity={opacity}
           onClick={props.data?.data.onClick}
           aria-label={_getAriaLabel()}
           role="img"
         />
+        {/* clipping mask  */}
+        <clipPath id={clipId}>
+          <path d={pathData} />
+        </clipPath>
+        {/* div to attach conic-gradient fill to */}
+        <foreignObject x="-50%" y="-50%" width="100%" height="100%" clipPath={`url(#${clipId})`}>
+          <div
+            className={classes.root}
+            style={{
+              width: '100%',
+              height: '100%',
+              background: gradientFill,
+              opacity,
+            }}
+          />
+        </foreignObject>
         {_renderArcLabel(classes.arcLabel)}
       </g>
     );

packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.types.ts

@@ -31,9 +31,9 @@ export interface ArcProps {
   outerRadius: number;
 
   /**
-   * Color for the Arc.
+   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.
    */
-  color: string;
+  gradient: [string, string];
 
   /**
    * Defines the function that is executed upon hovering over the legend