vue-chrts 0.2.5 → 1.0.0-test.2

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

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter } from '../../types';
+import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter, AxisConfig } from '../../types';
 type BarChartPropsBase<T> = {
     /**
      * The data to be displayed in the bar chart.
@@ -101,6 +101,10 @@ type BarChartPropsBase<T> = {
      * 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.
      */
@@ -138,6 +142,14 @@ type BarChartPropsBase<T> = {
      * Only applicable if `stackAndGrouped` is `true`.
      */
     stackedGroupedSpacing?: number;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    xAxisConfig?: AxisConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    yAxisConfig?: AxisConfig;
 };
 export type BarChartProps<T> = BarChartPropsBase<T> & {
     /**

package/dist/components/BubbleChart/BubbleChart.js

@@ -1,16 +1,13 @@
-import { defineComponent as C, useSlots as z, useTemplateRef as P, ref as _, createElementBlock as m, openBlock as n, Fragment as N, createCommentVNode as l, createVNode as s, createElementVNode as O, unref as t, withCtx as R, createBlock as c, renderSlot as p } from "vue";
-import { Scatter as w, Position as D } from "@unovis/ts";
-import { VisBulletLegend as K, VisXYContainer as M, VisTooltip as S, VisScatter as E, VisAxis as f } from "@unovis/vue";
-import { LegendPosition as g } from "../../types.js";
-import { getFirstPropertyValue as G } from "../../utils.js";
-import $ from "../Tooltip.js";
-const j = {
-  key: 0,
-  class: "flex items-center justify-end pb-4"
-}, W = {
+import { defineComponent as O, useSlots as S, useTemplateRef as D, ref as R, computed as f, createElementBlock as m, openBlock as l, normalizeStyle as c, createVNode as s, createCommentVNode as r, createElementVNode as w, unref as i, withCtx as K, createBlock as d, mergeProps as g, renderSlot as k } from "vue";
+import { Scatter as M, Position as _ } from "@unovis/ts";
+import { VisXYContainer as E, VisTooltip as G, VisScatter as W, VisAxis as x, VisBulletLegend as $ } from "@unovis/vue";
+import { LegendPosition as j } from "../../types.js";
+import { getFirstPropertyValue as X } from "../../utils.js";
+import Y from "../Tooltip.js";
+const q = {
   ref: "slotWrapper",
   class: "hidden"
-}, J = /* @__PURE__ */ C({
+}, ee = /* @__PURE__ */ O({
   __name: "BubbleChart",
   props: {
     xAccessor: {},
@@ -31,7 +28,8 @@ const j = {
     categoryKey: {},
     xFormatter: {},
     yFormatter: {},
-    legendPosition: { default: g.Bottom },
+    legendPosition: { default: j.BottomCenter },
+    legendStyle: { default: void 0 },
     sizeOptions: {},
     xDomainLine: { type: Boolean, default: !0 },
     yDomainLine: { type: Boolean, default: !0 },
@@ -46,63 +44,63 @@ const j = {
     hideTooltip: { type: Boolean, default: !1 },
     crosshairConfig: { default: () => ({
       color: "#666"
-    }) }
+    }) },
+    xAxisConfig: {},
+    yAxisConfig: {}
   },
   emits: ["click"],
-  setup(k, { emit: x }) {
-    const e = k, L = z(), u = P("slotWrapper"), a = _(), T = e.xAccessor, h = e.yAccessor, b = e.sizeAccessor || ((o) => typeof o.comments == "number" ? o.comments : 1), B = (o) => {
-      var d, y;
+  setup(L, { emit: T }) {
+    const e = L, h = S(), u = D("slotWrapper"), n = R(), v = e.xAccessor, b = e.yAccessor, B = e.sizeAccessor || ((t) => typeof t.comments == "number" ? t.comments : 1), A = (t) => {
+      var y, p;
       if (!e.categories || !e.categoryKey)
         return console.warn(
           "BubbleChart: categories and categoryKey are required for color mapping"
         ), "#cccccc";
-      const r = String(o[e.categoryKey]);
-      let i = (d = e.categories[r]) == null ? void 0 : d.color;
-      return Object.keys(e.categories).length === 1 && (i = (y = e.categories[e.categoryKey]) == null ? void 0 : y.color), i || (console.warn(
-        `BubbleChart: No color defined for category "${r}"`
+      const a = String(t[e.categoryKey]);
+      let o = (y = e.categories[a]) == null ? void 0 : y.color;
+      return Object.keys(e.categories).length === 1 && (o = (p = e.categories[e.categoryKey]) == null ? void 0 : p.color), o || (console.warn(
+        `BubbleChart: No color defined for category "${a}"`
       ), "#cccccc");
-    }, v = x;
-    function A(o) {
-      return a.value = o, F();
+    }, C = T;
+    function V(t) {
+      return n.value = t, F();
     }
-    function F(o) {
+    function F(t) {
       return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
     }
-    const V = {
-      [w.selectors.point]: A
-    };
-    return (o, r) => (n(), m(N, null, [
-      !e.hideLegend && e.legendPosition === t(g).Top ? (n(), m("div", j, [
-        s(t(K), {
-          items: Object.values(e.categories).map((i) => ({
-            ...i,
-            color: Array.isArray(i.color) ? i.color[0] : i.color
-          }))
-        }, null, 8, ["items"])
-      ])) : l("", !0),
-      s(t(M), {
+    const P = {
+      [M.selectors.point]: V
+    }, z = f(() => e.legendPosition.startsWith("top")), N = f(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
+    return (t, a) => (l(), m("div", {
+      style: c({
+        display: "flex",
+        flexDirection: z.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      })
+    }, [
+      s(i(E), {
         data: e.data,
         height: e.height || 600,
         padding: e.padding,
         scaleByDomain: !0,
-        onClick: r[0] || (r[0] = (i) => v("click", i, a.value))
+        onClick: a[0] || (a[0] = (o) => C("click", o, n.value))
       }, {
-        default: R(() => [
-          e.hideTooltip ? l("", !0) : (n(), c(t(S), {
+        default: K(() => [
+          e.hideTooltip ? r("", !0) : (l(), d(i(G), {
             key: 0,
-            triggers: V
+            triggers: P
           })),
-          s(t(E), {
-            x: t(T),
-            y: t(h),
-            color: B,
-            size: t(b),
-            labelPosition: e.labelPosition || t(D).Bottom,
+          s(i(W), {
+            x: i(v),
+            y: i(b),
+            color: A,
+            size: i(B),
+            labelPosition: e.labelPosition || i(_).Bottom,
             sizeRange: e.sizeRange || [1, 20],
             opacity: e.opacity,
             cursor: "pointer"
           }, null, 8, ["x", "y", "size", "labelPosition", "sizeRange", "opacity"]),
-          e.hideXAxis ? l("", !0) : (n(), c(t(f), {
+          e.hideXAxis ? r("", !0) : (l(), d(i(x), g({
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -113,8 +111,8 @@ const j = {
             numTicks: e.xNumTicks,
             tickValues: e.xExplicitTicks,
             minMaxTicksOnly: e.minMaxTicksOnly
-          }, null, 8, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "tickValues", "minMaxTicksOnly"])),
-          e.hideYAxis ? l("", !0) : (n(), c(t(f), {
+          }, t.xAxisConfig), null, 16, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "tickValues", "minMaxTicksOnly"])),
+          e.hideYAxis ? r("", !0) : (l(), d(i(x), g({
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -123,26 +121,45 @@ const j = {
             domainLine: !!e.yDomainLine,
             tickLine: e.yTickLine,
             numTicks: e.yNumTicks
-          }, null, 8, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks"]))
+          }, t.yAxisConfig), null, 16, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks"]))
         ]),
         _: 1
       }, 8, ["data", "height", "padding"]),
-      O("div", W, [
-        t(L).tooltip ? p(o.$slots, "tooltip", {
+      e.hideLegend ? r("", !0) : (l(), m("div", {
+        key: 0,
+        style: c({
+          display: "flex",
+          justifyContent: N.value
+        })
+      }, [
+        s(i($), {
+          class: "bulletLegendOverrides",
+          style: c([
+            e.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: Object.values(e.categories).map((o) => ({
+            ...o,
+            color: Array.isArray(o.color) ? o.color[0] : o.color
+          }))
+        }, null, 8, ["style", "items"])
+      ], 4)),
+      w("div", q, [
+        i(h).tooltip ? k(t.$slots, "tooltip", {
           key: 0,
-          values: a.value
-        }) : a.value ? p(o.$slots, "fallback", { key: 1 }, () => [
-          s($, {
-            data: a.value,
+          values: n.value
+        }) : n.value ? k(t.$slots, "fallback", { key: 1 }, () => [
+          s(Y, {
+            data: n.value,
             categories: e.categories || {},
-            toolTipTitle: t(G)(a.value) ?? "",
+            toolTipTitle: i(X)(n.value) ?? "",
             yFormatter: e.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : l("", !0)
+        ]) : r("", !0)
       ], 512)
-    ], 64));
+    ], 4));
   }
 });
 export {
-  J as default
+  ee as default
 };

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

@@ -1,5 +1,5 @@
 import { BubbleChartProps } 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<{
+declare const _default: <T>(__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"> & BubbleChartProps<T> & Partial<{}>> & import('vue').PublicProps;

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

@@ -1,17 +1,5 @@
-import { axisFormatter, BulletLegendItemInterface, LegendPosition } from '../../types';
+import { axisFormatter, BulletLegendItemInterface, LegendPosition, CrosshairConfig, AxisConfig } from '../../types';
 import { NumericAccessor, Position } from '@unovis/ts';
-export type DataRecord = {
-    species: string;
-    island: string;
-    beakLength: number | undefined;
-    beakDepth: number | undefined;
-    flipperLength: number | undefined;
-    bodyMass: number | undefined;
-    sex: string;
-};
-/**
- * Configuration for bubble sizes.
- */
 export interface SizeOptions {
     minRadius?: number;
     maxRadius?: number;
@@ -107,6 +95,10 @@ export interface BubbleChartProps<T> {
      * See `LegendPosition` for available options.
      */
     legendPosition?: LegendPosition;
+    /**
+     * Optional inline CSS styles for the legend container.
+     */
+    legendStyle?: Record<string, string>;
     /** Options for controlling bubble sizes. */
     sizeOptions?: SizeOptions;
     /**
@@ -154,9 +146,15 @@ export interface BubbleChartProps<T> {
      */
     hideTooltip?: boolean;
     /**
-     * Configuration for the crosshair behavior.
+     * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
-    crosshairConfig?: {
-        color?: string;
-    };
+    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;
 }

package/dist/components/DonutChart/DonutChart.js

@@ -1,19 +1,12 @@
-import { defineComponent as V, useSlots as b, useTemplateRef as w, ref as T, createElementBlock as u, openBlock as p, Fragment as D, createElementVNode as n, createCommentVNode as m, createVNode as o, renderSlot as i, unref as l, withCtx as S, normalizeStyle as W, toDisplayString as B } from "vue";
-import { Donut as L } from "@unovis/ts";
-import { DonutType as R } from "./types.js";
+import { defineComponent as T, useSlots as B, useTemplateRef as P, ref as W, computed as c, createElementBlock as f, openBlock as m, normalizeStyle as s, createVNode as a, createCommentVNode as v, createElementVNode as i, unref as l, withCtx as _, renderSlot as p, toDisplayString as b } from "vue";
+import { Donut as R } from "@unovis/ts";
+import { DonutType as z } from "./types.js";
 import { VisSingleContainer as H, VisTooltip as N, VisDonut as $, VisBulletLegend as j } from "@unovis/vue";
-const z = {
+import { LegendPosition as E } from "../../types.js";
+const M = { class: "absolute top-1/2 left-1/2 -translate-1/2" }, O = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, A = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, E = {
-  key: 0,
-  style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: "1rem"
-  }
-}, M = /* @__PURE__ */ V({
+}, U = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, K = /* @__PURE__ */ T({
   __name: "DonutChart",
   props: {
     type: {},
@@ -22,78 +15,103 @@ const z = {
     height: {},
     radius: {},
     hideLegend: { type: Boolean },
-    labels: {},
+    legendPosition: { default: E.BottomCenter },
+    legendStyle: {},
+    categories: {},
     padAngle: {}
   },
   emits: ["click"],
-  setup(c, { emit: g }) {
-    const f = g, r = c, h = b(), s = w("slotWrapper"), t = T(), y = (e) => e, v = r.type === R.Half;
-    function C(e) {
-      return t.value = e, k();
+  setup(h, { emit: y }) {
+    const C = y, n = h, k = B(), g = P("slotWrapper"), r = W(), V = (e) => e, x = n.type === z.Half;
+    function S(e) {
+      return r.value = e, w();
     }
-    function k(e) {
-      return typeof window > "u" ? "" : s.value ? s.value.innerHTML : "";
+    function w(e) {
+      return typeof window > "u" ? "" : g.value ? g.value.innerHTML : "";
     }
-    return (e, d) => (p(), u(D, null, [
-      n("div", {
-        style: {
+    const A = c(() => n.legendPosition.includes("top")), D = c(() => n.legendPosition.includes("left") ? "flex-start" : n.legendPosition.includes("right") ? "flex-end" : "center"), d = (e, o = "#ccc") => e ? Array.isArray(e) ? e[0] || o : e : o, u = c(() => Object.values(n.categories)), L = (e, o) => {
+      const t = u.value[o];
+      if (t)
+        return d(t.color);
+    };
+    return (e, o) => (m(), f("div", {
+      style: s({
+        display: "flex",
+        flexDirection: A.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      }),
+      onClick: o[0] || (o[0] = (t) => C("click", t, r.value))
+    }, [
+      a(l(H), {
+        data: e.data,
+        height: e.height,
+        margin: {}
+      }, {
+        default: _(() => [
+          a(l(N), {
+            "horizontal-shift": 20,
+            "vertical-shift": 20,
+            triggers: {
+              [l(R).selectors.segment]: S
+            }
+          }, null, 8, ["triggers"]),
+          a(l($), {
+            value: V,
+            "corner-radius": e.radius,
+            "arc-width": e.arcWidth ?? 20,
+            color: L,
+            "angle-range": x ? [-1.5707963267948966, 1.5707963267948966] : [],
+            "pad-angle": n.padAngle || 0
+          }, null, 8, ["corner-radius", "arc-width", "angle-range", "pad-angle"]),
+          i("div", M, [
+            p(e.$slots, "default")
+          ])
+        ]),
+        _: 3
+      }, 8, ["data", "height"]),
+      n.hideLegend ? v("", !0) : (m(), f("div", {
+        key: 0,
+        style: s({
           display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        onClick: d[0] || (d[0] = (a) => f("click", a, t.value))
+          justifyContent: D.value
+        })
       }, [
-        o(l(H), {
-          data: e.data,
-          height: e.height,
-          margin: {}
-        }, {
-          default: S(() => [
-            o(l(N), {
-              "horizontal-shift": 20,
-              "vertical-shift": 20,
-              triggers: {
-                [l(L).selectors.segment]: C
-              }
-            }, null, 8, ["triggers"]),
-            o(l($), {
-              value: y,
-              "corner-radius": e.radius,
-              "arc-width": e.arcWidth ?? 20,
-              color: r.labels.map((a) => a.color),
-              "angle-range": v ? [-1.5707963267948966, 1.5707963267948966] : [],
-              "pad-angle": r.padAngle || 0
-            }, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
+        a(l(j), {
+          style: s([
+            n.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          _: 1
-        }, 8, ["data", "height"]),
-        i(e.$slots, "default"),
-        n("div", z, [
-          l(h).tooltip ? i(e.$slots, "tooltip", {
-            key: 0,
-            values: t.value
-          }) : t.value ? i(e.$slots, "fallback", { key: 1 }, () => [
-            n("div", A, [
-              n("div", {
-                style: W({
+          items: u.value.map((t) => ({
+            ...t,
+            color: d(t.color)
+          }))
+        }, null, 8, ["style", "items"])
+      ], 4)),
+      i("div", O, [
+        l(k).tooltip ? p(e.$slots, "tooltip", {
+          key: 0,
+          values: r.value
+        }) : r.value ? p(e.$slots, "fallback", { key: 1 }, () => {
+          var t;
+          return [
+            i("div", U, [
+              i("div", {
+                style: s({
                   width: "0.5rem",
                   height: "0.5rem",
                   borderRadius: "9999px",
                   marginRight: "0.5rem",
-                  backgroundColor: r.labels[t.value.index].color
+                  backgroundColor: d((t = u.value[r.value.index]) == null ? void 0 : t.color)
                 })
               }, null, 4),
-              n("div", null, B(t.value.data), 1)
+              i("div", null, b(r.value.data), 1)
             ])
-          ]) : m("", !0)
-        ], 512)
-      ]),
-      e.hideLegend ? m("", !0) : (p(), u("div", E, [
-        o(l(j), { items: e.labels }, null, 8, ["items"])
-      ]))
-    ], 64));
+          ];
+        }) : v("", !0)
+      ], 512)
+    ], 4));
   }
 });
 export {
-  M as default
+  K as default
 };

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

@@ -1,9 +1,10 @@
+import { BulletLegendItemInterface, LegendPosition } from '../../types';
 export type DonutChartProps = {
     /**
      * The type of donut chart to render.
      * See `DonutType` for available options.
      */
-    type?: string;
+    type?: DonutType;
     /**
      * The data to be displayed in the donut chart.
      * Each number in the array represents a segment value.
@@ -14,8 +15,8 @@ export type DonutChartProps = {
      */
     arcWidth?: number;
     /**
-   * The height of the chart in pixels.
-   */
+     * The height of the chart in pixels.
+     */
     height: number;
     /**
      * The radius of the donut in pixels.
@@ -26,12 +27,19 @@ export type DonutChartProps = {
      */
     hideLegend?: boolean;
     /**
-     * An array of label objects defining the name and color for each segment.
+     * 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>;
+    /**
+     * A record mapping category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for each category in the chart's legend.
      */
-    labels: {
-        name: string;
-        color: string;
-    }[];
+    categories: Record<string, BulletLegendItemInterface>;
     /**
      * Pad angle. Default: 0
      */