render()

in packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx [126:241]
99 lines of code
4 McCabe index (conditional complexity)

  render() {
    /* eslint-disable prettier/prettier */
    // TODO - Prettier is going crazy on this line, need to investigate
    const {
      initialized,
      size,
      forwardStageRef,
      a11y,
      dimensions,
      spec,
      style,
      backgroundColor,
      locale,
      metricStyle,
    } = this.props;
    /* eslint-enable prettier/prettier */
    const contrastOptions: ColorContrastOptions = {
      lightColor: colorToRgba(metricStyle.textLightColor),
      darkColor: colorToRgba(metricStyle.textDarkColor),
    };

    if (!initialized || size.width === 0 || size.height === 0 || !spec) {
      return null;
    }

    const valueLabels = mergeValueLabels(spec.valueLabels);

    return (
      <figure
        aria-labelledby={a11y.labelId}
        aria-describedby={a11y.descriptionId}
        style={{ width: '100%', height: '100%' }}
      >
        <canvas
          ref={forwardStageRef}
          className="echCanvasRenderer"
          width={size.width * this.devicePixelRatio}
          height={size.height * this.devicePixelRatio}
          style={size}
          // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
          role="presentation"
        >
          <ScreenReaderSummary />
        </canvas>
        {dimensions.shouldRenderMetric && (
          <div className="echBulletAsMetric" style={{ width: '100%', height: '100%' }}>
            <AlignedGrid<BulletDatum>
              data={spec.data}
              contentComponent={({ datum, stats }) => {
                const colorScale =
                  this.props.dimensions.rows[stats.rowIndex]?.[stats.columnIndex]?.colorScale ??
                  (() => ({ hex: () => this.props.style.fallbackBandColor })); // should never happen
                const bulletDatum: BulletMetricWProgress = {
                  value: datum.value,
                  target: datum.target,
                  valueFormatter: datum.valueFormatter,
                  targetFormatter: datum.targetFormatter,
                  color: style.barBackground,
                  progressBarDirection: spec.subtype === BulletSubtype.vertical ? 'vertical' : 'horizontal',
                  title: datum.title,
                  subtitle: datum.subtitle,
                  domain: datum.domain,
                  niceDomain: datum.niceDomain,
                  valueLabels,
                  extra: datum.target ? (
                    <span>
                      {valueLabels.target}:{' '}
                      <strong>{(datum.targetFormatter ?? datum.valueFormatter)(datum.target)}</strong>
                    </span>
                  ) : undefined,
                };

                const bulletToMetricStyle = mergePartial(metricStyle, {
                  barBackground: colorScale(datum.value).hex(),
                  emptyBackground: Colors.Transparent.keyword,
                  border: 'gray',
                  minHeight: 0,
                  textLightColor: 'white',
                  textDarkColor: 'black',
                  nonFiniteText: 'N/A',
                  valueFontSize: 'default',
                });
                const panel = { width: size.width / stats.columns, height: size.height / stats.rows };

                const textDimensions = getMetricTextPartDimensions(bulletDatum, panel, bulletToMetricStyle, locale);
                const sizes = getSnappedFontSizes(
                  textDimensions.heightBasedSizes.valueFontSize,
                  panel.height,
                  bulletToMetricStyle,
                );
                textDimensions.heightBasedSizes.valueFontSize = sizes.valueFontSize;
                textDimensions.heightBasedSizes.valuePartFontSize = sizes.valuePartFontSize;

                return (
                  <Metric
                    chartId={`${this.props.chartId}-${stats.rowIndex}-${stats.columnIndex}`}
                    datum={bulletDatum}
                    hasTitles={this.props.hasTitles}
                    totalRows={stats.rows}
                    totalColumns={stats.columns}
                    columnIndex={stats.columnIndex}
                    rowIndex={stats.rowIndex}
                    style={bulletToMetricStyle}
                    backgroundColor={backgroundColor}
                    contrastOptions={contrastOptions}
                    textDimensions={textDimensions}
                  />
                );
              }}
            />
            );
          </div>
        )}
      </figure>
    );
  }