dees-catalog/ts_web/elements/00group-chart/dees-chart-radar/component.ts

import {
  customElement,
  property,
  type TemplateResult,
} from '@design.estate/dees-element';

import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
import { demoFunc } from './demo.js';
import { radarStyles } from './styles.js';
import { renderChartRadar } from './template.js';
import { getEchartsSeriesColors } from '../dees-chart-echarts-theme.js';

export interface IRadarIndicator {
  name: string;
  max: number;
}

export interface IRadarSeriesItem {
  name: string;
  values: number[];
  color?: string;
}

declare global {
  interface HTMLElementTagNameMap {
    'dees-chart-radar': DeesChartRadar;
  }
}

@customElement('dees-chart-radar')
export class DeesChartRadar extends DeesChartEchartsBase {
  public static demo = demoFunc;
  public static demoGroups = ['Chart'];

  @property({ type: Array })
  accessor indicators: IRadarIndicator[] = [];

  @property({ type: Array })
  accessor series: IRadarSeriesItem[] = [];

  @property({ type: Boolean })
  accessor showLegend: boolean = true;

  @property({ type: Boolean })
  accessor fillArea: boolean = true;

  public static styles = radarStyles;

  public render(): TemplateResult {
    return renderChartRadar(this);
  }

  public async updated(changedProperties: Map<string, any>) {
    super.updated(changedProperties);
    if (
      this.chartInstance &&
      (changedProperties.has('indicators') ||
        changedProperties.has('series') ||
        changedProperties.has('showLegend') ||
        changedProperties.has('fillArea'))
    ) {
      this.updateChart();
    }
  }

  protected buildOption(): Record<string, any> {
    const isDark = !this.goBright;
    const seriesColors = getEchartsSeriesColors(this.goBright);

    const seriesData = this.series.map((s, index) => {
      const color = s.color || seriesColors[index % seriesColors.length];
      return {
        name: s.name,
        value: s.values,
        itemStyle: { color },
        lineStyle: { color, width: 2 },
        areaStyle: this.fillArea ? { color, opacity: 0.15 } : undefined,
        symbol: 'circle',
        symbolSize: 6,
      };
    });

    return {
      tooltip: {
        trigger: 'item',
      },
      legend: this.showLegend && this.series.length > 1
        ? { bottom: 8, itemWidth: 10, itemHeight: 10 }
        : { show: false },
      radar: {
        indicator: this.indicators.map((ind) => ({
          name: ind.name,
          max: ind.max,
        })),
        shape: 'polygon',
        splitNumber: 4,
        axisName: {
          color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 35%)',
          fontSize: 11,
        },
        splitArea: {
          areaStyle: {
            color: isDark
              ? ['hsl(0 0% 7%)', 'hsl(0 0% 9%)']
              : ['hsl(0 0% 97%)', 'hsl(0 0% 95%)'],
          },
        },
        splitLine: {
          lineStyle: {
            color: isDark ? 'hsl(0 0% 16%)' : 'hsl(0 0% 88%)',
          },
        },
        axisLine: {
          lineStyle: {
            color: isDark ? 'hsl(0 0% 16%)' : 'hsl(0 0% 88%)',
          },
        },
      },
      series: [
        {
          type: 'radar',
          data: seriesData,
          emphasis: {
            lineStyle: {
              width: 3,
            },
          },
        },
      ],
    };
  }
}