vue-chrts 0.2.2-test.1 → 0.2.2

package/dist/components/BubbleChart/BubbleChart.js

@@ -0,0 +1,145 @@
+import { defineComponent as z, useSlots as P, useTemplateRef as N, ref as O, computed as R, createElementBlock as c, openBlock as a, Fragment as j, createCommentVNode as r, createVNode as s, createElementVNode as w, unref as t, withCtx as D, createBlock as u, renderSlot as g } from "vue";
+import { Scatter as K, Position as M } from "@unovis/ts";
+import { VisBulletLegend as k, VisXYContainer as S, VisTooltip as E, VisScatter as G, VisAxis as x } from "@unovis/vue";
+import { LegendPosition as d } from "../../types.js";
+import { getFirstPropertyValue as $ } from "../../utils.js";
+import W from "../Tooltip.js";
+const X = {
+  key: 0,
+  class: "flex items-center justify-end pb-4"
+}, Y = {
+  key: 1,
+  class: "flex items-center justify-end pt-4"
+}, q = {
+  ref: "slotWrapper",
+  class: "hidden"
+}, ee = /* @__PURE__ */ z({
+  __name: "BubbleChart",
+  props: {
+    xAccessor: {},
+    yAccessor: {},
+    sizeAccessor: {},
+    labelPosition: {},
+    sizeRange: {},
+    opacity: {},
+    xExplicitTicks: { default: void 0 },
+    minMaxTicksOnly: { type: Boolean, default: !1 },
+    data: {},
+    hideLegend: { type: Boolean, default: !1 },
+    height: {},
+    xLabel: { default: "" },
+    yLabel: { default: "" },
+    padding: { default: () => ({ top: 5, right: 5, bottom: 5, left: 5 }) },
+    categories: {},
+    categoryKey: {},
+    xFormatter: {},
+    yFormatter: {},
+    legendPosition: { default: d.Bottom },
+    sizeOptions: {},
+    xDomainLine: { type: Boolean, default: !0 },
+    yDomainLine: { type: Boolean, default: !0 },
+    xTickLine: { type: Boolean, default: !0 },
+    yTickLine: { type: Boolean, default: !0 },
+    xGridLine: { type: Boolean, default: !1 },
+    yGridLine: { type: Boolean, default: !0 },
+    hideXAxis: { type: Boolean, default: !1 },
+    hideYAxis: { type: Boolean, default: !1 },
+    xNumTicks: { default: void 0 },
+    yNumTicks: { default: void 0 },
+    hideTooltip: { type: Boolean, default: !1 },
+    crosshairConfig: { default: () => ({
+      color: "#666"
+    }) }
+  },
+  emits: ["click"],
+  setup(L, { emit: h }) {
+    const e = L, T = P(), m = N("slotWrapper"), o = O(), y = R(() => e.categories && typeof e.categories == "object" && !Array.isArray(e.categories) ? Object.values(e.categories) : Array.isArray(e.categories) ? e.categories : []), b = e.xAccessor, B = e.yAccessor, v = e.sizeAccessor || ((i) => typeof i.comments == "number" ? i.comments : 1), A = (i) => {
+      var p, f;
+      if (!e.categories || !e.categoryKey)
+        return console.warn("BubbleChart: categories and categoryKey are required for color mapping"), "#cccccc";
+      const n = String(i[e.categoryKey]);
+      let l = (p = e.categories[n]) == null ? void 0 : p.color;
+      return Object.keys(e.categories).length === 1 && (l = (f = e.categories[e.categoryKey]) == null ? void 0 : f.color), l || (console.warn(`BubbleChart: No color defined for category "${n}"`), "#cccccc");
+    }, F = h;
+    function V(i) {
+      return o.value = i, C();
+    }
+    function C(i) {
+      return typeof window > "u" ? "" : m.value ? m.value.innerHTML : "";
+    }
+    const _ = {
+      [K.selectors.point]: V
+    };
+    return (i, n) => (a(), c(j, null, [
+      !e.hideLegend && e.legendPosition === t(d).Top ? (a(), c("div", X, [
+        s(t(k), { items: y.value }, null, 8, ["items"])
+      ])) : r("", !0),
+      s(t(S), {
+        data: e.data,
+        height: e.height || 600,
+        padding: e.padding,
+        scaleByDomain: !0,
+        onClick: n[0] || (n[0] = (l) => F("click", l, o.value))
+      }, {
+        default: D(() => [
+          e.hideTooltip ? r("", !0) : (a(), u(t(E), {
+            key: 0,
+            triggers: _
+          })),
+          s(t(G), {
+            x: t(b),
+            y: t(B),
+            color: A,
+            size: t(v),
+            labelPosition: e.labelPosition || t(M).Bottom,
+            sizeRange: e.sizeRange || [1, 20],
+            opacity: e.opacity,
+            cursor: "pointer"
+          }, null, 8, ["x", "y", "size", "labelPosition", "sizeRange", "opacity"]),
+          e.hideXAxis ? r("", !0) : (a(), u(t(x), {
+            key: 1,
+            type: "x",
+            label: e.xLabel,
+            tickFormat: e.xFormatter,
+            gridLine: e.xGridLine,
+            domainLine: !!e.xDomainLine,
+            tickLine: e.xTickLine,
+            numTicks: e.xNumTicks,
+            tickValues: e.xExplicitTicks,
+            minMaxTicksOnly: e.minMaxTicksOnly
+          }, null, 8, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "tickValues", "minMaxTicksOnly"])),
+          e.hideYAxis ? r("", !0) : (a(), u(t(x), {
+            key: 2,
+            type: "y",
+            label: e.yLabel,
+            tickFormat: e.yFormatter,
+            gridLine: e.yGridLine,
+            domainLine: !!e.yDomainLine,
+            tickLine: e.yTickLine,
+            numTicks: e.yNumTicks
+          }, null, 8, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks"]))
+        ]),
+        _: 1
+      }, 8, ["data", "height", "padding"]),
+      !e.hideLegend && e.legendPosition === t(d).Bottom ? (a(), c("div", Y, [
+        s(t(k), { items: y.value }, null, 8, ["items"])
+      ])) : r("", !0),
+      w("div", q, [
+        t(T).tooltip ? g(i.$slots, "tooltip", {
+          key: 0,
+          values: o.value
+        }) : o.value ? g(i.$slots, "fallback", { key: 1 }, () => [
+          s(W, {
+            data: o.value,
+            categories: e.categories || {},
+            toolTipTitle: t($)(o.value) ?? "",
+            yFormatter: e.yFormatter
+          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
+        ]) : r("", !0)
+      ], 512)
+    ], 64));
+  }
+});
+export {
+  ee as default
+};

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

@@ -0,0 +1,21 @@
+import { BubbleChartProps } from './types';
+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?: T | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & BubbleChartProps<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;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/BubbleChart/BubbleChart2.js

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

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

@@ -0,0 +1,162 @@
+import { axisFormatter, BulletLegendItemInterface, LegendPosition } from '../../types';
+import { NumericAccessor, Position } from '@unovis/ts';
+export type DataRecord = {
+    species: string;
+    island: string;
+    beakLength: number | undefined;
+    beakDepth: number | undefined;
+    flipperLength: number | undefined;
+    bodyMass: number | undefined;
+    sex: string;
+};
+/**
+ * Configuration for bubble sizes.
+ */
+export interface SizeOptions {
+    minRadius?: number;
+    maxRadius?: number;
+}
+export interface BubbleChartProps<T> {
+    /**
+     * Accessor for x value (index, property, etc). If not provided, defaults to d.beakLength.
+     */
+    xAccessor?: NumericAccessor<T>;
+    /**
+     * Accessor for y value. If not provided, defaults to d.flipperLength.
+     */
+    yAccessor?: NumericAccessor<T>;
+    /**
+     * Accessor for bubble size. If not provided, defaults to 1.
+     */
+    sizeAccessor?: NumericAccessor<T>;
+    /**
+     * Label position for bubbles (default: Position.Bottom)
+     */
+    labelPosition?: Position;
+    /**
+     * Range for bubble sizes (default: [1, 20])
+     */
+    sizeRange?: [number, number];
+    /**
+     * Opacity for bubbles
+     */
+    opacity?: number;
+    /**
+     * Explicit tick values for x axis
+     */
+    xExplicitTicks?: (number | string | Date)[];
+    /**
+     * Only show min/max ticks for x axis
+     */
+    minMaxTicksOnly?: boolean;
+    /**
+     * The data to be displayed in the bubble 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[];
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * 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.
+     * REQUIRED: Each unique value in your data's categoryKey field must have a corresponding entry with a color.
+     */
+    categories: Record<string, BulletLegendItemInterface>;
+    categoryKey: keyof T;
+    /**
+     * @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;
+    /**
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
+     */
+    legendPosition?: LegendPosition;
+    /** Options for controlling bubble sizes. */
+    sizeOptions?: SizeOptions;
+    /**
+     * If `true`, displays a domain line (axis line) along the x-axis.
+     */
+    xDomainLine?: 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`, displays grid lines along the x-axis.
+     */
+    xGridLine?: boolean;
+    /**
+     * If `true`, displays grid lines along the y-axis.
+     */
+    yGridLine?: boolean;
+    /**
+     * If `true`, hide the x-axis.
+     */
+    hideXAxis?: boolean;
+    /**
+     * If `true`, hide the y-axis.
+     */
+    hideYAxis?: boolean;
+    /**
+     * The desired number of ticks on the x-axis.
+     */
+    xNumTicks?: number;
+    /**
+     * The desired number of ticks on the y-axis.
+     */
+    yNumTicks?: number;
+    /**
+     * If `true`, hides the tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * Configuration for the crosshair behavior.
+     */
+    crosshairConfig?: {
+        color?: string;
+    };
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import { AreaChartProps } from './components/AreaChart/types';
 import { BarChartProps } from './components/BarChart/types';
 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"
@@ -39,7 +40,7 @@ declare enum Orientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
-export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, };
+export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, type BubbleChartProps };
 export type axisFormatter = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
 export interface MarkerConfig {
     type?: "circle" | "square" | "triangle" | "diamond";

package/package.json

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