vue-chrts 0.0.162 → 0.0.164

package/dist/components/Area/AreaChart.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@unovis/ts"),n=require("@unovis/vue"),g=require("../Tooltip.cjs"),y={key:0,class:"flex items center justify-end"},k=e.defineComponent({__name:"AreaChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{},yFormatter:{},curveType:{},xNumTicks:{default:r=>r.data.length>24?24/4:r.data.length-1},yNumTicks:{default:r=>r.data.length>24?24/4:r.data.length-1},hideLegend:{type:Boolean},hideTooltip:{type:Boolean},gridLineX:{type:Boolean},domainLineX:{type:Boolean},gridLineY:{type:Boolean},domainLineY:{type:Boolean},paginationPoisition:{}},setup(r){const l=r,s=Object.values(l.categories).map(t=>t.color),p=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const o=e.createApp(g.default,{data:t,categories:l.categories}),i=document.createElement("div");o.mount(i);const a=i.innerHTML;return o.unmount(),a}catch{return""}});function m(t){var o;return{y:i=>Number(i[t]),color:((o=l.categories[t])==null?void 0:o.color)??"#3b82f6"}}const f=s.map((t,o)=>`
+  <linearGradient id="gradient${o}-${t}" gradientTransform="rotate(90)">
+    <stop offset="0%" stop-color="${t}" stop-opacity="1" />
+    <stop offset="100%" stop-color="${t}" stop-opacity="0" />
+  </linearGradient>
+`).join("");return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col space-y-4",{"flex-col-reverse":l.paginationPoisition==="top"}])},[e.createVNode(e.unref(n.VisXYContainer),{data:t.data,height:t.height,"svg-defs":e.unref(f)},{default:e.withCtx(()=>[t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(n.VisTooltip),{key:0,"horizontal-placement":e.unref(c.Position).Right,"vertical-placement":e.unref(c.Position).Top},null,8,["horizontal-placement","vertical-placement"])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(l.categories),(i,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:a},[e.createVNode(e.unref(n.VisArea),e.mergeProps({x:(u,d)=>d,ref_for:!0},m(i),{color:`url(#gradient${a}-${e.unref(s)[a]})`,opacity:.5,"curve-type":t.curveType??e.unref(c.CurveType).MonotoneX}),null,16,["x","color","curve-type"]),e.createVNode(e.unref(n.VisLine),{x:(u,d)=>d,y:u=>u[i],color:e.unref(s)[a],"curve-type":t.curveType??e.unref(c.CurveType).MonotoneX},null,8,["x","y","color","curve-type"])],64))),128)),e.createVNode(e.unref(n.VisAxis),{type:"x","tick-format":t.xFormatter,"num-ticks":t.xNumTicks,label:t.xLabel,"grid-line":t.gridLineX,"domain-line":t.domainLineX,"tick-line":!!t.gridLineX},null,8,["tick-format","num-ticks","label","grid-line","domain-line","tick-line"]),e.createVNode(e.unref(n.VisAxis),{type:"y","num-ticks":t.yNumTicks??t.data.length,"tick-format":t.yFormatter,label:t.yLabel,"grid-line":t.gridLineY,"domain-line":t.domainLineY,"tick-line":!!t.gridLineY},null,8,["num-ticks","tick-format","label","grid-line","domain-line","tick-line"]),t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(n.VisCrosshair),{key:1,color:"#666",template:p.value},null,8,["template"]))]),_:1},8,["data","height","svg-defs"]),t.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",y,[e.createVNode(e.unref(n.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])]))],2))}});exports.default=k;
+//# sourceMappingURL=AreaChart.cjs.map

package/dist/components/Area/AreaChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.cjs","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport type { BulletLegendItemInterface, NumericAccessor } from \"@unovis/ts\";\nimport { CurveType, Position } from \"@unovis/ts\";\nimport {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype AreaChartProps<T> = {\n  data: T[];\n  height: number;\n  xLabel?: string;\n  yLabel?: string;\n  categories: Record<string, BulletLegendItemInterface>;\n  xFormatter: (i: number, idx: number) => string;\n  yFormatter?: (i: number, idx?: number) => string | number;\n  curveType?: CurveType;\n  xNumTicks?: number;\n  yNumTicks?: number;\n  hideLegend?: boolean;\n  hideTooltip?: boolean;\n  gridLineX?: boolean;\n  domainLineX?: boolean;\n  gridLineY?: boolean;\n  domainLineY?: boolean;\n  paginationPoisition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n  xNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n  yNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return '';\n  }\n  \n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return '';\n  }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n  return {\n    y: (d: T) => Number(d[id as keyof typeof d]),\n    color: props.categories[id]?.color ?? \"#3b82f6\",\n  };\n}\n\nconst svgDefs = colors\n  .map(\n    (color, index) => `\n  <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n    <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n    <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n  </linearGradient>\n`\n  )\n  .join(\"\");\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col space-y-4\"\n    :class=\"{\n      'flex-col-reverse': props.paginationPoisition === 'top',\n    }\"\n  >\n    <VisXYContainer :data=\"data\" :height=\"height\" :svg-defs=\"svgDefs\">\n      <VisTooltip\n        v-if=\"!hideTooltip\"\n        :horizontal-placement=\"Position.Right\"\n        :vertical-placement=\"Position.Top\"\n      />\n      <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n        <VisArea\n          :x=\"(_: T, i: number) => i\"\n          v-bind=\"accessors(i)\"\n          :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n          :opacity=\"0.5\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"colors[iKey]\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n\n      <VisAxis\n        type=\"x\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks\"\n        :label=\"xLabel\"\n        :grid-line=\"gridLineX\"\n        :domain-line=\"domainLineX\"\n        :tick-line=\"!!gridLineX\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks ?? data.length\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :grid-line=\"gridLineY\"\n        :domain-line=\"domainLineY\"\n        :tick-line=\"!!gridLineY\"\n      />\n      <VisCrosshair\n        v-if=\"!hideTooltip\"\n        color=\"#666\"\n        :template=\"generateTooltip\"\n      />\n    </VisXYContainer>\n    <div v-if=\"!hideLegend\" class=\"flex items center justify-end\">\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index"],"mappings":"osBAqCA,MAAMA,EAAQC,EAORC,EAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAKG,GAAMA,EAAE,KAAK,EAE3DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAED,SAASC,EAAUC,EAAsD,OAChE,MAAA,CACL,EAAIP,GAAS,OAAOA,EAAEO,CAAoB,CAAC,EAC3C,QAAOC,EAAAd,EAAM,WAAWa,CAAE,IAAnB,YAAAC,EAAsB,QAAS,SACxC,CAAA,CAGF,MAAMC,EAAUb,EACb,IACC,CAACc,EAAOC,IAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA,CAAA,EAIxC,KAAK,EAAE"}

package/dist/components/Area/AreaChart.js

@@ -0,0 +1,129 @@
+import { defineComponent as b, computed as B, createApp as V, createElementBlock as c, openBlock as a, normalizeClass as C, createVNode as l, createCommentVNode as u, unref as t, withCtx as X, createBlock as g, Fragment as f, renderList as N, mergeProps as $ } from "vue";
+import { Position as y, CurveType as h } from "@unovis/ts";
+import { VisXYContainer as Y, VisTooltip as j, VisArea as F, VisLine as A, VisAxis as k, VisCrosshair as P, VisBulletLegend as w } from "@unovis/vue";
+import z from "../Tooltip.js";
+const M = {
+  key: 0,
+  class: "flex items center justify-end"
+}, H = /* @__PURE__ */ b({
+  __name: "AreaChart",
+  props: {
+    data: {},
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    categories: {},
+    xFormatter: {},
+    yFormatter: {},
+    curveType: {},
+    xNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
+    yNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
+    hideLegend: { type: Boolean },
+    hideTooltip: { type: Boolean },
+    gridLineX: { type: Boolean },
+    domainLineX: { type: Boolean },
+    gridLineY: { type: Boolean },
+    domainLineY: { type: Boolean },
+    paginationPoisition: {}
+  },
+  setup(i) {
+    const s = i, d = Object.values(s.categories).map((e) => e.color), v = B(() => (e) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const o = V(z, {
+          data: e,
+          categories: s.categories
+        }), n = document.createElement("div");
+        o.mount(n);
+        const r = n.innerHTML;
+        return o.unmount(), r;
+      } catch {
+        return "";
+      }
+    });
+    function L(e) {
+      var o;
+      return {
+        y: (n) => Number(n[e]),
+        color: ((o = s.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
+      };
+    }
+    const T = d.map(
+      (e, o) => `
+  <linearGradient id="gradient${o}-${e}" gradientTransform="rotate(90)">
+    <stop offset="0%" stop-color="${e}" stop-opacity="1" />
+    <stop offset="100%" stop-color="${e}" stop-opacity="0" />
+  </linearGradient>
+`
+    ).join("");
+    return (e, o) => (a(), c("div", {
+      class: C(["flex flex-col space-y-4", {
+        "flex-col-reverse": s.paginationPoisition === "top"
+      }])
+    }, [
+      l(t(Y), {
+        data: e.data,
+        height: e.height,
+        "svg-defs": t(T)
+      }, {
+        default: X(() => [
+          e.hideTooltip ? u("", !0) : (a(), g(t(j), {
+            key: 0,
+            "horizontal-placement": t(y).Right,
+            "vertical-placement": t(y).Top
+          }, null, 8, ["horizontal-placement", "vertical-placement"])),
+          (a(!0), c(f, null, N(Object.keys(s.categories), (n, r) => (a(), c(f, { key: r }, [
+            l(t(F), $({
+              x: (m, p) => p,
+              ref_for: !0
+            }, L(n), {
+              color: `url(#gradient${r}-${t(d)[r]})`,
+              opacity: 0.5,
+              "curve-type": e.curveType ?? t(h).MonotoneX
+            }), null, 16, ["x", "color", "curve-type"]),
+            l(t(A), {
+              x: (m, p) => p,
+              y: (m) => m[n],
+              color: t(d)[r],
+              "curve-type": e.curveType ?? t(h).MonotoneX
+            }, null, 8, ["x", "y", "color", "curve-type"])
+          ], 64))), 128)),
+          l(t(k), {
+            type: "x",
+            "tick-format": e.xFormatter,
+            "num-ticks": e.xNumTicks,
+            label: e.xLabel,
+            "grid-line": e.gridLineX,
+            "domain-line": e.domainLineX,
+            "tick-line": !!e.gridLineX
+          }, null, 8, ["tick-format", "num-ticks", "label", "grid-line", "domain-line", "tick-line"]),
+          l(t(k), {
+            type: "y",
+            "num-ticks": e.yNumTicks ?? e.data.length,
+            "tick-format": e.yFormatter,
+            label: e.yLabel,
+            "grid-line": e.gridLineY,
+            "domain-line": e.domainLineY,
+            "tick-line": !!e.gridLineY
+          }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
+          e.hideTooltip ? u("", !0) : (a(), g(t(P), {
+            key: 1,
+            color: "#666",
+            template: v.value
+          }, null, 8, ["template"]))
+        ]),
+        _: 1
+      }, 8, ["data", "height", "svg-defs"]),
+      e.hideLegend ? u("", !0) : (a(), c("div", M, [
+        l(t(w), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
+      ]))
+    ], 2));
+  }
+});
+export {
+  H as default
+};
+//# sourceMappingURL=AreaChart.js.map

package/dist/components/Area/AreaChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.js","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport type { BulletLegendItemInterface, NumericAccessor } from \"@unovis/ts\";\nimport { CurveType, Position } from \"@unovis/ts\";\nimport {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype AreaChartProps<T> = {\n  data: T[];\n  height: number;\n  xLabel?: string;\n  yLabel?: string;\n  categories: Record<string, BulletLegendItemInterface>;\n  xFormatter: (i: number, idx: number) => string;\n  yFormatter?: (i: number, idx?: number) => string | number;\n  curveType?: CurveType;\n  xNumTicks?: number;\n  yNumTicks?: number;\n  hideLegend?: boolean;\n  hideTooltip?: boolean;\n  gridLineX?: boolean;\n  domainLineX?: boolean;\n  gridLineY?: boolean;\n  domainLineY?: boolean;\n  paginationPoisition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n  xNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n  yNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return '';\n  }\n  \n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return '';\n  }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n  return {\n    y: (d: T) => Number(d[id as keyof typeof d]),\n    color: props.categories[id]?.color ?? \"#3b82f6\",\n  };\n}\n\nconst svgDefs = colors\n  .map(\n    (color, index) => `\n  <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n    <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n    <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n  </linearGradient>\n`\n  )\n  .join(\"\");\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col space-y-4\"\n    :class=\"{\n      'flex-col-reverse': props.paginationPoisition === 'top',\n    }\"\n  >\n    <VisXYContainer :data=\"data\" :height=\"height\" :svg-defs=\"svgDefs\">\n      <VisTooltip\n        v-if=\"!hideTooltip\"\n        :horizontal-placement=\"Position.Right\"\n        :vertical-placement=\"Position.Top\"\n      />\n      <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n        <VisArea\n          :x=\"(_: T, i: number) => i\"\n          v-bind=\"accessors(i)\"\n          :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n          :opacity=\"0.5\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"colors[iKey]\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n\n      <VisAxis\n        type=\"x\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks\"\n        :label=\"xLabel\"\n        :grid-line=\"gridLineX\"\n        :domain-line=\"domainLineX\"\n        :tick-line=\"!!gridLineX\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks ?? data.length\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :grid-line=\"gridLineY\"\n        :domain-line=\"domainLineY\"\n        :tick-line=\"!!gridLineY\"\n      />\n      <VisCrosshair\n        v-if=\"!hideTooltip\"\n        color=\"#666\"\n        :template=\"generateTooltip\"\n      />\n    </VisXYContainer>\n    <div v-if=\"!hideLegend\" class=\"flex items center justify-end\">\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,UAAMA,IAAQC,GAORC,IAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAI,CAACG,MAAMA,EAAE,KAAK,GAE3DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYN,EAAM;AAAA,QAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD;AAED,aAASC,EAAUC,GAAsD;;AAChE,aAAA;AAAA,QACL,GAAG,CAACP,MAAS,OAAOA,EAAEO,CAAoB,CAAC;AAAA,QAC3C,SAAOC,IAAAd,EAAM,WAAWa,CAAE,MAAnB,gBAAAC,EAAsB,UAAS;AAAA,MACxC;AAAA,IAAA;AAGF,UAAMC,IAAUb,EACb;AAAA,MACC,CAACc,GAAOC,MAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA;AAAA,IAAA,EAIxC,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Area/AreaChart.vue.d.ts

@@ -0,0 +1,36 @@
+import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
+import { PaginationPosition } from '../../types';
+
+declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
+        data: T[];
+        height: number;
+        xLabel?: string;
+        yLabel?: string;
+        categories: Record<string, BulletLegendItemInterface>;
+        xFormatter: (i: number, idx: number) => string;
+        yFormatter?: (i: number, idx?: number) => string | number;
+        curveType?: CurveType;
+        xNumTicks?: number;
+        yNumTicks?: number;
+        hideLegend?: boolean;
+        hideTooltip?: boolean;
+        gridLineX?: boolean;
+        domainLineX?: boolean;
+        gridLineY?: boolean;
+        domainLineY?: boolean;
+        paginationPoisition?: PaginationPosition;
+    }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ReturnType<() => {}>;
+    emit: typeof __VLS_emit;
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/Area/AreaChart2.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./AreaChart.cjs");exports.default=e.default;
+//# sourceMappingURL=AreaChart2.cjs.map

package/dist/components/Area/AreaChart2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Area/AreaChart2.js

@@ -0,0 +1,5 @@
+import f from "./AreaChart.js";
+export {
+  f as default
+};
+//# sourceMappingURL=AreaChart2.js.map

package/dist/components/Area/AreaChart2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Area/index.d.ts

@@ -0,0 +1 @@
+export { default as AreaChart } from './AreaChart.vue';

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

@@ -0,0 +1,84 @@
+import { PaginationPosition } from '../../types';
+import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
+
+export type AreaChartProps<T> = {
+    /**
+     * The data to be displayed in the 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;
+    /**
+     * Optional label for the x-axis.
+     */
+    xLabel?: string;
+    /**
+     * Optional label for the y-axis.
+     */
+    yLabel?: 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>;
+    /**
+     * A function that formats the x-axis tick labels.
+     * @param i The value to be formatted.
+     * @param idx The index of the data point.
+     * @returns The formatted x-axis label.
+     */
+    xFormatter: (i: number, idx: number) => string;
+    /**
+     * An optional function that formats the y-axis tick labels.
+     * @param i The value to be formatted.
+     * @param idx The index of the data point (optional).
+     * @returns The formatted y-axis label or value.
+     */
+    yFormatter?: (i: number, idx?: number) => string | number;
+    /**
+     * The type of curve to use for the area chart lines.
+     * See `CurveType` for available options.
+     */
+    curveType?: CurveType;
+    /**
+     * 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 chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * If `true`, displays grid lines along the x-axis.
+     */
+    gridLineX?: boolean;
+    /**
+     * If `true`, displays a domain line (axis line) along the x-axis.
+     */
+    domainLineX?: boolean;
+    /**
+     * If `true`, displays grid lines along the y-axis.
+     */
+    gridLineY?: boolean;
+    /**
+     * If `true`, displays a domain line (axis line) along the y-axis.
+     */
+    domainLineY?: boolean;
+    /**
+     * Optional position for pagination controls, if applicable.
+     * See `PaginationPosition` for available options.
+     */
+    paginationPoisition?: PaginationPosition;
+};

package/dist/components/AreaStacked/AreaStackedChart.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("@unovis/vue"),d=require("@unovis/ts"),p=require("../Tooltip.cjs"),m={class:"flex flex-col space-y-4"},f={class:"flex items center justify-end"},_=e.defineComponent({__name:"AreaStackedChart",props:{data:{},categories:{},hideTooltip:{type:Boolean}},setup(c){const a=c,i=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const o=e.createApp(p.default,{data:t,categories:a.categories}),n=document.createElement("div");o.mount(n);const l=n.innerHTML;return o.unmount(),l}catch{return""}}),s=t=>Number.parseInt(t.time),u=[t=>t.firstTime,t=>t.returning];return(t,o)=>(e.openBlock(),e.createElementBlock("div",m,[e.createVNode(e.unref(r.VisXYContainer),{data:t.data,height:200},{default:e.withCtx(()=>[e.createVNode(e.unref(r.VisArea),{x:s,y:u,color:Object.values(a.categories).map(n=>n.color),"curve-type":e.unref(d.CurveType).Linear},null,8,["color","curve-type"]),e.createVNode(e.unref(r.VisAxis),{type:"x",label:"Time","num-ticks":12}),e.createVNode(e.unref(r.VisAxis),{type:"y",label:"Number of visitors","num-ticks":3}),t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(r.VisCrosshair),{key:0,color:"#666",template:i.value},null,8,["template"]))]),_:1},8,["data"]),e.createElementVNode("div",f,[e.createVNode(e.unref(r.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])]))}});exports.default=_;
+//# sourceMappingURL=AreaStackedChart.cjs.map

package/dist/components/AreaStacked/AreaStackedChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaStackedChart.cjs","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport {\n  VisXYContainer,\n  VisAxis,\n  VisArea,\n  VisBulletLegend,\n  VisCrosshair,\n} from \"@unovis/vue\";\nimport { BulletLegendItemInterface, CurveType } from \"@unovis/ts\";\nimport Tooltip from \"./../Tooltip.vue\";\nimport { computed, createApp } from \"vue\";\n\nexport type AreaStackedChartProps<T> = {\n  data: T[];\n  categories: Record<string, BulletLegendItemInterface>;\n  hideTooltip?: boolean;\n};\n\nconst props = defineProps<AreaStackedChartProps<T>>();\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return '';\n  }\n  \n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return '';\n  }\n});\n\nconst x = (d: any) => {\n  return Number.parseInt(d.time);\n};\nconst y = [(d: any) => d.firstTime, (d: any) => d.returning];\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-4\">\n    <VisXYContainer :data=\"data\" :height=\"200\">\n      <VisArea\n        :x=\"x\"\n        :y=\"y\"\n        :color=\"Object.values(props.categories).map((i) => i.color)\"\n        :curve-type=\"CurveType.Linear\"\n      />\n      <VisAxis type=\"x\" label=\"Time\" :num-ticks=\"12\" />\n      <VisAxis type=\"y\" label=\"Number of visitors\" :num-ticks=\"3\" />\n      <VisCrosshair\n        v-if=\"!hideTooltip\"\n        color=\"#666\"\n        :template=\"generateTooltip\"\n      />\n    </VisXYContainer>\n    <div class=\"flex items center justify-end\">\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","generateTooltip","computed","d","app","createApp","Tooltip","container","html","x","y"],"mappings":"+YAkBA,MAAMA,EAAQC,EAERC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYJ,EAAM,UAAA,CACnB,EAEKQ,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAEKC,EAAKN,GACF,OAAO,SAASA,EAAE,IAAI,EAEzBO,EAAI,CAAEP,GAAWA,EAAE,UAAYA,GAAWA,EAAE,SAAS"}

package/dist/components/AreaStacked/AreaStackedChart.js

@@ -0,0 +1,69 @@
+import { defineComponent as d, computed as f, createApp as y, createElementBlock as h, openBlock as i, createVNode as o, createElementVNode as v, unref as t, withCtx as _, createBlock as g, createCommentVNode as V } from "vue";
+import { VisXYContainer as k, VisArea as C, VisAxis as c, VisCrosshair as T, VisBulletLegend as b } from "@unovis/vue";
+import { CurveType as x } from "@unovis/ts";
+import B from "../Tooltip.js";
+const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center justify-end" }, O = /* @__PURE__ */ d({
+  __name: "AreaStackedChart",
+  props: {
+    data: {},
+    categories: {},
+    hideTooltip: { type: Boolean }
+  },
+  setup(s) {
+    const a = s, l = f(() => (e) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const r = y(B, {
+          data: e,
+          categories: a.categories
+        }), n = document.createElement("div");
+        r.mount(n);
+        const p = n.innerHTML;
+        return r.unmount(), p;
+      } catch {
+        return "";
+      }
+    }), m = (e) => Number.parseInt(e.time), u = [(e) => e.firstTime, (e) => e.returning];
+    return (e, r) => (i(), h("div", N, [
+      o(t(k), {
+        data: e.data,
+        height: 200
+      }, {
+        default: _(() => [
+          o(t(C), {
+            x: m,
+            y: u,
+            color: Object.values(a.categories).map((n) => n.color),
+            "curve-type": t(x).Linear
+          }, null, 8, ["color", "curve-type"]),
+          o(t(c), {
+            type: "x",
+            label: "Time",
+            "num-ticks": 12
+          }),
+          o(t(c), {
+            type: "y",
+            label: "Number of visitors",
+            "num-ticks": 3
+          }),
+          e.hideTooltip ? V("", !0) : (i(), g(t(T), {
+            key: 0,
+            color: "#666",
+            template: l.value
+          }, null, 8, ["template"]))
+        ]),
+        _: 1
+      }, 8, ["data"]),
+      v("div", A, [
+        o(t(b), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
+      ])
+    ]));
+  }
+});
+export {
+  O as default
+};
+//# sourceMappingURL=AreaStackedChart.js.map

package/dist/components/AreaStacked/AreaStackedChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaStackedChart.js","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport {\n  VisXYContainer,\n  VisAxis,\n  VisArea,\n  VisBulletLegend,\n  VisCrosshair,\n} from \"@unovis/vue\";\nimport { BulletLegendItemInterface, CurveType } from \"@unovis/ts\";\nimport Tooltip from \"./../Tooltip.vue\";\nimport { computed, createApp } from \"vue\";\n\nexport type AreaStackedChartProps<T> = {\n  data: T[];\n  categories: Record<string, BulletLegendItemInterface>;\n  hideTooltip?: boolean;\n};\n\nconst props = defineProps<AreaStackedChartProps<T>>();\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return '';\n  }\n  \n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return '';\n  }\n});\n\nconst x = (d: any) => {\n  return Number.parseInt(d.time);\n};\nconst y = [(d: any) => d.firstTime, (d: any) => d.returning];\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-4\">\n    <VisXYContainer :data=\"data\" :height=\"200\">\n      <VisArea\n        :x=\"x\"\n        :y=\"y\"\n        :color=\"Object.values(props.categories).map((i) => i.color)\"\n        :curve-type=\"CurveType.Linear\"\n      />\n      <VisAxis type=\"x\" label=\"Time\" :num-ticks=\"12\" />\n      <VisAxis type=\"y\" label=\"Number of visitors\" :num-ticks=\"3\" />\n      <VisCrosshair\n        v-if=\"!hideTooltip\"\n        color=\"#666\"\n        :template=\"generateTooltip\"\n      />\n    </VisXYContainer>\n    <div class=\"flex items center justify-end\">\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","generateTooltip","computed","d","app","createApp","Tooltip","container","html","x","y"],"mappings":";;;;;;;;;;;;AAkBA,UAAMA,IAAQC,GAERC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYJ,EAAM;AAAA,QAAA,CACnB,GAEKQ,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD,GAEKC,IAAI,CAACN,MACF,OAAO,SAASA,EAAE,IAAI,GAEzBO,IAAI,CAAC,CAACP,MAAWA,EAAE,WAAW,CAACA,MAAWA,EAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/AreaStacked/AreaStackedChart.vue.d.ts

@@ -0,0 +1,19 @@
+import { BulletLegendItemInterface } from '@unovis/ts';
+
+export type AreaStackedChartProps<T> = {
+    data: T[];
+    categories: Record<string, BulletLegendItemInterface>;
+    hideTooltip?: boolean;
+};
+declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & AreaStackedChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ReturnType<() => {}>;
+    emit: typeof __VLS_emit;
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;

package/dist/components/AreaStacked/AreaStackedChart2.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./AreaStackedChart.cjs");exports.default=e.default;
+//# sourceMappingURL=AreaStackedChart2.cjs.map

package/dist/components/AreaStacked/AreaStackedChart2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaStackedChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/AreaStacked/AreaStackedChart2.js

@@ -0,0 +1,5 @@
+import f from "./AreaStackedChart.js";
+export {
+  f as default
+};
+//# sourceMappingURL=AreaStackedChart2.js.map

package/dist/components/AreaStacked/AreaStackedChart2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaStackedChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/AreaStacked/index.d.ts

@@ -0,0 +1 @@
+export { default as AreaStackedChart } from './AreaStackedChart.vue';

package/dist/components/Bar/BarChart.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("@unovis/ts"),r=require("@unovis/vue"),f=require("../Tooltip.cjs"),p=require("../../types.cjs"),m=e.defineComponent({__name:"BarChart",props:{data:{},stacked:{type:Boolean},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{},yFormatter:{},yNumTicks:{},xNumTicks:{},yAxis:{},groupPadding:{},barPadding:{},radius:{},hideLegend:{type:Boolean},orientation:{default:t.Orientation.Vertical},paginationPosition:{default:p.PaginationPosition.Bottom}},setup(g){const o=g,d=e.computed(()=>o.yAxis.map(n=>a=>a[n])),s=(n,a)=>Object.values(o.categories)[a].color,u=e.computed(()=>n=>{if(typeof window>"u"||typeof document>"u")return"";try{const a=e.createApp(f.default,{data:n,categories:o.categories}),l=document.createElement("div");a.mount(l);const i=l.innerHTML;return a.unmount(),i}catch{return""}}),c=e.computed(()=>o.paginationPosition===p.PaginationPosition.Top);return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col space-y-4",{"flex-col-reverse":c.value}])},[e.createVNode(e.unref(r.VisXYContainer),{height:n.height},{default:e.withCtx(()=>[e.createVNode(e.unref(r.VisTooltip),{triggers:{[e.unref(t.GroupedBar).selectors.bar]:u.value,[e.unref(t.StackedBar).selectors.bar]:u.value}},null,8,["triggers"]),n.stacked?(e.openBlock(),e.createBlock(e.unref(r.VisStackedBar),{key:1,data:n.data,x:(l,i)=>i,y:d.value,"grid-line":!1,"domain-line":!1,color:s,"rounded-corners":n.radius??0,"group-padding":n.groupPadding??0,"bar-padding":n.barPadding??.2,orientation:n.orientation??e.unref(t.Orientation).Vertical},null,8,["data","x","y","rounded-corners","group-padding","bar-padding","orientation"])):(e.openBlock(),e.createBlock(e.unref(r.VisGroupedBar),{key:0,data:n.data,x:(l,i)=>i,y:d.value,"grid-line":!1,"domain-line":!1,color:s,"rounded-corners":n.radius??0,"group-padding":n.groupPadding??0,"bar-padding":n.barPadding??.2,orientation:n.orientation??e.unref(t.Orientation).Vertical},null,8,["data","x","y","rounded-corners","group-padding","bar-padding","orientation"])),e.createVNode(e.unref(r.VisAxis),{type:"x",label:n.xLabel,"grid-line":!1,"domain-line":!1,"tick-format":n.xFormatter,"num-ticks":n.xNumTicks,"tick-line":!1},null,8,["label","tick-format","num-ticks"]),e.createVNode(e.unref(r.VisAxis),{type:"y",label:n.yLabel,"grid-line":n.orientation!==e.unref(t.Orientation).Horizontal,"domain-line":!1,"tick-format":n.yFormatter},null,8,["label","grid-line","tick-format"])]),_:1},8,["height"]),n.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items center justify-end",{"pb-4":c.value}])},[e.createVNode(e.unref(r.VisBulletLegend),{items:Object.values(n.categories)},null,8,["items"])],2))],2))}});exports.default=m;
+//# sourceMappingURL=BarChart.cjs.map

package/dist/components/Bar/BarChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.cjs","sources":["../../../src/components/Bar/BarChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, ComputedRef, createApp } from \"vue\";\nimport { BulletLegendItemInterface, GroupedBar, Orientation, StackedBar } from \"@unovis/ts\";\n\nimport {\n  VisAxis,\n  VisBulletLegend,\n  VisGroupedBar,\n  VisStackedBar,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype BarChartProps<T> = {\n  data: T[];\n  stacked?: boolean;\n  height: number;\n  xLabel?: string;\n  yLabel?: string;\n  categories: Record<string, BulletLegendItemInterface>;\n  xFormatter: (i: number, idx?: number) => string | number;\n  yFormatter?: (i: number, idx?: number) => string | number;\n  yNumTicks?: number;\n  xNumTicks?: number;\n  yAxis: (keyof T)[];\n  groupPadding?: number;\n  barPadding?: number;\n  radius?: number;\n  hideLegend?: boolean;\n  orientation?: Orientation;\n  paginationPosition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<BarChartProps<T>>(), {\n  orientation: Orientation.Vertical,\n  paginationPosition: PaginationPosition.Bottom,\n});\n\nconst yAxis: ComputedRef<((d: T) => T[keyof T])[]> = computed(() => {\n  return props.yAxis.map((key) => (d: T) => {\n    return d[key];\n  });\n});\n\nconst color = (_: T, i: number) => Object.values(props.categories)[i].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return '';\n  }\n  \n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return '';\n  }\n});\n\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col space-y-4\"\n    :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n  >\n    <VisXYContainer :height=\"height\">\n      <VisTooltip\n        :triggers=\"{\n          [GroupedBar.selectors.bar]: generateTooltip,\n          [StackedBar.selectors.bar]: generateTooltip,\n        }\"\n      />\n\n      <VisGroupedBar\n        v-if=\"!stacked\"\n        :data=\"data\"\n        :x=\"(_: T, i: number) => i\"\n        :y=\"yAxis\"\n        :grid-line=\"false\"\n        :domain-line=\"false\"\n        :color=\"color\"\n        :rounded-corners=\"radius ?? 0\"\n        :group-padding=\"groupPadding ?? 0\"\n        :bar-padding=\"barPadding ?? 0.2\"\n        :orientation=\"orientation ?? Orientation.Vertical\"\n      />\n      <VisStackedBar\n        v-else\n        :data=\"data\"\n        :x=\"(_: T, i: number) => i\"\n        :y=\"yAxis\"\n        :grid-line=\"false\"\n        :domain-line=\"false\"\n        :color=\"color\"\n        :rounded-corners=\"radius ?? 0\"\n        :group-padding=\"groupPadding ?? 0\"\n        :bar-padding=\"barPadding ?? 0.2\"\n        :orientation=\"orientation ?? Orientation.Vertical\"\n      />\n      <VisAxis\n        type=\"x\"\n        :label=\"xLabel\"\n        :grid-line=\"false\"\n        :domain-line=\"false\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks\"\n        :tick-line=\"false\"\n      />\n      <VisAxis\n        type=\"y\"\n        :label=\"yLabel\"\n        :grid-line=\"orientation !== Orientation.Horizontal\"\n        :domain-line=\"false\"\n        :tick-format=\"yFormatter\"\n      />\n    </VisXYContainer>\n    <div\n      v-if=\"!hideLegend\"\n      class=\"flex items center justify-end\"\n      :class=\"{ 'pb-4': PaginationPositionTop }\"\n    >\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","yAxis","computed","key","d","color","_","i","generateTooltip","app","createApp","Tooltip","container","html","PaginationPositionTop","PaginationPosition"],"mappings":"ulBAoCA,MAAMA,EAAQC,EAKRC,EAA+CC,EAAAA,SAAS,IACrDH,EAAM,MAAM,IAAKI,GAASC,GACxBA,EAAED,CAAG,CACb,CACF,EAEKE,EAAQ,CAACC,EAAMC,IAAc,OAAO,OAAOR,EAAM,UAAU,EAAEQ,CAAC,EAAE,MAEhEC,EAAkBN,EAAAA,SAAS,IAAOE,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAK,EAAMC,YAAUC,UAAS,CAC7B,KAAMP,EACN,WAAYL,EAAM,UAAA,CACnB,EAEKa,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAEKC,EAAwBZ,EAAA,SAC5B,IAAMH,EAAM,qBAAuBgB,qBAAmB,GACxD"}

package/dist/components/Bar/BarChart.js

@@ -0,0 +1,114 @@
+import { defineComponent as v, computed as s, createApp as B, createElementBlock as m, openBlock as d, normalizeClass as f, createVNode as o, createCommentVNode as P, unref as a, withCtx as V, createBlock as y } from "vue";
+import { Orientation as l, StackedBar as L, GroupedBar as T } from "@unovis/ts";
+import { VisXYContainer as C, VisTooltip as A, VisGroupedBar as N, VisStackedBar as F, VisAxis as b, VisBulletLegend as j } from "@unovis/vue";
+import w from "../Tooltip.js";
+import { PaginationPosition as k } from "../../types.js";
+const H = /* @__PURE__ */ v({
+  __name: "BarChart",
+  props: {
+    data: {},
+    stacked: { type: Boolean },
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    categories: {},
+    xFormatter: {},
+    yFormatter: {},
+    yNumTicks: {},
+    xNumTicks: {},
+    yAxis: {},
+    groupPadding: {},
+    barPadding: {},
+    radius: {},
+    hideLegend: { type: Boolean },
+    orientation: { default: l.Vertical },
+    paginationPosition: { default: k.Bottom }
+  },
+  setup(h) {
+    const n = h, u = s(() => n.yAxis.map((e) => (i) => i[e])), p = (e, i) => Object.values(n.categories)[i].color, c = s(() => (e) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const i = B(w, {
+          data: e,
+          categories: n.categories
+        }), t = document.createElement("div");
+        i.mount(t);
+        const r = t.innerHTML;
+        return i.unmount(), r;
+      } catch {
+        return "";
+      }
+    }), g = s(
+      () => n.paginationPosition === k.Top
+    );
+    return (e, i) => (d(), m("div", {
+      class: f(["flex flex-col space-y-4", { "flex-col-reverse": g.value }])
+    }, [
+      o(a(C), { height: e.height }, {
+        default: V(() => [
+          o(a(A), {
+            triggers: {
+              [a(T).selectors.bar]: c.value,
+              [a(L).selectors.bar]: c.value
+            }
+          }, null, 8, ["triggers"]),
+          e.stacked ? (d(), y(a(F), {
+            key: 1,
+            data: e.data,
+            x: (t, r) => r,
+            y: u.value,
+            "grid-line": !1,
+            "domain-line": !1,
+            color: p,
+            "rounded-corners": e.radius ?? 0,
+            "group-padding": e.groupPadding ?? 0,
+            "bar-padding": e.barPadding ?? 0.2,
+            orientation: e.orientation ?? a(l).Vertical
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), y(a(N), {
+            key: 0,
+            data: e.data,
+            x: (t, r) => r,
+            y: u.value,
+            "grid-line": !1,
+            "domain-line": !1,
+            color: p,
+            "rounded-corners": e.radius ?? 0,
+            "group-padding": e.groupPadding ?? 0,
+            "bar-padding": e.barPadding ?? 0.2,
+            orientation: e.orientation ?? a(l).Vertical
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
+          o(a(b), {
+            type: "x",
+            label: e.xLabel,
+            "grid-line": !1,
+            "domain-line": !1,
+            "tick-format": e.xFormatter,
+            "num-ticks": e.xNumTicks,
+            "tick-line": !1
+          }, null, 8, ["label", "tick-format", "num-ticks"]),
+          o(a(b), {
+            type: "y",
+            label: e.yLabel,
+            "grid-line": e.orientation !== a(l).Horizontal,
+            "domain-line": !1,
+            "tick-format": e.yFormatter
+          }, null, 8, ["label", "grid-line", "tick-format"])
+        ]),
+        _: 1
+      }, 8, ["height"]),
+      e.hideLegend ? P("", !0) : (d(), m("div", {
+        key: 0,
+        class: f(["flex items center justify-end", { "pb-4": g.value }])
+      }, [
+        o(a(j), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
+      ], 2))
+    ], 2));
+  }
+});
+export {
+  H as default
+};
+//# sourceMappingURL=BarChart.js.map

package/dist/components/Bar/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","sources":["../../../src/components/Bar/BarChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, ComputedRef, createApp } from \"vue\";\nimport { BulletLegendItemInterface, GroupedBar, Orientation, StackedBar } from \"@unovis/ts\";\n\nimport {\n  VisAxis,\n  VisBulletLegend,\n  VisGroupedBar,\n  VisStackedBar,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype BarChartProps<T> = {\n  data: T[];\n  stacked?: boolean;\n  height: number;\n  xLabel?: string;\n  yLabel?: string;\n  categories: Record<string, BulletLegendItemInterface>;\n  xFormatter: (i: number, idx?: number) => string | number;\n  yFormatter?: (i: number, idx?: number) => string | number;\n  yNumTicks?: number;\n  xNumTicks?: number;\n  yAxis: (keyof T)[];\n  groupPadding?: number;\n  barPadding?: number;\n  radius?: number;\n  hideLegend?: boolean;\n  orientation?: Orientation;\n  paginationPosition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<BarChartProps<T>>(), {\n  orientation: Orientation.Vertical,\n  paginationPosition: PaginationPosition.Bottom,\n});\n\nconst yAxis: ComputedRef<((d: T) => T[keyof T])[]> = computed(() => {\n  return props.yAxis.map((key) => (d: T) => {\n    return d[key];\n  });\n});\n\nconst color = (_: T, i: number) => Object.values(props.categories)[i].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return '';\n  }\n  \n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return '';\n  }\n});\n\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col space-y-4\"\n    :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n  >\n    <VisXYContainer :height=\"height\">\n      <VisTooltip\n        :triggers=\"{\n          [GroupedBar.selectors.bar]: generateTooltip,\n          [StackedBar.selectors.bar]: generateTooltip,\n        }\"\n      />\n\n      <VisGroupedBar\n        v-if=\"!stacked\"\n        :data=\"data\"\n        :x=\"(_: T, i: number) => i\"\n        :y=\"yAxis\"\n        :grid-line=\"false\"\n        :domain-line=\"false\"\n        :color=\"color\"\n        :rounded-corners=\"radius ?? 0\"\n        :group-padding=\"groupPadding ?? 0\"\n        :bar-padding=\"barPadding ?? 0.2\"\n        :orientation=\"orientation ?? Orientation.Vertical\"\n      />\n      <VisStackedBar\n        v-else\n        :data=\"data\"\n        :x=\"(_: T, i: number) => i\"\n        :y=\"yAxis\"\n        :grid-line=\"false\"\n        :domain-line=\"false\"\n        :color=\"color\"\n        :rounded-corners=\"radius ?? 0\"\n        :group-padding=\"groupPadding ?? 0\"\n        :bar-padding=\"barPadding ?? 0.2\"\n        :orientation=\"orientation ?? Orientation.Vertical\"\n      />\n      <VisAxis\n        type=\"x\"\n        :label=\"xLabel\"\n        :grid-line=\"false\"\n        :domain-line=\"false\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks\"\n        :tick-line=\"false\"\n      />\n      <VisAxis\n        type=\"y\"\n        :label=\"yLabel\"\n        :grid-line=\"orientation !== Orientation.Horizontal\"\n        :domain-line=\"false\"\n        :tick-format=\"yFormatter\"\n      />\n    </VisXYContainer>\n    <div\n      v-if=\"!hideLegend\"\n      class=\"flex items center justify-end\"\n      :class=\"{ 'pb-4': PaginationPositionTop }\"\n    >\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","yAxis","computed","key","d","color","_","generateTooltip","app","createApp","Tooltip","container","html","PaginationPositionTop","PaginationPosition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,UAAMA,IAAQC,GAKRC,IAA+CC,EAAS,MACrDH,EAAM,MAAM,IAAI,CAACI,MAAQ,CAACC,MACxBA,EAAED,CAAG,CACb,CACF,GAEKE,IAAQ,CAACC,GAAM,MAAc,OAAO,OAAOP,EAAM,UAAU,EAAE,CAAC,EAAE,OAEhEQ,IAAkBL,EAAS,MAAM,CAACE,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAI,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMN;AAAA,UACN,YAAYL,EAAM;AAAA,QAAA,CACnB,GAEKY,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD,GAEKC,IAAwBX;AAAA,MAC5B,MAAMH,EAAM,uBAAuBe,EAAmB;AAAA,IACxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Bar/BarChart.vue.d.ts

@@ -0,0 +1,36 @@
+import { BulletLegendItemInterface, Orientation } from '@unovis/ts';
+import { PaginationPosition } from '../../types';
+
+declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
+        data: T[];
+        stacked?: boolean;
+        height: number;
+        xLabel?: string;
+        yLabel?: string;
+        categories: Record<string, BulletLegendItemInterface>;
+        xFormatter: (i: number, idx?: number) => string | number;
+        yFormatter?: (i: number, idx?: number) => string | number;
+        yNumTicks?: number;
+        xNumTicks?: number;
+        yAxis: (keyof T)[];
+        groupPadding?: number;
+        barPadding?: number;
+        radius?: number;
+        hideLegend?: boolean;
+        orientation?: Orientation;
+        paginationPosition?: PaginationPosition;
+    }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ReturnType<() => {}>;
+    emit: typeof __VLS_emit;
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/Bar/BarChart2.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./BarChart.cjs");exports.default=e.default;
+//# sourceMappingURL=BarChart2.cjs.map

package/dist/components/Bar/BarChart2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Bar/BarChart2.js

@@ -0,0 +1,5 @@
+import f from "./BarChart.js";
+export {
+  f as default
+};
+//# sourceMappingURL=BarChart2.js.map

package/dist/components/Bar/BarChart2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Bar/index.d.ts

@@ -0,0 +1 @@
+export { default as BarChart } from './BarChart.vue';

package/dist/components/Crosshair/Crosshair.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("@unovis/ts"),i=require("@unovis/vue"),_=e.defineComponent({__name:"Crosshair",props:{colors:{default:()=>[]},index:{},items:{},customTooltip:{}},setup(s){const o=s,r=new WeakMap;function c(t){if(r.has(t))return r.get(t);if(typeof window<"u"){const n=document.createElement("div"),u=Object.entries(d.omit(t,[o.index])).map(([p,m])=>({...o.items.find(f=>f.name===p),value:m})),l=o.customTooltip??i.VisTooltip;return e.createApp(l,{title:t[o.index].toString(),data:u}).mount(n),r.set(t,n.innerHTML),n.innerHTML}}function a(t,n){return o.colors[n]??"transparent"}return(t,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(i.VisTooltip),{"horizontal-shift":20,"vertical-shift":20}),e.createVNode(e.unref(i.VisCrosshair),{template:c,color:a})],64))}});exports.default=_;
+//# sourceMappingURL=Crosshair.cjs.map

package/dist/components/Crosshair/Crosshair.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Crosshair.cjs","sources":["../../../src/components/Crosshair/Crosshair.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    if (typeof window !== 'undefined') {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items.find(i => i.name === key)\n        return { ...legendReference, value }\n      })\n    const TooltipComponent = props.customTooltip ?? VisTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n    }\n\n  }\n}\n\nfunction color(_: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>"],"names":["props","__props","wm","template","d","componentDiv","omittedData","omit","key","value","i","TooltipComponent","VisTooltip","createApp","color","_"],"mappings":"wSAMA,MAAMA,EAAQC,EAURC,MAAS,QACf,SAASC,EAASC,EAAQ,CACpB,GAAAF,EAAG,IAAIE,CAAC,EACH,OAAAF,EAAG,IAAIE,CAAC,EAGX,GAAA,OAAO,OAAW,IAAa,CAC3B,MAAAC,EAAe,SAAS,cAAc,KAAK,EAC3CC,EAAc,OAAO,QAAQC,EAAK,KAAAH,EAAG,CAACJ,EAAM,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAACQ,EAAKC,CAAK,KAElE,CAAE,GADeT,EAAM,MAAM,KAAUU,GAAAA,EAAE,OAASF,CAAG,EAC/B,MAAAC,CAAM,EACpC,EACGE,EAAmBX,EAAM,eAAiBY,EAAA,WAChDC,OAAAA,EAAAA,UAAUF,EAAkB,CAAE,MAAOP,EAAEJ,EAAM,KAAK,EAAE,SAAS,EAAG,KAAMM,CAAa,CAAA,EAAE,MAAMD,CAAY,EACpGH,EAAA,IAAIE,EAAGC,EAAa,SAAS,EACzBA,EAAa,SAAA,CAGtB,CAGO,SAAAS,EAAMC,EAAYL,EAAW,CAC7B,OAAAV,EAAM,OAAOU,CAAC,GAAK,aAAA"}

package/dist/components/Crosshair/Crosshair.js

@@ -0,0 +1,40 @@
+import { defineComponent as h, createElementBlock as _, openBlock as T, Fragment as g, createVNode as r, unref as i, createApp as x } from "vue";
+import { omit as w } from "@unovis/ts";
+import { VisTooltip as s, VisCrosshair as C } from "@unovis/vue";
+const B = /* @__PURE__ */ h({
+  __name: "Crosshair",
+  props: {
+    colors: { default: () => [] },
+    index: {},
+    items: {},
+    customTooltip: {}
+  },
+  setup(c) {
+    const n = c, o = /* @__PURE__ */ new WeakMap();
+    function a(e) {
+      if (o.has(e))
+        return o.get(e);
+      if (typeof window < "u") {
+        const t = document.createElement("div"), p = Object.entries(w(e, [n.index])).map(([f, u]) => ({ ...n.items.find((d) => d.name === f), value: u })), l = n.customTooltip ?? s;
+        return x(l, { title: e[n.index].toString(), data: p }).mount(t), o.set(e, t.innerHTML), t.innerHTML;
+      }
+    }
+    function m(e, t) {
+      return n.colors[t] ?? "transparent";
+    }
+    return (e, t) => (T(), _(g, null, [
+      r(i(s), {
+        "horizontal-shift": 20,
+        "vertical-shift": 20
+      }),
+      r(i(C), {
+        template: a,
+        color: m
+      })
+    ], 64));
+  }
+});
+export {
+  B as default
+};
+//# sourceMappingURL=Crosshair.js.map

package/dist/components/Crosshair/Crosshair.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Crosshair.js","sources":["../../../src/components/Crosshair/Crosshair.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    if (typeof window !== 'undefined') {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items.find(i => i.name === key)\n        return { ...legendReference, value }\n      })\n    const TooltipComponent = props.customTooltip ?? VisTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n    }\n\n  }\n}\n\nfunction color(_: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>"],"names":["props","__props","wm","template","d","componentDiv","omittedData","omit","key","value","i","TooltipComponent","VisTooltip","createApp","color","_"],"mappings":";;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAURC,wBAAS,QAAQ;AACvB,aAASC,EAASC,GAAQ;AACpB,UAAAF,EAAG,IAAIE,CAAC;AACH,eAAAF,EAAG,IAAIE,CAAC;AAGX,UAAA,OAAO,SAAW,KAAa;AAC3B,cAAAC,IAAe,SAAS,cAAc,KAAK,GAC3CC,IAAc,OAAO,QAAQC,EAAKH,GAAG,CAACJ,EAAM,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAACQ,GAAKC,CAAK,OAElE,EAAE,GADeT,EAAM,MAAM,KAAK,CAAKU,MAAAA,EAAE,SAASF,CAAG,GAC/B,OAAAC,EAAM,EACpC,GACGE,IAAmBX,EAAM,iBAAiBY;AAChD,eAAAC,EAAUF,GAAkB,EAAE,OAAOP,EAAEJ,EAAM,KAAK,EAAE,SAAS,GAAG,MAAMM,EAAa,CAAA,EAAE,MAAMD,CAAY,GACpGH,EAAA,IAAIE,GAAGC,EAAa,SAAS,GACzBA,EAAa;AAAA,MAAA;AAAA,IAGtB;AAGO,aAAAS,EAAMC,GAAYL,GAAW;AAC7B,aAAAV,EAAM,OAAOU,CAAC,KAAK;AAAA,IAAA;;;;;;;;;;;;;"}

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

@@ -0,0 +1,38 @@
+import { BulletLegendItemInterface } from '@unovis/ts';
+import { Component } from 'vue';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    colors: string[];
+    index: string;
+    items: BulletLegendItemInterface[];
+    customTooltip?: Component;
+}>, {
+    colors: () => any[];
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    colors: string[];
+    index: string;
+    items: BulletLegendItemInterface[];
+    customTooltip?: Component;
+}>, {
+    colors: () => any[];
+}>>> & Readonly<{}>, {
+    colors: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/Crosshair/Crosshair2.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Crosshair.cjs");exports.default=e.default;
+//# sourceMappingURL=Crosshair2.cjs.map

package/dist/components/Crosshair/Crosshair2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Crosshair2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Crosshair/Crosshair2.js

@@ -0,0 +1,5 @@
+import f from "./Crosshair.js";
+export {
+  f as default
+};
+//# sourceMappingURL=Crosshair2.js.map

package/dist/components/Crosshair/Crosshair2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Crosshair2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Crosshair/index.d.ts

@@ -0,0 +1 @@
+export { default as Crosshair } from './Crosshair.vue';

package/dist/components/Donut/DonutChart.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@unovis/ts"),o=require("@unovis/vue"),u={class:"flex items-center justify-center"},d={key:0,class:"flex items-center justify-center mt-4"},g=e.defineComponent({__name:"DonutChart",props:{type:{},data:{},height:{},radius:{},hidePagination:{type:Boolean},labels:{}},setup(r){const n=r,s=t=>t,l=n.type==="half",a={[c.Donut.selectors.segment]:t=>(console.log(),`<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${n.labels[t.index].color} ;'></div>
+        <div>${t.data}</div>
+      </vistooltip>
+    </vissinglecontainer>
+  </div>`)};return(t,m)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",u,[e.createVNode(e.unref(o.VisSingleContainer),{class:e.normalizeClass(l?"mt-24":""),data:t.data,height:t.height,margin:{}},{default:e.withCtx(()=>[e.createVNode(e.unref(o.VisTooltip),{"horizontal-shift":20,"vertical-shift":20,triggers:a}),e.createVNode(e.unref(o.VisDonut),{value:s,"corner-radius":t.radius,color:n.labels.map(i=>i.color),"angle-range":l?[-1.5707963267948966,1.5707963267948966]:[]},null,8,["corner-radius","color","angle-range"])]),_:1},8,["class","data","height"]),e.renderSlot(t.$slots,"default")]),t.hidePagination?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",d,[e.createVNode(e.unref(o.VisBulletLegend),{items:t.labels},null,8,["items"])]))],64))}});exports.default=g;
+//# sourceMappingURL=DonutChart.cjs.map

package/dist/components/Donut/DonutChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.cjs","sources":["../../../src/components/Donut/DonutChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Donut } from \"@unovis/ts\";\nimport {\n  VisBulletLegend,\n  VisDonut,\n  VisSingleContainer,\n  VisTooltip,\n} from \"@unovis/vue\";\n\nexport type DonutChartProps = {\n    type?: string;\n    data: number[];\n    height: number;\n    radius: number;\n    hidePagination?: boolean\n    labels: {\n      name: string;\n      color: string;\n    }[];\n  }\n\nconst props = defineProps<DonutChartProps>();\n\nconst value = (d: number) => d;\n\nconst isHalf = props.type === \"half\";\n\nconst tooltip = {\n  [Donut.selectors.segment]: (d: any) => {\n    console.log();\n\n    return `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${\n      props.labels[d.index].color\n    } ;'></div>\n        <div>${d.data}</div>\n      </vistooltip>\n    </vissinglecontainer>\n  </div>`;\n  },\n};\n</script>\n\n<template>\n  <div class=\"flex items-center justify-center\">\n    <VisSingleContainer\n      :class=\"isHalf ? 'mt-24' : ''\"\n      :data=\"data\"\n      :height=\"height\"\n      :margin=\"{}\"\n    >\n      <VisTooltip\n        :horizontal-shift=\"20\"\n        :vertical-shift=\"20\"\n        :triggers=\"tooltip\"\n      />\n\n      <VisDonut\n        :value=\"value\"\n        :corner-radius=\"radius\"\n        :color=\"props.labels.map((l) => l.color)\"\n        :angle-range=\"isHalf ? [-1.5707963267948966, 1.5707963267948966] : []\"\n      />\n    </VisSingleContainer>\n\n    <slot />\n  </div>\n\n  <div v-if=\"!hidePagination\" class=\"flex items-center justify-center mt-4\">\n    <VisBulletLegend :items=\"labels\" />\n  </div>\n</template>\n"],"names":["props","__props","value","d","isHalf","tooltip","Donut"],"mappings":"+ZAqBA,MAAMA,EAAQC,EAERC,EAASC,GAAcA,EAEvBC,EAASJ,EAAM,OAAS,OAExBK,EAAU,CACd,CAACC,QAAM,UAAU,OAAO,EAAIH,IAC1B,QAAQ,IAAI,EAEL,kGACLH,EAAM,OAAOG,EAAE,KAAK,EAAE,KACxB;AAAA,eACWA,EAAE,IAAI;AAAA;AAAA;AAAA,UAKrB"}

package/dist/components/Donut/DonutChart.js

@@ -0,0 +1,59 @@
+import { defineComponent as m, createElementBlock as i, openBlock as n, Fragment as u, createElementVNode as g, createCommentVNode as h, createVNode as t, renderSlot as f, unref as o, normalizeClass as p, withCtx as v } from "vue";
+import { Donut as y } from "@unovis/ts";
+import { VisSingleContainer as V, VisTooltip as C, VisDonut as b, VisBulletLegend as _ } from "@unovis/vue";
+const k = { class: "flex items-center justify-center" }, B = {
+  key: 0,
+  class: "flex items-center justify-center mt-4"
+}, w = /* @__PURE__ */ m({
+  __name: "DonutChart",
+  props: {
+    type: {},
+    data: {},
+    height: {},
+    radius: {},
+    hidePagination: { type: Boolean },
+    labels: {}
+  },
+  setup(a) {
+    const s = a, r = (e) => e, l = s.type === "half", c = {
+      [y.selectors.segment]: (e) => (console.log(), `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${s.labels[e.index].color} ;'></div>
+        <div>${e.data}</div>
+      </vistooltip>
+    </vissinglecontainer>
+  </div>`)
+    };
+    return (e, D) => (n(), i(u, null, [
+      g("div", k, [
+        t(o(V), {
+          class: p(l ? "mt-24" : ""),
+          data: e.data,
+          height: e.height,
+          margin: {}
+        }, {
+          default: v(() => [
+            t(o(C), {
+              "horizontal-shift": 20,
+              "vertical-shift": 20,
+              triggers: c
+            }),
+            t(o(b), {
+              value: r,
+              "corner-radius": e.radius,
+              color: s.labels.map((d) => d.color),
+              "angle-range": l ? [-1.5707963267948966, 1.5707963267948966] : []
+            }, null, 8, ["corner-radius", "color", "angle-range"])
+          ]),
+          _: 1
+        }, 8, ["class", "data", "height"]),
+        f(e.$slots, "default")
+      ]),
+      e.hidePagination ? h("", !0) : (n(), i("div", B, [
+        t(o(_), { items: e.labels }, null, 8, ["items"])
+      ]))
+    ], 64));
+  }
+});
+export {
+  w as default
+};
+//# sourceMappingURL=DonutChart.js.map

package/dist/components/Donut/DonutChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.js","sources":["../../../src/components/Donut/DonutChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Donut } from \"@unovis/ts\";\nimport {\n  VisBulletLegend,\n  VisDonut,\n  VisSingleContainer,\n  VisTooltip,\n} from \"@unovis/vue\";\n\nexport type DonutChartProps = {\n    type?: string;\n    data: number[];\n    height: number;\n    radius: number;\n    hidePagination?: boolean\n    labels: {\n      name: string;\n      color: string;\n    }[];\n  }\n\nconst props = defineProps<DonutChartProps>();\n\nconst value = (d: number) => d;\n\nconst isHalf = props.type === \"half\";\n\nconst tooltip = {\n  [Donut.selectors.segment]: (d: any) => {\n    console.log();\n\n    return `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${\n      props.labels[d.index].color\n    } ;'></div>\n        <div>${d.data}</div>\n      </vistooltip>\n    </vissinglecontainer>\n  </div>`;\n  },\n};\n</script>\n\n<template>\n  <div class=\"flex items-center justify-center\">\n    <VisSingleContainer\n      :class=\"isHalf ? 'mt-24' : ''\"\n      :data=\"data\"\n      :height=\"height\"\n      :margin=\"{}\"\n    >\n      <VisTooltip\n        :horizontal-shift=\"20\"\n        :vertical-shift=\"20\"\n        :triggers=\"tooltip\"\n      />\n\n      <VisDonut\n        :value=\"value\"\n        :corner-radius=\"radius\"\n        :color=\"props.labels.map((l) => l.color)\"\n        :angle-range=\"isHalf ? [-1.5707963267948966, 1.5707963267948966] : []\"\n      />\n    </VisSingleContainer>\n\n    <slot />\n  </div>\n\n  <div v-if=\"!hidePagination\" class=\"flex items-center justify-center mt-4\">\n    <VisBulletLegend :items=\"labels\" />\n  </div>\n</template>\n"],"names":["props","__props","value","d","isHalf","tooltip","Donut"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAcA,GAEvBC,IAASJ,EAAM,SAAS,QAExBK,IAAU;AAAA,MACd,CAACC,EAAM,UAAU,OAAO,GAAG,CAACH,OAC1B,QAAQ,IAAI,GAEL,kGACLH,EAAM,OAAOG,EAAE,KAAK,EAAE,KACxB;AAAA,eACWA,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA,IAKrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,31 @@
+export type DonutChartProps = {
+    type?: string;
+    data: number[];
+    height: number;
+    radius: number;
+    hidePagination?: boolean;
+    labels: {
+        name: string;
+        color: string;
+    }[];
+};
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Donut/DonutChart2.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./DonutChart.cjs");exports.default=e.default;
+//# sourceMappingURL=DonutChart2.cjs.map

package/dist/components/Donut/DonutChart2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Donut/DonutChart2.js

@@ -0,0 +1,5 @@
+import f from "./DonutChart.js";
+export {
+  f as default
+};
+//# sourceMappingURL=DonutChart2.js.map

package/dist/components/Donut/DonutChart2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Donut/index.d.ts

@@ -0,0 +1 @@
+export { default as DonutChart } from './DonutChart.vue';

package/dist/components.d.ts

@@ -1 +1,6 @@
+export * from './components/Area';
+export * from './components/AreaStacked';
 export * from './components/Line';
+export * from './components/Bar';
+export * from './components/Donut';
+export * from './components/Crosshair';

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/Line/LineChart.cjs");exports.LineChart=e.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/Area/AreaChart.cjs"),t=require("./components/AreaStacked/AreaStackedChart.cjs"),r=require("./components/Line/LineChart.cjs"),_=require("./components/Bar/BarChart.cjs"),u=require("./components/Donut/DonutChart.cjs"),a=require("./components/Crosshair/Crosshair.cjs");exports.AreaChart=e.default;exports.AreaStackedChart=t.default;exports.LineChart=r.default;exports.BarChart=_.default;exports.DonutChart=u.default;exports.Crosshair=a.default;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,5 +1,15 @@
-import { default as r } from "./components/Line/LineChart.js";
+import { default as t } from "./components/Area/AreaChart.js";
+import { default as o } from "./components/AreaStacked/AreaStackedChart.js";
+import { default as s } from "./components/Line/LineChart.js";
+import { default as u } from "./components/Bar/BarChart.js";
+import { default as l } from "./components/Donut/DonutChart.js";
+import { default as p } from "./components/Crosshair/Crosshair.js";
 export {
-  r as LineChart
+  t as AreaChart,
+  o as AreaStackedChart,
+  u as BarChart,
+  p as Crosshair,
+  l as DonutChart,
+  s as LineChart
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/types.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var o=(t=>(t.Top="top",t.Bottom="bottom",t))(o||{});exports.PaginationPosition=o;
+//# sourceMappingURL=types.cjs.map

package/dist/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":["../src/types.ts"],"sourcesContent":["export enum PaginationPosition {\n    Top = \"top\",\n    Bottom = \"bottom\",\n  }\n  "],"names":["PaginationPosition"],"mappings":"gFAAY,IAAAA,GAAAA,IACRA,EAAA,IAAM,MACNA,EAAA,OAAS,SAFDA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/types.js

@@ -0,0 +1,5 @@
+var o = /* @__PURE__ */ ((t) => (t.Top = "top", t.Bottom = "bottom", t))(o || {});
+export {
+  o as PaginationPosition
+};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["export enum PaginationPosition {\n    Top = \"top\",\n    Bottom = \"bottom\",\n  }\n  "],"names":["PaginationPosition"],"mappings":"AAAY,IAAAA,sBAAAA,OACRA,EAAA,MAAM,OACNA,EAAA,SAAS,UAFDA,IAAAA,KAAA,CAAA,CAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.0.162",
+  "version": "0.0.164",
   "license": "MIT",
   "files": [
     "dist"