vue-chrts 0.0.142 → 0.0.144

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

package/dist/components/Area/AreaChart.js

@@ -1,6 +1,6 @@
-import { defineComponent as b, computed as B, createApp as V, createElementBlock as c, openBlock as r, normalizeClass as C, createVNode as l, createCommentVNode as u, unref as t, withCtx as X, createBlock as g, Fragment as y, renderList as N, mergeProps as Y } from "vue";
-import { Position as f, CurveType as h } from "@unovis/ts";
-import { VisXYContainer as $, VisTooltip as j, VisArea as F, VisLine as A, VisAxis as k, VisCrosshair as P, VisBulletLegend as z } from "@unovis/vue";
+import { defineComponent as b, computed as B, createApp as V, createElementBlock as c, openBlock as r, normalizeClass as C, createVNode as l, createCommentVNode as u, unref as t, withCtx as X, createBlock as g, Fragment as f, renderList as N, mergeProps as $ } from "vue";
+import { Position as y, CurveType as h } from "@unovis/ts";
+import { VisXYContainer as Y, VisTooltip as j, VisArea as F, VisLine as A, VisAxis as k, VisCrosshair as P, VisBulletLegend as z } from "@unovis/vue";
 import M from "../Tooltip.js";
 const O = {
   key: 0,
@@ -56,7 +56,7 @@ const O = {
         "flex-col-reverse": s.paginationPoisition === "top"
       }])
     }, [
-      l(t($), {
+      l(t(Y), {
         data: e.data,
         height: e.height,
         "svg-defs": t(T)
@@ -64,11 +64,11 @@ const O = {
         default: X(() => [
           e.hideTooltip ? u("", !0) : (r(), g(t(j), {
             key: 0,
-            "horizontal-placement": t(f).Right,
-            "vertical-placement": t(f).Top
+            "horizontal-placement": t(y).Right,
+            "vertical-placement": t(y).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (r(!0), c(y, null, N(Object.keys(s.categories), (n, a) => (r(), c(y, { key: a }, [
-            l(t(F), Y({
+          (r(!0), c(f, null, N(Object.keys(s.categories), (n, a) => (r(), c(f, { key: a }, [
+            l(t(F), $({
               x: (d, p) => p,
               ref_for: !0
             }, L(n), {

package/dist/components/AreaStacked/AreaStackedChart.cjs

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

package/dist/components/AreaStacked/AreaStackedChart.js

@@ -1,5 +1,5 @@
-import { defineComponent as d, computed as f, createApp as h, createElementBlock as y, openBlock as i, createVNode as o, createElementVNode as v, unref as t, withCtx as g, createBlock as T, createCommentVNode as V } from "vue";
-import { VisXYContainer as _, VisArea as k, VisAxis as s, VisCrosshair as C, VisBulletLegend as b } from "@unovis/vue";
+import { defineComponent as d, computed as f, createApp as h, createElementBlock as y, openBlock as i, createVNode as o, createElementVNode as v, unref as t, withCtx as _, createBlock as g, createCommentVNode as V } from "vue";
+import { VisXYContainer as k, VisArea as C, VisAxis as s, VisCrosshair as T, VisBulletLegend as b } from "@unovis/vue";
 import { CurveType as x } from "@unovis/ts";
 import B from "../Tooltip.js";
 const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center justify-end" }, w = /* @__PURE__ */ d({
@@ -20,12 +20,12 @@ const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center
       return a.unmount(), u;
     }), m = (e) => Number.parseInt(e.time), p = [(e) => e.firstTime, (e) => e.returning];
     return (e, a) => (i(), y("div", N, [
-      o(t(_), {
+      o(t(k), {
         data: e.data,
         height: 200
       }, {
-        default: g(() => [
-          o(t(k), {
+        default: _(() => [
+          o(t(C), {
             x: m,
             y: p,
             color: Object.values(n.categories).map((r) => r.color),
@@ -41,7 +41,7 @@ const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center
             label: "Number of visitors",
             "num-ticks": 3
           }),
-          e.hideTooltip ? V("", !0) : (i(), T(t(C), {
+          e.hideTooltip ? V("", !0) : (i(), g(t(T), {
             key: 0,
             color: "#666",
             template: l.value

package/dist/components/Bar/BarChart.cjs

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

package/dist/components/Bar/BarChart.js

@@ -1,5 +1,5 @@
 import { defineComponent as v, computed as s, createApp as B, createElementBlock as c, openBlock as l, normalizeClass as f, createVNode as r, createCommentVNode as P, unref as a, withCtx as V, createBlock as y } from "vue";
-import { Orientation as d, StackedBar as T, GroupedBar as L } from "@unovis/ts";
+import { Orientation as d, StackedBar as L, GroupedBar as T } from "@unovis/ts";
 import { VisXYContainer as C, VisTooltip as A, VisGroupedBar as N, VisStackedBar as F, VisAxis as b, VisBulletLegend as j } from "@unovis/vue";
 import O from "../Tooltip.js";
 import { PaginationPosition as k } from "../../types.js";
@@ -25,16 +25,16 @@ const S = /* @__PURE__ */ v({
     paginationPosition: { default: k.Bottom }
   },
   setup(h) {
-    const t = h, u = s(() => t.yAxis.map((e) => (i) => i[e])), p = (e, i) => Object.values(t.categories)[i].color, g = s(() => (e) => {
+    const n = h, u = s(() => n.yAxis.map((e) => (i) => i[e])), p = (e, i) => Object.values(n.categories)[i].color, g = s(() => (e) => {
       const i = B(O, {
         data: e,
-        categories: t.categories
-      }), n = document.createElement("div");
-      i.mount(n);
-      const o = n.innerHTML;
+        categories: n.categories
+      }), t = document.createElement("div");
+      i.mount(t);
+      const o = t.innerHTML;
       return i.unmount(), o;
     }), m = s(
-      () => t.paginationPosition === k.Top
+      () => n.paginationPosition === k.Top
     );
     return (e, i) => (l(), c("div", {
       class: f(["flex flex-col space-y-4", { "flex-col-reverse": m.value }])
@@ -43,14 +43,14 @@ const S = /* @__PURE__ */ v({
         default: V(() => [
           r(a(A), {
             triggers: {
-              [a(L).selectors.bar]: g.value,
-              [a(T).selectors.bar]: g.value
+              [a(T).selectors.bar]: g.value,
+              [a(L).selectors.bar]: g.value
             }
           }, null, 8, ["triggers"]),
           e.stacked ? (l(), y(a(F), {
             key: 1,
             data: e.data,
-            x: (n, o) => o,
+            x: (t, o) => o,
             y: u.value,
             "grid-line": !1,
             "domain-line": !1,
@@ -62,7 +62,7 @@ const S = /* @__PURE__ */ v({
           }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (l(), y(a(N), {
             key: 0,
             data: e.data,
-            x: (n, o) => o,
+            x: (t, o) => o,
             y: u.value,
             "grid-line": !1,
             "domain-line": !1,

package/dist/components/Line/LineChart.js

@@ -2,7 +2,7 @@ import { defineComponent as g, computed as h, createApp as k, createElementBlock
 import { Position as m, CurveType as C } from "@unovis/ts";
 import { VisXYContainer as F, VisTooltip as N, VisLine as j, VisAxis as u, VisCrosshair as B, VisBulletLegend as z } from "@unovis/vue";
 import E from "../Tooltip.js";
-const O = { class: "flex items center justify-end" }, w = /* @__PURE__ */ g({
+const O = { class: "flex items center justify-end" }, _ = /* @__PURE__ */ g({
   __name: "LineChart",
   props: {
     data: {},
@@ -80,6 +80,6 @@ const O = { class: "flex items center justify-end" }, w = /* @__PURE__ */ g({
   }
 });
 export {
-  w as default
+  _ as default
 };
 //# sourceMappingURL=LineChart.js.map

package/dist/components/Tooltip.cjs

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

package/dist/components/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"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"}

package/dist/components/Tooltip.js

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

package/dist/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Tooltip2.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i={class:"flex flex-col space-y-1"},d={id:"t-label",class:"font-semibold mr-2"},u={id:"t-value",class:"font-normal"},m=e.defineComponent({__name:"Tooltip",props:{data:{},categories:{}},setup(n){const l=n,s=["_index","_stacked","_ending"],r=e.computed(()=>Object.entries(l.data).filter(([o,c])=>{var t;return!s.includes(o)&&((t=l.categories[o])==null?void 0:t.color)}));return(o,c)=>(e.openBlock(),e.createElementBlock("div",i,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,([t,a])=>(e.openBlock(),e.createElementBlock("div",{key:t,class:"flex items-center mr-2"},[e.createElementVNode("span",{class:"w-2 h-2 rounded mr-2",style:e.normalizeStyle({backgroundColor:o.categories[t].color})},null,4),e.createElementVNode("div",null,[e.createElementVNode("span",d,e.toDisplayString(t)+":",1),e.createElementVNode("span",u,e.toDisplayString(a),1)])]))),128))]))}});exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Tooltip.cjs");exports.default=e.default;
 //# sourceMappingURL=Tooltip2.cjs.map

package/dist/components/Tooltip2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip2.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 class=\"flex flex-col space-y-1\">\n    <div \n      v-for=\"[key, value] in visibleEntries\" \n      :key=\"key\"\n      class=\"flex items-center mr-2\"\n    >\n      <span\n        class=\"w-2 h-2 rounded mr-2\"\n        :style=\"{ backgroundColor: categories[key].color }\"\n      ></span>\n      <div>\n        <span id=\"t-label\" class=\"font-semibold mr-2\">{{ key }}:</span>\n        <span id=\"t-value\" class=\"font-normal\">{{ value }}</span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n#t-label {\n  margin-right: 8px;\n  color: var(--tooltip-label-color);\n  text-transform: capitalize;\n}\n\n#t-value {\n  color: var(--tooltip-value-color);\n}\n</style>\n"],"names":["props","__props","keyBlockList","visibleEntries","computed","key","_","_a"],"mappings":"qUAIA,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":"Tooltip2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Tooltip2.js

@@ -1,41 +1,5 @@
-import { defineComponent as p, computed as u, createElementBlock as s, openBlock as n, Fragment as _, renderList as f, createElementVNode as o, normalizeStyle as g, toDisplayString as r } from "vue";
-const v = { class: "flex flex-col space-y-1" }, b = {
-  id: "t-label",
-  class: "font-semibold mr-2"
-}, h = {
-  id: "t-value",
-  class: "font-normal"
-}, k = /* @__PURE__ */ p({
-  __name: "Tooltip",
-  props: {
-    data: {},
-    categories: {}
-  },
-  setup(c) {
-    const l = c, a = ["_index", "_stacked", "_ending"], i = u(() => Object.entries(l.data).filter(
-      ([t, d]) => {
-        var e;
-        return !a.includes(t) && ((e = l.categories[t]) == null ? void 0 : e.color);
-      }
-    ));
-    return (t, d) => (n(), s("div", v, [
-      (n(!0), s(_, null, f(i.value, ([e, m]) => (n(), s("div", {
-        key: e,
-        class: "flex items-center mr-2"
-      }, [
-        o("span", {
-          class: "w-2 h-2 rounded mr-2",
-          style: g({ backgroundColor: t.categories[e].color })
-        }, null, 4),
-        o("div", null, [
-          o("span", b, r(e) + ":", 1),
-          o("span", h, r(m), 1)
-        ])
-      ]))), 128))
-    ]));
-  }
-});
+import f from "./Tooltip.js";
 export {
-  k as default
+  f as default
 };
 //# sourceMappingURL=Tooltip2.js.map

package/dist/components/Tooltip2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip2.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 class=\"flex flex-col space-y-1\">\n    <div \n      v-for=\"[key, value] in visibleEntries\" \n      :key=\"key\"\n      class=\"flex items-center mr-2\"\n    >\n      <span\n        class=\"w-2 h-2 rounded mr-2\"\n        :style=\"{ backgroundColor: categories[key].color }\"\n      ></span>\n      <div>\n        <span id=\"t-label\" class=\"font-semibold mr-2\">{{ key }}:</span>\n        <span id=\"t-value\" class=\"font-normal\">{{ value }}</span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n#t-label {\n  margin-right: 8px;\n  color: var(--tooltip-label-color);\n  text-transform: capitalize;\n}\n\n#t-value {\n  color: var(--tooltip-value-color);\n}\n</style>\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":"Tooltip2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/package.json

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

package/dist/_virtual/_plugin-vue_export-helper.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=(e,o)=>{const t=e.__vccOpts||e;for(const[r,s]of o)t[r]=s;return t};exports.default=u;
-//# sourceMappingURL=_plugin-vue_export-helper.cjs.map

package/dist/_virtual/_plugin-vue_export-helper.cjs.map

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

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -1,10 +0,0 @@
-const s = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-};
-export {
-  s as default
-};
-//# sourceMappingURL=_plugin-vue_export-helper.js.map

package/dist/_virtual/_plugin-vue_export-helper.js.map

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

package/dist/index.css

@@ -1 +0,0 @@
-#t-label[data-v-cce34be2]{margin-right:8px;color:var(--tooltip-label-color);text-transform:capitalize}#t-value[data-v-cce34be2]{color:var(--tooltip-value-color)}