vue-chrts 0.1.0-beta.2-internal-2 → 0.1.0-beta.2-internal-3

package/dist/components/Area/{AreaChart.cjs → index.cjs}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Area/index.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from '../../utils'\nimport {\n  type NumericAccessor,\n  CurveType,\n  Position,\n} from \"@unovis/ts\";\nimport {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\nimport { AreaChartProps } from \"./types\";\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\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() =>  getDistributedIndices(props.data.length, props.xNumTicks))\n\nconst filteredDataByIndices = computed(() => {\n  if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n    return [];\n  }\n  return tickIndices.value.map((index) => props.data[index]);\n})\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 :data=\"filteredDataByIndices\" :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        :num-ticks=\"filteredDataByIndices.length\"\n        :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\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\"\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\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","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":"ysBAsBA,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,EAEJE,EAAwBb,EAAA,SAC5B,IAAML,EAAM,qBAAuBmB,qBAAmB,GACxD,EAEMC,EAAcf,WAAS,IAAOgB,wBAAsBrB,EAAM,KAAK,OAAQA,EAAM,SAAS,CAAC,EAEvFsB,EAAwBjB,EAAAA,SAAS,IAAM,OACvC,MAAA,GAACS,EAAAd,EAAM,OAAN,MAAAc,EAAY,SAAU,CAACM,GAAeA,EAAY,MAAM,SAAW,EAC/D,CAAC,EAEHA,EAAY,MAAM,IAAKH,GAAUjB,EAAM,KAAKiB,CAAK,CAAC,CAAA,CAC1D"}

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

@@ -1 +1,2 @@
-export { default as AreaChart } from './AreaChart';
+export { default as AreaChart } from './index';
+export * from './types';

package/dist/components/Area/{AreaChart.js → index.js}

@@ -1,11 +1,11 @@
-import { defineComponent as X, computed as c, createApp as N, createElementBlock as d, openBlock as l, normalizeClass as v, createVNode as s, createCommentVNode as y, unref as t, withCtx as $, createBlock as k, Fragment as L, renderList as Y, mergeProps as j } from "vue";
+import { defineComponent as C, computed as c, createApp as N, createElementBlock as d, openBlock as l, normalizeClass as v, createVNode as s, createCommentVNode as y, unref as t, withCtx as $, createBlock as k, Fragment as L, renderList as Y, mergeProps as j } from "vue";
 import { getDistributedIndices as F } from "../../utils.js";
 import { Position as T, CurveType as b } from "@unovis/ts";
-import { VisXYContainer as A, VisTooltip as w, VisArea as z, VisLine as D, VisAxis as B, VisCrosshair as I, VisBulletLegend as M } from "@unovis/vue";
+import { VisXYContainer as w, VisTooltip as z, VisArea as A, VisLine as D, VisAxis as B, VisCrosshair as I, VisBulletLegend as M } from "@unovis/vue";
 import O from "../Tooltip.js";
-import { PaginationPosition as E } from "../../types.js";
-const Q = /* @__PURE__ */ X({
-  __name: "AreaChart",
+import { PaginationPosition as x } from "../../types.js";
+const Q = /* @__PURE__ */ C({
+  __name: "index",
   props: {
     data: {},
     height: {},
@@ -41,14 +41,14 @@ const Q = /* @__PURE__ */ X({
         return "";
       }
     });
-    function C(e) {
+    function P(e) {
       var o;
       return {
         y: (n) => Number(n[e]),
         color: ((o = i.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
       };
     }
-    const P = u.map(
+    const X = u.map(
       (e, o) => `
   <linearGradient id="gradient${o}-${e}" gradientTransform="rotate(90)">
     <stop offset="0%" stop-color="${e}" stop-opacity="1" />
@@ -56,7 +56,7 @@ const Q = /* @__PURE__ */ X({
   </linearGradient>
 `
     ).join(""), h = c(
-      () => i.paginationPosition === E.Top
+      () => i.paginationPosition === x.Top
     ), m = c(() => F(i.data.length, i.xNumTicks)), p = c(() => {
       var e;
       return !((e = i.data) != null && e.length) || !m || m.value.length === 0 ? [] : m.value.map((o) => i.data[o]);
@@ -64,22 +64,22 @@ const Q = /* @__PURE__ */ X({
     return (e, o) => (l(), d("div", {
       class: v(["flex flex-col space-y-4", { "flex-col-reverse": h.value }])
     }, [
-      s(t(A), {
+      s(t(w), {
         data: p.value,
         height: e.height,
-        "svg-defs": t(P)
+        "svg-defs": t(X)
       }, {
         default: $(() => [
-          e.hideTooltip ? y("", !0) : (l(), k(t(w), {
+          e.hideTooltip ? y("", !0) : (l(), k(t(z), {
             key: 0,
             "horizontal-placement": t(T).Right,
             "vertical-placement": t(T).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
           (l(!0), d(L, null, Y(Object.keys(i.categories), (n, r) => (l(), d(L, { key: r }, [
-            s(t(z), j({
+            s(t(A), j({
               x: (g, f) => f,
               ref_for: !0
-            }, C(n), {
+            }, P(n), {
               color: `url(#gradient${r}-${t(u)[r]})`,
               opacity: 0.5,
               "curve-type": e.curveType ?? t(b).MonotoneX
@@ -131,4 +131,4 @@ const Q = /* @__PURE__ */ X({
 export {
   Q as default
 };
-//# sourceMappingURL=AreaChart.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Area/index.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from '../../utils'\nimport {\n  type NumericAccessor,\n  CurveType,\n  Position,\n} from \"@unovis/ts\";\nimport {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\nimport { AreaChartProps } from \"./types\";\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\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() =>  getDistributedIndices(props.data.length, props.xNumTicks))\n\nconst filteredDataByIndices = computed(() => {\n  if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n    return [];\n  }\n  return tickIndices.value.map((index) => props.data[index]);\n})\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 :data=\"filteredDataByIndices\" :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        :num-ticks=\"filteredDataByIndices.length\"\n        :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\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\"\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\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","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,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,GAEJE,IAAwBb;AAAA,MAC5B,MAAML,EAAM,uBAAuBmB,EAAmB;AAAA,IACxD,GAEMC,IAAcf,EAAS,MAAOgB,EAAsBrB,EAAM,KAAK,QAAQA,EAAM,SAAS,CAAC,GAEvFsB,IAAwBjB,EAAS,MAAM;;AACvC,aAAA,GAACS,IAAAd,EAAM,SAAN,QAAAc,EAAY,WAAU,CAACM,KAAeA,EAAY,MAAM,WAAW,IAC/D,CAAC,IAEHA,EAAY,MAAM,IAAI,CAACH,MAAUjB,EAAM,KAAKiB,CAAK,CAAC;AAAA,IAAA,CAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Area/index2.cjs

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

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

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

package/dist/components/Area/index2.js

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

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

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

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

@@ -1,7 +1,7 @@
 import { PaginationPosition } from '../../types';
 import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 
-export type AreaChartProps<T> = {
+export interface AreaChartProps<T> {
     /**
      * The data to be displayed in the area chart.
      * Each element of the array represents a data point.
@@ -27,11 +27,10 @@ export type AreaChartProps<T> = {
     categories: Record<string, BulletLegendItemInterface>;
     /**
      * A function that formats the x-axis tick labels.
-     * @param i The value to be formatted.
-     * @param idx The index of the data point.
+     * @param item The x-axis value to be formatted.
      * @returns The formatted x-axis label.
      */
-    xFormatter: (i: number, idx: number) => string;
+    xFormatter: (item: T) => string | number;
     /**
      * An optional function that formats the y-axis tick labels.
      * @param i The value to be formatted.
@@ -81,4 +80,4 @@ export type AreaChartProps<T> = {
      * See `PaginationPosition` for available options.
      */
     paginationPosition?: PaginationPosition;
-};
+}

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-export * from './components/Area';
+export { default as AreaChart } from './components/Area/index';
 export * from './components/AreaStacked';
 export * from './components/Line';
 export * from './components/Bar';

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@unovis/ts"),u=require("./components/Area/AreaChart.cjs"),_=require("./components/AreaStacked/AreaStackedChart.cjs"),a=require("./components/Line/LineChart.cjs"),n=require("./components/Bar/BarChart.cjs"),i=require("./components/Donut/DonutChart.cjs"),o=require("./components/Crosshair/Crosshair.cjs"),s=require("./components/Donut/index.cjs");var r=(e=>(e.Top="top",e.Bottom="bottom",e))(r||{});Object.defineProperty(exports,"CurveType",{enumerable:!0,get:()=>t.CurveType});Object.defineProperty(exports,"Orientation",{enumerable:!0,get:()=>t.Orientation});Object.defineProperty(exports,"Position",{enumerable:!0,get:()=>t.Position});exports.AreaChart=u.default;exports.AreaStackedChart=_.default;exports.LineChart=a.default;exports.BarChart=n.default;exports.DonutChart=i.default;exports.Crosshair=o.default;exports.DonutType=s.DonutType;exports.PaginationPosition=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@unovis/ts"),u=require("./components/Area/index.cjs"),_=require("./components/AreaStacked/AreaStackedChart.cjs"),a=require("./components/Line/LineChart.cjs"),n=require("./components/Bar/BarChart.cjs"),i=require("./components/Donut/DonutChart.cjs"),o=require("./components/Crosshair/Crosshair.cjs"),s=require("./components/Donut/index.cjs");var r=(e=>(e.Top="top",e.Bottom="bottom",e))(r||{});Object.defineProperty(exports,"CurveType",{enumerable:!0,get:()=>t.CurveType});Object.defineProperty(exports,"Orientation",{enumerable:!0,get:()=>t.Orientation});Object.defineProperty(exports,"Position",{enumerable:!0,get:()=>t.Position});exports.AreaChart=u.default;exports.AreaStackedChart=_.default;exports.LineChart=a.default;exports.BarChart=n.default;exports.DonutChart=i.default;exports.Crosshair=o.default;exports.DonutType=s.DonutType;exports.PaginationPosition=r;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\n\nexport enum PaginationPosition {\n    Top = \"top\",\n    Bottom = \"bottom\",\n  }\n\nexport { CurveType, type BulletLegendItemInterface, Position, Orientation } from '@unovis/ts'"],"names":["PaginationPosition"],"mappings":"ybAEY,IAAAA,GAAAA,IACRA,EAAA,IAAM,MACNA,EAAA,OAAS,SAFDA,IAAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\n\nexport enum PaginationPosition {\n    Top = \"top\",\n    Bottom = \"bottom\",\n  }\n\nexport { CurveType, type BulletLegendItemInterface, Position, Orientation } from '@unovis/ts'"],"names":["PaginationPosition"],"mappings":"qbAEY,IAAAA,GAAAA,IACRA,EAAA,IAAM,MACNA,EAAA,OAAS,SAFDA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { CurveType as a, Orientation as f, Position as p } from "@unovis/ts";
-import { default as u } from "./components/Area/AreaChart.js";
+import { default as u } from "./components/Area/index.js";
 import { default as s } from "./components/AreaStacked/AreaStackedChart.js";
 import { default as C } from "./components/Line/LineChart.js";
 import { default as l } from "./components/Bar/BarChart.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.1.0-beta.2-internal-2",
+  "version": "0.1.0-beta.2-internal-3",
   "license": "MIT",
   "files": [
     "dist"

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

@@ -1 +0,0 @@
-{"version":3,"file":"AreaChart.cjs","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from './../../utils'\nimport {\n  type BulletLegendItemInterface,\n  type NumericAccessor,\n  CurveType,\n  Position,\n} 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: T) => 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  paginationPosition?: 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\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() =>  getDistributedIndices(props.data.length, props.xNumTicks))\n\nconst filteredDataByIndices = computed(() => {\n  if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n    return [];\n  }\n  return tickIndices.value.map((index) => props.data[index]);\n})\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 :data=\"filteredDataByIndices\" :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        :num-ticks=\"filteredDataByIndices.length\"\n        :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\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\"\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\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","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":"6sBA0CA,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,EAEJE,EAAwBb,EAAA,SAC5B,IAAML,EAAM,qBAAuBmB,qBAAmB,GACxD,EAEMC,EAAcf,WAAS,IAAOgB,wBAAsBrB,EAAM,KAAK,OAAQA,EAAM,SAAS,CAAC,EAEvFsB,EAAwBjB,EAAAA,SAAS,IAAM,OACvC,MAAA,GAACS,EAAAd,EAAM,OAAN,MAAAc,EAAY,SAAU,CAACM,GAAeA,EAAY,MAAM,SAAW,EAC/D,CAAC,EAEHA,EAAY,MAAM,IAAKH,GAAUjB,EAAM,KAAKiB,CAAK,CAAC,CAAA,CAC1D"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"AreaChart.js","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from './../../utils'\nimport {\n  type BulletLegendItemInterface,\n  type NumericAccessor,\n  CurveType,\n  Position,\n} 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: T) => 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  paginationPosition?: 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\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() =>  getDistributedIndices(props.data.length, props.xNumTicks))\n\nconst filteredDataByIndices = computed(() => {\n  if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n    return [];\n  }\n  return tickIndices.value.map((index) => props.data[index]);\n})\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 :data=\"filteredDataByIndices\" :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        :num-ticks=\"filteredDataByIndices.length\"\n        :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\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\"\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\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","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,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,GAEJE,IAAwBb;AAAA,MAC5B,MAAML,EAAM,uBAAuBmB,EAAmB;AAAA,IACxD,GAEMC,IAAcf,EAAS,MAAOgB,EAAsBrB,EAAM,KAAK,QAAQA,EAAM,SAAS,CAAC,GAEvFsB,IAAwBjB,EAAS,MAAM;;AACvC,aAAA,GAACS,IAAAd,EAAM,SAAN,QAAAc,EAAY,WAAU,CAACM,KAAeA,EAAY,MAAM,WAAW,IAC/D,CAAC,IAEHA,EAAY,MAAM,IAAI,CAACH,MAAUjB,EAAM,KAAKiB,CAAK,CAAC;AAAA,IAAA,CAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Area/AreaChart2.cjs

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

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

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

package/dist/components/Area/AreaChart2.js

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

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

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