vue-chrts 0.0.149 → 0.0.151

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,3 +1,3 @@
1
1
  # Vue 3 Charts Inspired by Tremor
2
2
 
3
- This is a Vue 3 chart package inspired by [Tremor](https://tremor.so/).
3
+ This is a Vue 3 chart package inspired by [Tremor](https://tremor.so/).
@@ -1,4 +1,4 @@
1
- "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)=>`
1
+ "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)=>`
2
2
  <linearGradient id="gradient${o}-${t}" gradientTransform="rotate(90)">
3
3
  <stop offset="0%" stop-color="${t}" stop-opacity="1" />
4
4
  <stop offset="100%" stop-color="${t}" stop-opacity="0" />
@@ -1 +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"}
1
+ {"version":3,"file":"AreaChart.cjs","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport type { BulletLegendItemInterface, NumericAccessor } from \"@unovis/ts\";\nimport { CurveType, Position } from \"@unovis/ts\";\nimport {\n VisArea,\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisTooltip,\n VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype AreaChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx?: number) => string | number;\n curveType?: CurveType;\n xNumTicks?: number;\n yNumTicks?: number;\n hideLegend?: boolean;\n hideTooltip?: boolean;\n gridLineX?: boolean;\n domainLineX?: boolean;\n gridLineY?: boolean;\n domainLineY?: boolean;\n paginationPoisition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n xNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n yNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n return {\n y: (d: T) => Number(d[id as keyof typeof d]),\n color: props.categories[id]?.color ?? \"#3b82f6\",\n };\n}\n\nconst svgDefs = colors\n .map(\n (color, index) => `\n <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n </linearGradient>\n`\n )\n .join(\"\");\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{\n 'flex-col-reverse': props.paginationPoisition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\" :svg-defs=\"svgDefs\">\n <VisTooltip\n v-if=\"!hideTooltip\"\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisArea\n :x=\"(_: T, i: number) => i\"\n v-bind=\"accessors(i)\"\n :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n :opacity=\"0.5\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"colors[iKey]\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks\"\n :label=\"xLabel\"\n :grid-line=\"gridLineX\"\n :domain-line=\"domainLineX\"\n :tick-line=\"!!gridLineX\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? data.length\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :grid-line=\"gridLineY\"\n :domain-line=\"domainLineY\"\n :tick-line=\"!!gridLineY\"\n />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\n </VisXYContainer>\n <div v-if=\"!hideLegend\" class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index"],"mappings":"osBAqCA,MAAMA,EAAQC,EAORC,EAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAKG,GAAMA,EAAE,KAAK,EAE3DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAED,SAASC,EAAUC,EAAsD,OAChE,MAAA,CACL,EAAIP,GAAS,OAAOA,EAAEO,CAAoB,CAAC,EAC3C,QAAOC,EAAAd,EAAM,WAAWa,CAAE,IAAnB,YAAAC,EAAsB,QAAS,SACxC,CAAA,CAGF,MAAMC,EAAUb,EACb,IACC,CAACc,EAAOC,IAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA,CAAA,EAIxC,KAAK,EAAE"}
@@ -1,4 +1,4 @@
1
- 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";
1
+ 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";
2
2
  import { Position as y, CurveType as h } from "@unovis/ts";
3
3
  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";
4
4
  import z from "../Tooltip.js";
@@ -28,15 +28,19 @@ const M = {
28
28
  },
29
29
  setup(i) {
30
30
  const s = i, d = Object.values(s.categories).map((e) => e.color), v = B(() => (e) => {
31
- if (typeof window > "u")
31
+ if (typeof window > "u" || typeof document > "u")
32
32
  return "";
33
- const o = V(z, {
34
- data: e,
35
- categories: s.categories
36
- }), n = document.createElement("div");
37
- o.mount(n);
38
- const a = n.innerHTML;
39
- return o.unmount(), a;
33
+ try {
34
+ const o = V(z, {
35
+ data: e,
36
+ categories: s.categories
37
+ }), n = document.createElement("div");
38
+ o.mount(n);
39
+ const r = n.innerHTML;
40
+ return o.unmount(), r;
41
+ } catch {
42
+ return "";
43
+ }
40
44
  });
41
45
  function L(e) {
42
46
  var o;
@@ -53,7 +57,7 @@ const M = {
53
57
  </linearGradient>
54
58
  `
55
59
  ).join("");
56
- return (e, o) => (r(), c("div", {
60
+ return (e, o) => (a(), c("div", {
57
61
  class: C(["flex flex-col space-y-4", {
58
62
  "flex-col-reverse": s.paginationPoisition === "top"
59
63
  }])
@@ -64,24 +68,24 @@ const M = {
64
68
  "svg-defs": t(T)
65
69
  }, {
66
70
  default: X(() => [
67
- e.hideTooltip ? u("", !0) : (r(), g(t(j), {
71
+ e.hideTooltip ? u("", !0) : (a(), g(t(j), {
68
72
  key: 0,
69
73
  "horizontal-placement": t(y).Right,
70
74
  "vertical-placement": t(y).Top
71
75
  }, null, 8, ["horizontal-placement", "vertical-placement"])),
72
- (r(!0), c(f, null, N(Object.keys(s.categories), (n, a) => (r(), c(f, { key: a }, [
76
+ (a(!0), c(f, null, N(Object.keys(s.categories), (n, r) => (a(), c(f, { key: r }, [
73
77
  l(t(F), $({
74
78
  x: (m, p) => p,
75
79
  ref_for: !0
76
80
  }, L(n), {
77
- color: `url(#gradient${a}-${t(d)[a]})`,
81
+ color: `url(#gradient${r}-${t(d)[r]})`,
78
82
  opacity: 0.5,
79
83
  "curve-type": e.curveType ?? t(h).MonotoneX
80
84
  }), null, 16, ["x", "color", "curve-type"]),
81
85
  l(t(A), {
82
86
  x: (m, p) => p,
83
87
  y: (m) => m[n],
84
- color: t(d)[a],
88
+ color: t(d)[r],
85
89
  "curve-type": e.curveType ?? t(h).MonotoneX
86
90
  }, null, 8, ["x", "y", "color", "curve-type"])
87
91
  ], 64))), 128)),
@@ -103,7 +107,7 @@ const M = {
103
107
  "domain-line": e.domainLineY,
104
108
  "tick-line": !!e.gridLineY
105
109
  }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
106
- e.hideTooltip ? u("", !0) : (r(), g(t(P), {
110
+ e.hideTooltip ? u("", !0) : (a(), g(t(P), {
107
111
  key: 1,
108
112
  color: "#666",
109
113
  template: v.value
@@ -111,7 +115,7 @@ const M = {
111
115
  ]),
112
116
  _: 1
113
117
  }, 8, ["data", "height", "svg-defs"]),
114
- e.hideLegend ? u("", !0) : (r(), c("div", M, [
118
+ e.hideLegend ? u("", !0) : (a(), c("div", M, [
115
119
  l(t(w), {
116
120
  items: Object.values(e.categories)
117
121
  }, null, 8, ["items"])
@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"AreaChart.js","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport type { BulletLegendItemInterface, NumericAccessor } from \"@unovis/ts\";\nimport { CurveType, Position } from \"@unovis/ts\";\nimport {\n VisArea,\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisTooltip,\n VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype AreaChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx?: number) => string | number;\n curveType?: CurveType;\n xNumTicks?: number;\n yNumTicks?: number;\n hideLegend?: boolean;\n hideTooltip?: boolean;\n gridLineX?: boolean;\n domainLineX?: boolean;\n gridLineY?: boolean;\n domainLineY?: boolean;\n paginationPoisition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n xNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n yNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n return {\n y: (d: T) => Number(d[id as keyof typeof d]),\n color: props.categories[id]?.color ?? \"#3b82f6\",\n };\n}\n\nconst svgDefs = colors\n .map(\n (color, index) => `\n <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n </linearGradient>\n`\n )\n .join(\"\");\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{\n 'flex-col-reverse': props.paginationPoisition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\" :svg-defs=\"svgDefs\">\n <VisTooltip\n v-if=\"!hideTooltip\"\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisArea\n :x=\"(_: T, i: number) => i\"\n v-bind=\"accessors(i)\"\n :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n :opacity=\"0.5\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"colors[iKey]\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks\"\n :label=\"xLabel\"\n :grid-line=\"gridLineX\"\n :domain-line=\"domainLineX\"\n :tick-line=\"!!gridLineX\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? data.length\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :grid-line=\"gridLineY\"\n :domain-line=\"domainLineY\"\n :tick-line=\"!!gridLineY\"\n />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\n </VisXYContainer>\n <div v-if=\"!hideLegend\" class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,UAAMA,IAAQC,GAORC,IAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAI,CAACG,MAAMA,EAAE,KAAK,GAE3DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYN,EAAM;AAAA,QAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD;AAED,aAASC,EAAUC,GAAsD;;AAChE,aAAA;AAAA,QACL,GAAG,CAACP,MAAS,OAAOA,EAAEO,CAAoB,CAAC;AAAA,QAC3C,SAAOC,IAAAd,EAAM,WAAWa,CAAE,MAAnB,gBAAAC,EAAsB,UAAS;AAAA,MACxC;AAAA,IAAA;AAGF,UAAMC,IAAUb,EACb;AAAA,MACC,CAACc,GAAOC,MAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA;AAAA,IAAA,EAIxC,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,2 +1,2 @@
1
- "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=_;
1
+ "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=_;
2
2
  //# sourceMappingURL=AreaStackedChart.cjs.map
@@ -1 +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"}
1
+ {"version":3,"file":"AreaStackedChart.cjs","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport {\n VisXYContainer,\n VisAxis,\n VisArea,\n VisBulletLegend,\n VisCrosshair,\n} from \"@unovis/vue\";\nimport { BulletLegendItemInterface, CurveType } from \"@unovis/ts\";\nimport Tooltip from \"./../Tooltip.vue\";\nimport { computed, createApp } from \"vue\";\n\nexport type AreaStackedChartProps<T> = {\n data: T[];\n categories: Record<string, BulletLegendItemInterface>;\n hideTooltip?: boolean;\n};\n\nconst props = defineProps<AreaStackedChartProps<T>>();\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n\nconst x = (d: any) => {\n return Number.parseInt(d.time);\n};\nconst y = [(d: any) => d.firstTime, (d: any) => d.returning];\n</script>\n\n<template>\n <div class=\"flex flex-col space-y-4\">\n <VisXYContainer :data=\"data\" :height=\"200\">\n <VisArea\n :x=\"x\"\n :y=\"y\"\n :color=\"Object.values(props.categories).map((i) => i.color)\"\n :curve-type=\"CurveType.Linear\"\n />\n <VisAxis type=\"x\" label=\"Time\" :num-ticks=\"12\" />\n <VisAxis type=\"y\" label=\"Number of visitors\" :num-ticks=\"3\" />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","generateTooltip","computed","d","app","createApp","Tooltip","container","html","x","y"],"mappings":"+YAkBA,MAAMA,EAAQC,EAERC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYJ,EAAM,UAAA,CACnB,EAEKQ,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAEKC,EAAKN,GACF,OAAO,SAASA,EAAE,IAAI,EAEzBO,EAAI,CAAEP,GAAWA,EAAE,UAAYA,GAAWA,EAAE,SAAS"}
@@ -1,5 +1,5 @@
1
1
  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";
2
- import { VisXYContainer as k, VisArea as C, VisAxis as s, VisCrosshair as T, VisBulletLegend as b } from "@unovis/vue";
2
+ import { VisXYContainer as k, VisArea as C, VisAxis as c, VisCrosshair as T, VisBulletLegend as b } from "@unovis/vue";
3
3
  import { CurveType as x } from "@unovis/ts";
4
4
  import B from "../Tooltip.js";
5
5
  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
9
9
  categories: {},
10
10
  hideTooltip: { type: Boolean }
11
11
  },
12
- setup(c) {
13
- const a = c, l = f(() => (e) => {
14
- if (typeof window > "u")
12
+ setup(s) {
13
+ const a = s, l = f(() => (e) => {
14
+ if (typeof window > "u" || typeof document > "u")
15
15
  return "";
16
- const n = y(B, {
17
- data: e,
18
- categories: a.categories
19
- }), r = document.createElement("div");
20
- n.mount(r);
21
- const u = r.innerHTML;
22
- return n.unmount(), u;
23
- }), m = (e) => Number.parseInt(e.time), p = [(e) => e.firstTime, (e) => e.returning];
24
- return (e, n) => (i(), h("div", N, [
16
+ try {
17
+ const r = y(B, {
18
+ data: e,
19
+ categories: a.categories
20
+ }), n = document.createElement("div");
21
+ r.mount(n);
22
+ const p = n.innerHTML;
23
+ return r.unmount(), p;
24
+ } catch {
25
+ return "";
26
+ }
27
+ }), m = (e) => Number.parseInt(e.time), u = [(e) => e.firstTime, (e) => e.returning];
28
+ return (e, r) => (i(), h("div", N, [
25
29
  o(t(k), {
26
30
  data: e.data,
27
31
  height: 200
@@ -29,16 +33,16 @@ const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center
29
33
  default: _(() => [
30
34
  o(t(C), {
31
35
  x: m,
32
- y: p,
33
- color: Object.values(a.categories).map((r) => r.color),
36
+ y: u,
37
+ color: Object.values(a.categories).map((n) => n.color),
34
38
  "curve-type": t(x).Linear
35
39
  }, null, 8, ["color", "curve-type"]),
36
- o(t(s), {
40
+ o(t(c), {
37
41
  type: "x",
38
42
  label: "Time",
39
43
  "num-ticks": 12
40
44
  }),
41
- o(t(s), {
45
+ o(t(c), {
42
46
  type: "y",
43
47
  label: "Number of visitors",
44
48
  "num-ticks": 3
@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"AreaStackedChart.js","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport {\n VisXYContainer,\n VisAxis,\n VisArea,\n VisBulletLegend,\n VisCrosshair,\n} from \"@unovis/vue\";\nimport { BulletLegendItemInterface, CurveType } from \"@unovis/ts\";\nimport Tooltip from \"./../Tooltip.vue\";\nimport { computed, createApp } from \"vue\";\n\nexport type AreaStackedChartProps<T> = {\n data: T[];\n categories: Record<string, BulletLegendItemInterface>;\n hideTooltip?: boolean;\n};\n\nconst props = defineProps<AreaStackedChartProps<T>>();\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n\nconst x = (d: any) => {\n return Number.parseInt(d.time);\n};\nconst y = [(d: any) => d.firstTime, (d: any) => d.returning];\n</script>\n\n<template>\n <div class=\"flex flex-col space-y-4\">\n <VisXYContainer :data=\"data\" :height=\"200\">\n <VisArea\n :x=\"x\"\n :y=\"y\"\n :color=\"Object.values(props.categories).map((i) => i.color)\"\n :curve-type=\"CurveType.Linear\"\n />\n <VisAxis type=\"x\" label=\"Time\" :num-ticks=\"12\" />\n <VisAxis type=\"y\" label=\"Number of visitors\" :num-ticks=\"3\" />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","generateTooltip","computed","d","app","createApp","Tooltip","container","html","x","y"],"mappings":";;;;;;;;;;;;AAkBA,UAAMA,IAAQC,GAERC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYJ,EAAM;AAAA,QAAA,CACnB,GAEKQ,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD,GAEKC,IAAI,CAACN,MACF,OAAO,SAASA,EAAE,IAAI,GAEzBO,IAAI,CAAC,CAACP,MAAWA,EAAE,WAAW,CAACA,MAAWA,EAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=BarChart.cjs.map
@@ -1 +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"}
1
+ {"version":3,"file":"BarChart.cjs","sources":["../../../src/components/Bar/BarChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, ComputedRef, createApp } from \"vue\";\nimport { BulletLegendItemInterface, GroupedBar, Orientation, StackedBar } from \"@unovis/ts\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisGroupedBar,\n VisStackedBar,\n VisTooltip,\n VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype BarChartProps<T> = {\n data: T[];\n stacked?: boolean;\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx?: number) => string | number;\n yFormatter?: (i: number, idx?: number) => string | number;\n yNumTicks?: number;\n xNumTicks?: number;\n yAxis: (keyof T)[];\n groupPadding?: number;\n barPadding?: number;\n radius?: number;\n hideLegend?: boolean;\n orientation?: Orientation;\n paginationPosition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<BarChartProps<T>>(), {\n orientation: Orientation.Vertical,\n paginationPosition: PaginationPosition.Bottom,\n});\n\nconst yAxis: ComputedRef<((d: T) => T[keyof T])[]> = computed(() => {\n return props.yAxis.map((key) => (d: T) => {\n return d[key];\n });\n});\n\nconst color = (_: T, i: number) => Object.values(props.categories)[i].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n\nconst PaginationPositionTop = computed(\n () => props.paginationPosition === PaginationPosition.Top\n);\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n >\n <VisXYContainer :height=\"height\">\n <VisTooltip\n :triggers=\"{\n [GroupedBar.selectors.bar]: generateTooltip,\n [StackedBar.selectors.bar]: generateTooltip,\n }\"\n />\n\n <VisGroupedBar\n v-if=\"!stacked\"\n :data=\"data\"\n :x=\"(_: T, i: number) => i\"\n :y=\"yAxis\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :color=\"color\"\n :rounded-corners=\"radius ?? 0\"\n :group-padding=\"groupPadding ?? 0\"\n :bar-padding=\"barPadding ?? 0.2\"\n :orientation=\"orientation ?? Orientation.Vertical\"\n />\n <VisStackedBar\n v-else\n :data=\"data\"\n :x=\"(_: T, i: number) => i\"\n :y=\"yAxis\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :color=\"color\"\n :rounded-corners=\"radius ?? 0\"\n :group-padding=\"groupPadding ?? 0\"\n :bar-padding=\"barPadding ?? 0.2\"\n :orientation=\"orientation ?? Orientation.Vertical\"\n />\n <VisAxis\n type=\"x\"\n :label=\"xLabel\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks\"\n :tick-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :label=\"yLabel\"\n :grid-line=\"orientation !== Orientation.Horizontal\"\n :domain-line=\"false\"\n :tick-format=\"yFormatter\"\n />\n </VisXYContainer>\n <div\n v-if=\"!hideLegend\"\n class=\"flex items center justify-end\"\n :class=\"{ 'pb-4': PaginationPositionTop }\"\n >\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","yAxis","computed","key","d","color","_","i","generateTooltip","app","createApp","Tooltip","container","html","PaginationPositionTop","PaginationPosition"],"mappings":"ulBAoCA,MAAMA,EAAQC,EAKRC,EAA+CC,EAAAA,SAAS,IACrDH,EAAM,MAAM,IAAKI,GAASC,GACxBA,EAAED,CAAG,CACb,CACF,EAEKE,EAAQ,CAACC,EAAMC,IAAc,OAAO,OAAOR,EAAM,UAAU,EAAEQ,CAAC,EAAE,MAEhEC,EAAkBN,EAAAA,SAAS,IAAOE,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAK,EAAMC,YAAUC,UAAS,CAC7B,KAAMP,EACN,WAAYL,EAAM,UAAA,CACnB,EAEKa,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAEKC,EAAwBZ,EAAA,SAC5B,IAAMH,EAAM,qBAAuBgB,qBAAmB,GACxD"}
@@ -1,5 +1,5 @@
1
- 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";
2
- import { Orientation as d, StackedBar as L, GroupedBar as T } from "@unovis/ts";
1
+ 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";
2
+ import { Orientation as l, StackedBar as L, GroupedBar as T } from "@unovis/ts";
3
3
  import { VisXYContainer as C, VisTooltip as A, VisGroupedBar as N, VisStackedBar as F, VisAxis as b, VisBulletLegend as j } from "@unovis/vue";
4
4
  import w from "../Tooltip.js";
5
5
  import { PaginationPosition as k } from "../../types.js";
@@ -21,38 +21,42 @@ const H = /* @__PURE__ */ v({
21
21
  barPadding: {},
22
22
  radius: {},
23
23
  hideLegend: { type: Boolean },
24
- orientation: { default: d.Vertical },
24
+ orientation: { default: l.Vertical },
25
25
  paginationPosition: { default: k.Bottom }
26
26
  },
27
27
  setup(h) {
28
- const r = h, u = s(() => r.yAxis.map((e) => (i) => i[e])), p = (e, i) => Object.values(r.categories)[i].color, g = s(() => (e) => {
29
- if (typeof window > "u")
28
+ const n = h, u = s(() => n.yAxis.map((e) => (i) => i[e])), p = (e, i) => Object.values(n.categories)[i].color, c = s(() => (e) => {
29
+ if (typeof window > "u" || typeof document > "u")
30
30
  return "";
31
- const i = B(w, {
32
- data: e,
33
- categories: r.categories
34
- }), t = document.createElement("div");
35
- i.mount(t);
36
- const o = t.innerHTML;
37
- return i.unmount(), o;
38
- }), m = s(
39
- () => r.paginationPosition === k.Top
31
+ try {
32
+ const i = B(w, {
33
+ data: e,
34
+ categories: n.categories
35
+ }), t = document.createElement("div");
36
+ i.mount(t);
37
+ const r = t.innerHTML;
38
+ return i.unmount(), r;
39
+ } catch {
40
+ return "";
41
+ }
42
+ }), g = s(
43
+ () => n.paginationPosition === k.Top
40
44
  );
41
- return (e, i) => (l(), c("div", {
42
- class: f(["flex flex-col space-y-4", { "flex-col-reverse": m.value }])
45
+ return (e, i) => (d(), m("div", {
46
+ class: f(["flex flex-col space-y-4", { "flex-col-reverse": g.value }])
43
47
  }, [
44
- n(a(C), { height: e.height }, {
48
+ o(a(C), { height: e.height }, {
45
49
  default: V(() => [
46
- n(a(A), {
50
+ o(a(A), {
47
51
  triggers: {
48
- [a(T).selectors.bar]: g.value,
49
- [a(L).selectors.bar]: g.value
52
+ [a(T).selectors.bar]: c.value,
53
+ [a(L).selectors.bar]: c.value
50
54
  }
51
55
  }, null, 8, ["triggers"]),
52
- e.stacked ? (l(), y(a(F), {
56
+ e.stacked ? (d(), y(a(F), {
53
57
  key: 1,
54
58
  data: e.data,
55
- x: (t, o) => o,
59
+ x: (t, r) => r,
56
60
  y: u.value,
57
61
  "grid-line": !1,
58
62
  "domain-line": !1,
@@ -60,11 +64,11 @@ const H = /* @__PURE__ */ v({
60
64
  "rounded-corners": e.radius ?? 0,
61
65
  "group-padding": e.groupPadding ?? 0,
62
66
  "bar-padding": e.barPadding ?? 0.2,
63
- orientation: e.orientation ?? a(d).Vertical
64
- }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (l(), y(a(N), {
67
+ orientation: e.orientation ?? a(l).Vertical
68
+ }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), y(a(N), {
65
69
  key: 0,
66
70
  data: e.data,
67
- x: (t, o) => o,
71
+ x: (t, r) => r,
68
72
  y: u.value,
69
73
  "grid-line": !1,
70
74
  "domain-line": !1,
@@ -72,9 +76,9 @@ const H = /* @__PURE__ */ v({
72
76
  "rounded-corners": e.radius ?? 0,
73
77
  "group-padding": e.groupPadding ?? 0,
74
78
  "bar-padding": e.barPadding ?? 0.2,
75
- orientation: e.orientation ?? a(d).Vertical
79
+ orientation: e.orientation ?? a(l).Vertical
76
80
  }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
77
- n(a(b), {
81
+ o(a(b), {
78
82
  type: "x",
79
83
  label: e.xLabel,
80
84
  "grid-line": !1,
@@ -83,21 +87,21 @@ const H = /* @__PURE__ */ v({
83
87
  "num-ticks": e.xNumTicks,
84
88
  "tick-line": !1
85
89
  }, null, 8, ["label", "tick-format", "num-ticks"]),
86
- n(a(b), {
90
+ o(a(b), {
87
91
  type: "y",
88
92
  label: e.yLabel,
89
- "grid-line": e.orientation !== a(d).Horizontal,
93
+ "grid-line": e.orientation !== a(l).Horizontal,
90
94
  "domain-line": !1,
91
95
  "tick-format": e.yFormatter
92
96
  }, null, 8, ["label", "grid-line", "tick-format"])
93
97
  ]),
94
98
  _: 1
95
99
  }, 8, ["height"]),
96
- e.hideLegend ? P("", !0) : (l(), c("div", {
100
+ e.hideLegend ? P("", !0) : (d(), m("div", {
97
101
  key: 0,
98
- class: f(["flex items center justify-end", { "pb-4": m.value }])
102
+ class: f(["flex items center justify-end", { "pb-4": g.value }])
99
103
  }, [
100
- n(a(j), {
104
+ o(a(j), {
101
105
  items: Object.values(e.categories)
102
106
  }, null, 8, ["items"])
103
107
  ], 2))
@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"BarChart.js","sources":["../../../src/components/Bar/BarChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, ComputedRef, createApp } from \"vue\";\nimport { BulletLegendItemInterface, GroupedBar, Orientation, StackedBar } from \"@unovis/ts\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisGroupedBar,\n VisStackedBar,\n VisTooltip,\n VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype BarChartProps<T> = {\n data: T[];\n stacked?: boolean;\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx?: number) => string | number;\n yFormatter?: (i: number, idx?: number) => string | number;\n yNumTicks?: number;\n xNumTicks?: number;\n yAxis: (keyof T)[];\n groupPadding?: number;\n barPadding?: number;\n radius?: number;\n hideLegend?: boolean;\n orientation?: Orientation;\n paginationPosition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<BarChartProps<T>>(), {\n orientation: Orientation.Vertical,\n paginationPosition: PaginationPosition.Bottom,\n});\n\nconst yAxis: ComputedRef<((d: T) => T[keyof T])[]> = computed(() => {\n return props.yAxis.map((key) => (d: T) => {\n return d[key];\n });\n});\n\nconst color = (_: T, i: number) => Object.values(props.categories)[i].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n\nconst PaginationPositionTop = computed(\n () => props.paginationPosition === PaginationPosition.Top\n);\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n >\n <VisXYContainer :height=\"height\">\n <VisTooltip\n :triggers=\"{\n [GroupedBar.selectors.bar]: generateTooltip,\n [StackedBar.selectors.bar]: generateTooltip,\n }\"\n />\n\n <VisGroupedBar\n v-if=\"!stacked\"\n :data=\"data\"\n :x=\"(_: T, i: number) => i\"\n :y=\"yAxis\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :color=\"color\"\n :rounded-corners=\"radius ?? 0\"\n :group-padding=\"groupPadding ?? 0\"\n :bar-padding=\"barPadding ?? 0.2\"\n :orientation=\"orientation ?? Orientation.Vertical\"\n />\n <VisStackedBar\n v-else\n :data=\"data\"\n :x=\"(_: T, i: number) => i\"\n :y=\"yAxis\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :color=\"color\"\n :rounded-corners=\"radius ?? 0\"\n :group-padding=\"groupPadding ?? 0\"\n :bar-padding=\"barPadding ?? 0.2\"\n :orientation=\"orientation ?? Orientation.Vertical\"\n />\n <VisAxis\n type=\"x\"\n :label=\"xLabel\"\n :grid-line=\"false\"\n :domain-line=\"false\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks\"\n :tick-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :label=\"yLabel\"\n :grid-line=\"orientation !== Orientation.Horizontal\"\n :domain-line=\"false\"\n :tick-format=\"yFormatter\"\n />\n </VisXYContainer>\n <div\n v-if=\"!hideLegend\"\n class=\"flex items center justify-end\"\n :class=\"{ 'pb-4': PaginationPositionTop }\"\n >\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","yAxis","computed","key","d","color","_","generateTooltip","app","createApp","Tooltip","container","html","PaginationPositionTop","PaginationPosition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,UAAMA,IAAQC,GAKRC,IAA+CC,EAAS,MACrDH,EAAM,MAAM,IAAI,CAACI,MAAQ,CAACC,MACxBA,EAAED,CAAG,CACb,CACF,GAEKE,IAAQ,CAACC,GAAM,MAAc,OAAO,OAAOP,EAAM,UAAU,EAAE,CAAC,EAAE,OAEhEQ,IAAkBL,EAAS,MAAM,CAACE,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAI,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMN;AAAA,UACN,YAAYL,EAAM;AAAA,QAAA,CACnB,GAEKY,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD,GAEKC,IAAwBX;AAAA,MAC5B,MAAMH,EAAM,uBAAuBe,EAAmB;AAAA,IACxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=LineChart.cjs.map
@@ -1 +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"}
1
+ {"version":3,"file":"LineChart.cjs","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, BulletLegendItemInterface, Position } from \"@unovis/ts\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx: number) => string;\n curveType?: CurveType;\n yNumTicks?: number;\n xNumTicks?: number;\n paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n</script>\n\n<template>\n <div\n class=\"space-y-4 flex flex-col\"\n :class=\"{\n 'flex-col-reverse': props.paginationPosition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\">\n <VisTooltip\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"color(iKey)\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks ?? 4\"\n :label=\"xLabel\"\n :label-margin=\"8\"\n :domain-line=\"false\"\n :grid-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? 4\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :domain-line=\"false\"\n />\n <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":"0dA+BA,MAAMA,EAAQC,EAERC,EAASC,GAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,MAE9DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD"}
@@ -1,4 +1,4 @@
1
- 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";
1
+ 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";
2
2
  import { Position as m, CurveType as C } from "@unovis/ts";
3
3
  import { VisXYContainer as F, VisTooltip as N, VisLine as j, VisAxis as u, VisCrosshair as B, VisBulletLegend as w } from "@unovis/vue";
4
4
  import z from "../Tooltip.js";
@@ -19,17 +19,21 @@ const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
19
19
  },
20
20
  setup(p) {
21
21
  const n = p, d = (e) => Object.values(n.categories)[e].color, f = h(() => (e) => {
22
- if (typeof window > "u")
22
+ if (typeof window > "u" || typeof document > "u")
23
23
  return "";
24
- const r = k(z, {
25
- data: e,
26
- categories: n.categories
27
- }), a = document.createElement("div");
28
- r.mount(a);
29
- const i = a.innerHTML;
30
- return r.unmount(), i;
24
+ try {
25
+ const r = k(z, {
26
+ data: e,
27
+ categories: n.categories
28
+ }), a = document.createElement("div");
29
+ r.mount(a);
30
+ const i = a.innerHTML;
31
+ return r.unmount(), i;
32
+ } catch {
33
+ return "";
34
+ }
31
35
  });
32
- return (e, r) => (l(), c("div", {
36
+ return (e, r) => (l(), s("div", {
33
37
  class: v(["space-y-4 flex flex-col", {
34
38
  "flex-col-reverse": n.paginationPosition === "top"
35
39
  }])
@@ -43,10 +47,10 @@ const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
43
47
  "horizontal-placement": t(m).Right,
44
48
  "vertical-placement": t(m).Top
45
49
  }, null, 8, ["horizontal-placement", "vertical-placement"]),
46
- (l(!0), c(L, null, V(Object.keys(n.categories), (a, i) => (l(), x(t(j), {
50
+ (l(!0), s(L, null, V(Object.keys(n.categories), (a, i) => (l(), x(t(j), {
47
51
  key: i,
48
- x: (s, y) => y,
49
- y: (s) => s[a],
52
+ x: (c, y) => y,
53
+ y: (c) => c[a],
50
54
  color: d(i),
51
55
  "curve-type": e.curveType ?? t(C).MonotoneX
52
56
  }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"LineChart.js","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, BulletLegendItemInterface, Position } from \"@unovis/ts\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx: number) => string;\n curveType?: CurveType;\n yNumTicks?: number;\n xNumTicks?: number;\n paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n</script>\n\n<template>\n <div\n class=\"space-y-4 flex flex-col\"\n :class=\"{\n 'flex-col-reverse': props.paginationPosition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\">\n <VisTooltip\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"color(iKey)\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks ?? 4\"\n :label=\"xLabel\"\n :label-margin=\"8\"\n :domain-line=\"false\"\n :grid-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? 4\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :domain-line=\"false\"\n />\n <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,OAE9DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYN,EAAM;AAAA,QAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/Area/AreaChart.cjs"),t=require("./components/AreaStacked/AreaStackedChart.cjs"),r=require("./components/Line/LineChart.cjs"),_=require("./components/Bar/BarChart.cjs"),u=require("./components/Donut/DonutChart.cjs"),a=require("./components/Crosshair/Crosshair.cjs");exports.AreaChart=e.default;exports.AreaStackedChart=t.default;exports.LineChart=r.default;exports.BarChart=_.default;exports.DonutChart=u.default;exports.Crosshair=a.default;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./utils.cjs"),t=require("./components/Area/AreaChart.cjs"),r=require("./components/AreaStacked/AreaStackedChart.cjs"),u=require("./components/Line/LineChart.cjs"),_=require("./components/Bar/BarChart.cjs"),a=require("./components/Donut/DonutChart.cjs"),s=require("./components/Crosshair/Crosshair.cjs");exports.hasAutoOrScrollCss=e.hasAutoOrScrollCss;exports.isBrowser=e.isBrowser;exports.isIE=e.isIE;exports.isVerticalOrientation=e.isVerticalOrientation;exports.AreaChart=t.default;exports.AreaStackedChart=r.default;exports.LineChart=u.default;exports.BarChart=_.default;exports.DonutChart=a.default;exports.Crosshair=s.default;
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from './components';
2
+ export * from './utils';
package/dist/index.js CHANGED
@@ -1,15 +1,20 @@
1
- import { default as t } from "./components/Area/AreaChart.js";
2
- import { default as o } from "./components/AreaStacked/AreaStackedChart.js";
3
- import { default as s } from "./components/Line/LineChart.js";
4
- import { default as u } from "./components/Bar/BarChart.js";
5
- import { default as l } from "./components/Donut/DonutChart.js";
6
- import { default as p } from "./components/Crosshair/Crosshair.js";
1
+ import { hasAutoOrScrollCss as t, isBrowser as e, isIE as o, isVerticalOrientation as s } from "./utils.js";
2
+ import { default as l } from "./components/Area/AreaChart.js";
3
+ import { default as u } from "./components/AreaStacked/AreaStackedChart.js";
4
+ import { default as h } from "./components/Line/LineChart.js";
5
+ import { default as p } from "./components/Bar/BarChart.js";
6
+ import { default as C } from "./components/Donut/DonutChart.js";
7
+ import { default as c } from "./components/Crosshair/Crosshair.js";
7
8
  export {
8
- t as AreaChart,
9
- o as AreaStackedChart,
10
- u as BarChart,
11
- p as Crosshair,
12
- l as DonutChart,
13
- s as LineChart
9
+ l as AreaChart,
10
+ u as AreaStackedChart,
11
+ p as BarChart,
12
+ c as Crosshair,
13
+ C as DonutChart,
14
+ h as LineChart,
15
+ t as hasAutoOrScrollCss,
16
+ e as isBrowser,
17
+ o as isIE,
18
+ s as isVerticalOrientation
14
19
  };
15
20
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
package/dist/utils.cjs ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=typeof window<"u"&&typeof document<"u",e=t&&/msie|trident/i.test(typeof navigator<"u"&&(navigator==null?void 0:navigator.userAgent)||""),i=/auto|scroll/,o=/^tb|vertical/;exports.hasAutoOrScrollCss=i;exports.isBrowser=t;exports.isIE=e;exports.isVerticalOrientation=o;
2
+ //# sourceMappingURL=utils.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.cjs","sources":["../src/utils.ts"],"sourcesContent":["// Browser environment detection utilities\n\nexport const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';\n\nexport const isIE = isBrowser && /msie|trident/i.test(\n typeof navigator !== 'undefined' && navigator?.userAgent || ''\n);\n\nexport const hasAutoOrScrollCss = /auto|scroll/;\nexport const isVerticalOrientation = /^tb|vertical/;"],"names":["isBrowser","isIE","hasAutoOrScrollCss","isVerticalOrientation"],"mappings":"gFAEO,MAAMA,EAAY,OAAO,OAAW,KAAe,OAAO,SAAa,IAEjEC,EAAOD,GAAa,gBAAgB,KAC/C,OAAO,UAAc,MAAe,iCAAW,YAAa,EAC9D,EAEaE,EAAqB,cACrBC,EAAwB"}
@@ -0,0 +1,4 @@
1
+ export declare const isBrowser: boolean;
2
+ export declare const isIE: boolean;
3
+ export declare const hasAutoOrScrollCss: RegExp;
4
+ export declare const isVerticalOrientation: RegExp;
package/dist/utils.js ADDED
@@ -0,0 +1,10 @@
1
+ const t = typeof window < "u" && typeof document < "u", e = t && /msie|trident/i.test(
2
+ typeof navigator < "u" && (navigator == null ? void 0 : navigator.userAgent) || ""
3
+ ), n = /auto|scroll/, o = /^tb|vertical/;
4
+ export {
5
+ n as hasAutoOrScrollCss,
6
+ t as isBrowser,
7
+ e as isIE,
8
+ o as isVerticalOrientation
9
+ };
10
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["// Browser environment detection utilities\n\nexport const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';\n\nexport const isIE = isBrowser && /msie|trident/i.test(\n typeof navigator !== 'undefined' && navigator?.userAgent || ''\n);\n\nexport const hasAutoOrScrollCss = /auto|scroll/;\nexport const isVerticalOrientation = /^tb|vertical/;"],"names":["isBrowser","isIE","hasAutoOrScrollCss","isVerticalOrientation"],"mappings":"AAEO,MAAMA,IAAY,OAAO,SAAW,OAAe,OAAO,WAAa,KAEjEC,IAAOD,KAAa,gBAAgB;AAAA,EAC/C,OAAO,YAAc,QAAe,uCAAW,cAAa;AAC9D,GAEaE,IAAqB,eACrBC,IAAwB;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-chrts",
3
- "version": "0.0.149",
3
+ "version": "0.0.151",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "dist"