vue-chrts 0.0.158 → 0.0.160
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 +26 -45
- package/dist/components/Line/LineChart.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/Area/index.d.ts +0 -1
- package/dist/components/Area/types.d.ts +0 -84
- package/dist/components/AreaStacked/index.d.ts +0 -1
- package/dist/components/Bar/index.d.ts +0 -1
- package/dist/components/Crosshair/index.d.ts +0 -1
- package/dist/components/Donut/index.d.ts +0 -1
- package/dist/components/Tooltip.cjs +0 -2
- package/dist/components/Tooltip.cjs.map +0 -1
- package/dist/components/Tooltip.js +0 -38
- package/dist/components/Tooltip.js.map +0 -1
- package/dist/components/Tooltip.vue.d.ts +0 -17
- package/dist/components/Tooltip2.cjs +0 -2
- package/dist/components/Tooltip2.cjs.map +0 -1
- package/dist/components/Tooltip2.js +0 -5
- package/dist/components/Tooltip2.js.map +0 -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"),r=require("@unovis/ts"),o=require("@unovis/vue"),m={class:"flex items center justify-end"},p=e.defineComponent({__name:"LineChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{type:Function},yFormatter:{type:Function},curveType:{},yNumTicks:{},xNumTicks:{},paginationPosition:{}},setup(a){const n=a,s=t=>Object.values(n.categories)[t].color;return(t,f)=>(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(r.Position).Right,"vertical-placement":e.unref(r.Position).Top},null,8,["horizontal-placement","vertical-placement"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(n.categories),(c,i)=>(e.openBlock(),e.createBlock(e.unref(o.VisLine),{key:i,x:(l,u)=>u,y:l=>l[c],color:s(i),"curve-type":t.curveType??e.unref(r.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"])]),_:1},8,["data","height"]),e.createElementVNode("div",m,[e.createVNode(e.unref(o.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])])],2))}});exports.default=p;
|
|
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\">\
|
|
1
|
+
{"version":3,"file":"LineChart.cjs","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\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 { 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\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 </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"],"mappings":"8bA6BA,MAAMA,EAAQC,EAERC,EAASC,GAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { Position as
|
|
3
|
-
import { VisXYContainer as
|
|
4
|
-
|
|
5
|
-
const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
|
|
1
|
+
import { defineComponent as f, createElementBlock as r, openBlock as a, normalizeClass as d, createVNode as o, createElementVNode as k, unref as t, withCtx as g, Fragment as h, renderList as b, createBlock as v } from "vue";
|
|
2
|
+
import { Position as s, CurveType as T } from "@unovis/ts";
|
|
3
|
+
import { VisXYContainer as L, VisTooltip as x, VisLine as F, VisAxis as c, VisBulletLegend as V } from "@unovis/vue";
|
|
4
|
+
const C = { class: "flex items center justify-end" }, O = /* @__PURE__ */ f({
|
|
6
5
|
__name: "LineChart",
|
|
7
6
|
props: {
|
|
8
7
|
data: {},
|
|
@@ -17,44 +16,30 @@ const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
|
|
|
17
16
|
xNumTicks: {},
|
|
18
17
|
paginationPosition: {}
|
|
19
18
|
},
|
|
20
|
-
setup(
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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"
|
|
19
|
+
setup(m) {
|
|
20
|
+
const i = m, u = (e) => Object.values(i.categories)[e].color;
|
|
21
|
+
return (e, N) => (a(), r("div", {
|
|
22
|
+
class: d(["space-y-4 flex flex-col", {
|
|
23
|
+
"flex-col-reverse": i.paginationPosition === "top"
|
|
39
24
|
}])
|
|
40
25
|
}, [
|
|
41
|
-
o(t(
|
|
26
|
+
o(t(L), {
|
|
42
27
|
data: e.data,
|
|
43
28
|
height: e.height
|
|
44
29
|
}, {
|
|
45
|
-
default:
|
|
46
|
-
o(t(
|
|
47
|
-
"horizontal-placement": t(
|
|
48
|
-
"vertical-placement": t(
|
|
30
|
+
default: g(() => [
|
|
31
|
+
o(t(x), {
|
|
32
|
+
"horizontal-placement": t(s).Right,
|
|
33
|
+
"vertical-placement": t(s).Top
|
|
49
34
|
}, null, 8, ["horizontal-placement", "vertical-placement"]),
|
|
50
|
-
(
|
|
51
|
-
key:
|
|
52
|
-
x: (
|
|
53
|
-
y: (
|
|
54
|
-
color:
|
|
55
|
-
"curve-type": e.curveType ?? t(
|
|
35
|
+
(a(!0), r(h, null, b(Object.keys(i.categories), (p, l) => (a(), v(t(F), {
|
|
36
|
+
key: l,
|
|
37
|
+
x: (n, y) => y,
|
|
38
|
+
y: (n) => n[p],
|
|
39
|
+
color: u(l),
|
|
40
|
+
"curve-type": e.curveType ?? t(T).MonotoneX
|
|
56
41
|
}, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
|
|
57
|
-
o(t(
|
|
42
|
+
o(t(c), {
|
|
58
43
|
type: "x",
|
|
59
44
|
"tick-format": e.xFormatter,
|
|
60
45
|
"num-ticks": e.xNumTicks ?? 4,
|
|
@@ -63,22 +48,18 @@ const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
|
|
|
63
48
|
"domain-line": !1,
|
|
64
49
|
"grid-line": !1
|
|
65
50
|
}, null, 8, ["tick-format", "num-ticks", "label"]),
|
|
66
|
-
o(t(
|
|
51
|
+
o(t(c), {
|
|
67
52
|
type: "y",
|
|
68
53
|
"num-ticks": e.yNumTicks ?? 4,
|
|
69
54
|
"tick-format": e.yFormatter,
|
|
70
55
|
label: e.yLabel,
|
|
71
56
|
"domain-line": !1
|
|
72
|
-
}, null, 8, ["num-ticks", "tick-format", "label"])
|
|
73
|
-
o(t(B), {
|
|
74
|
-
color: "#666",
|
|
75
|
-
template: f.value
|
|
76
|
-
}, null, 8, ["template"])
|
|
57
|
+
}, null, 8, ["num-ticks", "tick-format", "label"])
|
|
77
58
|
]),
|
|
78
59
|
_: 1
|
|
79
60
|
}, 8, ["data", "height"]),
|
|
80
|
-
|
|
81
|
-
o(t(
|
|
61
|
+
k("div", C, [
|
|
62
|
+
o(t(V), {
|
|
82
63
|
items: Object.values(e.categories)
|
|
83
64
|
}, null, 8, ["items"])
|
|
84
65
|
])
|
|
@@ -86,6 +67,6 @@ const E = { class: "flex items center justify-end" }, X = /* @__PURE__ */ g({
|
|
|
86
67
|
}
|
|
87
68
|
});
|
|
88
69
|
export {
|
|
89
|
-
|
|
70
|
+
O as default
|
|
90
71
|
};
|
|
91
72
|
//# 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\">\
|
|
1
|
+
{"version":3,"file":"LineChart.js","sources":["../../../src/components/Line/LineChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\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 { 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\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 </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"],"mappings":";;;;;;;;;;;;;;;;;;;AA6BA,UAAMA,IAAQC,GAERC,IAAQ,CAACC,MAAgB,OAAO,OAAOH,EAAM,UAAU,EAAEG,CAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as AreaChart } from './AreaChart.vue';
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import { PaginationPosition } from '../../types';
|
|
2
|
-
import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
|
|
3
|
-
|
|
4
|
-
export type AreaChartProps<T> = {
|
|
5
|
-
/**
|
|
6
|
-
* The data to be displayed in the area chart.
|
|
7
|
-
* Each element of the array represents a data point.
|
|
8
|
-
* The structure of 'T' should be compatible with the chart's rendering logic.
|
|
9
|
-
*/
|
|
10
|
-
data: T[];
|
|
11
|
-
/**
|
|
12
|
-
* The height of the chart in pixels.
|
|
13
|
-
*/
|
|
14
|
-
height: number;
|
|
15
|
-
/**
|
|
16
|
-
* Optional label for the x-axis.
|
|
17
|
-
*/
|
|
18
|
-
xLabel?: string;
|
|
19
|
-
/**
|
|
20
|
-
* Optional label for the y-axis.
|
|
21
|
-
*/
|
|
22
|
-
yLabel?: string;
|
|
23
|
-
/**
|
|
24
|
-
* A record mapping category keys to `BulletLegendItemInterface` objects.
|
|
25
|
-
* This defines the visual representation and labels for each category in the chart's legend.
|
|
26
|
-
*/
|
|
27
|
-
categories: Record<string, BulletLegendItemInterface>;
|
|
28
|
-
/**
|
|
29
|
-
* A function that formats the x-axis tick labels.
|
|
30
|
-
* @param i The value to be formatted.
|
|
31
|
-
* @param idx The index of the data point.
|
|
32
|
-
* @returns The formatted x-axis label.
|
|
33
|
-
*/
|
|
34
|
-
xFormatter: (i: number, idx: number) => string;
|
|
35
|
-
/**
|
|
36
|
-
* An optional function that formats the y-axis tick labels.
|
|
37
|
-
* @param i The value to be formatted.
|
|
38
|
-
* @param idx The index of the data point (optional).
|
|
39
|
-
* @returns The formatted y-axis label or value.
|
|
40
|
-
*/
|
|
41
|
-
yFormatter?: (i: number, idx?: number) => string | number;
|
|
42
|
-
/**
|
|
43
|
-
* The type of curve to use for the area chart lines.
|
|
44
|
-
* See `CurveType` for available options.
|
|
45
|
-
*/
|
|
46
|
-
curveType?: CurveType;
|
|
47
|
-
/**
|
|
48
|
-
* The desired number of ticks on the x-axis.
|
|
49
|
-
*/
|
|
50
|
-
xNumTicks?: number;
|
|
51
|
-
/**
|
|
52
|
-
* The desired number of ticks on the y-axis.
|
|
53
|
-
*/
|
|
54
|
-
yNumTicks?: number;
|
|
55
|
-
/**
|
|
56
|
-
* If `true`, hides the chart legend.
|
|
57
|
-
*/
|
|
58
|
-
hideLegend?: boolean;
|
|
59
|
-
/**
|
|
60
|
-
* If `true`, hides the chart tooltip.
|
|
61
|
-
*/
|
|
62
|
-
hideTooltip?: boolean;
|
|
63
|
-
/**
|
|
64
|
-
* If `true`, displays grid lines along the x-axis.
|
|
65
|
-
*/
|
|
66
|
-
gridLineX?: boolean;
|
|
67
|
-
/**
|
|
68
|
-
* If `true`, displays a domain line (axis line) along the x-axis.
|
|
69
|
-
*/
|
|
70
|
-
domainLineX?: boolean;
|
|
71
|
-
/**
|
|
72
|
-
* If `true`, displays grid lines along the y-axis.
|
|
73
|
-
*/
|
|
74
|
-
gridLineY?: boolean;
|
|
75
|
-
/**
|
|
76
|
-
* If `true`, displays a domain line (axis line) along the y-axis.
|
|
77
|
-
*/
|
|
78
|
-
domainLineY?: boolean;
|
|
79
|
-
/**
|
|
80
|
-
* Optional position for pagination controls, if applicable.
|
|
81
|
-
* See `PaginationPosition` for available options.
|
|
82
|
-
*/
|
|
83
|
-
paginationPoisition?: PaginationPosition;
|
|
84
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as AreaStackedChart } from './AreaStackedChart.vue';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as BarChart } from './BarChart.vue';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Crosshair } from './Crosshair.vue';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DonutChart } from './DonutChart.vue';
|
|
@@ -1,2 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,38 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,17 +0,0 @@
|
|
|
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;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|