feat(react-charts): Add annotations support for HorizontalBarChartWithAxis

change/@fluentui-react-charts-ba6555b4-a348-4c94-ab7a-318f276a9bd8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add annotations support for HorizontalBarChartWithAxis via DeclarativeChart",
+  "packageName": "@fluentui/react-charts",
+  "email": "srmukher@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -2276,6 +2276,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
   const gapFactor = 1 / (1 + scalingFactor * numberOfRows);
   const barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
 
+  const annotations = getChartAnnotationsFromLayout(input.data, input.layout, isMultiPlot);
+
   return {
     data: chartData,
     secondaryYAxistitle:
@@ -2297,6 +2299,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
     ...getAxisCategoryOrderProps(input.data, input.layout),
     ...getBarProps(input.data, input.layout, true),
     ...getAxisTickProps(input.data, input.layout),
+    ...(annotations ? { annotations } : {}),
   };
 };
 

packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapterUT.test.tsx

@@ -390,6 +390,20 @@ describe('transform Plotly Json To chart Props', () => {
     ).toMatchSnapshot();
   });
 
+  test('transformPlotlyJsonToHorizontalBarWithAxisProps - Should return HBC with annotations', () => {
+    const plotlySchema = require('./tests/schema/fluent_hbcwa_annotations_test.json');
+    const result = transformPlotlyJsonToHorizontalBarWithAxisProps(
+      plotlySchema,
+      false,
+      { current: colorMap },
+      'default',
+      true,
+    );
+    expect(result.annotations).toBeDefined();
+    expect(result.annotations).toHaveLength(3);
+    expect(result).toMatchSnapshot();
+  });
+
   test('transformPlotlyJsonToHorizontalBarWithAxisProps - Should throw an error when we pass invalid data', () => {
     const plotlySchema = require('./tests/schema/fluent_nesteddata_test.json');
     expect(() => {

packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap

@@ -2895,6 +2895,123 @@ Object {
 }
 `;
 
+exports[`transform Plotly Json To chart Props transformPlotlyJsonToHorizontalBarWithAxisProps - Should return HBC with annotations 1`] = `
+Object {
+  "annotations": Array [
+    Object {
+      "connector": Object {
+        "arrow": "end",
+        "strokeColor": "#107c10",
+        "strokeWidth": 2,
+      },
+      "coordinates": Object {
+        "type": "data",
+        "x": 200,
+        "y": "Product D",
+      },
+      "id": "annotation-0-top-seller",
+      "layout": Object {
+        "clipToBounds": true,
+        "offsetX": 40,
+      },
+      "style": Object {
+        "backgroundColor": "#dff6dd",
+        "borderColor": "#107c10",
+        "fontSize": "12px",
+        "textColor": "#107c10",
+      },
+      "text": "Top Seller",
+    },
+    Object {
+      "coordinates": Object {
+        "type": "relative",
+        "x": 0.95,
+        "y": 0.050000000000000044,
+      },
+      "id": "annotation-1-growth-target",
+      "style": Object {
+        "backgroundColor": "#fff4ce",
+        "borderColor": "#ffc83d",
+        "fontSize": "10px",
+        "textColor": "#8a6d00",
+      },
+      "text": "Growth Target",
+    },
+    Object {
+      "connector": Object {
+        "arrow": "end",
+        "strokeColor": "#d13438",
+      },
+      "coordinates": Object {
+        "type": "data",
+        "x": 120,
+        "y": "Product A",
+      },
+      "id": "annotation-2-needs-improvement",
+      "layout": Object {
+        "clipToBounds": true,
+        "offsetX": -50,
+      },
+      "style": Object {
+        "backgroundColor": "#fde7e9",
+        "borderColor": "#d13438",
+        "fontSize": "11px",
+        "textColor": "#d13438",
+      },
+      "text": "Needs Improvement",
+    },
+  ],
+  "barHeight": 50.98039215686275,
+  "chartTitle": "Sales by Product with Annotations",
+  "data": Array [
+    Object {
+      "color": "#0078d4ff",
+      "legend": "",
+      "x": 120,
+      "y": "Product A",
+    },
+    Object {
+      "color": "#00bcf2ff",
+      "legend": "",
+      "x": 150,
+      "y": "Product B",
+    },
+    Object {
+      "color": "#00b294ff",
+      "legend": "",
+      "x": 180,
+      "y": "Product C",
+    },
+    Object {
+      "color": "#ffc83dff",
+      "legend": "",
+      "x": 200,
+      "y": "Product D",
+    },
+  ],
+  "height": 400,
+  "hideLegend": true,
+  "hideTickOverlap": true,
+  "noOfCharsToTruncate": 20,
+  "roundCorners": true,
+  "roundedTicks": true,
+  "secondaryYAxistitle": "",
+  "showYAxisLables": true,
+  "showYAxisLablesTooltip": true,
+  "width": 700,
+  "xAxisAnnotation": "Sales by Product with Annotations",
+  "xAxisCategoryOrder": "data",
+  "xAxisTitle": "Sales ($K)",
+  "yAxisCategoryOrder": Array [
+    "Product A",
+    "Product B",
+    "Product C",
+    "Product D",
+  ],
+  "yAxisTitle": "Product",
+}
+`;
+
 exports[`transform Plotly Json To chart Props transformPlotlyJsonToHorizontalBarWithAxisProps - Should return HBC with axis chart props 1`] = `
 Object {
   "barHeight": 12.662117371807371,

packages/charts/react-charts/library/src/components/DeclarativeChart/tests/schema/fluent_hbcwa_annotations_test.json

@@ -0,0 +1,61 @@
+{
+  "visualizer": "plotly",
+  "data": [
+    {
+      "type": "bar",
+      "orientation": "h",
+      "x": [120, 150, 180, 200],
+      "y": ["Product A", "Product B", "Product C", "Product D"],
+      "marker": {
+        "color": ["#0078d4", "#00bcf2", "#00b294", "#ffc83d"]
+      }
+    }
+  ],
+  "layout": {
+    "title": "Sales by Product with Annotations",
+    "width": 700,
+    "height": 400,
+    "xaxis": { "title": "Sales ($K)" },
+    "yaxis": { "title": "Product" },
+    "annotations": [
+      {
+        "text": "Top Seller",
+        "x": 200,
+        "y": "Product D",
+        "showarrow": true,
+        "arrowhead": 2,
+        "arrowcolor": "#107c10",
+        "arrowwidth": 2,
+        "ax": 40,
+        "ay": 0,
+        "bgcolor": "#dff6dd",
+        "bordercolor": "#107c10",
+        "font": { "color": "#107c10", "size": 12 }
+      },
+      {
+        "text": "Growth Target",
+        "xref": "paper",
+        "yref": "paper",
+        "x": 0.95,
+        "y": 0.95,
+        "showarrow": false,
+        "bgcolor": "#fff4ce",
+        "bordercolor": "#ffc83d",
+        "font": { "color": "#8a6d00", "size": 10 }
+      },
+      {
+        "text": "Needs Improvement",
+        "x": 120,
+        "y": "Product A",
+        "showarrow": true,
+        "arrowhead": 2,
+        "arrowcolor": "#d13438",
+        "ax": -50,
+        "ay": 0,
+        "bgcolor": "#fde7e9",
+        "bordercolor": "#d13438",
+        "font": { "color": "#d13438", "size": 11 }
+      }
+    ]
+  }
+}