private _styledExample()

in packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx [54:206]
152 lines of code
3 McCabe index (conditional complexity)

  private _styledExample(): JSX.Element {
    const points: ILineChartPoints[] = [
      {
        data: [
          {
            x: new Date('2018/01/01'),
            y: 10,
            xAxisCalloutData: '2018/01/01',
            yAxisCalloutData: '10%',
            xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/01/01' },
            callOutAccessibilityData: { ariaLabel: 'Line series 1 of 5 Point 1 First 10%' },
          },
          {
            x: new Date('2018/02/01'),
            y: 30,
            xAxisCalloutData: '2018/01/15',
            yAxisCalloutData: '18%',
            xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/01/15' },
            callOutAccessibilityData: { ariaLabel: 'Line series 2 of 5 Point 1 First 18%' },
          },
          {
            x: new Date('2018/03/01'),
            y: 10,
            xAxisCalloutData: '2018/01/28',
            yAxisCalloutData: '24%',
            xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/01/28' },
            callOutAccessibilityData: { ariaLabel: 'Line series 3 of 5 Point 1 First 24%' },
          },
          {
            x: new Date('2018/04/01'),
            y: 30,
            xAxisCalloutData: '2018/02/01',
            yAxisCalloutData: '25%',
            xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/02/01' },
            callOutAccessibilityData: { ariaLabel: 'Line series 4 of 5 Point 1 First 25%' },
          },
          {
            x: new Date('2018/05/01'),
            y: 10,
            xAxisCalloutData: '2018/03/01',
            yAxisCalloutData: '15%',
            xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/03/01' },
            callOutAccessibilityData: { ariaLabel: 'Line series 5 of 5 Point 1 First 15%' },
          },
        ],
        legend: 'First',
        color: DefaultPalette.blue,
        onLegendClick: this._onLegendClickHandler,
      },
      {
        data: [
          {
            x: new Date('2018/01/01'),
            y: 30,
            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 30' },
          },
          {
            x: new Date('2018/02/01'),
            y: 50,
            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 50' },
          },
          {
            x: new Date('2018/03/01'),
            y: 30,
            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 30' },
          },
          {
            x: new Date('2018/04/01'),
            y: 50,
            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 50' },
          },
          {
            x: new Date('2018/05/01'),
            y: 30,
            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 30' },
          },
        ],
        legend: 'Second',
        color: DefaultPalette.green,
        onLegendClick: this._onLegendClickHandler,
      },
      {
        data: [
          { x: new Date('2018/01/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } },
          { x: new Date('2018/02/01'), y: 70, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 70' } },
          { x: new Date('2018/03/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } },
          { x: new Date('2018/04/01'), y: 70, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 70' } },
          { x: new Date('2018/05/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } },
        ],
        legend: 'Third',
        color: DefaultPalette.red,
        onLegendClick: this._onLegendClickHandler,
      },
    ];

    const data: IChartProps = {
      chartTitle: 'Line Chart Custom Accessibility Example',
      lineChartData: points,
    };
    const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
    const timeFormat = '%m/%d';
    // Passing tick values is optional, for more control.
    // If you do not pass them the line chart will render them for you based on D3's standard.
    const tickValues: Date[] = [
      new Date('01-01-2018'),
      new Date('02-01-2018'),
      new Date('03-01-2018'),
      new Date('04-01-2018'),
      new Date('05-01-2018'),
    ];
    const colorFillBarData = [
      {
        legend: 'Time range 1',
        color: 'blue',
        data: [
          {
            startX: new Date('2018/01/06'),
            endX: new Date('2018/01/25'),
          },
        ],
      },
      {
        legend: 'Time range 2',
        color: 'red',
        data: [
          {
            startX: new Date('2018/01/18'),
            endX: new Date('2018/02/20'),
          },
          {
            startX: new Date('2018/04/17'),
            endX: new Date('2018/05/10'),
          },
        ],
        applyPattern: true,
      },
    ];
    return (
      <div style={rootStyle}>
        <LineChart
          data={data}
          strokeWidth={4}
          tickFormat={timeFormat}
          tickValues={tickValues}
          height={this.state.height}
          width={this.state.width}
          legendProps={{ canSelectMultipleLegends: true, allowFocusOnLegends: true }}
          colorFillBars={colorFillBarData}
          allowMultipleShapesForPoints={this.state.allowMultipleShapes}
        />
      </div>
    );
  }