vue-chrts 0.0.156 → 0.0.157

package/dist/charts.d.ts

@@ -0,0 +1,19 @@
+import { AreaChart } from './Area/index';
+import { AreaStackedChart } from './AreaStacked/index';
+import { BarChart } from './Bar/index';
+import { DonutChart } from './Donut/index';
+import { LineChart, PaginationPosition } from './Line/index';
+import { AreaChartProps } from './Area';
+import { AreaStackedChartProps } from './AreaStacked';
+import { BarChartProps } from './Bar';
+import { DonutChartProps } from './Donut';
+import { LineChartProps } from './Line';
+
+export type AreaChartType = typeof AreaChart;
+export type AreaStackedChartType = typeof AreaStackedChart;
+export type BarChartType = typeof BarChart;
+export type DonutChartType = typeof DonutChart;
+export type LineChartType = typeof LineChart;
+export type PaginationPositionType = typeof PaginationPosition;
+export type { AreaChartProps, AreaStackedChartProps, BarChartProps, DonutChartProps, LineChartProps };
+export { AreaChart, AreaStackedChart, BarChart, DonutChart, LineChart, PaginationPosition, };

package/dist/index.d.ts

@@ -1 +1,16 @@
-export * from './components';
+import { default as Progress } from './Progress/Progress.vue';
+import { default as Status } from './Status/Status.vue';
+import { default as Tooltip } from './Tooltip/Tooltip.vue';
+import { AreaChartType, AreaStackedChartType, BarChartType, DonutChartType, LineChartType, PaginationPositionType, AreaChartProps, AreaStackedChartProps, BarChartProps, DonutChartProps, LineChartProps } from './charts';
+
+export { Progress, Status, Tooltip };
+export type { AreaChartProps, AreaStackedChartProps, BarChartProps, DonutChartProps, LineChartProps };
+export interface ChartModules {
+    AreaChart: AreaChartType;
+    AreaStackedChart: AreaStackedChartType;
+    BarChart: BarChartType;
+    DonutChart: DonutChartType;
+    LineChart: LineChartType;
+    PaginationPosition: PaginationPositionType;
+}
+export declare const loadCharts: () => Promise<ChartModules>;

package/dist/index.js

@@ -1,15 +1,193 @@
-import { default as t } from "./components/Area/AreaChart.js";
-import { default as o } from "./components/AreaStacked/AreaStackedChart.js";
-import { default as s } from "./components/Line/LineChart.js";
-import { default as u } from "./components/Bar/BarChart.js";
-import { default as l } from "./components/Donut/DonutChart.js";
-import { default as p } from "./components/Crosshair/Crosshair.js";
-export {
-  t as AreaChart,
-  o as AreaStackedChart,
-  u as BarChart,
-  p as Crosshair,
-  l as DonutChart,
-  s as LineChart
+import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, toDisplayString, normalizeStyle, ref, Fragment, renderList, normalizeClass, createCommentVNode } from 'vue';
+
+const _hoisted_1$2 = { class: "space-y-2" };
+const _hoisted_2$2 = { class: "space-y-2" };
+const _hoisted_3$2 = { class: "text-gray-500 mb-1" };
+const _hoisted_4$2 = { class: "text-xl dark:text-white font-bold" };
+const _hoisted_5$2 = { class: "flex items-center justify-between text-sm font-medium dark:text-gray-500 mt-2" };
+const _hoisted_6$1 = { class: "dark:bg-white/5 bg-gray-100 rounded-full h-3" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Progress",
+  props: {
+    label: {},
+    value: {},
+    unit: {},
+    progress: {},
+    total: {},
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const percentage = computed(() => {
+      return (props.progress / props.total * 100).toFixed(1);
+    });
+    const width = computed(() => {
+      return `${props.progress / props.total * 100}%`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createElementVNode("div", _hoisted_2$2, [
+          createElementVNode("p", _hoisted_3$2, toDisplayString(_ctx.label), 1),
+          createElementVNode("h2", _hoisted_4$2, toDisplayString(_ctx.value), 1)
+        ]),
+        createElementVNode("div", _hoisted_5$2, [
+          createElementVNode("div", null, toDisplayString(percentage.value) + "%", 1),
+          createElementVNode("div", null, toDisplayString(_ctx.progress) + " of " + toDisplayString(_ctx.total) + toDisplayString(_ctx.unit), 1)
+        ]),
+        createElementVNode("div", _hoisted_6$1, [
+          createElementVNode("div", {
+            class: "rounded-full h-full",
+            style: normalizeStyle({ width: width.value, backgroundColor: _ctx.color })
+          }, null, 4)
+        ])
+      ]);
+    };
+  }
+});
+
+const _hoisted_1$1 = { class: "ring ring-border divide-y divide-(--ui-border) rounded-xl shadow-sm" };
+const _hoisted_2$1 = { class: "flex items-center justify-between p-4" };
+const _hoisted_3$1 = { class: "flex items-center gap-2" };
+const _hoisted_4$1 = { class: "font-medium" };
+const _hoisted_5$1 = { class: "text-sm dark:text-gray-400" };
+const _hoisted_6 = { class: "p-4" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Status",
+  setup(__props) {
+    const domain = ref("example.com");
+    const uptime = ref("99.9% uptime");
+    const outages = ref([
+      { hour: 0, status: "online" },
+      { hour: 1, status: "online" },
+      { hour: 2, status: "online" },
+      { hour: 3, status: "online" },
+      { hour: 4, status: "online" },
+      { hour: 5, status: "online" },
+      { hour: 6, status: "online" },
+      { hour: 7, status: "online" },
+      { hour: 8, status: "online" },
+      { hour: 9, status: "online" },
+      { hour: 10, status: "online" },
+      { hour: 11, status: "offline" },
+      { hour: 12, status: "online" },
+      { hour: 13, status: "online" },
+      { hour: 14, status: "online" },
+      { hour: 15, status: "online" },
+      { hour: 16, status: "online" },
+      { hour: 17, status: "online" },
+      { hour: 18, status: "online" },
+      { hour: 19, status: "online" },
+      { hour: 20, status: "online" },
+      { hour: 21, status: "online" },
+      { hour: 22, status: "online" },
+      { hour: 23, status: "online" },
+      { hour: 0, status: "online" },
+      { hour: 1, status: "online" },
+      { hour: 2, status: "online" },
+      { hour: 3, status: "online" },
+      { hour: 4, status: "online" },
+      { hour: 5, status: "online" },
+      { hour: 6, status: "online" },
+      { hour: 7, status: "online" },
+      { hour: 8, status: "online" },
+      { hour: 9, status: "online" },
+      { hour: 10, status: "online" },
+      { hour: 11, status: "online" },
+      { hour: 12, status: "online" },
+      { hour: 13, status: "online" },
+      { hour: 14, status: "online" },
+      { hour: 15, status: "online" },
+      { hour: 16, status: "online" },
+      { hour: 17, status: "online" },
+      { hour: 18, status: "online" },
+      { hour: 19, status: "online" },
+      { hour: 20, status: "online" },
+      { hour: 21, status: "online" },
+      { hour: 22, status: "online" },
+      { hour: 23, status: "online" },
+      { hour: 0, status: "online" },
+      { hour: 1, status: "online" }
+    ]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2$1, [
+          createElementVNode("div", _hoisted_3$1, [
+            _cache[0] || (_cache[0] = createElementVNode("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              "stroke-width": "1.5",
+              stroke: "currentColor",
+              class: "size-6 text-primary"
+            }, [
+              createElementVNode("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+              })
+            ], -1)),
+            createElementVNode("span", _hoisted_4$1, toDisplayString(domain.value), 1)
+          ]),
+          createElementVNode("span", _hoisted_5$1, toDisplayString(uptime.value), 1)
+        ]),
+        createElementVNode("div", _hoisted_6, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(outages.value, (outage, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: index,
+              class: normalizeClass(["w-2.5 h-8 first:rounded-tl first:rounded-bl last:rounded-tr last:rounded-br ml-[3px] inline-block", outage.status === "online" ? "bg-primary" : "bg-white"])
+            }, null, 2);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+
+const _hoisted_1 = { class: "flex flex-col" };
+const _hoisted_2 = { class: "flex items-center mr-2 mt-2" };
+const _hoisted_3 = { class: "font-semibold capitalize text-white/75" };
+const _hoisted_4 = { class: "flex items-center gap-2" };
+const _hoisted_5 = { class: "font-normal" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Tooltip",
+  props: {
+    data: {},
+    categories: {}
+  },
+  setup(__props) {
+    function getColor(key) {
+      return props.categories[key]?.color ?? "#f00";
+    }
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(_ctx.data), ([key, value]) => {
+          return openBlock(), createElementBlock(Fragment, { key }, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("span", _hoisted_3, toDisplayString(key) + ":", 1)
+            ]),
+            createElementVNode("div", _hoisted_4, [
+              props.categories[key]?.color ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                style: normalizeStyle({ backgroundColor: getColor(key) }),
+                class: "w-2 h-2"
+              }, null, 4)) : createCommentVNode("", true),
+              createElementVNode("span", _hoisted_5, toDisplayString(value), 1)
+            ])
+          ], 64);
+        }), 128))
+      ]);
+    };
+  }
+});
+
+const loadCharts = () => {
+  if (import.meta.client || typeof window !== "undefined") {
+    return import('./charts-CO6Yq10P.js').then((module) => {
+      return module;
+    });
+  }
+  return Promise.resolve({});
 };
-//# sourceMappingURL=index.js.map
+
+export { _sfc_main$2 as Progress, _sfc_main$1 as Status, _sfc_main as Tooltip, loadCharts };

package/package.json

@@ -1,31 +1,36 @@
 {
   "name": "vue-chrts",
-  "version": "0.0.156",
+  "type": "module",
+  "version": "0.0.157",
   "license": "MIT",
   "files": [
     "dist"
   ],
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
-    "./*": {
-      "types": "./*/dist/index.d.ts",
-      "require": "./*/dist/index.cjs",
-      "import": "./*/dist/index.js"
+    "./date": {
+      "import": {
+        "types": "./dist/date.d.ts",
+        "default": "./dist/date.js"
+      },
+      "require": {
+        "types": "./dist/date.d.ts",
+        "default": "./dist/date.cjs"
+      }
     }
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "typings": "./index.d.ts",
-  "type": "module",
-  "sideEffects": false,
+  "typings": "./dist/index.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "deploy": "pnpm build && npm publish"
   },
@@ -40,9 +45,6 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-typescript2": "^0.31.1",
     "@types/d3": "^7.4.0",
     "@unovis/ts": "^1.5.0",
     "@unovis/vue": "^1.5.0",

package/dist/components/Area/AreaChart.cjs

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

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

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

package/dist/components/Area/AreaChart.js

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

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

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

@@ -1,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: number, idx: number) => 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;
-        paginationPoisition?: 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/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":";"}

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

@@ -1 +0,0 @@
-export { default as AreaChart } from './AreaChart.vue';

package/dist/components/AreaStacked/AreaStackedChart.cjs

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

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

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

package/dist/components/AreaStacked/AreaStackedChart.js

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

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

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

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

@@ -1,18 +0,0 @@
-import { BulletLegendItemInterface } from '@unovis/ts';
-
-export type AreaStackedChartProps<T> = {
-    data: T[];
-    categories: Record<string, BulletLegendItemInterface>;
-};
-declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & AreaStackedChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
-    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;

package/dist/components/AreaStacked/AreaStackedChart2.cjs

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

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

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

package/dist/components/AreaStacked/AreaStackedChart2.js

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

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

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