@reliability-design/web 1.4.5 → 1.4.7

package/dist/components/rel-chart/rel-chart.ts

@@ -1,754 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-
-interface SeriesConfig {
-  key: string;
-  label?: string;
-  colorToken?: string;
-}
-
-interface TooltipData {
-  x: string;
-  series: { label: string; value: number; color: string }[];
-  xPos: number;
-  yPos: number;
-}
-
-/**
- * @deprecated rel-chart has no Figma design in RelDS 2.0 and is excluded from
- * the parity contract. It remains exported for compatibility but will be
- * removed in a future major version — use a dedicated charting library styled
- * with RelDS tokens instead.
- */
-@customElement("rel-chart")
-export class RelChart extends LitElement {
-  @property({ type: String, reflect: true }) type: "bar" | "line" = "bar";
-  @property({ type: Number }) height = 320;
-  @property({ type: String, attribute: "x-key" }) xKey = "";
-  @property({ type: String, attribute: "series-json" }) seriesJson = "";
-  @property({ type: String, attribute: "data-json" }) dataJson = "";
-  @property({ type: Boolean, attribute: "show-grid" }) showGrid = true;
-  @property({ type: Boolean, attribute: "show-axis" }) showAxis = true;
-  @property({ type: Boolean, attribute: "show-legend" }) showLegend = true;
-  @property({ type: Boolean }) stacked = false;
-  @property({ type: String, attribute: "format-x" }) formatX: "date" | "string" | "number" = "string";
-  @property({ type: String }) locale = "en-US";
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  // Programmatic properties - using setters to trigger updates
-  private _data: Array<Record<string, unknown>> = [];
-  private _series: SeriesConfig[] = [];
-
-  public get data() {
-    return this._data;
-  }
-
-  public set data(value: Array<Record<string, unknown>>) {
-    const oldValue = this._data;
-    this._data = value;
-    this.requestUpdate('data', oldValue);
-  }
-
-  public get series() {
-    return this._series;
-  }
-
-  public set series(value: SeriesConfig[]) {
-    const oldValue = this._series;
-    this._series = value;
-    this.requestUpdate('series', oldValue);
-  }
-
-  @state() private chartWidth = 600; // Default width before measurement
-  @state() private tooltip: TooltipData | null = null;
-
-  @query(".chart-container") private container?: HTMLElement;
-
-  private resizeObserver?: ResizeObserver;
-  private prefersReducedMotion = false;
-  private resizeTimeout?: number;
-
-  // Default color palette using RDS tokens
-  private readonly defaultColors = [
-    "var(--rel-bg-info)",
-    "var(--rel-bg-success)",
-    "var(--rel-bg-warning)",
-    "var(--rel-bg-danger)",
-    "var(--rel-text-warning)",
-    "var(--rel-bg-neutral-elevated-3)",
-  ];
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-      position: relative;
-    }
-
-    :host([disabled]) {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-
-    .chart-container {
-      width: 100%;
-      position: relative;
-      background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      padding: var(--rel-spacing-md, 16px);
-    }
-
-    svg {
-      display: block;
-      width: 100%;
-      overflow: visible;
-    }
-
-    .grid-line {
-      stroke: var(--rel-border-default);
-      stroke-width: 1;
-      stroke-dasharray: 2 2;
-    }
-
-    .axis-line {
-      stroke: var(--rel-border-default);
-      stroke-width: 1;
-    }
-
-    .axis-label {
-      fill: var(--rel-text-default);
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-    }
-
-    .bar {
-      cursor: pointer;
-      transition: opacity 0.15s ease;
-    }
-
-    .bar:hover {
-      opacity: 0.8;
-    }
-
-    .bar:focus-visible {
-      outline: 2px solid var(--rel-border-info);
-      outline-offset: 2px;
-    }
-
-    .line-path {
-      fill: none;
-      stroke-width: 2;
-      transition: stroke-width 0.15s ease;
-    }
-
-    .line-path:hover {
-      stroke-width: 3;
-    }
-
-    .point {
-      cursor: pointer;
-      transition: r 0.15s ease;
-    }
-
-    .point:hover {
-      r: 6;
-    }
-
-    .point:focus-visible {
-      outline: 2px solid var(--rel-border-info);
-      outline-offset: 2px;
-    }
-
-    .legend {
-      display: flex;
-      gap: var(--rel-spacing-md);
-      margin-top: var(--rel-spacing-md);
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-
-    .legend-item {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs, 8px);
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .legend-color {
-      width: 12px;
-      height: 12px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    .tooltip {
-      position: absolute;
-      background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      padding: var(--rel-spacing-sm, 12px);
-      box-shadow: var(--rel-shadows-shadow-200);
-      pointer-events: none;
-      z-index: 100;
-      min-width: 120px;
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .tooltip-title {
-      font-weight: var(--rel-fonts-weight-body-semibold, 600);
-      color: var(--rel-text-label);
-      margin-bottom: var(--rel-spacing-xs, 8px);
-    }
-
-    .tooltip-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: var(--rel-spacing-md);
-      margin-bottom: var(--rel-spacing-3xs);
-    }
-
-    .tooltip-row:last-child {
-      margin-bottom: 0;
-    }
-
-    .tooltip-label {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs, 8px);
-      color: var(--rel-text-default);
-    }
-
-    .tooltip-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-    }
-
-    .tooltip-value {
-      font-weight: var(--rel-fonts-weight-body-semibold, 600);
-      color: var(--rel-text-label);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .bar,
-      .line-path,
-      .point {
-        transition: none;
-      }
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.prefersReducedMotion = window.matchMedia(
-      "(prefers-reduced-motion: reduce)"
-    ).matches;
-
-    this.resizeObserver = new ResizeObserver(() => {
-      if (this.resizeTimeout) {
-        clearTimeout(this.resizeTimeout);
-      }
-      this.resizeTimeout = window.setTimeout(() => {
-        this.measureWidth();
-      }, 50);
-    });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-    if (this.resizeTimeout) {
-      clearTimeout(this.resizeTimeout);
-    }
-  }
-
-  firstUpdated() {
-    if (this.container) {
-      this.resizeObserver?.observe(this.container);
-      this.measureWidth();
-    }
-  }
-
-  updated(changedProperties: Map<string, any>) {
-    // Re-measure when data or series changes, but only if we have data to render
-    if ((changedProperties.has("data") || changedProperties.has("series")) && this._data.length > 0) {
-      // Use requestAnimationFrame to ensure DOM is ready
-      requestAnimationFrame(() => {
-        this.measureWidth();
-      });
-    }
-  }
-
-  private measureWidth() {
-    if (this.container) {
-      const containerWidth = this.container.offsetWidth;
-
-      if (containerWidth === 0) return;
-
-      const measuredWidth = containerWidth - 32; // Account for padding
-      const newWidth = Math.max(measuredWidth, 100);
-
-      if (this.chartWidth !== newWidth) {
-        this.chartWidth = newWidth;
-      }
-    }
-  }
-
-  private getChartData(): Array<Record<string, unknown>> {
-    if (this.data && this.data.length > 0) {
-      return this.data;
-    }
-
-    if (this.dataJson) {
-      try {
-        return JSON.parse(this.dataJson);
-      } catch (e) {
-        console.error("Failed to parse data-json:", e);
-        return [];
-      }
-    }
-
-    return [];
-  }
-
-  private getSeriesConfig(): SeriesConfig[] {
-    if (this.series && this.series.length > 0) {
-      return this.series;
-    }
-
-    if (this.seriesJson) {
-      try {
-        return JSON.parse(this.seriesJson);
-      } catch (e) {
-        console.error("Failed to parse series-json:", e);
-        return [];
-      }
-    }
-
-    return [];
-  }
-
-  private getSeriesColor(index: number, config?: SeriesConfig): string {
-    if (config?.colorToken) {
-      return config.colorToken.startsWith("var(")
-        ? config.colorToken
-        : `var(${config.colorToken})`;
-    }
-    return this.defaultColors[index % this.defaultColors.length];
-  }
-
-  private formatXValue(value: unknown): string {
-    if (this.formatX === "date" && value instanceof Date) {
-      return new Intl.DateTimeFormat(this.locale, {
-        month: "short",
-        day: "numeric",
-      }).format(value);
-    }
-
-    if (this.formatX === "date" && typeof value === "string") {
-      try {
-        const date = new Date(value);
-        return new Intl.DateTimeFormat(this.locale, {
-          month: "short",
-          day: "numeric",
-        }).format(date);
-      } catch {
-        return String(value);
-      }
-    }
-
-    return String(value);
-  }
-
-  private calculateScales(data: Array<Record<string, unknown>>, seriesConfigs: SeriesConfig[]) {
-    const padding = { top: 20, right: 20, bottom: 40, left: 50 };
-    const chartHeight = this.height - padding.top - padding.bottom;
-    const chartWidth = this.chartWidth - padding.left - padding.right;
-
-    // Find max value across all series
-    let maxValue = 0;
-    data.forEach((item) => {
-      seriesConfigs.forEach((config) => {
-        const value = Number(item[config.key]) || 0;
-        maxValue = Math.max(maxValue, value);
-      });
-    });
-
-    // Add 10% padding to max
-    maxValue = maxValue * 1.1;
-
-    return {
-      padding,
-      chartHeight,
-      chartWidth,
-      maxValue,
-      xScale: (index: number) => padding.left + (index * chartWidth) / data.length,
-      yScale: (value: number) => padding.top + chartHeight - (value / maxValue) * chartHeight,
-      barWidth: chartWidth / data.length * 0.6 / seriesConfigs.length,
-    };
-  }
-
-  private handleBarHover(
-    event: MouseEvent,
-    datum: Record<string, unknown>,
-    index: number
-  ) {
-    if (this.disabled) return;
-
-    const data = this.getChartData();
-    const seriesConfigs = this.getSeriesConfig();
-    const target = event.currentTarget as SVGElement;
-    const rect = target.getBoundingClientRect();
-
-    const tooltipData: TooltipData = {
-      x: this.formatXValue(datum[this.xKey]),
-      series: seriesConfigs.map((config, i) => ({
-        label: config.label || config.key,
-        value: Number(datum[config.key]) || 0,
-        color: this.getSeriesColor(i, config),
-      })),
-      xPos: rect.left + rect.width / 2,
-      yPos: rect.top,
-    };
-
-    this.tooltip = tooltipData;
-
-    this.dispatchEvent(
-      new CustomEvent("rel-hover", {
-        detail: { index, datum, seriesKey: undefined },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private handlePointHover(
-    event: MouseEvent,
-    datum: Record<string, unknown>,
-    index: number,
-    seriesKey: string
-  ) {
-    if (this.disabled) return;
-
-    const seriesConfigs = this.getSeriesConfig();
-    const seriesIndex = seriesConfigs.findIndex((s) => s.key === seriesKey);
-    const config = seriesConfigs[seriesIndex];
-    const target = event.currentTarget as SVGElement;
-    const rect = target.getBoundingClientRect();
-
-    const tooltipData: TooltipData = {
-      x: this.formatXValue(datum[this.xKey]),
-      series: [{
-        label: config.label || config.key,
-        value: Number(datum[config.key]) || 0,
-        color: this.getSeriesColor(seriesIndex, config),
-      }],
-      xPos: rect.left + rect.width / 2,
-      yPos: rect.top,
-    };
-
-    this.tooltip = tooltipData;
-
-    this.dispatchEvent(
-      new CustomEvent("rel-hover", {
-        detail: { index, datum, seriesKey },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private handleMouseLeave() {
-    this.tooltip = null;
-  }
-
-  private renderGrid(scales: ReturnType<typeof this.calculateScales>) {
-    if (!this.showGrid) return nothing;
-
-    const gridLines = [];
-    const numLines = 5;
-
-    for (let i = 0; i <= numLines; i++) {
-      const y = scales.padding.top + (i * scales.chartHeight) / numLines;
-      gridLines.push(html`
-        <line
-          class="grid-line"
-          x1="${scales.padding.left}"
-          y1="${y}"
-          x2="${scales.padding.left + scales.chartWidth}"
-          y2="${y}"
-          part="grid"
-        />
-      `);
-    }
-
-    return gridLines;
-  }
-
-  private renderAxis(
-    data: Array<Record<string, unknown>>,
-    scales: ReturnType<typeof this.calculateScales>
-  ) {
-    if (!this.showAxis) return nothing;
-
-    const yAxisLabels = [];
-    const numLabels = 5;
-
-    for (let i = 0; i <= numLabels; i++) {
-      const value = (scales.maxValue * (numLabels - i)) / numLabels;
-      const y = scales.padding.top + (i * scales.chartHeight) / numLabels;
-
-      yAxisLabels.push(html`
-        <text
-          class="axis-label"
-          x="${scales.padding.left - 10}"
-          y="${y + 4}"
-          text-anchor="end"
-          part="axis"
-        >
-          ${Math.round(value)}
-        </text>
-      `);
-    }
-
-    const xAxisLabels = data.map((item, index) => {
-      const x = scales.xScale(index) + scales.chartWidth / data.length / 2;
-      return html`
-        <text
-          class="axis-label"
-          x="${x}"
-          y="${scales.padding.top + scales.chartHeight + 20}"
-          text-anchor="middle"
-          part="axis"
-        >
-          ${this.formatXValue(item[this.xKey])}
-        </text>
-      `;
-    });
-
-    return html`
-      <line
-        class="axis-line"
-        x1="${scales.padding.left}"
-        y1="${scales.padding.top + scales.chartHeight}"
-        x2="${scales.padding.left + scales.chartWidth}"
-        y2="${scales.padding.top + scales.chartHeight}"
-        part="axis"
-      />
-      <line
-        class="axis-line"
-        x1="${scales.padding.left}"
-        y1="${scales.padding.top}"
-        x2="${scales.padding.left}"
-        y2="${scales.padding.top + scales.chartHeight}"
-        part="axis"
-      />
-      ${yAxisLabels} ${xAxisLabels}
-    `;
-  }
-
-  private renderBarChart(
-    data: Array<Record<string, unknown>>,
-    seriesConfigs: SeriesConfig[]
-  ) {
-    const scales = this.calculateScales(data, seriesConfigs);
-
-    const bars = data.flatMap((item, dataIndex) => {
-      return seriesConfigs.map((config, seriesIndex) => {
-        const value = Number(item[config.key]) || 0;
-        const x =
-          scales.xScale(dataIndex) +
-          (scales.chartWidth / data.length - scales.barWidth * seriesConfigs.length) / 2 +
-          seriesIndex * scales.barWidth;
-        const y = scales.yScale(value);
-        const height = scales.padding.top + scales.chartHeight - y;
-        const color = this.getSeriesColor(seriesIndex, config);
-
-        return html`
-          <rect
-            class="bar"
-            part="bar"
-            x="${x}"
-            y="${y}"
-            width="${scales.barWidth}"
-            height="${height}"
-            fill="${color}"
-            role="button"
-            tabindex="0"
-            aria-label="${config.label || config.key}: ${value}"
-            @mouseenter="${(e: MouseEvent) => this.handleBarHover(e, item, dataIndex)}"
-            @mouseleave="${this.handleMouseLeave}"
-            @focus="${(e: FocusEvent) => this.handleBarHover(e as any, item, dataIndex)}"
-            @blur="${this.handleMouseLeave}"
-          />
-        `;
-      });
-    });
-
-    return html`
-      <svg
-        height="${this.height}"
-        part="svg"
-        role="img"
-        aria-label="Bar chart"
-      >
-        ${this.renderGrid(scales)} ${this.renderAxis(data, scales)} ${bars}
-      </svg>
-    `;
-  }
-
-  private renderLineChart(
-    data: Array<Record<string, unknown>>,
-    seriesConfigs: SeriesConfig[]
-  ) {
-    const scales = this.calculateScales(data, seriesConfigs);
-
-    const lines = seriesConfigs.map((config, seriesIndex) => {
-      const points = data.map((item, index) => {
-        const value = Number(item[config.key]) || 0;
-        const x = scales.xScale(index) + scales.chartWidth / data.length / 2;
-        const y = scales.yScale(value);
-        return { x, y, value, item, index };
-      });
-
-      const pathData = points
-        .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
-        .join(" ");
-
-      return html`
-        <path
-          class="line-path"
-          part="line"
-          d="${pathData}"
-          stroke="${this.getSeriesColor(seriesIndex, config)}"
-        />
-        ${points.map(
-          (p) => html`
-            <circle
-              class="point"
-              part="point"
-              cx="${p.x}"
-              cy="${p.y}"
-              r="4"
-              fill="${this.getSeriesColor(seriesIndex, config)}"
-              role="button"
-              tabindex="0"
-              aria-label="${config.label || config.key}: ${p.value}"
-              @mouseenter="${(e: MouseEvent) =>
-                this.handlePointHover(e, p.item, p.index, config.key)}"
-              @mouseleave="${this.handleMouseLeave}"
-              @focus="${(e: FocusEvent) =>
-                this.handlePointHover(e as any, p.item, p.index, config.key)}"
-              @blur="${this.handleMouseLeave}"
-            />
-          `
-        )}
-      `;
-    });
-
-    return html`
-      <svg
-        height="${this.height}"
-        part="svg"
-        role="img"
-        aria-label="Line chart"
-      >
-        ${this.renderGrid(scales)} ${this.renderAxis(data, scales)} ${lines}
-      </svg>
-    `;
-  }
-
-  private renderLegend(seriesConfigs: SeriesConfig[]) {
-    if (!this.showLegend || seriesConfigs.length === 0) return nothing;
-
-    return html`
-      <div class="legend" part="legend">
-        ${seriesConfigs.map(
-          (config, index) => html`
-            <div class="legend-item">
-              <div
-                class="legend-color"
-                style="background: ${this.getSeriesColor(index, config)}"
-              ></div>
-              <span>${config.label || config.key}</span>
-            </div>
-          `
-        )}
-      </div>
-    `;
-  }
-
-  private renderTooltip() {
-    if (!this.tooltip) return nothing;
-
-    const containerRect = this.container?.getBoundingClientRect();
-    if (!containerRect) return nothing;
-
-    const tooltipX = this.tooltip.xPos - containerRect.left;
-    const tooltipY = this.tooltip.yPos - containerRect.top - 10;
-
-    return html`
-      <div
-        class="tooltip"
-        part="tooltip"
-        style="left: ${tooltipX}px; top: ${tooltipY}px; transform: translate(-50%, -100%)"
-      >
-        <div class="tooltip-title">${this.tooltip.x}</div>
-        ${this.tooltip.series.map(
-          (s) => html`
-            <div class="tooltip-row">
-              <div class="tooltip-label">
-                <div
-                  class="tooltip-dot"
-                  style="background: ${s.color}"
-                ></div>
-                <span>${s.label}</span>
-              </div>
-              <span class="tooltip-value">${s.value}</span>
-            </div>
-          `
-        )}
-      </div>
-    `;
-  }
-
-  render() {
-    const data = this.getChartData();
-    const seriesConfigs = this.getSeriesConfig();
-
-    if (!data.length || !seriesConfigs.length || !this.xKey) {
-      return html`
-        <div class="chart-container" part="container">
-          <p style="text-align: center; color: var(--rel-text-placeholder); padding: 40px;">
-            No data available
-          </p>
-        </div>
-      `;
-    }
-
-    return html`
-      <div class="chart-container" part="container">
-        ${this.type === "bar"
-          ? this.renderBarChart(data, seriesConfigs)
-          : this.renderLineChart(data, seriesConfigs)}
-        ${this.renderLegend(seriesConfigs)} ${this.renderTooltip()}
-      </div>
-    `;
-  }
-}