feat(charts): Update V9 Charts to use DataVizGradientPalette

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"
+}

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

@@ -164,7 +164,7 @@ export type ChartDataMode = 'default' | 'fraction' | 'percentage';
 // @public (undocumented)
 export interface ChartDataPoint {
     callOutAccessibilityData?: AccessibilityProps;
-    color?: string;
+    color?: string | [string, string];
     data?: number;
     horizontalBarChartdata?: HorizontalDataPoint;
     legend?: string;
@@ -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,22 +91,33 @@ 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;
+
+    // check if gradient ([string, string]) or color (string) is provided
+    const useGradient = Array.isArray(props.color);
+    const clipId = useId('Arc_clip') + (useGradient ? `${props.color[0]}_${props.color[1]}` : (props.color as string));
+
+    const fill = useGradient
+      ? `conic-gradient(
+      from ${props.data?.startAngle}rad,
+      ${props.color[0]},
+      ${props.color[1]} ${props.data!.endAngle - props.data!.startAngle}rad
+    )`
+      : (props.color as string);
+
+    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)}
@@ -117,6 +129,22 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
           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: fill,
+              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.
+   * Color or gradient for the legend in the chart. If not provided, it will fallback on the default color palette.
    */
-  color: string;
+  color: string | [string, string];
 
   /**
    * Defines the function that is executed upon hovering over the legend

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

@@ -21,7 +21,6 @@ function sharedAfterEach() {
 
   // Do this after unmounting the wrapper to make sure if any timers cleaned up on unmount are
   // cleaned up in fake timers world
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   if ((global.setTimeout as any).mock) {
     jest.useRealTimers();
   }

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

@@ -5,7 +5,7 @@ import { DonutChartProps } from './DonutChart.types';
 import { useDonutChartStyles_unstable } from './useDonutChartStyles.styles';
 import { ChartDataPoint } from '../../DonutChart';
 import { convertToLocaleString } from '../../utilities/locale-util';
-import { getColorFromToken, getNextColor } from '../../utilities/index';
+import { getNextGradient } from '../../utilities/index';
 import { Legend, Legends } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
@@ -23,7 +23,6 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
   (props, forwardedRef) => {
     const _rootElem = React.useRef<HTMLDivElement | null>(null);
     const _uniqText: string = useId('_Pie_');
-    /* eslint-disable @typescript-eslint/no-explicit-any */
     let _calloutAnchorPoint: ChartDataPoint | null;
     let _emptyChartId: string | null;
     const legendContainer = React.useRef<HTMLDivElement | null>(null);
@@ -34,7 +33,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
     const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);
     const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);
     const [activeLegend, setActiveLegend] = React.useState<string>('');
-    const [color, setColor] = React.useState<string | undefined>('');
+    const [color, setColor] = React.useState<string | [string, string] | undefined>('');
     const [xCalloutValue, setXCalloutValue] = React.useState<string>('');
     const [yCalloutValue, setYCalloutValue] = React.useState<string>('');
     const [selectedLegend, setSelectedLegend] = React.useState<string>('');
@@ -76,13 +75,14 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
       });
       return elevatedData;
     }
+
     function _createLegends(chartData: ChartDataPoint[]): JSX.Element {
       const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {
-        const color: string = point.color!;
+        const useGradient = Array.isArray(point.color);
         // mapping data to the format Legends component needs
-        const legend: Legend = {
+        const pointLegend: Legend = {
           title: point.legend!,
-          color,
+          color: useGradient ? point.color![0] : (point.color as string),
           action: () => {
             if (selectedLegend === point.legend) {
               setSelectedLegend('');
@@ -98,7 +98,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
             setActiveLegend('');
           },
         };
-        return legend;
+        return pointLegend;
       });
       const legends = (
         <Legends
@@ -115,7 +115,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
       setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
       setValue(data.data!.toString());
       setLegend(data.legend);
-      setColor(data.color!);
+      setColor(data.color);
       setXCalloutValue(data.xAxisCalloutData!);
       setYCalloutValue(data.yAxisCalloutData!);
       setFocusedArcId(id);
@@ -128,7 +128,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
         setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
         setValue(data.data!.toString());
         setLegend(data.legend);
-        setColor(data.color!);
+        setColor(data.color);
         setXCalloutValue(data.xAxisCalloutData!);
         setYCalloutValue(data.yAxisCalloutData!);
         setDataPointCalloutProps(data);
@@ -193,13 +193,30 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
     function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {
       return donutChartDataPoint
         ? donutChartDataPoint.map((item, index) => {
-            let defaultColor: string;
-            if (typeof item.color === 'undefined') {
-              defaultColor = getNextColor(index, 0);
-            } else {
-              defaultColor = getColorFromToken(item.color);
+            let itemColor = item.color;
+
+            // if color is not defined, assign a default color
+            if (!itemColor) {
+              itemColor = getNextGradient(index);
             }
-            return { ...item, defaultColor };
+            // if color is a string, check if it is undefined or blank assign a default color
+            if (typeof itemColor === 'string' && itemColor.trim() === '') {
+              itemColor = getNextGradient(index);
+            }
+            // if color is an array, check if either colors are undefined or blank
+            // if startColor is undefined or blank, assign a default color
+            // if endColor is undefined or blank, assign the startColor to endColor
+            if (Array.isArray(itemColor)) {
+              const [startColor, endColor] = itemColor;
+              if (!startColor || startColor.trim() === '') {
+                itemColor[0] = getNextGradient(index)[0];
+              }
+              if (!endColor || endColor.trim() === '') {
+                itemColor[1] = itemColor[0];
+              }
+            }
+
+            return { ...item, color: itemColor };
           })
         : [];
     }
@@ -263,6 +280,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
     const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));
     const valueInsideDonut = _valueInsideDonut(props.valueInsideDonut!, chartData!);
     const focusAttributes = useFocusableGroup();
+
     return !_isChartEmpty() ? (
       <div
         className={classes.root}
@@ -299,7 +317,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
           isPopoverOpen={isPopoverOpen}
           legend={legend!}
           YValue={value!}
-          color={color}
+          color={Array.isArray(color) ? color[0] : color}
           isCalloutForStack={false}
           customCallout={{
             customizedCallout: props.onRenderCalloutPerDataPoint

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

@@ -2,7 +2,7 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
-import { pie as d3Pie } from 'd3-shape';
+import { pie as d3Pie, PieArcDatum } from 'd3-shape';
 import { PieProps } from './index';
 import { Arc } from '../Arc/index';
 import { ChartDataPoint } from '../index';
@@ -25,7 +25,6 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
     const classes = usePieStyles_unstable(props);
     const pieForFocusRing = d3Pie()
       .sort(null)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .value((d: any) => d.data)
       .padAngle(0);
 
@@ -45,17 +44,15 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
       return totalValue;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function arcGenerator(d: any, i: number, focusData: any, href?: string): JSX.Element {
-      const color = d && d.data && d.data.color;
+    function arcGenerator(d: PieArcDatum<ChartDataPoint>, i: number, focusData: any, href?: string): JSX.Element {
       return (
         <Arc
           key={i}
           data={d}
           focusData={focusData}
           innerRadius={props.innerRadius}
           outerRadius={props.outerRadius}
-          color={color!}
+          color={d.data.color!}
           onFocusCallback={_focusCallback}
           hoverOnCallback={_hoverCallback}
           onBlurCallback={props.onBlurCallback}
@@ -78,7 +75,6 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
 
     const piechart = d3Pie<ChartDataPoint>()
       .sort(null)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .value((d: any) => d.data)
       .padAngle(0.02)(data);
     const translate = `translate(${props.width / 2}, ${props.height / 2})`;
@@ -87,7 +83,7 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
 
     return (
       <g transform={translate}>
-        {piechart.map((d: any, i: number) => arcGenerator(d, i, focusData[i], props.href))}
+        {piechart.map((d: PieArcDatum<ChartDataPoint>, i: number) => arcGenerator(d, i, focusData[i], props.href))}
         {props.valueInsideDonut && (
           <text y={5} textAnchor="middle" dominantBaseline="middle" className={classes.insideDonutString}>
             {props.valueInsideDonut}