feat(charts): add support for lines in GVBC (microsoft#35135)

Author: krkshitij

change/@fluentui-chart-utilities-f90d12fe-042c-4f79-a08e-fe36f596a262.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add support for lines in GVBC",
+  "packageName": "@fluentui/chart-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-28885318-9a95-4ebf-899b-7e1720fac285.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add support for lines in GVBC",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/chart-utilities/etc/chart-utilities.api.md

@@ -520,6 +520,9 @@ export const isNumberArray: (data: Datum[] | Datum[][] | TypedArray | undefined)
 // @public (undocumented)
 export const isObjectArray: (data: Datum[] | Datum[][] | TypedArray | undefined) => boolean;
 
+// @public (undocumented)
+export const isScatterAreaChart: (data: Partial<PlotData>) => boolean;
+
 // @public (undocumented)
 export const isStringArray: (data: Datum[] | Datum[][] | TypedArray | undefined) => boolean;
 

packages/charts/chart-utilities/src/PlotlySchemaConverter.ts

@@ -302,7 +302,7 @@ const validateScatterData = (data: Partial<PlotData>, layout: Partial<Layout> |
   }
 
   const isAreaChart = isScatterAreaChart(data);
-  const isFallbackNeeded = doesScatterNeedVSBCFallback(data);
+  const isFallbackNeeded = doesScatterNeedFallback(data);
   if (isAreaChart && isFallbackNeeded) {
     throw new Error(
       `${UNSUPPORTED_MSG_PREFIX} ${data.type}, Fallback to VerticalStackedBarChart is not allowed for Area Charts.`,
@@ -542,11 +542,11 @@ export const mapFluentChart = (input: any): OutputChartType => {
             return { isValid: true, traceIndex, type: 'scatter' };
           }
 
-          if (!doesScatterNeedVSBCFallback(scatterData)) {
+          if (!doesScatterNeedFallback(scatterData)) {
             return { isValid: true, traceIndex, type: isAreaChart ? 'area' : 'line' };
           }
 
-          // isScatterAreaChart and doesScatterNeedVSBCFallback cannot both return true for the
+          // isScatterAreaChart and doesScatterNeedFallback cannot both return true for the
           // same trace due to the validation logic in validateScatterData.
           return { isValid: true, traceIndex, type: 'fallback' };
         default:
@@ -581,12 +581,23 @@ export const mapFluentChart = (input: any): OutputChartType => {
       trace => trace.type === 'groupedverticalbar' || trace.type === 'verticalstackedbar',
     );
     const containsLines = mappedTraces.some(trace => trace.type === 'line' || trace.type === 'fallback');
-    if (containsBars && containsLines) {
-      return {
-        isValid: true,
-        type: 'fallback',
-        validTracesInfo: tracesInfo,
-      };
+    if (containsLines) {
+      if (containsBars) {
+        const shouldUseGVBC = !mappedTraces.some(trace => trace.type === 'verticalstackedbar');
+        return {
+          isValid: true,
+          type: shouldUseGVBC ? 'groupedverticalbar' : 'fallback',
+          validTracesInfo: tracesInfo,
+        };
+      }
+
+      if (mappedTraces.some(trace => trace.type === 'fallback')) {
+        return {
+          isValid: true,
+          type: 'fallback',
+          validTracesInfo: tracesInfo,
+        };
+      }
     }
 
     const uniqueTypes = new Set(mappedTraces.map(trace => trace.type));
@@ -634,11 +645,11 @@ export const getAxisKey = (axLetter: 'x' | 'y', axId: number) => {
   return `${axLetter}axis${axId > 1 ? axId : ''}` as keyof Layout;
 };
 
-const isScatterAreaChart = (data: Partial<PlotData>) => {
+export const isScatterAreaChart = (data: Partial<PlotData>) => {
   return data.fill === 'tonexty' || data.fill === 'tozeroy' || !!data.stackgroup;
 };
 
-const doesScatterNeedVSBCFallback = (data: Partial<PlotData>) => {
+const doesScatterNeedFallback = (data: Partial<PlotData>) => {
   if (isScatterMarkers(data.mode ?? '')) {
     return false;
   }

packages/charts/chart-utilities/src/index.ts

@@ -117,6 +117,7 @@ export {
   isObjectArray,
   getAxisIds,
   getAxisKey,
+  isScatterAreaChart,
 } from './PlotlySchemaConverter';
 
 export { decodeBase64Fields } from './DecodeBase64Data';

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

@@ -242,6 +242,13 @@ export interface IAreaChartStyleProps extends ICartesianChartStyleProps {
 export interface IAreaChartStyles extends ICartesianChartStyles {
 }
 
+// @public
+export interface IBarSeries<X extends string | number | Date, Y extends string | number | Date> extends IDataSeries {
+    data: IDataPointV2<X, Y>[];
+    key?: string;
+    type: 'bar';
+}
+
 // @public (undocumented)
 export interface IBaseDataPoint {
     callOutAccessibilityData?: IAccessibilityProps;
@@ -589,6 +596,30 @@ export interface IDataPoint {
     y: number;
 }
 
+// @public
+export interface IDataPointV2<X extends string | number | Date, Y extends string | number | Date> {
+    callOutAccessibilityData?: IAccessibilityProps;
+    color?: string;
+    markerSize?: number;
+    onClick?: () => void;
+    text?: string;
+    x: X;
+    xAxisCalloutData?: string;
+    y: Y;
+    yAxisCalloutData?: string;
+}
+
+// @public
+export interface IDataSeries {
+    color?: string;
+    gradient?: [string, string];
+    legend: string;
+    legendShape?: LegendShape;
+    onLegendClick?: (selectedLegend: string | null | string[]) => void;
+    opacity?: number;
+    useSecondaryYScale?: boolean;
+}
+
 // @public (undocumented)
 export interface IDeclarativeChart {
     // (undocumented)
@@ -809,7 +840,8 @@ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps {
     barwidth?: number | 'default' | 'auto';
     chartTitle?: string;
     culture?: string;
-    data: IGroupedVerticalBarChartData[];
+    data?: IGroupedVerticalBarChartData[];
+    dataV2?: (IBarSeries<string, number> | ILineSeries<string, number>)[];
     enableGradient?: boolean;
     hideLabels?: boolean;
     isCalloutForStack?: boolean;
@@ -845,7 +877,7 @@ export interface IGroupedVerticalBarChartStyles extends ICartesianChartStyles {
 // @public (undocumented)
 export interface IGVBarChartSeriesPoint {
     callOutAccessibilityData?: IAccessibilityProps;
-    color: string;
+    color?: string;
     data: number;
     gradient?: [string, string];
     key: string;
@@ -1233,6 +1265,16 @@ export interface ILineDataInVerticalStackedBarChart {
     yAxisCalloutData?: string;
 }
 
+// @public
+export interface ILineSeries<X extends string | number | Date, Y extends string | number | Date> extends IDataSeries {
+    data: IDataPointV2<X, Y>[];
+    gaps?: ILineChartGap[];
+    hideInactiveDots?: boolean;
+    lineOptions?: ILineChartLineOptions;
+    onLineClick?: () => void;
+    type: 'line';
+}
+
 // @public (undocumented)
 export interface IMargins {
     bottom?: number;

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -67,7 +67,6 @@ const ResponsiveGanttChart = withResponsiveContainer(GanttChart);
 
 // Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.
 const DEFAULT_XAXIS = 'x';
-const FALLBACK_TYPE = 'fallback';
 
 /**
  * DeclarativeChart schema.
@@ -499,9 +498,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
 
           const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace.index));
           let chartType =
-            validTracesFilteredIndex.some(trace => trace.type === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE
-              ? FALLBACK_TYPE
-              : filteredTracesInfo[0].type;
+            chart.type === 'fallback' || chart.type === 'groupedverticalbar' ? chart.type : filteredTracesInfo[0].type;
 
           if (
             validTracesFilteredIndex.some(trace => trace.type === 'line') &&