vue-chrts 0.0.153 → 0.0.155

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

package/dist/components/Area/AreaChart.js

@@ -1,11 +1,12 @@
 import { defineComponent as b, computed as B, createApp as V, createElementBlock as c, openBlock as a, normalizeClass as C, createVNode as l, createCommentVNode as u, unref as t, withCtx as X, createBlock as g, Fragment as f, renderList as N, mergeProps as $ } from "vue";
-import { Position as y, CurveType as h } from "@unovis/ts";
-import { VisXYContainer as Y, VisTooltip as j, VisArea as F, VisLine as A, VisAxis as k, VisCrosshair as P, VisBulletLegend as w } from "@unovis/vue";
+import { 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 = {
   key: 0,
   class: "flex items center justify-end"
-}, H = /* @__PURE__ */ b({
+}, R = /* @__PURE__ */ b({
   __name: "AreaChart",
   props: {
     data: {},
@@ -80,16 +81,16 @@ const M = {
             }, L(n), {
               color: `url(#gradient${r}-${t(d)[r]})`,
               opacity: 0.5,
-              "curve-type": e.curveType ?? t(h).MonotoneX
+              "curve-type": e.curveType ?? t(k).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
             l(t(A), {
               x: (m, p) => p,
               y: (m) => m[n],
               color: t(d)[r],
-              "curve-type": e.curveType ?? t(h).MonotoneX
+              "curve-type": e.curveType ?? t(k).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
-          l(t(k), {
+          l(t(h), {
             type: "x",
             "tick-format": e.xFormatter,
             "num-ticks": e.xNumTicks,
@@ -98,7 +99,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(k), {
+          l(t(h), {
             type: "y",
             "num-ticks": e.yNumTicks ?? e.data.length,
             "tick-format": e.yFormatter,
@@ -124,6 +125,6 @@ const M = {
   }
 });
 export {
-  H as default
+  R 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\">\nimport { computed, createApp } from \"vue\";\nimport type { BulletLegendItemInterface, NumericAccessor } from \"@unovis/ts\";\nimport { CurveType, Position } from \"@unovis/ts\";\nimport {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype AreaChartProps<T> = {\n  data: T[];\n  height: number;\n  xLabel?: string;\n  yLabel?: string;\n  categories: Record<string, BulletLegendItemInterface>;\n  xFormatter: (i: number, idx: number) => string;\n  yFormatter?: (i: number, idx?: number) => string | number;\n  curveType?: CurveType;\n  xNumTicks?: number;\n  yNumTicks?: number;\n  hideLegend?: boolean;\n  hideTooltip?: boolean;\n  gridLineX?: boolean;\n  domainLineX?: boolean;\n  gridLineY?: boolean;\n  domainLineY?: boolean;\n  paginationPoisition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n  xNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n  yNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return '';\n  }\n  \n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return '';\n  }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n  return {\n    y: (d: T) => Number(d[id as keyof typeof d]),\n    color: props.categories[id]?.color ?? \"#3b82f6\",\n  };\n}\n\nconst svgDefs = colors\n  .map(\n    (color, index) => `\n  <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n    <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n    <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n  </linearGradient>\n`\n  )\n  .join(\"\");\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col space-y-4\"\n    :class=\"{\n      'flex-col-reverse': props.paginationPoisition === 'top',\n    }\"\n  >\n    <VisXYContainer :data=\"data\" :height=\"height\" :svg-defs=\"svgDefs\">\n      <VisTooltip\n        v-if=\"!hideTooltip\"\n        :horizontal-placement=\"Position.Right\"\n        :vertical-placement=\"Position.Top\"\n      />\n      <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n        <VisArea\n          :x=\"(_: T, i: number) => i\"\n          v-bind=\"accessors(i)\"\n          :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n          :opacity=\"0.5\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"colors[iKey]\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n\n      <VisAxis\n        type=\"x\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks\"\n        :label=\"xLabel\"\n        :grid-line=\"gridLineX\"\n        :domain-line=\"domainLineX\"\n        :tick-line=\"!!gridLineX\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks ?? data.length\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :grid-line=\"gridLineY\"\n        :domain-line=\"domainLineY\"\n        :tick-line=\"!!gridLineY\"\n      />\n      <VisCrosshair\n        v-if=\"!hideTooltip\"\n        color=\"#666\"\n        :template=\"generateTooltip\"\n      />\n    </VisXYContainer>\n    <div v-if=\"!hideLegend\" class=\"flex items center justify-end\">\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,UAAMA,IAAQC,GAORC,IAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAI,CAACG,MAAMA,EAAE,KAAK,GAE3DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYN,EAAM;AAAA,QAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD;AAED,aAASC,EAAUC,GAAsD;;AAChE,aAAA;AAAA,QACL,GAAG,CAACP,MAAS,OAAOA,EAAEO,CAAoB,CAAC;AAAA,QAC3C,SAAOC,IAAAd,EAAM,WAAWa,CAAE,MAAnB,gBAAAC,EAAsB,UAAS;AAAA,MACxC;AAAA,IAAA;AAGF,UAAMC,IAAUb,EACb;AAAA,MACC,CAACc,GAAOC,MAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA;AAAA,IAAA,EAIxC,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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>(__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 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<{
     props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
         data: T[];
         height: number;
         xLabel?: string;
         yLabel?: string;
-        categories: Record<string, BulletLegendItemInterface>;
+        categories: Record<string, any>;
         xFormatter: (i: number, idx: number) => string;
         yFormatter?: (i: number, idx?: number) => string | number;
         curveType?: CurveType;

package/dist/components/Area/types.cjs

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1 @@
+{"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,6 +1,25 @@
 import { PaginationPosition } from '../../types';
-import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 
+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.
@@ -24,7 +43,7 @@ export type AreaChartProps<T> = {
      * A record mapping category keys to `BulletLegendItemInterface` objects.
      * This defines the visual representation and labels for each category in the chart's legend.
      */
-    categories: Record<string, BulletLegendItemInterface>;
+    categories: Record<string, any>;
     /**
      * A function that formats the x-axis tick labels.
      * @param i The value to be formatted.

package/dist/components/Area/types.js

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1 @@
+{"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;"}

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

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

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

@@ -1,8 +1,6 @@
-import { BulletLegendItemInterface } from '@unovis/ts';
-
 export type AreaStackedChartProps<T> = {
     data: T[];
-    categories: Record<string, BulletLegendItemInterface>;
+    categories: Record<string, any>;
     hideTooltip?: boolean;
 };
 declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{

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

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

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

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface, Orientation } from '@unovis/ts';
+import { 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, BulletLegendItemInterface>;
+        categories: Record<string, any>;
         xFormatter: (i: number, idx?: number) => string | number;
         yFormatter?: (i: number, idx?: number) => string | number;
         yNumTicks?: number;

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, BulletLegendItemInterface, 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, 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  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, 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"}

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, BulletLegendItemInterface, 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, 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  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, 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { CurveType, BulletLegendItemInterface } from '@unovis/ts';
+import { CurveType } from '@unovis/ts';
 import { PaginationPosition } from '../../types';
 
 declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -7,7 +7,7 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
         height: number;
         xLabel?: string;
         yLabel?: string;
-        categories: Record<string, BulletLegendItemInterface>;
+        categories: Record<string, any>;
         xFormatter: (i: number, idx: number) => string;
         yFormatter?: (i: number, idx: number) => string;
         curveType?: CurveType;

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 { BulletLegendItemInterface } from \"@unovis/ts\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  data: T;\n  categories: Record<string, BulletLegendItemInterface>;\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":"gNAIA,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":["../../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"}

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 { BulletLegendItemInterface } from \"@unovis/ts\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  data: T;\n  categories: Record<string, BulletLegendItemInterface>;\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":";;;;;;;;AAIA,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":["../../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;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,9 +1,7 @@
-import { BulletLegendItemInterface } from '@unovis/ts';
-
 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, BulletLegendItemInterface>;
+        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.153",
+  "version": "0.0.155",
   "license": "MIT",
   "files": [
     "dist"