@kubex/zinc 1.1.96 → 1.1.98

package/src/components/chart/builders.ts

@@ -1,7 +1,20 @@
 // src/components/chart/builders.ts
 import type { EChartsOption } from 'echarts';
 
-export type ChartType = 'area' | 'bar' | 'line' | 'sankey';
+export type ChartType =
+  | 'area'
+  | 'bar'
+  | 'donut'
+  | 'funnel'
+  | 'gauge'
+  | 'heatmap'
+  | 'line'
+  | 'pie'
+  | 'radar'
+  | 'sankey'
+  | 'scatter'
+  | 'sunburst'
+  | 'treemap';
 
 export interface SeriesItem {
   name: string;
@@ -15,6 +28,20 @@ export interface SankeyEdge {
   value: number;
 }
 
+export interface PieDataItem {
+  name?: string;
+  value: number;
+  color?: string;
+  itemStyle?: Record<string, unknown>;
+}
+
+export interface RadarIndicator {
+  name: string;
+  max?: number;
+  min?: number;
+  color?: string;
+}
+
 export interface BuilderProps {
   type: ChartType;
   data: SeriesItem[];
@@ -30,9 +57,16 @@ export interface BuilderProps {
   scale?: boolean | number;
   textColor?: string;
   borderColor?: string;
+  innerRadius?: number | string;
+  outerRadius?: number | string;
+  showLabels?: boolean;
+  yCategories?: string[];
+  indicators?: RadarIndicator[];
+  minValue?: number;
+  maxValue?: number;
 }
 
-function commonOption(props: BuilderProps): EChartsOption {
+function baseOption(props: BuilderProps, tooltipTrigger: 'axis' | 'item'): EChartsOption {
   const fallback = props.theme === 'dark' ? 'rgb(161, 161, 170)' : 'rgb(113, 113, 122)';
   const textColor = props.textColor ?? fallback;
   const animEnabled = props.enableAnimations !== false && props.enableAnimations !== 0;
@@ -44,7 +78,7 @@ function commonOption(props: BuilderProps): EChartsOption {
     ...(props.colors ? { color: props.colors } : {}),
     textStyle: { color: textColor },
     tooltip: {
-      trigger: 'axis',
+      trigger: tooltipTrigger,
       appendTo: 'body',
       valueFormatter: props.yAxisAppend
         ? (v: number | string) => `${v}${props.yAxisAppend}`
@@ -56,6 +90,12 @@ function commonOption(props: BuilderProps): EChartsOption {
       icon: 'circle',
       textStyle: { color: textColor },
     },
+  };
+}
+
+function commonOption(props: BuilderProps): EChartsOption {
+  return {
+    ...baseOption(props, 'axis'),
     grid: {
       left: 40,
       right: 20,
@@ -120,7 +160,7 @@ function normalizeData(data: any[]): any[] {
 
 function seriesFromProps(
   props: BuilderProps,
-  seriesType: 'bar' | 'line',
+  seriesType: 'bar' | 'line' | 'scatter',
   extra: (s: SeriesItem) => Record<string, unknown> = () => ({}),
 ) {
   return props.data.map((s) => ({
@@ -170,6 +210,208 @@ export function buildAreaOption(props: BuilderProps): EChartsOption {
   };
 }
 
+export function buildScatterOption(props: BuilderProps): EChartsOption {
+  return {
+    ...commonOption(props),
+    xAxis: buildXAxis({ ...props, xAxisType: props.xAxisType ?? 'numeric' }),
+    yAxis: buildYAxis(props),
+    series: seriesFromProps(props, 'scatter', () => ({
+      symbolSize: props.datapointSize,
+    })),
+  };
+}
+
+function normalizePieData(data: any[], categories: string[]): PieDataItem[] {
+  return data.map((item: number | PieDataItem, index) => {
+    if (typeof item === 'number') {
+      return { name: categories[index] ?? `${index + 1}`, value: item };
+    }
+
+    const { color, itemStyle, ...rest } = item;
+    return {
+      ...rest,
+      name: item.name ?? categories[index] ?? `${index + 1}`,
+      ...(color ? { itemStyle: { ...itemStyle, color } } : itemStyle ? { itemStyle } : {}),
+    };
+  });
+}
+
+export function buildPieOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  const textColor = props.textColor
+    ?? (props.theme === 'dark' ? 'rgb(161, 161, 170)' : 'rgb(113, 113, 122)');
+  const innerRadius = props.type === 'donut' ? (props.innerRadius ?? '50%') : 0;
+  const outerRadius = props.outerRadius ?? '70%';
+
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'pie',
+      name: first.name,
+      data: normalizePieData(first.data ?? [], props.categories),
+      radius: [innerRadius, outerRadius],
+      center: ['50%', '55%'],
+      avoidLabelOverlap: true,
+      label: {
+        show: props.showLabels ?? false,
+        color: textColor,
+      },
+      labelLine: {
+        show: props.showLabels ?? false,
+        ...(props.borderColor ? { lineStyle: { color: props.borderColor } } : {}),
+      },
+      emphasis: {
+        label: { show: props.showLabels ?? false },
+      },
+    }],
+  };
+}
+
+export function buildRadarOption(props: BuilderProps): EChartsOption {
+  const indicators = props.indicators?.length
+    ? props.indicators
+    : props.categories.map((name) => ({ name }));
+
+  return {
+    ...baseOption(props, 'item'),
+    radar: { indicator: indicators },
+    series: [{
+      type: 'radar',
+      data: props.data.map((series) => ({
+        name: series.name,
+        value: normalizeData(series.data),
+        ...(series.color ? {
+          itemStyle: { color: series.color },
+          lineStyle: { color: series.color },
+        } : {}),
+      })),
+    }],
+  };
+}
+
+export function buildGaugeOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  const [firstValue] = first.data as unknown[];
+  const data = typeof firstValue === 'number'
+    ? [{ name: first.name, value: firstValue }]
+    : normalizePieData(first.data ?? [], props.categories);
+
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'gauge',
+      name: first.name,
+      min: props.minValue ?? 0,
+      max: props.maxValue ?? 100,
+      data,
+      progress: { show: true },
+      detail: {
+        valueAnimation: props.enableAnimations !== false && props.enableAnimations !== 0,
+        formatter: props.yAxisAppend
+          ? (value: number) => `${value}${props.yAxisAppend}`
+          : '{value}',
+      },
+    }],
+  };
+}
+
+export function buildFunnelOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'funnel',
+      name: first.name,
+      min: props.minValue,
+      max: props.maxValue,
+      data: normalizePieData(first.data ?? [], props.categories),
+      label: { show: props.showLabels ?? true },
+      emphasis: { label: { fontWeight: 'bold' } },
+    }],
+  };
+}
+
+function isHeatmapPoint(item: unknown): item is [unknown, unknown, number] {
+  if (!Array.isArray(item)) return false;
+  const point = item as unknown[];
+  return typeof point[2] === 'number';
+}
+
+function heatmapExtent(data: unknown[], operation: 'max' | 'min', fallback: number): number {
+  const values = data
+    .filter(isHeatmapPoint)
+    .map((item) => item[2]);
+  return values.length ? Math[operation](...values) : fallback;
+}
+
+export function buildHeatmapOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  const data = first.data ?? [];
+  return {
+    ...baseOption(props, 'item'),
+    grid: { left: 60, right: 20, top: 40, bottom: 70 },
+    xAxis: {
+      type: 'category',
+      data: props.categories,
+      splitArea: { show: true },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.yCategories ?? [],
+      splitArea: { show: true },
+    },
+    visualMap: {
+      min: props.minValue ?? heatmapExtent(data, 'min', 0),
+      max: props.maxValue ?? heatmapExtent(data, 'max', 100),
+      calculable: true,
+      orient: 'horizontal',
+      left: 'center',
+      bottom: 0,
+    },
+    series: [{
+      type: 'heatmap',
+      name: first.name,
+      data,
+      label: { show: props.showLabels ?? false },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(0, 0, 0, 0.35)',
+        },
+      },
+    }],
+  };
+}
+
+export function buildTreemapOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'treemap',
+      name: first.name,
+      data: first.data ?? [],
+      label: { show: props.showLabels ?? true },
+      upperLabel: { show: props.showLabels ?? true },
+    }],
+  };
+}
+
+export function buildSunburstOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'sunburst',
+      name: first.name,
+      data: first.data ?? [],
+      radius: [props.innerRadius ?? 0, props.outerRadius ?? '90%'],
+      label: { show: props.showLabels ?? true },
+      emphasis: { focus: 'ancestor' },
+    }],
+  };
+}
+
 function deriveNodes(edges: SankeyEdge[]): { name: string }[] {
   const seen = new Set<string>();
   const nodes: { name: string }[] = [];

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

@@ -2,9 +2,18 @@ import {
   buildAreaOption,
   buildBarOption,
   type BuilderProps,
+  buildFunnelOption,
+  buildGaugeOption,
+  buildHeatmapOption,
   buildLineOption,
+  buildPieOption,
+  buildRadarOption,
   buildSankeyOption,
+  buildScatterOption,
+  buildSunburstOption,
+  buildTreemapOption,
   type ChartType,
+  type RadarIndicator,
   type SeriesItem,
 } from './builders';
 import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
@@ -29,6 +38,8 @@ export default class ZnChart extends ZincElement {
   @property() type: ChartType = 'bar';
   @property({ type: Array }) data: SeriesItem[] = [];
   @property({ type: Array }) categories: string[] = [];
+  @property({ attribute: 'y-categories', type: Array }) yCategories: string[] = [];
+  @property({ type: Array }) indicators: RadarIndicator[] = [];
 
   @property({ attribute: 'xaxis' }) xAxis: 'datetime' | 'category' | 'numeric';
   @property({ type: Number, attribute: 'd-size' }) datapointSize: number = 1;
@@ -55,6 +66,11 @@ export default class ZnChart extends ZincElement {
   @property({ type: Array }) colors?: string[];
   @property({ attribute: 'sync-group' }) syncGroup?: string;
   @property({ type: Boolean }) smooth = false;
+  @property({ attribute: 'inner-radius' }) innerRadius?: number | string;
+  @property({ attribute: 'outer-radius' }) outerRadius?: number | string;
+  @property({ attribute: 'show-labels', type: Boolean }) showLabels?: boolean;
+  @property({ attribute: 'min-value', type: Number }) minValue?: number;
+  @property({ attribute: 'max-value', type: Number }) maxValue?: number;
   @property({
     converter: {
       fromAttribute: (value: string | null) => {
@@ -122,12 +138,28 @@ export default class ZnChart extends ZincElement {
       scale: this.scale,
       textColor: this.getTextColor(),
       borderColor: this.getBorderColor(),
+      innerRadius: this.innerRadius,
+      outerRadius: this.outerRadius,
+      showLabels: this.showLabels,
+      yCategories: Array.isArray(this.yCategories) ? this.yCategories : [],
+      indicators: Array.isArray(this.indicators) ? this.indicators : [],
+      minValue: this.minValue,
+      maxValue: this.maxValue,
     };
     switch (this.type) {
       case 'bar': return buildBarOption(props);
       case 'line': return buildLineOption(props);
       case 'area': return buildAreaOption(props);
+      case 'funnel': return buildFunnelOption(props);
+      case 'gauge': return buildGaugeOption(props);
+      case 'heatmap': return buildHeatmapOption(props);
+      case 'donut':
+      case 'pie': return buildPieOption(props);
+      case 'radar': return buildRadarOption(props);
       case 'sankey': return buildSankeyOption(props);
+      case 'scatter': return buildScatterOption(props);
+      case 'sunburst': return buildSunburstOption(props);
+      case 'treemap': return buildTreemapOption(props);
       default: return buildBarOption(props);
     }
   }
@@ -207,4 +239,4 @@ export default class ZnChart extends ZincElement {
   protected render(): unknown {
     return html`<div class="chart"><div id="chart"></div></div>`;
   }
-}
+}

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

@@ -41,6 +41,71 @@ describe('<zn-chart>', () => {
     expect(canvas).to.exist;
   });
 
+  it('renders pie and donut charts', async () => {
+    for (const type of ['pie', 'donut']) {
+      const el: any = await fixture(html`
+        <zn-chart
+          type=${type}
+          .data=${[{ name: 'Insights', data: [8, 1] }]}
+          .categories=${['Configuration suggestion', 'Insecure configuration']}
+        ></zn-chart>
+      `);
+      await el.updateComplete;
+      await new Promise((r) => setTimeout(r, 50));
+      const canvas = el.shadowRoot.querySelector('canvas');
+      expect(canvas, `${type} chart canvas`).to.exist;
+    }
+  });
+
+  it('renders the additional native chart types', async () => {
+    const cases = [
+      { type: 'scatter', data: [{ name: 'Points', data: [[1, 2], [2, 4]] }] },
+      {
+        type: 'radar',
+        data: [{ name: 'Current', data: [80, 65, 90] }],
+        categories: ['Security', 'Performance', 'Reliability'],
+      },
+      { type: 'gauge', data: [{ name: 'Health', data: [82] }] },
+      {
+        type: 'funnel',
+        data: [{ name: 'Conversion', data: [1000, 320, 85] }],
+        categories: ['Visitors', 'Trials', 'Customers'],
+      },
+      {
+        type: 'heatmap',
+        data: [{ name: 'Requests', data: [[0, 0, 5], [1, 0, 12]] }],
+        categories: ['Mon', 'Tue'],
+        yCategories: ['API'],
+      },
+      {
+        type: 'treemap',
+        data: [{ name: 'Insights', data: [{ name: 'Configuration', value: 8 }] }],
+      },
+      {
+        type: 'sunburst',
+        data: [{
+          name: 'Insights',
+          data: [{ name: 'Security', children: [{ name: 'Configuration', value: 8 }] }],
+        }],
+      },
+    ];
+
+    for (const chartCase of cases) {
+      const el: any = await fixture(html`
+        <zn-chart
+          type=${chartCase.type}
+          .data=${chartCase.data}
+          .categories=${chartCase.categories ?? []}
+          .yCategories=${chartCase.yCategories ?? []}
+        ></zn-chart>
+      `);
+      await el.updateComplete;
+      await new Promise((r) => setTimeout(r, 50));
+      const canvas = el.shadowRoot.querySelector('canvas');
+      expect(canvas, `${chartCase.type} chart 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"
@@ -51,4 +116,4 @@ describe('<zn-chart>', () => {
     await new Promise((r) => setTimeout(r, 50));
     expect(a.chart?.group).to.equal('g1');
   });
-});
+});

package/src/components/chart/echarts-loader.ts

@@ -15,13 +15,23 @@ export function loadECharts(): Promise<EChartsModule> {
     ]);
     core.use([
       charts.BarChart,
+      charts.FunnelChart,
+      charts.GaugeChart,
+      charts.HeatmapChart,
       charts.LineChart,
+      charts.PieChart,
+      charts.RadarChart,
       charts.SankeyChart,
+      charts.ScatterChart,
+      charts.SunburstChart,
+      charts.TreemapChart,
       components.GridComponent,
       components.TooltipComponent,
       components.LegendComponent,
       components.TitleComponent,
       components.DataZoomComponent,
+      components.RadarComponent,
+      components.VisualMapComponent,
       renderers.CanvasRenderer,
     ]);
     return core;

package/src/components/collapsible/collapsible.component.ts

@@ -52,6 +52,10 @@ export default class ZnCollapsible extends ZincElement {
 
   @state() numberOfItems: number = 0;
 
+  @state() private animating: boolean = false;
+
+  private animatingTimer?: ReturnType<typeof setTimeout>;
+
   protected _store: Store;
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'header', 'caption', 'label', 'description');
@@ -94,6 +98,11 @@ export default class ZnCollapsible extends ZincElement {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.animatingTimer);
+  }
+
   // this is for handling global toggles
   public handleCaptionToggle = (e: ZnInputEvent) => {
     const toggle = e.target as ZnToggle;
@@ -104,8 +113,38 @@ export default class ZnCollapsible extends ZincElement {
 
   protected updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
-    if (changedProperties.has('expanded') && this.storeKey) {
-      this._store.set(this.storeKey, this.expanded.toString());
+    if (changedProperties.has('expanded')) {
+      if (changedProperties.get('expanded') !== undefined) {
+        this.startAnimating();
+      }
+
+      if (this.storeKey) {
+        this._store.set(this.storeKey, this.expanded.toString());
+      }
+    }
+  }
+
+  // Content is only clipped while the height transition runs, so expanded
+  // content can overflow the host. The timer covers a transitionend that never
+  // arrives (reduced motion, hidden host).
+  private startAnimating() {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return;
+    }
+
+    this.animating = true;
+    clearTimeout(this.animatingTimer);
+    this.animatingTimer = setTimeout(() => (this.animating = false), 600);
+  }
+
+  private stopAnimating() {
+    clearTimeout(this.animatingTimer);
+    this.animating = false;
+  }
+
+  private handleTransitionEnd = (e: TransitionEvent) => {
+    if (e.target === e.currentTarget && e.propertyName === 'grid-template-rows') {
+      this.stopAnimating();
     }
   }
 
@@ -160,8 +199,14 @@ export default class ZnCollapsible extends ZincElement {
               <zn-icon library="material-outlined" src="expand_more" class="expand"></zn-icon>` : ''}
           </div>
         </slot>
-        <div class=${classMap({ 'content': true, 'content--flush': this.flush, })} part="content">
-          <slot @slotchange="${this.requestUpdate}"></slot>
+        <div class=${classMap({
+          'content': true,
+          'content--flush': this.flush,
+          'content--animating': this.animating,
+        })} part="content" @transitionend="${this.handleTransitionEnd}">
+          <div class="content__inner">
+            <slot @slotchange="${this.requestUpdate}"></slot>
+          </div>
         </div>
       </div>`;
   }

package/src/components/collapsible/collapsible.scss

@@ -76,29 +76,48 @@
   }
 }
 
-:host(:not([flush])).content {
-  @include wc.padding();
+// Height animates via grid-template-rows 0fr -> 1fr; the inline padding is
+// constant so the content never reflows (and re-wraps) mid-transition.
+.content {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition: grid-template-rows var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1),
+  opacity var(--zn-transition-fast) ease-out;
+
+  &__inner {
+    min-height: 0;
+    padding: 0 var(--zn-spacing-medium) var(--zn-spacing-medium);
+    transform: translateY(-4px);
+    transition: transform var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  &--flush &__inner {
+    padding: 0;
+  }
 }
 
-.content {
-  transition: .1s all ease-out;
+// Clipped while collapsed or mid-transition only, so expanded content can still
+// overflow the host (dropdowns, tooltips).
+:host(:not([expanded])) .content,
+.content--animating {
+  overflow: hidden;
 }
 
 :host([expanded]) .content {
-  margin: 0 var(--zn-spacing-medium);
-  padding-bottom: var(--zn-spacing-medium);
+  grid-template-rows: 1fr;
+  opacity: 1;
 
-  &--flush {
-    margin: 0;
-    padding: 0;
+  .content__inner {
+    transform: none;
   }
 }
 
-:host(:not([expanded])) .content {
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
+@media (prefers-reduced-motion: reduce) {
+  .content,
+  .content__inner {
+    transition-duration: 0s;
+  }
 }
 
 .expand {

package/src/components/data-table/data-table.component.ts

@@ -821,12 +821,15 @@ export default class ZnDataTable extends ZincElement {
       <div class="table__footer__pagination-buttons">
         <zn-button @click="${this.page !== 1 ? this.goToFirstPage : undefined}"
                    ?disabled="${this.page === 1}"
-                   icon="arrow_left@lu"
-                   panel-bg>First
+                   icon="chevrons-left@lu"
+                   icon-button="small"
+                   panel-bg>
         </zn-button>
         <zn-button @click="${this.page !== 1 ? this.goToPreviousPage : undefined}"
                    ?disabled="${this.page === 1}"
-                   panel-bg>Back
+                   icon="chevron-left@lu"
+                   icon-button="small"
+                   panel-bg>
         </zn-button>
         ${this.getPageRange().map((p) => p === 'ellipsis'
           ? html`<span class="table__footer__pagination-ellipsis">…</span>`
@@ -838,13 +841,15 @@ export default class ZnDataTable extends ZincElement {
         )}
         <zn-button @click="${this.page !== this.totalPages ? this.goToNextPage : undefined}"
                    ?disabled="${this.page === this.totalPages}"
-                   panel-bg>Next
+                   icon="chevron-right@lu"
+                   icon-button="small"
+                   panel-bg>
         </zn-button>
         <zn-button @click="${this.page !== this.totalPages ? this.goToLastPage : undefined}"
                    ?disabled="${this.page === this.totalPages}"
-                   icon="arrow_right@lu"
-                   icon-position="right"
-                   panel-bg>Last
+                   icon="chevrons-right@lu"
+                   icon-button="small"
+                   panel-bg>
         </zn-button>
       </div>`;
   }
@@ -1039,7 +1044,7 @@ export default class ZnDataTable extends ZincElement {
     if (header?.cellTemplate !== undefined) {
       data = {...header.cellTemplate, ...data}
     }
-    
+
     let content: TemplateResult | ZincElement = html`${data.text}`;
 
     if (data.style || data.color) {

package/src/components/data-table/data-table.scss

@@ -258,7 +258,7 @@ table {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: var(--zn-spacing-medium) 0;
+    padding: var(--zn-spacing-small) 0;
 
     &__right, &__left {
       display: flex;

package/src/components/header/header.scss

@@ -24,7 +24,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     display: flex;
-    gap: var(--zn-spacing-x-small);
+    gap: var(--zn-spacing-2x-small);
     align-items: center;
     text-wrap: auto;
   }