vue-chrts 0.2.4 → 0.2.5-test.2

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

@@ -1,17 +1,10 @@
 import { LineChartProps } from './types';
 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"> & LineChartProps<T> & Partial<{}>> & import('vue').PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & LineChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: {
-        tooltip?(_: {
-            values: T | undefined;
-        }): any;
-        fallback?(_: {}): any;
-    };
-    emit: (e: "click", event: MouseEvent, values?: T) => void;
+    slots: Partial<Record<number, (_: any) => any>>;
+    emit: {};
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,140 +1,2 @@
-import { axisFormatter, BulletLegendItemInterface, CrosshairConfig, CurveType, LegendPosition, MarkerConfig } from '../../types';
-export interface LineChartProps<T> {
-    /**
-     * The data to be displayed in the line chart.
-     * Each element of the array represents a data point.
-     * The structure of 'T' should be compatible with the chart's rendering logic.
-     */
-    data: T[];
-    /**
-     * The height of the chart in pixels.
-     */
-    height: number;
-    /**
-     * Optional label for the x-axis.
-     */
-    xLabel?: string;
-    /**
-     * Optional label for the y-axis.
-     */
-    yLabel?: string;
-    /**
-     * Optional padding applied to the chart.
-     * Allows specifying individual padding values for the top, right, bottom, and left sides.
-     */
-    padding?: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-    /**
-     * A record mapping category keys to `BulletLegendItemInterface` objects.
-     * This defines the visual representation and labels for each category in the chart's legend.
-     */
-    categories: Record<string, BulletLegendItemInterface>;
-    /**
-     * A record mapping marker keys to show custom patterns.
-     */
-    markerConfig?: Record<string, MarkerConfig>;
-    /**
-     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
-     * @param {number} i - The index of the tick in the `ticks` array.
-     * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
-     * @returns {string} The formatted string representation of the tick.
-     */
-    xFormatter?: axisFormatter;
-    /**
-     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis.
-     * @param {number} i - The index of the tick in the `ticks` array.
-     * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
-     * @returns {string} The formatted string representation of the tick.
-     */
-    yFormatter?: axisFormatter;
-    /**
-     * The type of curve to use for the line chart.
-     * 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.
-     */
-    xNumTicks?: number;
-    /**
-     * Force specific ticks on the x-axis.
-     */
-    xExplicitTicks?: (number | string | Date)[];
-    /**
-     * Force only first and last ticks on the x-axis.
-     */
-    minMaxTicksOnly?: boolean;
-    /**
-     * The desired number of ticks on the y-axis.
-     */
-    yNumTicks?: number;
-    /**
-     * If `true`, hides the chart tooltip.
-     */
-    hideTooltip?: boolean;
-    /**
-     * If `true`, hides the chart legend.
-     */
-    hideLegend?: boolean;
-    /**
-     * Optional position for the legend, if applicable.
-     * See `LegendPosition` for available options.
-     */
-    legendPosition?: LegendPosition;
-    /**
-     * If `true`, displays grid lines along the x-axis.
-     */
-    xGridLine?: boolean;
-    /**
-     * If `true`, displays a domain line (axis line) along the x-axis.
-     */
-    xDomainLine?: boolean;
-    /**
-     * If `true`, displays grid lines along the y-axis.
-     */
-    yGridLine?: boolean;
-    /**
-     * If `true`, displays a domain line (axis line) along the y-axis.
-     */
-    yDomainLine?: boolean;
-    /**
-     * If `true`, displays tick lines on the x-axis.
-     */
-    xTickLine?: boolean;
-    /**
-     * If `true`, displays tick lines on the y-axis.
-     */
-    yTickLine?: boolean;
-    /**
-     * If `true`, hide the x-axis.
-     */
-    hideXAxis?: boolean;
-    /**
-     * If `true`, hide the y-axis.
-     */
-    hideYAxis?: boolean;
-    /**
-     * Crosshair configuration object for customizing the appearance of the crosshair line.
-     */
-    crosshairConfig?: CrosshairConfig;
-    /**
-     * The domain for the y-axis, specified as a tuple of two values.
-     */
-    yDomain?: [number | undefined, number | undefined];
-    /**
-     * The domain for the x-axis, specified as a tuple of two values.
-     */
-    xDomain?: [number | undefined, number | undefined];
-}
+import { AreaChartProps } from '../AreaChart/types';
+export type LineChartProps<T> = Omit<AreaChartProps<T>, "hideArea" | "gradientStops">;

package/dist/components/Tooltip.js

@@ -1,11 +1,11 @@
-import { defineComponent as y, computed as f, createElementBlock as r, openBlock as i, createElementVNode as e, toDisplayString as l, Fragment as h, renderList as b, normalizeStyle as n } from "vue";
-const x = { style: { padding: "10px 15px" } }, _ = { style: {
+import { defineComponent as v, computed as y, createElementBlock as i, openBlock as l, createElementVNode as o, toDisplayString as n, Fragment as b, renderList as f, normalizeStyle as a } from "vue";
+const h = { style: { padding: "10px 15px" } }, B = { style: {
   color: "var(--tooltip-value-color)",
   textTransform: "capitalize",
-  borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
+  borderBottom: "borderBottom: 1px solid var(--tooltip-border-color)",
   marginBottom: "0.25rem",
   paddingBottom: "0.25rem"
-} }, T = /* @__PURE__ */ y({
+} }, F = /* @__PURE__ */ v({
   __name: "Tooltip",
   props: {
     data: {},
@@ -13,30 +13,30 @@ const x = { style: { padding: "10px 15px" } }, _ = { style: {
     toolTipTitle: {},
     yFormatter: { type: Function }
   },
-  setup(d) {
-    const a = d, m = ["_index", "_stacked", "_ending"], g = f(() => Object.entries(a.data ?? []).filter(
-      ([t, u]) => !m.includes(t) && Object.keys(a.categories).includes(t)
+  setup(t) {
+    const c = t, g = ["_index", "_stacked", "_ending"], p = y(() => Object.entries(c.data ?? []).filter(
+      ([r, u]) => !g.includes(r) && Object.keys(c.categories).includes(r)
     ));
-    return (t, u) => (i(), r("div", x, [
-      e("div", _, l(t.toolTipTitle), 1),
-      (i(!0), r(h, null, b(g.value, ([o, s], v) => {
-        var p, c;
-        return i(), r("div", {
-          key: o,
+    return (r, u) => (l(), i("div", h, [
+      o("div", B, n(t.toolTipTitle), 1),
+      (l(!0), i(b, null, f(p.value, ([e, s], x) => {
+        var d, m;
+        return l(), i("div", {
+          key: e,
           style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
         }, [
-          e("span", {
-            style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
-              backgroundColor: typeof ((p = t.categories[o]) == null ? void 0 : p.color) == "string" && ((c = t.categories[o]) != null && c.color) ? t.categories[o].color : `var(--vis-color${v})`
+          o("span", {
+            style: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
+              backgroundColor: typeof ((d = t.categories[e]) == null ? void 0 : d.color) == "string" && ((m = t.categories[e]) != null && m.color) ? t.categories[e].color : `var(--vis-color${x})`
             }])
           }, null, 4),
-          e("div", null, [
-            e("span", {
-              style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
-            }, l(t.categories[o].name) + ":", 1),
-            e("span", {
-              style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-            }, l(t.yFormatter ? t.yFormatter(s) : s), 1)
+          o("div", null, [
+            o("span", {
+              style: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+            }, n(t.categories[e].name) + ":", 1),
+            o("span", {
+              style: a([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
+            }, n(t.yFormatter ? t.yFormatter(s) : s), 1)
           ])
         ]);
       }), 128))
@@ -44,5 +44,5 @@ const x = { style: { padding: "10px 15px" } }, _ = { style: {
   }
 });
 export {
-  T as default
+  F as default
 };

package/dist/index.d.ts

@@ -1,9 +1,8 @@
 import { default as AreaChart } from './components/AreaChart/AreaChart.vue';
-import { default as AreaStackedChart } from './components/AreaStackedChart/AreaStackedChart.vue';
 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 { default as BubbleChart } from './components/BubbleChart/BubbleChart.vue';
 import { LegendPosition, CurveType, Orientation, BulletLegendItemInterface, MarkerConfig, CrosshairConfig } from './types';
-export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, BubbleChart, Orientation, CurveType, LegendPosition };
+export { AreaChart, LineChart, BarChart, DonutChart, BubbleChart, Orientation, CurveType, LegendPosition };
 export type { BulletLegendItemInterface, MarkerConfig, CrosshairConfig };

package/dist/index.js

@@ -1,18 +1,16 @@
-import { default as a } from "./components/AreaChart/AreaChart.js";
-import { default as o } from "./components/AreaStackedChart/AreaStackedChart.js";
-import { default as u } from "./components/LineChart/LineChart.js";
-import { default as p } from "./components/BarChart/BarChart.js";
-import { default as m } from "./components/DonutChart/DonutChart.js";
-import { default as x } from "./components/BubbleChart/BubbleChart.js";
-import { CurveType as h, LegendPosition as n, Orientation as i } from "./types.js";
+import { default as e } from "./components/AreaChart/AreaChart.js";
+import { default as o } from "./components/LineChart/LineChart.js";
+import { default as u } from "./components/BarChart/BarChart.js";
+import { default as d } from "./components/DonutChart/DonutChart.js";
+import { default as m } from "./components/BubbleChart/BubbleChart.js";
+import { CurveType as s, LegendPosition as x, Orientation as C } from "./types.js";
 export {
-  a as AreaChart,
-  o as AreaStackedChart,
-  p as BarChart,
-  x as BubbleChart,
-  h as CurveType,
-  m as DonutChart,
-  n as LegendPosition,
-  u as LineChart,
-  i as Orientation
+  e as AreaChart,
+  u as BarChart,
+  m as BubbleChart,
+  s as CurveType,
+  d as DonutChart,
+  x as LegendPosition,
+  o as LineChart,
+  C as Orientation
 };

package/dist/types.d.ts

@@ -4,8 +4,12 @@ import { LineChartProps } from './components/LineChart/types';
 import { DonutChartProps } from './components/DonutChart/types';
 import { BubbleChartProps } from './components/BubbleChart/types';
 declare enum LegendPosition {
-    Top = "top",
-    Bottom = "bottom"
+    TopLeft = "top-left",
+    TopCenter = "top-center",
+    TopRight = "top-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center",
+    BottomRight = "bottom-right"
 }
 declare enum CurveType {
     Basis = "basis",

package/dist/types.js

@@ -1,6 +1,6 @@
-var l = /* @__PURE__ */ ((a) => (a.Top = "top", a.Bottom = "bottom", a))(l || {}), o = /* @__PURE__ */ ((a) => (a.Basis = "basis", a.BasisClosed = "basisClosed", a.BasisOpen = "basisOpen", a.Bundle = "bundle", a.Cardinal = "cardinal", a.CardinalClosed = "cardinalClosed", a.CardinalOpen = "cardinalOpen", a.CatmullRom = "catmullRom", a.CatmullRomClosed = "catmullRomClosed", a.CatmullRomOpen = "catmullRomOpen", a.Linear = "linear", a.LinearClosed = "linearClosed", a.MonotoneX = "monotoneX", a.MonotoneY = "monotoneY", a.Natural = "natural", a.Step = "step", a.StepAfter = "stepAfter", a.StepBefore = "stepBefore", a))(o || {}), t = /* @__PURE__ */ ((a) => (a.Horizontal = "horizontal", a.Vertical = "vertical", a))(t || {});
+var o = /* @__PURE__ */ ((t) => (t.TopLeft = "top-left", t.TopCenter = "top-center", t.TopRight = "top-right", t.BottomLeft = "bottom-left", t.BottomCenter = "bottom-center", t.BottomRight = "bottom-right", t))(o || {}), a = /* @__PURE__ */ ((t) => (t.Basis = "basis", t.BasisClosed = "basisClosed", t.BasisOpen = "basisOpen", t.Bundle = "bundle", t.Cardinal = "cardinal", t.CardinalClosed = "cardinalClosed", t.CardinalOpen = "cardinalOpen", t.CatmullRom = "catmullRom", t.CatmullRomClosed = "catmullRomClosed", t.CatmullRomOpen = "catmullRomOpen", t.Linear = "linear", t.LinearClosed = "linearClosed", t.MonotoneX = "monotoneX", t.MonotoneY = "monotoneY", t.Natural = "natural", t.Step = "step", t.StepAfter = "stepAfter", t.StepBefore = "stepBefore", t))(a || {}), l = /* @__PURE__ */ ((t) => (t.Horizontal = "horizontal", t.Vertical = "vertical", t))(l || {});
 export {
-  o as CurveType,
-  l as LegendPosition,
-  t as Orientation
+  a as CurveType,
+  o as LegendPosition,
+  l as Orientation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.2.4",
+  "version": "0.2.5-test.2",
   "type": "module",
   "files": [
     "dist"

package/dist/components/AreaStackedChart/AreaStackedChart.js

@@ -1,77 +0,0 @@
-import { defineComponent as y, computed as f, createApp as h, createElementBlock as g, openBlock as a, createVNode as n, createElementVNode as B, unref as t, withCtx as L, createBlock as v, createCommentVNode as C, mergeProps as k } from "vue";
-import { VisXYContainer as b, VisArea as x, VisAxis as s, VisCrosshair as T, VisBulletLegend as V } from "@unovis/vue";
-import { CurveType as _ } from "@unovis/ts";
-import N from "../Tooltip.js";
-const A = { class: "flex flex-col space-y-4" }, j = { class: "flex items center justify-end" }, O = /* @__PURE__ */ y({
-  __name: "AreaStackedChart",
-  props: {
-    data: {},
-    height: {},
-    categories: {},
-    hideTooltip: { type: Boolean },
-    xLabel: {},
-    yLabel: {},
-    padding: {},
-    hideLegend: { type: Boolean },
-    xGridLine: { type: Boolean },
-    xDomainLine: { type: Boolean },
-    yGridLine: { type: Boolean },
-    yDomainLine: { type: Boolean },
-    xTickLine: { type: Boolean },
-    yTickLine: { type: Boolean },
-    crosshairConfig: {}
-  },
-  setup(c) {
-    const i = c, l = f(() => (e, m) => {
-      if (typeof window > "u" || typeof document > "u")
-        return "";
-      try {
-        const o = h(N, {
-          data: e,
-          categories: i.categories
-        }), r = document.createElement("div");
-        o.mount(r);
-        const u = r.innerHTML;
-        return o.unmount(), u;
-      } catch {
-        return "";
-      }
-    }), p = (e) => Number.parseInt(e.time), d = [(e) => e.firstTime, (e) => e.returning];
-    return (e, m) => (a(), g("div", A, [
-      n(t(b), {
-        data: e.data,
-        padding: e.padding,
-        height: e.height
-      }, {
-        default: L(() => [
-          n(t(x), {
-            x: p,
-            y: d,
-            color: Object.values(i.categories).map((o) => o.color),
-            "curve-type": t(_).Linear
-          }, null, 8, ["color", "curve-type"]),
-          n(t(s), {
-            type: "x",
-            label: "Time",
-            "num-ticks": 12
-          }),
-          n(t(s), {
-            type: "y",
-            label: "Number of visitors",
-            "num-ticks": 3
-          }),
-          e.hideTooltip ? C("", !0) : (a(), v(t(T), k({ key: 0 }, e.crosshairConfig, { template: l.value }), null, 16, ["template"]))
-        ]),
-        _: 1
-      }, 8, ["data", "padding", "height"]),
-      B("div", j, [
-        n(t(V), {
-          items: Object.values(e.categories)
-        }, null, 8, ["items"])
-      ])
-    ]));
-  }
-});
-export {
-  O as default
-};

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

@@ -1,14 +0,0 @@
-import { AreaStackedChartProps } from './types';
-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<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & AreaStackedChartProps<T> & Partial<{}>> & import('vue').PublicProps;
-    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {};
-    emit: {};
-}>) => import('vue').VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/components/AreaStackedChart/AreaStackedChart2.js

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

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

@@ -1,86 +0,0 @@
-import { BulletLegendItemInterface } from '@unovis/ts';
-export interface AreaStackedChartProps<T> {
-    /**
-     * The data to be displayed in the stacked area chart.
-     * Each element of the array represents a data point.
-     * The structure of 'T' should be compatible with the chart's rendering logic.
-     */
-    data: T[];
-    /**
-     * The height of the chart in pixels.
-     */
-    height: number;
-    /**
-     * A record mapping category keys to `BulletLegendItemInterface` objects.
-     * This defines the visual representation and labels for each category in the chart's legend.
-     */
-    categories: Record<string, BulletLegendItemInterface>;
-    /**
-     * If `true`, hides the chart tooltip.
-     */
-    hideTooltip?: boolean;
-    /**
-     * Optional label for the x-axis.
-     */
-    xLabel?: string;
-    /**
-     * Optional label for the y-axis.
-     */
-    yLabel?: string;
-    /**
-     * Optional padding applied to the chart.
-     * Allows specifying individual padding values for the top, right, bottom, and left sides.
-     */
-    padding?: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-    /**
-     * If `true`, hides the chart legend.
-     */
-    hideLegend?: boolean;
-    /**
-     * If `true`, displays grid lines along the x-axis.
-     */
-    xGridLine?: boolean;
-    /**
-     * If `true`, displays a domain line (axis line) along the x-axis.
-     */
-    xDomainLine?: boolean;
-    /**
-     * If `true`, displays grid lines along the y-axis.
-     */
-    yGridLine?: boolean;
-    /**
-     * If `true`, displays a domain line (axis line) along the y-axis.
-     */
-    yDomainLine?: boolean;
-    /**
-     * If `true`, displays tick lines on the x-axis.
-     */
-    xTickLine?: boolean;
-    /**
-     * If `true`, displays tick lines on the y-axis.
-     */
-    yTickLine?: boolean;
-    /**
-     * 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;
-    };
-}