vue-chrts 0.0.149 → 0.0.150

package/dist/components/Area/AreaChart.cjs

@@ -1,4 +1,4 @@
-"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")return"";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 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"),c=require("@unovis/ts"),n=require("@unovis/vue"),g=require("../Tooltip.cjs"),y={key:0,class:"flex items center justify-end"},k=e.defineComponent({__name:"AreaChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{},yFormatter:{},curveType:{},xNumTicks:{default:r=>r.data.length>24?24/4:r.data.length-1},yNumTicks:{default:r=>r.data.length>24?24/4:r.data.length-1},hideLegend:{type:Boolean},hideTooltip:{type:Boolean},gridLineX:{type:Boolean},domainLineX:{type:Boolean},gridLineY:{type:Boolean},domainLineY:{type:Boolean},paginationPoisition:{}},setup(r){const l=r,s=Object.values(l.categories).map(t=>t.color),p=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const o=e.createApp(g.default,{data:t,categories:l.categories}),i=document.createElement("div");o.mount(i);const a=i.innerHTML;return o.unmount(),a}catch{return""}});function m(t){var o;return{y:i=>Number(i[t]),color:((o=l.categories[t])==null?void 0:o.color)??"#3b82f6"}}const f=s.map((t,o)=>`
   <linearGradient id="gradient${o}-${t}" gradientTransform="rotate(90)">
     <stop offset="0%" stop-color="${t}" stop-opacity="1" />
     <stop offset="100%" stop-color="${t}" stop-opacity="0" />

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

package/dist/components/Area/AreaChart.js

@@ -1,4 +1,4 @@
-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 { defineComponent as b, computed as B, createApp as V, createElementBlock as c, openBlock as a, normalizeClass as C, createVNode as l, createCommentVNode as u, unref as t, withCtx as X, createBlock as g, Fragment as f, renderList as N, mergeProps as $ } from "vue";
 import { Position as y, CurveType as h } from "@unovis/ts";
 import { VisXYContainer as Y, VisTooltip as j, VisArea as F, VisLine as A, VisAxis as k, VisCrosshair as P, VisBulletLegend as w } from "@unovis/vue";
 import z from "../Tooltip.js";
@@ -28,15 +28,19 @@ const M = {
   },
   setup(i) {
     const s = i, d = Object.values(s.categories).map((e) => e.color), v = B(() => (e) => {
-      if (typeof window > "u")
+      if (typeof window > "u" || typeof document > "u")
         return "";
-      const o = V(z, {
-        data: e,
-        categories: s.categories
-      }), n = document.createElement("div");
-      o.mount(n);
-      const a = n.innerHTML;
-      return o.unmount(), a;
+      try {
+        const o = V(z, {
+          data: e,
+          categories: s.categories
+        }), n = document.createElement("div");
+        o.mount(n);
+        const r = n.innerHTML;
+        return o.unmount(), r;
+      } catch {
+        return "";
+      }
     });
     function L(e) {
       var o;
@@ -53,7 +57,7 @@ const M = {
   </linearGradient>
 `
     ).join("");
-    return (e, o) => (r(), c("div", {
+    return (e, o) => (a(), c("div", {
       class: C(["flex flex-col space-y-4", {
         "flex-col-reverse": s.paginationPoisition === "top"
       }])
@@ -64,24 +68,24 @@ const M = {
         "svg-defs": t(T)
       }, {
         default: X(() => [
-          e.hideTooltip ? u("", !0) : (r(), g(t(j), {
+          e.hideTooltip ? u("", !0) : (a(), g(t(j), {
             key: 0,
             "horizontal-placement": t(y).Right,
             "vertical-placement": t(y).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (r(!0), c(f, null, N(Object.keys(s.categories), (n, a) => (r(), c(f, { key: a }, [
+          (a(!0), c(f, null, N(Object.keys(s.categories), (n, r) => (a(), c(f, { key: r }, [
             l(t(F), $({
               x: (m, p) => p,
               ref_for: !0
             }, L(n), {
-              color: `url(#gradient${a}-${t(d)[a]})`,
+              color: `url(#gradient${r}-${t(d)[r]})`,
               opacity: 0.5,
               "curve-type": e.curveType ?? t(h).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
             l(t(A), {
               x: (m, p) => p,
               y: (m) => m[n],
-              color: t(d)[a],
+              color: t(d)[r],
               "curve-type": e.curveType ?? t(h).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
@@ -103,7 +107,7 @@ const M = {
             "domain-line": e.domainLineY,
             "tick-line": !!e.gridLineY
           }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
-          e.hideTooltip ? u("", !0) : (r(), g(t(P), {
+          e.hideTooltip ? u("", !0) : (a(), g(t(P), {
             key: 1,
             color: "#666",
             template: v.value
@@ -111,7 +115,7 @@ const M = {
         ]),
         _: 1
       }, 8, ["data", "height", "svg-defs"]),
-      e.hideLegend ? u("", !0) : (r(), c("div", M, [
+      e.hideLegend ? u("", !0) : (a(), c("div", M, [
         l(t(w), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])

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

package/dist/components/AreaStacked/AreaStackedChart.cjs

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

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

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

package/dist/components/AreaStacked/AreaStackedChart.js

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

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

package/dist/components/Bar/BarChart.cjs

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

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

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

package/dist/components/Bar/BarChart.js

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

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

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

package/dist/components/Line/LineChart.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.cjs","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, 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') {\n    return '';\n  }\n  \n  const app = createApp(Tooltip, {\n    data: d,\n    categories: props.categories,\n  });\n\n  const container = document.createElement(\"div\");\n  app.mount(container);\n\n  const html = container.innerHTML;\n  app.unmount();\n\n  return html;\n});\n</script>\n\n<template>\n  <div\n    class=\"space-y-4 flex flex-col\"\n    :class=\"{\n      'flex-col-reverse': props.paginationPosition === 'top',\n    }\"\n  >\n    <VisXYContainer :data=\"data\" :height=\"height\">\n      <VisTooltip\n        :horizontal-placement=\"Position.Right\"\n        :vertical-placement=\"Position.Top\"\n      />\n      <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"color(iKey)\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n      <VisAxis\n        type=\"x\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks ?? 4\"\n        :label=\"xLabel\"\n        :label-margin=\"8\"\n        :domain-line=\"false\"\n        :grid-line=\"false\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks ?? 4\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :domain-line=\"false\"\n      />\n      <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\n    </VisXYContainer>\n    <div class=\"flex items center justify-end\">\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":"0dA+BA,MAAMA,EAAQC,EAERC,EAASC,GAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,MAE9DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC3C,GAAA,OAAO,OAAW,IACb,MAAA,GAGH,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,CAAA,CACR"}
+{"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"}

package/dist/components/Line/LineChart.js

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

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') {\n    return '';\n  }\n  \n  const app = createApp(Tooltip, {\n    data: d,\n    categories: props.categories,\n  });\n\n  const container = document.createElement(\"div\");\n  app.mount(container);\n\n  const html = container.innerHTML;\n  app.unmount();\n\n  return html;\n});\n</script>\n\n<template>\n  <div\n    class=\"space-y-4 flex flex-col\"\n    :class=\"{\n      'flex-col-reverse': props.paginationPosition === 'top',\n    }\"\n  >\n    <VisXYContainer :data=\"data\" :height=\"height\">\n      <VisTooltip\n        :horizontal-placement=\"Position.Right\"\n        :vertical-placement=\"Position.Top\"\n      />\n      <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"color(iKey)\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n      <VisAxis\n        type=\"x\"\n        :tick-format=\"xFormatter\"\n        :num-ticks=\"xNumTicks ?? 4\"\n        :label=\"xLabel\"\n        :label-margin=\"8\"\n        :domain-line=\"false\"\n        :grid-line=\"false\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks ?? 4\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :domain-line=\"false\"\n      />\n      <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\n    </VisXYContainer>\n    <div class=\"flex items center justify-end\">\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,OAE9DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC3C,UAAA,OAAO,SAAW;AACb,eAAA;AAGH,YAAAC,IAAMC,EAAUC,GAAS;AAAA,QAC7B,MAAMH;AAAA,QACN,YAAYN,EAAM;AAAA,MAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,MAAAH,EAAI,MAAMG,CAAS;AAEnB,YAAMC,IAAOD,EAAU;AACvB,aAAAH,EAAI,QAAQ,GAELI;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

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