vue-chrts 0.2.0-test.4 → 0.2.0-test.5

package/dist/components/AreaChart/AreaChart.js

@@ -1,6 +1,6 @@
-import a from "./AreaChart2.js";
-import o from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ o(a, [["__scopeId", "data-v-b9ab9df3"]]);
+import o from "./AreaChart2.js";
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f08e19f3"]]);
 export {
   f as default
 };

package/dist/components/AreaChart/AreaChart2.js

@@ -1,13 +1,13 @@
-import { defineComponent as x, useSlots as P, useTemplateRef as M, ref as U, computed as c, createElementBlock as d, openBlock as a, normalizeClass as h, createVNode as u, createCommentVNode as l, createElementVNode as j, unref as i, withCtx as R, createBlock as m, Fragment as L, renderList as W, mergeProps as X, renderSlot as C } from "vue";
-import { Position as b, CurveType as B } from "@unovis/ts";
-import { createMarkers as S, getFirstPropertyValue as Y } from "../../utils.js";
-import w from "../Tooltip.js";
-import { VisXYContainer as z, VisTooltip as I, VisArea as H, VisLine as K, VisAxis as V, VisCrosshair as q, VisBulletLegend as J } from "@unovis/vue";
+import { defineComponent as P, useSlots as W, useTemplateRef as M, ref as U, computed as u, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as d, createCommentVNode as l, createElementVNode as j, unref as i, withCtx as w, createBlock as m, Fragment as L, renderList as x, mergeProps as R, renderSlot as C } from "vue";
+import { Position as b, CurveType as A } from "@unovis/ts";
+import { createMarkers as X, getFirstPropertyValue as S } from "../../utils.js";
+import Y from "../Tooltip.js";
+import { VisXYContainer as z, VisTooltip as I, VisArea as H, VisLine as K, VisAxis as B, VisCrosshair as q, VisBulletLegend as J } from "@unovis/vue";
 import { LegendPosition as Q } from "../../types.js";
 const Z = {
   ref: "slotWrapper",
   class: "hidden"
-}, y = 24, A = 4, _ = 0.5, F = "#3b82f6", ne = /* @__PURE__ */ x({
+}, y = 24, D = 4, _ = 0.5, V = "#3b82f6", ne = /* @__PURE__ */ P({
   __name: "AreaChart",
   props: {
     data: {},
@@ -20,10 +20,12 @@ const Z = {
     xFormatter: {},
     yFormatter: {},
     curveType: {},
-    xNumTicks: { default: (n) => n.data.length > y ? y / A : n.data.length - 1 },
+    lineWidth: { default: 2 },
+    lineDashArray: {},
+    xNumTicks: { default: (n) => n.data.length > y ? y / D : n.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (n) => n.data.length > y ? y / A : n.data.length - 1 },
+    yNumTicks: { default: (n) => n.data.length > y ? y / D : n.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     legendPosition: {},
@@ -37,9 +39,9 @@ const Z = {
     hideYAxis: { type: Boolean }
   },
   setup(n) {
-    const r = n, D = P(), v = M("slotWrapper"), s = U(), f = c(
+    const r = n, F = W(), h = M("slotWrapper"), s = U(), f = u(
       () => Object.values(r.categories).map((e) => e.color)
-    ), T = c(() => r.legendPosition === Q.Top), $ = c(() => {
+    ), v = u(() => r.legendPosition === Q.Top), $ = u(() => {
       const e = (t, o) => `
     <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
       <stop offset="0%" stop-color="${o}" stop-opacity="1" />
@@ -52,54 +54,56 @@ const Z = {
     </linearGradient>
   `;
       return f.value.map(
-        (t, o) => t != null && t.includes("#") ? e(o, t) : p(o, t ?? F)
+        (t, o) => t != null && t.includes("#") ? e(o, t) : p(o, t ?? V)
       ).join("");
-    }), G = c(() => r.markerConfig ? S(r.markerConfig) : "");
+    }), G = u(() => r.markerConfig ? X(r.markerConfig) : "");
     function O(e) {
       var p;
       return {
         y: (t) => Number(t[e]),
-        color: ((p = r.categories[e]) == null ? void 0 : p.color) ?? F
+        color: ((p = r.categories[e]) == null ? void 0 : p.color) ?? V
       };
     }
     function N(e) {
-      return typeof window > "u" ? "" : v.value ? v.value.innerHTML : "";
+      return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
     }
     function E(e) {
       return s.value = e, N();
     }
-    return (e, p) => (a(), d("div", {
-      class: h(["flex flex-col space-y-4", { "flex-col-reverse": T.value, markers: !!r.markerConfig }])
+    return (e, p) => (a(), c("div", {
+      class: T(["flex flex-col space-y-4", { "flex-col-reverse": v.value, markers: !!r.markerConfig }])
     }, [
-      u(i(z), {
+      d(i(z), {
         data: e.data,
         height: e.height,
         padding: e.padding,
         "svg-defs": $.value + G.value
       }, {
-        default: R(() => [
+        default: w(() => [
           e.hideTooltip ? l("", !0) : (a(), m(i(I), {
             key: 0,
             "horizontal-placement": i(b).Right,
             "vertical-placement": i(b).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (a(!0), d(L, null, W(Object.keys(r.categories), (t, o) => (a(), d(L, { key: t }, [
-            u(i(H), X({
+          (a(!0), c(L, null, x(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
+            d(i(H), R({
               x: (g, k) => k,
               ref_for: !0
             }, O(t), {
               color: `url(#gradient${o}-${f.value[o]})`,
               opacity: _,
-              "curve-type": e.curveType ?? i(B).MonotoneX
+              "curve-type": e.curveType ?? i(A).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            u(i(K), {
+            d(i(K), {
               x: (g, k) => k,
               y: (g) => g[t],
               color: f.value[o],
-              "curve-type": e.curveType ?? i(B).MonotoneX
-            }, null, 8, ["x", "y", "color", "curve-type"])
+              "curve-type": e.curveType ?? i(A).MonotoneX,
+              "line-width": e.lineWidth,
+              lineDashArray: e.lineDashArray
+            }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
           ], 64))), 128)),
-          e.hideXAxis ? l("", !0) : (a(), m(i(V), {
+          e.hideXAxis ? l("", !0) : (a(), m(i(B), {
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -112,7 +116,7 @@ const Z = {
             "tick-line": e.xTickLine,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
-          e.hideYAxis ? l("", !0) : (a(), m(i(V), {
+          e.hideYAxis ? l("", !0) : (a(), m(i(B), {
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -130,23 +134,23 @@ const Z = {
         ]),
         _: 1
       }, 8, ["data", "height", "padding", "svg-defs"]),
-      e.hideLegend ? l("", !0) : (a(), d("div", {
+      e.hideLegend ? l("", !0) : (a(), c("div", {
         key: 0,
-        class: h(["flex items-center justify-end", { "pb-4": T.value }])
+        class: T(["flex items-center justify-end", { "pb-4": v.value }])
       }, [
-        u(i(J), {
+        d(i(J), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2)),
       j("div", Z, [
-        i(D).tooltip ? C(e.$slots, "tooltip", {
+        i(F).tooltip ? C(e.$slots, "tooltip", {
           key: 0,
           values: s.value
         }, void 0, !0) : s.value ? C(e.$slots, "fallback", { key: 1 }, () => [
-          u(w, {
+          d(Y, {
             data: s.value,
             categories: e.categories,
-            toolTipTitle: i(Y)(s.value) ?? "",
+            toolTipTitle: i(S)(s.value) ?? "",
             yFormatter: r.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ], !0) : l("", !0)

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

@@ -57,6 +57,14 @@ export interface AreaChartProps<T> {
      * See `CurveType` for available options.
      */
     curveType?: CurveType;
+    /**
+     * The width of the line in pixels. Default is 2px.
+     */
+    lineWidth?: number;
+    /**
+     * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
+     */
+    lineDashArray?: number[];
     /**
      * The desired number of ticks on the x-axis.
      */

package/dist/components/LineChart/LineChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as D, computed as f, useSlots as N, useTemplateRef as O, ref as P, createElementBlock as m, openBlock as n, normalizeClass as k, createVNode as r, createCommentVNode as l, createElementVNode as j, unref as i, withCtx as A, createBlock as s, Fragment as M, renderList as E, renderSlot as g } from "vue";
-import { Position as v, CurveType as G } from "@unovis/ts";
-import { createMarkers as X, getFirstPropertyValue as $ } from "../../utils.js";
-import w from "../Tooltip.js";
-import { VisXYContainer as z, VisTooltip as R, VisLine as W, VisAxis as h, VisCrosshair as Y, VisBulletLegend as S } from "@unovis/vue";
+import { defineComponent as F, computed as f, useSlots as x, useTemplateRef as N, ref as O, createElementBlock as d, openBlock as n, normalizeClass as k, createVNode as r, createCommentVNode as l, createElementVNode as P, unref as i, withCtx as j, createBlock as s, Fragment as w, renderList as M, renderSlot as g } from "vue";
+import { Position as h, CurveType as W } from "@unovis/ts";
+import { createMarkers as E, getFirstPropertyValue as G } from "../../utils.js";
+import X from "../Tooltip.js";
+import { VisXYContainer as $, VisTooltip as z, VisLine as R, VisAxis as v, VisCrosshair as Y, VisBulletLegend as S } from "@unovis/vue";
 import { LegendPosition as H } from "../../types.js";
 const U = {
   ref: "slotWrapper",
   class: "hidden"
-}, _ = /* @__PURE__ */ D({
+}, _ = /* @__PURE__ */ F({
   __name: "LineChart",
   props: {
     data: {},
@@ -25,6 +25,8 @@ const U = {
     xFormatter: {},
     yFormatter: {},
     curveType: {},
+    lineWidth: { default: 2 },
+    lineDashArray: {},
     xNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
@@ -42,9 +44,9 @@ const U = {
     hideYAxis: { type: Boolean }
   },
   setup(o) {
-    const t = o, T = f(() => t.markerConfig ? X(t.markerConfig) : ""), L = N(), d = O("slotWrapper"), a = P();
+    const t = o, T = f(() => t.markerConfig ? E(t.markerConfig) : ""), L = x(), m = N("slotWrapper"), a = O();
     function b(e) {
-      return typeof window > "u" ? "" : d.value ? d.value.innerHTML : "";
+      return typeof window > "u" ? "" : m.value ? m.value.innerHTML : "";
     }
     function B(e) {
       return a.value = e, b();
@@ -53,32 +55,34 @@ const U = {
       () => t.legendPosition === H.Top
     ), C = Object.values(t.categories).map(
       (e, c) => `var(--vis-color${c})`
-    ), V = (e) => Object.values(t.categories)[e].color ?? C[e];
-    return (e, c) => (n(), m("div", {
+    ), D = (e) => Object.values(t.categories)[e].color ?? C[e];
+    return (e, c) => (n(), d("div", {
       class: k(["flex flex-col space-y-4", {
         "flex-col-reverse": u.value,
         markers: !!t.markerConfig
       }])
     }, [
-      r(i(z), {
+      r(i($), {
         data: e.data,
         padding: e.padding,
         height: e.height,
         svgDefs: T.value
       }, {
-        default: A(() => [
-          r(i(R), {
-            "horizontal-placement": i(v).Right,
-            "vertical-placement": i(v).Top
+        default: j(() => [
+          r(i(z), {
+            "horizontal-placement": i(h).Right,
+            "vertical-placement": i(h).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), m(M, null, E(Object.keys(t.categories), (x, p) => (n(), s(i(W), {
+          (n(!0), d(w, null, M(Object.keys(t.categories), (V, p) => (n(), s(i(R), {
             key: p,
-            x: (y, F) => F,
-            y: (y) => y[x],
-            color: V(p),
-            "curve-type": e.curveType ?? i(G).MonotoneX
-          }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
-          e.hideXAxis ? l("", !0) : (n(), s(i(h), {
+            x: (y, A) => A,
+            y: (y) => y[V],
+            color: D(p),
+            "curve-type": e.curveType ?? i(W).MonotoneX,
+            "line-width": e.lineWidth,
+            lineDashArray: e.lineDashArray
+          }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
+          e.hideXAxis ? l("", !0) : (n(), s(i(v), {
             key: 0,
             type: "x",
             "tick-format": e.xFormatter,
@@ -91,7 +95,7 @@ const U = {
             "tick-values": e.xExplicitTicks,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"])),
-          e.hideYAxis ? l("", !0) : (n(), s(i(h), {
+          e.hideYAxis ? l("", !0) : (n(), s(i(v), {
             key: 1,
             type: "y",
             "tick-format": e.yFormatter,
@@ -109,7 +113,7 @@ const U = {
         ]),
         _: 1
       }, 8, ["data", "padding", "height", "svgDefs"]),
-      e.hideLegend ? l("", !0) : (n(), m("div", {
+      e.hideLegend ? l("", !0) : (n(), d("div", {
         key: 0,
         class: k(["flex items center justify-end", { "pb-4": u.value }])
       }, [
@@ -117,15 +121,15 @@ const U = {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2)),
-      j("div", U, [
+      P("div", U, [
         i(L).tooltip ? g(e.$slots, "tooltip", {
           key: 0,
           values: a.value
         }) : a.value ? g(e.$slots, "fallback", { key: 1 }, () => [
-          r(w, {
+          r(X, {
             data: a.value,
             categories: e.categories,
-            toolTipTitle: i($)(a.value) ?? "",
+            toolTipTitle: i(G)(a.value) ?? "",
             yFormatter: t.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : l("", !0)

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

@@ -56,6 +56,14 @@ export interface LineChartProps<T> {
      * See `CurveType` for available options.
      */
     curveType?: CurveType;
+    /**
+   * The width of the line in pixels. Default is 2px.
+   */
+    lineWidth?: number;
+    /**
+     * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
+     */
+    lineDashArray?: number[];
     /**
      * The desired number of ticks on the x-axis.
      */

package/dist/index.js.css

@@ -1 +1 @@
-.markers[data-v-b9ab9df3] *[stroke="#156F36"]{marker:url(#circle-marker-desktop)}.markers[data-v-b9ab9df3] *[stroke="#4ade80"]{marker:url(#circle-marker-mobile)}
+.markers[data-v-f08e19f3] *[stroke="#156F36"]{marker:url(#circle-marker-desktop)}.markers[data-v-f08e19f3] *[stroke="#4ade80"]{marker:url(#circle-marker-mobile)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.2.0-test.4",
+  "version": "0.2.0-test.5",
   "type": "module",
   "files": [
     "dist"