vue-chrts 0.2.0-beta.1 → 0.2.0-beta.3

package/dist/components/AreaChart/AreaChart.js

@@ -1,8 +1,8 @@
-import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as d, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as u, createCommentVNode as p, createElementVNode as X, unref as i, withCtx as x, createBlock as m, Fragment as L, renderList as S, mergeProps as C, renderSlot as b } from "vue";
-import { Position as A, CurveType as B } from "@unovis/ts";
-import { createMarkers as Y, getFirstPropertyValue as z } from "../../utils.js";
-import I from "../Tooltip.js";
-import { VisXYContainer as H, VisTooltip as K, VisArea as q, VisLine as J, VisAxis as D, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
+import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as d, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as u, createCommentVNode as p, createElementVNode as X, unref as i, withCtx as S, createBlock as m, Fragment as L, renderList as Y, mergeProps as C, renderSlot as A } from "vue";
+import { Position as b, CurveType as D } from "@unovis/ts";
+import { createMarkers as z, getFirstPropertyValue as I } from "../../utils.js";
+import x from "../Tooltip.js";
+import { VisXYContainer as H, VisTooltip as K, VisArea as q, VisLine as J, VisAxis as B, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
 import { LegendPosition as _ } from "../../types.js";
 const ee = {
   ref: "slotWrapper",
@@ -45,7 +45,7 @@ const ee = {
   setup(n, { emit: $ }) {
     const G = $, r = n, O = j(), h = w("slotWrapper"), s = R(), f = d(
       () => Object.values(r.categories).map((e) => e.color)
-    ), N = d(() => r.markerConfig ? Y(r.markerConfig) : ""), g = d(() => r.legendPosition === _.Top), E = d(() => {
+    ), N = d(() => r.markerConfig ? z(r.markerConfig) : ""), g = d(() => r.legendPosition === _.Top), E = d(() => {
       const e = (t, o) => `
     <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
       <stop offset="0%" stop-color="${o}" stop-opacity="1" />
@@ -84,30 +84,30 @@ const ee = {
         padding: e.padding,
         "svg-defs": E.value + N.value
       }, {
-        default: x(() => [
+        default: S(() => [
           e.hideTooltip ? p("", !0) : (a(), m(i(K), {
             key: 0,
-            "horizontal-placement": i(A).Right,
-            "vertical-placement": i(A).Top
+            "horizontal-placement": i(b).Right,
+            "vertical-placement": i(b).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (a(!0), c(L, null, S(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
+          (a(!0), c(L, null, Y(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
             u(i(q), C({
               x: (k, v) => v
             }, { ref_for: !0 }, P(t), {
               color: `url(#gradient${o}-${f.value[o]})`,
               opacity: te,
-              "curve-type": e.curveType ?? i(B).MonotoneX
+              "curve-type": e.curveType ?? i(D).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
             u(i(J), {
               x: (k, v) => v,
               y: (k) => k[t],
               color: f.value[o],
-              "curve-type": e.curveType ?? i(B).MonotoneX,
+              "curve-type": e.curveType ?? i(D).MonotoneX,
               "line-width": e.lineWidth,
-              lineDashArray: e.lineDashArray
+              lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
             }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
           ], 64))), 128)),
-          e.hideXAxis ? p("", !0) : (a(), m(i(D), {
+          e.hideXAxis ? p("", !0) : (a(), m(i(B), {
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -120,7 +120,7 @@ const ee = {
             "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 ? p("", !0) : (a(), m(i(D), {
+          e.hideYAxis ? p("", !0) : (a(), m(i(B), {
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -143,14 +143,14 @@ const ee = {
         }, null, 8, ["items"])
       ], 2)),
       X("div", ee, [
-        i(O).tooltip ? b(e.$slots, "tooltip", {
+        i(O).tooltip ? A(e.$slots, "tooltip", {
           key: 0,
           values: s.value
-        }) : s.value ? b(e.$slots, "fallback", { key: 1 }, () => [
-          u(I, {
+        }) : s.value ? A(e.$slots, "fallback", { key: 1 }, () => [
+          u(x, {
             data: s.value,
             categories: e.categories,
-            toolTipTitle: i(z)(s.value) ?? "",
+            toolTipTitle: i(I)(s.value) ?? "",
             yFormatter: r.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : p("", !0)

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

@@ -1,4 +1,4 @@
-import { axisFormatter, LegendPosition, MarkerConfig } from '../../types';
+import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig } from '../../types';
 import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 export interface AreaChartProps<T> {
     /**
@@ -64,7 +64,7 @@ export interface AreaChartProps<T> {
     /**
      * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
      */
-    lineDashArray?: number[];
+    lineDashArray?: number[][];
     /**
      * The desired number of ticks on the x-axis.
      */
@@ -129,19 +129,5 @@ export interface AreaChartProps<T> {
     /**
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
-    crosshairConfig?: {
-        /**
-         * The color of the crosshair line. Accepts any valid CSS color string.
-         * Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
-         */
-        color?: string;
-        /**
-         * The stroke color of the crosshair line. Accepts any valid CSS color string.
-         */
-        strokeColor?: string;
-        /**
-         * The stroke width of the crosshair line in pixels.
-         */
-        strokeWidth?: number;
-    };
+    crosshairConfig?: CrosshairConfig;
 }

package/dist/components/BarChart/BarChart.js

@@ -1,18 +1,18 @@
-import { defineComponent as $, useSlots as S, useTemplateRef as z, ref as H, computed as u, createElementBlock as y, openBlock as d, normalizeClass as B, createVNode as p, createCommentVNode as g, createElementVNode as W, unref as a, withCtx as X, createBlock as m, Fragment as Y, renderSlot as P } from "vue";
-import { Orientation as l, StackedBar as R, GroupedBar as q } from "@unovis/ts";
-import { getFirstPropertyValue as U } from "../../utils.js";
-import { VisXYContainer as I, VisTooltip as J, VisStackedBar as k, VisGroupedBar as K, VisAxis as V, VisBulletLegend as Q } from "@unovis/vue";
-import Z from "../Tooltip.js";
-import { LegendPosition as _ } from "../../types.js";
-const ee = {
+import { defineComponent as C, useSlots as N, useTemplateRef as O, ref as D, computed as T, createElementBlock as m, openBlock as n, normalizeClass as L, createVNode as g, createCommentVNode as c, createElementVNode as w, unref as i, withCtx as E, createBlock as u, Fragment as M, renderList as S, renderSlot as v } from "vue";
+import { Orientation as l, StackedBar as j, GroupedBar as z } from "@unovis/ts";
+import { getFirstPropertyValue as H } from "../../utils.js";
+import { useStackedGrouped as W } from "./stackedGroupedUtils.js";
+import { VisXYContainer as X, VisTooltip as Y, VisStackedBar as B, VisGroupedBar as $, VisAxis as A, VisBulletLegend as R } from "@unovis/vue";
+import q from "../Tooltip.js";
+import { LegendPosition as U } from "../../types.js";
+const I = {
   ref: "slotWrapper",
   class: "hidden"
-}, de = /* @__PURE__ */ $({
+}, ae = /* @__PURE__ */ C({
   __name: "BarChart",
   props: {
     data: {},
     stacked: { type: Boolean },
-    stackAndGrouped: { type: Boolean },
     height: {},
     xLabel: {},
     yLabel: {},
@@ -25,9 +25,9 @@ const ee = {
     categories: {},
     xFormatter: {},
     yFormatter: {},
-    yNumTicks: { default: (r) => r.data.length > 24 ? 24 / 4 : r.data.length - 1 },
+    yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
     minMaxTicksOnly: { type: Boolean },
-    xNumTicks: { default: (r) => r.data.length > 24 ? 24 / 4 : r.data.length - 1 },
+    xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
     xExplicitTicks: {},
     yAxis: {},
     groupPadding: {},
@@ -44,104 +44,79 @@ const ee = {
     xGridLine: { type: Boolean },
     yGridLine: { type: Boolean, default: !0 },
     hideXAxis: { type: Boolean },
-    hideYAxis: { type: Boolean }
+    hideYAxis: { type: Boolean },
+    stackAndGrouped: { type: Boolean },
+    xAxis: {}
   },
   emits: ["click"],
-  setup(r, { emit: A }) {
-    const C = A, o = r, G = S(), f = z("slotWrapper"), s = H();
-    if (!o.yAxis || o.yAxis.length === 0)
+  setup(t, { emit: V }) {
+    const x = V, a = t, P = N(), y = O("slotWrapper"), r = D();
+    if (!a.yAxis || a.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const b = u(() => o.yAxis.map((e) => (i) => i[e])), h = (e, i) => {
-      var t;
-      return (t = Object.values(o.categories)[i]) == null ? void 0 : t.color;
-    }, D = u(() => Object.values(o.categories).slice(0, 4).map((e) => e.color)), F = u(() => Object.values(o.categories).slice(4, 8).map((e) => e.color)), O = (e, i) => D.value[i] ?? "#ccc", N = (e, i) => F.value[i] ?? "#eee", v = u(
-      () => o.legendPosition === _.Top
+    const k = T(() => a.yAxis.map((e) => (d) => d[e])), f = (e, d) => {
+      var o;
+      return (o = Object.values(a.categories)[d]) == null ? void 0 : o.color;
+    }, s = W({
+      data: a.data,
+      categories: a.categories,
+      stackAndGrouped: a.stackAndGrouped,
+      xAxis: a.xAxis
+    }), h = T(
+      () => a.legendPosition === U.Top
     );
-    function T(e) {
-      return s.value = e, j();
+    function b(e) {
+      return r.value = e, G();
     }
-    function j(e) {
-      return typeof window > "u" ? "" : f.value ? f.value.innerHTML : "";
+    function G(e) {
+      return typeof window > "u" ? "" : y.value ? y.value.innerHTML : "";
     }
-    const w = u(() => o.stackAndGrouped ? Object.keys(o.data[0]).filter((e) => e !== "month") : []), x = (e) => {
-      const i = ["Done", "Pending"];
-      return e.map((t) => ({
-        month: t.month,
-        ...w.value.flatMap(
-          (n) => i.map((c) => ({
-            [`${n}${c}`]: t[n][c.toLowerCase()]
-          }))
-        ).reduce((n, c) => ({ ...n, ...c }), {})
-      }));
-    }, L = u(() => o.stackAndGrouped ? x(o.data) : o.data), M = [
-      (e) => e.desktopDone,
-      (e) => e.mobileDone,
-      (e) => e.androidDone,
-      (e) => e.iosDone
-    ], E = [
-      (e) => e.desktopPending,
-      (e) => e.mobilePending,
-      (e) => e.androidPending,
-      (e) => e.iosPending
-    ];
-    return (e, i) => (d(), y("div", {
-      class: B(["flex flex-col space-y-4", { "flex-col-reverse": v.value }]),
-      onClick: i[0] || (i[0] = (t) => C("click", t, s.value))
+    return (e, d) => (n(), m("div", {
+      class: L(["flex flex-col space-y-4", { "flex-col-reverse": h.value }]),
+      onClick: d[0] || (d[0] = (o) => x("click", o, r.value))
     }, [
-      p(a(I), {
+      g(i(X), {
         padding: e.padding,
         height: e.height
       }, {
-        default: X(() => [
-          p(a(J), {
+        default: E(() => [
+          g(i(Y), {
             triggers: {
-              [a(q).selectors.bar]: T,
-              [a(R).selectors.bar]: T
+              [i(z).selectors.bar]: b,
+              [i(j).selectors.bar]: b
             }
           }, null, 8, ["triggers"]),
-          e.stackAndGrouped ? (d(), y(Y, { key: 0 }, [
-            p(a(k), {
-              data: L.value,
-              x: (t, n) => n - 0.2,
-              y: M,
-              color: O,
-              "rounded-corners": e.radius ?? 0,
-              "group-padding": e.groupPadding ?? 0,
-              "bar-padding": e.barPadding ?? 0.2,
-              orientation: e.orientation ?? a(l).Vertical
-            }, null, 8, ["data", "x", "rounded-corners", "group-padding", "bar-padding", "orientation"]),
-            p(a(k), {
-              data: L.value,
-              x: (t, n) => n + 0.2,
-              y: E,
-              color: N,
-              "rounded-corners": e.radius ?? 0,
-              "group-padding": e.groupPadding ?? 0,
-              "bar-padding": e.barPadding ?? 0.2,
-              orientation: e.orientation ?? a(l).Vertical
-            }, null, 8, ["data", "x", "rounded-corners", "group-padding", "bar-padding", "orientation"])
-          ], 64)) : e.stacked ? (d(), m(a(k), {
+          e.stackAndGrouped ? (n(!0), m(M, { key: 0 }, S(i(s).states, (o) => (n(), u(i(B), {
+            key: o,
+            data: i(s).chartData,
+            x: (p, F) => F + i(s).positions[o],
+            y: i(s).bars[o],
+            color: i(s).colorFunctions[o],
+            "rounded-corners": e.radius ?? 0,
+            "group-padding": e.groupPadding ?? 0,
+            "bar-padding": e.barPadding ?? 0.2,
+            orientation: e.orientation ?? i(l).Vertical
+          }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(B), {
             key: 2,
             data: e.data,
-            x: (t, n) => n,
-            y: b.value,
-            color: h,
+            x: (o, p) => p,
+            y: k.value,
+            color: f,
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
             "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? a(l).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), m(a(K), {
+            orientation: e.orientation ?? i(l).Vertical
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (n(), u(i($), {
             key: 1,
             data: e.data,
-            x: (t, n) => n,
-            y: b.value,
-            color: h,
+            x: (o, p) => p,
+            y: k.value,
+            color: f,
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
             "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? a(l).Vertical
+            orientation: e.orientation ?? i(l).Vertical
           }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-          e.hideXAxis ? g("", !0) : (d(), m(a(V), {
+          e.hideXAxis ? c("", !0) : (n(), u(i(A), {
             key: 3,
             type: "x",
             "tick-format": e.xFormatter,
@@ -153,11 +128,11 @@ const ee = {
             "tick-values": e.xExplicitTicks,
             minMaxTicksOnly: e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-          e.hideYAxis ? g("", !0) : (d(), m(a(V), {
+          e.hideYAxis ? c("", !0) : (n(), u(i(A), {
             key: 4,
             type: "y",
             label: e.yLabel,
-            "grid-line": e.orientation !== a(l).Horizontal && e.yGridLine,
+            "grid-line": e.orientation !== i(l).Horizontal && e.yGridLine,
             "domain-line": !!e.yDomainLine,
             "tick-format": e.yFormatter,
             "num-ticks": e.yNumTicks,
@@ -166,30 +141,30 @@ const ee = {
         ]),
         _: 1
       }, 8, ["padding", "height"]),
-      e.hideLegend ? g("", !0) : (d(), y("div", {
+      e.hideLegend ? c("", !0) : (n(), m("div", {
         key: 0,
-        class: B(["flex items center justify-end", { "pb-4": v.value }])
+        class: L(["flex items center justify-end", { "pb-4": h.value }])
       }, [
-        p(a(Q), {
-          items: Object.values(o.categories)
+        g(i(R), {
+          items: Object.values(a.categories)
         }, null, 8, ["items"])
       ], 2)),
-      W("div", ee, [
-        a(G).tooltip ? P(e.$slots, "tooltip", {
+      w("div", I, [
+        i(P).tooltip ? v(e.$slots, "tooltip", {
           key: 0,
-          values: s.value
-        }) : s.value ? P(e.$slots, "fallback", { key: 1 }, () => [
-          p(Z, {
-            data: s.value,
-            categories: o.categories,
-            toolTipTitle: a(U)(s.value) ?? "",
-            yFormatter: o.orientation === a(l).Horizontal ? o.xFormatter : o.yFormatter
+          values: r.value
+        }) : r.value ? v(e.$slots, "fallback", { key: 1 }, () => [
+          g(q, {
+            data: r.value,
+            categories: a.categories,
+            toolTipTitle: i(H)(r.value) ?? "",
+            yFormatter: a.orientation === i(l).Horizontal ? a.xFormatter : a.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : g("", !0)
+        ]) : c("", !0)
       ], 512)
     ], 2));
   }
 });
 export {
-  de as default
+  ae as default
 };

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

@@ -7,7 +7,7 @@ declare const _default: <T extends {}>(__VLS_props: NonNullable<Awaited<typeof _
     attrs: any;
     slots: {
         tooltip?(_: {
-            values: T | undefined;
+            values: any;
         }): any;
         fallback?(_: {}): any;
     };

package/dist/components/BarChart/stackedGroupedUtils.d.ts

@@ -0,0 +1,19 @@
+import { ComputedRef } from 'vue';
+export interface StackedGroupedConfig<T> {
+    data: T[];
+    categories: Record<string, {
+        color?: string;
+    }>;
+    stackAndGrouped: boolean;
+    xAxis?: keyof T;
+}
+export interface StackedGroupedResult<T> {
+    states: string[];
+    groupedByState: Record<string, string[]>;
+    colors: Record<string, string[]>;
+    bars: Record<string, ((d: any) => any)[]>;
+    colorFunctions: Record<string, (d: unknown, i: number) => string>;
+    positions: Record<string, number>;
+    chartData: T[] | any[];
+}
+export declare function useStackedGrouped<T extends {}>(config: StackedGroupedConfig<T>): ComputedRef<StackedGroupedResult<T>>;

package/dist/components/BarChart/stackedGroupedUtils.js

@@ -0,0 +1,67 @@
+import { computed as u } from "vue";
+import { flattenData as i } from "../../utils.js";
+function b(t) {
+  return u(() => {
+    const o = f(t.categories), e = l(t.categories, o), r = p(e, t.categories), c = d(e), n = m(r), s = h(o);
+    console.log(t, "config");
+    const a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
+    return {
+      states: o,
+      groupedByState: e,
+      colors: r,
+      bars: c,
+      colorFunctions: n,
+      positions: s,
+      chartData: a
+    };
+  });
+}
+function f(t) {
+  const o = /* @__PURE__ */ new Set();
+  return Object.keys(t).forEach((r) => {
+    const c = r.match(/([A-Z][a-z]+)$/);
+    c && o.add(c[1]);
+  }), Array.from(o);
+}
+function l(t, o) {
+  const e = {};
+  return o.forEach((r) => {
+    e[r] = Object.keys(t).filter(
+      (c) => c.endsWith(r)
+    );
+  }), e;
+}
+function p(t, o) {
+  const e = {};
+  return Object.entries(t).forEach(([r, c]) => {
+    e[r] = c.map((n) => {
+      var s;
+      return ((s = o[n]) == null ? void 0 : s.color) ?? "#ccc";
+    });
+  }), e;
+}
+function d(t) {
+  const o = {};
+  return Object.entries(t).forEach(([e, r]) => {
+    o[e] = r.map((c) => {
+      const n = c.replace(e, "").toLowerCase();
+      return (s) => s[n + e];
+    });
+  }), o;
+}
+function m(t) {
+  const o = {};
+  return Object.entries(t).forEach(([e, r]) => {
+    o[e] = (c, n) => r[n] ?? "#ccc";
+  }), o;
+}
+function h(t) {
+  const o = t.length, e = 0.4, r = {};
+  return t.forEach((c, n) => {
+    const s = (n - (o - 1) / 2) * e;
+    r[c] = s;
+  }), r;
+}
+export {
+  b as useStackedGrouped
+};

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

@@ -1,5 +1,5 @@
 import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter } from '../../types';
-export type BarChartProps<T> = {
+type BarChartPropsBase<T> = {
     /**
      * The data to be displayed in the bar chart.
      * Each element of the array represents a data point.
@@ -10,10 +10,6 @@ export type BarChartProps<T> = {
      * If `true`, creates a stacked bar chart instead of grouped bars.
      */
     stacked?: boolean;
-    /**
-     * If `true`, creates a combination of stacked and grouped bar charts.
-     */
-    stackAndGrouped?: boolean;
     /**
      * The height of the chart in pixels.
      */
@@ -27,9 +23,9 @@ export type BarChartProps<T> = {
      */
     yLabel?: string;
     /**
-   * Optional padding applied to the chart.
-   * Allows specifying individual padding values for the top, right, bottom, and left sides.
-   */
+     * Optional padding applied to the chart.
+     * Allows specifying individual padding values for the top, right, bottom, and left sides.
+     */
     padding?: {
         top: number;
         right: number;
@@ -42,18 +38,18 @@ export type BarChartProps<T> = {
      */
     categories: Record<string, BulletLegendItemInterface>;
     /**
-   * @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.
-   */
+     * @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.
-   */
+     * @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;
     /**
      * The desired number of ticks on the y-axis.
@@ -92,8 +88,8 @@ export type BarChartProps<T> = {
      */
     hideLegend?: boolean;
     /**
-   * If `true`, hides the chart tooltip.
-   */
+     * If `true`, hides the chart tooltip.
+     */
     hideTooltip?: boolean;
     /**
      * The orientation of the bars (vertical or horizontal).
@@ -138,3 +134,21 @@ export type BarChartProps<T> = {
      */
     hideYAxis?: boolean;
 };
+type BarChartPropsStackAndGrouped<T> = BarChartPropsBase<T> & {
+    stackAndGrouped: true;
+    /**
+     * The key in the data object type 'T' to be used for the x-axis values.
+     * Required when stackAndGrouped is true.
+     */
+    xAxis: keyof T;
+};
+type BarChartPropsNormal<T> = BarChartPropsBase<T> & {
+    stackAndGrouped?: false;
+    /**
+     * The key in the data object type 'T' to be used for the x-axis values.
+     * Optional when stackAndGrouped is not true.
+     */
+    xAxis?: keyof T;
+};
+export type BarChartProps<T> = BarChartPropsStackAndGrouped<T> | BarChartPropsNormal<T>;
+export {};

package/dist/components/LineChart/LineChart.js

@@ -1,4 +1,4 @@
-import { defineComponent as P, computed as k, useSlots as x, useTemplateRef as O, ref as j, createElementBlock as u, openBlock as n, normalizeClass as g, createVNode as s, createCommentVNode as a, createElementVNode as w, unref as i, withCtx as M, createBlock as m, Fragment as W, renderList as E, mergeProps as G, renderSlot as h } from "vue";
+import { defineComponent as P, computed as k, useSlots as O, useTemplateRef as j, ref as w, createElementBlock as c, openBlock as n, normalizeClass as g, createVNode as s, createCommentVNode as l, createElementVNode as x, unref as i, withCtx as M, createBlock as d, Fragment as W, renderList as E, mergeProps as G, renderSlot as h } from "vue";
 import { Position as v, CurveType as X } from "@unovis/ts";
 import { createMarkers as $, getFirstPropertyValue as z } from "../../utils.js";
 import R from "../Tooltip.js";
@@ -48,24 +48,24 @@ const J = {
   },
   emits: ["click"],
   setup(o, { emit: L }) {
-    const C = L, t = o, b = k(() => t.markerConfig ? $(t.markerConfig) : ""), B = x(), c = O("slotWrapper"), l = j();
+    const C = L, t = o, b = k(() => t.markerConfig ? $(t.markerConfig) : ""), B = O(), p = j("slotWrapper"), a = w();
     function D(e) {
-      return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
+      return typeof window > "u" ? "" : p.value ? p.value.innerHTML : "";
     }
     function V(e) {
-      return l.value = e, D();
+      return a.value = e, D();
     }
-    const p = k(
+    const y = k(
       () => t.legendPosition === I.Top
     ), A = Object.values(t.categories).map(
       (e, r) => `var(--vis-color${r})`
     ), F = (e) => Object.values(t.categories)[e].color ?? A[e];
-    return (e, r) => (n(), u("div", {
+    return (e, r) => (n(), c("div", {
       class: g(["flex flex-col space-y-4", {
-        "flex-col-reverse": p.value,
+        "flex-col-reverse": y.value,
         markers: !!t.markerConfig
       }]),
-      onClick: r[0] || (r[0] = (d) => C("click", d, l.value))
+      onClick: r[0] || (r[0] = (m) => C("click", m, a.value))
     }, [
       s(i(Y), {
         data: e.data,
@@ -78,16 +78,16 @@ const J = {
             "horizontal-placement": i(v).Right,
             "vertical-placement": i(v).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), u(W, null, E(Object.keys(t.categories), (d, y) => (n(), m(i(H), {
-            key: y,
+          (n(!0), c(W, null, E(Object.keys(t.categories), (m, u) => (n(), d(i(H), {
+            key: u,
             x: (f, N) => N,
-            y: (f) => f[d],
-            color: F(y),
+            y: (f) => f[m],
+            color: F(u),
             "curve-type": e.curveType ?? i(X).MonotoneX,
             "line-width": e.lineWidth,
-            lineDashArray: e.lineDashArray
+            lineDashArray: e.lineDashArray ? e.lineDashArray[u] : void 0
           }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
-          e.hideXAxis ? a("", !0) : (n(), m(i(T), {
+          e.hideXAxis ? l("", !0) : (n(), d(i(T), {
             key: 0,
             type: "x",
             "tick-format": e.xFormatter,
@@ -100,7 +100,7 @@ const J = {
             "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 ? a("", !0) : (n(), m(i(T), {
+          e.hideYAxis ? l("", !0) : (n(), d(i(T), {
             key: 1,
             type: "y",
             "tick-format": e.yFormatter,
@@ -110,30 +110,30 @@ const J = {
             "grid-line": e.yGridLine,
             "tick-line": e.yTickLine
           }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
-          e.hideTooltip ? a("", !0) : (n(), m(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
+          e.hideTooltip ? l("", !0) : (n(), d(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
         ]),
         _: 1
       }, 8, ["data", "padding", "height", "svgDefs"]),
-      e.hideLegend ? a("", !0) : (n(), u("div", {
+      e.hideLegend ? l("", !0) : (n(), c("div", {
         key: 0,
-        class: g(["flex items center justify-end", { "pb-4": p.value }])
+        class: g(["flex items center justify-end", { "pb-4": y.value }])
       }, [
         s(i(q), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2)),
-      w("div", J, [
+      x("div", J, [
         i(B).tooltip ? h(e.$slots, "tooltip", {
           key: 0,
-          values: l.value
-        }) : l.value ? h(e.$slots, "fallback", { key: 1 }, () => [
+          values: a.value
+        }) : a.value ? h(e.$slots, "fallback", { key: 1 }, () => [
           s(R, {
-            data: l.value,
+            data: a.value,
             categories: e.categories,
-            toolTipTitle: i(z)(l.value) ?? "",
+            toolTipTitle: i(z)(a.value) ?? "",
             yFormatter: t.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : a("", !0)
+        ]) : l("", !0)
       ], 512)
     ], 2));
   }

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

@@ -1,4 +1,4 @@
-import { axisFormatter, BulletLegendItemInterface, CurveType, LegendPosition, MarkerConfig } from '../../types';
+import { axisFormatter, BulletLegendItemInterface, CrosshairConfig, CurveType, LegendPosition, MarkerConfig } from '../../types';
 export interface LineChartProps<T> {
     /**
      * The data to be displayed in the line chart.
@@ -63,7 +63,7 @@ export interface LineChartProps<T> {
     /**
      * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
      */
-    lineDashArray?: number[];
+    lineDashArray?: number[][];
     /**
      * The desired number of ticks on the x-axis.
      */
@@ -128,19 +128,5 @@ export interface LineChartProps<T> {
     /**
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
-    crosshairConfig?: {
-        /**
-         * The color of the crosshair line. Accepts any valid CSS color string.
-         * Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
-         */
-        color?: string;
-        /**
-         * The stroke color of the crosshair line. Accepts any valid CSS color string.
-         */
-        strokeColor?: string;
-        /**
-         * The stroke width of the crosshair line in pixels.
-         */
-        strokeWidth?: number;
-    };
+    crosshairConfig?: CrosshairConfig;
 }

package/dist/index.d.ts

@@ -3,6 +3,6 @@ import { default as AreaStackedChart } from './components/AreaStackedChart/AreaS
 import { default as LineChart } from './components/LineChart/LineChart.vue';
 import { default as BarChart } from './components/BarChart/BarChart.vue';
 import { default as DonutChart } from './components/DonutChart/DonutChart.vue';
-import { LegendPosition, CurveType, Orientation, BulletLegendItemInterface } from './types';
+import { LegendPosition, CurveType, Orientation, BulletLegendItemInterface, MarkerConfig, CrosshairConfig } from './types';
 export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, Orientation, CurveType, LegendPosition };
-export type { BulletLegendItemInterface, };
+export type { BulletLegendItemInterface, MarkerConfig, CrosshairConfig };

package/dist/types.d.ts

@@ -48,3 +48,18 @@ export interface MarkerConfig {
     color?: string;
     strokeColor?: string;
 }
+export interface CrosshairConfig {
+    /**
+     * The color of the crosshair line. Accepts any valid CSS color string.
+     * Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
+     */
+    color?: string;
+    /**
+     * The stroke color of the crosshair line. Accepts any valid CSS color string.
+     */
+    strokeColor?: string;
+    /**
+     * The stroke width of the crosshair line in pixels.
+     */
+    strokeWidth?: number;
+}

package/dist/utils.d.ts

@@ -3,3 +3,6 @@ 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: Record<string, MarkerConfig>): string;
+export declare const flattenData: (data: any[], xAxis: string) => {
+    month: any;
+}[];

package/dist/utils.js

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

package/package.json

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