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

package/dist/components/DonutChart/DonutChart.js

@@ -1,19 +1,12 @@
-import { defineComponent as V, useSlots as b, useTemplateRef as x, ref as w, createElementBlock as c, openBlock as m, Fragment as T, createElementVNode as a, createCommentVNode as g, createVNode as r, renderSlot as s, unref as n, withCtx as D, normalizeStyle as S, toDisplayString as W } from "vue";
-import { Donut as B } from "@unovis/ts";
-import { DonutType as L } from "./types.js";
-import { VisSingleContainer as R, VisTooltip as H, VisDonut as N, VisBulletLegend as $ } from "@unovis/vue";
-const j = {
+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 = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, z = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, A = {
-  key: 0,
-  style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: "1rem"
-  }
-}, U = /* @__PURE__ */ V({
+}, j = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, G = /* @__PURE__ */ x({
   __name: "DonutChart",
   props: {
     type: {},
@@ -22,78 +15,91 @@ const j = {
     height: {},
     radius: {},
     hideLegend: { type: Boolean },
+    legendPosition: { default: z.BottomCenter },
+    legendStyle: {},
     labels: {},
     padAngle: {}
   },
   emits: ["click"],
-  setup(t, { emit: p }) {
-    const f = p, i = t, h = b(), d = x("slotWrapper"), l = w(), y = (e) => e, v = i.type === L.Half;
-    function C(e) {
-      return l.value = e, k();
+  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();
     }
-    function k(e) {
+    function b(e) {
       return typeof window > "u" ? "" : d.value ? d.value.innerHTML : "";
     }
-    return (e, u) => (m(), c(T, null, [
-      a("div", {
-        style: {
+    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({
+        display: "flex",
+        flexDirection: S.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      }),
+      onClick: u[0] || (u[0] = (a) => v("click", a, l.value))
+    }, [
+      i(n(A), {
+        data: e.data,
+        height: e.height,
+        margin: {}
+      }, {
+        default: B(() => [
+          i(n(H), {
+            "horizontal-shift": 20,
+            "vertical-shift": 20,
+            triggers: {
+              [n(W).selectors.segment]: V
+            }
+          }, null, 8, ["triggers"]),
+          i(n(N), {
+            value: C,
+            "corner-radius": e.radius,
+            "arc-width": e.arcWidth ?? 20,
+            color: t.labels.map((a) => a.color),
+            "angle-range": k ? [-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", {
+        key: 0,
+        style: o({
           display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        onClick: u[0] || (u[0] = (o) => f("click", o, l.value))
+          justifyContent: w.value
+        })
       }, [
-        r(n(R), {
-          data: t.data,
-          height: t.height,
-          margin: {}
-        }, {
-          default: D(() => [
-            r(n(H), {
-              "horizontal-shift": 20,
-              "vertical-shift": 20,
-              triggers: {
-                [n(B).selectors.segment]: C
-              }
-            }, null, 8, ["triggers"]),
-            r(n(N), {
-              value: y,
-              "corner-radius": t.radius,
-              "arc-width": t.arcWidth ?? 20,
-              color: i.labels.map((o) => o.color),
-              "angle-range": v ? [-1.5707963267948966, 1.5707963267948966] : [],
-              "pad-angle": i.padAngle || 0
-            }, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
+        i(n($), {
+          style: o([
+            t.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          _: 1
-        }, 8, ["data", "height"]),
-        s(e.$slots, "default"),
-        a("div", j, [
-          n(h).tooltip ? s(e.$slots, "tooltip", {
-            key: 0,
-            values: l.value
-          }) : l.value ? s(e.$slots, "fallback", { key: 1 }, () => [
-            a("div", z, [
-              a("div", {
-                style: S({
-                  width: "0.5rem",
-                  height: "0.5rem",
-                  borderRadius: "9999px",
-                  marginRight: "0.5rem",
-                  backgroundColor: i.labels[l.value.index].color
-                })
-              }, null, 4),
-              a("div", null, W(l.value.data), 1)
-            ])
-          ]) : g("", !0)
-        ], 512)
-      ]),
-      t.hideLegend ? g("", !0) : (m(), c("div", A, [
-        r(n($), { items: t.labels }, null, 8, ["items"])
-      ]))
-    ], 64));
+          items: e.labels
+        }, null, 8, ["style", "items"])
+      ], 4)),
+      s(e.$slots, "default"),
+      r("div", E, [
+        n(y).tooltip ? s(e.$slots, "tooltip", {
+          key: 0,
+          values: l.value
+        }) : l.value ? s(e.$slots, "fallback", { key: 1 }, () => [
+          r("div", j, [
+            r("div", {
+              style: o({
+                width: "0.5rem",
+                height: "0.5rem",
+                borderRadius: "9999px",
+                marginRight: "0.5rem",
+                backgroundColor: t.labels[l.value.index].color
+              })
+            }, null, 4),
+            r("div", null, P(l.value.data), 1)
+          ])
+        ]) : f("", !0)
+      ], 512)
+    ], 4));
   }
 });
 export {
-  U as default
+  G as default
 };

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

@@ -1,3 +1,4 @@
+import { LegendPosition } from '../../types';
 export type DonutChartProps = {
     /**
      * The type of donut chart to render.
@@ -25,6 +26,15 @@ export type DonutChartProps = {
      * If `true`, hides the chart legend.
      */
     hideLegend?: boolean;
+    /**
+   * 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.
      */

package/dist/components/LineChart/LineChart.js

@@ -1,158 +1,53 @@
-import { defineComponent as N, computed as u, useSlots as O, useTemplateRef as W, ref as j, createElementBlock as y, openBlock as a, normalizeClass as w, normalizeStyle as g, createVNode as c, createCommentVNode as r, createElementVNode as M, unref as i, withCtx as S, createBlock as d, Fragment as z, renderList as E, mergeProps as G, renderSlot as h } from "vue";
-import { Position as v, CurveType as X } from "@unovis/ts";
-import { createMarkers as $, getFirstPropertyValue as R } from "../../utils.js";
-import Y from "../Tooltip.js";
-import { VisXYContainer as H, VisTooltip as U, VisLine as q, VisAxis as x, VisCrosshair as I, VisBulletLegend as J } from "@unovis/vue";
-import { LegendPosition as Q } from "../../types.js";
-const Z = {
-  ref: "slotWrapper",
-  style: { display: "none" }
-}, le = /* @__PURE__ */ N({
+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({
+  inheritAttrs: !1,
   __name: "LineChart",
   props: {
     data: {},
     height: {},
     xLabel: {},
     yLabel: {},
-    padding: { default: () => ({
-      top: 5,
-      right: 5,
-      bottom: 5,
-      left: 5
-    }) },
+    padding: {},
     categories: {},
     markerConfig: {},
-    xFormatter: {},
-    yFormatter: {},
+    xFormatter: { type: Function },
+    yFormatter: { type: Function },
     curveType: {},
-    lineWidth: { default: 2 },
+    lineWidth: {},
     lineDashArray: {},
-    xNumTicks: { default: (e) => e.data.length > 24 ? 24 / 4 : e.data.length - 1 },
+    xNumTicks: {},
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (e) => e.data.length > 24 ? 24 / 4 : e.data.length - 1 },
+    yNumTicks: {},
+    hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
-    hideLegend: { type: Boolean, default: !1 },
-    legendPosition: { default: Q.BottomCenter },
-    legendStyle: { default: void 0 },
-    xGridLine: { type: Boolean },
+    legendPosition: {},
+    legendStyle: {},
     xDomainLine: { type: Boolean },
-    yGridLine: { type: Boolean },
     yDomainLine: { type: Boolean },
     xTickLine: { type: Boolean },
     yTickLine: { type: Boolean },
+    xGridLine: { type: Boolean },
+    yGridLine: { type: Boolean },
     hideXAxis: { type: Boolean },
     hideYAxis: { type: Boolean },
-    crosshairConfig: { default: () => ({
-      color: "#666"
-    }) },
+    crosshairConfig: {},
     yDomain: {},
     xDomain: {}
   },
-  emits: ["click"],
-  setup(e, { emit: T }) {
-    const L = T, t = e, D = u(() => t.markerConfig ? $(t.markerConfig) : ""), C = O(), f = W("slotWrapper"), o = j();
-    function p(n) {
-      return typeof window > "u" ? "" : f.value ? f.value.innerHTML : "";
-    }
-    function B(n) {
-      return o.value = n, p();
-    }
-    const b = u(() => t.legendPosition.startsWith("top")), A = u(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), V = Object.values(t.categories).map(
-      (n, s) => `var(--vis-color${s})`
-    ), F = (n) => Object.values(t.categories)[n].color ?? V[n];
-    return (n, s) => (a(), y("div", {
-      style: g({
-        display: "flex",
-        flexDirection: b.value ? "column-reverse" : "column",
-        gap: "var(--vis-legend-spacing)"
-      }),
-      class: w({ markers: !!t.markerConfig }),
-      onClick: s[0] || (s[0] = (l) => L("click", l, o.value))
-    }, [
-      c(i(H), {
-        data: e.data,
-        padding: e.padding,
-        height: e.height,
-        svgDefs: D.value,
-        yDomain: e.yDomain,
-        xDomain: e.xDomain
-      }, {
-        default: S(() => [
-          c(i(U), {
-            "horizontal-placement": i(v).Right,
-            "vertical-placement": i(v).Top
-          }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (a(!0), y(z, null, E(Object.keys(t.categories), (l, m) => (a(), d(i(q), {
-            key: m,
-            x: (k, P) => P,
-            y: (k) => k[l],
-            color: F(m),
-            "curve-type": e.curveType ?? i(X).MonotoneX,
-            "line-width": e.lineWidth,
-            lineDashArray: e.lineDashArray ? e.lineDashArray[m] : void 0
-          }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
-          e.hideXAxis ? r("", !0) : (a(), d(i(x), {
-            key: 0,
-            type: "x",
-            "tick-format": e.xFormatter,
-            label: e.xLabel,
-            "label-margin": 8,
-            "domain-line": e.xDomainLine,
-            "grid-line": e.xGridLine,
-            "tick-line": e.xTickLine,
-            "num-ticks": e.xNumTicks,
-            "tick-values": e.xExplicitTicks,
-            "min-max-ticks-only": e.minMaxTicksOnly
-          }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"])),
-          e.hideYAxis ? r("", !0) : (a(), d(i(x), {
-            key: 1,
-            type: "y",
-            "tick-format": e.yFormatter,
-            label: e.yLabel,
-            "num-ticks": e.yNumTicks,
-            "domain-line": e.yDomainLine,
-            "grid-line": e.yGridLine,
-            "tick-line": e.yTickLine
-          }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
-          e.hideTooltip ? r("", !0) : (a(), d(i(I), G({ key: 2 }, e.crosshairConfig, { template: B }), null, 16))
-        ]),
-        _: 1
-      }, 8, ["data", "padding", "height", "svgDefs", "yDomain", "xDomain"]),
-      t.hideLegend ? r("", !0) : (a(), y("div", {
-        key: 0,
-        style: g({
-          display: "flex",
-          justifyContent: A.value
-        })
-      }, [
-        c(i(J), {
-          style: g([
-            t.legendStyle,
-            "display: flex; gap: var(--vis-legend-spacing);"
-          ]),
-          items: Object.values(t.categories).map((l) => ({
-            ...l,
-            color: Array.isArray(l.color) ? l.color[0] : l.color
-          }))
-        }, null, 8, ["style", "items"])
-      ], 4)),
-      M("div", Z, [
-        i(C).tooltip ? h(n.$slots, "tooltip", {
-          key: 0,
-          values: o.value
-        }) : o.value ? h(n.$slots, "fallback", { key: 1 }, () => [
-          c(Y, {
-            data: o.value,
-            categories: e.categories,
-            toolTipTitle: i(R)(o.value) ?? "",
-            yFormatter: t.yFormatter
-          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : r("", !0)
-      ], 512)
-    ], 6));
+  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) => ({
+        name: o,
+        fn: c((t) => [
+          m(e.$slots, o, d(h(t)))
+        ])
+      }))
+    ]), 1040));
   }
 });
 export {
-  le as default
+  g as default
 };

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,144 +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;
-    /**
-     * Optional style object for the legend container. Allows custom CSS styling.
-     */
-    legendStyle?: string | Record<string, string>;
-    /**
-     * 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/Timeline/Timeline.js

@@ -0,0 +1,120 @@
+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({
+  __name: "Timeline",
+  props: {
+    data: {},
+    labelWidth: { default: 220 },
+    height: {},
+    title: { default: "" },
+    categories: {},
+    x: {},
+    length: {},
+    type: {},
+    getTooltipText: {},
+    showLabels: { type: Boolean, default: !0 },
+    hideTooltip: { type: Boolean, default: !1 },
+    crosshairConfig: {},
+    lineWidth: { default: 12 },
+    rowHeight: { default: 24 },
+    legendPosition: { default: R.TopRight },
+    legendStyle: {},
+    hideLegend: { type: Boolean }
+  },
+  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 : "";
+    }
+    function x(t, a, l) {
+      n("click", l, { index: a, item: t });
+    }
+    function W(t) {
+      n("scroll", t.deltaY);
+    }
+    const w = c(() => {
+      const t = Object.values(e.categories).map(
+        (a, l) => `var(--vis-color${l})`
+      );
+      return Object.values(e.categories).map(
+        (a, l) => a.color ?? t[l]
+      );
+    });
+    return (t, a) => (p(), u("div", {
+      style: d({
+        display: "flex",
+        flexDirection: v.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      })
+    }, [
+      i(o(F), {
+        data: e.data,
+        height: e.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
+          }, null, 8, ["x", "length", "lineWidth", "rowHeight", "type", "color", "labelWidth", "showLabels"]),
+          i(o(N), { triggers: b }),
+          i(o(O), {
+            type: "x",
+            tickFormat: o(S),
+            numTicks: 10
+          }, null, 8, ["tickFormat"])
+        ]),
+        _: 1
+      }, 8, ["data", "height"]),
+      e.hideLegend ? g("", !0) : (p(), u("div", {
+        key: 0,
+        style: d({
+          display: "flex",
+          justifyContent: T.value
+        })
+      }, [
+        i(o(E), {
+          style: d([
+            e.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
+          }))
+        }, null, 8, ["style", "items"])
+      ], 4)),
+      H("div", {
+        ref_key: "slotWrapper",
+        ref: s,
+        style: { display: "none" }
+      }, [
+        o(y).labelTooltip ? f(t.$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) ?? ""
+          }, null, 8, ["data", "categories", "toolTipTitle"])
+        ]) : g("", !0)
+      ], 512)
+    ], 4));
+  }
+});
+export {
+  G as default
+};