vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
201 lines (200 loc) • 6.9 kB
JavaScript
import { ref as m, computed as c, createElementBlock as d, openBlock as $, Fragment as k, createCommentVNode as h, createElementVNode as a, normalizeStyle as o, unref as C, renderList as b, createBlock as N } from "vue";
import { u as q, a as M } from "./useNestedProp-2p4Tjzc8.js";
import { X as S } from "./lib-2iaAPQ_c.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", "r", "fill"], T = {
__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
},
thickness: {
type: Number,
default: 1
}
},
setup(e) {
const v = e, i = m({
/**
* 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"
}), l = c(() => 2 * (v.thickness || 1)), u = c(() => [void 0, null].includes(v.quanta) ? i.value.X : i.value[v.quanta]);
return (f, t) => ($(), d(k, null, [
[void 0, null, "."].includes(e.quanta) ? h("", !0) : ($(), d("g", w, [
a("path", {
d: `M ${e.x} ${e.y}
L ${e.x + l.value} ${e.y - l.value}
L ${e.x + 26 - l.value} ${e.y - l.value}
L ${e.x + 26} ${e.y}
L ${e.x + 26 - l.value} ${e.y + l.value}
L ${e.x + l.value} ${e.y + l.value} Z`,
fill: u.value[0] == 1 ? e.color : e.backgroundColor,
stroke: "none"
}, null, 8, B),
a("path", {
d: `M ${e.x + 28 - l.value} ${e.y + 28 - l.value}
L ${e.x + 28 - l.value} ${e.y + 2 + l.value}
L ${e.x + 28} ${e.y + 2}
L ${e.x + 28 + l.value} ${e.y + 2 + l.value}
L ${e.x + 28 + l.value} ${e.y + 28 - l.value}
L ${e.x + 28} ${e.y + 28}
L ${e.x + 28 - l.value} ${e.y + 28 - l.value}`,
fill: u.value[1] == 1 ? e.color : e.backgroundColor,
stroke: "none"
}, null, 8, F),
a("path", {
d: `M ${e.x + 28 - l.value} ${e.y + 58 - l.value}
L ${e.x + 28 - l.value} ${e.y + 32 + l.value}
L ${e.x + 28} ${e.y + 32}
L ${e.x + 28 + l.value} ${e.y + 32 + l.value}
L ${e.x + 28 + l.value} ${e.y + 58 - l.value}
L ${e.x + 28} ${e.y + 58}
L ${e.x + 28 - l.value} ${e.y + 58 - l.value}`,
fill: u.value[2] == 1 ? e.color : e.backgroundColor,
stroke: "none"
}, null, 8, X),
a("path", {
d: `M ${e.x + l.value} ${e.y + 60 - l.value}
L ${e.x} ${e.y + 60}
L ${e.x + l.value} ${e.y + 60 + l.value}
L ${e.x + 26 - l.value} ${e.y + 60 + l.value}
L ${e.x + 26} ${e.y + 60}
L ${e.x + 26 - l.value} ${e.y + 60 - l.value}
L ${e.x + l.value} ${e.y + 60 - l.value}`,
fill: u.value[3] == 1 ? e.color : e.backgroundColor,
stroke: "none"
}, null, 8, E),
a("path", {
d: `M ${e.x - 2 + l.value} ${e.y + 58 - l.value}
L ${e.x - 2 + l.value} ${e.y + 32 + l.value}
L ${e.x - 2} ${e.y + 32}
L ${e.x - 2 - l.value} ${e.y + 32 + l.value}
L ${e.x - 2 - l.value} ${e.y + 58 - l.value}
L ${e.x - 2} ${e.y + 58}
L ${e.x - 2 + l.value} ${e.y + 58 - l.value}`,
fill: u.value[4] == 1 ? e.color : e.backgroundColor,
stroke: "none"
}, null, 8, I),
a("path", {
d: `M ${e.x - 2 + l.value} ${e.y + 28 - l.value}
L ${e.x - 2 + l.value} ${e.y + 2 + l.value}
L ${e.x - 2} ${e.y + 2}
L ${e.x - 2 - l.value} ${e.y + 2 + l.value}
L ${e.x - 2 - l.value} ${e.y + 28 - l.value}
L ${e.x - 2} ${e.y + 28}
L ${e.x - 2 + l.value} ${e.y + 28 - l.value}`,
fill: u.value[5] == 1 ? e.color : e.backgroundColor,
stroke: "none"
}, null, 8, O),
a("path", {
d: `M ${e.x + l.value} ${e.y + 30 - l.value}
L ${e.x} ${e.y + 30}
L ${e.x + l.value} ${e.y + 30 + l.value}
L ${e.x + 26 - l.value} ${e.y + 30 + l.value}
L ${e.x + 26} ${e.y + 30}
L ${e.x + 26 - l.value} ${e.y + 30 - l.value}
L ${e.x + l.value} ${e.y + 30 - l.value}`,
fill: u.value[6] == 1 ? e.color : e.backgroundColor,
stroke: "none"
}, null, 8, A)
])),
e.quanta == "." ? ($(), d("g", D, [
a("circle", {
cx: e.x - 8,
cy: e.y + 60,
r: 2 + l.value / 2,
fill: e.color
}, null, 8, G)
])) : h("", !0)
], 64));
}
}, V = ["xmlns", "viewBox"], U = {
__name: "vue-ui-digits",
props: {
dataset: {
type: Number,
default: 0
},
config: {
type: Object,
default() {
return {};
}
}
},
setup(e) {
const { vue_ui_digits: v } = q(), i = e, l = c(() => M({
userConfig: i.config,
defaultConfig: v
})), u = c(() => {
const t = (i.dataset || 0).toString().split(""), y = [], n = {
x: 10,
y: 10
};
let x = 0;
for (let L = 0; L < t.length; L += 1) {
const g = t[L];
y.push({
x: n.x + x,
y: n.y,
quanta: g
}), g == "." ? x += 2 : x += 44;
}
return y;
}), f = c(() => Math.max(...u.value.map((t) => t.x)) + 36);
return (t, y) => ($(), d("svg", {
class: "vue-data-ui-component vue-ui-digits",
xmlns: C(S),
viewBox: `0 0 ${f.value} 80`,
style: o(`background:${l.value.backgroundColor};${l.value.height ? `height:${l.value.height};` : ""}${l.value.width ? `width:${l.value.width}` : ""}`)
}, [
($(!0), d(k, null, b(u.value, (n) => ($(), N(T, {
x: n.x,
y: n.y,
quanta: n.quanta,
color: l.value.digits.color,
backgroundColor: l.value.digits.skeletonColor,
thickness: l.value.digits.thickness
}, null, 8, ["x", "y", "quanta", "color", "backgroundColor", "thickness"]))), 256))
], 12, V));
}
};
export {
U as default
};