feat(react-charting): Adding Annotation only chart (#35390)

Author: srmukher

change/@fluentui-chart-utilities-0f9ecaff-f43c-448a-b277-bf0e182f927a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat(chart-utilities): Adding annotation only chart",
+  "packageName": "@fluentui/chart-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-d966433c-6e51-4e69-a1b6-096f00512a55.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat(react-charting): Adding annotation only chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -387,7 +387,7 @@ export interface ErrorOptions {
 }
 
 // @public (undocumented)
-export type FluentChart = 'area' | 'composite' | 'donut' | 'fallback' | 'gauge' | 'groupedverticalbar' | 'heatmap' | 'horizontalbar' | 'line' | 'scatter' | 'scatterpolar' | 'sankey' | 'table' | 'verticalstackedbar' | 'gantt';
+export type FluentChart = 'annotation' | 'area' | 'composite' | 'donut' | 'fallback' | 'gauge' | 'groupedverticalbar' | 'heatmap' | 'horizontalbar' | 'line' | 'scatter' | 'scatterpolar' | 'sankey' | 'table' | 'verticalstackedbar' | 'gantt';
 
 // @public (undocumented)
 export interface Font {

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

@@ -2,6 +2,7 @@ import type { Datum, TypedArray, PlotData, PlotlySchema, Data, Layout, SankeyDat
 import { decodeBase64Fields } from './DecodeBase64Data';
 
 export type FluentChart =
+  | 'annotation'
   | 'area'
   | 'composite'
   | 'donut'
@@ -201,6 +202,16 @@ export function isArrayOrTypedArray(a: any): boolean {
   return Array.isArray(a) || isTypedArray(a);
 }
 
+type PlotlyAnnotations = PlotlySchema extends { layout?: { annotations?: infer T } } ? T : unknown;
+
+const hasAnnotationContent = (annotations: PlotlyAnnotations | undefined): boolean => {
+  if (!annotations) {
+    return false;
+  }
+
+  return !isArrayOrTypedArray(annotations) || (annotations as { length: number }).length > 0;
+};
+
 export const getValidSchema = (input: any): PlotlySchema => {
   try {
     const validatedSchema = input as PlotlySchema;
@@ -210,10 +221,24 @@ export const getValidSchema = (input: any): PlotlySchema => {
     if (typeof validatedSchema !== 'object') {
       throw new Error(`Plotly input is not an object. Input type: ${typeof validatedSchema}`);
     }
+    const hasAnnotations = hasAnnotationContent(validatedSchema?.layout?.annotations);
+
     if (!isArrayOrTypedArray(validatedSchema.data)) {
+      if (hasAnnotations) {
+        return {
+          ...validatedSchema,
+          data: [],
+        };
+      }
       throw new Error('Plotly input data is not a valid array or typed array');
     }
     if (validatedSchema.data.length === 0) {
+      if (hasAnnotations) {
+        return {
+          ...validatedSchema,
+          data: [],
+        };
+      }
       throw new Error('Plotly input data is empty');
     }
     return validatedSchema;
@@ -465,7 +490,14 @@ export const mapFluentChart = (input: any): OutputChartType => {
       return { isValid: false, errorMessage: `Failed to decode plotly schema: ${error}` };
     }
 
-    const validTraces = getValidTraces(validSchema.data, validSchema.layout);
+    const hasAnnotations = hasAnnotationContent(validSchema?.layout?.annotations);
+    const hasTraces = isArrayOrTypedArray(validSchema.data) && validSchema.data.length > 0;
+
+    const validTraces = hasTraces ? getValidTraces(validSchema.data, validSchema.layout) : [];
+
+    if (!hasTraces && hasAnnotations) {
+      return { isValid: true, type: 'annotation', validTracesInfo: [] };
+    }
     let foundScatterGantt = false;
     let mappedTraces = validTraces.map(trace => {
       const traceIndex = trace[0];

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

@@ -22,13 +22,17 @@ import { IStyleFunctionOrObject as IStyleFunctionOrObject_2 } from '@fluentui/re
 import { ITheme } from '@fluentui/react/lib/Styling';
 import { ITheme as ITheme_2 } from '@fluentui/react';
 import type { JSXElement } from '@fluentui/utilities';
+import type { Margin } from '@fluentui/chart-utilities';
 import * as React_2 from 'react';
 import { SankeyLink } from 'd3-sankey';
 import { SankeyNode } from 'd3-sankey';
 import { ScaleBand } from 'd3-scale';
 import { ScaleLinear } from 'd3-scale';
 import { TimeLocaleDefinition } from 'd3-time-format';
 
+// @public (undocumented)
+export const AnnotationOnlyChart: React_2.FC<IAnnotationOnlyChartProps>;
+
 // @public
 export const AreaChart: React_2.FunctionComponent<IAreaChartProps>;
 
@@ -114,6 +118,7 @@ export interface ChartAnnotationStyleProps {
     fontWeight?: React_2.CSSProperties['fontWeight'];
     opacity?: number;
     padding?: string;
+    rotation?: number;
     textColor?: string;
 }
 
@@ -289,6 +294,21 @@ export interface IAccessibilityProps {
     ariaLabelledBy?: string;
 }
 
+// @public
+export interface IAnnotationOnlyChartProps {
+    annotations: ChartAnnotation[];
+    chartTitle?: string;
+    componentRef?: React_2.RefObject<IChart>;
+    description?: string;
+    fontColor?: string;
+    fontFamily?: string;
+    height?: number;
+    margin?: Partial<Margin>;
+    paperBackgroundColor?: string;
+    plotBackgroundColor?: string;
+    width?: number;
+}
+
 // @public
 export interface IAreaChartProps extends ICartesianChartProps {
     culture?: string;

packages/charts/react-charting/src/AnnotationOnlyChart.ts

@@ -0,0 +1 @@
+export * from './components/AnnotationOnlyChart/index';