vue-chrts 0.0.161 → 0.0.162
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/Line/LineChart.cjs +1 -1
- package/dist/components/Line/LineChart.cjs.map +1 -1
- package/dist/components/Line/LineChart.js +52 -21
- package/dist/components/Line/LineChart.js.map +1 -1
- package/dist/components/Line/LineChart.vue.d.ts +3 -1
- package/dist/components/Tooltip.cjs +2 -0
- package/dist/components/Tooltip.cjs.map +1 -0
- package/dist/components/Tooltip.js +38 -0
- package/dist/components/Tooltip.js.map +1 -0
- package/dist/components/Tooltip.vue.d.ts +17 -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/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("@unovis/ts"),o=require("@unovis/vue"),d=require("../Tooltip.cjs"),f={class:"flex items center justify-end"},y=e.defineComponent({__name:"LineChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{type:Function},yFormatter:{type:Function},curveType:{},yNumTicks:{},xNumTicks:{},paginationPosition:{}},setup(s){const n=s,u=t=>Object.values(n.categories)[t].color,m=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const r=e.createApp(d.default,{data:t,categories:n.categories}),a=document.createElement("div");r.mount(a);const i=a.innerHTML;return r.unmount(),i}catch{return""}});return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["space-y-4 flex flex-col",{"flex-col-reverse":n.paginationPosition==="top"}])},[e.createVNode(e.unref(o.VisXYContainer),{data:t.data,height:t.height},{default:e.withCtx(()=>[e.createVNode(e.unref(o.VisTooltip),{"horizontal-placement":e.unref(l.Position).Right,"vertical-placement":e.unref(l.Position).Top},null,8,["horizontal-placement","vertical-placement"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(n.categories),(a,i)=>(e.openBlock(),e.createBlock(e.unref(o.VisLine),{key:i,x:(c,p)=>p,y:c=>c[a],color:u(i),"curve-type":t.curveType??e.unref(l.CurveType).MonotoneX},null,8,["x","y","color","curve-type"]))),128)),e.createVNode(e.unref(o.VisAxis),{type:"x","tick-format":t.xFormatter,"num-ticks":t.xNumTicks??4,label:t.xLabel,"label-margin":8,"domain-line":!1,"grid-line":!1},null,8,["tick-format","num-ticks","label"]),e.createVNode(e.unref(o.VisAxis),{type:"y","num-ticks":t.yNumTicks??4,"tick-format":t.yFormatter,label:t.yLabel,"domain-line":!1},null,8,["num-ticks","tick-format","label"]),e.createVNode(e.unref(o.VisCrosshair),{color:"#666",template:m.value},null,8,["template"])]),_:1},8,["data","height"]),e.createElementVNode("div",f,[e.createVNode(e.unref(o.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])],2))}});exports.default=y;
|
|
2
2
|
//# sourceMappingURL=LineChart.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.cjs","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string,
|
|
1
|
+
{"version":3,"file":"LineChart.cjs","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, BulletLegendItemInterface, Position } from \"@unovis/ts\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx: number) => string;\n curveType?: CurveType;\n yNumTicks?: number;\n xNumTicks?: number;\n paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n</script>\n\n<template>\n <div\n class=\"space-y-4 flex flex-col\"\n :class=\"{\n 'flex-col-reverse': props.paginationPosition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\">\n <VisTooltip\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"color(iKey)\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks ?? 4\"\n :label=\"xLabel\"\n :label-margin=\"8\"\n :domain-line=\"false\"\n :grid-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? 4\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :domain-line=\"false\"\n />\n <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":"0dA+BA,MAAMA,EAAQC,EAERC,EAASC,GAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,MAE9DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import { defineComponent as g, computed as h, createApp as k, createElementBlock as s, openBlock as l, normalizeClass as v, createVNode as o, createElementVNode as b, unref as t, withCtx as T, Fragment as L, renderList as V, createBlock as x } from "vue";
|
|
2
|
+
import { Position as m, CurveType as C } from "@unovis/ts";
|
|
3
|
+
import { VisXYContainer as F, VisTooltip as N, VisLine as j, VisAxis as u, VisCrosshair as B, VisBulletLegend as w } from "@unovis/vue";
|
|
4
|
+
import z from "../Tooltip.js";
|
|
5
|
+
const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
|
|
4
6
|
__name: "LineChart",
|
|
5
7
|
props: {
|
|
6
8
|
data: {},
|
|
@@ -10,29 +12,49 @@ const N = /* @__PURE__ */ f({
|
|
|
10
12
|
categories: {},
|
|
11
13
|
xFormatter: { type: Function },
|
|
12
14
|
yFormatter: { type: Function },
|
|
15
|
+
curveType: {},
|
|
13
16
|
yNumTicks: {},
|
|
14
17
|
xNumTicks: {},
|
|
15
18
|
paginationPosition: {}
|
|
16
19
|
},
|
|
17
|
-
setup(
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
setup(p) {
|
|
21
|
+
const n = p, d = (e) => Object.values(n.categories)[e].color, f = h(() => (e) => {
|
|
22
|
+
if (typeof window > "u" || typeof document > "u")
|
|
23
|
+
return "";
|
|
24
|
+
try {
|
|
25
|
+
const r = k(z, {
|
|
26
|
+
data: e,
|
|
27
|
+
categories: n.categories
|
|
28
|
+
}), a = document.createElement("div");
|
|
29
|
+
r.mount(a);
|
|
30
|
+
const i = a.innerHTML;
|
|
31
|
+
return r.unmount(), i;
|
|
32
|
+
} catch {
|
|
33
|
+
return "";
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
return (e, r) => (l(), s("div", {
|
|
37
|
+
class: v(["space-y-4 flex flex-col", {
|
|
38
|
+
"flex-col-reverse": n.paginationPosition === "top"
|
|
22
39
|
}])
|
|
23
40
|
}, [
|
|
24
|
-
|
|
41
|
+
o(t(F), {
|
|
25
42
|
data: e.data,
|
|
26
43
|
height: e.height
|
|
27
44
|
}, {
|
|
28
|
-
default:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
45
|
+
default: T(() => [
|
|
46
|
+
o(t(N), {
|
|
47
|
+
"horizontal-placement": t(m).Right,
|
|
48
|
+
"vertical-placement": t(m).Top
|
|
49
|
+
}, null, 8, ["horizontal-placement", "vertical-placement"]),
|
|
50
|
+
(l(!0), s(L, null, V(Object.keys(n.categories), (a, i) => (l(), x(t(j), {
|
|
51
|
+
key: i,
|
|
52
|
+
x: (c, y) => y,
|
|
53
|
+
y: (c) => c[a],
|
|
54
|
+
color: d(i),
|
|
55
|
+
"curve-type": e.curveType ?? t(C).MonotoneX
|
|
56
|
+
}, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
|
|
57
|
+
o(t(u), {
|
|
36
58
|
type: "x",
|
|
37
59
|
"tick-format": e.xFormatter,
|
|
38
60
|
"num-ticks": e.xNumTicks ?? 4,
|
|
@@ -41,20 +63,29 @@ const N = /* @__PURE__ */ f({
|
|
|
41
63
|
"domain-line": !1,
|
|
42
64
|
"grid-line": !1
|
|
43
65
|
}, null, 8, ["tick-format", "num-ticks", "label"]),
|
|
44
|
-
|
|
66
|
+
o(t(u), {
|
|
45
67
|
type: "y",
|
|
46
68
|
"num-ticks": e.yNumTicks ?? 4,
|
|
47
69
|
"tick-format": e.yFormatter,
|
|
48
70
|
label: e.yLabel,
|
|
49
71
|
"domain-line": !1
|
|
50
|
-
}, null, 8, ["num-ticks", "tick-format", "label"])
|
|
72
|
+
}, null, 8, ["num-ticks", "tick-format", "label"]),
|
|
73
|
+
o(t(B), {
|
|
74
|
+
color: "#666",
|
|
75
|
+
template: f.value
|
|
76
|
+
}, null, 8, ["template"])
|
|
51
77
|
]),
|
|
52
78
|
_: 1
|
|
53
|
-
}, 8, ["data", "height"])
|
|
79
|
+
}, 8, ["data", "height"]),
|
|
80
|
+
b("div", E, [
|
|
81
|
+
o(t(w), {
|
|
82
|
+
items: Object.values(e.categories)
|
|
83
|
+
}, null, 8, ["items"])
|
|
84
|
+
])
|
|
54
85
|
], 2));
|
|
55
86
|
}
|
|
56
87
|
});
|
|
57
88
|
export {
|
|
58
|
-
|
|
89
|
+
X as default
|
|
59
90
|
};
|
|
60
91
|
//# sourceMappingURL=LineChart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.js","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string,
|
|
1
|
+
{"version":3,"file":"LineChart.js","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\n\nimport { CurveType, BulletLegendItemInterface, Position } from \"@unovis/ts\";\n\nimport {\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisXYContainer,\n VisTooltip,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\n\ntype LineChartProps<T> = {\n data: T[];\n height: number;\n xLabel?: string;\n yLabel?: string;\n categories: Record<string, BulletLegendItemInterface>;\n xFormatter: (i: number, idx: number) => string;\n yFormatter?: (i: number, idx: number) => string;\n curveType?: CurveType;\n yNumTicks?: number;\n xNumTicks?: number;\n paginationPosition?: PaginationPosition;\n};\n\nconst props = defineProps<LineChartProps<T>>();\n\nconst color = (key: number) => Object.values(props.categories)[key].color;\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n return '';\n }\n \n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return '';\n }\n});\n</script>\n\n<template>\n <div\n class=\"space-y-4 flex flex-col\"\n :class=\"{\n 'flex-col-reverse': props.paginationPosition === 'top',\n }\"\n >\n <VisXYContainer :data=\"data\" :height=\"height\">\n <VisTooltip\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"color(iKey)\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n <VisAxis\n type=\"x\"\n :tick-format=\"xFormatter\"\n :num-ticks=\"xNumTicks ?? 4\"\n :label=\"xLabel\"\n :label-margin=\"8\"\n :domain-line=\"false\"\n :grid-line=\"false\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks ?? 4\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :domain-line=\"false\"\n />\n <VisCrosshair color=\"#666\" :template=\"generateTooltip\" />\n </VisXYContainer>\n <div class=\"flex items center justify-end\">\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","color","key","generateTooltip","computed","d","app","createApp","Tooltip","container","html"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE,OAE9DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYN,EAAM;AAAA,QAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { CurveType, BulletLegendItemInterface } from '@unovis/ts';
|
|
1
2
|
import { PaginationPosition } from '../../types';
|
|
2
3
|
|
|
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<{
|
|
@@ -6,9 +7,10 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
|
|
|
6
7
|
height: number;
|
|
7
8
|
xLabel?: string;
|
|
8
9
|
yLabel?: string;
|
|
9
|
-
categories: Record<string,
|
|
10
|
+
categories: Record<string, BulletLegendItemInterface>;
|
|
10
11
|
xFormatter: (i: number, idx: number) => string;
|
|
11
12
|
yFormatter?: (i: number, idx: number) => string;
|
|
13
|
+
curveType?: CurveType;
|
|
12
14
|
yNumTicks?: number;
|
|
13
15
|
xNumTicks?: number;
|
|
14
16
|
paginationPosition?: PaginationPosition;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=e.defineComponent({__name:"Tooltip",props:{data:{},categories:{}},setup(r){const l=r,n=["_index","_stacked","_ending"],i=e.computed(()=>Object.entries(l.data).filter(([o,a])=>{var t;return!n.includes(o)&&((t=l.categories[o])==null?void 0:t.color)}));return(o,a)=>(e.openBlock(),e.createElementBlock("div",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,([t,c])=>(e.openBlock(),e.createElementBlock("div",{key:t,style:{display:"flex","align-items":"center","margin-bottom":"4px"}},[e.createElementVNode("span",{style:e.normalizeStyle([{width:"8px",height:"8px","border-radius":"4px","margin-right":"8px"},{backgroundColor:o.categories[t].color}])},null,4),e.createElementVNode("div",null,[e.createElementVNode("span",{style:e.normalizeStyle([{"font-weight":"600","margin-right":"8px"},{color:"var(--tooltip-label-color)"}])},e.toDisplayString(t)+":",1),e.createElementVNode("span",{style:e.normalizeStyle([{"font-weight":"400"},{color:"var(--tooltip-value-color)"}])},e.toDisplayString(c),1)])]))),128))]))}});exports.default=s;
|
|
2
|
+
//# sourceMappingURL=Tooltip.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","sources":["../../src/components/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T\">\nimport { BulletLegendItemInterface } from \"@unovis/ts\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n data: T;\n categories: Record<string, BulletLegendItemInterface>;\n}>();\n\nconst keyBlockList = [\"_index\", \"_stacked\", \"_ending\"];\n\nconst visibleEntries = computed(() => {\n return Object.entries(props.data).filter(\n ([key, _]) => !keyBlockList.includes(key) && props.categories[key]?.color\n );\n});\n</script>\n\n<template>\n <div>\n <div v-for=\"[key, value] in visibleEntries\" :key=\"key\" style=\"display: flex; align-items: center; margin-bottom: 4px;\">\n <span\n style=\"width: 8px; height: 8px; border-radius: 4px; margin-right: 8px;\"\n :style=\"{ backgroundColor: categories[key].color }\"\n ></span>\n <div>\n <span style=\"font-weight: 600; margin-right: 8px;\" :style=\"{ color: 'var(--tooltip-label-color)' }\">{{ key }}:</span>\n <span style=\"font-weight: 400;\" :style=\"{ color: 'var(--tooltip-value-color)' }\">{{ value }}</span>\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","keyBlockList","visibleEntries","computed","key","_","_a"],"mappings":"gNAIA,MAAMA,EAAQC,EAKRC,EAAe,CAAC,SAAU,WAAY,SAAS,EAE/CC,EAAiBC,EAAAA,SAAS,IACvB,OAAO,QAAQJ,EAAM,IAAI,EAAE,OAChC,CAAC,CAACK,EAAKC,CAAC,IAAM,OAAA,OAACJ,EAAa,SAASG,CAAG,KAAKE,EAAAP,EAAM,WAAWK,CAAG,IAApB,YAAAE,EAAuB,OACtE,CACD"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { defineComponent as g, computed as m, createElementBlock as r, openBlock as l, Fragment as x, renderList as _, createElementVNode as o, normalizeStyle as n, toDisplayString as a } from "vue";
|
|
2
|
+
const h = /* @__PURE__ */ g({
|
|
3
|
+
__name: "Tooltip",
|
|
4
|
+
props: {
|
|
5
|
+
data: {},
|
|
6
|
+
categories: {}
|
|
7
|
+
},
|
|
8
|
+
setup(s) {
|
|
9
|
+
const i = s, c = ["_index", "_stacked", "_ending"], p = m(() => Object.entries(i.data).filter(
|
|
10
|
+
([t, d]) => {
|
|
11
|
+
var e;
|
|
12
|
+
return !c.includes(t) && ((e = i.categories[t]) == null ? void 0 : e.color);
|
|
13
|
+
}
|
|
14
|
+
));
|
|
15
|
+
return (t, d) => (l(), r("div", null, [
|
|
16
|
+
(l(!0), r(x, null, _(p.value, ([e, u]) => (l(), r("div", {
|
|
17
|
+
key: e,
|
|
18
|
+
style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
|
|
19
|
+
}, [
|
|
20
|
+
o("span", {
|
|
21
|
+
style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, { backgroundColor: t.categories[e].color }])
|
|
22
|
+
}, null, 4),
|
|
23
|
+
o("div", null, [
|
|
24
|
+
o("span", {
|
|
25
|
+
style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
|
|
26
|
+
}, a(e) + ":", 1),
|
|
27
|
+
o("span", {
|
|
28
|
+
style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
|
|
29
|
+
}, a(u), 1)
|
|
30
|
+
])
|
|
31
|
+
]))), 128))
|
|
32
|
+
]));
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
export {
|
|
36
|
+
h as default
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../src/components/Tooltip.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T\">\nimport { BulletLegendItemInterface } from \"@unovis/ts\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n data: T;\n categories: Record<string, BulletLegendItemInterface>;\n}>();\n\nconst keyBlockList = [\"_index\", \"_stacked\", \"_ending\"];\n\nconst visibleEntries = computed(() => {\n return Object.entries(props.data).filter(\n ([key, _]) => !keyBlockList.includes(key) && props.categories[key]?.color\n );\n});\n</script>\n\n<template>\n <div>\n <div v-for=\"[key, value] in visibleEntries\" :key=\"key\" style=\"display: flex; align-items: center; margin-bottom: 4px;\">\n <span\n style=\"width: 8px; height: 8px; border-radius: 4px; margin-right: 8px;\"\n :style=\"{ backgroundColor: categories[key].color }\"\n ></span>\n <div>\n <span style=\"font-weight: 600; margin-right: 8px;\" :style=\"{ color: 'var(--tooltip-label-color)' }\">{{ key }}:</span>\n <span style=\"font-weight: 400;\" :style=\"{ color: 'var(--tooltip-value-color)' }\">{{ value }}</span>\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","keyBlockList","visibleEntries","computed","key","_","_a"],"mappings":";;;;;;;;AAIA,UAAMA,IAAQC,GAKRC,IAAe,CAAC,UAAU,YAAY,SAAS,GAE/CC,IAAiBC,EAAS,MACvB,OAAO,QAAQJ,EAAM,IAAI,EAAE;AAAA,MAChC,CAAC,CAACK,GAAKC,CAAC,MAAM;;AAAA,gBAACJ,EAAa,SAASG,CAAG,OAAKE,IAAAP,EAAM,WAAWK,CAAG,MAApB,gBAAAE,EAAuB;AAAA;AAAA,IACtE,CACD;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { BulletLegendItemInterface } from '@unovis/ts';
|
|
2
|
+
|
|
3
|
+
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<{
|
|
4
|
+
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
|
|
5
|
+
data: T;
|
|
6
|
+
categories: Record<string, BulletLegendItemInterface>;
|
|
7
|
+
}, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
|
|
8
|
+
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
9
|
+
attrs: any;
|
|
10
|
+
slots: ReturnType<() => {}>;
|
|
11
|
+
emit: typeof __VLS_emit;
|
|
12
|
+
}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
13
|
+
[key: string]: any;
|
|
14
|
+
}> & {
|
|
15
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
16
|
+
};
|
|
17
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|