@ztwoint/z-ui 0.1.121 → 0.1.123

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;