@kubex/zinc 1.0.106 → 1.0.107

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

@@ -1,208 +1,217 @@
-import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
-import {property} from 'lit/decorators.js';
-import ApexCharts from "apexcharts";
-import ZincElement from '../../internal/zinc-element';
-
+import * as echarts from 'echarts/core';
+import { BarChart, LineChart, SankeyChart } from 'echarts/charts';
+import {
+  buildAreaOption,
+  buildBarOption,
+  type BuilderProps,
+  buildLineOption,
+  buildSankeyOption,
+  type ChartType,
+  type SeriesItem,
+} from './builders';
+import { CanvasRenderer } from 'echarts/renderers';
+import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+} from 'echarts/components';
+import { property } from 'lit/decorators.js';
 import styles from './chart.scss';
+import ZincElement from '../../internal/zinc-element';
+import type { ECharts } from 'echarts/core';
+
+echarts.use([
+  BarChart,
+  LineChart,
+  SankeyChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  DataZoomComponent,
+  CanvasRenderer,
+]);
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary Chart component powered by Apache ECharts.
  * @documentation https://zinc.style/components/data-chart
  * @status experimental
  * @since 1.0
  *
- * @dependency zn-example
- *
- * @event zn-event-name - Emitted as an example.
- *
- * @slot - The default slot.
- * @slot example - An example slot.
- *
  * @csspart base - The component's base wrapper.
- *
- * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnChart extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  @property() type: 'area' | 'bar' | 'line' = 'bar';
-  @property({type: Array}) data: any[] = [];
-  @property({type: Array}) categories: string | string[] = '';
-
-  @property() xAxis: string;
-  @property({type: Number, attribute: 'd-size'}) datapointSize: number = 1;
-  @property({type: Boolean}) stacked = false;
+  @property() type: ChartType = 'bar';
+  @property({ type: Array }) data: SeriesItem[] = [];
+  @property({ type: Array }) categories: string[] = [];
+
+  @property({ attribute: 'xaxis' }) xAxis: 'datetime' | 'category' | 'numeric';
+  @property({ type: Number, attribute: 'd-size' }) datapointSize: number = 1;
+  @property({ type: Boolean }) stacked = false;
+
+  @property({ type: Boolean }) live = false;
+  @property({ attribute: 'data-url' }) dataUrl = '';
+  @property({ attribute: 'live-interval', type: Number }) liveInterval = 1000;
+  @property({ type: Number, reflect: true }) height = 300;
+
+  @property({
+    attribute: 'enable-animations',
+    converter: {
+      fromAttribute: (value: string | null) => {
+        if (value === null) return false;
+        if (value === '' || value === 'true') return true;
+        const num = parseFloat(value);
+        return Number.isNaN(num) ? true : num;
+      },
+    },
+  }) enableAnimations: boolean | number = false;
+  @property({ attribute: 'y-axis-append' }) yAxisAppend: string;
+
+  @property({ type: Array }) colors?: string[];
+  @property({ attribute: 'sync-group' }) syncGroup?: string;
+  @property({ type: Boolean }) smooth = false;
+  @property({
+    converter: {
+      fromAttribute: (value: string | null) => {
+        if (value === null) return false;
+        if (value === '' || value === 'true') return true;
+        const num = parseFloat(value);
+        return Number.isNaN(num) ? true : num;
+      },
+    },
+  }) scale: boolean | number = false;
 
-  // Live
-  @property({type: Boolean}) live = false;
-  @property({attribute: 'data-url'}) dataUrl = '';
-  @property({attribute: 'live-interval', type: Number}) liveInterval = 1000;
-  @property({type: Number, reflect: true}) height = 300;
+  private chart?: ECharts;
+  private resizeObserver?: ResizeObserver;
+  private liveTimer?: number;
 
-  @property({attribute: 'enable-animations', type: Boolean}) enableAnimations = false;
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    this.initChart();
+    super.firstUpdated(_changedProperties);
+  }
 
-  @property({attribute: 'y-axis-append'}) yAxisAppend: string;
+  private getTheme(): 'light' | 'dark' {
+    return this.getAttribute('t') === 'dark' ? 'dark' : 'light';
+  }
 
-  private chart: ApexCharts;
+  private getTextColor(): string | undefined {
+    const cs = getComputedStyle(this);
+    const rgb = cs.getPropertyValue('--zn-text').trim();
+    if (!rgb) return undefined;
+    const opacity = cs.getPropertyValue('--zn-text-opacity').trim() || '1';
+    return `rgba(${rgb}, ${opacity})`;
+  }
 
-  // private lightColors = ["#8967ef", "#6483F2", "#29bab5", "#3F51B5", "#9C27B0", "#ff6c9c", "#6836F5", "#47D6D6"];
-  // private darkColors = ["#703cff", "#3b65fb", "#07e3db", "#5c75ff", "#e12cff", "#ff125f", "#ae90ff", "#a6ff9c"];
+  private getBorderColor(): string | undefined {
+    const rgb = getComputedStyle(this).getPropertyValue('--zn-border-color').trim();
+    return rgb ? `rgb(${rgb})` : undefined;
+  }
 
-  protected firstUpdated(_changedProperties: PropertyValues) {
-    const theme = this.getAttribute('t') || 'light';
-    // Setup Chart and render it
-    const options = {
-      animations: this.enableAnimations,
-      chart: {
-        type: this.type,
-        toolbar: {show: false},
-        foreColor: theme == 'dark' ? "rgb(149, 163, 184)" : "rgb(123, 112, 151)",
-        height: this.height + 'px',
-        fontFamily: '"Inter", sans',
-        stacked: this.stacked,
-        zoom: {
-          enabled: false
-        },
-        animations: {
-          enabled: false,
-        },
-        events: {}
-      },
-      dataLabels: {
-        enabled: false,
-      },
-      markers: {
-        size: this.datapointSize,
-        strokeWidth: 0,
-        hover: {
-          sizeOffset: 2
-        },
-      },
-      yaxis: {
-        labels: {
-          formatter: (value: number) => {
-            if (this.yAxisAppend) {
-              return value + this.yAxisAppend;
-            }
-            return value;
-          }
-        }
-      },
-      tooltip: {
-        theme: theme,
-        y: {
-          formatter: (value: number,) => {
-            if (this.yAxisAppend) {
-              return value + this.yAxisAppend;
-            }
-            return value;
-          }
-        }
-      },
-      grid: {
-        borderColor: theme === 'dark' ? "rgb(50, 50, 60)" : 'rgb(224, 221, 233)',
-      },
-      //colors: theme === 'dark' ? this.darkColors : this.lightColors,
-      legend: {
-        position: 'top',
-        horizontalAlign: 'right',
-        fontSize: '12px',
-        fontFamily: '"Inter", sans',
-        fontWeight: 400,
-        labels: {
-          colors: theme == 'dark' ? "rgb(149, 163, 184)" : "rgb(123, 112, 151)",
-        },
-        markers: {
-          shape: 'circle',
-        },
-      },
-      stroke: {
-        width: 1.5
-      },
-      fill: {
-        type: 'solid',
-        opacity: this.type === 'area' ? 0.1 : 0.8
-      },
-      series: this.data,
-      xaxis: {},
+  private buildOption() {
+    const props: BuilderProps = {
+      type: this.type,
+      data: this.data ?? [],
+      categories: Array.isArray(this.categories) ? this.categories : [],
+      xAxisType: this.xAxis,
+      yAxisAppend: this.yAxisAppend,
+      stacked: this.stacked,
+      enableAnimations: this.enableAnimations,
+      datapointSize: this.datapointSize,
+      colors: this.colors,
+      theme: this.getTheme(),
+      smooth: this.smooth,
+      scale: this.scale,
+      textColor: this.getTextColor(),
+      borderColor: this.getBorderColor(),
     };
-
-    if (this.xAxis) {
-      options.xaxis = {
-        type: this.xAxis,
-      };
-    } else {
-      options.xaxis = {
-        categories: this.categories,
-      };
+    switch (this.type) {
+      case 'bar': return buildBarOption(props);
+      case 'line': return buildLineOption(props);
+      case 'area': return buildAreaOption(props);
+      case 'sankey': return buildSankeyOption(props);
+      default: return buildBarOption(props);
     }
+  }
 
-    if (this.live) {
-      options.chart.animations = {
-        enabled: true,
-        // @ts-expect-error this is available. it lies.
-        easing: 'linear',
-        dynamicAnimation: {
-          speed: 400
-        }
-      };
-
-      options.chart.events = {
-        animationEnd: function (chartCtx: any, opts: any) {
-          const newData1 = chartCtx.w.config.series[0].data.slice();
-          newData1.shift();
-          const newData2 = chartCtx.w.config.series[1].data.slice();
-          newData2.shift();
-
-          // check animation end event for just 1 series to avoid multiple updates
-          if (opts.el.node.getAttribute('index') === '0') {
-            window.setTimeout(function () {
-              chartCtx.updateOptions({
-                series: [{
-                  data: newData1
-                }, {
-                  data: newData2
-                }],
-              }, false, false);
-            }, 300);
-          }
-
-        }
-      };
-    }
+  private initChart() {
+    const host = this.shadowRoot?.getElementById('chart') as HTMLElement | null;
+    if (!host) return;
+    host.style.height = `${this.height}px`;
+    this.chart = echarts.init(host);
+    this.chart.setOption(this.buildOption());
 
-    if (!this.chart) {
-      this.chart = new ApexCharts(this.shadowRoot?.getElementById('chart'), options);
-      this.chart.render();
+    if (this.syncGroup) {
+      this.chart.group = this.syncGroup;
+      echarts.connect(this.syncGroup);
     }
 
+    let firstResize = true;
+    this.resizeObserver = new ResizeObserver(() => {
+      if (firstResize) { firstResize = false; return; }
+      this.chart?.resize();
+    });
+    this.resizeObserver.observe(host);
 
-    super.firstUpdated(_changedProperties);
+    if (this.live && this.dataUrl) this.startLive();
+  }
+
+  private startLive() {
+    this.liveTimer = window.setInterval(async () => {
+      try {
+        const res = await fetch(this.dataUrl);
+        const newData = await res.json() as SeriesItem[];
+        this.data = newData;
+        this.chart?.setOption({ ...this.buildOption() });
+      } catch {
+        /* swallow transient fetch errors */
+      }
+    }, this.liveInterval);
+  }
+
+  private reinit() {
+    this.chart?.dispose();
+    this.chart = undefined;
+    this.initChart();
   }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null) {
-    if (this.chart && name === 't') {
-      this.chart.updateOptions({
-        // colors: value === 'dark' ? this.darkColors : this.lightColors
-      });
+    super.attributeChangedCallback(name, _old, value);
+    if (!this.chart) return;
+
+    if (name === 't') { this.reinit(); return; }
+    if (name === 'type') { this.reinit(); return; }
+    if (name === 'height') {
+      const host = this.shadowRoot?.getElementById('chart') as HTMLElement | null;
+      if (host) host.style.height = `${this.height}px`;
+      this.chart.resize();
+      return;
     }
-
-    if (this.chart && name === 'height') {
-      this.chart.updateOptions({
-        chart: {
-          height: value + 'px'
-        }
-      });
+    if (name === 'sync-group') {
+      if (value) {
+        this.chart.group = value;
+        echarts.connect(value);
+      } else {
+        this.chart.group = '';
+      }
+      return;
     }
+    this.chart.setOption({ ...this.buildOption() });
+  }
 
-    super.attributeChangedCallback(name, _old, value);
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.liveTimer) clearInterval(this.liveTimer);
+    this.resizeObserver?.disconnect();
+    this.chart?.dispose();
+    this.chart = undefined;
   }
 
   protected render(): unknown {
-    return html`
-      <div class="chart">
-        <div id="chart"></div>
-      </div>
-    `;
+    return html`<div class="chart"><div id="chart"></div></div>`;
   }
-}
+}

package/src/components/chart/chart.scss

@@ -6,6 +6,5 @@
 }
 
 .chart {
-  overflow: hidden;
   position: relative;
 }

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

@@ -1,10 +1,54 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any */
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
 
 describe('<zn-chart>', () => {
-  it('should render a component', async () => {
-    const el = await fixture(html` <zn-chart></zn-chart> `);
-
+  it('renders a component', async () => {
+    const el = await fixture(html`<zn-chart></zn-chart>`);
     expect(el).to.exist;
   });
-});
+
+  it('renders a bar chart with data and categories', async () => {
+    const el: any = await fixture(html`
+      <zn-chart
+        type="bar"
+        .data=${[{ name: 'S', data: [1, 2, 3] }]}
+        .categories=${['A', 'B', 'C']}
+      ></zn-chart>
+    `);
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 50));
+    const canvas = el.shadowRoot.querySelector('canvas');
+    expect(canvas).to.exist;
+  });
+
+  it('renders a sankey chart', async () => {
+    const el: any = await fixture(html`
+      <zn-chart
+        type="sankey"
+        .data=${[{
+          name: 'Flow',
+          data: [
+            { source: 'A', target: 'B', value: 10 },
+            { source: 'B', target: 'C', value: 5 },
+          ],
+        }]}
+      ></zn-chart>
+    `);
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 50));
+    const canvas = el.shadowRoot.querySelector('canvas');
+    expect(canvas).to.exist;
+  });
+
+  it('joins a sync-group when the attribute is set', async () => {
+    const a: any = await fixture(html`
+      <zn-chart sync-group="g1" type="bar"
+        .data=${[{ name: 'S', data: [1, 2] }]}
+        .categories=${['A', 'B']}></zn-chart>
+    `);
+    await a.updateComplete;
+    await new Promise((r) => setTimeout(r, 50));
+    expect(a.chart?.group).to.equal('g1');
+  });
+});

package/src/components/editor/modules/context-menu/context-menu.ts

@@ -2,7 +2,8 @@ import './context-menu-component';
 import {html} from "lit";
 import {litToHTML} from "../../../../utilities/lit-to-html";
 import {type ResultItem} from "./context-menu-component";
-import Quill, {Delta} from "quill";
+import Quill from "quill";
+import Delta from "quill-delta";
 import ZnEditorQuickAction from "./quick-action";
 import type {EditorFeatureConfig} from "../../editor.component";
 import type ContextMenuComponent from "./context-menu-component";

package/src/components/rating/rating.component.ts

@@ -5,9 +5,10 @@ import {FormControlController, validValidityState} from "../../internal/form";
 import {property, query, state} from 'lit/decorators.js';
 import {styleMap} from 'lit/directives/style-map.js';
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
-import type {ZincFormControl} from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
 
+import type {ZincFormControl} from '../../internal/zinc-element';
+
 import styles from './rating.scss';
 
 /**