diff --git a/change/@fluentui-react-examples-2020-10-14-12-35-26-user-v-sivsar-ComboChartSimple.json b/change/@fluentui-react-examples-2020-10-14-12-35-26-user-v-sivsar-ComboChartSimple.json new file mode 100644 index 0000000000000..518320664aa03 --- /dev/null +++ b/change/@fluentui-react-examples-2020-10-14-12-35-26-user-v-sivsar-ComboChartSimple.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "added some example code for new feature", + "packageName": "@fluentui/react-examples", + "email": "v-sivsar@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-10-14T07:05:26.323Z" +} diff --git a/change/@uifabric-charting-2020-10-14-12-35-26-user-v-sivsar-ComboChartSimple.json b/change/@uifabric-charting-2020-10-14-12-35-26-user-v-sivsar-ComboChartSimple.json new file mode 100644 index 0000000000000..6c4968dea8f20 --- /dev/null +++ b/change/@uifabric-charting-2020-10-14-12-35-26-user-v-sivsar-ComboChartSimple.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "added line to the vertical bar chart", + "packageName": "@uifabric/charting", + "email": "v-sivsar@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-10-14T07:04:59.025Z" +} diff --git a/packages/charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charting/src/components/CommonComponents/CartesianChart.types.ts index 249ae6c8ec53f..00d57c530871b 100644 --- a/packages/charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/charting/src/components/CommonComponents/CartesianChart.types.ts @@ -306,6 +306,7 @@ export interface IYValueHover { y?: number; color?: string; data?: string | number; + yAxisCalloutData?: string | { [id: string]: number }; } export interface IChildProps { diff --git a/packages/charting/src/components/Legends/Legends.base.tsx b/packages/charting/src/components/Legends/Legends.base.tsx index f3094c6be1f03..b5f73f96958f4 100644 --- a/packages/charting/src/components/Legends/Legends.base.tsx +++ b/packages/charting/src/components/Legends/Legends.base.tsx @@ -32,6 +32,7 @@ interface ILegendItem extends React.ButtonHTMLAttributes { key: number; opacity?: number; stripePattern?: boolean; + isLineLegendInBarChart?: boolean; } export interface ILegendState { @@ -105,6 +106,7 @@ export class LegendsBase extends React.Component { color: legend.color, shape: legend.shape, stripePattern: legend.stripePattern, + isLineLegendInBarChart: legend.isLineLegendInBarChart, opacity: legend.opacity, key: index, }; @@ -344,6 +346,7 @@ export class LegendsBase extends React.Component { hoverAction: data.hoverAction, onMouseOutAction: data.onMouseOutAction, stripePattern: data.stripePattern, + isLineLegendInBarChart: data.isLineLegendInBarChart, opacity: data.opacity, }; const color = this._getColor(legend.title, legend.color); @@ -355,6 +358,7 @@ export class LegendsBase extends React.Component { borderColor: legend.color, overflow: overflow, stripePattern: legend.stripePattern, + isLineLegendInBarChart: legend.isLineLegendInBarChart, opacity: legend.opacity, }); const onClickHandler = () => { diff --git a/packages/charting/src/components/Legends/Legends.styles.ts b/packages/charting/src/components/Legends/Legends.styles.ts index 22f398d3ad16b..544ceac0c9128 100644 --- a/packages/charting/src/components/Legends/Legends.styles.ts +++ b/packages/charting/src/components/Legends/Legends.styles.ts @@ -7,7 +7,7 @@ import { } from 'office-ui-fabric-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, @@ -47,7 +47,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/charting/src/components/Legends/Legends.types.ts b/packages/charting/src/components/Legends/Legends.types.ts index 318212e790eff..b9e01ae232461 100644 --- a/packages/charting/src/components/Legends/Legends.types.ts +++ b/packages/charting/src/components/Legends/Legends.types.ts @@ -103,6 +103,10 @@ 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 +121,7 @@ export interface ILegendStyleProps { opacity?: number; overflow?: boolean; stripePattern?: boolean; + isLineLegendInBarChart?: boolean; } export interface ILegendsProps { diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 233626f69cbd8..38e127114c96a 100644 --- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { max as d3Max } from 'd3-array'; +import { line as d3Line } from 'd3-shape'; import { scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear } from 'd3-scale'; import { classNamesFunction, getId, getRTL } from 'office-ui-fabric-react/lib/Utilities'; import { IProcessedStyleSet, IPalette } from 'office-ui-fabric-react/lib/Styling'; @@ -16,29 +17,44 @@ import { IVerticalBarChartStyles, IVerticalBarChartDataPoint, Legends, + IChildProps, + IYValueHover, } from '../../index'; import { FocusZoneDirection } from '@fluentui/react-focus'; -import { ChartTypes, XAxisTypes, NumericAxis, StringAxis } from '../../utilities/index'; +import { ChartTypes, XAxisTypes, NumericAxis, StringAxis, getTypeOfAxis } from '../../utilities/index'; +enum CircleVisbility { + show = 'visibility', + hide = 'hidden', +} const getClassNames = classNamesFunction(); export interface IVerticalBarChartState extends IBasestate { selectedLegendTitle: string; dataPointCalloutProps?: IVerticalBarChartDataPoint; // define this in hover and focus + /** + * data point of x, where rectangle is hovered or focused + */ + acitveXdataPoint: number | string | null; + YValueHover: IYValueHover[]; + hoverXValue?: string | number | null; } +type ColorScale = (_p?: number) => string; + export class VerticalBarChartBase extends React.Component { private _points: IVerticalBarChartDataPoint[]; private _barWidth: number; private _colors: string[]; private _classNames: IProcessedStyleSet; private _refArray: IRefArrayData[]; - private _isNumeric: boolean; private _calloutId: string; private margins: IMargins; private _isRtl: boolean = getRTL(); private _bars: JSX.Element[]; private _xAxisLabels: string[]; private _yMax: number; + private _isHavingLine: boolean; + private _xAxisType: XAxisTypes; public constructor(props: IVerticalBarChartProps) { super(props); @@ -52,15 +68,19 @@ export class VerticalBarChartBase extends React.Component point.x as string); - this._isNumeric = this._points.length > 0 && typeof this._points[0].x === 'number'; this._yMax = Math.max( d3Max(this._points, (point: IVerticalBarChartDataPoint) => point.y)!, this.props.yMaxValue || 0, @@ -76,9 +96,13 @@ export class VerticalBarChartBase extends React.Component { - return {this._bars}; + children={(props: IChildProps) => { + return ( + <> + {this._bars} + {this._isHavingLine && ( + {this._createLine(props.xScale!, props.yScale!, props.containerHeight, props.containerWidth)} + )} + + ); }} /> ); } + private _createLine = ( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + xScale: any, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + yScale: any, + containerHeight: number = 0, + containerWidth: number = 0, + ): React.ReactNode => { + const isNumericAxis = this._xAxisType === XAxisTypes.NumericAxis; + const { xBarScale } = this._getScales(containerHeight, containerWidth, isNumericAxis); + const colorScale = this._createColors(); + const { theme } = this.props; + const { data, lineLegendColor = theme!.palette.yellow, lineLegendText } = this.props; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const lineData: Array = []; + data && + data.forEach((item: IVerticalBarChartDataPoint, index: number) => { + if (item.lineData && item.lineData.y) { + lineData.push({ x: item.x, y: item.lineData!.y, point: item, index }); + } + }); + const linePath = d3Line() + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .x((d: any) => (!isNumericAxis ? xBarScale(d.index) + 0.5 * this._barWidth : xScale(d.x))) + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .y((d: any) => yScale(d.y)); + let shouldHighlight = true; + if (this.state.isLegendHovered || this.state.isLegendSelected) { + shouldHighlight = this.state.selectedLegendTitle === lineLegendText; + } + const line = ( + + ); + const dots: React.ReactNode[] = lineData.map( + (item: { x: number | string; y: number; point: IVerticalBarChartDataPoint; index: number }, index: number) => { + return ( + + ); + }, + ); + + return ( + <> + {line} + {dots} + + ); + }; + + private _checkForLine = (): boolean => { + const { data } = this.props; + return data!.some((item: IVerticalBarChartDataPoint) => item?.lineData?.y !== undefined); + }; + private _adjustProps(): void { this._points = this.props.data || []; this._barWidth = this.props.barWidth || 32; const { palette } = this.props.theme!; this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark]; + this._isHavingLine = this._checkForLine(); } private _getMargins = (margins: IMargins) => { this.margins = margins; }; - private _renderCallout(props?: IVerticalBarChartDataPoint): JSX.Element | null { - return props ? ( - - ) : null; - } + private _renderContentForBothLineAndBars = (point: IVerticalBarChartDataPoint): JSX.Element => { + const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point); + const content: JSX.Element[] = YValueHover.map((item: IYValueHover, index: number) => { + return ( + + ); + }); + return <>{content}; + }; + private _renderContentForOnlyBars = (props: IVerticalBarChartDataPoint): JSX.Element => { + const { useSingleColor = false } = this.props; + return ( + <> + + + ); + }; + + private _renderCallout = (props?: IVerticalBarChartDataPoint): JSX.Element | null => { + return props + ? this._isHavingLine + ? this._renderContentForBothLineAndBars(props) + : this._renderContentForOnlyBars(props) + : null; + }; private _getCustomizedCallout = () => { return this.props.onRenderCalloutPerDataPoint @@ -145,13 +275,21 @@ export class VerticalBarChartBase extends React.Component { - return (this._bars = this._isNumeric - ? this._createNumericBars(containerHeight, containerWidth) - : this._createStringBars(containerHeight, containerWidth)); + return (this._bars = + this._xAxisType === XAxisTypes.NumericAxis + ? this._createNumericBars(containerHeight, containerWidth) + : this._createStringBars(containerHeight, containerWidth)); }; - private _createColors(): D3ScaleLinear { + private _createColors(): D3ScaleLinear | ColorScale { const increment = this._colors.length <= 1 ? 1 : 1 / (this._colors.length - 1); + const { useSingleColor = false } = this.props; + if (useSingleColor) { + return (_p?: number) => { + const { theme, colors } = this.props; + return colors && colors.length > 0 ? colors[0] : theme!.palette.blueLight; + }; + } const domainValues = []; for (let i = 0; i < this._colors.length; i++) { domainValues.push(increment * i * this._yMax); @@ -166,12 +304,46 @@ export class VerticalBarChartBase extends React.Component { + const YValueHover: IYValueHover[] = []; + const { theme, useSingleColor = false } = this.props; + const { data, lineLegendText, lineLegendColor = theme!.palette.yellow } = this.props; + const selectedPoint = data!.filter((xDataPoint: IVerticalBarChartDataPoint) => xDataPoint.x === point.x); + // there might be no y value of the line for the hovered bar. so we need to check this condition + if (this._isHavingLine && selectedPoint[0].lineData?.y !== undefined) { + // callout data for the line + YValueHover.push({ + legend: lineLegendText, + color: lineLegendColor, + y: selectedPoint[0].lineData?.y, + data: selectedPoint[0].lineData?.yAxisCalloutData, + yAxisCalloutData: selectedPoint[0].lineData?.yAxisCalloutData, + }); + } + // callout data for the bar + YValueHover.push({ + legend: selectedPoint[0].legend, + y: selectedPoint[0].y, + color: !useSingleColor + ? selectedPoint[0].color + ? selectedPoint[0].color + : this._createColors()(selectedPoint[0].y) + : this._createColors()(1), + data: selectedPoint[0].yAxisCalloutData, + yAxisCalloutData: selectedPoint[0].yAxisCalloutData, + }); + return { YValueHover, hoverXValue: point.xAxisCalloutData || point.x.toString() }; + }; + private _onBarHover( point: IVerticalBarChartDataPoint, color: string, mouseEvent: React.MouseEvent, ): void { mouseEvent.persist(); + const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point); if ( this.state.isLegendSelected === false || (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend) @@ -186,6 +358,9 @@ export class VerticalBarChartBase extends React.Component { this.setState({ isCalloutVisible: false, + acitveXdataPoint: null, + YValueHover: [], + hoverXValue: '', }); }; @@ -201,6 +379,7 @@ export class VerticalBarChartBase extends React.Component { if (obj.index === point.legend! && refArrayIndexNumber === index) { this.setState({ @@ -212,25 +391,52 @@ export class VerticalBarChartBase extends React.Component point.x as number)!; - const xBarScale = d3ScaleLinear() - .domain(this._isRtl ? [xMax, 0] : [0, xMax]) - .nice() - .range([ - this.margins.left! + this._barWidth / 2, - containerWidth - this.margins.right! - this._barWidth - this._barWidth / 2, - ]); - const yBarScale = d3ScaleLinear() - .domain([0, this._yMax]) - .range([0, containerHeight - this.margins.bottom! - this.margins.top!]); + private _getScales = ( + containerHeight: number, + containerWidth: number, + isNumericScale: boolean, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ): { xBarScale: any; yBarScale: any } => { + if (isNumericScale) { + const xMax = d3Max(this._points, (point: IVerticalBarChartDataPoint) => point.x as number)!; + const xBarScale = d3ScaleLinear() + .domain(this._isRtl ? [xMax, 0] : [0, xMax]) + .nice() + .range([ + this.margins.left! + this._barWidth / 2, + containerWidth - this.margins.right! - this._barWidth - this._barWidth / 2, + ]); + const yBarScale = d3ScaleLinear() + .domain([0, this._yMax]) + .range([0, containerHeight - this.margins.bottom! - this.margins.top!]); + return { xBarScale, yBarScale }; + } else { + const endpointDistance = 0.5 * ((containerWidth - this.margins.right!) / this._points.length); + const xBarScale = d3ScaleLinear() + .domain(this._isRtl ? [this._points.length - 1, 0] : [0, this._points.length - 1]) + .range([ + this.margins.left! + endpointDistance - 0.5 * this._barWidth, + containerWidth - this.margins.right! - endpointDistance - 0.5 * this._barWidth, + ]); + const yBarScale = d3ScaleLinear() + .domain([0, this._yMax]) + .range([0, containerHeight - this.margins.bottom! - this.margins.top!]); + return { xBarScale, yBarScale }; + } + }; + private _createNumericBars(containerHeight: number, containerWidth: number): JSX.Element[] { + const { useSingleColor = false } = this.props; + const { xBarScale, yBarScale } = this._getScales(containerHeight, containerWidth, true); const colorScale = this._createColors(); const bars = this._points.map((point: IVerticalBarChartDataPoint, index: number) => { let shouldHighlight = true; @@ -259,7 +465,7 @@ export class VerticalBarChartBase extends React.Component ); }); @@ -267,17 +473,7 @@ export class VerticalBarChartBase extends React.Component { return ( @@ -343,10 +539,12 @@ export class VerticalBarChartBase extends React.Component { + const { theme, useSingleColor } = this.props; + const { lineLegendText, lineLegendColor = theme!.palette.yellow } = this.props; const actions: ILegend[] = []; data.forEach((point: IVerticalBarChartDataPoint, _index: number) => { - const color: string = point.color!; + const color: string = !useSingleColor ? point.color! : this._createColors()(1); // mapping data to the format Legends component needs const legend: ILegend = { title: point.legend!, @@ -363,6 +561,23 @@ export class VerticalBarChartBase extends React.Component { + this._onLegendClick(lineLegendText); + }, + hoverAction: () => { + this._onLegendHover(lineLegendText); + }, + onMouseOutAction: (isLegendSelected?: boolean) => { + this._onLegendLeave(isLegendSelected); + }, + isLineLegendInBarChart: true, + }; + actions.unshift(lineLegend); + } const legends = ( ); return legends; - } + }; } diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.types.ts b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.types.ts index 64c3a7b95fe2f..dcc43f2d62503 100644 --- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.types.ts +++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.types.ts @@ -4,7 +4,6 @@ import { ICartesianChartProps, ICartesianChartStyleProps, ICartesianChartStyles, - IDataPoint, IVerticalBarChartDataPoint, } from '../../index'; @@ -12,7 +11,7 @@ export interface IVerticalBarChartProps extends ICartesianChartProps { /** * Data to render in the chart. */ - data?: IDataPoint[]; + data?: IVerticalBarChartDataPoint[]; /** * Define a custom callout renderer for a data point @@ -29,6 +28,26 @@ export interface IVerticalBarChartProps extends ICartesianChartProps { */ colors?: string[]; + /** + * Legend text for the line datapoint in the chart + */ + lineLegendText?: string; + + /** + * color for the legend of the line in the chart + * @default theme.yellow + */ + + lineLegendColor?: string; + + /** + * This prop makes sure that all the bars are of same color. + * it will take the first color from the array of colors in + * prop `colors` or if `colors` prop is not given then default color is palette.blueLight + * @default false + */ + useSingleColor?: boolean; + /** * Call to provide customized styling that will layer on top of the variant rules. */ diff --git a/packages/charting/src/types/IDataPoint.ts b/packages/charting/src/types/IDataPoint.ts index 7e75a81a20d30..05d59c1dc7918 100644 --- a/packages/charting/src/types/IDataPoint.ts +++ b/packages/charting/src/types/IDataPoint.ts @@ -151,6 +151,16 @@ export interface IVerticalBarChartDataPoint { * This is an optional prop, If haven't given data will take */ yAxisCalloutData?: string; + + /** + * data to render the line along with bars + */ + lineData?: ILineDataInVerticalBarChart; +} + +export interface ILineDataInVerticalBarChart { + y: IVerticalBarChartDataPoint['y']; + yAxisCalloutData?: string | undefined; } export interface ILineChartDataPoint { diff --git a/packages/react-examples/src/charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx index 214b375b8c392..91d2bbcd6cbfb 100644 --- a/packages/react-examples/src/charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx @@ -1,17 +1,30 @@ import * as React from 'react'; -import { ChartHoverCard, VerticalBarChart, IVerticalBarChartProps } from '@uifabric/charting'; +import { VerticalBarChart, IVerticalBarChartProps, IVerticalBarChartDataPoint } from '@uifabric/charting'; import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling'; +import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities'; +import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup'; +import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; interface IVerticalChartState { width: number; height: number; + isCalloutselected: boolean; + useSingleColor: boolean; } + +const options: IChoiceGroupOption[] = [ + { key: 'basicExample', text: 'Basic Example' }, + { key: 'calloutExample', text: 'Custom Callout Example' }, +]; + export class VerticalBarChartBasicExample extends React.Component { constructor(props: IVerticalBarChartProps) { super(props); this.state = { width: 650, height: 350, + isCalloutselected: false, + useSingleColor: false, }; } @@ -26,8 +39,19 @@ export class VerticalBarChartBasicExample extends React.Component, option: IChoiceGroupOption): void => { + if (this.state.isCalloutselected) { + this.setState({ isCalloutselected: false }); + } else { + this.setState({ isCalloutselected: true }); + } + }; + private _onCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ useSingleColor: checked }); + }; + private _basicExample(): JSX.Element { - const points = [ + const points: IVerticalBarChartDataPoint[] = [ { x: 0, y: 10000, @@ -35,6 +59,10 @@ export class VerticalBarChartBasicExample extends React.Component + +
- props ? ( - - ) : null - } + lineLegendText={'just line'} + lineLegendColor={'brown'} + {...(this.state.isCalloutselected && { + onRenderCalloutPerDataPoint: ( + props: IVerticalBarChartDataPoint, + defaultRender: IRenderFunction, + ) => (props ? defaultRender(props) : null), + })} />
diff --git a/packages/react-examples/src/charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx b/packages/react-examples/src/charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx index fe972aa59a721..e563af9cb1ba1 100644 --- a/packages/react-examples/src/charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx +++ b/packages/react-examples/src/charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx @@ -1,70 +1,73 @@ import * as React from 'react'; -import { VerticalBarChart, IVerticalBarChartProps } from '@uifabric/charting'; -import { DefaultPalette, DefaultFontStyles } from 'office-ui-fabric-react/lib/Styling'; +import { VerticalBarChart, IVerticalBarChartProps, IVerticalBarChartDataPoint } from '@uifabric/charting'; +import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling'; +import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; -export class VerticalBarChartStyledExample extends React.Component { +interface IVerticalBarChartState { + isChecked: boolean; + useSingleColor: boolean; +} +export class VerticalBarChartStyledExample extends React.Component { constructor(props: IVerticalBarChartProps) { super(props); + this.state = { + isChecked: true, + useSingleColor: true, + }; } public render(): JSX.Element { - const points = [ - { x: 'One', y: 20 }, - { x: 'Two', y: 48 }, - { x: 'Three', y: 30 }, - { x: 'Four', y: 40 }, - { x: 'Five', y: 13 }, + const { isChecked } = this.state; + const points: IVerticalBarChartDataPoint[] = [ + { x: 'One', y: 20, ...(isChecked && { lineData: { y: 10, yAxisCalloutData: '12%' } }) }, + { x: 'Two', y: 48, ...(isChecked && { lineData: { y: 28 } }) }, + { x: 'Three', y: 30, ...(isChecked && { lineData: { y: 4 } }) }, + { x: 'Four', y: 40, ...(isChecked && { lineData: { y: 28 } }) }, + { x: 'Five', y: 13, ...(isChecked && { lineData: { y: 8, yAxisCalloutData: '45%' } }) }, { x: 'Six', y: 60 }, { x: 'Seven', y: 60 }, - { x: 'Eight', y: 57 }, + { x: 'Eight', y: 57, ...(isChecked && { lineData: { y: 48 } }) }, { x: 'Nine', y: 14 }, { x: 'Ten', y: 35 }, - { x: 'Elven', y: 20 }, - { x: 'Twelve', y: 44 }, + { x: 'Elven', y: 20, ...(isChecked && { lineData: { y: 1 } }) }, + { x: 'Twelve', y: 44, ...(isChecked && { lineData: { y: 10 } }) }, { x: 'Thirteen', y: 33 }, ]; - const axisStyle = { - stroke: DefaultPalette.orange, - }; - const textStyle = { - fill: DefaultPalette.orangeLight, - fontSize: '12px', - }; - - const customStyles = () => { - return { - chart: { - paddingBottom: '45px', - }, - chartLabel: { - color: DefaultPalette.orange, - ...DefaultFontStyles.large, - }, - xAxisDomain: axisStyle, - xAxisTicks: axisStyle, - yAxisDomain: axisStyle, - yAxisTicks: axisStyle, - yAxisText: textStyle, - }; - }; - const customColors = [DefaultPalette.greenLight, DefaultPalette.green, DefaultPalette.greenDark]; return ( -
- + + -
+
+ +
+ ); } + private _onChange = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ isChecked: checked }); + }; + private _onCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ useSingleColor: checked }); + }; }