public render()

in packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx [58:170]
105 lines of code
34 McCabe index (conditional complexity)

  public render(): JSX.Element {
    this._adjustProps();
    const { data, benchmarkData, targetData, hideNumberDisplay, ignoreFixStyle, culture } = this.props;
    const { palette } = this.props.theme!;
    const barHeight = ignoreFixStyle || data!.chartData!.length > 2 ? this.props.barHeight : 8;

    if (benchmarkData) {
      // benchmark color is used to render color for benchmark triangle and benchmark legend
      benchmarkData.color = benchmarkData.color || palette.neutralTertiary;
    }

    if (targetData) {
      // target color is used to render color for target triangle and target legend
      targetData.color = targetData.color || palette.neutralSecondary;
    }

    const bars = this._createBarsAndLegends(data!, barHeight!, palette, benchmarkData, targetData);

    const showRatio = hideNumberDisplay === false && !ignoreFixStyle && data!.chartData!.length === 2;
    const showNumber = hideNumberDisplay === false && !ignoreFixStyle && data!.chartData!.length === 1;
    const total = data!.chartData!.reduce(
      (acc: number, value: IChartDataPoint) => acc + (value.data ? value.data : 0),
      0,
    );

    let benchmarkRatio = 0;
    if (benchmarkData && total) {
      benchmarkRatio = (benchmarkData.data! / total) * 100;
    }
    let targetRatio = 0;
    if (targetData && total) {
      targetRatio = (targetData.data! / total) * 100;
    }

    const showLegend = this.props.hideLegend === false && (ignoreFixStyle || data!.chartData!.length > 2);
    this._classNames = getClassNames(this.props.styles!, {
      legendColor: this.state.color,
      theme: this.props.theme!,
      benchmarkColor: benchmarkData ? benchmarkData.color : '',
      benchmarkRatio,
      targetColor: targetData ? targetData.color : '',
      targetRatio,
    });
    const getChartData = () => convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);
    return (
      <div className={this._classNames.root}>
        <FocusZone direction={FocusZoneDirection.horizontal}>
          <div className={this._classNames.chartTitle}>
            {data!.chartTitle && (
              <div {...this._getAccessibleDataObject(data!.chartTitleAccessibilityData)}>
                <strong>{data!.chartTitle}</strong>
              </div>
            )}
            {showRatio && (
              <div {...this._getAccessibleDataObject(data!.chartDataAccessibilityData)}>
                <span className={this._classNames.ratioNumerator}>{getChartData()}</span>
                {!this.props.hideDenominator && (
                  <span>
                    /<span className={this._classNames.ratioDenominator}>{convertToLocaleString(total, culture)}</span>
                  </span>
                )}
              </div>
            )}
            {showNumber && (
              <div {...this._getAccessibleDataObject(data!.chartDataAccessibilityData)}>
                <strong>{getChartData()}</strong>
              </div>
            )}
          </div>
          {(benchmarkData || targetData) && (
            <div className={this._classNames.benchmarkContainer}>
              {benchmarkData && <div className={this._classNames.benchmark} role="text" />}
              {targetData && <div className={this._classNames.target} role="text" />}
            </div>
          )}
        </FocusZone>
        <FocusZone direction={FocusZoneDirection.horizontal}>
          <div>
            <svg className={this._classNames.chart} aria-label={data?.chartTitle}>
              <g>{bars[0]}</g>
              <Callout
                gapSpace={15}
                isBeakVisible={false}
                target={this.state.refSelected}
                setInitialFocus={true}
                hidden={!(!this.props.hideTooltip && this.state.isCalloutVisible)}
                directionalHint={DirectionalHint.topRightEdge}
                id={this._calloutId}
                onDismiss={this._closeCallout}
                preventDismissOnLostFocus={true}
                {...this.props.calloutProps}
                {...this._getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}
              >
                <>
                  {this.props.onRenderCalloutPerDataPoint ? (
                    this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)
                  ) : (
                    <ChartHoverCard
                      Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.selectedLegendTitle}
                      YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard}
                      color={this.state.color}
                      culture={culture}
                    />
                  )}
                </>
              </Callout>
            </svg>
          </div>
        </FocusZone>
        {showLegend && <div className={this._classNames.legendContainer}>{bars[1]}</div>}
      </div>
    );
  }