adding lines in vertical stacked bar chart complex combo chart (micro…

…soft#15551) * adding lines in the vertical stacked bar chart * Change files * fix build errors * fix build erros * when only the line is highlighted we should show callout to that * fix build issues * making the callout sort according to the rects * updating snapshots Co-authored-by: v-sivsar <[email protected]>
kubkon · Jan 26, 2021 · f1e7546 · f1e7546
1 parent 010502c
commit f1e7546
Show file tree

Hide file tree

Showing 8 changed files with 661 additions and 73 deletions.
diff --git a/change/@fluentui-react-charting-2021-01-26-15-36-41-cherry-15551.json b/change/@fluentui-react-charting-2021-01-26-15-36-41-cherry-15551.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "adding lines in vertical stacked bar chart complex combo chart (#15551)",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2021-01-26T14:36:41.431Z"
+}
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -298,10 +298,26 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
           {calloutProps!.YValueHover &&
             calloutProps!.YValueHover.map((yValue: IYValueHover, index: number, yValues: IYValueHover[]) => {
               const isLast: boolean = index + 1 === yValues.length;
+              const { shouldDrawBorderBottom = false } = yValue;
               return (
                 <div
                   key={`callout-content-${index}`}
-                  style={yValueHoverSubCountsExists ? { display: 'inline-block' } : {}}
+                  style={
+                    yValueHoverSubCountsExists
+                      ? {
+                          display: 'inline-block',
+                          ...(shouldDrawBorderBottom && {
+                            borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,
+                            paddingBottom: '10px',
+                          }),
+                        }
+                      : {
+                          ...(shouldDrawBorderBottom && {
+                            borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,
+                            paddingBottom: '10px',
+                          }),
+                        }
+                  }
                 >
                   {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}
                 </div>

diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -308,6 +308,7 @@ export interface IYValueHover {
   y?: number;
   color?: string;
   data?: string | number;
+  shouldDrawBorderBottom?: boolean;
   yAxisCalloutData?: string | { [id: string]: number };
 }