feat(react-charts): Stacked HBC And Negative X value support

change/@fluentui-react-charts-51a0e8da-4489-49c2-a76b-c81c283c0cd4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "implement stacked hbc with axis and support for negative x values",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1035,6 +1035,7 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
     // (undocumented)
     getAxisData?: any;
     getDomainMargins?: (containerWidth: number) => Margins;
+    getDomainNRangeValues?: (points: HorizontalBarChartWithAxisDataPoint[], margins: Margins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
     getGraphData?: any;
     getmargins?: (margins: Margins) => void;
     getMinMaxOfYAxis?: (points: DataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx

@@ -217,18 +217,31 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
   if ((props.enableFirstRenderOptimization && chartContainer.current) || !props.enableFirstRenderOptimization) {
     _isFirstRender.current = false;
     const XAxisParams = {
-      domainNRangeValues: getDomainNRangeValues(
-        points,
-        props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins,
-        containerWidth,
-        chartType,
-        _useRtl,
-        props.xAxisType,
-        props.barwidth!,
-        props.tickValues!,
-        // This is only used for Horizontal Bar Chart with Axis for y as string axis
-        startFromX,
-      ),
+      domainNRangeValues: props.getDomainNRangeValues
+        ? props.getDomainNRangeValues(
+            points,
+            props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins,
+            containerWidth,
+            chartType,
+            _useRtl,
+            props.xAxisType,
+            props.barwidth!,
+            props.tickValues!,
+            // This is only used for Horizontal Bar Chart with Axis for y as string axis
+            startFromX,
+          )
+        : getDomainNRangeValues(
+            points,
+            props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins,
+            containerWidth,
+            chartType,
+            _useRtl,
+            props.xAxisType,
+            props.barwidth!,
+            props.tickValues!,
+            // This is only used for Horizontal Bar Chart with Axis for y as string axis
+            startFromX,
+          ),
       containerHeight: containerHeight - removalValueForTextTuncate!,
       margins: margins,
       xAxisElement: xAxisElement.current!,

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { LegendsProps } from '../Legends/index';
-import { AccessibilityProps, Chart, Margins, DataPoint } from '../../types/index';
-import { ChartTypes, XAxisTypes, YAxisType } from '../../utilities/index';
+import { AccessibilityProps, Chart, Margins, DataPoint, HorizontalBarChartWithAxisDataPoint } from '../../types/index';
+import { ChartTypes, XAxisTypes, YAxisType, IDomainNRange } from '../../utilities/index';
 import { TimeLocaleDefinition } from 'd3-time-format';
 import { ChartPopoverProps } from './ChartPopover.types';
 /**
@@ -585,4 +585,19 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
     yAxisType: YAxisType | undefined,
     useSecondaryYScale?: boolean,
   ) => { startValue: number; endValue: number };
+
+  /**Add commentMore actions
+   * Get the domain and range values
+   */
+  getDomainNRangeValues?: (
+    points: HorizontalBarChartWithAxisDataPoint[],
+    margins: Margins,
+    width: number,
+    chartType: ChartTypes,
+    isRTL: boolean,
+    xAxisType: XAxisTypes,
+    barWidth: number,
+    tickValues: Date[] | number[] | string[] | undefined,
+    shiftX: number,
+  ) => IDomainNRange;
 }

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

@@ -522,11 +522,12 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
   const chartData: HorizontalBarChartWithAxisDataPoint[] = input.data
     .map((series: PlotData, index: number) => {
       return (series.y as Datum[]).map((yValue: string, i: number) => {
-        const color = getColor(yValue, colorMap, isDarkTheme);
+        const legendName = series.name ?? yValue;
+        const color = getColor(legendName, colorMap, isDarkTheme);
         return {
           x: series.x[i],
           y: yValue,
-          legend: yValue,
+          legend: legendName,
           color,
         } as HorizontalBarChartWithAxisDataPoint;
       });

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

@@ -372,12 +372,12 @@ Object {
   "minValue": undefined,
   "segments": Array [
     Object {
-      "color": "#c19c00",
+      "color": "#57811b",
       "legend": "Segment 1",
       "size": 250,
     },
     Object {
-      "color": "#c8d1fa",
+      "color": "#b146c2",
       "legend": "Segment 2",
       "size": 150,
     },
@@ -2841,140 +2841,140 @@ Object {
   "chartTitle": "PHP Framework Popularity at Work - SitePoint, 2015",
   "data": Array [
     Object {
-      "color": "#4f6bed",
-      "legend": "Aura",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 10,
       "y": "Aura",
     },
     Object {
-      "color": "#d0b232",
-      "legend": "Drupal",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 11,
       "y": "Drupal",
     },
     Object {
-      "color": "#c36bd1",
-      "legend": "TYPO3 Flow",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 17,
       "y": "TYPO3 Flow",
     },
     Object {
-      "color": "#73aa24",
-      "legend": "FuelPHP",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 25,
       "y": "FuelPHP",
     },
     Object {
-      "color": "#d77440",
-      "legend": "Kohana",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 35,
       "y": "Kohana",
     },
     Object {
-      "color": "#4fa1e1",
-      "legend": "Typo 3",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 35,
       "y": "Typo 3",
     },
     Object {
-      "color": "#27ac22",
-      "legend": "Simple MVC Framework",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 42,
       "y": "Simple MVC Framework",
     },
     Object {
-      "color": "#a083c9",
-      "legend": "Silex",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 65,
       "y": "Silex",
     },
     Object {
-      "color": "#4cb4b7",
-      "legend": "Slim",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 79,
       "y": "Slim",
     },
     Object {
-      "color": "#ee5fb7",
-      "legend": "Phalcon",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 169,
       "y": "Phalcon",
     },
     Object {
-      "color": "#93a4f4",
-      "legend": "We use a CMS for everything",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 203,
       "y": "We use a CMS for everything",
     },
     Object {
-      "color": "#ae8c00",
-      "legend": "No Framework",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 243,
       "y": "No Framework",
     },
     Object {
-      "color": "#b146c2",
-      "legend": "CakePHP",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 255,
       "y": "CakePHP",
     },
     Object {
-      "color": "#57811b",
-      "legend": "Zend Framework 1",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 274,
       "y": "Zend Framework 1",
     },
     Object {
-      "color": "#ca5010",
-      "legend": "Company Internal Framework",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 378,
       "y": "Company Internal Framework",
     },
     Object {
-      "color": "#3a96dd",
-      "legend": "Zend Framework 2",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 390,
       "y": "Zend Framework 2",
     },
     Object {
-      "color": "#13a10e",
-      "legend": "Yii 1",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 407,
       "y": "Yii 1",
     },
     Object {
-      "color": "#9373c0",
-      "legend": "PHPixie",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 418,
       "y": "PHPixie",
     },
     Object {
-      "color": "#2aa0a4",
-      "legend": "Yii 2",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 504,
       "y": "Yii 2",
     },
     Object {
-      "color": "#e3008c",
-      "legend": "CodeIgniter",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 597,
       "y": "CodeIgniter",
     },
     Object {
-      "color": "#637cef",
-      "legend": "Nette",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 671,
       "y": "Nette",
     },
     Object {
-      "color": "#dac157",
-      "legend": "Symfony2",
+      "color": "#cf87da",
+      "legend": "Votes",
       "x": 1067,
       "y": "Symfony2",
     },
     Object {
       "color": "#cf87da",
-      "legend": "Laravel",
+      "legend": "Votes",
       "x": 1659,
       "y": "Laravel",
     },
@@ -3072,42 +3072,42 @@ Object {
       ],
       "nodes": Array [
         Object {
-          "color": "#ea38a6",
+          "color": "#dac157",
           "name": "Remain+No – 28",
           "nodeId": 0,
         },
         Object {
-          "color": "#038387",
+          "color": "#637cef",
           "name": "Leave+No – 16",
           "nodeId": 1,
         },
         Object {
-          "color": "#8764b8",
+          "color": "#e3008c",
           "name": "Remain+Yes – 21",
           "nodeId": 2,
         },
         Object {
-          "color": "#11910d",
+          "color": "#2aa0a4",
           "name": "Leave+Yes – 14",
           "nodeId": 3,
         },
         Object {
-          "color": "#3487c7",
+          "color": "#9373c0",
           "name": "Didn’t vote in at least one referendum – 21",
           "nodeId": 4,
         },
         Object {
-          "color": "#d06228",
+          "color": "#13a10e",
           "name": "46 – No",
           "nodeId": 5,
         },
         Object {
-          "color": "#689920",
+          "color": "#3a96dd",
           "name": "39 – Yes",
           "nodeId": 6,
         },
         Object {
-          "color": "#ba58c9",
+          "color": "#ca5010",
           "name": "14 – Don’t know / would not vote",
           "nodeId": 7,
         },