adding lines in vertical stacked bar chart complex combo chart (#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]>
microsoft · Oct 31, 2020 · 33e5b93 · 33e5b93
1 parent 0033f85
commit 33e5b93
Show file tree

Hide file tree

Showing 9 changed files with 668 additions and 73 deletions.
diff --git a/...ui-react-examples-2020-10-16-19-34-37-user-v-sivsar-addingLinesInVerticalStackedbarr.json b/...ui-react-examples-2020-10-16-19-34-37-user-v-sivsar-addingLinesInVerticalStackedbarr.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "modified the example code as per the changes",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T14:04:37.924Z"
+}
diff --git a/...uifabric-charting-2020-10-16-19-34-37-user-v-sivsar-addingLinesInVerticalStackedbarr.json b/...uifabric-charting-2020-10-16-19-34-37-user-v-sivsar-addingLinesInVerticalStackedbarr.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "added the new feature, which is complex combo chart, where we give ability to the user to draw lines in the vertical stacked bar chart",
+  "packageName": "@uifabric/charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-16T14:04:22.573Z"
+}
diff --git a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -297,10 +297,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/charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -307,6 +307,7 @@ export interface IYValueHover {
   y?: number;
   color?: string;
   data?: string | number;
+  shouldDrawBorderBottom?: boolean;
   yAxisCalloutData?: string | { [id: string]: number };
 }