vue-chrts 0.2.5 → 1.0.0-test.2

package/dist/components/Tooltip.js

@@ -2,7 +2,7 @@ import { defineComponent as y, computed as f, createElementBlock as r, openBlock
 const x = { style: { padding: "10px 15px" } }, _ = { style: {
   color: "var(--tooltip-value-color)",
   textTransform: "capitalize",
-  borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
+  borderBottom: "1px solid var(--tooltip-border-color)",
   marginBottom: "0.25rem",
   paddingBottom: "0.25rem"
 } }, T = /* @__PURE__ */ y({
@@ -15,28 +15,28 @@ const x = { style: { padding: "10px 15px" } }, _ = { style: {
   },
   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)
+      ([o, u]) => !m.includes(o) && Object.keys(a.categories).includes(o)
     ));
-    return (t, u) => (i(), r("div", x, [
-      e("div", _, l(t.toolTipTitle), 1),
-      (i(!0), r(h, null, b(g.value, ([o, s], v) => {
+    return (o, u) => (i(), r("div", x, [
+      e("div", _, l(o.toolTipTitle), 1),
+      (i(!0), r(h, null, b(g.value, ([t, s], v) => {
         var p, c;
         return i(), r("div", {
-          key: o,
+          key: t,
           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})`
+              backgroundColor: typeof ((p = o.categories[t]) == null ? void 0 : p.color) == "string" && ((c = o.categories[t]) != null && c.color) ? o.categories[t].color : `var(--vis-color${v})`
             }])
           }, 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),
+            }, l(o.categories[t].name) + ":", 1),
             e("span", {
               style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-            }, l(t.yFormatter ? t.yFormatter(s) : s), 1)
+            }, l(o.yFormatter ? o.yFormatter(s) : s), 1)
           ])
         ]);
       }), 128))

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 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 { default as GanttChart } from './components/GanttChart/GanttChart.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, GanttChart, Orientation, CurveType, LegendPosition };
 export type { BulletLegendItemInterface, MarkerConfig, CrosshairConfig };

package/dist/index.js

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

package/dist/types.d.ts

@@ -3,9 +3,14 @@ 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 { GanttChartProps } from './components/GanttChart/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",
@@ -31,7 +36,6 @@ interface BulletLegendItemInterface {
     name: string | number;
     color?: string | Array<string>;
     className?: string;
-    shape?: any;
     inactive?: boolean;
     hidden?: boolean;
     pointer?: boolean;
@@ -40,8 +44,24 @@ declare enum Orientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
-export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, type BubbleChartProps };
+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;
+    tickTextFontSize?: string;
+    tickTextColor?: string;
+    tickFormat?: axisFormatter;
+    tickTextAlign?: "left" | "right" | "center";
+    tickTextAngle?: number;
+    tickTextWidth?: number;
+    tickTextFitMode?: "wrap" | "trim";
+    tickTextTrimType?: "start" | "middle" | "end";
+    tickTextForceWordBreak?: boolean;
+    tickTextSeparator?: string | readonly string[];
+    minMaxTicksOnly?: boolean;
+    minMaxTicksOnlyShowGridLines?: boolean;
+    tickValues?: readonly number[] | readonly Date[];
+}
 export interface MarkerConfig {
     type?: "circle" | "square" | "triangle" | "diamond";
     size?: number;
@@ -50,17 +70,7 @@ export interface MarkerConfig {
     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/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/dist/utils.d.ts

@@ -6,3 +6,4 @@ export declare function createMarkers(markerConfig: Record<string, MarkerConfig>
 export declare const flattenData: (data: any[], xAxis: string) => {
     month: any;
 }[];
+export declare const dateFormatter: (date: number) => string;

package/dist/utils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.2.5",
+  "version": "1.0.0-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;
-    };
-}