vue-chrts 0.2.5-test.3 → 1.0.0-test.1

package/dist/components/BubbleChart/BubbleChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as N, useSlots as O, useTemplateRef as S, ref as _, computed as m, createElementBlock as f, openBlock as l, normalizeStyle as c, createVNode as s, createCommentVNode as r, createElementVNode as D, unref as t, withCtx as R, createBlock as d, renderSlot as g } from "vue";
-import { Scatter as w, Position as K } from "@unovis/ts";
-import { VisXYContainer as M, VisTooltip as E, VisScatter as G, VisAxis as k, VisBulletLegend as W } from "@unovis/vue";
-import { LegendPosition as $ } from "../../types.js";
-import { getFirstPropertyValue as j } from "../../utils.js";
-import X from "../Tooltip.js";
-const Y = {
+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"
-}, Z = /* @__PURE__ */ N({
+}, ee = /* @__PURE__ */ O({
   __name: "BubbleChart",
   props: {
     xAccessor: {},
@@ -28,7 +28,7 @@ const Y = {
     categoryKey: {},
     xFormatter: {},
     yFormatter: {},
-    legendPosition: { default: $.BottomCenter },
+    legendPosition: { default: j.BottomCenter },
     legendStyle: { default: void 0 },
     sizeOptions: {},
     xDomainLine: { type: Boolean, default: !0 },
@@ -44,61 +44,63 @@ const Y = {
     hideTooltip: { type: Boolean, default: !1 },
     crosshairConfig: { default: () => ({
       color: "#666"
-    }) }
+    }) },
+    xAxisConfig: {},
+    yAxisConfig: {}
   },
   emits: ["click"],
-  setup(x, { emit: L }) {
-    const e = x, T = O(), u = S("slotWrapper"), a = _(), h = e.xAccessor, v = e.yAccessor, b = e.sizeAccessor || ((i) => typeof i.comments == "number" ? i.comments : 1), B = (i) => {
+  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 n = String(i[e.categoryKey]);
-      let o = (y = e.categories[n]) == null ? void 0 : y.color;
+      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 "${n}"`
+        `BubbleChart: No color defined for category "${a}"`
       ), "#cccccc");
-    }, A = L;
-    function C(i) {
-      return a.value = i, V();
+    }, C = T;
+    function V(t) {
+      return n.value = t, F();
     }
-    function V(i) {
+    function F(t) {
       return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
     }
-    const F = {
-      [w.selectors.point]: C
-    }, z = m(() => e.legendPosition.startsWith("top")), P = m(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
-    return (i, n) => (l(), f("div", {
+    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(t(M), {
+      s(i(E), {
         data: e.data,
         height: e.height || 600,
         padding: e.padding,
         scaleByDomain: !0,
-        onClick: n[0] || (n[0] = (o) => A("click", o, a.value))
+        onClick: a[0] || (a[0] = (o) => C("click", o, n.value))
       }, {
-        default: R(() => [
-          e.hideTooltip ? r("", !0) : (l(), d(t(E), {
+        default: K(() => [
+          e.hideTooltip ? r("", !0) : (l(), d(i(G), {
             key: 0,
-            triggers: F
+            triggers: P
           })),
-          s(t(G), {
-            x: t(h),
-            y: t(v),
-            color: B,
-            size: t(b),
-            labelPosition: e.labelPosition || t(K).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 ? r("", !0) : (l(), d(t(k), {
+          e.hideXAxis ? r("", !0) : (l(), d(i(x), g({
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -109,8 +111,8 @@ const Y = {
             numTicks: e.xNumTicks,
             tickValues: e.xExplicitTicks,
             minMaxTicksOnly: e.minMaxTicksOnly
-          }, null, 8, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "tickValues", "minMaxTicksOnly"])),
-          e.hideYAxis ? r("", !0) : (l(), d(t(k), {
+          }, 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,
@@ -119,18 +121,18 @@ const Y = {
             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"]),
-      e.hideLegend ? r("", !0) : (l(), f("div", {
+      e.hideLegend ? r("", !0) : (l(), m("div", {
         key: 0,
         style: c({
           display: "flex",
-          justifyContent: P.value
+          justifyContent: N.value
         })
       }, [
-        s(t(W), {
+        s(i($), {
           class: "bulletLegendOverrides",
           style: c([
             e.legendStyle,
@@ -142,15 +144,15 @@ const Y = {
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      D("div", Y, [
-        t(T).tooltip ? g(i.$slots, "tooltip", {
+      w("div", q, [
+        i(h).tooltip ? k(t.$slots, "tooltip", {
           key: 0,
-          values: a.value
-        }) : a.value ? g(i.$slots, "fallback", { key: 1 }, () => [
-          s(X, {
-            data: a.value,
+          values: n.value
+        }) : n.value ? k(t.$slots, "fallback", { key: 1 }, () => [
+          s(Y, {
+            data: n.value,
             categories: e.categories || {},
-            toolTipTitle: t(j)(a.value) ?? "",
+            toolTipTitle: i(X)(n.value) ?? "",
             yFormatter: e.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : r("", !0)
@@ -159,5 +161,5 @@ const Y = {
   }
 });
 export {
-  Z 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;
@@ -158,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,12 +1,12 @@
-import { defineComponent as x, useSlots as D, useTemplateRef as L, ref as T, computed as p, createElementBlock as g, openBlock as c, normalizeStyle as o, createVNode as i, createCommentVNode as f, renderSlot as s, createElementVNode as r, unref as n, withCtx as B, toDisplayString as P } from "vue";
-import { Donut as W } from "@unovis/ts";
-import { DonutType as R } from "./types.js";
-import { VisSingleContainer as A, VisTooltip as H, VisDonut as N, VisBulletLegend as $ } from "@unovis/vue";
-import { LegendPosition as z } from "../../types.js";
-const E = {
+import { defineComponent as L, useSlots as B, useTemplateRef as P, ref as T, computed as i, createElementBlock as g, openBlock as m, normalizeStyle as a, createVNode as s, createCommentVNode as f, renderSlot as u, createElementVNode as d, unref as r, withCtx as W, toDisplayString as w } from "vue";
+import { Donut as R } from "@unovis/ts";
+import { DonutType as j } from "./types.js";
+import { VisSingleContainer as H, VisTooltip as N, VisDonut as $, VisBulletLegend as z } from "@unovis/vue";
+import { LegendPosition as E } from "../../types.js";
+const O = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, j = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, G = /* @__PURE__ */ x({
+}, _ = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, G = /* @__PURE__ */ L({
   __name: "DonutChart",
   props: {
     type: {},
@@ -15,85 +15,95 @@ const E = {
     height: {},
     radius: {},
     hideLegend: { type: Boolean },
-    legendPosition: { default: z.BottomCenter },
+    legendPosition: { default: E.BottomCenter },
     legendStyle: {},
-    labels: {},
+    categories: {},
     padAngle: {}
   },
   emits: ["click"],
-  setup(m, { emit: h }) {
-    const v = h, t = m, y = D(), d = L("slotWrapper"), l = T(), C = (e) => e, k = t.type === R.Half;
-    function V(e) {
-      return l.value = e, b();
+  setup(v, { emit: y }) {
+    const h = y, t = v, k = B(), C = P("slotWrapper"), l = T(), V = (e) => e, b = t.type === j.Half, c = i(
+      () => Object.values(t.categories).map((e) => {
+        const o = e.color;
+        return Array.isArray(o) ? o[0] : o ?? "#3b82f6";
+      })
+    ), x = i(
+      () => Object.values(t.categories).map((e) => ({
+        ...e,
+        color: Array.isArray(e.color) ? e.color[0] : e.color ?? "#3b82f6"
+      }))
+    );
+    function A(e) {
+      l.value = e;
     }
-    function b(e) {
-      return typeof window > "u" ? "" : d.value ? d.value.innerHTML : "";
-    }
-    const S = p(() => t.legendPosition.includes("top")), w = p(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
-    return (e, u) => (c(), g("div", {
-      style: o({
+    const S = i(() => t.legendPosition.includes("top")), D = i(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
+    return (e, o) => (m(), g("div", {
+      style: a({
         display: "flex",
         flexDirection: S.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: u[0] || (u[0] = (a) => v("click", a, l.value))
+      onClick: o[0] || (o[0] = (n) => h("click", n, l.value))
     }, [
-      i(n(A), {
+      s(r(H), {
         data: e.data,
         height: e.height,
         margin: {}
       }, {
-        default: B(() => [
-          i(n(H), {
+        default: W(() => [
+          s(r(N), {
             "horizontal-shift": 20,
             "vertical-shift": 20,
             triggers: {
-              [n(W).selectors.segment]: V
+              [r(R).selectors.segment]: (n) => {
+                var p;
+                return A(n), n ? (p = C.value) == null ? void 0 : p.innerHTML : "";
+              }
             }
           }, null, 8, ["triggers"]),
-          i(n(N), {
-            value: C,
+          s(r($), {
+            value: V,
             "corner-radius": e.radius,
             "arc-width": e.arcWidth ?? 20,
-            color: t.labels.map((a) => a.color),
-            "angle-range": k ? [-1.5707963267948966, 1.5707963267948966] : [],
+            color: c.value,
+            "angle-range": b ? [-1.5707963267948966, 1.5707963267948966] : [],
             "pad-angle": t.padAngle || 0
           }, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
         ]),
         _: 1
       }, 8, ["data", "height"]),
-      t.hideLegend ? f("", !0) : (c(), g("div", {
+      t.hideLegend ? f("", !0) : (m(), g("div", {
         key: 0,
-        style: o({
+        style: a({
           display: "flex",
-          justifyContent: w.value
+          justifyContent: D.value
         })
       }, [
-        i(n($), {
-          style: o([
+        s(r(z), {
+          style: a([
             t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: e.labels
+          items: x.value
         }, null, 8, ["style", "items"])
       ], 4)),
-      s(e.$slots, "default"),
-      r("div", E, [
-        n(y).tooltip ? s(e.$slots, "tooltip", {
+      u(e.$slots, "default"),
+      d("div", O, [
+        r(k).tooltip ? u(e.$slots, "tooltip", {
           key: 0,
           values: l.value
-        }) : l.value ? s(e.$slots, "fallback", { key: 1 }, () => [
-          r("div", j, [
-            r("div", {
-              style: o({
+        }) : l.value ? u(e.$slots, "fallback", { key: 1 }, () => [
+          d("div", _, [
+            d("div", {
+              style: a({
                 width: "0.5rem",
                 height: "0.5rem",
                 borderRadius: "9999px",
                 marginRight: "0.5rem",
-                backgroundColor: t.labels[l.value.index].color
+                backgroundColor: c.value[l.value.index]
               })
             }, null, 4),
-            r("div", null, P(l.value.data), 1)
+            d("div", null, w(l.value.data), 1)
           ])
         ]) : f("", !0)
       ], 512)

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

@@ -1,5 +1,5 @@
 import { DonutChartProps } 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 extends Record<string, any> = any>(__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?: any) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & DonutChartProps & Partial<{}>> & import('vue').PublicProps;

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

@@ -1,10 +1,10 @@
-import { LegendPosition } from '../../types';
+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.
@@ -15,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.
@@ -27,21 +27,19 @@ export type DonutChartProps = {
      */
     hideLegend?: boolean;
     /**
-   * Optional position for the legend, if applicable.
-   * See `LegendPosition` for available options.
-   */
+     * 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>;
     /**
-     * An array of label objects defining the name and color for each segment.
+     * 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
      */

package/dist/components/LineChart/LineChart.js

@@ -1,6 +1,6 @@
-import { defineComponent as a, createBlock as r, openBlock as p, mergeProps as s, createSlots as l, renderList as y, withCtx as c, renderSlot as m, normalizeProps as d, guardReactiveProps as h } from "vue";
-import B from "../AreaChart/AreaChart.js";
-const g = /* @__PURE__ */ a({
+import { defineComponent as a, createBlock as r, openBlock as s, mergeProps as p, createSlots as l, renderList as y, withCtx as c, renderSlot as m, normalizeProps as d, guardReactiveProps as x } from "vue";
+import h from "../AreaChart/AreaChart.js";
+const L = /* @__PURE__ */ a({
   inheritAttrs: !1,
   __name: "LineChart",
   props: {
@@ -33,21 +33,23 @@ const g = /* @__PURE__ */ a({
     hideXAxis: { type: Boolean },
     hideYAxis: { type: Boolean },
     crosshairConfig: {},
+    xAxisConfig: {},
+    yAxisConfig: {},
     yDomain: {},
     xDomain: {}
   },
-  setup(n) {
-    const i = n;
-    return (e, u) => (p(), r(B, s({ ...e.$attrs, ...i }, { "hide-area": !0 }), l({ _: 2 }, [
-      y(e.$slots, (x, o) => ({
+  setup(i) {
+    const n = i;
+    return (e, B) => (s(), r(h, p(n, { "hide-area": !0 }), l({ _: 2 }, [
+      y(e.$slots, (f, o) => ({
         name: o,
         fn: c((t) => [
-          m(e.$slots, o, d(h(t)))
+          m(e.$slots, o, d(x(t)))
         ])
       }))
     ]), 1040));
   }
 });
 export {
-  g as default
+  L as default
 };