@reliability-design/web 1.0.3 → 1.1.1

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

@@ -0,0 +1,736 @@
+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;
+}
+
+@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-colors-blue-primary)",
+    "var(--rel-colors-green-primary)",
+    "var(--rel-colors-orange-warning)",
+    "var(--rel-colors-red-primary)",
+    "var(--rel-colors-gold)",
+    "var(--rel-colors-platinum)",
+  ];
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      position: relative;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    .chart-container {
+      width: 100%;
+      position: relative;
+      background: var(--rel-colors-white, #fff);
+      border: 1px solid var(--rel-border-default, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      padding: var(--rel-spacing-space-md, 16px);
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      overflow: visible;
+    }
+
+    .grid-line {
+      stroke: var(--rel-colors-gray-border, #ddd);
+      stroke-width: 1;
+      stroke-dasharray: 2 2;
+    }
+
+    .axis-line {
+      stroke: var(--rel-colors-gray-divider, #bdbdbd);
+      stroke-width: 1;
+    }
+
+    .axis-label {
+      fill: var(--rel-text-primary, #333);
+      font-size: var(--rel-fontSizes-xs, 10px);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+    }
+
+    .bar {
+      cursor: pointer;
+      transition: opacity 0.15s ease;
+    }
+
+    .bar:hover {
+      opacity: 0.8;
+    }
+
+    .bar:focus-visible {
+      outline: 2px solid var(--rel-border-info, #0091ea);
+      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, #0091ea);
+      outline-offset: 2px;
+    }
+
+    .legend {
+      display: flex;
+      gap: var(--rel-spacing-space-md);
+      margin-top: var(--rel-spacing-space-md);
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs, 8px);
+      font-size: var(--rel-fontSizes-sm, 12px);
+      color: var(--rel-text-primary, #333);
+    }
+
+    .legend-color {
+      width: 12px;
+      height: 12px;
+      border-radius: var(--rel-borders-radius-border-radius-100);
+    }
+
+    .tooltip {
+      position: absolute;
+      background: var(--rel-colors-white, #fff);
+      border: 1px solid var(--rel-border-default, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      padding: var(--rel-spacing-space-sm, 12px);
+      box-shadow: var(--rel-shadows-shadow-200);
+      pointer-events: none;
+      z-index: 100;
+      font-size: var(--rel-fontSizes-sm, 12px);
+      min-width: 120px;
+    }
+
+    .tooltip-title {
+      font-weight: var(--rel-fontWeights-semibold, 600);
+      color: var(--rel-text-heading, #2b2b2b);
+      margin-bottom: var(--rel-spacing-space-xs, 8px);
+    }
+
+    .tooltip-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--rel-spacing-space-md);
+      margin-bottom: var(--rel-spacing-space-3xs);
+    }
+
+    .tooltip-row:last-child {
+      margin-bottom: 0;
+    }
+
+    .tooltip-label {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs, 8px);
+      color: var(--rel-text-primary, #333);
+    }
+
+    .tooltip-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    .tooltip-value {
+      font-weight: var(--rel-fontWeights-semibold, 600);
+      color: var(--rel-text-heading, #2b2b2b);
+    }
+
+    @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, #a9a9a9); 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>
+    `;
+  }
+}