@ztwoint/z-ui 0.1.120 → 0.1.122

package/dist/components/chart-card/builders/bar-chart-builder.d.ts

@@ -1,3 +1,3 @@
 import { EChartsOption } from 'echarts';
 import { BarChartConfig, ChartData } from '../chart-card.config.types';
-export declare function buildBarChartOptions(config: BarChartConfig, data: ChartData): EChartsOption;
+export declare function buildBarChartOptions(config: BarChartConfig, data: ChartData, scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;

package/dist/components/chart-card/builders/bar-chart-builder.js

@@ -1,43 +1,90 @@
-import { buildYAxisConfig as A, buildXAxisConfig as g, buildGridConfig as k, buildLegendConfig as v, buildTooltipConfig as T, buildTitleConfig as B } from "../config/defaults.js";
-import { getThemePalette as L } from "../config/colors.js";
-function D(e, t) {
-  var n, o, i, p, l, u, b, c, h, x, S, y;
-  const m = L("bar", e.theme), r = t.series.map((C) => C.name), s = !!e.name, a = r.length > 1, d = ((o = (n = e.options) == null ? void 0 : n.legend) == null ? void 0 : o.position) ?? "top";
+import { buildYAxisConfig as B, buildXAxisConfig as T, buildGridConfig as I, buildLegendConfig as V, buildTooltipConfig as L, buildTitleConfig as P } from "../config/defaults.js";
+import { getThemePalette as W } from "../config/colors.js";
+function G(t, d, o, u) {
+  var h, f, m, g, v, x, C, S, y, w, A, k, D, M, z;
+  const a = W("bar", t.theme), r = d.series.map((H) => H.name), i = !!t.name, e = r.length > 1, n = ((f = (h = t.options) == null ? void 0 : h.legend) == null ? void 0 : f.position) ?? "top";
   return {
-    color: m,
-    title: s ? B(e.name, (i = e.options) == null ? void 0 : i.title) : void 0,
-    tooltip: T((p = e.options) == null ? void 0 : p.tooltip),
-    legend: a ? v(r, s, (l = e.options) == null ? void 0 : l.legend) : void 0,
-    grid: k(s, a, d, (u = e.options) == null ? void 0 : u.grid),
-    xAxis: g(t.labels, !0, (b = e.options) == null ? void 0 : b.xAxis),
-    yAxis: A((c = e.options) == null ? void 0 : c.yAxis),
-    series: P(e, t),
-    animation: ((x = (h = e.options) == null ? void 0 : h.animation) == null ? void 0 : x.enabled) ?? !0,
-    animationDuration: ((y = (S = e.options) == null ? void 0 : S.animation) == null ? void 0 : y.duration) ?? 1e3
+    color: a,
+    title: i ? P(t.name, (m = t.options) == null ? void 0 : m.title) : void 0,
+    tooltip: L((g = t.options) == null ? void 0 : g.tooltip),
+    legend: e ? V(r, i, {
+      ...(v = t.options) == null ? void 0 : v.legend,
+      scrollable: u || ((C = (x = t.options) == null ? void 0 : x.legend) == null ? void 0 : C.scrollable)
+    }) : void 0,
+    grid: I(i, e, n, (S = t.options) == null ? void 0 : S.grid),
+    xAxis: T(d.labels, !0, (y = t.options) == null ? void 0 : y.xAxis),
+    yAxis: B((w = t.options) == null ? void 0 : w.yAxis),
+    series: X(t, d),
+    animation: ((k = (A = t.options) == null ? void 0 : A.animation) == null ? void 0 : k.enabled) ?? !0,
+    animationDuration: ((M = (D = t.options) == null ? void 0 : D.animation) == null ? void 0 : M.duration) ?? 1e3,
+    ...o ? Y((z = t.options) == null ? void 0 : z.scrollable) : {}
   };
 }
-function P(e, t) {
-  var d, n;
-  const r = e.theme === "stacked" && t.series.length > 1 ? "total" : void 0, s = ((d = e.options) == null ? void 0 : d.seriesStyles) ?? {}, a = ((n = e.options) == null ? void 0 : n.defaultSeriesStyle) ?? {};
-  return t.series.map((o) => {
-    const i = {
-      ...a,
-      ...s[o.name] ?? {}
-    }, p = i.barWidth ?? 40, l = {
-      name: o.name,
+function X(t, d) {
+  var i, e;
+  const u = t.theme === "stacked" && d.series.length > 1 ? "total" : void 0, a = ((i = t.options) == null ? void 0 : i.seriesStyles) ?? {}, r = ((e = t.options) == null ? void 0 : e.defaultSeriesStyle) ?? {};
+  return d.series.map((n) => {
+    const h = {
+      ...r,
+      ...a[n.name] ?? {}
+    }, f = h.barWidth ?? 40, m = {
+      name: n.name,
       type: "bar",
-      stack: r,
+      stack: u,
       emphasis: {
         focus: "series"
       },
-      barMaxWidth: p,
-      data: o.values
+      barMaxWidth: f,
+      data: n.values
     };
-    return i.color && (l.itemStyle = {
-      color: i.color
-    }), l;
+    return h.color && (m.itemStyle = {
+      color: h.color
+    }), m;
   });
 }
+function Y(t) {
+  const d = [], o = (t == null ? void 0 : t.type) ?? "both", u = (t == null ? void 0 : t.start) ?? 0, a = (t == null ? void 0 : t.end) ?? 20, r = (t == null ? void 0 : t.height) ?? 20, i = (t == null ? void 0 : t.width) ?? 20, e = (t == null ? void 0 : t.position) ?? "bottom", n = (t == null ? void 0 : t.showDetail) ?? !1, h = (t == null ? void 0 : t.showDataShadow) ?? !1, f = (t == null ? void 0 : t.realtime) ?? !0, m = (t == null ? void 0 : t.filterMode) ?? "filter", g = (t == null ? void 0 : t.xAxisIndex) ?? [0];
+  return (o === "slider" || o === "both") && d.push({
+    type: "slider",
+    show: !0,
+    xAxisIndex: g,
+    start: u,
+    end: a,
+    height: e === "bottom" ? r : void 0,
+    width: e === "right" ? i : void 0,
+    bottom: e === "bottom" ? 10 : void 0,
+    top: e === "top" ? 10 : void 0,
+    right: e === "right" ? 10 : void 0,
+    left: e === "left" ? 10 : void 0,
+    showDetail: n,
+    showDataShadow: h,
+    realtime: f,
+    filterMode: m,
+    handleIcon: "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
+    handleSize: "80%",
+    handleStyle: {
+      color: "#fff",
+      shadowBlur: 3,
+      shadowColor: "rgba(0, 0, 0, 0.6)",
+      shadowOffsetX: 2,
+      shadowOffsetY: 2
+    },
+    textStyle: {
+      color: "#333"
+    },
+    borderColor: "#90979c",
+    fillerColor: "rgba(144, 151, 156, 0.2)",
+    backgroundColor: "rgba(17, 17, 17, 0.1)",
+    selectedDataBackgroundColor: "rgba(0, 0, 0, 0.3)",
+    moveHandleColor: "#fff",
+    moveHandleSize: 7
+  }), (o === "inside" || o === "both") && d.push({
+    type: "inside",
+    xAxisIndex: g,
+    start: u,
+    end: a
+  }), { dataZoom: d };
+}
 export {
-  D as buildBarChartOptions
+  G as buildBarChartOptions
 };

package/dist/components/chart-card/builders/chart-builder-factory.d.ts

@@ -1,5 +1,5 @@
 import { EChartsOption } from 'echarts';
 import { ChartConfig, ChartData, ChartType } from '../chart-card.config.types';
-export declare function buildChartOptions(config: ChartConfig, data: ChartData): EChartsOption;
+export declare function buildChartOptions(config: ChartConfig, data: ChartData, scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;
 export declare function isChartTypeSupported(type: string): type is ChartType;
 export declare const registeredChartTypes: readonly ChartType[];

package/dist/components/chart-card/builders/chart-builder-factory.js

@@ -1,23 +1,23 @@
-import { buildBarChartOptions as e } from "./bar-chart-builder.js";
-import { buildLineChartOptions as o } from "./line-chart-builder.js";
-import { buildPieChartOptions as p } from "./pie-chart-builder.js";
-const n = {
-  line: o,
-  bar: e,
-  pie: p
+import { buildBarChartOptions as p } from "./bar-chart-builder.js";
+import { buildLineChartOptions as n } from "./line-chart-builder.js";
+import { buildPieChartOptions as a } from "./pie-chart-builder.js";
+const s = {
+  line: n,
+  bar: p,
+  pie: a
 };
-function b(r, i) {
-  const t = n[r.type];
+function h(r, i, e, o) {
+  const t = s[r.type];
   if (!t)
     throw new Error(`Unsupported chart type: ${r.type}`);
-  return t(r, i);
+  return t(r, i, e, o);
 }
-function d(r) {
+function l(r) {
   return r === "line" || r === "bar" || r === "pie";
 }
-const h = ["line", "bar", "pie"];
+const m = ["line", "bar", "pie"];
 export {
-  b as buildChartOptions,
-  d as isChartTypeSupported,
-  h as registeredChartTypes
+  h as buildChartOptions,
+  l as isChartTypeSupported,
+  m as registeredChartTypes
 };

package/dist/components/chart-card/builders/line-chart-builder.d.ts

@@ -1,3 +1,3 @@
 import { EChartsOption } from 'echarts';
 import { ChartData, LineChartConfig } from '../chart-card.config.types';
-export declare function buildLineChartOptions(config: LineChartConfig, data: ChartData): EChartsOption;
+export declare function buildLineChartOptions(config: LineChartConfig, data: ChartData, scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;

package/dist/components/chart-card/builders/line-chart-builder.js

@@ -1,53 +1,100 @@
-import { buildYAxisConfig as g, buildXAxisConfig as f, buildGridConfig as T, buildLegendConfig as v, buildTooltipConfig as w, buildTitleConfig as L } from "../config/defaults.js";
-import { getThemePalette as z } from "../config/colors.js";
-function B(e, i) {
-  var o, p, m, d, u, y, t, c, S, b, x, C;
-  const h = z("line", e.theme), l = i.series.map((A) => A.name), s = !!e.name, n = l.length > 1, r = ((p = (o = e.options) == null ? void 0 : o.legend) == null ? void 0 : p.position) ?? "top";
+import { buildYAxisConfig as B, buildXAxisConfig as I, buildGridConfig as L, buildLegendConfig as V, buildTooltipConfig as k, buildTitleConfig as P } from "../config/defaults.js";
+import { getThemePalette as W } from "../config/colors.js";
+function G(t, o, d, y) {
+  var S, r, u, g, n, w, v, x, C, A, s, z, D, H, M;
+  const f = W("line", t.theme), m = o.series.map((T) => T.name), h = !!t.name, e = m.length > 1, i = ((r = (S = t.options) == null ? void 0 : S.legend) == null ? void 0 : r.position) ?? "top";
   return {
-    color: h,
-    title: s ? L(e.name, (m = e.options) == null ? void 0 : m.title) : void 0,
-    tooltip: w((d = e.options) == null ? void 0 : d.tooltip),
-    legend: n ? v(l, s, (u = e.options) == null ? void 0 : u.legend) : void 0,
-    grid: T(s, n, r, (y = e.options) == null ? void 0 : y.grid),
-    xAxis: f(i.labels, !1, (t = e.options) == null ? void 0 : t.xAxis),
-    yAxis: g((c = e.options) == null ? void 0 : c.yAxis),
-    series: O(e, i),
-    animation: ((b = (S = e.options) == null ? void 0 : S.animation) == null ? void 0 : b.enabled) ?? !0,
-    animationDuration: ((C = (x = e.options) == null ? void 0 : x.animation) == null ? void 0 : C.duration) ?? 1e3
+    color: f,
+    title: h ? P(t.name, (u = t.options) == null ? void 0 : u.title) : void 0,
+    tooltip: k((g = t.options) == null ? void 0 : g.tooltip),
+    legend: e ? V(m, h, {
+      ...(n = t.options) == null ? void 0 : n.legend,
+      scrollable: y || ((v = (w = t.options) == null ? void 0 : w.legend) == null ? void 0 : v.scrollable)
+    }) : void 0,
+    grid: L(h, e, i, (x = t.options) == null ? void 0 : x.grid),
+    xAxis: I(o.labels, !1, (C = t.options) == null ? void 0 : C.xAxis),
+    yAxis: B((A = t.options) == null ? void 0 : A.yAxis),
+    series: X(t, o),
+    animation: ((z = (s = t.options) == null ? void 0 : s.animation) == null ? void 0 : z.enabled) ?? !0,
+    animationDuration: ((H = (D = t.options) == null ? void 0 : D.animation) == null ? void 0 : H.duration) ?? 1e3,
+    ...d ? Y((M = t.options) == null ? void 0 : M.scrollable) : {}
   };
 }
-function O(e, i) {
-  var n, r;
-  const h = e.theme === "smooth", l = ((n = e.options) == null ? void 0 : n.seriesStyles) ?? {}, s = ((r = e.options) == null ? void 0 : r.defaultSeriesStyle) ?? {};
-  return i.series.map((a) => {
-    const o = {
-      ...s,
-      ...l[a.name] ?? {}
-    }, p = o.smooth ?? h, m = o.lineWidth ?? 2, d = o.pointSize ?? (i.labels.length <= 12 ? 4 : 0), u = o.areaStyle ?? !1, y = o.opacity ?? 0.15, t = {
-      name: a.name,
+function X(t, o) {
+  var m, h;
+  const d = t.theme === "smooth", y = ((m = t.options) == null ? void 0 : m.seriesStyles) ?? {}, f = ((h = t.options) == null ? void 0 : h.defaultSeriesStyle) ?? {};
+  return o.series.map((e) => {
+    const i = {
+      ...f,
+      ...y[e.name] ?? {}
+    }, a = i.smooth ?? d, S = i.lineWidth ?? 2, r = i.pointSize ?? (o.labels.length <= 12 ? 4 : 0), u = i.areaStyle ?? !1, g = i.opacity ?? 0.15, n = {
+      name: e.name,
       type: "line",
-      smooth: p,
+      smooth: a,
       symbol: "circle",
-      symbolSize: d,
-      showSymbol: i.labels.length <= 12,
+      symbolSize: r,
+      showSymbol: o.labels.length <= 12,
       emphasis: {
         focus: "series"
       },
       lineStyle: {
-        width: m
+        width: S
       },
-      data: a.values
+      data: e.values
     };
-    return o.color && (t.itemStyle = {
-      color: o.color
-    }, t.lineStyle = {
-      ...t.lineStyle,
-      color: o.color
-    }), u && (t.areaStyle = {
-      opacity: y
-    }), t;
+    return i.color && (n.itemStyle = {
+      color: i.color
+    }, n.lineStyle = {
+      ...n.lineStyle,
+      color: i.color
+    }), u && (n.areaStyle = {
+      opacity: g
+    }), n;
   });
 }
+function Y(t) {
+  const o = [], d = (t == null ? void 0 : t.type) ?? "both", y = (t == null ? void 0 : t.start) ?? 0, f = (t == null ? void 0 : t.end) ?? 20, m = (t == null ? void 0 : t.height) ?? 20, h = (t == null ? void 0 : t.width) ?? 20, e = (t == null ? void 0 : t.position) ?? "bottom", i = (t == null ? void 0 : t.showDetail) ?? !1, a = (t == null ? void 0 : t.showDataShadow) ?? !1, S = (t == null ? void 0 : t.realtime) ?? !0, r = (t == null ? void 0 : t.filterMode) ?? "filter", u = (t == null ? void 0 : t.xAxisIndex) ?? [0];
+  return (d === "slider" || d === "both") && o.push({
+    type: "slider",
+    show: !0,
+    xAxisIndex: u,
+    start: y,
+    end: f,
+    height: e === "bottom" ? m : void 0,
+    width: e === "right" ? h : void 0,
+    bottom: e === "bottom" ? 10 : void 0,
+    top: e === "top" ? 10 : void 0,
+    right: e === "right" ? 10 : void 0,
+    left: e === "left" ? 10 : void 0,
+    showDetail: i,
+    showDataShadow: a,
+    realtime: S,
+    filterMode: r,
+    handleIcon: "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
+    handleSize: "80%",
+    handleStyle: {
+      color: "#fff",
+      shadowBlur: 3,
+      shadowColor: "rgba(0, 0, 0, 0.6)",
+      shadowOffsetX: 2,
+      shadowOffsetY: 2
+    },
+    textStyle: {
+      color: "#333"
+    },
+    borderColor: "#90979c",
+    fillerColor: "rgba(144, 151, 156, 0.2)",
+    backgroundColor: "rgba(17, 17, 17, 0.1)",
+    selectedDataBackgroundColor: "rgba(0, 0, 0, 0.3)",
+    moveHandleColor: "#fff",
+    moveHandleSize: 7
+  }), (d === "inside" || d === "both") && o.push({
+    type: "inside",
+    xAxisIndex: u,
+    start: y,
+    end: f
+  }), { dataZoom: o };
+}
 export {
-  B as buildLineChartOptions
+  G as buildLineChartOptions
 };

package/dist/components/chart-card/builders/pie-chart-builder.d.ts

@@ -1,3 +1,3 @@
 import { EChartsOption } from 'echarts';
 import { ChartData, PieChartConfig } from '../chart-card.config.types';
-export declare function buildPieChartOptions(config: PieChartConfig, data: ChartData): EChartsOption;
+export declare function buildPieChartOptions(config: PieChartConfig, data: ChartData, _scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;

package/dist/components/chart-card/builders/pie-chart-builder.js

@@ -1,29 +1,32 @@
 import { buildLegendConfig as O, buildTooltipConfig as P, buildTitleConfig as T } from "../config/defaults.js";
 import { getThemePalette as D } from "../config/colors.js";
-function j(e, o) {
-  var r, u, d, a, m, p, c;
-  const b = D("pie", e.theme), n = o.series.map((s) => s.name), l = !!e.name, t = n.length > 1;
+function j(e, s, w, u) {
+  var p, l, c, b, h, o, a, r, d;
+  const m = D("pie", e.theme), t = s.series.map((f) => f.name), n = !!e.name, S = t.length > 1;
   return {
-    color: b,
-    title: l ? T(e.name, (r = e.options) == null ? void 0 : r.title) : void 0,
-    tooltip: P({ ...(u = e.options) == null ? void 0 : u.tooltip, trigger: "item" }),
-    legend: t ? O(n, l, (d = e.options) == null ? void 0 : d.legend) : void 0,
-    series: v(e, o),
-    animation: ((m = (a = e.options) == null ? void 0 : a.animation) == null ? void 0 : m.enabled) ?? !0,
-    animationDuration: ((c = (p = e.options) == null ? void 0 : p.animation) == null ? void 0 : c.duration) ?? 1e3
+    color: m,
+    title: n ? T(e.name, (p = e.options) == null ? void 0 : p.title) : void 0,
+    tooltip: P({ ...(l = e.options) == null ? void 0 : l.tooltip, trigger: "item" }),
+    legend: S ? O(t, n, {
+      ...(c = e.options) == null ? void 0 : c.legend,
+      scrollable: u || ((h = (b = e.options) == null ? void 0 : b.legend) == null ? void 0 : h.scrollable)
+    }) : void 0,
+    series: v(e, s),
+    animation: ((a = (o = e.options) == null ? void 0 : o.animation) == null ? void 0 : a.enabled) ?? !0,
+    animationDuration: ((d = (r = e.options) == null ? void 0 : r.animation) == null ? void 0 : d.duration) ?? 1e3
   };
 }
-function v(e, o) {
-  var C, w, L, g, R;
-  const b = e.theme === "donut", n = ((C = e.options) == null ? void 0 : C.seriesStyles) ?? {}, l = ((w = e.options) == null ? void 0 : w.defaultSeriesStyle) ?? {}, t = ((L = e.options) == null ? void 0 : L.pie) ?? {}, f = ((g = o.series[0]) == null ? void 0 : g.values.map((h, i) => ({
-    name: o.labels[i],
-    value: h
-  }))) ?? [], r = b ? ["40%", "70%"] : ["0%", "70%"], u = t.radius ?? r, d = t.center ?? ["50%", "50%"], a = t.labelPosition ?? "outside", m = t.labelRotate ?? !1, p = t.showLabel ?? !0, c = t.showLabelLine ?? !0, s = {
-    name: ((R = o.series[0]) == null ? void 0 : R.name) ?? "Data",
+function v(e, s) {
+  var r, d, f, g, R;
+  const w = e.theme === "donut", u = ((r = e.options) == null ? void 0 : r.seriesStyles) ?? {}, m = ((d = e.options) == null ? void 0 : d.defaultSeriesStyle) ?? {}, t = ((f = e.options) == null ? void 0 : f.pie) ?? {}, n = ((g = s.series[0]) == null ? void 0 : g.values.map((y, i) => ({
+    name: s.labels[i],
+    value: y
+  }))) ?? [], S = w ? ["40%", "70%"] : ["0%", "70%"], L = t.radius ?? S, p = t.center ?? ["50%", "50%"], l = t.labelPosition ?? "outside", c = t.labelRotate ?? !1, b = t.showLabel ?? !0, h = t.showLabelLine ?? !0, o = {
+    name: ((R = s.series[0]) == null ? void 0 : R.name) ?? "Data",
     type: "pie",
-    radius: u,
-    center: d,
-    data: f,
+    radius: L,
+    center: p,
+    data: n,
     emphasis: {
       focus: "self",
       itemStyle: {
@@ -33,15 +36,15 @@ function v(e, o) {
       }
     },
     label: {
-      show: p,
-      position: a,
-      rotate: m,
+      show: b,
+      position: l,
+      rotate: c,
       formatter: "{b}: {c} ({d}%)",
       fontSize: 12,
       fontFamily: "Inter Variable, sans-serif"
     },
     labelLine: {
-      show: c && a === "outside",
+      show: h && l === "outside",
       length: 10,
       length2: 5
     },
@@ -50,21 +53,21 @@ function v(e, o) {
       borderWidth: 2
     }
   };
-  if (Object.keys(n).length > 0) {
-    const h = f.map((i) => ({
-      ...l,
-      ...n[i.name] ?? {}
+  if (Object.keys(u).length > 0) {
+    const y = n.map((i) => ({
+      ...m,
+      ...u[i.name] ?? {}
     }).color).filter(Boolean);
-    if (h.length > 0) {
+    if (y.length > 0) {
       const i = D("pie", e.theme);
-      s.itemStyle = {
-        ...s.itemStyle,
-        color: (y) => h[y.dataIndex] || i[y.dataIndex % i.length]
+      o.itemStyle = {
+        ...o.itemStyle,
+        color: (C) => y[C.dataIndex] || i[C.dataIndex % i.length]
       };
     }
   }
-  const S = l.pieRadius;
-  return S && (s.radius = S), [s];
+  const a = m.pieRadius;
+  return a && (o.radius = a), [o];
 }
 export {
   j as buildPieChartOptions

package/dist/components/chart-card/chart-card.config.types.d.ts

@@ -29,6 +29,18 @@ export interface ChartOptions {
         position?: 'top' | 'bottom' | 'left' | 'right';
         align?: 'left' | 'center' | 'right';
         orient?: 'horizontal' | 'vertical';
+        scrollable?: boolean;
+        pageButtonItemGap?: number;
+        pageButtonGap?: number;
+        pageButtonPosition?: 'start' | 'end';
+        pageFormatter?: string;
+        pageIconColor?: string;
+        pageIconInactiveColor?: string;
+        pageIconSize?: number;
+        pageTextStyle?: {
+            color?: string;
+            fontSize?: number;
+        };
     };
     tooltip?: {
         show?: boolean;
@@ -67,6 +79,21 @@ export interface ChartOptions {
         showLabel?: boolean;
         showLabelLine?: boolean;
     };
+    scrollable?: {
+        enabled?: boolean;
+        type?: 'slider' | 'inside' | 'both';
+        start?: number;
+        end?: number;
+        height?: number;
+        width?: number;
+        position?: 'bottom' | 'top' | 'left' | 'right';
+        showDetail?: boolean;
+        showDataShadow?: boolean;
+        realtime?: boolean;
+        filterMode?: 'filter' | 'empty' | 'none';
+        xAxisIndex?: number[];
+        yAxisIndex?: number[];
+    };
 }
 interface BaseChartConfig {
     name: string;

package/dist/components/chart-card/chart-card.d.ts

@@ -1,2 +1,2 @@
 import { ChartCardProps } from './chart-card.types';
-export declare function ChartCard({ config, data, loading, error, className, style, chartProps, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartCard({ config, data, loading, error, className, style, chartProps, scrollable, scrollableLegend, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/chart-card/chart-card.js

@@ -1,42 +1,44 @@
 import { jsx as a } from "react/jsx-runtime";
-import * as N from "react";
-import { cn as v } from "../../lib/utils.js";
-import { validateChartConfig as p, validateChartData as w } from "./validators/config-validator.js";
-import { buildChartOptions as S } from "./builders/chart-builder-factory.js";
-import { Chart as E } from "../chart/chart.js";
-import { LoadingState as O, ErrorState as l, EmptyState as R } from "./chart-card-states.js";
-function j({
+import * as p from "react";
+import { cn as w } from "../../lib/utils.js";
+import { validateChartConfig as S, validateChartData as E } from "./validators/config-validator.js";
+import { buildChartOptions as O } from "./builders/chart-builder-factory.js";
+import { Chart as R } from "../chart/chart.js";
+import { LoadingState as V, ErrorState as l, EmptyState as $ } from "./chart-card-states.js";
+function D({
   config: t,
   data: n,
   loading: u = !1,
   error: m,
   className: f,
   style: g,
-  chartProps: e
+  chartProps: e,
+  scrollable: b = !1,
+  scrollableLegend: c = !1
 }) {
-  const r = t.height ?? 400, b = N.useMemo(() => {
+  const r = t.height ?? 400, y = p.useMemo(() => {
     if (!e)
       return {};
-    const { className: s, style: i, ...C } = e;
-    return C;
-  }, [e]), c = e == null ? void 0 : e.className, y = e == null ? void 0 : e.style;
+    const { className: s, style: i, ...v } = e;
+    return v;
+  }, [e]), C = e == null ? void 0 : e.className, N = e == null ? void 0 : e.style;
   if (u)
-    return /* @__PURE__ */ a(O, { height: r });
+    return /* @__PURE__ */ a(V, { height: r });
   if (m)
     return /* @__PURE__ */ a(l, { height: r, message: m });
-  const o = p(t);
+  const o = S(t);
   if (!o.valid)
     return /* @__PURE__ */ a(l, { height: r, message: o.error || "Invalid configuration" });
-  const d = w(n);
+  const d = E(n);
   if (!d.valid)
     return /* @__PURE__ */ a(l, { height: r, message: d.error ?? "Invalid data" });
   if (!n.series.some(
     (s) => s.values.some((i) => typeof i == "number" && !Number.isNaN(i) && i !== 0)
   ))
-    return /* @__PURE__ */ a(R, { height: r });
+    return /* @__PURE__ */ a($, { height: r });
   let h;
   try {
-    h = S(t, n);
+    h = O(t, n, b, c);
   } catch (s) {
     const i = s instanceof Error ? s.message : "Failed to build chart";
     return /* @__PURE__ */ a(l, { height: r, message: i });
@@ -44,7 +46,7 @@ function j({
   return /* @__PURE__ */ a(
     "div",
     {
-      className: v(
+      className: w(
         "w-full rounded-lg bg-background-neutral-default border border-neutral-150 p-4",
         f
       ),
@@ -52,21 +54,21 @@ function j({
       role: "img",
       "aria-label": t.ariaLabel || `${t.type} chart${t.name ? `: ${t.name}` : ""}`,
       children: /* @__PURE__ */ a(
-        E,
+        R,
         {
           option: h,
-          className: c,
+          className: C,
           style: {
             height: r,
             width: t.width || "100%",
-            ...y
+            ...N
           },
-          ...b
+          ...y
         }
       )
     }
   );
 }
 export {
-  j as ChartCard
+  D as ChartCard
 };

package/dist/components/chart-card/chart-card.types.d.ts

@@ -9,4 +9,6 @@ export interface ChartCardProps {
     className?: string;
     style?: CSSProperties;
     chartProps?: Omit<EChartsReactProps, 'option'>;
+    scrollable?: boolean;
+    scrollableLegend?: boolean;
 }

package/dist/components/chart-card/config/defaults.d.ts

@@ -44,6 +44,34 @@ export declare function buildLegendConfig(data: string[], hasTitle?: boolean, op
     };
     itemWidth: number;
     itemHeight: number;
+} | {
+    type: string;
+    pageButtonItemGap: number;
+    pageButtonGap: number;
+    pageButtonPosition: "end" | "start";
+    pageFormatter: string;
+    pageIconColor: string;
+    pageIconInactiveColor: string;
+    pageIconSize: number;
+    pageTextStyle: {
+        color: string;
+        fontSize: number;
+    };
+    data: string[];
+    top: string | number;
+    bottom: string | number | undefined;
+    left: string | number;
+    right: string | number | undefined;
+    orient: "horizontal" | "vertical";
+    itemGap: number;
+    padding: number[];
+    textStyle: {
+        fontSize: number;
+        fontFamily: string;
+        color: "#000000";
+    };
+    itemWidth: number;
+    itemHeight: number;
 } | undefined;
 export declare function buildAxisLabelConfig(rotate?: number): {
     rotate?: number | undefined;

package/dist/components/chart-card/config/defaults.js

@@ -1,156 +1,173 @@
-import { UI_COLORS as m } from "./colors.js";
-const g = "Inter Variable, sans-serif", c = {
-  fontFamily: g,
-  color: m.text.primary
+import { UI_COLORS as c } from "./colors.js";
+const S = "Inter Variable, sans-serif", d = {
+  fontFamily: S,
+  color: c.text.primary
 };
-function y(e, l) {
-  if ((l == null ? void 0 : l.show) === !1)
+function T(a, r) {
+  if ((r == null ? void 0 : r.show) === !1)
     return;
-  const r = (l == null ? void 0 : l.position) ?? "left", a = (l == null ? void 0 : l.fontSize) ?? 16, f = (l == null ? void 0 : l.color) ?? m.text.primary;
+  const e = (r == null ? void 0 : r.position) ?? "left", l = (r == null ? void 0 : r.fontSize) ?? 16, f = (r == null ? void 0 : r.color) ?? c.text.primary;
   return {
-    text: e,
+    text: a,
     textStyle: {
-      fontFamily: g,
-      fontSize: a,
+      fontFamily: S,
+      fontSize: l,
       fontWeight: 500,
       color: f
     },
-    left: r,
+    left: e,
     top: 12,
     padding: [0, 0, 8, 0]
   };
 }
-function C(e) {
-  return (e == null ? void 0 : e.show) === !1 ? void 0 : {
-    trigger: (e == null ? void 0 : e.trigger) ?? "axis",
-    backgroundColor: m.background.default,
-    borderColor: m.border.default,
+function z(a) {
+  return (a == null ? void 0 : a.show) === !1 ? void 0 : {
+    trigger: (a == null ? void 0 : a.trigger) ?? "axis",
+    backgroundColor: c.background.default,
+    borderColor: c.border.default,
     borderWidth: 1,
     textStyle: {
-      ...c
+      ...d
     }
   };
 }
-function v(e, l = !1, r) {
-  if ((r == null ? void 0 : r.show) === !1)
+function F(a, r = !1, e) {
+  var y, h;
+  if ((e == null ? void 0 : e.show) === !1)
     return;
-  const a = (r == null ? void 0 : r.position) ?? "top", f = (r == null ? void 0 : r.orient) ?? "horizontal";
-  let u = l ? 48 : 16, t, d = "center", b;
-  return a === "bottom" ? (u = "auto", t = 10) : a === "left" ? (u = "middle", d = 10) : a === "right" && (u = "middle", d = "auto", b = 10), {
-    data: e,
+  const l = (e == null ? void 0 : e.position) ?? "top", f = (e == null ? void 0 : e.orient) ?? "horizontal", m = (e == null ? void 0 : e.scrollable) ?? !1;
+  let u = r ? 48 : 16, g, b = "center", x;
+  l === "bottom" ? (u = "auto", g = 10) : l === "left" ? (u = "middle", b = 10) : l === "right" && (u = "middle", b = "auto", x = 10);
+  const t = {
+    data: a,
     top: u,
-    bottom: t,
-    left: d,
-    right: b,
+    bottom: g,
+    left: b,
+    right: x,
     orient: f,
     itemGap: 20,
     padding: [8, 0, 12, 0],
     textStyle: {
-      ...c,
+      ...d,
       fontSize: 12
     },
     itemWidth: 25,
     itemHeight: 14
   };
+  return m ? {
+    ...t,
+    type: "scroll",
+    pageButtonItemGap: (e == null ? void 0 : e.pageButtonItemGap) ?? 5,
+    pageButtonGap: (e == null ? void 0 : e.pageButtonGap) ?? 10,
+    pageButtonPosition: (e == null ? void 0 : e.pageButtonPosition) ?? "end",
+    pageFormatter: (e == null ? void 0 : e.pageFormatter) ?? "{current}/{total}",
+    pageIconColor: (e == null ? void 0 : e.pageIconColor) ?? "#2f4554",
+    pageIconInactiveColor: (e == null ? void 0 : e.pageIconInactiveColor) ?? "#aaa",
+    pageIconSize: (e == null ? void 0 : e.pageIconSize) ?? 12,
+    pageTextStyle: {
+      color: ((y = e == null ? void 0 : e.pageTextStyle) == null ? void 0 : y.color) ?? "#333",
+      fontSize: ((h = e == null ? void 0 : e.pageTextStyle) == null ? void 0 : h.fontSize) ?? 12
+    }
+  } : t;
 }
-function x(e) {
+function L(a) {
   return {
-    color: m.text.secondary,
-    fontFamily: g,
+    color: c.text.secondary,
+    fontFamily: S,
     fontSize: 11,
-    ...e && { rotate: e }
+    ...a && { rotate: a }
   };
 }
-function S(e = !0) {
+function C(a = !0) {
   return {
-    show: e,
+    show: a,
     lineStyle: {
-      color: m.border.default
+      color: c.border.default
     }
   };
 }
-function h(e = !0) {
+function I(a = !0) {
   return {
-    show: e,
+    show: a,
     lineStyle: {
-      color: m.border.light
+      color: c.border.light
     }
   };
 }
-function T(e, l = !1, r = "top", a) {
-  if (a)
+function w(a, r = !1, e = "top", l) {
+  if (l)
     return {
-      left: a.left ?? "3%",
-      right: a.right ?? "4%",
-      bottom: a.bottom ?? "3%",
-      top: a.top ?? 20,
+      left: l.left ?? "3%",
+      right: l.right ?? "4%",
+      bottom: l.bottom ?? "3%",
+      top: l.top ?? 20,
       containLabel: !0
     };
   let f = 20;
-  e && (f += 48), l && r === "top" && (f += 40);
+  a && (f += 48), r && e === "top" && (f += 40);
+  let m = "3%";
+  r && e === "bottom" && (m = 60);
   let u = "3%";
-  l && r === "bottom" && (u = 60);
-  let t = "3%";
-  l && r === "left" && (t = 100);
-  let d = "4%";
-  return l && r === "right" && (d = 100), {
-    left: t,
-    right: d,
-    bottom: u,
+  r && e === "left" && (u = 100);
+  let g = "4%";
+  return r && e === "right" && (g = 100), {
+    left: u,
+    right: g,
+    bottom: m,
     top: f,
     containLabel: !0
   };
 }
-function w(e, l = !0, r) {
-  return (r == null ? void 0 : r.show) === !1 ? { show: !1 } : {
+function A(a, r = !0, e) {
+  return (e == null ? void 0 : e.show) === !1 ? { show: !1 } : {
     type: "category",
-    data: e,
-    boundaryGap: l,
-    name: r == null ? void 0 : r.name,
-    nameLocation: (r == null ? void 0 : r.nameLocation) ?? "middle",
-    nameGap: r != null && r.name ? 30 : void 0,
-    nameTextStyle: r != null && r.name ? {
-      ...c,
+    data: a,
+    boundaryGap: r,
+    name: e == null ? void 0 : e.name,
+    nameLocation: (e == null ? void 0 : e.nameLocation) ?? "middle",
+    nameGap: e != null && e.name ? 30 : void 0,
+    nameTextStyle: e != null && e.name ? {
+      ...d,
       fontSize: 12,
       fontWeight: 500
     } : void 0,
-    axisLine: S(),
-    axisLabel: x(r == null ? void 0 : r.labelRotate),
-    splitLine: h((r == null ? void 0 : r.gridLines) ?? !1)
+    axisLine: C(),
+    axisLabel: L(e == null ? void 0 : e.labelRotate),
+    splitLine: I((e == null ? void 0 : e.gridLines) ?? !1)
   };
 }
-function z(e) {
-  if ((e == null ? void 0 : e.show) === !1)
+function B(a) {
+  if ((a == null ? void 0 : a.show) === !1)
     return { show: !1 };
-  const l = (e == null ? void 0 : e.min) === "auto" || e == null ? void 0 : e.min, r = (e == null ? void 0 : e.max) === "auto" || e == null ? void 0 : e.max;
+  const r = (a == null ? void 0 : a.min) === "auto" || a == null ? void 0 : a.min, e = (a == null ? void 0 : a.max) === "auto" || a == null ? void 0 : a.max;
   return {
     type: "value",
-    name: e == null ? void 0 : e.name,
-    nameLocation: (e == null ? void 0 : e.nameLocation) ?? "middle",
-    nameGap: e != null && e.name ? 50 : void 0,
+    name: a == null ? void 0 : a.name,
+    nameLocation: (a == null ? void 0 : a.nameLocation) ?? "middle",
+    nameGap: a != null && a.name ? 50 : void 0,
     nameRotate: 90,
-    nameTextStyle: e != null && e.name ? {
-      ...c,
+    nameTextStyle: a != null && a.name ? {
+      ...d,
       fontSize: 12,
       fontWeight: 500
     } : void 0,
-    min: l,
-    max: r,
-    axisLine: S(!1),
-    axisLabel: x(),
-    splitLine: h((e == null ? void 0 : e.gridLines) ?? !0)
+    min: r,
+    max: e,
+    axisLine: C(!1),
+    axisLabel: L(),
+    splitLine: I((a == null ? void 0 : a.gridLines) ?? !0)
   };
 }
 export {
-  c as COMMON_TEXT_STYLE,
-  g as DEFAULT_FONT_FAMILY,
-  x as buildAxisLabelConfig,
-  S as buildAxisLineConfig,
-  T as buildGridConfig,
-  v as buildLegendConfig,
-  h as buildSplitLineConfig,
-  y as buildTitleConfig,
-  C as buildTooltipConfig,
-  w as buildXAxisConfig,
-  z as buildYAxisConfig
+  d as COMMON_TEXT_STYLE,
+  S as DEFAULT_FONT_FAMILY,
+  L as buildAxisLabelConfig,
+  C as buildAxisLineConfig,
+  w as buildGridConfig,
+  F as buildLegendConfig,
+  I as buildSplitLineConfig,
+  T as buildTitleConfig,
+  z as buildTooltipConfig,
+  A as buildXAxisConfig,
+  B as buildYAxisConfig
 };

package/dist/components/nav-header/nav-item/nav-item.d.ts

@@ -4,5 +4,6 @@ export interface NavItemProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     label?: string;
+    asTag?: React.ElementType;
 }
 export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/nav-header/nav-item/nav-item.js

@@ -1,32 +1,32 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import u from "react";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import p from "react";
 import { cn as f } from "../../../lib/utils.js";
-const p = u.forwardRef(
-  ({ leftIcon: n, label: o, rightIcon: r, className: t, isActive: a, children: l, ...c }, d) => {
-    const i = o ?? l, s = "w-3.5 h-3.5 min-w-max";
-    return /* @__PURE__ */ m(
-      "button",
+const v = p.forwardRef(
+  ({ leftIcon: n, label: t, rightIcon: o, className: i, isActive: a, children: c, asTag: l = "button", ...d }, m) => {
+    const r = t ?? c, s = "w-3.5 h-3.5 min-w-max";
+    return /* @__PURE__ */ u(
+      l,
       {
-        ref: d,
+        ref: m,
         className: f(
           "h-7.5 inline-flex items-center justify-center p-2 gap-1 rounded-lg",
           "hover:bg-background-inverted-elevated text-inverted-primary",
           "leading-none-medium-sm",
           "select-none hover:cursor-pointer disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring-default",
           a && "bg-background-inverted-elevated",
-          t
+          i
         ),
-        ...c,
+        ...d,
         children: [
           n && /* @__PURE__ */ e("span", { className: s, children: n }),
-          i && /* @__PURE__ */ e("span", { children: i }),
-          r && /* @__PURE__ */ e("span", { className: s, children: r })
+          r && /* @__PURE__ */ e("span", { children: r }),
+          o && /* @__PURE__ */ e("span", { className: s, children: o })
         ]
       }
     );
   }
 );
-p.displayName = "NavItem";
+v.displayName = "NavItem";
 export {
-  p as NavItem
+  v as NavItem
 };

package/dist/types/components/chart-card/builders/bar-chart-builder.d.ts

@@ -1,3 +1,3 @@
 import type { EChartsOption } from 'echarts';
 import type { BarChartConfig, ChartData } from '../chart-card.config.types';
-export declare function buildBarChartOptions(config: BarChartConfig, data: ChartData): EChartsOption;
+export declare function buildBarChartOptions(config: BarChartConfig, data: ChartData, scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;

package/dist/types/components/chart-card/builders/chart-builder-factory.d.ts

@@ -1,5 +1,5 @@
 import type { EChartsOption } from 'echarts';
 import type { ChartConfig, ChartData, ChartType } from '../chart-card.config.types';
-export declare function buildChartOptions(config: ChartConfig, data: ChartData): EChartsOption;
+export declare function buildChartOptions(config: ChartConfig, data: ChartData, scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;
 export declare function isChartTypeSupported(type: string): type is ChartType;
 export declare const registeredChartTypes: readonly ChartType[];

package/dist/types/components/chart-card/builders/line-chart-builder.d.ts

@@ -1,3 +1,3 @@
 import type { EChartsOption } from 'echarts';
 import type { ChartData, LineChartConfig } from '../chart-card.config.types';
-export declare function buildLineChartOptions(config: LineChartConfig, data: ChartData): EChartsOption;
+export declare function buildLineChartOptions(config: LineChartConfig, data: ChartData, scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;

package/dist/types/components/chart-card/builders/pie-chart-builder.d.ts

@@ -1,3 +1,3 @@
 import type { EChartsOption } from 'echarts';
 import type { ChartData, PieChartConfig } from '../chart-card.config.types';
-export declare function buildPieChartOptions(config: PieChartConfig, data: ChartData): EChartsOption;
+export declare function buildPieChartOptions(config: PieChartConfig, data: ChartData, _scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;

package/dist/types/components/chart-card/chart-card.config.types.d.ts

@@ -29,6 +29,18 @@ export interface ChartOptions {
         position?: 'top' | 'bottom' | 'left' | 'right';
         align?: 'left' | 'center' | 'right';
         orient?: 'horizontal' | 'vertical';
+        scrollable?: boolean;
+        pageButtonItemGap?: number;
+        pageButtonGap?: number;
+        pageButtonPosition?: 'start' | 'end';
+        pageFormatter?: string;
+        pageIconColor?: string;
+        pageIconInactiveColor?: string;
+        pageIconSize?: number;
+        pageTextStyle?: {
+            color?: string;
+            fontSize?: number;
+        };
     };
     tooltip?: {
         show?: boolean;
@@ -67,6 +79,21 @@ export interface ChartOptions {
         showLabel?: boolean;
         showLabelLine?: boolean;
     };
+    scrollable?: {
+        enabled?: boolean;
+        type?: 'slider' | 'inside' | 'both';
+        start?: number;
+        end?: number;
+        height?: number;
+        width?: number;
+        position?: 'bottom' | 'top' | 'left' | 'right';
+        showDetail?: boolean;
+        showDataShadow?: boolean;
+        realtime?: boolean;
+        filterMode?: 'filter' | 'empty' | 'none';
+        xAxisIndex?: number[];
+        yAxisIndex?: number[];
+    };
 }
 interface BaseChartConfig {
     name: string;

package/dist/types/components/chart-card/chart-card.d.ts

@@ -1,2 +1,2 @@
 import type { ChartCardProps } from './chart-card.types';
-export declare function ChartCard({ config, data, loading, error, className, style, chartProps, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartCard({ config, data, loading, error, className, style, chartProps, scrollable, scrollableLegend, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/chart-card/chart-card.types.d.ts

@@ -9,4 +9,6 @@ export interface ChartCardProps {
     className?: string;
     style?: CSSProperties;
     chartProps?: Omit<EChartsReactProps, 'option'>;
+    scrollable?: boolean;
+    scrollableLegend?: boolean;
 }

package/dist/types/components/chart-card/config/defaults.d.ts

@@ -44,6 +44,34 @@ export declare function buildLegendConfig(data: string[], hasTitle?: boolean, op
     };
     itemWidth: number;
     itemHeight: number;
+} | {
+    type: string;
+    pageButtonItemGap: number;
+    pageButtonGap: number;
+    pageButtonPosition: "end" | "start";
+    pageFormatter: string;
+    pageIconColor: string;
+    pageIconInactiveColor: string;
+    pageIconSize: number;
+    pageTextStyle: {
+        color: string;
+        fontSize: number;
+    };
+    data: string[];
+    top: string | number;
+    bottom: string | number | undefined;
+    left: string | number;
+    right: string | number | undefined;
+    orient: "horizontal" | "vertical";
+    itemGap: number;
+    padding: number[];
+    textStyle: {
+        fontSize: number;
+        fontFamily: string;
+        color: "#000000";
+    };
+    itemWidth: number;
+    itemHeight: number;
 } | undefined;
 export declare function buildAxisLabelConfig(rotate?: number): {
     rotate?: number | undefined;

package/dist/types/components/nav-header/nav-item/nav-item.d.ts

@@ -4,5 +4,6 @@ export interface NavItemProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     label?: string;
+    asTag?: React.ElementType;
 }
 export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLButtonElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.120",
+  "version": "0.1.122",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",