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.
- package/dist/components/Area/AreaChart.cjs +7 -0
- package/dist/components/Area/AreaChart.cjs.map +1 -0
- package/dist/components/Area/AreaChart.js +123 -0
- package/dist/components/Area/AreaChart.js.map +1 -0
- package/dist/components/Area/AreaChart.vue.d.ts +36 -0
- package/dist/components/Area/AreaChart2.cjs +2 -0
- package/dist/components/Area/AreaChart2.cjs.map +1 -0
- package/dist/components/Area/AreaChart2.js +5 -0
- package/dist/components/Area/AreaChart2.js.map +1 -0
- package/dist/components/Area/index.d.ts +1 -0
- package/dist/components/AreaStacked/AreaStackedChart.cjs +2 -0
- package/dist/components/AreaStacked/AreaStackedChart.cjs.map +1 -0
- package/dist/components/AreaStacked/AreaStackedChart.js +51 -0
- package/dist/components/AreaStacked/AreaStackedChart.js.map +1 -0
- package/dist/components/AreaStacked/AreaStackedChart.vue.d.ts +18 -0
- package/dist/components/AreaStacked/AreaStackedChart2.cjs +2 -0
- package/dist/components/AreaStacked/AreaStackedChart2.cjs.map +1 -0
- package/dist/components/AreaStacked/AreaStackedChart2.js +5 -0
- package/dist/components/AreaStacked/AreaStackedChart2.js.map +1 -0
- package/{src/components/AreaStacked/index.ts → dist/components/AreaStacked/index.d.ts} +1 -1
- package/dist/components/Bar/index.d.ts +1 -0
- package/dist/components/Crosshair/Crosshair.cjs +2 -0
- package/dist/components/Crosshair/Crosshair.cjs.map +1 -0
- package/dist/components/Crosshair/Crosshair.js +40 -0
- package/dist/components/Crosshair/Crosshair.js.map +1 -0
- package/dist/components/Crosshair/Crosshair.vue.d.ts +38 -0
- package/dist/components/Crosshair/Crosshair2.cjs +2 -0
- package/dist/components/Crosshair/Crosshair2.cjs.map +1 -0
- package/dist/components/Crosshair/Crosshair2.js +5 -0
- package/dist/components/Crosshair/Crosshair2.js.map +1 -0
- package/dist/components/Crosshair/index.d.ts +1 -0
- package/dist/components/Donut/DonutChart.cjs +6 -0
- package/dist/components/Donut/DonutChart.cjs.map +1 -0
- package/dist/components/Donut/DonutChart.js +59 -0
- package/dist/components/Donut/DonutChart.js.map +1 -0
- package/dist/components/Donut/DonutChart.vue.d.ts +31 -0
- package/dist/components/Donut/DonutChart2.cjs +2 -0
- package/dist/components/Donut/DonutChart2.cjs.map +1 -0
- package/dist/components/Donut/DonutChart2.js +5 -0
- package/dist/components/Donut/DonutChart2.js.map +1 -0
- package/dist/components/Donut/index.d.ts +1 -0
- package/dist/components/Line/index.d.ts +1 -0
- package/dist/components/Tooltip.cjs +2 -0
- package/dist/components/Tooltip.cjs.map +1 -0
- package/dist/components/Tooltip.js +21 -0
- package/dist/components/Tooltip.js.map +1 -0
- package/dist/components/Tooltip.vue.d.ts +14 -0
- package/dist/components/Tooltip2.cjs +2 -0
- package/dist/components/Tooltip2.cjs.map +1 -0
- package/dist/components/Tooltip2.js +5 -0
- package/dist/components/Tooltip2.js.map +1 -0
- package/dist/components.d.ts +4 -0
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +13 -0
- package/dist/index.js.map +1 -0
- package/package.json +13 -10
- package/.vscode/extensions.json +0 -3
- package/auto-imports.d.ts +0 -58
- package/components.d.ts +0 -46
- package/image.png +0 -0
- package/index.html +0 -14
- package/index.js +0 -2
- package/src/components/Area/AreaChart.vue +0 -141
- package/src/components/Area/index.ts +0 -1
- package/src/components/AreaStacked/AreaStackedChart.vue +0 -51
- package/src/components/Bar/BarChart.vue +0 -130
- package/src/components/Bar/index.ts +0 -1
- package/src/components/Crosshair/Crosshair.vue +0 -46
- package/src/components/Crosshair/index.ts +0 -1
- package/src/components/Donut/DonutChart.vue +0 -71
- package/src/components/Donut/index.ts +0 -1
- package/src/components/Line/LineChart.vue +0 -94
- package/src/components/Line/index.ts +0 -1
- package/src/components/Tooltip.vue +0 -17
- package/src/components.ts +0 -6
- package/src/index.ts +0 -6
- package/src/shims-vue.d.ts +0 -1
- package/src-demo/AdminTemplate.vue +0 -5
- package/src-demo/App.vue +0 -37
- package/src-demo/AreaChartPage.vue +0 -125
- package/src-demo/BarChartPage.vue +0 -166
- package/src-demo/DashboardTemplate.vue +0 -687
- package/src-demo/Homepage.vue +0 -325
- package/src-demo/LineChartPage.vue +0 -140
- package/src-demo/assets/main.css +0 -34
- package/src-demo/components/Progress/Progress.vue +0 -42
- package/src-demo/components/Progress/index.ts +0 -1
- package/src-demo/components/Status/Status.vue +0 -95
- package/src-demo/components/Status/index.ts +0 -1
- package/src-demo/components/charts.ts +0 -37
- package/src-demo/components/index.ts +0 -49
- package/src-demo/data/AreaChartData.ts +0 -294
- package/src-demo/data/BarChartData.ts +0 -79
- package/src-demo/data/IncomeExpenseData.ts +0 -189
- package/src-demo/data/InvestmentData.ts +0 -352
- package/src-demo/data/RevenueData.ts +0 -58
- package/src-demo/data/VisitorsData.ts +0 -260
- package/src-demo/elements/Button.vue +0 -13
- package/src-demo/elements/Card.vue +0 -17
- package/src-demo/elements/Dropdown.vue +0 -112
- package/src-demo/elements/Logo.vue +0 -8
- package/src-demo/elements/Table.vue +0 -363
- package/src-demo/elements/TopBar.vue +0 -40
- package/src-demo/index.ts +0 -58
- package/tsconfig.json +0 -11
- package/vite.config.ts +0 -63
- /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 @@
|
|
|
1
|
+
{"version":3,"file":"AreaChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"file":"AreaStackedChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"file":"Crosshair2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"file":"DonutChart2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -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":""}
|