@kubex/zinc 1.1.185 → 2.0.0

package/src/components/channel-tile/channel-tile.scss

@@ -16,23 +16,24 @@
   overflow: hidden;
   cursor: pointer;
   border-right: 1px solid rgb(var(--zn-border-color));
-  background-color: rgb(var(--zn-body));
+  background-color: rgb(var(--zn-color-tab));
   transition: background-color 0.15s ease;
   user-select: none;
 
   &:focus-visible {
-    outline: 2px solid rgb(var(--zn-primary));
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--zn-input-focus-ring-color, rgba(var(--zn-primary), 0.35));
   }
 }
 
 :host(.active) .channel-tile {
   background-color: rgb(var(--zn-panel));
+  box-shadow: inset 0 -2px 0 rgb(var(--zn-primary));
   cursor: default;
 }
 
-:host(:not(.active)) .channel-tile--active:hover {
-  background-color: rgb(var(--zn-panel));
+:host(:not(.active)) .channel-tile:not(.channel-tile--incoming):hover {
+  background-color: rgb(var(--zn-body));
 }
 
 .channel-tile--incoming {
@@ -52,15 +53,17 @@
   align-items: center;
   flex-shrink: 0;
   height: 24px;
-  padding: 0 var(--zn-spacing-small);
-  background-color: rgb(var(--zn-color-tab));
+  padding: 0 12px;
+  background-color: var(--zn-color-neutral-100);
 
   h3 {
     margin: 0;
-    font-size: var(--zn-text-h3-font-size);
-    line-height: var(--zn-text-h3-line-height);
-    font-weight: var(--zn-text-h3-font-weight);
-    color: rgb(var(--zn-text-heading));
+    font-size: 10px;
+    line-height: 24px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: rgb(var(--zn-color-muted-text));
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -84,18 +87,62 @@
   flex: 1;
   display: flex;
   align-items: center;
-  gap: var(--zn-spacing-small);
-  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+  gap: 10px;
+  padding: 0 12px;
   width: 100%;
+  min-height: 52px;
+  box-sizing: border-box;
   overflow: hidden;
   z-index: 1;
 }
 
+// The 32px leading circle, shared by the active icon, the accept button and the reject control
+.channel-tile__lead {
+  --zn-button-height: 30px; // inside the 1px border
+  --zn-button-plain-hover-background: transparent;
+
+  position: relative;
+  flex: none;
+  display: grid;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 1px solid rgb(var(--zn-border-color));
+  background-color: rgb(var(--zn-panel));
+  color: rgb(var(--zn-color-muted-text));
+  transition: color 0.15s ease, border-color 0.15s ease;
+
+  zn-icon {
+    --icon-color: currentColor;
+
+    color: inherit;
+  }
+}
+
+.channel-tile--available .channel-tile__lead {
+  border-style: dashed;
+  background-color: transparent;
+}
+
+.channel-tile:not(.channel-tile--default) .channel-tile__lead {
+  color: rgb(var(--channel-tile-color));
+  border-color: rgb(var(--channel-tile-color));
+}
+
+:host(.active) .channel-tile--default .channel-tile__lead {
+  color: rgb(var(--zn-primary));
+  border-color: rgb(var(--zn-primary));
+}
+
 .channel-tile__content {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   flex-grow: 1;
-  gap: 4px;
+  gap: 2px;
+  min-height: 32px;
   overflow: hidden;
 
   @container (max-width: 200px) {
@@ -105,11 +152,10 @@
 
 .channel-tile__title {
   margin: 0;
-  font-size: var(--zn-text-heading-section-font-size);
-  line-height: var(--zn-text-heading-section-line-height);
-  font-weight: var(--zn-text-heading-section-font-weight);
-  color: var(--zn-text-heading-section-color);
-  text-transform: var(--zn-text-heading-section-transform);
+  font-size: 13px;
+  line-height: 15px;
+  font-weight: 600;
+  color: rgb(var(--zn-text-heading));
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -117,11 +163,10 @@
 
 .channel-tile__subtitle {
   margin: 0;
-  font-size: var(--zn-text-subheading-small-font-size);
-  line-height: var(--zn-text-subheading-small-line-height);
-  font-weight: var(--zn-text-subheading-small-font-weight);
-  color: var(--zn-text-subheading-small-color);
-  text-transform: var(--zn-text-subheading-small-transform);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 400;
+  color: rgb(var(--zn-color-muted-text));
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -134,25 +179,18 @@
   gap: var(--zn-spacing-small);
 }
 
-.channel-tile__reject {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border: none;
+.channel-tile--available .channel-tile__reject {
   padding: 0;
   margin: 0;
-  background-color: rgba(var(--zn-color-panel));
+  border-style: solid;
+  background-color: rgb(var(--zn-panel));
   color: rgb(var(--zn-color-error));
   cursor: pointer;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 
   &:hover {
-    background-color: rgba(var(--zn-color-error));
-    color: rgb(var(--zn-color-panel));
+    background-color: rgb(var(--zn-color-error));
+    border-color: rgb(var(--zn-color-error));
+    color: rgb(var(--zn-panel));
   }
 }
 
@@ -161,8 +199,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 3px;
-  background-color: rgba(var(--zn-shadow), 0.2);
+  height: 2px;
   overflow: hidden;
   z-index: 1;
 
@@ -196,7 +233,3 @@
 .channel-tile--disabled {
   --channel-tile-color: var(--zn-color-disabled, 204, 204, 204);
 }
-
-.channel-tile--incoming .channel-tile__body zn-button {
-  --zn-color-tab: var(--zn-color-panel);
-}

package/src/components/chart/builders.test.ts

@@ -430,3 +430,49 @@ describe('buildSankeyOption', () => {
     expect((opt.tooltip as any).trigger).to.equal('item');
   });
 });
+
+describe('cartesian legends', () => {
+  it('hides the legend for a single series', () => {
+    const opt = buildLineOption({ ...baseProps, type: 'line' });
+    expect((opt.legend as any).show).to.equal(false);
+  });
+
+  it('shows the legend for several series, ignoring hidden ones', () => {
+    const two = buildLineOption({ ...baseProps, data: [{ name: 'A', data: [1] }, { name: 'B', data: [2] }] });
+    const oneVisible = buildLineOption({ ...baseProps, data: [{ name: 'A', data: [1] }, { name: '_base', data: [2] }] });
+    expect((two.legend as any).show).to.equal(true);
+    expect((oneVisible.legend as any).show).to.equal(false);
+  });
+
+  it('scrolls the legend on one line so it never wraps into the grid', () => {
+    const opt = buildLineOption({ ...baseProps, data: [{ name: 'A', data: [1] }, { name: 'B', data: [2] }] });
+    expect((opt.legend as any).type).to.equal('scroll');
+  });
+});
+
+describe('markLatest', () => {
+  it('hides every point but the last, which gets a hollow dot', () => {
+    const series = (buildAreaOption({ ...baseProps, type: 'area', markLatest: true }).series as any[])[0];
+    expect(series.symbol).to.equal('none');
+    expect(series.data.slice(0, 2)).to.deep.equal([10, 20]);
+    expect(series.data[2]).to.deep.equal({ value: 30, symbol: 'emptyCircle', symbolSize: 8 });
+  });
+
+  it('marks the last point with a value, skipping trailing gaps', () => {
+    const data = [{ name: 'A', data: [10, 20, null] }];
+    const series = (buildAreaOption({ ...baseProps, type: 'area', markLatest: true, data }).series as any[])[0];
+    expect(series.data).to.deep.equal([10, { value: 20, symbol: 'emptyCircle', symbolSize: 8 }, null]);
+  });
+
+  it('leaves a silent reference series unmarked', () => {
+    const data = [{ name: 'Pass mark', data: [70, 70], silent: true, symbol: 'none' }];
+    const series = (buildAreaOption({ ...baseProps, type: 'area', markLatest: true, data }).series as any[])[0];
+    expect(series.data).to.deep.equal([70, 70]);
+  });
+
+  it('leaves the points alone by default', () => {
+    const series = (buildLineOption({ ...baseProps, type: 'line' }).series as any[])[0];
+    expect(series.symbol).to.equal(undefined);
+    expect(series.data).to.deep.equal([10, 20, 30]);
+  });
+});

package/src/components/chart/builders.ts

@@ -81,6 +81,8 @@ export interface BuilderProps {
   indicators?: RadarIndicator[];
   minValue?: number;
   maxValue?: number;
+  /** Marks each line's last point with a hollow dot and hides the others. */
+  markLatest?: boolean;
 }
 
 function baseOption(props: BuilderProps, tooltipTrigger: 'axis' | 'item'): EChartsOption {
@@ -102,17 +104,24 @@ function baseOption(props: BuilderProps, tooltipTrigger: 'axis' | 'item'): EChar
         : undefined,
     },
     legend: {
+      type: 'scroll',
       top: 0,
       right: 0,
       icon: 'circle',
       textStyle: { color: textColor },
+      pageIconSize: 10,
+      pageTextStyle: { color: textColor },
     },
   };
 }
 
 function commonOption(props: BuilderProps): EChartsOption {
+  const base = baseOption(props, 'axis');
+  // A lone series is named by the chart's own caption, so its legend only repeats it.
+  const named = props.data.filter((s) => !s.name.startsWith('_')).length;
   return {
-    ...baseOption(props, 'axis'),
+    ...base,
+    legend: { ...(base.legend as Record<string, unknown>), show: named > 1 },
     grid: {
       left: 40,
       right: 20,
@@ -223,14 +232,28 @@ export function buildBarOption(props: BuilderProps): EChartsOption {
   };
 }
 
+// latestMarker hides a line's points except the last, which gets a hollow dot.
+function latestMarker(props: BuilderProps, s: SeriesItem): Record<string, unknown> {
+  if (!props.markLatest || s.silent || !s.data?.length) return {};
+  const data = normalizeData(s.data);
+  // A null is a gap, so the marker goes on the last point that has a value.
+  const last = data.findLastIndex(d => d !== null && d !== undefined && !(Array.isArray(d) && d[d.length - 1] === null));
+  if (last < 0) return { symbol: 'none' };
+  return {
+    symbol: 'none',
+    data: data.map((d, i) => (i === last ? { value: d, symbol: 'emptyCircle', symbolSize: 8 } : d)),
+  };
+}
+
 export function buildLineOption(props: BuilderProps): EChartsOption {
   return {
     ...commonOption(props),
     xAxis: buildXAxis(props, true),
     yAxis: buildYAxis(props),
-    series: seriesFromProps(props, 'line', () => ({
+    series: seriesFromProps(props, 'line', (s) => ({
       symbolSize: props.datapointSize,
       smooth: props.smooth,
+      ...latestMarker(props, s),
     })),
   };
 }
@@ -240,10 +263,11 @@ export function buildAreaOption(props: BuilderProps): EChartsOption {
     ...commonOption(props),
     xAxis: buildXAxis(props, true),
     yAxis: buildYAxis(props),
-    series: seriesFromProps(props, 'line', () => ({
+    series: seriesFromProps(props, 'line', (s) => ({
       symbolSize: props.datapointSize,
       smooth: props.smooth,
       areaStyle: { opacity: 0.1 },
+      ...latestMarker(props, s),
     })),
   };
 }

package/src/components/chart/chart-live.test.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */
+import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import ZnChart from './chart.component';
-
-ZnChart.define('zn-chart-live-test');
 class Source extends EventTarget {
   static instances: Source[]=[]; closed=false; onopen?:()=>void; onerror?:()=>void;
   url: string;
@@ -17,7 +15,7 @@ describe('chart SSE component',()=>{
   beforeEach(()=>{Source.instances=[];window.EventSource=Source as unknown as typeof EventSource;});
   afterEach(()=>{window.EventSource=original;});
   it('renders SSE buckets and expected bands, reacts to display changes, and stops when removed',async()=>{
-    const el:any=await fixture(html`<zn-chart-live-test type="line" xaxis="datetime" enable-animations="350" live stream-url="https://relay.example/events"></zn-chart-live-test>`);
+    const el:any=await fixture(html`<zn-chart type="line" xaxis="datetime" enable-animations="350" live stream-url="https://relay.example/events"></zn-chart>`);
     await el.updateComplete;await pause();
     const source=Source.instances.at(-1)!;
     expect(source).to.exist;
@@ -57,7 +55,7 @@ describe('chart SSE component',()=>{
     el.remove();expect(source.closed).to.equal(true);
   });
   it('keeps transitions enabled for a high-volume hour', async()=>{
-    const el:any=await fixture(html`<zn-chart-live-test type="line" xaxis="datetime" enable-animations="350" live stream-url="https://relay.example/hour"></zn-chart-live-test>`);
+    const el:any=await fixture(html`<zn-chart type="line" xaxis="datetime" enable-animations="350" live stream-url="https://relay.example/hour"></zn-chart>`);
     await el.updateComplete;await pause();
     Source.instances.at(-1)!.send('snapshot',{
       from:0,until:3600000,server_time:Date.now(),expires_at:Date.now()+60000,resolution_seconds:1,metric:'average',
@@ -71,7 +69,7 @@ describe('chart SSE component',()=>{
     el.remove();
   });
   it('restarts transport when its URL changes and when reattached',async()=>{
-    const el:any=await fixture(html`<zn-chart-live-test type="line" live stream-url="https://relay.example/a"></zn-chart-live-test>`);
+    const el:any=await fixture(html`<zn-chart type="line" live stream-url="https://relay.example/a"></zn-chart>`);
     await el.updateComplete;await pause();
     const old=Source.instances.at(-1)!;
     el.streamUrl='https://relay.example/b';await el.updateComplete;

package/src/components/chart/chart.component.ts

@@ -17,6 +17,7 @@ import {
   type SeriesItem,
 } from './builders';
 import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { type EChartsModule, loadECharts } from './echarts-loader';
 import { LiveTransport, LiveWindow } from './live';
 import { property, state } from 'lit/decorators.js';
@@ -32,6 +33,8 @@ import type { ECharts } from 'echarts/core';
  * @since 1.0
  *
  * @csspart base - The component's base wrapper.
+ *
+ * @event zn-chart-click - Emitted when a data point, bar or slice is clicked.
  */
 export default class ZnChart extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -47,6 +50,7 @@ export default class ZnChart extends ZincElement {
   @property({ type: Boolean }) stacked = false;
 
   @property({ type: Boolean }) live = false;
+  /** JSON series polled with `live`; otherwise fetched once, as a series array or `{categories, data}`. */
   @property({ attribute: 'data-url' }) dataUrl = '';
   @property({ attribute: 'stream-url' }) streamUrl = '';
   @property({ attribute: 'live-renew-url' }) liveRenewUrl = '';
@@ -75,6 +79,8 @@ export default class ZnChart extends ZincElement {
   @property({ attribute: 'show-labels', type: Boolean }) showLabels?: boolean;
   @property({ attribute: 'min-value', type: Number }) minValue?: number;
   @property({ attribute: 'max-value', type: Number }) maxValue?: number;
+  /** On line and area charts, marks each series' latest point and hides the rest. */
+  @property({ attribute: 'mark-latest', type: Boolean }) markLatest = false;
   @property({
     converter: {
       fromAttribute: (value: string | null) => {
@@ -91,6 +97,11 @@ export default class ZnChart extends ZincElement {
   private initPromise?: Promise<void>;
   private liveTimer?: number;
   private pollAbort?: AbortController;
+  private loadedUrl = '';
+  /** Set while `data-url` loads; cartesian charts show a placeholder until the data arrives. */
+  @state() private loading = false;
+  @state() private loadingOut = false;
+  private riseIn = false;
   @state() private liveStatus = 'connecting';
   private liveWindow = new LiveWindow();
   private replaceLiveSeries = true;
@@ -133,6 +144,7 @@ export default class ZnChart extends ZincElement {
       option.animationThreshold = 10000;
       option.animationEasingUpdate = 'linear';
     }
+    if (this.riseIn) this.prepareRise(option);
     if (this.liveWindow.frame && this.live && !this.replaceLiveSeries) {
       // Keep the prediction's models and data in ECharts between snapshots.
       // Only measurements and the moving viewport change on deltas/heartbeats.
@@ -148,16 +160,50 @@ export default class ZnChart extends ZincElement {
         animationThreshold: 10000,
       });
     } else {
-      this.chart?.setOption(option, { replaceMerge: ['series', 'legend', 'xAxis'] });
+      this.chart?.setOption(option, { replaceMerge: ['series', 'legend', 'xAxis', 'yAxis'] });
     }
     this.replaceLiveSeries = false;
   }
 
+  // Draws the loaded series flat on the baseline first, so ECharts animates them up to their values
+  private prepareRise(option: ReturnType<ZnChart['buildOption']>) {
+    this.riseIn = false;
+    if (!ZnChart.riseTypes.includes(this.type) || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const series = (Array.isArray(option.series) ? option.series : option.series ? [option.series] : []) as Record<string, unknown>[];
+    const flat = (v: unknown): unknown => typeof v === 'number' ? 0
+      : Array.isArray(v) ? [v[0], 0, ...v.slice(2)]
+        : v && typeof v === 'object' && 'value' in v ? { ...v, value: flat((v as { value: unknown }).value) } : v;
+    this.chart?.setOption({
+      ...option,
+      animation: false,
+      series: series.map((item, idx) => ({
+        ...item, id: `rise-${idx}`, data: Array.isArray(item.data) ? item.data.map(flat) : item.data,
+      })),
+    }, { replaceMerge: ['series', 'legend', 'xAxis', 'yAxis'] });
+    option.animation = true;
+    option.animationDurationUpdate = 450;
+    option.animationEasingUpdate = 'cubicOut';
+    // Same ids as the flat pass, so ECharts updates those series rather than drawing new ones in
+    option.series = series.map((item, idx) => ({
+      ...item, id: `rise-${idx}`, animationDelayUpdate: idx * 40,
+    })) as typeof option.series;
+  }
+
+  private static readonly riseTypes: ChartType[] = ['line', 'area', 'bar'];
+  private static readonly viewOnly = ['liveStatus', 'loading', 'loadingOut'];
+
+  protected willUpdate(changed: PropertyValues) {
+    super.willUpdate(changed);
+    if ((changed.has('dataUrl') || changed.has('live')) && this.dataUrl && !this.live && this.dataUrl !== this.loadedUrl) {
+      this.loading = true;
+    }
+  }
+
   protected updated(changed: PropertyValues) {
     super.updated(changed);
     if (!this.chart) return;
     if (['live', 'dataUrl', 'streamUrl', 'liveRenewUrl', 'liveInterval'].some(key => changed.has(key))) this.startLive();
-    if (changed.size !== 1 || !changed.has('liveStatus')) this.updateChart();
+    if ([...changed.keys()].some(key => !ZnChart.viewOnly.includes(key as string))) this.updateChart();
   }
 
   connectedCallback() {
@@ -193,12 +239,24 @@ export default class ZnChart extends ZincElement {
 
   private getTextColor(): string | undefined {
     const cs = getComputedStyle(this);
+    const themed = cs.getPropertyValue('--zn-chart-text-color').trim();
+    if (themed) return themed;
     const rgb = cs.getPropertyValue('--zn-text').trim();
     if (!rgb) return undefined;
     const opacity = cs.getPropertyValue('--zn-text-opacity').trim() || '1';
     return `rgba(${rgb}, ${opacity})`;
   }
 
+  // A theme supplies a categorical palette as --zn-chart-color-1..6; without
+  // one, ECharts keeps its own default palette.
+  private getPalette(): string[] | undefined {
+    const cs = getComputedStyle(this);
+    const colors = [1, 2, 3, 4, 5, 6]
+      .map(i => cs.getPropertyValue(`--zn-chart-color-${i}`).trim())
+      .filter(Boolean);
+    return colors.length ? colors : undefined;
+  }
+
   private getBorderColor(): string | undefined {
     const rgb = getComputedStyle(this).getPropertyValue('--zn-border-color').trim();
     return rgb ? `rgb(${rgb})` : undefined;
@@ -214,7 +272,7 @@ export default class ZnChart extends ZincElement {
       stacked: this.stacked,
       enableAnimations: this.enableAnimations,
       datapointSize: this.datapointSize,
-      colors: this.colors,
+      colors: this.colors ?? this.getPalette(),
       theme: this.getTheme(),
       smooth: this.smooth,
       scale: this.scale,
@@ -227,6 +285,7 @@ export default class ZnChart extends ZincElement {
       indicators: Array.isArray(this.indicators) ? this.indicators : [],
       minValue: this.minValue,
       maxValue: this.maxValue,
+      markLatest: this.markLatest,
     };
     switch (this.type) {
       case 'bar': return buildBarOption(props);
@@ -257,6 +316,16 @@ export default class ZnChart extends ZincElement {
 
     this.chart = echarts.init(host);
     this.chart.setOption(this.buildOption());
+    this.chart.on('click', params => {
+      this.emit('zn-chart-click', {
+        detail: {
+          seriesName: params.seriesName ?? '',
+          name: params.name,
+          dataIndex: params.dataIndex,
+          value: params.value,
+        },
+      });
+    });
 
     if (this.syncGroup) {
       this.chart.group = this.syncGroup;
@@ -277,7 +346,8 @@ export default class ZnChart extends ZincElement {
 
   private startLive() {
     this.stopLive(); this.liveWindow = new LiveWindow(); this.replaceLiveSeries = true;
-    if (!this.live || !this.isConnected) return;
+    if (!this.isConnected) return;
+    if (!this.live) { void this.loadData(); return; }
     if (this.streamUrl || this.liveRenewUrl) {
       try { this.transport.start(this.streamUrl, this.liveRenewUrl); } catch { this.stopLive(); }
       return;
@@ -297,6 +367,34 @@ export default class ZnChart extends ZincElement {
     this.liveTimer = window.setTimeout(() => void poll(), Math.max(250, this.liveInterval));
   }
 
+  private async loadData() {
+    if (!this.dataUrl || this.dataUrl === this.loadedUrl) return;
+    const controller = new AbortController(); this.pollAbort = controller;
+    try {
+      const res = await fetch(this.dataUrl, {
+        signal: controller.signal,
+        credentials: 'same-origin',
+        headers: { Accept: 'application/json', 'x-kx-fetch-style': 'raw-json' },
+      });
+      if (res.ok) {
+        const body = await res.json() as SeriesItem[] | { data?: SeriesItem[]; categories?: string[] };
+        if (controller.signal.aborted) return;
+        this.loadedUrl = this.dataUrl;
+        this.riseIn = true;
+        if (Array.isArray(body)) {
+          this.data = body;
+        } else {
+          this.categories = body.categories ?? this.categories;
+          this.data = body.data ?? [];
+        }
+      }
+    } catch { /* keep what the chart already shows */ }
+    if (controller.signal.aborted) return;
+    this.loading = false;
+    this.loadingOut = true;
+    window.setTimeout(() => { this.loadingOut = false; }, 400);
+  }
+
   private reinit() {
     this.stopLive();
     this.chart?.dispose();
@@ -335,8 +433,30 @@ export default class ZnChart extends ZincElement {
     this.chart = undefined;
   }
 
+  private renderLoading() {
+    if (!(this.loading || this.loadingOut) || !ZnChart.riseTypes.includes(this.type)) return null;
+    return html`
+      <div class="${classMap({ loading: true, 'loading--out': !this.loading })}" style="height: ${this.height}px"
+           role="status" aria-label="Loading chart">
+        <div class="loading__legend">
+          ${[48, 40, 52, 36].map(w => html`<span class="loading__pill" style="width: ${w}px"></span>`)}
+        </div>
+        <div class="loading__plot">
+          ${[0, 1, 2, 3, 4].map(i => html`
+            <span class="loading__row" style="animation-delay: ${i * 120}ms">
+              <span class="loading__pill loading__label"></span>
+            </span>`)}
+          <span class="loading__track"><span class="loading__pill loading__label"></span></span>
+          <span class="loading__x">
+            ${[0, 1, 2, 3, 4, 5].map(() => html`<span class="loading__pill"></span>`)}
+          </span>
+        </div>
+      </div>`;
+  }
+
   protected render(): unknown {
-    return html`<div class="chart"><div id="chart"></div>
+    return html`<div class="${classMap({ chart: true, 'chart--loading': this.loading })}"><div id="chart"></div>
+      ${this.renderLoading()}
       ${this.live && (this.streamUrl || this.liveRenewUrl) ? html`<div role="status" aria-live="polite">Live: ${this.liveStatus}${this.liveWindow.frame ? ` · ${this.liveWindow.frame.resolution_seconds}s intervals · Expected range: ${this.liveWindow.predictionStatus}` : ''}</div>` : ''}
     </div>`;
   }