Color Fill Bars Feature for Line Chart Component

change/@uifabric-charting-2020-08-18-13-59-25-master.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Added color fill bar feature to line chart component",
+  "packageName": "@uifabric/charting",
+  "email": "email not defined",
+  "dependentChangeType": "patch",
+  "date": "2020-08-18T20:59:25.017Z"
+}

packages/charting/src/components/Legends/Legends.base.tsx

@@ -28,6 +28,8 @@ interface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   color: string;
   shape?: LegendShape;
   key: number;
+  opacity?: number;
+  stripePattern?: boolean;
 }
 
 export interface ILegendState {
@@ -98,6 +100,8 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         onMouseOutAction: legend.onMouseOutAction!,
         color: legend.color,
         shape: legend.shape,
+        stripePattern: legend.stripePattern,
+        opacity: legend.opacity,
         key: index,
       };
     });
@@ -257,6 +261,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       >
         <div
           className={classNames.overflowIndicationTextStyle}
+          // eslint-disable-next-line react/jsx-no-bind
           ref={(rootElem: HTMLDivElement) => (this._hoverCardRef = rootElem)}
           {...(allowFocusOnLegends && {
             'aria-expanded': this.state.isHoverCardVisible,
@@ -301,6 +306,8 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       action: data.action,
       hoverAction: data.hoverAction,
       onMouseOutAction: data.onMouseOutAction,
+      stripePattern: data.stripePattern,
+      opacity: data.opacity,
     };
     const color = this._getColor(legend.title, legend.color);
     const { theme, className, styles } = this.props;
@@ -310,8 +317,9 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       colorOnSelectedState: color,
       borderColor: legend.color,
       overflow: overflow,
+      stripePattern: legend.stripePattern,
+      opacity: legend.opacity,
     });
-
     const onClickHandler = () => {
       this._onClick(legend);
     };
@@ -333,12 +341,14 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         {...(data.nativeButtonProps && { ...data.nativeButtonProps })}
         key={index}
         className={classNames.legend}
+        /* eslint-disable react/jsx-no-bind */
         onClick={onClickHandler}
         onMouseOver={onHoverHandler}
         onMouseOut={onMouseOut}
         onFocus={onHoverHandler}
         onBlur={onMouseOut}
         data-is-focusable={allowFocusOnLegends}
+        /* eslint-enable react/jsx-no-bind */
       >
         <div className={this._getShapeClass(classNames, legend)} />
         <div className={classNames.text}>{legend.title}</div>

packages/charting/src/components/Legends/Legends.styles.ts

@@ -48,11 +48,14 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
       },
       width: '12px',
       height: '12px',
-      backgroundColor: props.colorOnSelectedState,
+      backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,
       marginRight: '8px',
       border: '1px solid',
       borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,
-      opacity: props.colorOnSelectedState === palette.white ? '0.6' : '',
+      opacity: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',
+      backgroundImage: props.stripePattern
+        ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`
+        : '',
     },
     triangle: {
       width: '0',
@@ -62,6 +65,7 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
       borderTop: '10.4px solid',
       borderTopColor: props.colorOnSelectedState,
       marginRight: '8px',
+      opacity: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',
       selectors: {
         [HighContrastSelector]: {
           border: '0px',

packages/charting/src/components/Legends/Legends.types.ts

@@ -83,12 +83,22 @@ export interface ILegend {
    */
   color: string;
 
+  /**
+   * The opacity of the legend color
+   */
+  opacity?: number;
+
   /**
    * The shape for the legend
    */
   shape?: LegendShape;
 
   /**
+   * Indicated whether of not to apply stripe pattern
+   */
+  stripePattern?: boolean;
+
+  /*
    *  native button props for the legend button
    */
   nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -99,7 +109,9 @@ export interface ILegendStyleProps {
   className?: string;
   colorOnSelectedState?: string;
   borderColor?: string;
+  opacity?: number;
   overflow?: boolean;
+  stripePattern?: boolean;
 }
 
 export interface ILegendsProps {

packages/charting/src/components/LineChart/LineChart.base.tsx

@@ -3,7 +3,7 @@ import { Axis as D3Axis } from 'd3-axis';
 import { select as d3Select } from 'd3-selection';
 import { ILegend, Legends } from '../Legends/index';
 import { getId, find } from 'office-ui-fabric-react/lib/Utilities';
-import { ILineChartProps, ILineChartPoints, IBasestate, IChildProps } from './LineChart.types';
+import { ILineChartProps, ILineChartPoints, IBasestate, IChildProps, IColorFillBarsProps } from './LineChart.types';
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { calloutData, IMargins } from '../../utilities/index';
@@ -34,11 +34,14 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private _circleId: string;
   private _lineId: string;
   private _verticalLine: string;
+  private _colorFillBarPatternId: string;
   private _uniqueCallOutID: string;
   private _refArray: IRefArrayData[];
   private margins: IMargins;
   private eventLabelHeight: number = 36;
   private lines: JSX.Element[];
+  private colorFillBars: IColorFillBarsProps[];
+  private _renderedColorFillBars: JSX.Element[];
 
   constructor(props: ILineChartProps) {
     super(props);
@@ -53,9 +56,11 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     this._refArray = [];
     this._points = this.props.data.lineChartData || [];
     this._calloutPoints = calloutData(this._points) || [];
+    this.colorFillBars = this.props.colorFillBars || [];
     this._circleId = getId('circle');
     this._lineId = getId('lineID');
     this._verticalLine = getId('verticalLine');
+    this._colorFillBarPatternId = getId('colorFillBarPattern');
     this.margins = {
       top: this.props.margins?.top || 20,
       right: this.props.margins?.right || 20,
@@ -113,7 +118,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       <ChartHelper
         {...this.props}
         points={this._points}
-        getGraphData={this._getLinesData}
+        getGraphData={this._initializeLineChartData}
         calloutProps={calloutProps}
         tickParams={tickParams}
         legendBars={legendBars}
@@ -136,7 +141,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                   visibility={'hidden'}
                   strokeDasharray={'5,5'}
                 />
-                <g>{this.lines}</g>
+                <g>
+                  {this._renderedColorFillBars}
+                  {this.lines}
+                </g>
                 {eventAnnotationProps && (
                   <EventsAnnotation
                     {...eventAnnotationProps}
@@ -154,10 +162,16 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _getLinesData = (xScale: any, yScale: NumericAxis, containerHeight: number, containerWidth: number) => {
+  private _initializeLineChartData = (
+    xScale: any,
+    yScale: NumericAxis,
+    containerHeight: number,
+    containerWidth: number,
+  ) => {
     this._xAxisScale = xScale;
     this._yAxisScale = yScale;
-    return (this.lines = this._createLines());
+    this._renderedColorFillBars = this._createColorFillBars(containerHeight);
+    this.lines = this._createLines();
   };
 
   private _createLegends(data: ILineChartPoints[]): JSX.Element {
@@ -186,9 +200,37 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       };
       return legend;
     });
+
+    const colorFillBarsLegendDataItems = this.colorFillBars.map((colorFillBar: IColorFillBarsProps, index: number) => {
+      const title = colorFillBar.name;
+      const legend: ILegend = {
+        title,
+        color: colorFillBar.color,
+        action: () => {
+          if (this.state.selectedLegend === title) {
+            this.setState({ selectedLegend: '' });
+            this._handleColorFillBarLengendClick(colorFillBar, null);
+          } else {
+            this.setState({ selectedLegend: title });
+            this._handleColorFillBarLengendClick(colorFillBar, title);
+          }
+          this.setState({ activeLegend: title });
+        },
+        onMouseOutAction: () => {
+          this.setState({ activeLegend: '' });
+        },
+        hoverAction: () => {
+          this.setState({ activeLegend: title });
+        },
+        opacity: 0.4,
+        stripePattern: colorFillBar.applyPattern,
+      };
+      return legend;
+    });
+
     const legends = (
       <Legends
-        legends={legendDataItems}
+        legends={[...legendDataItems, ...colorFillBarsLegendDataItems]}
         enabledWrapLines={this.props.enabledLegendsWrapLines}
         overflowProps={this.props.legendsOverflowProps}
         focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}
@@ -227,6 +269,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
         const y2 = this._points[i].data[j].y;
         const xAxisCalloutData = this._points[i].data[j - 1].xAxisCalloutData;
         if (this.state.activeLegend === legendVal || this.state.activeLegend === '') {
+          /* eslint-disable react/jsx-no-bind */
           lines.push(
             <line
               id={lineId}
@@ -300,6 +343,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                 strokeWidth={3}
               />,
             );
+            /* eslint-enable react/jsx-no-bind */
           }
         } else {
           lines.push(
@@ -322,6 +366,43 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     return lines;
   }
 
+  private _createColorFillBars = (containerHeight: number) => {
+    const colorFillBars: JSX.Element[] = [];
+    for (let i = 0; i < this.colorFillBars.length; i++) {
+      const colorFillBar = this.colorFillBars[i];
+      const colorFillBarId = getId(colorFillBar.name.replace(/\W/g, ''));
+      if (colorFillBar.applyPattern) {
+        colorFillBars.push(
+          <pattern
+            id={`${this._colorFillBarPatternId}${i}`}
+            width={16}
+            height={16}
+            key={`${this._colorFillBarPatternId}${i}`}
+            patternUnits={'userSpaceOnUse'}
+          >
+            <path d={'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8'} stroke={colorFillBar.color} strokeWidth={2} />
+          </pattern>,
+        );
+      }
+      for (let j = 0; j < colorFillBar.data.length; j++) {
+        const startX = colorFillBar.data[j].startX;
+        const endX = colorFillBar.data[j].endX;
+        colorFillBars.push(
+          <rect
+            fill={colorFillBar.applyPattern ? `url(#${this._colorFillBarPatternId}${i})` : colorFillBar.color}
+            fillOpacity={this.state.activeLegend === colorFillBar.name || this.state.activeLegend === '' ? 0.4 : 0.1}
+            x={this._xAxisScale(startX)}
+            y={this._yAxisScale(0) - containerHeight}
+            width={Math.abs(this._xAxisScale(endX) - this._xAxisScale(startX))}
+            height={containerHeight}
+            key={`${colorFillBarId}${j}`}
+          />,
+        );
+      }
+    }
+    return colorFillBars;
+  };
+
   private _refCallback(element: SVGGElement, legendTitle: string): void {
     this._refArray.push({ index: legendTitle, refElement: element });
   }
@@ -416,4 +497,13 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       point.onLegendClick(selectedLegend);
     }
   };
+
+  private _handleColorFillBarLengendClick = (
+    colorFillBar: IColorFillBarsProps,
+    selectedLegend: string | null,
+  ): void => {
+    if (colorFillBar.onLegendClick) {
+      colorFillBar.onLegendClick(selectedLegend);
+    }
+  };
 }

packages/charting/src/components/LineChart/LineChart.types.ts

@@ -155,10 +155,16 @@ export interface ILineChartProps extends Partial<IChartHelperProps> {
    */
   margins?: IMargins;
 
+  /*
+   * Color fill bars for the chart,
+   */
+  colorFillBars?: IColorFillBarsProps[];
+
   /**
    * props for the legends in the chart
    */
   legendProps?: Partial<ILegendsProps>;
+
 }
 
 export interface IEventsAnnotationProps {
@@ -173,3 +179,16 @@ export interface IEventsAnnotationProps {
 export interface ILineChartStyles extends IChartHelperStyles {}
 
 export interface ILineChartStyleProps extends IChartHelperStyleProps {}
+
+export interface IColorFillBarsProps {
+  name: string;
+  color: string;
+  data: IColorFillBarData[];
+  applyPattern?: boolean;
+  onLegendClick?: (selectedLegend: string | null) => void | undefined;
+}
+
+export interface IColorFillBarData {
+  startX: number | Date;
+  endX: number | Date;
+}

packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx

@@ -138,6 +138,33 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
             height={this.state.height}
             width={this.state.width}
             margins={margins}
+            colorFillBars={[
+              {
+                name: 'Time range 1',
+                color: 'blue',
+                data: [
+                  {
+                    startX: new Date('2020-03-03T10:00:00.000Z'),
+                    endX: new Date('2020-03-05T00:00:00.000Z'),
+                  },
+                ],
+              },
+              {
+                name: 'Time range 2',
+                color: 'red',
+                data: [
+                  {
+                    startX: new Date('2020-03-07T00:00:00.000Z'),
+                    endX: new Date('2020-03-08T00:00:00.000Z'),
+                  },
+                  {
+                    startX: new Date('2020-03-04T10:00:00.000Z'),
+                    endX: new Date('2020-03-06T00:00:00.000Z'),
+                  },
+                ],
+                applyPattern: true,
+              },
+            ]}
           />
         </div>
       </>