vue-chrts 2.0.0 → 2.1.0-beta.0.1

package/dist/components/AreaChart/AreaChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as z, useSlots as R, useTemplateRef as U, ref as H, computed as d, createElementBlock as f, openBlock as c, normalizeClass as K, normalizeStyle as p, createVNode as u, createCommentVNode as y, createElementVNode as q, unref as r, withCtx as J, createBlock as k, Fragment as T, renderList as Q, mergeProps as v, renderSlot as b } from "vue";
-import { Position as $, CurveType as h } from "@unovis/ts";
-import { createMarkers as Z } from "../../utils.js";
-import I from "../Tooltip.js";
-import { VisXYContainer as _, VisTooltip as ee, VisArea as B, VisLine as D, VisAxis as O, VisCrosshair as te, VisBulletLegend as ie } from "@unovis/vue";
-import { LegendPosition as ae } from "../../types.js";
-const ne = ["id"], oe = {
+import { defineComponent as H, useSlots as I, useTemplateRef as K, ref as q, getCurrentInstance as J, computed as c, createElementBlock as f, openBlock as d, normalizeClass as Q, normalizeStyle as p, createVNode as u, createCommentVNode as m, createElementVNode as Z, unref as l, withCtx as _, createBlock as k, Fragment as T, renderList as ee, mergeProps as v, renderSlot as B } from "vue";
+import { Position as D, CurveType as h } from "@unovis/ts";
+import { createScopedMarkers as te } from "../../utils.js";
+import ie from "../Tooltip.js";
+import { VisXYContainer as ne, VisTooltip as ae, VisArea as O, VisLine as V, VisAxis as F, VisCrosshair as oe, VisBulletLegend as re } from "@unovis/vue";
+import { LegendPosition as le } from "../../types.js";
+const se = ["id"], ce = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, F = 0.5, A = "#3b82f6", ye = /* @__PURE__ */ z({
+}, S = 0.5, C = "#3b82f6", ke = /* @__PURE__ */ H({
   __name: "AreaChart",
   props: {
     data: {},
@@ -34,7 +34,7 @@ const ne = ["id"], oe = {
     yNumTicks: {},
     hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean },
-    legendPosition: { default: ae.BottomCenter },
+    legendPosition: { default: le.BottomCenter },
     legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -54,128 +54,137 @@ const ne = ["id"], oe = {
     stacked: { type: Boolean }
   },
   emits: ["click"],
-  setup(e, { emit: V }) {
-    const j = V, n = e, G = R(), C = U("slotWrapper"), m = H(), g = d(() => {
-      const i = Object.values(n.categories).map(
-        (l, a) => `var(--vis-color${a})`
+  setup(e, { emit: j }) {
+    var b;
+    const G = j, a = e, N = I(), A = K("slotWrapper"), y = q(), L = `area-${((b = J()) == null ? void 0 : b.uid) ?? Math.random().toString(36).slice(2)}`, g = c(() => {
+      const t = Object.values(a.categories).map(
+        (o, n) => `var(--vis-color${n})`
       );
-      return Object.values(n.categories).map(
-        (l, a) => l.color ?? i[a]
+      return Object.values(a.categories).map(
+        (o, n) => o.color ?? t[n]
       );
-    }), N = d(() => {
-      var i;
-      return (i = n.markerConfig) != null && i.config ? Z(n.markerConfig) : "";
-    }), S = d(() => n.legendPosition.startsWith("top")), W = d(() => n.legendPosition.includes("left") ? "flex-start" : n.legendPosition.includes("right") ? "flex-end" : "center"), M = d(() => {
-      const i = (a, t) => {
-        var o;
+    }), M = c(() => {
+      var t;
+      return (t = a.markerConfig) != null && t.config ? te(a.markerConfig, L) : "";
+    }), W = c(() => {
+      var o;
+      if (!((o = a.markerConfig) != null && o.config)) return {};
+      const t = {};
+      for (const n of Object.keys(a.markerConfig.config))
+        t[`--vis-marker-${n}`] = `url("#${a.markerConfig.id}--${L}--${n}")`;
+      return t;
+    }), P = c(() => a.legendPosition.startsWith("top")), w = c(() => a.legendPosition.includes("left") ? "flex-start" : a.legendPosition.includes("right") ? "flex-end" : "center"), X = c(() => {
+      const t = (n, i) => {
+        var r;
         return `
-    <linearGradient id="gradient${a}-${t}" gradientTransform="rotate(90)">
-      ${((o = n.gradientStops) == null ? void 0 : o.map(
-          (s) => `<stop offset="${s.offset}" stop-color="${t}" stop-opacity="${s.stopOpacity}" />`
+    <linearGradient id="gradient${n}-${i}" gradientTransform="rotate(90)">
+      ${((r = a.gradientStops) == null ? void 0 : r.map(
+          (s) => `<stop offset="${s.offset}" stop-color="${i}" stop-opacity="${s.stopOpacity}" />`
         ).join("")) ?? ""}
-      <stop offset="100%" stop-color="${t}" stop-opacity="0" />
+      <stop offset="100%" stop-color="${i}" stop-opacity="0" />
     </linearGradient>
   `;
-      }, l = (a, t) => {
-        var o;
+      }, o = (n, i) => {
+        var r;
         return `
-    <linearGradient id="gradient${a}-${t}" gradientTransform="rotate(90)">
+    <linearGradient id="gradient${n}-${i}" gradientTransform="rotate(90)">
 
-    ${((o = n.gradientStops) == null ? void 0 : o.map(
+    ${((r = a.gradientStops) == null ? void 0 : r.map(
           (s) => `
-      <stop offset="${s.offset}" style="stop-color:var(${t});stop-opacity:${s.stopOpacity}" />
+      <stop offset="${s.offset}" style="stop-color:var(${i});stop-opacity:${s.stopOpacity}" />
     `
         ).join("")) ?? ""}
     </linearGradient>
   `;
       };
       return g.value.map(
-        (a, t) => a != null && a.includes("#") ? i(t, a) : l(t, a ?? A)
+        (n, i) => n != null && n.includes("#") ? t(i, n) : o(i, n ?? C)
       ).join("");
     });
-    function P(i) {
-      var l;
+    function E(t) {
+      var o;
       return {
-        y: (a) => Number(a[i]),
-        color: ((l = n.categories[i]) == null ? void 0 : l.color) ?? A
+        y: (n) => Number(n[t]),
+        color: ((o = a.categories[t]) == null ? void 0 : o.color) ?? C
       };
     }
-    const w = d(() => Object.keys(n.categories).map(
-      (i) => (l) => Number(l[i])
-    )), X = d(() => {
-      const i = Object.keys(n.categories);
-      return i.map((l, a) => (t) => {
-        let o = 0;
-        for (let s = 0; s <= a; s++)
-          o += Number(t[i[s]]) || 0;
-        return o;
+    const Y = c(() => Object.keys(a.categories).map(
+      (t) => (o) => Number(o[t])
+    )), z = c(() => {
+      const t = Object.keys(a.categories);
+      return t.map((o, n) => (i) => {
+        let r = 0;
+        for (let s = 0; s <= n; s++)
+          r += Number(i[t[s]]) || 0;
+        return r;
       });
-    }), L = d(() => (i, l) => g.value[l] ?? A);
-    function E(i) {
-      return typeof window > "u" ? "" : C.value ? C.value.innerHTML : "";
+    }), $ = c(() => (t, o) => g.value[o] ?? C);
+    function R(t) {
+      return typeof window > "u" ? "" : A.value ? A.value.innerHTML : "";
     }
-    function Y(i) {
-      return m.value = i, E();
+    function U(t) {
+      return y.value = t, R();
     }
-    return (i, l) => {
-      var a;
-      return c(), f("div", {
+    return (t, o) => {
+      var n;
+      return d(), f("div", {
         style: p({
           display: "flex",
-          flexDirection: S.value ? "column-reverse" : "column",
-          gap: "var(--vis-legend-spacing)"
+          flexDirection: P.value ? "column-reverse" : "column",
+          gap: "var(--vis-legend-spacing)",
+          ...W.value
         }),
-        class: K({ "stacked-area-chart": e.stacked }),
-        id: (a = e.markerConfig) == null ? void 0 : a.id,
-        onClick: l[0] || (l[0] = (t) => j("click", t, m.value))
+        class: Q({ "stacked-area-chart": e.stacked }),
+        id: (n = e.markerConfig) == null ? void 0 : n.id,
+        onClick: o[0] || (o[0] = (i) => G("click", i, y.value))
       }, [
-        u(r(_), {
+        u(l(ne), {
           data: e.data,
           height: e.height,
           padding: e.padding,
-          "svg-defs": M.value + N.value,
+          "svg-defs": X.value + M.value,
           "y-domain": e.yDomain,
           "x-domain": e.xDomain
         }, {
-          default: J(() => [
-            e.hideTooltip ? y("", !0) : (c(), k(r(ee), {
+          default: _(() => [
+            e.hideTooltip ? m("", !0) : (d(), k(l(ae), {
               key: 0,
-              "horizontal-placement": r($).Right,
-              "vertical-placement": r($).Top
+              "horizontal-placement": l(D).Right,
+              "vertical-placement": l(D).Top
             }, null, 8, ["horizontal-placement", "vertical-placement"])),
-            e.stacked ? (c(), f(T, { key: 1 }, [
-              u(r(B), {
-                x: (t, o) => o,
-                y: w.value,
-                color: L.value,
-                opacity: e.hideArea ? 0 : F,
-                "curve-type": e.curveType ?? r(h).MonotoneX
+            e.stacked ? (d(), f(T, { key: 1 }, [
+              u(l(O), {
+                x: (i, r) => r,
+                y: Y.value,
+                color: $.value,
+                opacity: e.hideArea ? 0 : S,
+                "curve-type": e.curveType ?? l(h).MonotoneX
               }, null, 8, ["x", "y", "color", "opacity", "curve-type"]),
-              u(r(D), {
-                x: (t, o) => o,
-                y: X.value,
-                color: L.value,
-                "curve-type": e.curveType ?? r(h).MonotoneX,
+              u(l(V), {
+                x: (i, r) => r,
+                y: z.value,
+                color: $.value,
+                "curve-type": e.curveType ?? l(h).MonotoneX,
                 "line-width": e.lineWidth
               }, null, 8, ["x", "y", "color", "curve-type", "line-width"])
-            ], 64)) : (c(!0), f(T, { key: 2 }, Q(Object.keys(n.categories), (t, o) => (c(), f(T, { key: t }, [
-              u(r(B), v({
+            ], 64)) : (d(!0), f(T, { key: 2 }, ee(Object.keys(a.categories), (i, r) => (d(), f(T, { key: i }, [
+              u(l(O), v({
                 x: (s, x) => x
-              }, { ref_for: !0 }, P(t), {
-                color: `url(#gradient${o}-${g.value[o]})`,
-                opacity: e.hideArea ? 0 : F,
-                "curve-type": e.curveType ?? r(h).MonotoneX
+              }, { ref_for: !0 }, E(i), {
+                color: `url(#gradient${r}-${g.value[r]})`,
+                opacity: e.hideArea ? 0 : S,
+                "curve-type": e.curveType ?? l(h).MonotoneX
               }), null, 16, ["x", "color", "opacity", "curve-type"]),
-              u(r(D), {
+              u(l(V), {
                 x: (s, x) => x,
-                y: (s) => s[t],
-                color: g.value[o],
-                "curve-type": e.curveType ?? r(h).MonotoneX,
+                y: (s) => s[i],
+                color: g.value[r],
+                "curve-type": e.curveType ?? l(h).MonotoneX,
                 "line-width": e.lineWidth,
-                lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
+                lineDashArray: e.lineDashArray ? e.lineDashArray[r] : void 0
               }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
             ], 64))), 128)),
-            e.hideXAxis ? y("", !0) : (c(), k(r(O), v({
+            e.hideXAxis ? m("", !0) : (d(), k(l(F), v({
               key: 3,
               type: "x",
               label: e.xLabel,
@@ -188,7 +197,7 @@ const ne = ["id"], oe = {
               "tick-line": e.xTickLine,
               "min-max-ticks-only": e.minMaxTicksOnly
             }, e.xAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
-            e.hideYAxis ? y("", !0) : (c(), k(r(O), v({
+            e.hideYAxis ? m("", !0) : (d(), k(l(F), v({
               key: 4,
               type: "y",
               label: e.yLabel,
@@ -198,45 +207,45 @@ const ne = ["id"], oe = {
               "domain-line": e.yDomainLine,
               "tick-line": e.yTickLine
             }, e.yAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
-            e.hideTooltip ? y("", !0) : (c(), k(r(te), v({ key: 5 }, e.crosshairConfig, { template: Y }), null, 16))
+            e.hideTooltip ? m("", !0) : (d(), k(l(oe), v({ key: 5 }, e.crosshairConfig, { template: U }), null, 16))
           ]),
           _: 1
         }, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
-        n.hideLegend ? y("", !0) : (c(), f("div", {
+        a.hideLegend ? m("", !0) : (d(), f("div", {
           key: 0,
           style: p({
             display: "flex",
-            justifyContent: W.value
+            justifyContent: w.value
           })
         }, [
-          u(r(ie), {
+          u(l(re), {
             style: p([
-              n.legendStyle,
+              a.legendStyle,
               "display: flex; gap: var(--vis-legend-spacing);"
             ]),
-            items: Object.values(n.categories).map((t) => ({
-              ...t,
-              color: Array.isArray(t.color) ? t.color[0] : t.color
+            items: Object.values(a.categories).map((i) => ({
+              ...i,
+              color: Array.isArray(i.color) ? i.color[0] : i.color
             }))
           }, null, 8, ["style", "items"])
         ], 4)),
-        q("div", oe, [
-          r(G).tooltip ? b(i.$slots, "tooltip", {
+        Z("div", ce, [
+          l(N).tooltip ? B(t.$slots, "tooltip", {
             key: 0,
-            values: m.value
-          }) : m.value ? b(i.$slots, "fallback", { key: 1 }, () => [
-            u(I, {
-              data: m.value,
+            values: y.value
+          }) : y.value ? B(t.$slots, "fallback", { key: 1 }, () => [
+            u(ie, {
+              data: y.value,
               categories: e.categories,
-              "title-formatter": n.tooltipTitleFormatter,
-              yFormatter: n.yFormatter
+              "title-formatter": a.tooltipTitleFormatter,
+              yFormatter: a.yFormatter
             }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
-          ]) : y("", !0)
+          ]) : m("", !0)
         ], 512)
-      ], 14, ne);
+      ], 14, se);
     };
   }
 });
 export {
-  ye as default
+  ke as default
 };

package/dist/components/DualChart/DualChart.js

@@ -0,0 +1,206 @@
+import { defineComponent as N, useSlots as W, useTemplateRef as E, ref as G, computed as c, createElementBlock as m, openBlock as o, normalizeStyle as f, createVNode as x, createCommentVNode as u, createElementVNode as z, unref as a, withCtx as H, createBlock as d, Fragment as X, renderList as j, mergeProps as k, renderSlot as p } from "vue";
+import { Orientation as y, CurveType as A, Position as L, StackedBar as q, GroupedBar as $ } from "@unovis/ts";
+import { VisXYContainer as R, VisTooltip as U, VisGroupedBar as I, VisStackedBar as J, VisLine as K, VisAxis as B, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
+import _ from "../Tooltip.js";
+import { LegendPosition as ee } from "../../types.js";
+const te = {
+  ref: "slotWrapper",
+  style: { display: "none" }
+}, de = /* @__PURE__ */ N({
+  __name: "DualChart",
+  props: {
+    data: {},
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    yLabelSecondary: {},
+    padding: { default: () => ({
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5
+    }) },
+    barCategories: {},
+    lineCategories: {},
+    barYAxis: {},
+    lineYAxis: {},
+    xFormatter: {},
+    yFormatter: {},
+    tooltipTitleFormatter: {},
+    curveType: { default: A.MonotoneX },
+    lineWidth: { default: 2 },
+    xNumTicks: {},
+    xExplicitTicks: {},
+    minMaxTicksOnly: { type: Boolean },
+    yNumTicks: {},
+    hideLegend: { type: Boolean, default: !1 },
+    hideTooltip: { type: Boolean, default: !1 },
+    legendPosition: { default: ee.BottomCenter },
+    legendStyle: { default: void 0 },
+    xDomainLine: { type: Boolean },
+    yDomainLine: { type: Boolean },
+    xTickLine: { type: Boolean },
+    yTickLine: { type: Boolean },
+    xGridLine: { type: Boolean },
+    yGridLine: { type: Boolean, default: !0 },
+    hideXAxis: { type: Boolean },
+    hideYAxis: { type: Boolean },
+    crosshairConfig: {},
+    xAxisConfig: {},
+    yAxisConfig: {},
+    yDomain: {},
+    xDomain: {},
+    stacked: { type: Boolean },
+    groupPadding: { default: 0 },
+    barPadding: { default: 0.2 },
+    radius: {},
+    orientation: { default: y.Vertical }
+  },
+  emits: ["click"],
+  setup(e, { emit: Y }) {
+    const P = Y, t = e, V = W(), g = E("slotWrapper"), s = G();
+    if (!t.barYAxis || t.barYAxis.length === 0)
+      throw console.error("[DualChart] barYAxis prop is required and must contain at least one field key"), new Error("DualChart: 'barYAxis' is required and must contain at least one field key. Provide an array of property keys from your data type (e.g., ['revenue', 'costs'])");
+    if (!t.lineYAxis || t.lineYAxis.length === 0)
+      throw console.error("[DualChart] lineYAxis prop is required and must contain at least one field key"), new Error("DualChart: 'lineYAxis' is required and must contain at least one field key. Provide an array of property keys from your data type (e.g., ['profit', 'target'])");
+    const h = c(() => t.barYAxis.map((n) => (l) => l[n])), D = c(() => t.lineYAxis.map((n) => (l) => l[n])), v = (n, l) => {
+      var i;
+      return (i = Object.values(t.barCategories)[l]) == null ? void 0 : i.color;
+    }, b = c(() => ({
+      ...t.barCategories,
+      ...t.lineCategories
+    })), F = c(() => t.legendPosition.startsWith("top")), w = c(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
+    function C(n) {
+      s.value = n;
+    }
+    function M(n) {
+      return typeof window > "u" ? "" : g.value ? g.value.innerHTML : "";
+    }
+    function O(n) {
+      return s.value = n, M();
+    }
+    return (n, l) => (o(), m("div", {
+      style: f({
+        display: "flex",
+        flexDirection: F.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      }),
+      onClick: l[0] || (l[0] = (i) => P("click", i, s.value))
+    }, [
+      x(a(R), {
+        padding: e.padding,
+        height: e.height,
+        data: e.data
+      }, {
+        default: H(() => [
+          e.hideTooltip ? u("", !0) : (o(), d(a(U), {
+            key: 0,
+            triggers: {
+              [a($).selectors.bar]: (i) => {
+                var r;
+                return C(i), i ? (r = g.value) == null ? void 0 : r.innerHTML : "";
+              },
+              [a(q).selectors.bar]: (i) => {
+                var r;
+                return C(i), i ? (r = g.value) == null ? void 0 : r.innerHTML : "";
+              }
+            },
+            "horizontal-placement": a(L).Right,
+            "vertical-placement": a(L).Top
+          }, null, 8, ["triggers", "horizontal-placement", "vertical-placement"])),
+          e.stacked ? (o(), d(a(J), {
+            key: 2,
+            data: e.data,
+            x: (i, r) => r,
+            y: h.value,
+            color: v,
+            "rounded-corners": e.radius ?? 0,
+            "group-padding": e.groupPadding ?? 0,
+            "bar-padding": e.barPadding ?? 0.2,
+            orientation: e.orientation ?? a(y).Vertical
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (o(), d(a(I), {
+            key: 1,
+            data: e.data,
+            x: (i, r) => r,
+            y: h.value,
+            color: v,
+            "rounded-corners": e.radius ?? 0,
+            "group-padding": e.groupPadding ?? 0,
+            "bar-padding": e.barPadding ?? 0.2,
+            orientation: e.orientation ?? a(y).Vertical
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
+          (o(!0), m(X, null, j(D.value, (i, r) => {
+            var T;
+            return o(), d(a(K), {
+              key: `line-${r}`,
+              data: e.data,
+              x: (ie, S) => S,
+              y: i,
+              color: (T = Object.values(t.lineCategories)[r]) == null ? void 0 : T.color,
+              "curve-type": e.curveType ?? a(A).MonotoneX,
+              "line-width": e.lineWidth
+            }, null, 8, ["data", "x", "y", "color", "curve-type", "line-width"]);
+          }), 128)),
+          e.hideXAxis ? u("", !0) : (o(), d(a(B), k({
+            key: 3,
+            type: "x",
+            "tick-format": e.xFormatter,
+            label: e.xLabel,
+            "grid-line": e.xGridLine,
+            "domain-line": !!e.xDomainLine,
+            "tick-line": e.xTickLine,
+            "num-ticks": e.xNumTicks,
+            "tick-values": e.xExplicitTicks,
+            minMaxTicksOnly: e.minMaxTicksOnly
+          }, e.xAxisConfig), null, 16, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
+          e.hideYAxis ? u("", !0) : (o(), d(a(B), k({
+            key: 4,
+            type: "y",
+            label: e.yLabel,
+            "grid-line": e.orientation !== a(y).Horizontal && e.yGridLine,
+            "domain-line": !!e.yDomainLine,
+            "tick-format": e.yFormatter,
+            "num-ticks": e.yNumTicks,
+            "tick-line": e.yTickLine
+          }, e.yAxisConfig), null, 16, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"])),
+          e.hideTooltip ? u("", !0) : (o(), d(a(Q), k({ key: 5 }, e.crosshairConfig, { template: O }), null, 16))
+        ]),
+        _: 1
+      }, 8, ["padding", "height", "data"]),
+      t.hideLegend ? u("", !0) : (o(), m("div", {
+        key: 0,
+        style: f({
+          display: "flex",
+          justifyContent: w.value
+        })
+      }, [
+        x(a(Z), {
+          style: f([
+            t.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: Object.values(b.value).map((i) => ({
+            ...i,
+            color: Array.isArray(i.color) ? i.color[0] : i.color
+          }))
+        }, null, 8, ["style", "items"])
+      ], 4)),
+      z("div", te, [
+        a(V).tooltip ? p(n.$slots, "tooltip", {
+          key: 0,
+          values: s.value
+        }) : s.value ? p(n.$slots, "fallback", { key: 1 }, () => [
+          x(_, {
+            data: s.value,
+            categories: b.value,
+            "title-formatter": t.tooltipTitleFormatter,
+            yFormatter: t.orientation === a(y).Horizontal ? t.xFormatter : t.yFormatter
+          }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
+        ]) : u("", !0)
+      ], 512)
+    ], 4));
+  }
+});
+export {
+  de as default
+};

package/dist/components/DualChart/DualChart.vue.d.ts

@@ -0,0 +1,21 @@
+import { DualChartProps } from './types';
+declare const _default: <T extends {}>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onClick?: ((event: MouseEvent, values?: T | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & DualChartProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        tooltip?(_: {
+            values: T | undefined;
+        }): any;
+        fallback?(_: {}): any;
+    };
+    emit: (e: "click", event: MouseEvent, values?: T) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/DualChart/DualChart2.js

@@ -0,0 +1,4 @@
+import f from "./DualChart.js";
+export {
+  f as default
+};

package/dist/components/DualChart/types.d.ts

@@ -0,0 +1,187 @@
+import { axisFormatter, CrosshairConfig, LegendPosition, AxisConfig, BulletLegendItemInterface, Orientation } from '../../types';
+import { CurveType } from '@unovis/ts';
+export interface DualChartProps<T> {
+    /**
+     * The data to be displayed in the dual chart.
+     * Each element of the array represents a data point.
+     * The structure of 'T' should be compatible with the chart's rendering logic.
+     */
+    data: T[];
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * Optional label for the x-axis.
+     */
+    xLabel?: string;
+    /**
+     * Optional label for the y-axis (used for both bar and line by default).
+     */
+    yLabel?: string;
+    /**
+     * Optional label for the secondary y-axis (line chart).
+     */
+    yLabelSecondary?: string;
+    /**
+     * Optional padding applied to the chart.
+     * Allows specifying individual padding values for the top, right, bottom, and left sides.
+     */
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /**
+     * A record mapping bar category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for bar categories in the chart's legend.
+     */
+    barCategories: Record<string, BulletLegendItemInterface>;
+    /**
+     * A record mapping line category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for line categories in the chart's legend.
+     */
+    lineCategories: Record<string, BulletLegendItemInterface>;
+    /**
+     * An array of property keys from the data object type 'T' to be used for the bar chart y-axis values.
+     */
+    barYAxis: (keyof T)[];
+    /**
+     * An array of property keys from the data object type 'T' to be used for the line chart y-axis values.
+     */
+    lineYAxis: (keyof T)[];
+    /**
+     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
+     * @param {number} i - The index of the tick in the `ticks` array.
+     * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
+     * @returns {string} The formatted string representation of the tick.
+     */
+    xFormatter?: axisFormatter;
+    /**
+     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis.
+     * @param {number} i - The index of the tick in the `ticks` array.
+     * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
+     * @returns {string} The formatted string representation of the tick.
+     */
+    yFormatter?: axisFormatter;
+    /**
+     * Use custom formatter for tooltip titles
+     */
+    tooltipTitleFormatter?: (data: T) => string | number;
+    /**
+     * The type of curve to use for the line chart lines.
+     * See `CurveType` for available options.
+     */
+    curveType?: CurveType;
+    /**
+     * The width of the line in pixels. Default is 2px.
+     */
+    lineWidth?: number;
+    /**
+     * The desired number of ticks on the x-axis.
+     */
+    xNumTicks?: number;
+    /**
+     * Force specific ticks on the x-axis.
+     */
+    xExplicitTicks?: (number | string | Date)[];
+    /**
+     * Force only first and last ticks on the x-axis.
+     */
+    minMaxTicksOnly?: boolean;
+    /**
+     * The desired number of ticks on the y-axis.
+     */
+    yNumTicks?: number;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
+     */
+    legendPosition?: LegendPosition;
+    /**
+     * Optional style object for the legend container. Allows custom CSS styling.
+     */
+    legendStyle?: string | Record<string, string>;
+    /**
+     * If `true`, displays a domain line (axis line) along the x-axis.
+     */
+    xDomainLine?: boolean;
+    /**
+     * If `true`, displays a domain line (axis line) along the y-axis.
+     */
+    yDomainLine?: boolean;
+    /**
+     * If `true`, displays tick lines on the x-axis.
+     */
+    xTickLine?: boolean;
+    /**
+     * If `true`, displays tick lines on the y-axis.
+     */
+    yTickLine?: boolean;
+    /**
+     * If `true`, displays grid lines along the x-axis.
+     */
+    xGridLine?: boolean;
+    /**
+     * If `true`, displays grid lines along the y-axis.
+     */
+    yGridLine?: boolean;
+    /**
+     * If `true`, hide the x-axis.
+     */
+    hideXAxis?: boolean;
+    /**
+     * If `true`, hide the y-axis.
+     */
+    hideYAxis?: boolean;
+    /**
+     * Crosshair configuration object for customizing the appearance of the crosshair line.
+     */
+    crosshairConfig?: CrosshairConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    xAxisConfig?: AxisConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    yAxisConfig?: AxisConfig;
+    /**
+     * The domain for the y-axis, specified as a tuple of two values.
+     */
+    yDomain?: [number | undefined, number | undefined];
+    /**
+     * The domain for the x-axis, specified as a tuple of two values.
+     */
+    xDomain?: [number | undefined, number | undefined];
+    /**
+     * If `true`, creates stacked bars.
+     */
+    stacked?: boolean;
+    /**
+     * The padding between groups of bars in pixels.
+     */
+    groupPadding?: number;
+    /**
+     * Fractional padding between the bars in the range of [0,1). Default: 0.2
+     */
+    barPadding?: number;
+    /**
+     * Rounded corners for top bars. Boolean or number (to set the radius in pixels). Default: 2
+     */
+    radius?: number;
+    /**
+     * The orientation of the bars (vertical or horizontal).
+     * See `Orientation` for available options.
+     */
+    orientation?: Orientation;
+}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { default as BarChart } from './components/BarChart/BarChart.vue';
 import { default as DonutChart } from './components/DonutChart/DonutChart.vue';
 import { default as BubbleChart } from './components/BubbleChart/BubbleChart.vue';
 import { default as GanttChart } from './components/GanttChart/GanttChart.vue';
-import { LegendPosition, CurveType, Orientation, BulletLegendItemInterface, MarkerConfig, CrosshairConfig, DonutType } from './types';
-export { AreaChart, LineChart, BarChart, DonutChart, BubbleChart, GanttChart, Orientation, CurveType, LegendPosition, DonutType };
+import { default as DualChart } from './components/DualChart/DualChart.vue';
+import { LegendPosition, CurveType, Orientation, MarkerConfig, CrosshairConfig, DonutType, BulletLegendItemInterface } from './types';
+export { AreaChart, LineChart, BarChart, DonutChart, BubbleChart, GanttChart, DualChart, Orientation, CurveType, LegendPosition, DonutType };
 export type { BulletLegendItemInterface, MarkerConfig, CrosshairConfig };

package/dist/index.js

@@ -1,20 +1,22 @@
-import { default as e } from "./components/AreaChart/AreaChart.js";
+import { default as a } from "./components/AreaChart/AreaChart.js";
 import { default as o } from "./components/LineChart/LineChart.js";
-import { default as p } from "./components/BarChart/BarChart.js";
-import { default as m } from "./components/DonutChart/DonutChart.js";
+import { default as u } from "./components/BarChart/BarChart.js";
+import { default as l } from "./components/DonutChart/DonutChart.js";
 import { default as x } from "./components/BubbleChart/BubbleChart.js";
-import { default as l } from "./components/GanttChart/GanttChart.js";
-import { CurveType as C, LegendPosition as h, Orientation as i } from "./types.js";
-import { DonutType as y } from "./components/DonutChart/types.js";
+import { default as n } from "./components/GanttChart/GanttChart.js";
+import { default as C } from "./components/DualChart/DualChart.js";
+import { CurveType as i, LegendPosition as D, Orientation as b } from "./types.js";
+import { DonutType as B } from "./components/DonutChart/types.js";
 export {
-  e as AreaChart,
-  p as BarChart,
+  a as AreaChart,
+  u as BarChart,
   x as BubbleChart,
-  C as CurveType,
-  m as DonutChart,
-  y as DonutType,
-  l as GanttChart,
-  h as LegendPosition,
+  i as CurveType,
+  l as DonutChart,
+  B as DonutType,
+  C as DualChart,
+  n as GanttChart,
+  D as LegendPosition,
   o as LineChart,
-  i as Orientation
+  b as Orientation
 };

package/dist/utils.d.ts

@@ -3,6 +3,9 @@ export declare function getDistributedIndices(length: number, numTicks: number):
 export declare function getFirstPropertyValue(obj: unknown): undefined;
 export declare const markerShape: (type: string, size: number, strokeWidth: number, color: string, strokeColor: string) => string;
 export declare function createMarkers(markerConfig: MarkerConfig): string;
+export declare function createScopedMarkers(markerConfig: MarkerConfig, scopeId: string, options?: {
+    includeLegacy?: boolean;
+}): string;
 export declare const flattenData: (data: any[], xAxis: string) => {
     month: any;
 }[];

package/dist/utils.js

@@ -1,50 +1,54 @@
-function p(t) {
-  if (t && Object.keys(t).length > 0) {
-    const e = Object.keys(t)[0];
-    return t[e];
+function i(e) {
+  if (e && Object.keys(e).length > 0) {
+    const r = Object.keys(e)[0];
+    return e[r];
   }
 }
-const o = (t, e, r, n, $) => {
-  switch (t) {
+const s = (e, r, t, a, $) => {
+  switch (e) {
     case "circle":
-      return `<circle cx="${e / 2}" cy="${e / 2}" r="${(e - r) / 2}" stroke-width="${r}" stroke="${$}" fill="${n}" />`;
+      return `<circle cx="${r / 2}" cy="${r / 2}" r="${(r - t) / 2}" stroke-width="${t}" stroke="${$}" fill="${a}" />`;
     case "square":
-      return `<rect x="${r / 2}" y="${r / 2}" width="${e - r}" height="${e - r}" stroke-width="${r}" stroke="${$}" fill="${n}" />`;
+      return `<rect x="${t / 2}" y="${t / 2}" width="${r - t}" height="${r - t}" stroke-width="${t}" stroke="${$}" fill="${a}" />`;
     case "triangle":
-      return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e - r / 2} ${r / 2},${e - r / 2}" stroke-width="${r}" stroke="${$}" fill="${n}" />`;
+      return `<polygon points="${r / 2},${t / 2} ${r - t / 2},${r - t / 2} ${t / 2},${r - t / 2}" stroke-width="${t}" stroke="${$}" fill="${a}" />`;
     case "diamond":
-      return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e / 2} ${e / 2},${e - r / 2} ${r / 2},${e / 2}" stroke-width="${r}" stroke="${$}" fill="${n}" />`;
+      return `<polygon points="${r / 2},${t / 2} ${r - t / 2},${r / 2} ${r / 2},${r - t / 2} ${t / 2},${r / 2}" stroke-width="${t}" stroke="${$}" fill="${a}" />`;
     default:
       return "";
   }
 };
-function m(t) {
-  return Object.entries(t.config).map(([e, r]) => {
-    const n = r.type || "circle", $ = r.size || 10, c = r.strokeWidth || 2, a = r.color || "#000", l = r.strokeColor || r.color || "#000";
-    return `<marker id="${t.id}-${e}" viewBox="0 0 ${$} ${$}" refX="${$ / 2}" refY="${$ / 2}" markerWidth="${$ / 2}" markerHeight="${$ / 2}">
-        ${o(n, $, c, a, l)}
-      </marker>`;
+function f(e, r, t) {
+  const a = ($, n) => {
+    const o = n.type || "circle", c = n.size || 10, l = n.strokeWidth || 2, u = n.color || "#000", p = n.strokeColor || n.color || "#000";
+    return `<marker id="${$}" viewBox="0 0 ${c} ${c}" refX="${c / 2}" refY="${c / 2}" markerWidth="${c / 2}" markerHeight="${c / 2}" orient="auto">
+      ${s(o, c, l, u, p)}
+    </marker>`;
+  };
+  return Object.entries(e.config).flatMap(([$, n]) => {
+    const o = `${e.id}--${r}--${$}`, c = [a(o, n)];
+    return c.push(a(`${e.id}-${$}`, n)), c;
   }).join(`
 `);
 }
-function u(t) {
-  return t.charAt(0).toUpperCase() + t.slice(1);
+function m(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
 }
-const f = (t, e) => {
-  const r = Object.keys(t[0]).filter(($) => $ !== e), n = Object.keys(t[0][r[0]]);
-  return t.map(($) => ({
+const y = (e, r) => {
+  const t = Object.keys(e[0]).filter(($) => $ !== r), a = Object.keys(e[0][t[0]]);
+  return e.map(($) => ({
     month: $.month,
-    ...r.flatMap(
-      (c) => n.map((a) => ({
-        [`${c}${u(a)}`]: $[c][a]
+    ...t.flatMap(
+      (n) => a.map((o) => ({
+        [`${n}${m(o)}`]: $[n][o]
       }))
-    ).reduce((c, a) => ({ ...c, ...a }), {})
+    ).reduce((n, o) => ({ ...n, ...o }), {})
   }));
-}, y = (t) => Intl.DateTimeFormat().format(t);
+}, w = (e) => Intl.DateTimeFormat().format(e);
 export {
-  m as createMarkers,
-  y as dateFormatter,
-  f as flattenData,
-  p as getFirstPropertyValue,
-  o as markerShape
+  f as createScopedMarkers,
+  w as dateFormatter,
+  y as flattenData,
+  i as getFirstPropertyValue,
+  s as markerShape
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "2.0.0",
+  "version": "2.1.0-beta.0.1",
   "type": "module",
   "files": [
     "dist"