Charting: Added line feature to VerticalBarChart (#15705)

Cherry-pick of #15505.
microsoft · Oct 27, 2020 · 4858df7 · 4858df7
1 parent ec27806
commit 4858df7
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 {