vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
154 lines (153 loc) • 5.32 kB
JavaScript
import { ref as C, computed as y, openBlock as u, createElementBlock as a, Fragment as k, createElementVNode as l, unref as e, createCommentVNode as o, normalizeStyle as b, renderList as N, createBlock as q } from "vue";
import { u as M } from "./useNestedProp-Cj0kHD7k.js";
import { u as v, X as S } from "./index-WrV3SAID.js";
const w = { key: 0 }, B = ["d", "fill"], F = ["d", "fill"], X = ["d", "fill"], E = ["d", "fill"], I = ["d", "fill"], O = ["d", "fill"], A = ["d", "fill"], D = { key: 1 }, G = ["cx", "cy", "fill"], V = {
__name: "Digit",
props: {
quanta: {
type: String,
default: null
},
backgroundColor: {
type: String,
default: "#e1e5e8"
},
color: {
type: String,
default: "#000000"
},
// coordinates from top left of a
x: {
type: Number,
default: 0
},
y: {
type: Number,
default: 0
}
},
setup(t) {
const d = t, i = C({
/**
* clockwise from top (last: g)
* a
* ----
* f | | b
* ----
* e | g | c
* ----
* d
*/
0: "1111110",
1: "0110000",
2: "1101101",
3: "1111001",
4: "0110011",
5: "1011011",
6: "1011111",
7: "1110000",
8: "1111111",
9: "1111011",
"-": "0000001",
X: "0000000"
}), n = y(() => [void 0, null].includes(d.quanta) ? i.value.X : i.value[d.quanta]);
return (x, h) => (u(), a(k, null, [
[void 0, null, "."].includes(t.quanta) ? o("", !0) : (u(), a("g", w, [
l("path", {
d: `M ${t.x} ${t.y} L ${t.x + 2} ${t.y - 2} L ${t.x + 24} ${t.y - 2} L ${t.x + 26} ${t.y} L ${t.x + 24} ${t.y + 2} L ${t.x + 2} ${t.y + 2}Z`,
fill: e(n)[0] == 1 ? t.color : t.backgroundColor,
stroke: "none"
}, null, 8, B),
l("path", {
d: `M ${t.x + 26} ${t.y + 26} L ${t.x + 26} ${t.y + 4} L ${t.x + 28} ${t.y + 2} L ${t.x + 30} ${t.y + 4} L ${t.x + 30} ${t.y + 26} L ${t.x + 28} ${t.y + 28} L ${t.x + 26} ${t.y + 26}`,
fill: e(n)[1] == 1 ? t.color : t.backgroundColor,
stroke: "none"
}, null, 8, F),
l("path", {
d: `M ${t.x + 26} ${t.y + 56} L ${t.x + 26} ${t.y + 34} L ${t.x + 28} ${t.y + 32} L ${t.x + 30} ${t.y + 34} L ${t.x + 30} ${t.y + 56} L ${t.x + 28} ${t.y + 58} L ${t.x + 26} ${t.y + 56}`,
fill: e(n)[2] == 1 ? t.color : t.backgroundColor,
stroke: "none"
}, null, 8, X),
l("path", {
d: `M ${t.x + 2} ${t.y + 58} L ${t.x} ${t.y + 60} L ${t.x + 2} ${t.y + 62} L ${t.x + 24} ${t.y + 62} L ${t.x + 26} ${t.y + 60} L ${t.x + 24} ${t.y + 58} L ${t.x + 2} ${t.y + 58}`,
fill: e(n)[3] == 1 ? t.color : t.backgroundColor,
stroke: "none"
}, null, 8, E),
l("path", {
d: `M ${t.x} ${t.y + 34} L ${t.x - 2} ${t.y + 32} L ${t.x - 4} ${t.y + 34} L ${t.x - 4} ${t.y + 56} L ${t.x - 2} ${t.y + 58} L ${t.x} ${t.y + 56} L ${t.x} ${t.y + 34}`,
fill: e(n)[4] == 1 ? t.color : t.backgroundColor,
stroke: "none"
}, null, 8, I),
l("path", {
d: `M ${t.x - 2} ${t.y + 2} L ${t.x} ${t.y + 4} L ${t.x} ${t.y + 26} L ${t.x - 2} ${t.y + 28} L ${t.x - 4} ${t.y + 26} L ${t.x - 4} ${t.y + 4} L ${t.x - 2} ${t.y + 2}`,
fill: e(n)[5] == 1 ? t.color : t.backgroundColor,
stroke: "none"
}, null, 8, O),
l("path", {
d: `M ${t.x + 2} ${t.y + 28} L ${t.x} ${t.y + 30} L ${t.x + 2} ${t.y + 32} L ${t.x + 24} ${t.y + 32} L ${t.x + 26} ${t.y + 30} L ${t.x + 24} ${t.y + 28} L ${t.x + 2} ${t.y + 28}`,
fill: e(n)[6] == 1 ? t.color : t.backgroundColor,
stroke: "none"
}, null, 8, A)
])),
t.quanta == "." ? (u(), a("g", D, [
l("circle", {
cx: t.x - 8,
cy: t.y + 60,
r: 3,
fill: t.color
}, null, 8, G)
])) : o("", !0)
], 64));
}
}, j = ["xmlns", "viewBox"], U = {
__name: "vue-ui-digits",
props: {
dataset: {
type: Number,
default: 0
},
config: {
type: Object,
default() {
return {};
}
}
},
setup(t) {
const { vue_ui_digits: d } = v(), i = t, n = y(() => M({
userConfig: i.config,
defaultConfig: d
})), x = y(() => {
const c = (i.dataset || 0).toString().split(""), L = [], $ = {
x: 10,
y: 10
};
let f = 0;
for (let g = 0; g < c.length; g += 1) {
const m = c[g];
L.push({
x: $.x + f,
y: $.y,
quanta: m
}), m == "." ? f += 2 : f += 44;
}
return L;
}), h = y(() => Math.max(...x.value.map((c) => c.x)) + 36);
return (c, L) => (u(), a("svg", {
xmlns: e(S),
viewBox: `0 0 ${e(h)} 80`,
style: b(`background:${e(n).backgroundColor};${e(n).height ? `height:${e(n).height};` : ""}${e(n).width ? `width:${e(n).width}` : ""}`)
}, [
(u(!0), a(k, null, N(e(x), ($) => (u(), q(V, {
x: $.x,
y: $.y,
quanta: $.quanta,
color: e(n).digits.color,
backgroundColor: e(n).digits.skeletonColor
}, null, 8, ["x", "y", "quanta", "color", "backgroundColor"]))), 256))
], 12, j));
}
};
export {
U as default
};