vue-chrts 0.0.155 → 0.0.156

package/README.md

@@ -1,3 +1,3 @@
 # Vue 3 Charts Inspired by Tremor
 
-This is a Vue 3 chart package inspired by [Tremor](https://tremor.so/).
+This is a Vue 3 chart package inspired by [Tremor](https://tremor.so/).

package/dist/components/Area/AreaChart.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("@unovis/ts"),n=require("@unovis/vue"),y=require("../Tooltip.cjs"),p=require("./types.cjs"),k={key:0,class:"flex items center justify-end"},h=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,c=Object.values(l.categories).map(t=>t.color),m=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const o=e.createApp(y.default,{data:t,categories:l.categories}),i=document.createElement("div");o.mount(i);const a=i.innerHTML;return o.unmount(),a}catch{return""}});function f(t){var o;return{y:i=>Number(i[t]),color:((o=l.categories[t])==null?void 0:o.color)??"#3b82f6"}}const g=c.map((t,o)=>`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@unovis/ts"),n=require("@unovis/vue"),f=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=>{const o=e.createApp(f.default,{data:t,categories:l.categories}),i=document.createElement("div");o.mount(i);const a=i.innerHTML;return o.unmount(),a});function m(t){var o;return{y:i=>Number(i[t]),color:((o=l.categories[t])==null?void 0:o.color)??"#3b82f6"}}const g=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(g)},{default:e.withCtx(()=>[t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(n.VisTooltip),{key:0,"horizontal-placement":e.unref(d.Position).Right,"vertical-placement":e.unref(d.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:(s,u)=>u,ref_for:!0},f(i),{color:`url(#gradient${a}-${e.unref(c)[a]})`,opacity:.5,"curve-type":t.curveType??e.unref(p.CurveType).MonotoneX}),null,16,["x","color","curve-type"]),e.createVNode(e.unref(n.VisLine),{x:(s,u)=>u,y:s=>s[i],color:e.unref(c)[a],"curve-type":t.curveType??e.unref(p.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:m.value},null,8,["template"]))]),_:1},8,["data","height","svg-defs"]),t.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",k,[e.createVNode(e.unref(n.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])]))],2))}});exports.default=h;
+`).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(g)},{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

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.cjs","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, createApp } from \"vue\";\nimport type { NumericAccessor } from \"@unovis/ts\";\nimport { 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\";\nimport { CurveType } from \"./types\";\n\ntype AreaChartProps<T> = {\n  data: T[];\n  height: number;\n  xLabel?: string;\n  yLabel?: string;\n  categories: Record<string, any>;\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":"6tBAsCA,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"}
+{"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  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});\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,CACzC,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,CAAA,CACR,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

@@ -1,12 +1,11 @@
-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 } from "@unovis/ts";
-import { VisXYContainer as Y, VisTooltip as j, VisArea as F, VisLine as A, VisAxis as h, VisCrosshair as P, VisBulletLegend as w } from "@unovis/vue";
-import z from "../Tooltip.js";
-import { CurveType as k } from "./types.js";
-const M = {
+import { defineComponent as b, computed as B, createApp as V, createElementBlock as c, openBlock as r, 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 z } from "@unovis/vue";
+import M from "../Tooltip.js";
+const O = {
   key: 0,
   class: "flex items center justify-end"
-}, R = /* @__PURE__ */ b({
+}, H = /* @__PURE__ */ b({
   __name: "AreaChart",
   props: {
     data: {},
@@ -28,20 +27,14 @@ const M = {
     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 "";
-      }
+    const s = i, m = Object.values(s.categories).map((e) => e.color), v = B(() => (e) => {
+      const o = V(M, {
+        data: e,
+        categories: s.categories
+      }), n = document.createElement("div");
+      o.mount(n);
+      const a = n.innerHTML;
+      return o.unmount(), a;
     });
     function L(e) {
       var o;
@@ -50,7 +43,7 @@ const M = {
         color: ((o = s.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
       };
     }
-    const T = d.map(
+    const T = m.map(
       (e, o) => `
   <linearGradient id="gradient${o}-${e}" gradientTransform="rotate(90)">
     <stop offset="0%" stop-color="${e}" stop-opacity="1" />
@@ -58,7 +51,7 @@ const M = {
   </linearGradient>
 `
     ).join("");
-    return (e, o) => (a(), c("div", {
+    return (e, o) => (r(), c("div", {
       class: C(["flex flex-col space-y-4", {
         "flex-col-reverse": s.paginationPoisition === "top"
       }])
@@ -69,28 +62,28 @@ const M = {
         "svg-defs": t(T)
       }, {
         default: X(() => [
-          e.hideTooltip ? u("", !0) : (a(), g(t(j), {
+          e.hideTooltip ? u("", !0) : (r(), 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 }, [
+          (r(!0), c(f, null, N(Object.keys(s.categories), (n, a) => (r(), c(f, { key: a }, [
             l(t(F), $({
-              x: (m, p) => p,
+              x: (d, p) => p,
               ref_for: !0
             }, L(n), {
-              color: `url(#gradient${r}-${t(d)[r]})`,
+              color: `url(#gradient${a}-${t(m)[a]})`,
               opacity: 0.5,
-              "curve-type": e.curveType ?? t(k).MonotoneX
+              "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(k).MonotoneX
+              x: (d, p) => p,
+              y: (d) => d[n],
+              color: t(m)[a],
+              "curve-type": e.curveType ?? t(h).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
-          l(t(h), {
+          l(t(k), {
             type: "x",
             "tick-format": e.xFormatter,
             "num-ticks": e.xNumTicks,
@@ -99,7 +92,7 @@ const M = {
             "domain-line": e.domainLineX,
             "tick-line": !!e.gridLineX
           }, null, 8, ["tick-format", "num-ticks", "label", "grid-line", "domain-line", "tick-line"]),
-          l(t(h), {
+          l(t(k), {
             type: "y",
             "num-ticks": e.yNumTicks ?? e.data.length,
             "tick-format": e.yFormatter,
@@ -108,7 +101,7 @@ const M = {
             "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), {
+          e.hideTooltip ? u("", !0) : (r(), g(t(P), {
             key: 1,
             color: "#666",
             template: v.value
@@ -116,8 +109,8 @@ const M = {
         ]),
         _: 1
       }, 8, ["data", "height", "svg-defs"]),
-      e.hideLegend ? u("", !0) : (a(), c("div", M, [
-        l(t(w), {
+      e.hideLegend ? u("", !0) : (r(), c("div", O, [
+        l(t(z), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ]))
@@ -125,6 +118,6 @@ const M = {
   }
 });
 export {
-  R as default
+  H as default
 };
 //# sourceMappingURL=AreaChart.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.js","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, createApp } from \"vue\";\nimport type { NumericAccessor } from \"@unovis/ts\";\nimport { 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\";\nimport { CurveType } from \"./types\";\n\ntype AreaChartProps<T> = {\n  data: T[];\n  height: number;\n  xLabel?: string;\n  yLabel?: string;\n  categories: Record<string, any>;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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  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});\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;AACzC,YAAAC,IAAMC,EAAUC,GAAS;AAAA,QAC7B,MAAMH;AAAA,QACN,YAAYN,EAAM;AAAA,MAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,MAAAH,EAAI,MAAMG,CAAS;AAEnB,YAAMC,IAAOD,EAAU;AACvB,aAAAH,EAAI,QAAQ,GAELI;AAAA,IAAA,CACR;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

@@ -1,13 +1,13 @@
+import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 import { PaginationPosition } from '../../types';
-import { CurveType } from './types';
 
-declare const _default: <T extends Record<string, any>>(__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<{
+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, any>;
+        categories: Record<string, BulletLegendItemInterface>;
         xFormatter: (i: number, idx: number) => string;
         yFormatter?: (i: number, idx?: number) => string | number;
         curveType?: CurveType;

package/dist/components/AreaStacked/AreaStackedChart.cjs

@@ -1,2 +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=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("@unovis/vue"),i=require("@unovis/ts"),u={class:"flex flex-col space-y-4"},l={class:"flex items center justify-end"},d=e.defineComponent({__name:"AreaStackedChart",props:{data:{},categories:{}},setup(s){const o=s,a=t=>Number.parseInt(t.time),n=[t=>t.firstTime,t=>t.returning];return(t,f)=>(e.openBlock(),e.createElementBlock("div",u,[e.createVNode(e.unref(r.VisXYContainer),{data:t.data,height:200},{default:e.withCtx(()=>[e.createVNode(e.unref(r.VisArea),{x:a,y:n,color:Object.values(o.categories).map(c=>c.color),"curve-type":e.unref(i.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})]),_:1},8,["data"]),e.createElementVNode("div",l,[e.createVNode(e.unref(r.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])]))}});exports.default=d;
 //# sourceMappingURL=AreaStackedChart.cjs.map

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

@@ -1 +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 { 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, any>;\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"}
+{"version":3,"file":"AreaStackedChart.cjs","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { VisXYContainer, VisAxis, VisArea, VisBulletLegend } from '@unovis/vue'\nimport { BulletLegendItemInterface, CurveType } from '@unovis/ts'\n\nexport type AreaStackedChartProps<T> = {\n    data: T[];\n    categories: Record<string, BulletLegendItemInterface>;\n  }\n\nconst props = defineProps<AreaStackedChartProps<T>>()\n\nconst x = (d: any) => {\n  return Number.parseInt(d.time)\n}\nconst y = [\n  (d: any) => d.firstTime,\n  (d: any) => d.returning\n]\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-4\">\n    <VisXYContainer\n      :data=\"data\"\n      :height=\"200\"\n    >\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\n        type=\"x\"\n        label=\"Time\"\n        :num-ticks=\"12\"\n\n      />\n      <VisAxis\n        type=\"y\"\n        label=\"Number of visitors\"\n        :num-ticks=\"3\"\n      />\n    </VisXYContainer>\n    <div class=\"flex items center justify-end\">\n      <VisBulletLegend\n        :items=\"Object.values(categories)\"\n      />\n    </div>\n  </div>\n</template>"],"names":["props","__props","x","d","y"],"mappings":"wVASA,MAAMA,EAAQC,EAERC,EAAKC,GACF,OAAO,SAASA,EAAE,IAAI,EAEzBC,EAAI,CACPD,GAAWA,EAAE,UACbA,GAAWA,EAAE,SAChB"}

package/dist/components/AreaStacked/AreaStackedChart.js

@@ -1,62 +1,44 @@
-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({
+import { defineComponent as l, createElementBlock as m, openBlock as u, createVNode as r, createElementVNode as p, unref as t, withCtx as d } from "vue";
+import { VisXYContainer as f, VisArea as y, VisAxis as s, VisBulletLegend as _ } from "@unovis/vue";
+import { CurveType as v } from "@unovis/ts";
+const h = { class: "flex flex-col space-y-4" }, x = { class: "flex items center justify-end" }, C = /* @__PURE__ */ l({
   __name: "AreaStackedChart",
   props: {
     data: {},
-    categories: {},
-    hideTooltip: { type: Boolean }
+    categories: {}
   },
-  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), {
+  setup(o) {
+    const a = o, i = (e) => Number.parseInt(e.time), c = [
+      (e) => e.firstTime,
+      (e) => e.returning
+    ];
+    return (e, b) => (u(), m("div", h, [
+      r(t(f), {
         data: e.data,
         height: 200
       }, {
-        default: _(() => [
-          o(t(C), {
-            x: m,
-            y: u,
+        default: d(() => [
+          r(t(y), {
+            x: i,
+            y: c,
             color: Object.values(a.categories).map((n) => n.color),
-            "curve-type": t(x).Linear
+            "curve-type": t(v).Linear
           }, null, 8, ["color", "curve-type"]),
-          o(t(c), {
+          r(t(s), {
             type: "x",
             label: "Time",
             "num-ticks": 12
           }),
-          o(t(c), {
+          r(t(s), {
             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), {
+      p("div", x, [
+        r(t(_), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ])
@@ -64,6 +46,6 @@ const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center
   }
 });
 export {
-  O as default
+  C as default
 };
 //# sourceMappingURL=AreaStackedChart.js.map

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

@@ -1 +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 { 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, any>;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AreaStackedChart.js","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { VisXYContainer, VisAxis, VisArea, VisBulletLegend } from '@unovis/vue'\nimport { BulletLegendItemInterface, CurveType } from '@unovis/ts'\n\nexport type AreaStackedChartProps<T> = {\n    data: T[];\n    categories: Record<string, BulletLegendItemInterface>;\n  }\n\nconst props = defineProps<AreaStackedChartProps<T>>()\n\nconst x = (d: any) => {\n  return Number.parseInt(d.time)\n}\nconst y = [\n  (d: any) => d.firstTime,\n  (d: any) => d.returning\n]\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-4\">\n    <VisXYContainer\n      :data=\"data\"\n      :height=\"200\"\n    >\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\n        type=\"x\"\n        label=\"Time\"\n        :num-ticks=\"12\"\n\n      />\n      <VisAxis\n        type=\"y\"\n        label=\"Number of visitors\"\n        :num-ticks=\"3\"\n      />\n    </VisXYContainer>\n    <div class=\"flex items center justify-end\">\n      <VisBulletLegend\n        :items=\"Object.values(categories)\"\n      />\n    </div>\n  </div>\n</template>"],"names":["props","__props","x","d","y"],"mappings":";;;;;;;;;;AASA,UAAMA,IAAQC,GAERC,IAAI,CAACC,MACF,OAAO,SAASA,EAAE,IAAI,GAEzBC,IAAI;AAAA,MACR,CAACD,MAAWA,EAAE;AAAA,MACd,CAACA,MAAWA,EAAE;AAAA,IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,7 +1,8 @@
+import { BulletLegendItemInterface } from '@unovis/ts';
+
 export type AreaStackedChartProps<T> = {
     data: T[];
-    categories: Record<string, any>;
-    hideTooltip?: boolean;
+    categories: Record<string, BulletLegendItemInterface>;
 };
 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);

package/dist/components/Bar/BarChart.cjs

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

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

@@ -1 +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 { 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, any>;\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"}
+{"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 } 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  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});\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        }\"\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,CACzC,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,CAAA,CACR,EAEKC,EAAwBZ,EAAA,SAC5B,IAAMH,EAAM,qBAAuBgB,qBAAmB,GACxD"}

package/dist/components/Bar/BarChart.js

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

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

@@ -1 +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 { 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, any>;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 } 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  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});\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        }\"\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;AACzC,YAAAI,IAAMC,EAAUC,GAAS;AAAA,QAC7B,MAAMN;AAAA,QACN,YAAYL,EAAM;AAAA,MAAA,CACnB,GAEKY,IAAY,SAAS,cAAc,KAAK;AAC9C,MAAAH,EAAI,MAAMG,CAAS;AAEnB,YAAMC,IAAOD,EAAU;AACvB,aAAAH,EAAI,QAAQ,GAELI;AAAA,IAAA,CACR,GAEKC,IAAwBX;AAAA,MAC5B,MAAMH,EAAM,uBAAuBe,EAAmB;AAAA,IACxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { Orientation } from '@unovis/ts';
+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<{
@@ -8,7 +8,7 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
         height: number;
         xLabel?: string;
         yLabel?: string;
-        categories: Record<string, any>;
+        categories: Record<string, BulletLegendItemInterface>;
         xFormatter: (i: number, idx?: number) => string | number;
         yFormatter?: (i: number, idx?: number) => string | number;
         yNumTicks?: number;

package/dist/components/Line/LineChart.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("@unovis/ts"),o=require("@unovis/vue"),d=require("../Tooltip.cjs"),f={class:"flex items center justify-end"},y=e.defineComponent({__name:"LineChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{type:Function},yFormatter:{type:Function},curveType:{},yNumTicks:{},xNumTicks:{},paginationPosition:{}},setup(s){const n=s,u=t=>Object.values(n.categories)[t].color,m=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const r=e.createApp(d.default,{data:t,categories:n.categories}),a=document.createElement("div");r.mount(a);const i=a.innerHTML;return r.unmount(),i}catch{return""}});return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["space-y-4 flex flex-col",{"flex-col-reverse":n.paginationPosition==="top"}])},[e.createVNode(e.unref(o.VisXYContainer),{data:t.data,height:t.height},{default:e.withCtx(()=>[e.createVNode(e.unref(o.VisTooltip),{"horizontal-placement":e.unref(l.Position).Right,"vertical-placement":e.unref(l.Position).Top},null,8,["horizontal-placement","vertical-placement"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(n.categories),(a,i)=>(e.openBlock(),e.createBlock(e.unref(o.VisLine),{key:i,x:(c,p)=>p,y:c=>c[a],color:u(i),"curve-type":t.curveType??e.unref(l.CurveType).MonotoneX},null,8,["x","y","color","curve-type"]))),128)),e.createVNode(e.unref(o.VisAxis),{type:"x","tick-format":t.xFormatter,"num-ticks":t.xNumTicks??4,label:t.xLabel,"label-margin":8,"domain-line":!1,"grid-line":!1},null,8,["tick-format","num-ticks","label"]),e.createVNode(e.unref(o.VisAxis),{type:"y","num-ticks":t.yNumTicks??4,"tick-format":t.yFormatter,label:t.yLabel,"domain-line":!1},null,8,["num-ticks","tick-format","label"]),e.createVNode(e.unref(o.VisCrosshair),{color:"#666",template:m.value},null,8,["template"])]),_:1},8,["data","height"]),e.createElementVNode("div",f,[e.createVNode(e.unref(o.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])],2))}});exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("@unovis/ts"),o=require("@unovis/vue"),d=require("../Tooltip.cjs"),f={class:"flex items center justify-end"},y=e.defineComponent({__name:"LineChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{type:Function},yFormatter:{type:Function},curveType:{},yNumTicks:{},xNumTicks:{},paginationPosition:{}},setup(s){const n=s,u=t=>Object.values(n.categories)[t].color,m=e.computed(()=>t=>{const i=e.createApp(d.default,{data:t,categories:n.categories}),r=document.createElement("div");i.mount(r);const a=r.innerHTML;return i.unmount(),a});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["space-y-4 flex flex-col",{"flex-col-reverse":n.paginationPosition==="top"}])},[e.createVNode(e.unref(o.VisXYContainer),{data:t.data,height:t.height},{default:e.withCtx(()=>[e.createVNode(e.unref(o.VisTooltip),{"horizontal-placement":e.unref(l.Position).Right,"vertical-placement":e.unref(l.Position).Top},null,8,["horizontal-placement","vertical-placement"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(n.categories),(r,a)=>(e.openBlock(),e.createBlock(e.unref(o.VisLine),{key:a,x:(c,p)=>p,y:c=>c[r],color:u(a),"curve-type":t.curveType??e.unref(l.CurveType).MonotoneX},null,8,["x","y","color","curve-type"]))),128)),e.createVNode(e.unref(o.VisAxis),{type:"x","tick-format":t.xFormatter,"num-ticks":t.xNumTicks??4,label:t.xLabel,"label-margin":8,"domain-line":!1,"grid-line":!1},null,8,["tick-format","num-ticks","label"]),e.createVNode(e.unref(o.VisAxis),{type:"y","num-ticks":t.yNumTicks??4,"tick-format":t.yFormatter,label:t.yLabel,"domain-line":!1},null,8,["num-ticks","tick-format","label"]),e.createVNode(e.unref(o.VisCrosshair),{color:"#666",template:m.value},null,8,["template"])]),_:1},8,["data","height"]),e.createElementVNode("div",f,[e.createVNode(e.unref(o.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])],2))}});exports.default=y;
 //# sourceMappingURL=LineChart.cjs.map

package/dist/components/Line/LineChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.cjs","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, Position } from \"@unovis/ts\";\n\nimport {\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisXYContainer,\n  VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<T> = {\n  data: T[];\n  height: number;\n  xLabel?: string;\n  yLabel?: string;\n  categories: Record<string, any>;\n  xFormatter: (i: number, idx: number) => string;\n  yFormatter?: (i: number, idx: number) => string;\n  curveType?: CurveType;\n  yNumTicks?: number;\n  xNumTicks?: number;\n  paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].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</script>\n\n<template>\n  <div\n    class=\"space-y-4 flex flex-col\"\n    :class=\"{\n      'flex-col-reverse': props.paginationPosition === 'top',\n    }\"\n  >\n    <VisXYContainer :data=\"data\" :height=\"height\">\n      <VisTooltip\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        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"color(iKey)\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n      <VisAxis\n        type=\"x\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks ?? 4\"\n        :label=\"xLabel\"\n        :label-margin=\"8\"\n        :domain-line=\"false\"\n        :grid-line=\"false\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks ?? 4\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :domain-line=\"false\"\n      />\n      <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\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","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":"0dA+BA,MAAMA,EAAQC,EAERC,EAASC,GAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,MAE9DC,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"}
+{"version":3,"file":"LineChart.cjs","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, BulletLegendItemInterface, Position } from \"@unovis/ts\";\n\n\n\nimport {\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisXYContainer,\n  VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<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;\n  curveType?: CurveType;\n  yNumTicks?: number;\n  xNumTicks?: number;\n  paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].color;\n\nconst generateTooltip = computed(() => (d: T) => {\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});\n</script>\n\n<template>\n  <div\n    class=\"space-y-4 flex flex-col\"\n    :class=\"{\n      'flex-col-reverse': props.paginationPosition === 'top',\n    }\"\n  >\n    <VisXYContainer :data=\"data\" :height=\"height\">\n      <VisTooltip\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        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"color(iKey)\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n      <VisAxis\n        type=\"x\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks ?? 4\"\n        :label=\"xLabel\"\n        :label-margin=\"8\"\n        :domain-line=\"false\"\n        :grid-line=\"false\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks ?? 4\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :domain-line=\"false\"\n      />\n      <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\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","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":"0dAiCA,MAAMA,EAAQC,EAERC,EAASC,GAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,MAE9DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CACzC,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,CAAA,CACR"}

package/dist/components/Line/LineChart.js

@@ -1,8 +1,8 @@
-import { defineComponent as g, computed as h, createApp as k, createElementBlock as s, openBlock as l, normalizeClass as v, createVNode as o, createElementVNode as b, unref as t, withCtx as T, Fragment as L, renderList as V, createBlock as x } from "vue";
+import { defineComponent as g, computed as h, createApp as k, createElementBlock as c, openBlock as r, normalizeClass as v, createVNode as o, createElementVNode as b, unref as t, withCtx as T, Fragment as L, renderList as V, createBlock as x } from "vue";
 import { Position as m, CurveType as C } from "@unovis/ts";
-import { VisXYContainer as F, VisTooltip as N, VisLine as j, VisAxis as u, VisCrosshair as B, VisBulletLegend as w } from "@unovis/vue";
-import z from "../Tooltip.js";
-const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
+import { VisXYContainer as F, VisTooltip as N, VisLine as j, VisAxis as u, VisCrosshair as B, VisBulletLegend as z } from "@unovis/vue";
+import E from "../Tooltip.js";
+const O = { class: "flex items center justify-end" }, _ = /* @__PURE__ */ g({
   __name: "LineChart",
   props: {
     data: {},
@@ -18,24 +18,18 @@ const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
     paginationPosition: {}
   },
   setup(p) {
-    const n = p, d = (e) => Object.values(n.categories)[e].color, f = h(() => (e) => {
-      if (typeof window > "u" || typeof document > "u")
-        return "";
-      try {
-        const r = k(z, {
-          data: e,
-          categories: n.categories
-        }), a = document.createElement("div");
-        r.mount(a);
-        const i = a.innerHTML;
-        return r.unmount(), i;
-      } catch {
-        return "";
-      }
+    const a = p, d = (e) => Object.values(a.categories)[e].color, f = h(() => (e) => {
+      const l = k(E, {
+        data: e,
+        categories: a.categories
+      }), i = document.createElement("div");
+      l.mount(i);
+      const n = i.innerHTML;
+      return l.unmount(), n;
     });
-    return (e, r) => (l(), s("div", {
+    return (e, l) => (r(), c("div", {
       class: v(["space-y-4 flex flex-col", {
-        "flex-col-reverse": n.paginationPosition === "top"
+        "flex-col-reverse": a.paginationPosition === "top"
       }])
     }, [
       o(t(F), {
@@ -47,11 +41,11 @@ const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
             "horizontal-placement": t(m).Right,
             "vertical-placement": t(m).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (l(!0), s(L, null, V(Object.keys(n.categories), (a, i) => (l(), x(t(j), {
-            key: i,
-            x: (c, y) => y,
-            y: (c) => c[a],
-            color: d(i),
+          (r(!0), c(L, null, V(Object.keys(a.categories), (i, n) => (r(), x(t(j), {
+            key: n,
+            x: (s, y) => y,
+            y: (s) => s[i],
+            color: d(n),
             "curve-type": e.curveType ?? t(C).MonotoneX
           }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
           o(t(u), {
@@ -77,8 +71,8 @@ const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
         ]),
         _: 1
       }, 8, ["data", "height"]),
-      b("div", E, [
-        o(t(w), {
+      b("div", O, [
+        o(t(z), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ])
@@ -86,6 +80,6 @@ const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
   }
 });
 export {
-  X as default
+  _ as default
 };
 //# sourceMappingURL=LineChart.js.map

package/dist/components/Line/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, Position } from \"@unovis/ts\";\n\nimport {\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisXYContainer,\n  VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<T> = {\n  data: T[];\n  height: number;\n  xLabel?: string;\n  yLabel?: string;\n  categories: Record<string, any>;\n  xFormatter: (i: number, idx: number) => string;\n  yFormatter?: (i: number, idx: number) => string;\n  curveType?: CurveType;\n  yNumTicks?: number;\n  xNumTicks?: number;\n  paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].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</script>\n\n<template>\n  <div\n    class=\"space-y-4 flex flex-col\"\n    :class=\"{\n      'flex-col-reverse': props.paginationPosition === 'top',\n    }\"\n  >\n    <VisXYContainer :data=\"data\" :height=\"height\">\n      <VisTooltip\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        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"color(iKey)\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n      <VisAxis\n        type=\"x\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks ?? 4\"\n        :label=\"xLabel\"\n        :label-margin=\"8\"\n        :domain-line=\"false\"\n        :grid-line=\"false\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks ?? 4\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :domain-line=\"false\"\n      />\n      <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\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","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,OAE9DC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LineChart.js","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, BulletLegendItemInterface, Position } from \"@unovis/ts\";\n\n\n\nimport {\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisXYContainer,\n  VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<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;\n  curveType?: CurveType;\n  yNumTicks?: number;\n  xNumTicks?: number;\n  paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].color;\n\nconst generateTooltip = computed(() => (d: T) => {\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});\n</script>\n\n<template>\n  <div\n    class=\"space-y-4 flex flex-col\"\n    :class=\"{\n      'flex-col-reverse': props.paginationPosition === 'top',\n    }\"\n  >\n    <VisXYContainer :data=\"data\" :height=\"height\">\n      <VisTooltip\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        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"color(iKey)\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n      <VisAxis\n        type=\"x\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks ?? 4\"\n        :label=\"xLabel\"\n        :label-margin=\"8\"\n        :domain-line=\"false\"\n        :grid-line=\"false\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks ?? 4\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :domain-line=\"false\"\n      />\n      <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\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","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,OAE9DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AACzC,YAAAC,IAAMC,EAAUC,GAAS;AAAA,QAC7B,MAAMH;AAAA,QACN,YAAYN,EAAM;AAAA,MAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,MAAAH,EAAI,MAAMG,CAAS;AAEnB,YAAMC,IAAOD,EAAU;AACvB,aAAAH,EAAI,QAAQ,GAELI;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Line/LineChart.vue.d.ts

@@ -1,4 +1,4 @@
-import { CurveType } from '@unovis/ts';
+import { CurveType, BulletLegendItemInterface } 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<{
@@ -7,7 +7,7 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
         height: number;
         xLabel?: string;
         yLabel?: string;
-        categories: Record<string, any>;
+        categories: Record<string, BulletLegendItemInterface>;
         xFormatter: (i: number, idx: number) => string;
         yFormatter?: (i: number, idx: number) => string;
         curveType?: CurveType;

package/dist/components/Tooltip.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=e.defineComponent({__name:"Tooltip",props:{data:{},categories:{}},setup(r){const l=r,n=["_index","_stacked","_ending"],i=e.computed(()=>Object.entries(l.data).filter(([o,a])=>{var t;return!n.includes(o)&&((t=l.categories[o])==null?void 0:t.color)}));return(o,a)=>(e.openBlock(),e.createElementBlock("div",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,([t,c])=>(e.openBlock(),e.createElementBlock("div",{key:t,style:{display:"flex","align-items":"center","margin-bottom":"4px"}},[e.createElementVNode("span",{style:e.normalizeStyle([{width:"8px",height:"8px","border-radius":"4px","margin-right":"8px"},{backgroundColor:o.categories[t].color}])},null,4),e.createElementVNode("div",null,[e.createElementVNode("span",{style:e.normalizeStyle([{"font-weight":"600","margin-right":"8px"},{color:"var(--tooltip-label-color)"}])},e.toDisplayString(t)+":",1),e.createElementVNode("span",{style:e.normalizeStyle([{"font-weight":"400"},{color:"var(--tooltip-value-color)"}])},e.toDisplayString(c),1)])]))),128))]))}});exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l={class:"flex flex-col"},s={class:"flex items-center mr-2 mt-2"},r={class:"font-semibold capitalize text-white/75"},c={class:"font-normal"},a=e.defineComponent({__name:"Tooltip",props:{data:{}},setup(i){return(o,d)=>(e.openBlock(),e.createElementBlock("div",l,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.entries(o.data),([t,n])=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t},[e.createElementVNode("div",s,[e.createElementVNode("span",r,e.toDisplayString(t)+":",1)]),e.createElementVNode("span",c,e.toDisplayString(n),1)],64))),128))]))}});exports.default=a;
 //# sourceMappingURL=Tooltip.cjs.map

package/dist/components/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../src/components/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T\">\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  data: T;\n  categories: Record<string, any>;\n}>();\n\nconst keyBlockList = [\"_index\", \"_stacked\", \"_ending\"];\n\nconst visibleEntries = computed(() => {\n  return Object.entries(props.data).filter(\n    ([key, _]) => !keyBlockList.includes(key) && props.categories[key]?.color\n  );\n});\n</script>\n\n<template>\n  <div>\n    <div v-for=\"[key, value] in visibleEntries\" :key=\"key\" style=\"display: flex; align-items: center; margin-bottom: 4px;\">\n      <span\n        style=\"width: 8px; height: 8px; border-radius: 4px; margin-right: 8px;\"\n        :style=\"{ backgroundColor: categories[key].color }\"\n      ></span>\n      <div>\n        <span style=\"font-weight: 600; margin-right: 8px;\" :style=\"{ color: 'var(--tooltip-label-color)' }\">{{ key }}:</span>\n        <span style=\"font-weight: 400;\" :style=\"{ color: 'var(--tooltip-value-color)' }\">{{ value }}</span>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","keyBlockList","visibleEntries","computed","key","_","_a"],"mappings":"gNAGA,MAAMA,EAAQC,EAKRC,EAAe,CAAC,SAAU,WAAY,SAAS,EAE/CC,EAAiBC,EAAAA,SAAS,IACvB,OAAO,QAAQJ,EAAM,IAAI,EAAE,OAChC,CAAC,CAACK,EAAKC,CAAC,IAAM,OAAA,OAACJ,EAAa,SAASG,CAAG,KAAKE,EAAAP,EAAM,WAAWK,CAAG,IAApB,YAAAE,EAAuB,OACtE,CACD"}
+{"version":3,"file":"Tooltip.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Tooltip.js

@@ -1,38 +1,21 @@
-import { defineComponent as g, computed as m, createElementBlock as r, openBlock as l, Fragment as x, renderList as _, createElementVNode as o, normalizeStyle as n, toDisplayString as a } from "vue";
-const h = /* @__PURE__ */ g({
+import { defineComponent as l, createElementBlock as e, openBlock as t, Fragment as n, renderList as i, createElementVNode as s, toDisplayString as a } from "vue";
+const _ = { class: "flex flex-col" }, p = { class: "flex items-center mr-2 mt-2" }, d = { class: "font-semibold capitalize text-white/75" }, m = { class: "font-normal" }, x = /* @__PURE__ */ l({
   __name: "Tooltip",
   props: {
-    data: {},
-    categories: {}
+    data: {}
   },
-  setup(s) {
-    const i = s, c = ["_index", "_stacked", "_ending"], p = m(() => Object.entries(i.data).filter(
-      ([t, d]) => {
-        var e;
-        return !c.includes(t) && ((e = i.categories[t]) == null ? void 0 : e.color);
-      }
-    ));
-    return (t, d) => (l(), r("div", null, [
-      (l(!0), r(x, null, _(p.value, ([e, u]) => (l(), r("div", {
-        key: e,
-        style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
-      }, [
-        o("span", {
-          style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, { backgroundColor: t.categories[e].color }])
-        }, null, 4),
-        o("div", null, [
-          o("span", {
-            style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
-          }, a(e) + ":", 1),
-          o("span", {
-            style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-          }, a(u), 1)
-        ])
-      ]))), 128))
+  setup(f) {
+    return (r, u) => (t(), e("div", _, [
+      (t(!0), e(n, null, i(Object.entries(r.data), ([o, c]) => (t(), e(n, { key: o }, [
+        s("div", p, [
+          s("span", d, a(o) + ":", 1)
+        ]),
+        s("span", m, a(c), 1)
+      ], 64))), 128))
     ]));
   }
 });
 export {
-  h as default
+  x as default
 };
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/components/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T\">\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  data: T;\n  categories: Record<string, any>;\n}>();\n\nconst keyBlockList = [\"_index\", \"_stacked\", \"_ending\"];\n\nconst visibleEntries = computed(() => {\n  return Object.entries(props.data).filter(\n    ([key, _]) => !keyBlockList.includes(key) && props.categories[key]?.color\n  );\n});\n</script>\n\n<template>\n  <div>\n    <div v-for=\"[key, value] in visibleEntries\" :key=\"key\" style=\"display: flex; align-items: center; margin-bottom: 4px;\">\n      <span\n        style=\"width: 8px; height: 8px; border-radius: 4px; margin-right: 8px;\"\n        :style=\"{ backgroundColor: categories[key].color }\"\n      ></span>\n      <div>\n        <span style=\"font-weight: 600; margin-right: 8px;\" :style=\"{ color: 'var(--tooltip-label-color)' }\">{{ key }}:</span>\n        <span style=\"font-weight: 400;\" :style=\"{ color: 'var(--tooltip-value-color)' }\">{{ value }}</span>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","keyBlockList","visibleEntries","computed","key","_","_a"],"mappings":";;;;;;;;AAGA,UAAMA,IAAQC,GAKRC,IAAe,CAAC,UAAU,YAAY,SAAS,GAE/CC,IAAiBC,EAAS,MACvB,OAAO,QAAQJ,EAAM,IAAI,EAAE;AAAA,MAChC,CAAC,CAACK,GAAKC,CAAC,MAAM;;AAAA,gBAACJ,EAAa,SAASG,CAAG,OAAKE,IAAAP,EAAM,WAAWK,CAAG,MAApB,gBAAAE,EAAuB;AAAA;AAAA,IACtE,CACD;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

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

@@ -1,7 +1,6 @@
 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;
-        categories: Record<string, any>;
     }, 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.0.155",
+  "version": "0.0.156",
   "license": "MIT",
   "files": [
     "dist"
@@ -30,34 +30,28 @@
     "deploy": "pnpm build && npm publish"
   },
   "dependencies": {
-    "vue": "^3.5.13"
-  },
-  "peerDependencies": {
-    "@unovis/ts": "^1.5.1",
-    "@unovis/vue": "^1.5.1",
-    "@vueuse/core": "^12.0.0",
-    "d3": "^7.0.0",
-    "tailwindcss": "^4.0.0",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0"
+    "@tailwindcss/vite": "^4.0.9",
+    "@tanstack/vue-table": "^8.21.2",
+    "@unhead/vue": "^1.11.18",
+    "@vueuse/core": "^12.6.1",
+    "d3": "^7.8.5",
+    "tailwindcss": "^4.0.9",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.0.4",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-typescript2": "^0.31.1",
-    "@tailwindcss/vite": "^4.0.9",
-    "@tanstack/vue-table": "^8.21.2",
-    "@unhead/vue": "^1.11.18",
     "@types/d3": "^7.4.0",
+    "@unovis/ts": "^1.5.0",
+    "@unovis/vue": "^1.5.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
-    "@vueuse/core": "^12.6.1",
-    "d3": "^7.8.5",
-    "tailwindcss": "^4.0.9",
     "typescript": "~5.6.2",
     "vite": "^6.0.5",
     "vite-plugin-dts": "^3.9.1",
-    "vue-router": "^4.5.0",
     "vue-tsc": "^2.2.0"
-  }
+  },
+  "packageManager": "pnpm@9.13.2+sha512.88c9c3864450350e65a33587ab801acf946d7c814ed1134da4a924f6df5a2120fd36b46aab68f7cd1d413149112d53c7db3a4136624cfd00ff1846a0c6cef48a"
 }

package/dist/components/Area/types.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var l=(a=>(a.Basis="basis",a.BasisClosed="basisClosed",a.BasisOpen="basisOpen",a.Bundle="bundle",a.Cardinal="cardinal",a.CardinalClosed="cardinalClosed",a.CardinalOpen="cardinalOpen",a.CatmullRom="catmullRom",a.CatmullRomClosed="catmullRomClosed",a.CatmullRomOpen="catmullRomOpen",a.Linear="linear",a.LinearClosed="linearClosed",a.MonotoneX="monotoneX",a.MonotoneY="monotoneY",a.Natural="natural",a.Step="step",a.StepAfter="stepAfter",a.StepBefore="stepBefore",a))(l||{});exports.CurveType=l;
-//# sourceMappingURL=types.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/Area/types.ts"],"sourcesContent":["import { PaginationPosition } from \"../../types\";\n\nexport enum CurveType {\n  Basis = \"basis\",\n  BasisClosed = \"basisClosed\",\n  BasisOpen = \"basisOpen\",\n  Bundle = \"bundle\",\n  Cardinal = \"cardinal\",\n  CardinalClosed = \"cardinalClosed\",\n  CardinalOpen = \"cardinalOpen\",\n  CatmullRom = \"catmullRom\",\n  CatmullRomClosed = \"catmullRomClosed\",\n  CatmullRomOpen = \"catmullRomOpen\",\n  Linear = \"linear\",\n  LinearClosed = \"linearClosed\",\n  MonotoneX = \"monotoneX\",\n  MonotoneY = \"monotoneY\",\n  Natural = \"natural\",\n  Step = \"step\",\n  StepAfter = \"stepAfter\",\n  StepBefore = \"stepBefore\"\n}\n\nexport type AreaChartProps<T> = {\n    /**\n     * The data to be displayed in the area chart.\n     * Each element of the array represents a data point.\n     * The structure of 'T' should be compatible with the chart's rendering logic.\n     */\n    data: T[];\n    /**\n     * The height of the chart in pixels.\n     */\n    height: number;\n    /**\n     * Optional label for the x-axis.\n     */\n    xLabel?: string;\n    /**\n     * Optional label for the y-axis.\n     */\n    yLabel?: string;\n    /**\n     * A record mapping category keys to `BulletLegendItemInterface` objects.\n     * This defines the visual representation and labels for each category in the chart's legend.\n     */\n    categories: Record<string, any>;\n    /**\n     * A function that formats the x-axis tick labels.\n     * @param i The value to be formatted.\n     * @param idx The index of the data point.\n     * @returns The formatted x-axis label.\n     */\n    xFormatter: (i: number, idx: number) => string;\n    /**\n     * An optional function that formats the y-axis tick labels.\n     * @param i The value to be formatted.\n     * @param idx The index of the data point (optional).\n     * @returns The formatted y-axis label or value.\n     */\n    yFormatter?: (i: number, idx?: number) => string | number;\n    /**\n     * The type of curve to use for the area chart lines.\n     * See `CurveType` for available options.\n     */\n    curveType?: CurveType;\n    /**\n     * The desired number of ticks on the x-axis.\n     */\n    xNumTicks?: number;\n    /**\n     * The desired number of ticks on the y-axis.\n     */\n    yNumTicks?: number;\n    /**\n     * If `true`, hides the chart legend.\n     */\n    hideLegend?: boolean;\n    /**\n     * If `true`, hides the chart tooltip.\n     */\n    hideTooltip?: boolean;\n    /**\n     * If `true`, displays grid lines along the x-axis.\n     */\n    gridLineX?: boolean;\n    /**\n     * If `true`, displays a domain line (axis line) along the x-axis.\n     */\n    domainLineX?: boolean;\n    /**\n     * If `true`, displays grid lines along the y-axis.\n     */\n    gridLineY?: boolean;\n    /**\n     * If `true`, displays a domain line (axis line) along the y-axis.\n     */\n    domainLineY?: boolean;\n    /**\n     * Optional position for pagination controls, if applicable.\n     * See `PaginationPosition` for available options.\n     */\n    paginationPoisition?: PaginationPosition;\n  };"],"names":["CurveType"],"mappings":"gFAEY,IAAAA,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,SAAW,WACXA,EAAA,eAAiB,iBACjBA,EAAA,aAAe,eACfA,EAAA,WAAa,aACbA,EAAA,iBAAmB,mBACnBA,EAAA,eAAiB,iBACjBA,EAAA,OAAS,SACTA,EAAA,aAAe,eACfA,EAAA,UAAY,YACZA,EAAA,UAAY,YACZA,EAAA,QAAU,UACVA,EAAA,KAAO,OACPA,EAAA,UAAY,YACZA,EAAA,WAAa,aAlBHA,IAAAA,GAAA,CAAA,CAAA"}

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

@@ -1,103 +0,0 @@
-import { PaginationPosition } from '../../types';
-
-export declare enum CurveType {
-    Basis = "basis",
-    BasisClosed = "basisClosed",
-    BasisOpen = "basisOpen",
-    Bundle = "bundle",
-    Cardinal = "cardinal",
-    CardinalClosed = "cardinalClosed",
-    CardinalOpen = "cardinalOpen",
-    CatmullRom = "catmullRom",
-    CatmullRomClosed = "catmullRomClosed",
-    CatmullRomOpen = "catmullRomOpen",
-    Linear = "linear",
-    LinearClosed = "linearClosed",
-    MonotoneX = "monotoneX",
-    MonotoneY = "monotoneY",
-    Natural = "natural",
-    Step = "step",
-    StepAfter = "stepAfter",
-    StepBefore = "stepBefore"
-}
-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, any>;
-    /**
-     * 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/Area/types.js

@@ -1,5 +0,0 @@
-var l = /* @__PURE__ */ ((a) => (a.Basis = "basis", a.BasisClosed = "basisClosed", a.BasisOpen = "basisOpen", a.Bundle = "bundle", a.Cardinal = "cardinal", a.CardinalClosed = "cardinalClosed", a.CardinalOpen = "cardinalOpen", a.CatmullRom = "catmullRom", a.CatmullRomClosed = "catmullRomClosed", a.CatmullRomOpen = "catmullRomOpen", a.Linear = "linear", a.LinearClosed = "linearClosed", a.MonotoneX = "monotoneX", a.MonotoneY = "monotoneY", a.Natural = "natural", a.Step = "step", a.StepAfter = "stepAfter", a.StepBefore = "stepBefore", a))(l || {});
-export {
-  l as CurveType
-};
-//# sourceMappingURL=types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/Area/types.ts"],"sourcesContent":["import { PaginationPosition } from \"../../types\";\n\nexport enum CurveType {\n  Basis = \"basis\",\n  BasisClosed = \"basisClosed\",\n  BasisOpen = \"basisOpen\",\n  Bundle = \"bundle\",\n  Cardinal = \"cardinal\",\n  CardinalClosed = \"cardinalClosed\",\n  CardinalOpen = \"cardinalOpen\",\n  CatmullRom = \"catmullRom\",\n  CatmullRomClosed = \"catmullRomClosed\",\n  CatmullRomOpen = \"catmullRomOpen\",\n  Linear = \"linear\",\n  LinearClosed = \"linearClosed\",\n  MonotoneX = \"monotoneX\",\n  MonotoneY = \"monotoneY\",\n  Natural = \"natural\",\n  Step = \"step\",\n  StepAfter = \"stepAfter\",\n  StepBefore = \"stepBefore\"\n}\n\nexport type AreaChartProps<T> = {\n    /**\n     * The data to be displayed in the area chart.\n     * Each element of the array represents a data point.\n     * The structure of 'T' should be compatible with the chart's rendering logic.\n     */\n    data: T[];\n    /**\n     * The height of the chart in pixels.\n     */\n    height: number;\n    /**\n     * Optional label for the x-axis.\n     */\n    xLabel?: string;\n    /**\n     * Optional label for the y-axis.\n     */\n    yLabel?: string;\n    /**\n     * A record mapping category keys to `BulletLegendItemInterface` objects.\n     * This defines the visual representation and labels for each category in the chart's legend.\n     */\n    categories: Record<string, any>;\n    /**\n     * A function that formats the x-axis tick labels.\n     * @param i The value to be formatted.\n     * @param idx The index of the data point.\n     * @returns The formatted x-axis label.\n     */\n    xFormatter: (i: number, idx: number) => string;\n    /**\n     * An optional function that formats the y-axis tick labels.\n     * @param i The value to be formatted.\n     * @param idx The index of the data point (optional).\n     * @returns The formatted y-axis label or value.\n     */\n    yFormatter?: (i: number, idx?: number) => string | number;\n    /**\n     * The type of curve to use for the area chart lines.\n     * See `CurveType` for available options.\n     */\n    curveType?: CurveType;\n    /**\n     * The desired number of ticks on the x-axis.\n     */\n    xNumTicks?: number;\n    /**\n     * The desired number of ticks on the y-axis.\n     */\n    yNumTicks?: number;\n    /**\n     * If `true`, hides the chart legend.\n     */\n    hideLegend?: boolean;\n    /**\n     * If `true`, hides the chart tooltip.\n     */\n    hideTooltip?: boolean;\n    /**\n     * If `true`, displays grid lines along the x-axis.\n     */\n    gridLineX?: boolean;\n    /**\n     * If `true`, displays a domain line (axis line) along the x-axis.\n     */\n    domainLineX?: boolean;\n    /**\n     * If `true`, displays grid lines along the y-axis.\n     */\n    gridLineY?: boolean;\n    /**\n     * If `true`, displays a domain line (axis line) along the y-axis.\n     */\n    domainLineY?: boolean;\n    /**\n     * Optional position for pagination controls, if applicable.\n     * See `PaginationPosition` for available options.\n     */\n    paginationPoisition?: PaginationPosition;\n  };"],"names":["CurveType"],"mappings":"AAEY,IAAAA,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,iBAAiB,kBACjBA,EAAA,eAAe,gBACfA,EAAA,aAAa,cACbA,EAAA,mBAAmB,oBACnBA,EAAA,iBAAiB,kBACjBA,EAAA,SAAS,UACTA,EAAA,eAAe,gBACfA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,aAAa,cAlBHA,IAAAA,KAAA,CAAA,CAAA;"}