Support single point in area chart (#25842)

* Allow single point in area chart * Add change file * Fix lint issue * Add tests for area chart single point
microsoft · Nov 30, 2022 · a5ea64c · a5ea64c
1 parent c46ff8d
commit a5ea64c
Show file tree

Hide file tree

Showing 4 changed files with 386 additions and 10 deletions.
diff --git a/change/@fluentui-react-charting-806735ad-55f4-4170-a545-c3c5a84e8701.json b/change/@fluentui-react-charting-806735ad-55f4-4170-a545-c3c5a84e8701.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Support single point in area chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -576,16 +576,33 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
             onMouseOver={this._onRectMouseMove}
             {...points[index]!.lineOptions}
           />
-          <path
-            id={`${index}-graph-${this._uniqueIdForGraph}`}
-            d={area(singleStackedData)!}
-            fill={this._colors[index]}
-            opacity={this._opacity[index]}
-            fillOpacity={this._getOpacity(points[index]!.legend)}
-            onMouseMove={this._onRectMouseMove}
-            onMouseOut={this._onRectMouseOut}
-            onMouseOver={this._onRectMouseMove}
-          />
+          {singleStackedData.length === 1 ? (
+            <circle
+              id={`${index}-graph-${this._uniqueIdForGraph}`}
+              cx={xScale(singleStackedData[0].xVal)}
+              cy={yScale(singleStackedData[0].values[1])}
+              r={6}
+              stroke={this._colors[index]}
+              strokeWidth={3}
+              fill={this._colors[index]}
+              opacity={this._opacity[index]}
+              fillOpacity={this._getOpacity(points[index]!.legend)}
+              onMouseMove={this._onRectMouseMove}
+              onMouseOut={this._onRectMouseOut}
+              onMouseOver={this._onRectMouseMove}
+            />
+          ) : (
+            <path
+              id={`${index}-graph-${this._uniqueIdForGraph}`}
+              d={area(singleStackedData)!}
+              fill={this._colors[index]}
+              opacity={this._opacity[index]}
+              fillOpacity={this._getOpacity(points[index]!.legend)}
+              onMouseMove={this._onRectMouseMove}
+              onMouseOut={this._onRectMouseOut}
+              onMouseOver={this._onRectMouseMove}
+            />
+          )}
         </React.Fragment>,
       );
     });

diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
@@ -44,6 +44,18 @@ const chartPoints = {
   lineChartData: points,
 };
 
+const singlePoint = [
+  {
+    legend: 'metaData1',
+    data: [{ x: 20, y: 50 }],
+    color: 'red',
+  },
+];
+const singleChartPoint = {
+  chartTitle: 'AreaChart',
+  lineChartData: singlePoint,
+};
+
 describe('AreaChart snapShot testing', () => {
   it('renders Areachart correctly', () => {
     const component = renderer.create(<AreaChart data={chartPoints} />);
@@ -86,6 +98,12 @@ describe('AreaChart snapShot testing', () => {
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('renders Areachart with single point correctly', () => {
+    const component = renderer.create(<AreaChart data={singleChartPoint} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 describe('AreaChart - basic props', () => {