@ds-mo/ui 2.10.4 → 2.11.1

package/src/wc/components/ChartBar/index.ts

@@ -0,0 +1 @@
+export type { ChartDatum } from '../../utils/chart-types';

package/src/wc/components/ChartDonut/ChartDonut.tsx

@@ -0,0 +1,184 @@
+import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';
+import { arc, pie } from 'd3-shape';
+import { categoryColor } from '../../utils/chart-colors';
+import { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';
+import type { ChartDatum } from '../../utils/chart-types';
+
+const DIMMED_OPACITY = 0.25;
+/** Gap between the center value and caption line boxes. */
+const CENTER_GAP_PX = 0;
+/** Fraction of the inner-circle diameter center text is allowed to use before truncating. */
+const CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;
+
+@Component({
+  tag: 'ds-chart-donut',
+  styleUrl: 'ChartDonut.css',
+  scoped: true,
+})
+export class ChartDonut {
+  /** Slices to render. Set as a JS property (not an HTML attribute). */
+  @Prop() data: ChartDatum[] = [];
+  @Prop() size: number = 175;
+  /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */
+  @Prop() thickness: number | string = TOKEN_DEFAULTS.size200;
+  /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */
+  @Prop() cornerRadius: number | string = TOKEN_DEFAULTS.radius025;
+  /** Gap between slices, in degrees. */
+  @Prop() gap: number = 1;
+  /** Primary center value; defaults to the sum of `data` values (e.g. "187", "40.9%"). */
+  @Prop() centerValue: string | undefined;
+  /** Secondary caption below the center value (e.g. "Total", "Normal"). Rendered uppercase. */
+  @Prop() centerCaption: string | undefined;
+  /**
+   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
+   * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.
+   * Falls back to this component's own pointer/focus hover when unset.
+   */
+  @Prop() activeLabel: string | null = null;
+
+  @State() private hoveredLabel: string | null = null;
+  /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */
+  @State() private displayedValueText: string = '';
+  @State() private displayedCaptionText: string = '';
+
+  /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */
+  @Event() dsSliceHover!: EventEmitter<ChartDatum | null>;
+
+  private valueTextEl?: SVGTextElement;
+  private captionTextEl?: SVGTextElement;
+
+  private handleHover(datum: ChartDatum | null) {
+    this.hoveredLabel = datum?.label ?? null;
+    this.dsSliceHover.emit(datum);
+  }
+
+  componentDidRender() {
+    const radius = this.size / 2;
+    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);
+    const innerRadius = radius - thicknessPx;
+    const maxWidth = innerRadius * 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;
+    const total = this.data.reduce((sum, d) => sum + d.value, 0);
+
+    const fullValueText = this.centerValue ?? formatCompactNumber(total);
+    if (this.valueTextEl) {
+      const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);
+      if (truncated !== this.displayedValueText) this.displayedValueText = truncated;
+      else this.valueTextEl.textContent = truncated;
+    }
+
+    const fullCaptionText = this.centerCaption ?? '';
+    if (this.captionTextEl && fullCaptionText) {
+      const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);
+      if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;
+      else this.captionTextEl.textContent = truncated;
+    }
+  }
+
+  render() {
+    const radius = this.size / 2;
+    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);
+    const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);
+    const innerRadius = radius - thicknessPx;
+    const total = this.data.reduce((sum, d) => sum + d.value, 0);
+    // d3's pie() divides each value by the total to get an angle — with an all-zero total
+    // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.
+    const isEmpty = total <= 0;
+    // Highlight/dim from either this component's own hover or an externally-synced label
+    // (e.g. a sibling ds-chart-legend row).
+    const highlightLabel = this.activeLabel ?? this.hoveredLabel;
+
+    const arcGenerator = arc<{ startAngle: number; endAngle: number }>()
+      .innerRadius(innerRadius)
+      .outerRadius(radius)
+      .cornerRadius(cornerRadiusPx)
+      .padAngle((this.gap * Math.PI) / 180);
+
+    const slices = isEmpty
+      ? []
+      : pie<ChartDatum>()
+          .value(d => d.value)
+          .sort(null)(this.data);
+
+    const emptyRingPath = isEmpty
+      ? arc<{ startAngle: number; endAngle: number }>()
+          .innerRadius(innerRadius)
+          .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })
+      : null;
+
+    // Precise vertical centering for the two-line center text, using the real line-height of
+    // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.
+    const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);
+    const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);
+    const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;
+    const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;
+
+    // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).
+    const fullValueText = this.centerValue ?? formatCompactNumber(total);
+    const fullCaptionText = this.centerCaption ?? '';
+
+    return (
+      <Host class="chart-donut">
+        <div class="chart-donut__wrapper" style={{ width: `${this.size}px`, height: `${this.size}px` }}>
+          <svg
+            class="chart-donut__svg"
+            viewBox={`0 0 ${this.size} ${this.size}`}
+            width={this.size}
+            height={this.size}
+          >
+            <g transform={`translate(${radius}, ${radius})`}>
+              {isEmpty ? (
+                <path d={emptyRingPath ?? undefined} fill="var(--color-background-faint-neutral)" aria-label="No data" />
+              ) : (
+                slices.map((slice, i) => {
+                  const datum = this.data[i];
+                  const isDimmed = highlightLabel != null && datum.label !== highlightLabel;
+                  return (
+                    <path
+                      key={datum.label}
+                      d={arcGenerator(slice) ?? undefined}
+                      fill={datum.color ?? categoryColor(i)}
+                      opacity={isDimmed ? DIMMED_OPACITY : 1}
+                      tabindex={0}
+                      role="img"
+                      aria-label={`${datum.label}: ${datum.value}`}
+                      onMouseEnter={() => this.handleHover(datum)}
+                      onMouseLeave={() => this.handleHover(null)}
+                      onFocus={() => this.handleHover(datum)}
+                      onBlur={() => this.handleHover(null)}
+                    />
+                  );
+                })
+              )}
+            </g>
+            <text
+              class="chart-donut__center-value"
+              x={radius}
+              y={centerValueY}
+              text-anchor="middle"
+              dominant-baseline="central"
+              ref={el => {
+                this.valueTextEl = (el as SVGTextElement) ?? undefined;
+              }}
+            >
+              {this.displayedValueText || fullValueText}
+            </text>
+            {fullCaptionText && (
+              <text
+                class="chart-donut__center-caption"
+                x={radius}
+                y={centerCaptionY}
+                text-anchor="middle"
+                dominant-baseline="central"
+                ref={el => {
+                  this.captionTextEl = (el as SVGTextElement) ?? undefined;
+                }}
+              >
+                {this.displayedCaptionText || fullCaptionText}
+              </text>
+            )}
+          </svg>
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/ChartDonut/index.ts

@@ -0,0 +1 @@
+export type { ChartDatum } from '../../utils/chart-types';

package/src/wc/components/ChartLegend/ChartLegend.tsx

@@ -0,0 +1,114 @@
+import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';
+import { categoryColor } from '../../utils/chart-colors';
+import { formatCompactNumber } from '../../utils';
+import type { ChartLegendItem } from '../../utils/chart-types';
+
+export type ChartLegendDirection = 'vertical' | 'horizontal';
+
+const DIMMED_OPACITY = 0.25;
+
+/**
+ * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style
+ * legends differently (list w/ values, compact chips, bare swatches, external
+ * stat callouts) — this covers the common "swatch + label + optional value" case.
+ * Consumers who need a different treatment skip this component entirely and
+ * render their own markup against the same `ChartDatum[]` data.
+ */
+@Component({
+  tag: 'ds-chart-legend',
+  styleUrl: 'ChartLegend.css',
+  scoped: true,
+})
+export class ChartLegend {
+  /** Legend entries. Set as a JS property (not an HTML attribute). */
+  @Prop() items: ChartLegendItem[] = [];
+  @Prop() direction: ChartLegendDirection = 'vertical';
+  /** Show each item's share of the total (of items with a `value`) alongside its count. */
+  @Prop() showPercentage: boolean = true;
+  /**
+   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
+   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other
+   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,
+   * since that's reserved for a real pointer/keyboard interaction on this row.
+   */
+  @Prop() activeLabel: string | null = null;
+
+  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a "you can
+   * click here" affordance) never shows just because an external row was synced in. */
+  @State() private hoveredLabel: string | null = null;
+
+  /** Fires on row hover/focus with the item, or `null` on leave/blur. */
+  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;
+  /** Fires when a deep-linkable row (`item.href` set) is activated. */
+  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;
+
+  private handleHover(item: ChartLegendItem | null) {
+    this.hoveredLabel = item?.label ?? null;
+    this.dsItemHover.emit(item);
+  }
+
+  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {
+    this.dsItemClick.emit({ item, originalEvent });
+  };
+
+  render() {
+    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);
+    // Highlight/dim from either this component's own hover or an externally-synced label
+    // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.
+    const highlightLabel = this.activeLabel ?? this.hoveredLabel;
+
+    return (
+      <Host class={{ 'chart-legend': true, [`chart-legend--${this.direction}`]: true }}>
+        {/* mouseleave lives on the list, not each row — the row-gap between items is still
+            inside the list's box, so crossing it while moving between rows never fires this.
+            Only actually leaving the whole list does, and that clears with no delay. */}
+        <ul class="chart-legend__list" onMouseLeave={() => this.handleHover(null)}>
+          {this.items.map((item, i) => {
+            const isDimmed = highlightLabel != null && item.label !== highlightLabel;
+            const RowTag = item.href ? 'a' : 'div';
+
+            return (
+              <li class="chart-legend__list-item" key={item.label}>
+                <RowTag
+                  class={{
+                    'chart-legend__item': true,
+                    'chart-legend__item--interactive': !!item.href,
+                  }}
+                  style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}
+                  href={item.href}
+                  onClick={item.href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}
+                  onMouseEnter={() => this.handleHover(item)}
+                  onFocus={() => this.handleHover(item)}
+                  onBlur={() => this.handleHover(null)}
+                >
+                  <span class="chart-legend__swatch-box">
+                    <span class="chart-legend__swatch" style={{ backgroundColor: item.color ?? categoryColor(i) }} />
+                  </span>
+                  <span class="chart-legend__label" title={item.label}>
+                    <ds-text as="span" variant="text-body-medium" color="secondary">
+                      {item.label}
+                    </ds-text>
+                  </span>
+                  {item.value != null && (
+                    <span class="chart-legend__value" title={String(item.value)}>
+                      <ds-text as="span" variant="text-body-medium" color="primary">
+                        {formatCompactNumber(item.value)}
+                      </ds-text>
+                    </span>
+                  )}
+                  {item.value != null && this.showPercentage && (
+                    <span class="chart-legend__percentage">
+                      <ds-text as="span" variant="text-body-medium" color="primary">
+                        {(total ? (item.value / total) * 100 : 0).toFixed(1)}%
+                      </ds-text>
+                    </span>
+                  )}
+                </RowTag>
+              </li>
+            );
+          })}
+        </ul>
+      </Host>
+    );
+  }
+}

package/src/wc/components/ChartLegend/index.ts

@@ -0,0 +1,2 @@
+export type { ChartLegendDirection } from './ChartLegend';
+export type { ChartLegendItem } from '../../utils/chart-types';

package/src/wc/components/ChartLine/ChartLine.tsx

@@ -0,0 +1,102 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+import { line as lineShape } from 'd3-shape';
+import { scaleLinear, scalePoint } from 'd3-scale';
+import { max } from 'd3-array';
+import { categoryColor } from '../../utils/chart-colors';
+import type { ChartSeries } from '../../utils/chart-types';
+
+const MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };
+
+@Component({
+  tag: 'ds-chart-line',
+  styleUrl: 'ChartLine.css',
+  scoped: true,
+})
+export class ChartLine {
+  /** One or more series to plot. Set as a JS property (not an HTML attribute). */
+  @Prop() series: ChartSeries[] = [];
+  /** X-axis labels — must match each series' `data` length. Set as a JS property. */
+  @Prop() categories: string[] = [];
+  @Prop() width: number = 480;
+  @Prop() height: number = 240;
+  @Prop() showPoints: boolean = true;
+
+  render() {
+    const innerWidth = this.width - MARGIN.left - MARGIN.right;
+    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;
+
+    const allValues = this.series.flatMap(s => s.data);
+    const yMax = max(allValues) ?? 0;
+
+    const xScale = scalePoint<number>()
+      .domain(this.categories.map((_, i) => i))
+      .range([0, innerWidth]);
+
+    const yScale = scaleLinear()
+      .domain([0, yMax || 1])
+      .range([innerHeight, 0])
+      .nice();
+
+    const lineGenerator = lineShape<number>()
+      .x((_, i) => xScale(i) ?? 0)
+      .y(d => yScale(d));
+
+    const yTicks = yScale.ticks(4);
+
+    return (
+      <Host class="chart-line">
+        <svg
+          class="chart-line__svg"
+          viewBox={`0 0 ${this.width} ${this.height}`}
+          width={this.width}
+          height={this.height}
+          role="img"
+          aria-label={this.series.map(s => s.name).join(', ')}
+        >
+          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>
+            {yTicks.map(tick => (
+              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>
+                <line class="chart-line__gridline" x1={0} x2={innerWidth} />
+                <text class="chart-line__axis-label" x={-8} text-anchor="end" dominant-baseline="middle">
+                  {tick}
+                </text>
+              </g>
+            ))}
+
+            {this.categories.map((label, i) => (
+              <text
+                key={`x-${label}`}
+                class="chart-line__axis-label"
+                x={xScale(i) ?? 0}
+                y={innerHeight + 16}
+                text-anchor="middle"
+              >
+                {label}
+              </text>
+            ))}
+
+            {this.series.map((s, si) => {
+              const color = s.color ?? categoryColor(si);
+              return (
+                <g key={s.name}>
+                  <path class="chart-line__path" d={lineGenerator(s.data) ?? undefined} stroke={color} />
+                  {this.showPoints &&
+                    s.data.map((d, i) => (
+                      <circle
+                        key={`${s.name}-${i}`}
+                        class="chart-line__point"
+                        cx={xScale(i) ?? 0}
+                        cy={yScale(d)}
+                        r={3}
+                        fill={color}
+                      />
+                    ))}
+                </g>
+              );
+            })}
+          </g>
+        </svg>
+      </Host>
+    );
+  }
+}

package/src/wc/components/ChartLine/index.ts

@@ -0,0 +1 @@
+export type { ChartSeries } from '../../utils/chart-types';

package/src/wc/components/TooltipDataViz/TooltipDataViz.tsx

@@ -0,0 +1,82 @@
+import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';
+
+const CURSOR_OFFSET_PX = 12;
+const VIEWPORT_PAD_PX = 8;
+
+export type TooltipDataVizSide = 'left' | 'right';
+export type TooltipDataVizAlign = 'top' | 'bottom';
+
+/**
+ * Positioned value/label callout for chart hover interactions (donut slice, bar,
+ * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+ * charts hover-highlight data that lives inside an SVG, so the chart itself computes
+ * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
+ *
+ * Renders `position: absolute` — place inside a `position: relative` chart wrapper,
+ * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right
+ * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge
+ * keeps it on-screen.
+ */
+@Component({
+  tag: 'ds-tooltip-data-viz',
+  styleUrl: 'TooltipDataViz.css',
+  scoped: true,
+})
+export class TooltipDataViz {
+  @Element() el!: HTMLElement;
+
+  @Prop() value: string | number = '';
+  @Prop() label: string = '';
+  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */
+  @Prop() x: number = 0;
+  @Prop() y: number = 0;
+
+  @State() private side: TooltipDataVizSide = 'right';
+  @State() private align: TooltipDataVizAlign = 'bottom';
+
+  componentDidLoad() {
+    this.calculatePlacement();
+  }
+
+  @Watch('x')
+  @Watch('y')
+  onAnchorChange() {
+    requestAnimationFrame(() => this.calculatePlacement());
+  }
+
+  private calculatePlacement() {
+    const rect = this.el.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+
+    const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';
+    const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';
+
+    if (nextSide !== this.side) this.side = nextSide;
+    if (nextAlign !== this.align) this.align = nextAlign;
+  }
+
+  render() {
+    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;
+    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;
+
+    return (
+      <Host
+        class="tooltip-data-viz"
+        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}
+      >
+        <div class="tooltip-data-viz__item">
+          <span class="tooltip-data-viz__label">
+            <ds-text as="span" variant="text-body-medium" color="var(--color-foreground-on-translucent-background-secondary)">
+              {this.label}
+            </ds-text>
+          </span>
+          <span class="tooltip-data-viz__value">
+            <ds-text as="span" variant="text-body-medium-emphasis" color="var(--color-foreground-on-translucent-background-primary)">
+              {this.value}
+            </ds-text>
+          </span>
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/TooltipDataViz/index.ts

@@ -0,0 +1 @@
+export type { TooltipDataVizSide, TooltipDataVizAlign } from './TooltipDataViz';