Chart gradients work

change/@fluentui-react-charts-46eac20b-5c72-486d-a803-d2e37cc8b097.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added gradiant color functiaonlity in Donut chart and horizontalbarchart",
+  "packageName": "@fluentui/react-charts",
+  "email": "132879294+v-baambati@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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": "shawngrant333@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -435,7 +435,7 @@ export type ChartDataMode = 'default' | 'fraction' | 'percentage' | 'hidden';
 // @public (undocumented)
 export interface ChartDataPoint {
     callOutAccessibilityData?: AccessibilityProps;
-    color?: string;
+    color?: string | [string, string];
     data?: number;
     horizontalBarChartdata?: HorizontalDataPoint;
     legend?: string;
@@ -658,6 +658,36 @@ export interface DataSeries {
     useSecondaryYScale?: boolean;
 }
 
+// @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;
@@ -731,6 +761,7 @@ export interface DonutChartProps extends CartesianChartProps {
     componentRef?: React_2.Ref<Chart>;
     culture?: string;
     data?: ChartProps;
+    enableGradient?: boolean;
     height?: number;
     hideLabels?: boolean;
     hideLegend?: boolean;
@@ -796,10 +827,14 @@ export interface EventsAnnotationProps {
 }
 
 // @public (undocumented)
-export interface ExtendedSegment extends GaugeChartSegment {
+export interface ExtendedSegment extends Omit<GaugeChartSegment, 'color'> {
+    // (undocumented)
+    color: string | [string, string];
     // (undocumented)
     end: number;
     // (undocumented)
+    gradientId?: string;
+    // (undocumented)
     start: number;
 }
 
@@ -973,12 +1008,18 @@ export const getColorFromToken: (token: string, isDarkTheme?: boolean) => string
 // @public (undocumented)
 export function getContrastTextColor(backgroundColor: string, isDarkTheme?: boolean): string;
 
+// @public (undocumented)
+export const getGradientFromToken: (token: string, isDarkTheme?: boolean) => [string, string];
+
 // @public (undocumented)
 export const getInvertedTextColor: (color: string, isDarkTheme?: boolean) => 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 const getSegmentLabel: (segment: ExtendedSegment, minValue: number, maxValue: number, variant?: GaugeChartVariant, isAriaLabel?: boolean) => string;
 
@@ -1000,6 +1041,7 @@ export interface GroupedVerticalBarChartProps extends CartesianChartProps {
     culture?: string;
     data?: GroupedVerticalBarChartData[];
     dataV2?: (BarSeries<string, number> | LineSeries<string, number>)[];
+    enableGradient?: boolean;
     hideLabels?: boolean;
     isCalloutForStack?: boolean;
     maxBarWidth?: number;
@@ -1118,6 +1160,7 @@ export interface HorizontalBarChartProps extends React_2.RefAttributes<HTMLDivEl
     color?: string;
     culture?: string;
     data?: ChartProps[];
+    enableGradient?: boolean;
     hideLabels?: boolean;
     hideRatio?: boolean[];
     hideTooltip?: boolean;
@@ -1910,7 +1953,7 @@ export const VerticalBarChart: React_2.FunctionComponent<VerticalBarChartProps>;
 export interface VerticalBarChartDataPoint {
     barLabel?: string;
     callOutAccessibilityData?: AccessibilityProps;
-    color?: string;
+    color?: string | [string, string];
     legend?: string;
     lineData?: LineDataInVerticalBarChart;
     onClick?: VoidFunction;

packages/charts/react-charts/library/src/components/AreaChart/AreaChart.test.tsx

@@ -657,6 +657,32 @@ describe('AreaChart - Accessibility tests', () => {
   });
 });
 
+describe('Area Chart - Gradient', () => {
+  beforeEach(() => {
+    jest.spyOn(global.Math, 'random').mockReturnValue(0.1);
+    updateChartWidthAndHeight();
+  });
+  afterEach(() => {
+    jest.spyOn(global.Math, 'random').mockRestore();
+    sharedAfterEach();
+  });
+
+  it('Should compare AreaChart snapshots with enableGradient true and false', () => {
+    // Test with enableGradient={false}
+    const { container: containerGradientFalse } = render(<AreaChart data={chartData} enableGradient={false} />);
+    const gradientFalseHtml = (containerGradientFalse.firstChild as Element)?.outerHTML;
+    expect(containerGradientFalse.firstChild).toMatchSnapshot('area-chart-gradient-disabled');
+
+    // Test with enableGradient={true}
+    const { container: containerGradientTrue } = render(<AreaChart data={chartData} enableGradient={true} />);
+    const gradientTrueHtml = (containerGradientTrue.firstChild as Element)?.outerHTML;
+    expect(containerGradientTrue.firstChild).toMatchSnapshot('area-chart-gradient-enabled');
+
+    // Compare the rendered HTML to verify they are different
+    expect(gradientFalseHtml).not.toBe(gradientTrueHtml);
+  });
+});
+
 const emptyPoint = [
   {
     legend: 'metaData1',

packages/charts/react-charts/library/src/components/AreaChart/AreaChart.tsx

@@ -24,6 +24,7 @@ import {
   XAxisTypes,
   getTypeOfAxis,
   getNextColor,
+  getNextGradient,
   getColorFromToken,
   getSecureProps,
   areArraysEqual,
@@ -688,8 +689,11 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
             {props.enableGradient && (
               <defs>
                 <linearGradient id={`gradient_${index}`} x1="0%" x2="0%" y1="0%" y2="100%">
-                  <stop offset="0" stopColor={_colors[index]} />
-                  <stop offset="100%" stopColor="transparent" />
+                  <stop offset="0" stopColor={Array.isArray(_colors[index]) ? _colors[index][0] : _colors[index]} />
+                  <stop
+                    offset="100%"
+                    stopColor={Array.isArray(_colors[index]) ? _colors[index][1] : _colors[index] + '33'}
+                  />
                 </linearGradient>
               </defs>
             )}
@@ -698,7 +702,7 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
               d={line(singleStackedData)!}
               fill={'transparent'}
               strokeWidth={points[index]?.lineOptions?.strokeWidth ?? 3}
-              stroke={_colors[index]}
+              stroke={Array.isArray(_colors[index]) ? _colors[index][0] : _colors[index]}
               opacity={_getLineOpacity(points[index]!.legend)}
               onMouseMove={event => _onRectMouseMove(event)}
               onMouseOut={_onRectMouseOut}
@@ -727,7 +731,13 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
               <path
                 id={`${index}-graph-${_uniqueIdForGraph}`}
                 d={area(singleStackedData)!}
-                fill={props.enableGradient ? `url(#gradient_${index})` : _colors[index]}
+                fill={
+                  props.enableGradient
+                    ? `url(#gradient_${index})`
+                    : Array.isArray(_colors[index])
+                    ? _colors[index][0]
+                    : _colors[index]
+                }
                 opacity={layerOpacity}
                 fillOpacity={_getOpacity(points[index]!.legend)}
                 onMouseMove={event => _onRectMouseMove(event)}
@@ -926,8 +936,10 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
             let color: string;
             // isInverted property is applicable to v8 themes only
             if (typeof item.color === 'undefined') {
-              color = getNextColor(index, 0);
+              // If enableGradient and no color defined, use gradient array; otherwise use solid color
+              color = props.enableGradient ? getNextGradient(index)[0] : getNextColor(index, 0);
             } else {
+              // Use solid colors when gradient is disabled
               color = getColorFromToken(item.color);
             }