feat(declarative-chart): Support for Dashed and Dotted lines (#33694)

microsoft · Jan 22, 2025 · 82ef8b9 · 82ef8b9
1 parent 58fb29e
commit 82ef8b9
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 4 deletions.
diff --git a/change/@fluentui-react-charting-5f3118c9-244c-41d1-8067-bca1566ec9bd.json b/change/@fluentui-react-charting-5f3118c9-244c-41d1-8067-bca1566ec9bd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Support for dashed and dotted line in Declarative chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md
@@ -1042,6 +1042,7 @@ export interface ILineDataInVerticalStackedBarChart {
     data?: number;
     // (undocumented)
     legend: string;
+    lineOptions?: ILineChartLineOptions;
     useSecondaryYScale?: boolean;
     // (undocumented)
     y: number;

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
@@ -5,7 +5,6 @@ import { IRefObject } from '@fluentui/react/lib/Utilities';
 import { DonutChart } from '../DonutChart/index';
 import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
 import { PlotData, PlotlySchema } from './PlotlySchema';
-//import type { Data, Layout } from './PlotlySchema';
 import {
   isArrayOrTypedArray,
   isDateArray,

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -39,6 +39,44 @@ interface ISecondaryYAxisValues {
 }
 
 const SUPPORTED_PLOT_TYPES = ['pie', 'bar', 'scatter', 'heatmap', 'sankey', 'indicator', 'histogram'];
+const dashOptions = {
+  dot: {
+    strokeDasharray: '1, 5',
+    strokeLinecap: 'round',
+    strokeWidth: '2',
+    lineBorderWidth: '4',
+  },
+  dash: {
+    strokeDasharray: '5, 5',
+    strokeLinecap: 'butt',
+    strokeWidth: '2',
+    lineBorderWidth: '4',
+  },
+  longdash: {
+    strokeDasharray: '10, 5',
+    strokeLinecap: 'butt',
+    strokeWidth: '2',
+    lineBorderWidth: '4',
+  },
+  dashdot: {
+    strokeDasharray: '5, 5, 1, 5',
+    strokeLinecap: 'butt',
+    strokeWidth: '2',
+    lineBorderWidth: '4',
+  },
+  longdashdot: {
+    strokeDasharray: '10, 5, 1, 5',
+    strokeLinecap: 'butt',
+    strokeWidth: '2',
+    lineBorderWidth: '4',
+  },
+  solid: {
+    strokeDasharray: '0',
+    strokeLinecap: 'butt',
+    strokeWidth: '2',
+    lineBorderWidth: '4',
+  },
+} as const;
 const isDate = (value: any): boolean => {
   const parsedDate = new Date(Date.parse(value));
   if (isNaN(parsedDate.getTime())) {
@@ -284,6 +322,9 @@ export const transformPlotlyJsonToVSBCProps = (
         const color = getColor(legend, colorMap, isDarkTheme);
         mapXToDataPoints[x].lineData!.push({
           legend,
+          ...(series.line?.dash && dashOptions[series.line.dash]
+            ? { lineOptions: { ...dashOptions[series.line.dash] } }
+            : {}),
           y: yVal,
           color,
         });
@@ -473,6 +514,9 @@ export const transformPlotlyJsonToScatterChartProps = (
 
     return {
       legend,
+      ...(series.line?.dash && dashOptions[series.line.dash]
+        ? { lineOptions: { ...dashOptions[series.line.dash] } }
+        : {}),
       data: xValues.map((x, i: number) => ({
         x: isString ? (isXDate ? new Date(x as string) : isXNumber ? parseFloat(x as string) : x) : x,
         y: series.y[i],
@@ -592,7 +636,7 @@ export const transformPlotlyJsonToHeatmapProps = (input: PlotlySchema): IHeatMap
   };
 
   // Initialize domain and range to default values
-  const defaultDomain = [zMin, zMax];
+  const defaultDomain = [zMin, (zMax + zMin) / 2, zMax];
   const defaultRange = [
     getColorFromToken(DataVizPalette.color1),
     getColorFromToken(DataVizPalette.color2),

diff --git a/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -441,8 +441,9 @@ export class VerticalStackedBarChartBase
             x2={x2}
             y2={y2}
             opacity={shouldHighlight ? 1 : 0.1}
-            strokeWidth={3}
-            strokeLinecap="round"
+            strokeWidth={lineObject[item][0].lineOptions?.strokeWidth ?? 3}
+            strokeLinecap={lineObject[item][0].lineOptions?.strokeLinecap ?? 'round'}
+            strokeDasharray={lineObject[item][0].lineOptions?.strokeDasharray}
             stroke={lineObject[item][i].color}
             transform={`translate(${xScaleBandwidthTranslate}, 0)`}
             {...(this._isLegendHighlighted(item) && {

diff --git a/packages/charts/react-charting/src/types/IDataPoint.ts b/packages/charts/react-charting/src/types/IDataPoint.ts
@@ -650,6 +650,10 @@ export interface ILineDataInVerticalStackedBarChart {
    * False by default.
    */
   useSecondaryYScale?: boolean;
+  /**
+   * options for the line drawn
+   */
+  lineOptions?: ILineChartLineOptions;
 }
 
 /**