Charting: Added line feature to VerticalBarChart (microsoft#15705)

Cherry-pick of microsoft#15505.
SethDonohue · Nov 2, 2020 · 72762db · 72762db
1 parent baa8c22
commit 72762db
Show file tree

Hide file tree

Showing 10 changed files with 433 additions and 114 deletions.
diff --git a/change/@fluentui-react-charting-2020-10-26-16-50-38-verticalBarChartLine.json b/change/@fluentui-react-charting-2020-10-26-16-50-38-verticalBarChartLine.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Charting: Added line feature to VerticalBarChart.",
+  "packageName": "@fluentui/react-charting",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-26T23:50:38.868Z"
+}
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -309,6 +309,7 @@ export interface IYValueHover {
   y?: number;
   color?: string;
   data?: string | number;
+  yAxisCalloutData?: string | { [id: string]: number };
 }
 
 export interface IChildProps {

diff --git a/packages/react-charting/src/components/Legends/Legends.base.tsx b/packages/react-charting/src/components/Legends/Legends.base.tsx
@@ -32,6 +32,7 @@ interface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   key: number;
   opacity?: number;
   stripePattern?: boolean;
+  isLineLegendInBarChart?: boolean;
 }
 
 export interface ILegendState {
@@ -105,6 +106,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         color: legend.color,
         shape: legend.shape,
         stripePattern: legend.stripePattern,
+        isLineLegendInBarChart: legend.isLineLegendInBarChart,
         opacity: legend.opacity,
         key: index,
       };
@@ -343,6 +345,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       hoverAction: data.hoverAction,
       onMouseOutAction: data.onMouseOutAction,
       stripePattern: data.stripePattern,
+      isLineLegendInBarChart: data.isLineLegendInBarChart,
       opacity: data.opacity,
     };
     const color = this._getColor(legend.title, legend.color);
@@ -354,6 +357,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       borderColor: legend.color,
       overflow: overflow,
       stripePattern: legend.stripePattern,
+      isLineLegendInBarChart: legend.isLineLegendInBarChart,
       opacity: legend.opacity,
     });
     const onClickHandler = () => {

diff --git a/packages/react-charting/src/components/Legends/Legends.styles.ts b/packages/react-charting/src/components/Legends/Legends.styles.ts
@@ -2,7 +2,7 @@ import { ILegendsStyles, ILegendStyleProps } from './Legends.types';
 import { HighContrastSelector, getFocusStyle, IGetFocusStylesOptions, IStyle } from '@fluentui/react/lib/Styling';
 
 export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
-  const { className, theme } = props;
+  const { className, theme, isLineLegendInBarChart = false } = props;
   const { palette, fonts } = theme!;
   const options: IGetFocusStylesOptions = {
     inset: undefined,
@@ -42,7 +42,7 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
         },
       },
       width: '12px',
-      height: '12px',
+      height: isLineLegendInBarChart ? '4px' : '12px',
       backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,
       marginRight: '8px',
       border: '1px solid',

diff --git a/packages/react-charting/src/components/Legends/Legends.types.ts b/packages/react-charting/src/components/Legends/Legends.types.ts
@@ -103,6 +103,11 @@ export interface ILegend {
    */
   stripePattern?: boolean;
 
+  /**
+   * Indicates if the legend belongs to a line in the Bar Chart
+   */
+  isLineLegendInBarChart?: boolean;
+
   /*
    *  native button props for the legend button
    */
@@ -117,6 +122,7 @@ export interface ILegendStyleProps {
   opacity?: number;
   overflow?: boolean;
   stripePattern?: boolean;
+  isLineLegendInBarChart?: boolean;
 }
 
 export interface ILegendsProps {