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