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

package/dist/components/Timeline/Timeline.js

@@ -1,10 +1,10 @@
-import { defineComponent as L, useSlots as V, useTemplateRef as C, ref as _, computed as c, createElementBlock as u, openBlock as p, normalizeStyle as d, createVNode as i, createCommentVNode as g, createElementVNode as H, unref as o, withCtx as B, renderSlot as f } from "vue";
-import { Timeline as P } from "@unovis/ts";
-import { dateFormatter as S, getFirstPropertyValue as j } from "../../utils.js";
-import A from "../Tooltip.js";
-import { VisXYContainer as F, VisTimeline as $, VisTooltip as N, VisAxis as O, VisBulletLegend as E } from "@unovis/vue";
-import { LegendPosition as R } from "../../types.js";
-const G = /* @__PURE__ */ L({
+import { defineComponent as V, useSlots as B, useTemplateRef as w, ref as A, computed as s, createElementBlock as g, openBlock as m, normalizeStyle as c, createVNode as o, createCommentVNode as f, createElementVNode as H, unref as i, withCtx as P, mergeProps as F, renderSlot as h } from "vue";
+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";
+const I = /* @__PURE__ */ V({
   __name: "Timeline",
   props: {
     data: {},
@@ -16,105 +16,125 @@ const G = /* @__PURE__ */ L({
     length: {},
     type: {},
     getTooltipText: {},
+    xNumTicks: {},
     showLabels: { type: Boolean, default: !0 },
     hideTooltip: { type: Boolean, default: !1 },
     crosshairConfig: {},
     lineWidth: { default: 12 },
     rowHeight: { default: 24 },
-    legendPosition: { default: R.TopRight },
+    legendPosition: { default: G.TopRight },
     legendStyle: {},
-    hideLegend: { type: Boolean }
+    hideLegend: { type: Boolean },
+    xTickLine: { type: Boolean },
+    xTickFormat: {},
+    xMinMaxTicksOnly: { type: Boolean },
+    xTickValues: {},
+    xGridLine: { type: Boolean },
+    xDomainLine: { type: Boolean },
+    xAxisConfig: {},
+    yAxisConfig: {}
   },
   emits: ["click", "scroll", "labelHover"],
-  setup(h, { emit: m }) {
-    const e = h, n = m, y = V(), s = C("slotWrapper"), r = _(), v = c(() => e.legendPosition.startsWith("top")), T = c(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center"), b = { [P.selectors.label]: k };
-    function k(t) {
-      return r.value = t, n("labelHover", t), typeof window > "u" ? "" : s.value ? s.value.innerHTML : "";
+  setup(T, { emit: k }) {
+    const l = T, r = k, v = B(), d = w("slotWrapper"), n = A(), x = s(() => l.legendPosition.startsWith("top")), b = s(() => l.legendPosition.includes("left") ? "flex-start" : l.legendPosition.includes("right") ? "flex-end" : "center");
+    y.selectors.label + "";
+    function u(e) {
+      n.value = e, r("labelHover", e);
     }
-    function x(t, a, l) {
-      n("click", l, { index: a, item: t });
+    function L(e, a, t) {
+      r("click", t, { index: a, item: e });
     }
-    function W(t) {
-      n("scroll", t.deltaY);
+    function W(e) {
+      r("scroll", e.deltaY);
     }
-    const w = c(() => {
-      const t = Object.values(e.categories).map(
-        (a, l) => `var(--vis-color${l})`
+    const C = s(() => {
+      const e = Object.values(l.categories).map(
+        (a, t) => `var(--vis-color${t})`
       );
-      return Object.values(e.categories).map(
-        (a, l) => a.color ?? t[l]
+      return Object.values(l.categories).map(
+        (a, t) => a.color ?? e[t]
       );
     });
-    return (t, a) => (p(), u("div", {
-      style: d({
+    return (e, a) => (m(), g("div", {
+      style: c({
         display: "flex",
-        flexDirection: v.value ? "column-reverse" : "column",
+        flexDirection: x.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       })
     }, [
-      i(o(F), {
-        data: e.data,
-        height: e.height,
+      o(i(O), {
+        data: l.data,
+        height: l.height,
         onWheel: W
       }, {
-        default: B(() => [
-          i(o($), {
-            x: e.x,
-            length: e.length,
-            lineWidth: e.lineWidth,
-            rowHeight: e.rowHeight,
-            type: e.type,
-            color: w.value,
-            labelWidth: e.labelWidth,
-            showLabels: e.showLabels,
-            onClick: x
+        default: P(() => [
+          o(i($), {
+            x: l.x,
+            length: l.length,
+            lineWidth: l.lineWidth,
+            rowHeight: l.rowHeight,
+            type: l.type,
+            color: C.value,
+            labelWidth: l.labelWidth,
+            showLabels: l.showLabels,
+            onClick: L
           }, null, 8, ["x", "length", "lineWidth", "rowHeight", "type", "color", "labelWidth", "showLabels"]),
-          i(o(N), { triggers: b }),
-          i(o(O), {
+          o(i(D), {
+            triggers: {
+              [i(y).selectors.label]: (t) => {
+                var p;
+                return u(t), t ? (p = d.value) == null ? void 0 : p.innerHTML : "";
+              }
+            }
+          }, null, 8, ["triggers"]),
+          o(i(M), F({
             type: "x",
-            tickFormat: o(S),
-            numTicks: 10
-          }, null, 8, ["tickFormat"])
+            tickFormat: e.xTickFormat || i(S),
+            numTicks: e.xNumTicks,
+            "tick-line": e.xTickLine,
+            "grid-line": e.xGridLine,
+            "domain-line": e.xDomainLine
+          }, e.xAxisConfig), null, 16, ["tickFormat", "numTicks", "tick-line", "grid-line", "domain-line"])
         ]),
         _: 1
       }, 8, ["data", "height"]),
-      e.hideLegend ? g("", !0) : (p(), u("div", {
+      l.hideLegend ? f("", !0) : (m(), g("div", {
         key: 0,
-        style: d({
+        style: c({
           display: "flex",
-          justifyContent: T.value
+          justifyContent: b.value
         })
       }, [
-        i(o(E), {
-          style: d([
-            e.legendStyle,
+        o(i(E), {
+          style: c([
+            l.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: Object.values(e.categories).map((l) => ({
-            ...l,
-            color: Array.isArray(l.color) ? l.color[0] : l.color
+          items: Object.values(l.categories).map((t) => ({
+            ...t,
+            color: Array.isArray(t.color) ? t.color[0] : t.color
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
       H("div", {
         ref_key: "slotWrapper",
-        ref: s,
+        ref: d,
         style: { display: "none" }
       }, [
-        o(y).labelTooltip ? f(t.$slots, "labelTooltip", {
+        i(v).labelTooltip ? h(e.$slots, "labelTooltip", {
           key: 0,
-          values: r.value
-        }) : r.value ? f(t.$slots, "fallback", { key: 1 }, () => [
-          i(A, {
-            data: r.value,
-            categories: t.categories,
-            toolTipTitle: o(j)(r.value) ?? ""
+          values: n.value
+        }) : n.value ? h(e.$slots, "fallback", { key: 1 }, () => [
+          o(j, {
+            data: n.value,
+            categories: e.categories,
+            toolTipTitle: i(N)(n.value) ?? ""
           }, null, 8, ["data", "categories", "toolTipTitle"])
-        ]) : g("", !0)
+        ]) : f("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  G as default
+  I as default
 };

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

@@ -1,24 +1,116 @@
-import { BulletLegendItemInterface, CrosshairConfig, LegendPosition } from '../../types';
+import { BulletLegendItemInterface, CrosshairConfig, LegendPosition, AxisConfig } from '../../types';
 export interface TimelineLegendItem {
     name: string;
     color: string;
 }
-export interface TimelineProps<T extends Record<string, any>> {
+export interface TimelineProps<T> {
+    /**
+     * The data to be displayed in the timeline chart.
+     * Each element of the array represents a timeline event or item.
+     * The structure of 'T' should be compatible with the chart's rendering logic.
+     */
     data: T[];
+    /**
+     * The width of the label area in pixels.
+     * Default: 220
+     */
     labelWidth?: number;
+    /**
+     * The height of the chart in pixels.
+     */
     height?: number;
+    /**
+     * Optional title for the timeline chart.
+     */
     title?: string;
+    /**
+     * 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>;
+    /**
+     * Accessor function that returns the x-position (start time/value) for each timeline item.
+     * @param {T} d - The data item.
+     * @returns {number} The x-position value.
+     */
     x: (d: T) => number;
+    /**
+     * Accessor function that returns the length (duration) for each timeline item.
+     * @param {T} d - The data item.
+     * @returns {number} The length/duration value.
+     */
     length: (d: T) => number;
+    /**
+     * Accessor function that returns the type/category for each timeline item.
+     * This determines the color and style of the timeline bar.
+     * @param {T} d - The data item.
+     * @returns {string} The type/category identifier.
+     */
     type: (d: T) => string;
+    /**
+     * Optional custom tooltip text generator function.
+     * @param {string} label - The label of the item.
+     * @param {number} index - The index of the item in the data array.
+     * @param {T[]} data - The full data array.
+     * @returns {string} The formatted tooltip text.
+     */
     getTooltipText?: (label: string, index: number, data: T[]) => string;
+    /**
+     * The desired number of ticks on the x-axis.
+     */
+    xNumTicks?: number;
+    /**
+     * If `true`, displays labels for each timeline row.
+     * Default: true
+     */
     showLabels?: boolean;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
     hideTooltip?: boolean;
+    /**
+     * Crosshair configuration object for customizing the appearance of the crosshair line.
+     */
     crosshairConfig?: CrosshairConfig;
+    /**
+     * The width of the timeline bars in pixels.
+     * Default: 12
+     */
     lineWidth?: number;
+    /**
+     * The height of each row in the timeline in pixels.
+     * Default: 24
+     */
     rowHeight?: number;
+    /**
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
+     * Default: LegendPosition.TopRight
+     */
     legendPosition?: LegendPosition;
-    legendStyle?: Record<string, string>;
+    /**
+     * Optional style object for the legend container. Allows custom CSS styling.
+     */
+    legendStyle?: string | Record<string, string>;
+    /**
+     * If `true`, hides the chart legend.
+     */
     hideLegend?: boolean;
+    /**
+     * If `true`, displays tick lines on the x-axis.
+     */
+    xTickLine?: boolean;
+    xTickFormat?: (tick: number | Date, i?: number, ticks?: number[] | Date[]) => string;
+    xMinMaxTicksOnly?: boolean;
+    xTickValues?: number[] | Date[];
+    xGridLine?: boolean;
+    xDomainLine?: boolean;
+    /**
+   * 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/Tooltip.js

@@ -1,8 +1,8 @@
-import { defineComponent as y, computed as b, createElementBlock as r, openBlock as i, createElementVNode as e, toDisplayString as l, Fragment as f, renderList as h, normalizeStyle as n } from "vue";
-const x = { style: { padding: "10px 15px" } }, B = { style: {
+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: {
   color: "var(--tooltip-value-color)",
   textTransform: "capitalize",
-  borderBottom: "borderBottom: 1px solid var(--tooltip-border-color)",
+  borderBottom: "1px solid var(--tooltip-border-color)",
   marginBottom: "0.25rem",
   paddingBottom: "0.25rem"
 } }, T = /* @__PURE__ */ y({
@@ -14,12 +14,12 @@ const x = { style: { padding: "10px 15px" } }, B = { style: {
     yFormatter: { type: Function }
   },
   setup(d) {
-    const a = d, m = ["_index", "_stacked", "_ending"], g = b(() => Object.entries(a.data ?? []).filter(
+    const a = d, m = ["_index", "_stacked", "_ending"], g = f(() => Object.entries(a.data ?? []).filter(
       ([o, u]) => !m.includes(o) && Object.keys(a.categories).includes(o)
     ));
     return (o, u) => (i(), r("div", x, [
-      e("div", B, l(o.toolTipTitle), 1),
-      (i(!0), r(f, null, h(g.value, ([t, s], v) => {
+      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: t,

package/dist/types.d.ts

@@ -36,7 +36,6 @@ interface BulletLegendItemInterface {
     name: string | number;
     color?: string | Array<string>;
     className?: string;
-    shape?: any;
     inactive?: boolean;
     hidden?: boolean;
     pointer?: boolean;
@@ -47,6 +46,22 @@ declare enum Orientation {
 }
 export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, type BubbleChartProps, type TimelineProps, type TimelineLegendItem };
 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;
@@ -55,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/package.json

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