vue-chrts 0.0.134 → 0.0.137

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.
Files changed (109) hide show
  1. package/dist/components/Area/AreaChart.cjs +7 -0
  2. package/dist/components/Area/AreaChart.cjs.map +1 -0
  3. package/dist/components/Area/AreaChart.js +123 -0
  4. package/dist/components/Area/AreaChart.js.map +1 -0
  5. package/dist/components/Area/AreaChart.vue.d.ts +36 -0
  6. package/dist/components/Area/AreaChart2.cjs +2 -0
  7. package/dist/components/Area/AreaChart2.cjs.map +1 -0
  8. package/dist/components/Area/AreaChart2.js +5 -0
  9. package/dist/components/Area/AreaChart2.js.map +1 -0
  10. package/dist/components/Area/index.d.ts +1 -0
  11. package/dist/components/AreaStacked/AreaStackedChart.cjs +2 -0
  12. package/dist/components/AreaStacked/AreaStackedChart.cjs.map +1 -0
  13. package/dist/components/AreaStacked/AreaStackedChart.js +51 -0
  14. package/dist/components/AreaStacked/AreaStackedChart.js.map +1 -0
  15. package/dist/components/AreaStacked/AreaStackedChart.vue.d.ts +18 -0
  16. package/dist/components/AreaStacked/AreaStackedChart2.cjs +2 -0
  17. package/dist/components/AreaStacked/AreaStackedChart2.cjs.map +1 -0
  18. package/dist/components/AreaStacked/AreaStackedChart2.js +5 -0
  19. package/dist/components/AreaStacked/AreaStackedChart2.js.map +1 -0
  20. package/{src/components/AreaStacked/index.ts → dist/components/AreaStacked/index.d.ts} +1 -1
  21. package/dist/components/Bar/index.d.ts +1 -0
  22. package/dist/components/Crosshair/Crosshair.cjs +2 -0
  23. package/dist/components/Crosshair/Crosshair.cjs.map +1 -0
  24. package/dist/components/Crosshair/Crosshair.js +40 -0
  25. package/dist/components/Crosshair/Crosshair.js.map +1 -0
  26. package/dist/components/Crosshair/Crosshair.vue.d.ts +38 -0
  27. package/dist/components/Crosshair/Crosshair2.cjs +2 -0
  28. package/dist/components/Crosshair/Crosshair2.cjs.map +1 -0
  29. package/dist/components/Crosshair/Crosshair2.js +5 -0
  30. package/dist/components/Crosshair/Crosshair2.js.map +1 -0
  31. package/dist/components/Crosshair/index.d.ts +1 -0
  32. package/dist/components/Donut/DonutChart.cjs +6 -0
  33. package/dist/components/Donut/DonutChart.cjs.map +1 -0
  34. package/dist/components/Donut/DonutChart.js +59 -0
  35. package/dist/components/Donut/DonutChart.js.map +1 -0
  36. package/dist/components/Donut/DonutChart.vue.d.ts +31 -0
  37. package/dist/components/Donut/DonutChart2.cjs +2 -0
  38. package/dist/components/Donut/DonutChart2.cjs.map +1 -0
  39. package/dist/components/Donut/DonutChart2.js +5 -0
  40. package/dist/components/Donut/DonutChart2.js.map +1 -0
  41. package/dist/components/Donut/index.d.ts +1 -0
  42. package/dist/components/Line/index.d.ts +1 -0
  43. package/dist/components/Tooltip.cjs +2 -0
  44. package/dist/components/Tooltip.cjs.map +1 -0
  45. package/dist/components/Tooltip.js +21 -0
  46. package/dist/components/Tooltip.js.map +1 -0
  47. package/dist/components/Tooltip.vue.d.ts +14 -0
  48. package/dist/components/Tooltip2.cjs +2 -0
  49. package/dist/components/Tooltip2.cjs.map +1 -0
  50. package/dist/components/Tooltip2.js +5 -0
  51. package/dist/components/Tooltip2.js.map +1 -0
  52. package/dist/components.d.ts +4 -0
  53. package/dist/index.cjs +2 -0
  54. package/dist/index.cjs.map +1 -0
  55. package/dist/index.d.ts +5 -0
  56. package/dist/index.js +13 -0
  57. package/dist/index.js.map +1 -0
  58. package/package.json +13 -10
  59. package/.vscode/extensions.json +0 -3
  60. package/auto-imports.d.ts +0 -58
  61. package/components.d.ts +0 -46
  62. package/image.png +0 -0
  63. package/index.html +0 -14
  64. package/index.js +0 -2
  65. package/src/components/Area/AreaChart.vue +0 -141
  66. package/src/components/Area/index.ts +0 -1
  67. package/src/components/AreaStacked/AreaStackedChart.vue +0 -51
  68. package/src/components/Bar/BarChart.vue +0 -130
  69. package/src/components/Bar/index.ts +0 -1
  70. package/src/components/Crosshair/Crosshair.vue +0 -46
  71. package/src/components/Crosshair/index.ts +0 -1
  72. package/src/components/Donut/DonutChart.vue +0 -71
  73. package/src/components/Donut/index.ts +0 -1
  74. package/src/components/Line/LineChart.vue +0 -94
  75. package/src/components/Line/index.ts +0 -1
  76. package/src/components/Tooltip.vue +0 -17
  77. package/src/components.ts +0 -6
  78. package/src/index.ts +0 -6
  79. package/src/shims-vue.d.ts +0 -1
  80. package/src-demo/AdminTemplate.vue +0 -5
  81. package/src-demo/App.vue +0 -37
  82. package/src-demo/AreaChartPage.vue +0 -125
  83. package/src-demo/BarChartPage.vue +0 -166
  84. package/src-demo/DashboardTemplate.vue +0 -687
  85. package/src-demo/Homepage.vue +0 -325
  86. package/src-demo/LineChartPage.vue +0 -140
  87. package/src-demo/assets/main.css +0 -34
  88. package/src-demo/components/Progress/Progress.vue +0 -42
  89. package/src-demo/components/Progress/index.ts +0 -1
  90. package/src-demo/components/Status/Status.vue +0 -95
  91. package/src-demo/components/Status/index.ts +0 -1
  92. package/src-demo/components/charts.ts +0 -37
  93. package/src-demo/components/index.ts +0 -49
  94. package/src-demo/data/AreaChartData.ts +0 -294
  95. package/src-demo/data/BarChartData.ts +0 -79
  96. package/src-demo/data/IncomeExpenseData.ts +0 -189
  97. package/src-demo/data/InvestmentData.ts +0 -352
  98. package/src-demo/data/RevenueData.ts +0 -58
  99. package/src-demo/data/VisitorsData.ts +0 -260
  100. package/src-demo/elements/Button.vue +0 -13
  101. package/src-demo/elements/Card.vue +0 -17
  102. package/src-demo/elements/Dropdown.vue +0 -112
  103. package/src-demo/elements/Logo.vue +0 -8
  104. package/src-demo/elements/Table.vue +0 -363
  105. package/src-demo/elements/TopBar.vue +0 -40
  106. package/src-demo/index.ts +0 -58
  107. package/tsconfig.json +0 -11
  108. package/vite.config.ts +0 -63
  109. /package/{public → dist}/vite.svg +0 -0
@@ -0,0 +1,7 @@
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"),f=require("../Tooltip.cjs"),y={key:0,class:"flex items center justify-end"},k=e.defineComponent({__name:"AreaChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{},yFormatter:{},curveType:{},xNumTicks:{default:r=>r.data.length>24?24/4:r.data.length-1},yNumTicks:{default:r=>r.data.length>24?24/4:r.data.length-1},hideLegend:{type:Boolean},hideTooltip:{type:Boolean},gridLineX:{type:Boolean},domainLineX:{type:Boolean},gridLineY:{type:Boolean},domainLineY:{type:Boolean},paginationPoisition:{}},setup(r){const l=r,s=Object.values(l.categories).map(t=>t.color),p=e.computed(()=>t=>{const o=e.createApp(f.default,{data:t,categories:l.categories}),i=document.createElement("div");o.mount(i);const a=i.innerHTML;return o.unmount(),a});function m(t){var o;return{y:i=>Number(i[t]),color:((o=l.categories[t])==null?void 0:o.color)??"#3b82f6"}}const g=s.map((t,o)=>`
2
+ <linearGradient id="gradient${o}-${t}" gradientTransform="rotate(90)">
3
+ <stop offset="0%" stop-color="${t}" stop-opacity="1" />
4
+ <stop offset="100%" stop-color="${t}" stop-opacity="0" />
5
+ </linearGradient>
6
+ `).join("");return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col space-y-4",{"flex-col-reverse":l.paginationPoisition==="top"}])},[e.createVNode(e.unref(n.VisXYContainer),{data:t.data,height:t.height,"svg-defs":e.unref(g)},{default:e.withCtx(()=>[t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(n.VisTooltip),{key:0,"horizontal-placement":e.unref(c.Position).Right,"vertical-placement":e.unref(c.Position).Top},null,8,["horizontal-placement","vertical-placement"])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(l.categories),(i,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:a},[e.createVNode(e.unref(n.VisArea),e.mergeProps({x:(u,d)=>d,ref_for:!0},m(i),{color:`url(#gradient${a}-${e.unref(s)[a]})`,opacity:.5,"curve-type":t.curveType??e.unref(c.CurveType).MonotoneX}),null,16,["x","color","curve-type"]),e.createVNode(e.unref(n.VisLine),{x:(u,d)=>d,y:u=>u[i],color:e.unref(s)[a],"curve-type":t.curveType??e.unref(c.CurveType).MonotoneX},null,8,["x","y","color","curve-type"])],64))),128)),e.createVNode(e.unref(n.VisAxis),{type:"x","tick-format":t.xFormatter,"num-ticks":t.xNumTicks,label:t.xLabel,"grid-line":t.gridLineX,"domain-line":t.domainLineX,"tick-line":!!t.gridLineX},null,8,["tick-format","num-ticks","label","grid-line","domain-line","tick-line"]),e.createVNode(e.unref(n.VisAxis),{type:"y","num-ticks":t.yNumTicks??t.data.length,"tick-format":t.yFormatter,label:t.yLabel,"grid-line":t.gridLineY,"domain-line":t.domainLineY,"tick-line":!!t.gridLineY},null,8,["num-ticks","tick-format","label","grid-line","domain-line","tick-line"]),t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(n.VisCrosshair),{key:1,color:"#666",template:p.value},null,8,["template"]))]),_:1},8,["data","height","svg-defs"]),t.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",y,[e.createVNode(e.unref(n.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])]))],2))}});exports.default=k;
7
+ //# sourceMappingURL=AreaChart.cjs.map
@@ -0,0 +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 \"../..\";\n\ntype AreaChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx?: number) => string | number;\n curveType?: CurveType;\n xNumTicks?: number;\n yNumTicks?: number;\n hideLegend?: boolean;\n hideTooltip?: boolean;\n gridLineX?: boolean;\n domainLineX?: boolean;\n gridLineY?: boolean;\n domainLineY?: boolean;\n paginationPoisition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n xNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n yNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n return {\n y: (d: T) => Number(d[id as keyof typeof d]),\n color: props.categories[id]?.color ?? \"#3b82f6\",\n };\n}\n\nconst svgDefs = colors\n .map(\n (color, index) => `\n <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n </linearGradient>\n`\n )\n .join(\"\");\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{\n 'flex-col-reverse': props.paginationPoisition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\" :svg-defs=\"svgDefs\">\n <VisTooltip\n v-if=\"!hideTooltip\"\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisArea\n :x=\"(_: T, i: number) => i\"\n v-bind=\"accessors(i)\"\n :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n :opacity=\"0.5\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"colors[iKey]\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks\"\n :label=\"xLabel\"\n :grid-line=\"gridLineX\"\n :domain-line=\"domainLineX\"\n :tick-line=\"!!gridLineX\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? data.length\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :grid-line=\"gridLineY\"\n :domain-line=\"domainLineY\"\n :tick-line=\"!!gridLineY\"\n />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\n </VisXYContainer>\n <div v-if=\"!hideLegend\" class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index"],"mappings":"osBAqCA,MAAMA,EAAQC,EAORC,EAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAKG,GAAMA,EAAE,KAAK,EAE3DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CACzC,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,CAAA,CACR,EAED,SAASC,EAAUC,EAAsD,OAChE,MAAA,CACL,EAAIP,GAAS,OAAOA,EAAEO,CAAoB,CAAC,EAC3C,QAAOC,EAAAd,EAAM,WAAWa,CAAE,IAAnB,YAAAC,EAAsB,QAAS,SACxC,CAAA,CAGF,MAAMC,EAAUb,EACb,IACC,CAACc,EAAOC,IAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA,CAAA,EAIxC,KAAK,EAAE"}
@@ -0,0 +1,123 @@
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";
2
+ import { Position as y, CurveType as h } from "@unovis/ts";
3
+ import { VisXYContainer as Y, VisTooltip as j, VisArea as F, VisLine as A, VisAxis as k, VisCrosshair as P, VisBulletLegend as z } from "@unovis/vue";
4
+ import M from "../Tooltip.js";
5
+ const O = {
6
+ key: 0,
7
+ class: "flex items center justify-end"
8
+ }, H = /* @__PURE__ */ b({
9
+ __name: "AreaChart",
10
+ props: {
11
+ data: {},
12
+ height: {},
13
+ xLabel: {},
14
+ yLabel: {},
15
+ categories: {},
16
+ xFormatter: {},
17
+ yFormatter: {},
18
+ curveType: {},
19
+ xNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
20
+ yNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
21
+ hideLegend: { type: Boolean },
22
+ hideTooltip: { type: Boolean },
23
+ gridLineX: { type: Boolean },
24
+ domainLineX: { type: Boolean },
25
+ gridLineY: { type: Boolean },
26
+ domainLineY: { type: Boolean },
27
+ paginationPoisition: {}
28
+ },
29
+ setup(i) {
30
+ const s = i, m = Object.values(s.categories).map((e) => e.color), v = B(() => (e) => {
31
+ const o = V(M, {
32
+ data: e,
33
+ categories: s.categories
34
+ }), n = document.createElement("div");
35
+ o.mount(n);
36
+ const a = n.innerHTML;
37
+ return o.unmount(), a;
38
+ });
39
+ function L(e) {
40
+ var o;
41
+ return {
42
+ y: (n) => Number(n[e]),
43
+ color: ((o = s.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
44
+ };
45
+ }
46
+ const T = m.map(
47
+ (e, o) => `
48
+ <linearGradient id="gradient${o}-${e}" gradientTransform="rotate(90)">
49
+ <stop offset="0%" stop-color="${e}" stop-opacity="1" />
50
+ <stop offset="100%" stop-color="${e}" stop-opacity="0" />
51
+ </linearGradient>
52
+ `
53
+ ).join("");
54
+ return (e, o) => (r(), c("div", {
55
+ class: C(["flex flex-col space-y-4", {
56
+ "flex-col-reverse": s.paginationPoisition === "top"
57
+ }])
58
+ }, [
59
+ l(t(Y), {
60
+ data: e.data,
61
+ height: e.height,
62
+ "svg-defs": t(T)
63
+ }, {
64
+ default: X(() => [
65
+ e.hideTooltip ? u("", !0) : (r(), g(t(j), {
66
+ key: 0,
67
+ "horizontal-placement": t(y).Right,
68
+ "vertical-placement": t(y).Top
69
+ }, null, 8, ["horizontal-placement", "vertical-placement"])),
70
+ (r(!0), c(f, null, N(Object.keys(s.categories), (n, a) => (r(), c(f, { key: a }, [
71
+ l(t(F), $({
72
+ x: (d, p) => p,
73
+ ref_for: !0
74
+ }, L(n), {
75
+ color: `url(#gradient${a}-${t(m)[a]})`,
76
+ opacity: 0.5,
77
+ "curve-type": e.curveType ?? t(h).MonotoneX
78
+ }), null, 16, ["x", "color", "curve-type"]),
79
+ l(t(A), {
80
+ x: (d, p) => p,
81
+ y: (d) => d[n],
82
+ color: t(m)[a],
83
+ "curve-type": e.curveType ?? t(h).MonotoneX
84
+ }, null, 8, ["x", "y", "color", "curve-type"])
85
+ ], 64))), 128)),
86
+ l(t(k), {
87
+ type: "x",
88
+ "tick-format": e.xFormatter,
89
+ "num-ticks": e.xNumTicks,
90
+ label: e.xLabel,
91
+ "grid-line": e.gridLineX,
92
+ "domain-line": e.domainLineX,
93
+ "tick-line": !!e.gridLineX
94
+ }, null, 8, ["tick-format", "num-ticks", "label", "grid-line", "domain-line", "tick-line"]),
95
+ l(t(k), {
96
+ type: "y",
97
+ "num-ticks": e.yNumTicks ?? e.data.length,
98
+ "tick-format": e.yFormatter,
99
+ label: e.yLabel,
100
+ "grid-line": e.gridLineY,
101
+ "domain-line": e.domainLineY,
102
+ "tick-line": !!e.gridLineY
103
+ }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
104
+ e.hideTooltip ? u("", !0) : (r(), g(t(P), {
105
+ key: 1,
106
+ color: "#666",
107
+ template: v.value
108
+ }, null, 8, ["template"]))
109
+ ]),
110
+ _: 1
111
+ }, 8, ["data", "height", "svg-defs"]),
112
+ e.hideLegend ? u("", !0) : (r(), c("div", O, [
113
+ l(t(z), {
114
+ items: Object.values(e.categories)
115
+ }, null, 8, ["items"])
116
+ ]))
117
+ ], 2));
118
+ }
119
+ });
120
+ export {
121
+ H as default
122
+ };
123
+ //# sourceMappingURL=AreaChart.js.map
@@ -0,0 +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 \"../..\";\n\ntype AreaChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx?: number) => string | number;\n curveType?: CurveType;\n xNumTicks?: number;\n yNumTicks?: number;\n hideLegend?: boolean;\n hideTooltip?: boolean;\n gridLineX?: boolean;\n domainLineX?: boolean;\n gridLineY?: boolean;\n domainLineY?: boolean;\n paginationPoisition?: PaginationPosition;\n};\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n xNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n yNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n return {\n y: (d: T) => Number(d[id as keyof typeof d]),\n color: props.categories[id]?.color ?? \"#3b82f6\",\n };\n}\n\nconst svgDefs = colors\n .map(\n (color, index) => `\n <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n </linearGradient>\n`\n )\n .join(\"\");\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{\n 'flex-col-reverse': props.paginationPoisition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\" :svg-defs=\"svgDefs\">\n <VisTooltip\n v-if=\"!hideTooltip\"\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisArea\n :x=\"(_: T, i: number) => i\"\n v-bind=\"accessors(i)\"\n :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n :opacity=\"0.5\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"colors[iKey]\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks\"\n :label=\"xLabel\"\n :grid-line=\"gridLineX\"\n :domain-line=\"domainLineX\"\n :tick-line=\"!!gridLineX\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? data.length\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :grid-line=\"gridLineY\"\n :domain-line=\"domainLineY\"\n :tick-line=\"!!gridLineY\"\n />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\n </VisXYContainer>\n <div v-if=\"!hideLegend\" class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,UAAMA,IAAQC,GAORC,IAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAI,CAACG,MAAMA,EAAE,KAAK,GAE3DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AACzC,YAAAC,IAAMC,EAAUC,GAAS;AAAA,QAC7B,MAAMH;AAAA,QACN,YAAYN,EAAM;AAAA,MAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,MAAAH,EAAI,MAAMG,CAAS;AAEnB,YAAMC,IAAOD,EAAU;AACvB,aAAAH,EAAI,QAAQ,GAELI;AAAA,IAAA,CACR;AAED,aAASC,EAAUC,GAAsD;;AAChE,aAAA;AAAA,QACL,GAAG,CAACP,MAAS,OAAOA,EAAEO,CAAoB,CAAC;AAAA,QAC3C,SAAOC,IAAAd,EAAM,WAAWa,CAAE,MAAnB,gBAAAC,EAAsB,UAAS;AAAA,MACxC;AAAA,IAAA;AAGF,UAAMC,IAAUb,EACb;AAAA,MACC,CAACc,GAAOC,MAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA;AAAA,IAAA,EAIxC,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,36 @@
1
+ import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
2
+ import { PaginationPosition } from '../..';
3
+
4
+ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
5
+ props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
6
+ data: T[];
7
+ height: number;
8
+ xLabel?: string;
9
+ yLabel?: string;
10
+ categories: Record<string, BulletLegendItemInterface>;
11
+ xFormatter: (i: number, idx: number) => string;
12
+ yFormatter?: (i: number, idx?: number) => string | number;
13
+ curveType?: CurveType;
14
+ xNumTicks?: number;
15
+ yNumTicks?: number;
16
+ hideLegend?: boolean;
17
+ hideTooltip?: boolean;
18
+ gridLineX?: boolean;
19
+ domainLineX?: boolean;
20
+ gridLineY?: boolean;
21
+ domainLineY?: boolean;
22
+ paginationPoisition?: PaginationPosition;
23
+ }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
24
+ expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
25
+ attrs: any;
26
+ slots: ReturnType<() => {}>;
27
+ emit: typeof __VLS_emit;
28
+ }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
29
+ [key: string]: any;
30
+ }> & {
31
+ __ctx?: Awaited<typeof __VLS_setup>;
32
+ };
33
+ export default _default;
34
+ type __VLS_Prettify<T> = {
35
+ [K in keyof T]: T[K];
36
+ } & {};
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./AreaChart.cjs");exports.default=e.default;
2
+ //# sourceMappingURL=AreaChart2.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AreaChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,5 @@
1
+ import f from "./AreaChart.js";
2
+ export {
3
+ f as default
4
+ };
5
+ //# sourceMappingURL=AreaChart2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AreaChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1 @@
1
+ export { default as AreaChart } from './AreaChart.vue';
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("@unovis/vue"),i=require("@unovis/ts"),u={class:"flex flex-col space-y-4"},l={class:"flex items center justify-end"},d=e.defineComponent({__name:"AreaStackedChart",props:{data:{},categories:{}},setup(s){const o=s,a=t=>Number.parseInt(t.time),n=[t=>t.firstTime,t=>t.returning];return(t,f)=>(e.openBlock(),e.createElementBlock("div",u,[e.createVNode(e.unref(r.VisXYContainer),{data:t.data,height:200},{default:e.withCtx(()=>[e.createVNode(e.unref(r.VisArea),{x:a,y:n,color:Object.values(o.categories).map(c=>c.color),"curve-type":e.unref(i.CurveType).Linear},null,8,["color","curve-type"]),e.createVNode(e.unref(r.VisAxis),{type:"x",label:"Time","num-ticks":12}),e.createVNode(e.unref(r.VisAxis),{type:"y",label:"Number of visitors","num-ticks":3})]),_:1},8,["data"]),e.createElementVNode("div",l,[e.createVNode(e.unref(r.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])]))}});exports.default=d;
2
+ //# sourceMappingURL=AreaStackedChart.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AreaStackedChart.cjs","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { VisXYContainer, VisAxis, VisArea, VisBulletLegend } from '@unovis/vue'\nimport { BulletLegendItemInterface, CurveType } from '@unovis/ts'\n\nexport type AreaStackedChartProps<T> = {\n data: T[];\n categories: Record<string, BulletLegendItemInterface>;\n }\n\nconst props = defineProps<AreaStackedChartProps<T>>()\n\nconst x = (d: any) => {\n return Number.parseInt(d.time)\n}\nconst y = [\n (d: any) => d.firstTime,\n (d: any) => d.returning\n]\n</script>\n\n<template>\n <div class=\"flex flex-col space-y-4\">\n <VisXYContainer\n :data=\"data\"\n :height=\"200\"\n >\n <VisArea\n :x=\"x\"\n :y=\"y\"\n :color=\"Object.values(props.categories).map((i) => i.color) \"\n :curve-type=\"CurveType.Linear\"\n />\n <VisAxis\n type=\"x\"\n label=\"Time\"\n :num-ticks=\"12\"\n\n />\n <VisAxis\n type=\"y\"\n label=\"Number of visitors\"\n :num-ticks=\"3\"\n />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend\n :items=\"Object.values(categories)\"\n />\n </div>\n </div>\n</template>"],"names":["props","__props","x","d","y"],"mappings":"wVASA,MAAMA,EAAQC,EAERC,EAAKC,GACF,OAAO,SAASA,EAAE,IAAI,EAEzBC,EAAI,CACPD,GAAWA,EAAE,UACbA,GAAWA,EAAE,SAChB"}
@@ -0,0 +1,51 @@
1
+ import { defineComponent as l, createElementBlock as m, openBlock as u, createVNode as r, createElementVNode as p, unref as t, withCtx as d } from "vue";
2
+ import { VisXYContainer as f, VisArea as y, VisAxis as s, VisBulletLegend as _ } from "@unovis/vue";
3
+ import { CurveType as v } from "@unovis/ts";
4
+ const h = { class: "flex flex-col space-y-4" }, x = { class: "flex items center justify-end" }, C = /* @__PURE__ */ l({
5
+ __name: "AreaStackedChart",
6
+ props: {
7
+ data: {},
8
+ categories: {}
9
+ },
10
+ setup(o) {
11
+ const a = o, i = (e) => Number.parseInt(e.time), c = [
12
+ (e) => e.firstTime,
13
+ (e) => e.returning
14
+ ];
15
+ return (e, b) => (u(), m("div", h, [
16
+ r(t(f), {
17
+ data: e.data,
18
+ height: 200
19
+ }, {
20
+ default: d(() => [
21
+ r(t(y), {
22
+ x: i,
23
+ y: c,
24
+ color: Object.values(a.categories).map((n) => n.color),
25
+ "curve-type": t(v).Linear
26
+ }, null, 8, ["color", "curve-type"]),
27
+ r(t(s), {
28
+ type: "x",
29
+ label: "Time",
30
+ "num-ticks": 12
31
+ }),
32
+ r(t(s), {
33
+ type: "y",
34
+ label: "Number of visitors",
35
+ "num-ticks": 3
36
+ })
37
+ ]),
38
+ _: 1
39
+ }, 8, ["data"]),
40
+ p("div", x, [
41
+ r(t(_), {
42
+ items: Object.values(e.categories)
43
+ }, null, 8, ["items"])
44
+ ])
45
+ ]));
46
+ }
47
+ });
48
+ export {
49
+ C as default
50
+ };
51
+ //# sourceMappingURL=AreaStackedChart.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AreaStackedChart.js","sources":["../../../src/components/AreaStacked/AreaStackedChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { VisXYContainer, VisAxis, VisArea, VisBulletLegend } from '@unovis/vue'\nimport { BulletLegendItemInterface, CurveType } from '@unovis/ts'\n\nexport type AreaStackedChartProps<T> = {\n data: T[];\n categories: Record<string, BulletLegendItemInterface>;\n }\n\nconst props = defineProps<AreaStackedChartProps<T>>()\n\nconst x = (d: any) => {\n return Number.parseInt(d.time)\n}\nconst y = [\n (d: any) => d.firstTime,\n (d: any) => d.returning\n]\n</script>\n\n<template>\n <div class=\"flex flex-col space-y-4\">\n <VisXYContainer\n :data=\"data\"\n :height=\"200\"\n >\n <VisArea\n :x=\"x\"\n :y=\"y\"\n :color=\"Object.values(props.categories).map((i) => i.color) \"\n :curve-type=\"CurveType.Linear\"\n />\n <VisAxis\n type=\"x\"\n label=\"Time\"\n :num-ticks=\"12\"\n\n />\n <VisAxis\n type=\"y\"\n label=\"Number of visitors\"\n :num-ticks=\"3\"\n />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend\n :items=\"Object.values(categories)\"\n />\n </div>\n </div>\n</template>"],"names":["props","__props","x","d","y"],"mappings":";;;;;;;;;;AASA,UAAMA,IAAQC,GAERC,IAAI,CAACC,MACF,OAAO,SAASA,EAAE,IAAI,GAEzBC,IAAI;AAAA,MACR,CAACD,MAAWA,EAAE;AAAA,MACd,CAACA,MAAWA,EAAE;AAAA,IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,18 @@
1
+ import { BulletLegendItemInterface } from '@unovis/ts';
2
+
3
+ export type AreaStackedChartProps<T> = {
4
+ data: T[];
5
+ categories: Record<string, BulletLegendItemInterface>;
6
+ };
7
+ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
8
+ props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & AreaStackedChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
9
+ expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
10
+ attrs: any;
11
+ slots: ReturnType<() => {}>;
12
+ emit: typeof __VLS_emit;
13
+ }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
14
+ [key: string]: any;
15
+ }> & {
16
+ __ctx?: Awaited<typeof __VLS_setup>;
17
+ };
18
+ export default _default;
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./AreaStackedChart.cjs");exports.default=e.default;
2
+ //# sourceMappingURL=AreaStackedChart2.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AreaStackedChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,5 @@
1
+ import f from "./AreaStackedChart.js";
2
+ export {
3
+ f as default
4
+ };
5
+ //# sourceMappingURL=AreaStackedChart2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AreaStackedChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1 +1 @@
1
- export { default as AreaStackedChart } from './AreaStackedChart.vue';
1
+ export { default as AreaStackedChart } from './AreaStackedChart.vue';
@@ -0,0 +1 @@
1
+ export { default as BarChart } from './BarChart.vue';
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("@unovis/ts"),i=require("@unovis/vue"),_=e.defineComponent({__name:"Crosshair",props:{colors:{default:()=>[]},index:{},items:{},customTooltip:{}},setup(s){const o=s,r=new WeakMap;function c(t){if(r.has(t))return r.get(t);if(typeof window<"u"){const n=document.createElement("div"),u=Object.entries(d.omit(t,[o.index])).map(([p,m])=>({...o.items.find(f=>f.name===p),value:m})),l=o.customTooltip??i.VisTooltip;return e.createApp(l,{title:t[o.index].toString(),data:u}).mount(n),r.set(t,n.innerHTML),n.innerHTML}}function a(t,n){return o.colors[n]??"transparent"}return(t,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(i.VisTooltip),{"horizontal-shift":20,"vertical-shift":20}),e.createVNode(e.unref(i.VisCrosshair),{template:c,color:a})],64))}});exports.default=_;
2
+ //# sourceMappingURL=Crosshair.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Crosshair.cjs","sources":["../../../src/components/Crosshair/Crosshair.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\n\nconst props = withDefaults(defineProps<{\n colors: string[]\n index: string\n items: BulletLegendItemInterface[]\n customTooltip?: Component\n}>(), {\n colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n if (typeof window !== 'undefined') {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items.find(i => i.name === key)\n return { ...legendReference, value }\n })\n const TooltipComponent = props.customTooltip ?? VisTooltip\n createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n\n }\n}\n\nfunction color(_: unknown, i: number) {\n return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>"],"names":["props","__props","wm","template","d","componentDiv","omittedData","omit","key","value","i","TooltipComponent","VisTooltip","createApp","color","_"],"mappings":"wSAMA,MAAMA,EAAQC,EAURC,MAAS,QACf,SAASC,EAASC,EAAQ,CACpB,GAAAF,EAAG,IAAIE,CAAC,EACH,OAAAF,EAAG,IAAIE,CAAC,EAGX,GAAA,OAAO,OAAW,IAAa,CAC3B,MAAAC,EAAe,SAAS,cAAc,KAAK,EAC3CC,EAAc,OAAO,QAAQC,EAAK,KAAAH,EAAG,CAACJ,EAAM,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAACQ,EAAKC,CAAK,KAElE,CAAE,GADeT,EAAM,MAAM,KAAUU,GAAAA,EAAE,OAASF,CAAG,EAC/B,MAAAC,CAAM,EACpC,EACGE,EAAmBX,EAAM,eAAiBY,EAAA,WAChDC,OAAAA,EAAAA,UAAUF,EAAkB,CAAE,MAAOP,EAAEJ,EAAM,KAAK,EAAE,SAAS,EAAG,KAAMM,CAAa,CAAA,EAAE,MAAMD,CAAY,EACpGH,EAAA,IAAIE,EAAGC,EAAa,SAAS,EACzBA,EAAa,SAAA,CAGtB,CAGO,SAAAS,EAAMC,EAAYL,EAAW,CAC7B,OAAAV,EAAM,OAAOU,CAAC,GAAK,aAAA"}
@@ -0,0 +1,40 @@
1
+ import { defineComponent as h, createElementBlock as _, openBlock as T, Fragment as g, createVNode as r, unref as i, createApp as x } from "vue";
2
+ import { omit as w } from "@unovis/ts";
3
+ import { VisTooltip as s, VisCrosshair as C } from "@unovis/vue";
4
+ const B = /* @__PURE__ */ h({
5
+ __name: "Crosshair",
6
+ props: {
7
+ colors: { default: () => [] },
8
+ index: {},
9
+ items: {},
10
+ customTooltip: {}
11
+ },
12
+ setup(c) {
13
+ const n = c, o = /* @__PURE__ */ new WeakMap();
14
+ function a(e) {
15
+ if (o.has(e))
16
+ return o.get(e);
17
+ if (typeof window < "u") {
18
+ const t = document.createElement("div"), p = Object.entries(w(e, [n.index])).map(([f, u]) => ({ ...n.items.find((d) => d.name === f), value: u })), l = n.customTooltip ?? s;
19
+ return x(l, { title: e[n.index].toString(), data: p }).mount(t), o.set(e, t.innerHTML), t.innerHTML;
20
+ }
21
+ }
22
+ function m(e, t) {
23
+ return n.colors[t] ?? "transparent";
24
+ }
25
+ return (e, t) => (T(), _(g, null, [
26
+ r(i(s), {
27
+ "horizontal-shift": 20,
28
+ "vertical-shift": 20
29
+ }),
30
+ r(i(C), {
31
+ template: a,
32
+ color: m
33
+ })
34
+ ], 64));
35
+ }
36
+ });
37
+ export {
38
+ B as default
39
+ };
40
+ //# sourceMappingURL=Crosshair.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Crosshair.js","sources":["../../../src/components/Crosshair/Crosshair.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\n\nconst props = withDefaults(defineProps<{\n colors: string[]\n index: string\n items: BulletLegendItemInterface[]\n customTooltip?: Component\n}>(), {\n colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n if (typeof window !== 'undefined') {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items.find(i => i.name === key)\n return { ...legendReference, value }\n })\n const TooltipComponent = props.customTooltip ?? VisTooltip\n createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n\n }\n}\n\nfunction color(_: unknown, i: number) {\n return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>"],"names":["props","__props","wm","template","d","componentDiv","omittedData","omit","key","value","i","TooltipComponent","VisTooltip","createApp","color","_"],"mappings":";;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAURC,wBAAS,QAAQ;AACvB,aAASC,EAASC,GAAQ;AACpB,UAAAF,EAAG,IAAIE,CAAC;AACH,eAAAF,EAAG,IAAIE,CAAC;AAGX,UAAA,OAAO,SAAW,KAAa;AAC3B,cAAAC,IAAe,SAAS,cAAc,KAAK,GAC3CC,IAAc,OAAO,QAAQC,EAAKH,GAAG,CAACJ,EAAM,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAACQ,GAAKC,CAAK,OAElE,EAAE,GADeT,EAAM,MAAM,KAAK,CAAKU,MAAAA,EAAE,SAASF,CAAG,GAC/B,OAAAC,EAAM,EACpC,GACGE,IAAmBX,EAAM,iBAAiBY;AAChD,eAAAC,EAAUF,GAAkB,EAAE,OAAOP,EAAEJ,EAAM,KAAK,EAAE,SAAS,GAAG,MAAMM,EAAa,CAAA,EAAE,MAAMD,CAAY,GACpGH,EAAA,IAAIE,GAAGC,EAAa,SAAS,GACzBA,EAAa;AAAA,MAAA;AAAA,IAGtB;AAGO,aAAAS,EAAMC,GAAYL,GAAW;AAC7B,aAAAV,EAAM,OAAOU,CAAC,KAAK;AAAA,IAAA;;;;;;;;;;;;;"}
@@ -0,0 +1,38 @@
1
+ import { BulletLegendItemInterface } from '@unovis/ts';
2
+ import { Component } from 'vue';
3
+
4
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
5
+ colors: string[];
6
+ index: string;
7
+ items: BulletLegendItemInterface[];
8
+ customTooltip?: Component;
9
+ }>, {
10
+ colors: () => any[];
11
+ }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
12
+ colors: string[];
13
+ index: string;
14
+ items: BulletLegendItemInterface[];
15
+ customTooltip?: Component;
16
+ }>, {
17
+ colors: () => any[];
18
+ }>>> & Readonly<{}>, {
19
+ colors: string[];
20
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
21
+ export default _default;
22
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
23
+ type __VLS_TypePropsToRuntimeProps<T> = {
24
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
25
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
26
+ } : {
27
+ type: import('vue').PropType<T[K]>;
28
+ required: true;
29
+ };
30
+ };
31
+ type __VLS_WithDefaults<P, D> = {
32
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
33
+ default: D[K];
34
+ }> : P[K];
35
+ };
36
+ type __VLS_Prettify<T> = {
37
+ [K in keyof T]: T[K];
38
+ } & {};
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Crosshair.cjs");exports.default=e.default;
2
+ //# sourceMappingURL=Crosshair2.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Crosshair2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,5 @@
1
+ import f from "./Crosshair.js";
2
+ export {
3
+ f as default
4
+ };
5
+ //# sourceMappingURL=Crosshair2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Crosshair2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1 @@
1
+ export { default as Crosshair } from './Crosshair.vue';
@@ -0,0 +1,6 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@unovis/ts"),o=require("@unovis/vue"),u={class:"flex items-center justify-center"},d={key:0,class:"flex items-center justify-center mt-4"},g=e.defineComponent({__name:"DonutChart",props:{type:{},data:{},height:{},radius:{},hidePagination:{type:Boolean},labels:{}},setup(r){const n=r,s=t=>t,l=n.type==="half",a={[c.Donut.selectors.segment]:t=>(console.log(),`<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${n.labels[t.index].color} ;'></div>
2
+ <div>${t.data}</div>
3
+ </vistooltip>
4
+ </vissinglecontainer>
5
+ </div>`)};return(t,m)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",u,[e.createVNode(e.unref(o.VisSingleContainer),{class:e.normalizeClass(l?"mt-24":""),data:t.data,height:t.height,margin:{}},{default:e.withCtx(()=>[e.createVNode(e.unref(o.VisTooltip),{"horizontal-shift":20,"vertical-shift":20,triggers:a}),e.createVNode(e.unref(o.VisDonut),{value:s,"corner-radius":t.radius,color:n.labels.map(i=>i.color),"angle-range":l?[-1.5707963267948966,1.5707963267948966]:[]},null,8,["corner-radius","color","angle-range"])]),_:1},8,["class","data","height"]),e.renderSlot(t.$slots,"default")]),t.hidePagination?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",d,[e.createVNode(e.unref(o.VisBulletLegend),{items:t.labels},null,8,["items"])]))],64))}});exports.default=g;
6
+ //# sourceMappingURL=DonutChart.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DonutChart.cjs","sources":["../../../src/components/Donut/DonutChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Donut } from \"@unovis/ts\";\nimport {\n VisBulletLegend,\n VisDonut,\n VisSingleContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nexport type DonutChartProps = {\n type?: string;\n data: number[];\n height: number;\n radius: number;\n hidePagination?: boolean\n labels: {\n name: string;\n color: string;\n }[];\n }\n\nconst props = defineProps<DonutChartProps>();\n\nconst value = (d: number) => d;\n\nconst isHalf = props.type === \"half\";\n\nconst tooltip = {\n [Donut.selectors.segment]: (d: any) => {\n console.log();\n\n return `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${\n props.labels[d.index].color\n } ;'></div>\n <div>${d.data}</div>\n </vistooltip>\n </vissinglecontainer>\n </div>`;\n },\n};\n</script>\n\n<template>\n <div class=\"flex items-center justify-center\">\n <VisSingleContainer\n :class=\"isHalf ? 'mt-24' : ''\"\n :data=\"data\"\n :height=\"height\"\n :margin=\"{}\"\n >\n <VisTooltip\n :horizontal-shift=\"20\"\n :vertical-shift=\"20\"\n :triggers=\"tooltip\"\n />\n\n <VisDonut\n :value=\"value\"\n :corner-radius=\"radius\"\n :color=\"props.labels.map((l) => l.color)\"\n :angle-range=\"isHalf ? [-1.5707963267948966, 1.5707963267948966] : []\"\n />\n </VisSingleContainer>\n\n <slot />\n </div>\n\n <div v-if=\"!hidePagination\" class=\"flex items-center justify-center mt-4\">\n <VisBulletLegend :items=\"labels\" />\n </div>\n</template>\n"],"names":["props","__props","value","d","isHalf","tooltip","Donut"],"mappings":"+ZAqBA,MAAMA,EAAQC,EAERC,EAASC,GAAcA,EAEvBC,EAASJ,EAAM,OAAS,OAExBK,EAAU,CACd,CAACC,QAAM,UAAU,OAAO,EAAIH,IAC1B,QAAQ,IAAI,EAEL,kGACLH,EAAM,OAAOG,EAAE,KAAK,EAAE,KACxB;AAAA,eACWA,EAAE,IAAI;AAAA;AAAA;AAAA,UAKrB"}
@@ -0,0 +1,59 @@
1
+ import { defineComponent as m, createElementBlock as i, openBlock as n, Fragment as u, createElementVNode as g, createCommentVNode as h, createVNode as t, renderSlot as f, unref as o, normalizeClass as p, withCtx as v } from "vue";
2
+ import { Donut as y } from "@unovis/ts";
3
+ import { VisSingleContainer as V, VisTooltip as C, VisDonut as b, VisBulletLegend as _ } from "@unovis/vue";
4
+ const k = { class: "flex items-center justify-center" }, B = {
5
+ key: 0,
6
+ class: "flex items-center justify-center mt-4"
7
+ }, w = /* @__PURE__ */ m({
8
+ __name: "DonutChart",
9
+ props: {
10
+ type: {},
11
+ data: {},
12
+ height: {},
13
+ radius: {},
14
+ hidePagination: { type: Boolean },
15
+ labels: {}
16
+ },
17
+ setup(a) {
18
+ const s = a, r = (e) => e, l = s.type === "half", c = {
19
+ [y.selectors.segment]: (e) => (console.log(), `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${s.labels[e.index].color} ;'></div>
20
+ <div>${e.data}</div>
21
+ </vistooltip>
22
+ </vissinglecontainer>
23
+ </div>`)
24
+ };
25
+ return (e, D) => (n(), i(u, null, [
26
+ g("div", k, [
27
+ t(o(V), {
28
+ class: p(l ? "mt-24" : ""),
29
+ data: e.data,
30
+ height: e.height,
31
+ margin: {}
32
+ }, {
33
+ default: v(() => [
34
+ t(o(C), {
35
+ "horizontal-shift": 20,
36
+ "vertical-shift": 20,
37
+ triggers: c
38
+ }),
39
+ t(o(b), {
40
+ value: r,
41
+ "corner-radius": e.radius,
42
+ color: s.labels.map((d) => d.color),
43
+ "angle-range": l ? [-1.5707963267948966, 1.5707963267948966] : []
44
+ }, null, 8, ["corner-radius", "color", "angle-range"])
45
+ ]),
46
+ _: 1
47
+ }, 8, ["class", "data", "height"]),
48
+ f(e.$slots, "default")
49
+ ]),
50
+ e.hidePagination ? h("", !0) : (n(), i("div", B, [
51
+ t(o(_), { items: e.labels }, null, 8, ["items"])
52
+ ]))
53
+ ], 64));
54
+ }
55
+ });
56
+ export {
57
+ w as default
58
+ };
59
+ //# sourceMappingURL=DonutChart.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DonutChart.js","sources":["../../../src/components/Donut/DonutChart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Donut } from \"@unovis/ts\";\nimport {\n VisBulletLegend,\n VisDonut,\n VisSingleContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nexport type DonutChartProps = {\n type?: string;\n data: number[];\n height: number;\n radius: number;\n hidePagination?: boolean\n labels: {\n name: string;\n color: string;\n }[];\n }\n\nconst props = defineProps<DonutChartProps>();\n\nconst value = (d: number) => d;\n\nconst isHalf = props.type === \"half\";\n\nconst tooltip = {\n [Donut.selectors.segment]: (d: any) => {\n console.log();\n\n return `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${\n props.labels[d.index].color\n } ;'></div>\n <div>${d.data}</div>\n </vistooltip>\n </vissinglecontainer>\n </div>`;\n },\n};\n</script>\n\n<template>\n <div class=\"flex items-center justify-center\">\n <VisSingleContainer\n :class=\"isHalf ? 'mt-24' : ''\"\n :data=\"data\"\n :height=\"height\"\n :margin=\"{}\"\n >\n <VisTooltip\n :horizontal-shift=\"20\"\n :vertical-shift=\"20\"\n :triggers=\"tooltip\"\n />\n\n <VisDonut\n :value=\"value\"\n :corner-radius=\"radius\"\n :color=\"props.labels.map((l) => l.color)\"\n :angle-range=\"isHalf ? [-1.5707963267948966, 1.5707963267948966] : []\"\n />\n </VisSingleContainer>\n\n <slot />\n </div>\n\n <div v-if=\"!hidePagination\" class=\"flex items-center justify-center mt-4\">\n <VisBulletLegend :items=\"labels\" />\n </div>\n</template>\n"],"names":["props","__props","value","d","isHalf","tooltip","Donut"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAcA,GAEvBC,IAASJ,EAAM,SAAS,QAExBK,IAAU;AAAA,MACd,CAACC,EAAM,UAAU,OAAO,GAAG,CAACH,OAC1B,QAAQ,IAAI,GAEL,kGACLH,EAAM,OAAOG,EAAE,KAAK,EAAE,KACxB;AAAA,eACWA,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA,IAKrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,31 @@
1
+ export type DonutChartProps = {
2
+ type?: string;
3
+ data: number[];
4
+ height: number;
5
+ radius: number;
6
+ hidePagination?: boolean;
7
+ labels: {
8
+ name: string;
9
+ color: string;
10
+ }[];
11
+ };
12
+ declare function __VLS_template(): {
13
+ default?(_: {}): any;
14
+ };
15
+ declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
16
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
17
+ export default _default;
18
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
19
+ type __VLS_TypePropsToRuntimeProps<T> = {
20
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
21
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
22
+ } : {
23
+ type: import('vue').PropType<T[K]>;
24
+ required: true;
25
+ };
26
+ };
27
+ type __VLS_WithTemplateSlots<T, S> = T & {
28
+ new (): {
29
+ $slots: S;
30
+ };
31
+ };
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./DonutChart.cjs");exports.default=e.default;
2
+ //# sourceMappingURL=DonutChart2.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DonutChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,5 @@
1
+ import f from "./DonutChart.js";
2
+ export {
3
+ f as default
4
+ };
5
+ //# sourceMappingURL=DonutChart2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DonutChart2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1 @@
1
+ export { default as DonutChart } from './DonutChart.vue';
@@ -0,0 +1 @@
1
+ export { default as LineChart } from './LineChart.vue';
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l={class:"flex flex-col"},s={class:"flex items-center mr-2 mt-2"},r={class:"font-semibold capitalize text-white/75"},c={class:"font-normal"},a=e.defineComponent({__name:"Tooltip",props:{data:{}},setup(i){return(o,d)=>(e.openBlock(),e.createElementBlock("div",l,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.entries(o.data),([t,n])=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t},[e.createElementVNode("div",s,[e.createElementVNode("span",r,e.toDisplayString(t)+":",1)]),e.createElementVNode("span",c,e.toDisplayString(n),1)],64))),128))]))}});exports.default=a;
2
+ //# sourceMappingURL=Tooltip.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tooltip.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}