Declarative chart bug fixes (#33426)

microsoft · Dec 12, 2024 · 97bb4b6 · 97bb4b6
1 parent 2332070
commit 97bb4b6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/change/@fluentui-react-charting-7f407eb6-bf88-4892-86f6-de3a18736f8b.json b/change/@fluentui-react-charting-7f407eb6-bf88-4892-86f6-de3a18736f8b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Declarative chart bug fixes",
+  "packageName": "@fluentui/react-charting",
+  "email": "74965306+Anush2303@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -331,12 +331,13 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
     })
     .flat();
 
-  const chartHeight = layout.height || 350;
+  const chartHeight = layout.height || 450;
   const margin = layout.margin?.l || 0;
   const padding = layout.margin?.pad || 0;
   const availableHeight = chartHeight - margin - padding;
   const numberOfBars = data[0].y.length;
-  const gapFactor = 0.5;
+  const scalingFactor = 0.01;
+  const gapFactor = 1 / (1 + scalingFactor * numberOfBars);
   const barHeight = availableHeight / (numberOfBars * (1 + gapFactor));
 
   return {
@@ -381,8 +382,10 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
   };
 
   // Convert normalized values to actual values
-  const domainValuesForColorScale: number[] = firstData.colorscale?.map((arr: any) => arr[0] * (zMax - zMin) + zMin);
-  const rangeValuesForColorScale: string[] = firstData.colorscale?.map((arr: any) => arr[1]);
+  const domainValuesForColorScale: number[] = firstData.colorscale
+    ? firstData.colorscale.map((arr: any) => arr[0] * (zMax - zMin) + zMin)
+    : [];
+  const rangeValuesForColorScale: string[] = firstData.colorscale ? firstData.colorscale.map((arr: any) => arr[1]) : [];
 
   return {
     data: [heatmapData],
@@ -407,7 +410,8 @@ export const transformPlotlyJsonToSankeyProps = (
     }))
     // eslint-disable-next-line @typescript-eslint/no-shadow
     //@ts-expect-error Dynamic link object. Ignore for now.
-    .filter(x => x.source !== x.target); // Filter out self-references (circular links)
+    // Filter out negative nodes, unequal nodes and self-references (circular links)
+    .filter(x => x.source > 0 && x.target > 0 && x.source !== x.target);
 
   const sankeyChartData = {
     nodes: node.label.map((label: string, index: number) => {

diff --git a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -1192,7 +1192,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           () => `translate(${this._xAxisScale(pointToHighlight.x)}, ${this._yAxisScale(pointToHighlight.y)})`,
         )
         .attr('visibility', 'visibility')
-        .attr('y2', `${lineHeight - this._yAxisScale(pointToHighlight.y)}`);
+        .attr('y2', `${lineHeight - 5 - this._yAxisScale(pointToHighlight.y)}`);
 
       this.setState({
         nearestCircleToHighlight: pointToHighlight,
@@ -1278,7 +1278,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       d3Select(`#${this._verticalLine}`)
         .attr('transform', () => `translate(${_this._xAxisScale(x)}, ${_this._yAxisScale(y)})`)
         .attr('visibility', 'visibility')
-        .attr('y2', `${lineHeight - _this._yAxisScale(y)}`);
+        .attr('y2', `${lineHeight - 5 - _this._yAxisScale(y)}`);
       if (this._uniqueCallOutID !== circleId) {
         this._uniqueCallOutID = circleId;
         this.setState({