_renderDataFilters()

in modules/monochrome/src/metric-card/rich-metric-chart.js [158:208]

• 47 lines of code
• 8 McCabe index (conditional complexity)

  _renderDataFilters() {
    const {showTopSeriesOnly, hoveredSeriesName} = this.state;
    const {theme, style, topSeriesCount} = this.props;
    const dataSeries = this.extractDataSeries(this.props.data);

    const series = showTopSeriesOnly ? dataSeries.slice(0, topSeriesCount) : dataSeries;

    return (
      <FilterContainer theme={theme} userStyle={style.filter} isExpanded={!showTopSeriesOnly}>
        {dataSeries.length > topSeriesCount && (
          <FilterToggle
            theme={theme}
            userStyle={style.filterToggle}
            isExpanded={!showTopSeriesOnly}
            onClick={() => this.setState({showTopSeriesOnly: !showTopSeriesOnly})}
          >
            {showTopSeriesOnly
              ? style.iconCollapsed || <CollapsedIcon />
              : style.iconExpanded || <ExpandedIcon />}
          </FilterToggle>
        )}

        {series.map(s => {
          const styleProps = {
            theme,
            name: s.key,
            displayName: s.displayName,
            color: s.color,
            isHovered: hoveredSeriesName === s.key,
            isActive: this._isDataVisible(s.key)
          };

          return (
            <FilterItem
              userStyle={style.filterItem}
              {...styleProps}
              key={`multiplot-${s.key}`}
              onMouseOver={() => this._setHoveredDataName(s.key)}
              onMouseOut={() => this._setHoveredDataName(null)}
              onClick={() => this._toggleDataVisibility(s.key)}
            >
              <FilterLegend {...styleProps} userStyle={style.filterLegend}>
                {styleProps.isActive ? style.iconOn || <CheckAltIcon /> : style.iconOff}
              </FilterLegend>
              <span>{s.displayName}</span>
            </FilterItem>
          );
        })}
      </FilterContainer>
    );
  }