diff --git a/change/@fluentui-react-charting-5f3118c9-244c-41d1-8067-bca1566ec9bd.json b/change/@fluentui-react-charting-5f3118c9-244c-41d1-8067-bca1566ec9bd.json new file mode 100644 index 0000000000000..62e2f67fdb0cb --- /dev/null +++ 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": "74965306+Anush2303@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index 207610b95c35a..8d333966eb58c 100644 --- 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 index c84024a8684b7..fc6dcf1dbd405 100644 --- 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 index 728bc2cf4f1b3..b0ee50789c429 100644 --- 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/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 7b897388bb920..5f2e25f9ac374 100644 --- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/charts/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 index dda593a408f4f..5ca0f1393677e 100644 --- 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; } /**