vue-chrts 1.0.0-test.1 → 1.0.0-test.2

package/dist/components/DonutChart/DonutChart.js

@@ -1,12 +1,12 @@
-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 { 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 j } from "./types.js";
-import { VisSingleContainer as H, VisTooltip as N, VisDonut as $, VisBulletLegend as z } from "@unovis/vue";
+import { DonutType as z } from "./types.js";
+import { VisSingleContainer as H, VisTooltip as N, VisDonut as $, VisBulletLegend as j } from "@unovis/vue";
 import { LegendPosition as E } from "../../types.js";
-const O = {
+const M = { class: "absolute top-1/2 left-1/2 -translate-1/2" }, O = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, _ = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, G = /* @__PURE__ */ L({
+}, U = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, K = /* @__PURE__ */ T({
   __name: "DonutChart",
   props: {
     type: {},
@@ -21,95 +21,97 @@ const O = {
     padAngle: {}
   },
   emits: ["click"],
-  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;
+  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();
     }
-    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({
+    function w(e) {
+      return typeof window > "u" ? "" : g.value ? g.value.innerHTML : "";
+    }
+    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: S.value ? "column-reverse" : "column",
+        flexDirection: A.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: o[0] || (o[0] = (n) => h("click", n, l.value))
+      onClick: o[0] || (o[0] = (t) => C("click", t, r.value))
     }, [
-      s(r(H), {
+      a(l(H), {
         data: e.data,
         height: e.height,
         margin: {}
       }, {
-        default: W(() => [
-          s(r(N), {
+        default: _(() => [
+          a(l(N), {
             "horizontal-shift": 20,
             "vertical-shift": 20,
             triggers: {
-              [r(R).selectors.segment]: (n) => {
-                var p;
-                return A(n), n ? (p = C.value) == null ? void 0 : p.innerHTML : "";
-              }
+              [l(R).selectors.segment]: S
             }
           }, null, 8, ["triggers"]),
-          s(r($), {
+          a(l($), {
             value: V,
             "corner-radius": e.radius,
             "arc-width": e.arcWidth ?? 20,
-            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"])
+            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")
+          ])
         ]),
-        _: 1
+        _: 3
       }, 8, ["data", "height"]),
-      t.hideLegend ? f("", !0) : (m(), g("div", {
+      n.hideLegend ? v("", !0) : (m(), f("div", {
         key: 0,
-        style: a({
+        style: s({
           display: "flex",
           justifyContent: D.value
         })
       }, [
-        s(r(z), {
-          style: a([
-            t.legendStyle,
+        a(l(j), {
+          style: s([
+            n.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: x.value
+          items: u.value.map((t) => ({
+            ...t,
+            color: d(t.color)
+          }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      u(e.$slots, "default"),
-      d("div", O, [
-        r(k).tooltip ? u(e.$slots, "tooltip", {
+      i("div", O, [
+        l(k).tooltip ? p(e.$slots, "tooltip", {
           key: 0,
-          values: l.value
-        }) : 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: c.value[l.value.index]
-              })
-            }, null, 4),
-            d("div", null, w(l.value.data), 1)
-          ])
-        ]) : f("", !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: d((t = u.value[r.value.index]) == null ? void 0 : t.color)
+                })
+              }, null, 4),
+              i("div", null, b(r.value.data), 1)
+            ])
+          ];
+        }) : v("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  G as default
+  K as default
 };

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

@@ -1,5 +1,5 @@
 import { DonutChartProps } from './types';
-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<{
+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<{
     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/{Timeline/Timeline.js → GanttChart/GanttChart.js}

@@ -2,10 +2,10 @@ import { defineComponent as V, useSlots as B, useTemplateRef as w, ref as A, com
 import { Timeline as y } from "@unovis/ts";
 import { dateFormatter as S, getFirstPropertyValue as N } from "../../utils.js";
 import j from "../Tooltip.js";
-import { VisXYContainer as O, VisTimeline as $, VisTooltip as D, VisAxis as M, VisBulletLegend as E } from "@unovis/vue";
-import { LegendPosition as G } from "../../types.js";
+import { VisXYContainer as O, VisTimeline as $, VisTooltip as D, VisAxis as G, VisBulletLegend as M } from "@unovis/vue";
+import { LegendPosition as E } from "../../types.js";
 const I = /* @__PURE__ */ V({
-  __name: "Timeline",
+  __name: "GanttChart",
   props: {
     data: {},
     labelWidth: { default: 220 },
@@ -22,7 +22,7 @@ const I = /* @__PURE__ */ V({
     crosshairConfig: {},
     lineWidth: { default: 12 },
     rowHeight: { default: 24 },
-    legendPosition: { default: G.TopRight },
+    legendPosition: { default: E.TopRight },
     legendStyle: {},
     hideLegend: { type: Boolean },
     xTickLine: { type: Boolean },
@@ -44,10 +44,10 @@ const I = /* @__PURE__ */ V({
     function L(e, a, t) {
       r("click", t, { index: a, item: e });
     }
-    function W(e) {
+    function C(e) {
       r("scroll", e.deltaY);
     }
-    const C = s(() => {
+    const W = s(() => {
       const e = Object.values(l.categories).map(
         (a, t) => `var(--vis-color${t})`
       );
@@ -65,7 +65,7 @@ const I = /* @__PURE__ */ V({
       o(i(O), {
         data: l.data,
         height: l.height,
-        onWheel: W
+        onWheel: C
       }, {
         default: P(() => [
           o(i($), {
@@ -74,7 +74,7 @@ const I = /* @__PURE__ */ V({
             lineWidth: l.lineWidth,
             rowHeight: l.rowHeight,
             type: l.type,
-            color: C.value,
+            color: W.value,
             labelWidth: l.labelWidth,
             showLabels: l.showLabels,
             onClick: L
@@ -87,7 +87,7 @@ const I = /* @__PURE__ */ V({
               }
             }
           }, null, 8, ["triggers"]),
-          o(i(M), F({
+          o(i(G), F({
             type: "x",
             tickFormat: e.xTickFormat || i(S),
             numTicks: e.xNumTicks,
@@ -105,7 +105,7 @@ const I = /* @__PURE__ */ V({
           justifyContent: b.value
         })
       }, [
-        o(i(E), {
+        o(i(M), {
           style: c([
             l.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"

package/dist/components/{Timeline/Timeline.vue.d.ts → GanttChart/GanttChart.vue.d.ts}

@@ -1,4 +1,4 @@
-import { TimelineProps } from '../../types';
+import { GanttChartProps } from '../../types';
 export interface TimelineCategory {
     name: string;
     color?: string | string[];
@@ -11,7 +11,7 @@ declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable
         }) => any) | undefined;
         readonly onScroll?: ((distance: number) => any) | undefined;
         readonly onLabelHover?: ((item: T | undefined) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick" | "onScroll" | "onLabelHover"> & TimelineProps<T> & Partial<{}>> & import('vue').PublicProps;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick" | "onScroll" | "onLabelHover"> & GanttChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

package/dist/components/GanttChart/GanttChart2.js

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

package/dist/components/{Timeline → GanttChart}/types.d.ts

@@ -1,9 +1,5 @@
 import { BulletLegendItemInterface, CrosshairConfig, LegendPosition, AxisConfig } from '../../types';
-export interface TimelineLegendItem {
-    name: string;
-    color: string;
-}
-export interface TimelineProps<T> {
+export interface GanttChartProps<T> {
     /**
      * The data to be displayed in the timeline chart.
      * Each element of the array represents a timeline event or item.

package/dist/components/LineChart/LineChart.js

@@ -1,7 +1,6 @@
-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,
+import { defineComponent as t, useSlots as a, createBlock as r, openBlock as l, mergeProps as p, createSlots as s, withCtx as y, renderSlot as c, normalizeProps as m, guardReactiveProps as d } from "vue";
+import x from "../AreaChart/AreaChart.js";
+const u = /* @__PURE__ */ t({
   __name: "LineChart",
   props: {
     data: {},
@@ -38,18 +37,19 @@ const L = /* @__PURE__ */ a({
     yDomain: {},
     xDomain: {}
   },
-  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(x(t)))
-        ])
-      }))
+  setup(o) {
+    const i = o;
+    return a(), (e, h) => (l(), r(x, p(i, { "hide-area": !0 }), s({ _: 2 }, [
+      e.$slots.tooltip ? {
+        name: "tooltip",
+        fn: y((n) => [
+          c(e.$slots, "tooltip", m(d(n)))
+        ]),
+        key: "0"
+      } : void 0
     ]), 1040));
   }
 });
 export {
-  L as default
+  u as default
 };

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

@@ -3,7 +3,15 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     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: Partial<Record<number, (_: any) => any>>;
+    slots: Readonly<{
+        tooltip?: (props: {
+            values: T | undefined;
+        }) => any;
+    }> & {
+        tooltip?: (props: {
+            values: T | undefined;
+        }) => any;
+    };
     emit: {};
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,18 +1,18 @@
-import { default as t } from "./components/AreaChart/AreaChart.js";
+import { default as a } 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 m } from "./components/DonutChart/DonutChart.js";
-import { default as d } from "./components/BubbleChart/BubbleChart.js";
-import { default as n } from "./components/Timeline/Timeline.js";
-import { CurveType as x, LegendPosition as C, Orientation as h } from "./types.js";
+import { default as d } from "./components/DonutChart/DonutChart.js";
+import { default as m } from "./components/BubbleChart/BubbleChart.js";
+import { default as s } from "./components/GanttChart/GanttChart.js";
+import { CurveType as C, LegendPosition as h, Orientation as i } from "./types.js";
 export {
-  t as AreaChart,
+  a as AreaChart,
   u as BarChart,
-  d as BubbleChart,
-  x as CurveType,
-  m as DonutChart,
-  C as LegendPosition,
+  m as BubbleChart,
+  C as CurveType,
+  d as DonutChart,
+  s as GanttChart,
+  h as LegendPosition,
   o as LineChart,
-  h as Orientation,
-  n as Timeline
+  i as Orientation
 };

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import { BarChartProps } from './components/BarChart/types';
 import { LineChartProps } from './components/LineChart/types';
 import { DonutChartProps } from './components/DonutChart/types';
 import { BubbleChartProps } from './components/BubbleChart/types';
-import { TimelineProps, TimelineLegendItem } from './components/Timeline/types';
+import { GanttChartProps } from './components/GanttChart/types';
 declare enum LegendPosition {
     TopLeft = "top-left",
     TopCenter = "top-center",
@@ -44,7 +44,7 @@ declare enum Orientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
-export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, type BubbleChartProps, type TimelineProps, type TimelineLegendItem };
+export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, type BubbleChartProps, type GanttChartProps, };
 export type axisFormatter = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
 export interface AxisConfig {
     tickLine?: boolean;

package/package.json

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

package/dist/components/Timeline/Timeline2.js

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