vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,543 lines • 81.2 kB
JavaScript
import { ref as w, computed as g, createElementBlock as e, openBlock as o, normalizeStyle as n, normalizeClass as N, createCommentVNode as a, unref as s, createVNode as d, createElementVNode as t, Fragment as k, renderList as v, createStaticVNode as $ } from "vue";
import { u as F, P as A, X as c, s as h, W as O } from "./index-CHWA6Lnw.js";
import { u as V } from "./useNestedProp-ByBiJC9_.js";
import { _ as y } from "./PackageVersion-DcMafJMi.js";
import { _ as X } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const G = ["id"], R = ["xmlns"], T = ["stroke"], Y = ["stroke"], D = ["stroke"], U = ["fill", "stroke"], J = ["fill"], K = ["fill", "stroke"], Q = ["fill"], ll = ["fill", "stroke"], tl = ["fill"], el = ["fill", "stroke"], ol = ["fill"], sl = ["fill", "stroke"], rl = ["fill"], il = ["fill", "stroke"], nl = ["fill"], al = ["xmlns"], cl = ["stroke"], ul = ["stroke"], dl = ["stroke"], yl = ["stroke"], kl = ["stroke"], hl = ["stroke"], vl = ["stroke"], _l = ["stroke"], xl = ["stroke"], pl = ["xmlns"], gl = ["stroke", "fill"], fl = ["xmlns"], wl = ["stroke", "fill"], ml = ["xmlns"], bl = ["fill"], Ml = ["fill"], Cl = ["fill"], Ll = ["fill"], $l = ["xmlns"], Al = ["stroke"], Pl = ["fill"], Bl = ["stroke", "fill"], Wl = ["stroke", "fill"], zl = ["fill"], jl = ["stroke", "fill"], ql = ["stroke", "fill"], Hl = ["fill"], El = ["stroke", "fill"], Sl = ["stroke", "fill"], Zl = ["fill"], Il = ["stroke", "fill"], Nl = ["stroke", "fill"], Fl = ["fill"], Ol = ["stroke", "fill"], Vl = ["stroke", "fill"], Xl = ["xmlns"], Gl = ["stroke"], Rl = ["stroke"], Tl = ["stroke", "fill"], Yl = ["stroke", "fill"], Dl = ["stroke", "fill"], Ul = ["stroke", "fill"], Jl = ["stroke", "fill"], Kl = ["stroke", "fill"], Ql = ["stroke", "fill"], lt = ["stroke", "fill"], tt = ["stroke", "fill"], et = ["stroke", "fill"], ot = ["stroke", "fill"], st = ["stroke", "fill"], rt = ["stroke", "fill"], it = ["stroke", "fill"], nt = ["stroke", "fill"], at = ["stroke", "fill"], ct = ["stroke", "fill"], ut = ["stroke", "fill"], dt = ["stroke", "fill"], yt = ["stroke", "fill"], kt = ["stroke", "fill"], ht = ["stroke", "fill"], vt = ["stroke", "fill"], _t = ["xmlns"], xt = ["stroke"], pt = ["xmlns"], gt = ["stroke"], ft = ["xmlns"], wt = ["stroke"], mt = ["xmlns"], bt = ["fill"], Mt = ["fill"], Ct = ["fill"], Lt = ["fill"], $t = ["fill"], At = ["fill"], Pt = ["fill"], Bt = ["fill"], Wt = ["fill"], zt = ["fill"], jt = ["fill"], qt = ["fill"], Ht = ["xmlns"], Et = ["stroke"], St = ["stroke"], Zt = ["stroke"], It = ["stroke"], Nt = ["stroke"], Ft = ["stroke"], Ot = ["xmlns"], Vt = ["stroke"], Xt = ["stroke"], Gt = ["stroke"], Rt = ["stroke"], Tt = ["stroke"], Yt = ["stroke"], Dt = ["stroke"], Ut = ["stroke"], Jt = ["stroke"], Kt = ["xmlns"], Qt = ["stroke"], le = ["xmlns"], te = ["stroke"], ee = ["stroke"], oe = ["stroke"], se = ["stroke"], re = ["stroke"], ie = ["stroke"], ne = ["stroke"], ae = ["stroke"], ce = ["stroke"], ue = ["xmlns"], de = ["x1", "x2", "stroke"], ye = ["xmlns"], ke = ["x", "y", "width", "height", "fill"], he = ["y", "width", "height", "fill"], ve = ["xmlns"], _e = ["fill"], xe = ["fill"], pe = ["fill"], ge = ["xmlns"], fe = ["x1", "x2", "y1", "y2", "stroke"], we = ["stroke"], me = ["fill"], be = ["xmlns"], Me = ["fill"], Ce = ["fill"], Le = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], $e = ["xmlns"], Ae = { key: 0 }, Pe = ["stroke", "stroke-width"], Be = ["stroke", "stroke-width"], We = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ze = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], je = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], qe = ["x", "y", "height", "width", "fill"], He = ["xmlns", "viewBox"], Ee = ["x", "y", "stroke", "fill"], Se = ["xmlns"], Ze = ["d", "stroke"], Ie = ["cx", "cy", "r", "fill", "stroke"], Ne = ["cx", "cy", "r", "fill", "stroke"], Fe = ["x", "y", "width", "fill"], Oe = ["cx", "cy", "fill"], Ve = ["cx", "cy", "fill"], Xe = ["stroke"], Ge = ["xmlns"], Re = ["stroke", "stroke-width"], Te = ["stroke", "stroke-width"], Ye = ["stroke", "stroke-width"], De = ["fill"], Ue = ["fill"], Je = ["fill"], Ke = ["fill"], Qe = ["fill"], lo = ["fill"], to = ["xmlns"], eo = { key: 0 }, oo = ["stroke", "stroke-width"], so = ["stroke", "stroke-width"], ro = ["stroke", "stroke-width"], io = { key: 1 }, no = ["r", "fill"], ao = ["r", "fill"], co = ["xmlns"], uo = { key: 0 }, yo = ["stroke", "stroke-width"], ko = ["stroke", "stroke-width"], ho = ["fill", "rx", "x", "y", "width", "height"], vo = ["xmlns"], _o = ["stroke-width", "stroke"], xo = ["stroke-width", "stroke"], po = ["stroke-width", "stroke"], go = ["xmlns"], fo = ["stroke"], wo = ["stroke"], mo = ["stroke"], bo = ["stroke"], Mo = ["fill"], Co = ["stroke"], Lo = ["xmlns"], $o = ["stroke", "stroke-width"], Ao = ["stroke", "stroke-width"], Po = ["fill", "r"], Bo = ["fill", "r"], Wo = ["fill", "r"], zo = ["fill", "r"], jo = ["fill", "r"], qo = ["fill", "r"], Ho = ["fill", "r"], Eo = ["fill", "r"], So = ["fill", "r"], Zo = ["xmlns"], Io = ["d", "stroke", "stroke-width"], No = ["d", "stroke", "stroke-width"], Fo = ["d", "stroke", "stroke-width"], Oo = ["d", "stroke", "stroke-width"], Vo = ["stroke", "stroke-width"], Xo = ["stroke", "stroke-width"], Go = ["stroke", "stroke-width"], Ro = ["fill"], To = ["fill"], Yo = ["xmlns"], Do = ["x", "y", "fill"], Uo = ["x", "y", "fill"], Jo = ["x", "y", "fill"], Ko = ["xmlns"], Qo = ["fill"], ls = ["fill"], ts = ["y1", "y2", "stroke", "stroke-width"], es = ["x1", "x2", "stroke", "stroke-width"], os = ["xmlns", "stroke"], ss = ["fill"], rs = ["xmlns", "stroke"], is = ["xmlns", "stroke"], ns = ["fill"], as = ["xmlns", "stroke"], cs = ["xmlns", "stroke"], us = ["fill"], ds = ["xmlns", "stroke"], ys = ["xmlns", "stroke"], ks = ["fill"], hs = ["xmlns", "stroke"], vs = ["xmlns", "stroke"], _s = ["fill"], xs = ["xmlns", "stroke"], ps = ["xmlns"], gs = ["points", "fill", "stroke", "stroke-width"], fs = ["xmlns"], ws = { key: 0 }, ms = ["stroke", "stroke-width"], bs = ["y", "width", "fill", "rx"], Ms = {
__name: "vue-ui-skeleton",
props: {
config: {
type: Object,
default() {
return {};
}
}
},
setup(P) {
const { vue_ui_skeleton: B } = F(), W = P, z = w(`vue-ui-skeleton-${Math.random()}`), l = g(() => V({
userConfig: W.config,
defaultConfig: B
})), j = g(() => l.value.style.animated), u = g(() => l.value.type), q = w([60, 50, 55, 36, 40, 25, 26, 12]), H = g(() => A({
plot: { x: 50, y: 50 },
radius: 40,
sides: 6
}).path), E = g(() => A({
plot: { x: 50, y: 50 },
radius: 30,
sides: 6
}).path), S = g(() => A({
plot: { x: 50, y: 50 },
radius: 20,
sides: 6
}).path), Z = g(() => A({
plot: { x: 50, y: 50 },
radius: 10,
sides: 6
}).path), b = w([
{
root: {
x: 70,
y: 77,
r: 44,
opacity: 100
},
bars: [
{
x: 200,
y: 37,
opacity: 100,
width: 240
},
{
x: 200,
y: 118,
opacity: 100,
width: 180
},
{
x: 200,
y: 253,
opacity: 100,
width: 80
}
]
},
{
root: {
x: 70,
y: 177,
r: 32,
opacity: 70
},
bars: [
{
x: 200,
y: 145,
opacity: 70,
width: 160
},
{
x: 200,
y: 172,
opacity: 70,
width: 140
},
{
x: 200,
y: 199,
opacity: 70,
width: 120
}
]
},
{
root: {
x: 70,
y: 257,
r: 24,
opacity: 40
},
bars: [
{
x: 200,
y: 64,
opacity: 40,
width: 220
},
{
x: 200,
y: 91,
opacity: 40,
width: 200
},
{
x: 200,
y: 226,
opacity: 40,
width: 100
}
]
}
]), x = w([
{
y: 200,
height: 100,
bar: 50
},
{
y: 180,
height: 100,
bar: 40
},
{
y: 150,
height: 100,
bar: 30
},
{
y: 120,
height: 80,
bar: 50
},
{
y: 110,
height: 60,
bar: 30
},
{
y: 80,
height: 80,
bar: 10
},
{
y: 50,
height: 80,
bar: 40
},
{
y: 24,
height: 40,
bar: 24
},
{
y: 44,
height: 20,
bar: 13
},
{
y: 32,
height: 45,
bar: 19
}
]), m = w([
[3, 2.5],
[4, 3.1],
[8, 6],
[9.5, 6.5],
[12, 11],
[16, 15],
[18, 18.2],
[25, 24],
[24, 26],
[32, 32],
[33, 32],
[32, 31],
[38, 37],
[37, 38],
[42, 41],
[40, 41],
[44, 45],
[38, 35],
[31, 32]
]), M = w(
[
{ x: 40, y: 30 },
{ x: 45, y: 28 },
{ x: 50, y: 25 },
{ x: 55, y: 20 },
{ x: 60, y: 27 },
{ x: 65, y: 14 },
{ x: 70, y: 23 },
{ x: 75, y: 16 },
{ x: 80, y: 25 },
{ x: 85, y: 10 },
{ x: 90, y: 18 },
{ x: 95, y: 7 },
{ x: 100, y: 12 },
{ x: 105, y: 10 },
{ x: 110, y: 20 },
{ x: 115, y: 7 },
{ x: 120, y: 14 },
{ x: 125, y: 10 },
{ x: 130, y: 19 },
{ x: 135, y: 3 },
{ x: 140, y: 10 },
{ x: 145, y: 2 },
{ x: 150, y: 1 }
]
);
function C(f, _ = 1) {
return {
x: 200 + 160 * Math.cos(29.85 + f * Math.PI / 180) * _,
y: 200 + 160 * Math.sin(29.85 + f * Math.PI / 180) * _
};
}
const I = g(() => {
const f = [];
for (let r = 0; r < 100; r += 1)
f.push({
x1: C(360 / 100 * r).x,
y1: C(360 / 100 * r).y,
x2: C(360 / 100 * r, 0.9).x,
y2: C(360 / 100 * r, 0.9).y,
color: l.value.style.wheel.color
});
return f;
});
return (f, _) => (o(), e("div", {
id: z.value,
class: N({ "vue-ui-skeleton": !0, "vue-ui-skeleton-animated": j.value }),
style: n(`background:${l.value.style.backgroundColor};color:${l.value.style.color};display:flex;align-items:center;justify-content:center;`)
}, [
u.value === "historyPlot" ? (o(), e("svg", {
key: 0,
xmlns: s(c),
width: "100%",
viewBox: "0 0 612 512",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("line", {
x1: "12",
x2: "12",
y1: "12",
y2: "500",
stroke: l.value.style.historyPlot.color,
"stroke-width": "3",
"stroke-linecap": "round"
}, null, 8, T),
t("line", {
x1: "12",
x2: "600",
y1: "500",
y2: "500",
stroke: l.value.style.historyPlot.color,
"stroke-width": "3",
"stroke-linecap": "round"
}, null, 8, Y),
t("path", {
d: "M 80,100 300,200 400,150 560,230 360,420 230,320",
fill: "none",
stroke: l.value.style.historyPlot.color,
"stroke-width": "3"
}, null, 8, D),
t("circle", {
cx: "80",
cy: "100",
r: "24",
fill: l.value.style.historyPlot.color,
stroke: l.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, U),
t("text", {
x: "80",
y: "108",
fill: l.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, "1", 8, J),
t("circle", {
cx: "300",
cy: "200",
r: "24",
fill: l.value.style.historyPlot.color,
stroke: l.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, K),
t("text", {
x: "300",
y: "208",
fill: l.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, "2", 8, Q),
t("circle", {
cx: "400",
cy: "150",
r: "24",
fill: l.value.style.historyPlot.color,
stroke: l.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, ll),
t("text", {
x: "400",
y: "158",
fill: l.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, "3", 8, tl),
t("circle", {
cx: "560",
cy: "230",
r: "24",
fill: l.value.style.historyPlot.color,
stroke: l.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, el),
t("text", {
x: "560",
y: "238",
fill: l.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, "4", 8, ol),
t("circle", {
cx: "360",
cy: "420",
r: "24",
fill: l.value.style.historyPlot.color,
stroke: l.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, sl),
t("text", {
x: "360",
y: "428",
fill: l.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, "5", 8, rl),
t("circle", {
cx: "230",
cy: "320",
r: "24",
fill: l.value.style.historyPlot.color,
stroke: l.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, il),
t("text", {
x: "230",
y: "328",
fill: l.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, "6", 8, nl)
], 12, R)) : a("", !0),
u.value === "circlePack" ? (o(), e("svg", {
key: 1,
xmlns: s(c),
width: "100%",
viewBox: "0 0 100 100",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
t("circle", {
cx: 50,
cy: 50,
r: 20,
stroke: l.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, cl),
t("circle", {
cx: 80,
cy: 50,
r: 10,
stroke: l.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, ul),
t("circle", {
cx: 28,
cy: 30,
r: 10,
stroke: l.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, dl),
t("circle", {
cx: 25,
cy: 76,
r: 16,
stroke: l.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, yl),
t("circle", {
cx: 60,
cy: 78.5,
r: 10,
stroke: l.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, kl),
t("circle", {
cx: 64,
cy: 20,
r: 13,
stroke: l.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, hl),
t("circle", {
cx: 72,
cy: 37,
r: 5,
stroke: l.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, vl),
t("circle", {
cx: 25,
cy: 45,
r: 5,
stroke: l.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, _l),
t("circle", {
cx: 70,
cy: 66,
r: 5,
stroke: l.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, xl)
], 12, al)) : a("", !0),
u.value === "flow" ? (o(), e("svg", {
key: 2,
xmlns: s(c),
width: "100%",
viewBox: "0 0 80 60",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("path", {
d: "M 5 5 L 5 55 M 75 5 L 75 55 M 28 5 L 28 55 M 52 5 L 52 55 M 5 8 L 28 12 L 52 9 L 75 8 L 75 12 L 52 12 L 28 21 L 5 29 Z M 5 34 L 28 35 L 52 24 L 75 21 L 75 27 L 52 30 L 28 44 L 52 39 L 75 41 L 75 47 L 52 45 L 28 52 L 5 52 Z",
stroke: l.value.style.flow.color,
"stroke-width": 0.8,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: l.value.style.flow.color
}, null, 8, gl)
], 12, pl)) : a("", !0),
u.value === "parallelCoordinatePlot" ? (o(), e("svg", {
key: 3,
xmlns: s(c),
width: "100%",
viewBox: "0 0 80 60",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("path", {
d: "M 5 5 L 5 55 M 75 5 L 75 55 M 28 5 L 28 55 M 52 5 L 52 55 M 5 10 A 1 1 0 0 0 5 12 A 1 1 0 0 0 5 10 M 28 15 A 1 1 0 0 0 28 17 A 1 1 0 0 0 28 15 M 52 8 A 1 1 0 0 0 52 10 A 1 1 0 0 0 52 8 M 75 11 A 1 1 0 0 0 75 13 A 1 1 0 0 0 75 11 M 6 11 L 27 16 M 29 16 L 51 9 M 53 9 L 74 12 M 5 50 A 1 1 0 0 0 5 48 A 1 1 0 0 0 5 50 M 28 39 A 1 1 0 0 0 28 41 A 1 1 0 0 0 28 39 M 52 45 A 1 1 0 0 0 52 47 A 1 1 0 0 0 52 45 M 75 45 A 1 1 0 0 0 75 47 A 1 1 0 0 0 75 45 M 6 49 L 27 40 M 29 40 L 51 46 M 53 46 L 74 46 M 5 25 A 1 1 0 0 0 5 27 A 1 1 0 0 0 5 25 M 28 31 A 1 1 0 0 0 28 33 A 1 1 0 0 0 28 31 M 52 23 A 1 1 0 0 0 52 25 A 1 1 0 0 0 52 23 M 75 21 A 1 1 0 0 0 75 23 A 1 1 0 0 0 75 21 M 6 26 L 27 32 M 29 32 L 51 24 M 53 24 L 74 22",
stroke: l.value.style.parallelCoordinatePlot.color,
"stroke-width": 0.8,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: l.value.style.parallelCoordinatePlot.color
}, null, 8, wl)
], 12, fl)) : a("", !0),
u.value === "bullet" ? (o(), e("svg", {
key: 4,
xmlns: s(c),
width: "100%",
viewBox: "0 0 600 96",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
t("rect", {
fill: l.value.style.bullet.color,
x: 24,
y: 12,
width: 300,
height: 72,
style: { opacity: "0.8" }
}, null, 8, bl),
t("rect", {
fill: l.value.style.bullet.color,
x: 324,
y: 12,
width: 150,
height: 72,
style: { opacity: "0.6" }
}, null, 8, Ml),
t("rect", {
fill: l.value.style.bullet.color,
x: 474,
y: 12,
width: 102,
height: 72,
style: { opacity: "0.3" }
}, null, 8, Cl),
t("rect", {
fill: l.value.style.bullet.color,
x: 24,
y: 36,
width: 490,
height: 24,
style: { opacity: "1" }
}, null, 8, Ll)
], 12, ml)) : a("", !0),
u.value === "dumbbell" ? (o(), e("svg", {
key: 5,
xmlns: s(c),
width: "100%",
viewBox: "0 0 100 55",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("line", {
x1: "3",
x2: "3",
y1: "3",
y2: "67",
stroke: l.value.style.dumbbell.color,
"stroke-width": 0.5,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Al),
t("path", {
d: `
M 30,11
C 39,10 39,10
45,11
L 45,9
C 39,10 39,10
30,9 Z
`,
fill: l.value.style.dumbbell.color
}, null, 8, Pl),
t("circle", {
cx: "30",
cy: "10",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, Bl),
t("circle", {
cx: "46",
cy: "10",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, Wl),
t("path", {
d: `
M 10,21
C 23,20 23,20
36,21
L 36,19
C 23,20 23,20
10,19 Z
`,
fill: l.value.style.dumbbell.color
}, null, 8, zl),
t("circle", {
cx: "10",
cy: "20",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, jl),
t("circle", {
cx: "36",
cy: "20",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, ql),
t("path", {
d: `
M 30,31
C 45,30 45,30
60,31
L 60,29
C 45,30 45,30
30,29 Z
`,
fill: l.value.style.dumbbell.color
}, null, 8, Hl),
t("circle", {
cx: "30",
cy: "30",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, El),
t("circle", {
cx: "60",
cy: "30",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, Sl),
t("path", {
d: `
M 50,41
C 65,40 65,40
80,41
L 80,39
C 65,40 65,40
50,39 Z
`,
fill: l.value.style.dumbbell.color
}, null, 8, Zl),
t("circle", {
cx: "50",
cy: "40",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, Il),
t("circle", {
cx: "80",
cy: "40",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, Nl),
t("path", {
d: `
M 40,51
C 65,50 65,50
90,51
L 90,49
C 65,50 65,50
40,49 Z
`,
fill: l.value.style.dumbbell.color
}, null, 8, Fl),
t("circle", {
cx: "40",
cy: "50",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, Ol),
t("circle", {
cx: "90",
cy: "50",
r: "2",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.dumbbell.color
}, null, 8, Vl)
], 12, $l)) : a("", !0),
u.value === "stripPlot" ? (o(), e("svg", {
key: 6,
xmlns: s(c),
width: "100%",
viewBox: "0 0 100 100",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("line", {
x1: "3",
x2: "3",
y1: "3",
y2: "97",
stroke: l.value.style.stripPlot.color,
"stroke-width": 0.5,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Gl),
t("line", {
x1: "3",
x2: "97",
y1: "97",
y2: "97",
stroke: l.value.style.stripPlot.color,
"stroke-width": 0.5,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Rl),
t("circle", {
cx: "12",
cy: "8",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Tl),
t("circle", {
cx: "12",
cy: "40",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Yl),
t("circle", {
cx: "12",
cy: "60",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Dl),
t("circle", {
cx: "12",
cy: "70",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Ul),
t("circle", {
cx: "32",
cy: "25",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Jl),
t("circle", {
cx: "32",
cy: "38",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Kl),
t("circle", {
cx: "32",
cy: "44",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Ql),
t("circle", {
cx: "32",
cy: "55",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, lt),
t("circle", {
cx: "52",
cy: "30",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, tt),
t("circle", {
cx: "52",
cy: "33",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, et),
t("circle", {
cx: "52",
cy: "43",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, ot),
t("circle", {
cx: "52",
cy: "63",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, st),
t("circle", {
cx: "52",
cy: "78",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, rt),
t("circle", {
cx: "72",
cy: "58",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, it),
t("circle", {
cx: "72",
cy: "70",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, nt),
t("circle", {
cx: "72",
cy: "78",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, at),
t("circle", {
cx: "72",
cy: "88",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, ct),
t("circle", {
cx: "92",
cy: "66",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, ut),
t("circle", {
cx: "92",
cy: "77",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, dt),
t("circle", {
cx: "92",
cy: "85",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, yt),
t("circle", {
cx: "92",
cy: "88",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, kt),
t("circle", {
cx: "92",
cy: "90",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, ht),
t("circle", {
cx: "92",
cy: "92",
r: "4",
stroke: l.value.style.backgroundColor,
"stroke-width": 0.3,
fill: l.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, vt)
], 12, Xl)) : a("", !0),
u.value === "treemap" ? (o(), e("svg", {
key: 7,
xmlns: s(c),
width: "100%",
viewBox: "0 0 30 21",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("path", {
fill: "none",
stroke: l.value.style.treemap.color,
"stroke-width": "0.3",
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M 1 1 L 29 1 L 29 20 L 1 20 Z M 10 1 L 10 20 M 1 13 L 10 13 M 22 11 L 22 20 M 10 11 L 22 11 M 22 11 L 29 11 M 7 13 L 7 20 M 17 11 L 17 20 M 22 15 L 29 15 M 26 15 L 26 20 M 20 1 L 20 11"
}, null, 8, xt)
], 12, _t)) : a("", !0),
u.value === "galaxy" ? (o(), e("svg", {
key: 8,
xmlns: s(c),
width: "100%",
viewBox: "0.5 0 20 20",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("path", {
fill: "none",
stroke: l.value.style.galaxy.color,
"stroke-width": "2",
"stroke-linecap": "round",
d: "M 7 11 A 1 1 0 0 0 11 11 M 14 11 A 1 1 0 0 0 7 11 M 3 11 A 1 1 0 0 0 14 11 M 18 11 A 1 1 0 0 0 3 11 M 16.4 16 C 17 15 18 13 18 11"
}, null, 8, gt)
], 12, pt)) : a("", !0),
u.value === "bar3d" ? (o(), e("svg", {
key: 9,
xmlns: s(c),
width: "100%",
viewBox: "2 0 16 20",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("path", {
fill: "none",
stroke: l.value.style.bar3d.color,
"stroke-width": "0.2",
d: "M10 1 6 3 6 17 10 19 14 17 14 3 10 1M6 3 10 5 14 3M10 5 10 19",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, wt)
], 12, ft)) : a("", !0),
u.value === "sparkHistogram" ? (o(), e("svg", {
key: 10,
xmlns: s(c),
width: "100%",
viewBox: "0 0 100 20",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("rect", {
x: "3",
y: "8",
height: "4",
width: "6",
rx: "1.5",
fill: l.value.style.sparkHistogram.color
}, null, 8, bt),
t("rect", {
x: "11",
y: "6",
height: "8",
width: "6",
rx: "2",
fill: l.value.style.sparkHistogram.color
}, null, 8, Mt),
t("rect", {
x: "19",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: l.value.style.sparkHistogram.color
}, null, 8, Ct),
t("rect", {
x: "27",
y: "6",
height: "8",
width: "6",
rx: "2",
fill: l.value.style.sparkHistogram.color
}, null, 8, Lt),
t("rect", {
x: "35",
y: "8",
height: "4",
width: "6",
rx: "1.5",
fill: l.value.style.sparkHistogram.color
}, null, 8, $t),
t("rect", {
x: "43",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: l.value.style.sparkHistogram.color
}, null, 8, At),
t("rect", {
x: "51",
y: "8.5",
height: "3",
width: "6",
rx: "1.5",
fill: l.value.style.sparkHistogram.color
}, null, 8, Pt),
t("rect", {
x: "59",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: l.value.style.sparkHistogram.color
}, null, 8, Bt),
t("rect", {
x: "67",
y: "6",
height: "8",
width: "6",
rx: "2",
fill: l.value.style.sparkHistogram.color
}, null, 8, Wt),
t("rect", {
x: "75",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: l.value.style.sparkHistogram.color
}, null, 8, zt),
t("rect", {
x: "83",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: l.value.style.sparkHistogram.color
}, null, 8, jt),
t("rect", {
x: "91",
y: "8",
height: "4",
width: "6",
rx: "1.5",
fill: l.value.style.sparkHistogram.color
}, null, 8, qt)
], 12, mt)) : a("", !0),
u.value === "sparkbar" ? (o(), e("svg", {
key: 11,
xmlns: s(c),
width: "100%",
viewBox: "0 0 500 200",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("line", {
x1: "12",
x2: "488",
y1: "50",
y2: "50",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkbar.color,
opacity: "0.5"
}, null, 8, Et),
t("line", {
x1: "12",
x2: "400",
y1: "50",
y2: "50",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkbar.color,
opacity: "1"
}, null, 8, St),
t("line", {
x1: "12",
x2: "488",
y1: "100",
y2: "100",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkbar.color,
opacity: "0.5"
}, null, 8, Zt),
t("line", {
x1: "12",
x2: "350",
y1: "100",
y2: "100",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkbar.color,
opacity: "1"
}, null, 8, It),
t("line", {
x1: "12",
x2: "488",
y1: "150",
y2: "150",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkbar.color,
opacity: "0.5"
}, null, 8, Nt),
t("line", {
x1: "12",
x2: "235",
y1: "150",
y2: "150",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkbar.color,
opacity: "1"
}, null, 8, Ft)
], 12, Ht)) : a("", !0),
u.value === "sparkStackbar" ? (o(), e("svg", {
key: 12,
xmlns: s(c),
width: "100%",
viewBox: "0 0 500 64",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("line", {
x1: "12",
x2: "488",
y1: "32",
y2: "32",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkStackbar.color,
opacity: "0.5"
}, null, 8, Vt),
t("line", {
x1: "12",
x2: "380",
y1: "32",
y2: "32",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkStackbar.color,
opacity: "0.6"
}, null, 8, Xt),
t("line", {
x1: "12",
x2: "200",
y1: "32",
y2: "32",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkStackbar.color,
opacity: "0.8"
}, null, 8, Gt),
t("line", {
x1: "12",
x2: "120",
y1: "32",
y2: "32",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: l.value.style.sparkStackbar.color,
opacity: "1"
}, null, 8, Rt)
], 12, Ot)) : a("", !0),
u.value === "thermometer" ? (o(), e("svg", {
key: 13,
width: "100%",
viewBox: "0 0 20 20",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("path", {
fill: "none",
stroke: l.value.style.thermometer.color,
"stroke-width": "0.2",
"stroke-linecap": "round",
d: "M 13 4 A 1 1 0 0 0 7 4 L 7 16 A 1 1 0 0 0 13 16 L 13 4 M 7 15 L 8 15 M 7 12 L 8 12 M 7 9 L 8 9 M 7 6 L 8 6 M 12 15 L 13 15 M 12 12 L 13 12 M 12 9 L 13 9 M 12 6 L 13 6 "
}, null, 8, Tt),
t("path", {
stroke: l.value.style.thermometer.color,
"stroke-width": "1",
style: { opacity: "0.6" },
d: "M 10 17 L 10 12 ",
"stroke-linecap": "round"
}, null, 8, Yt),
t("path", {
"stroke-linecap": "round",
stroke: l.value.style.thermometer.color,
"stroke-width": "1",
opacity: "M 10 17 L 10 9"
}, null, 8, Dt),
t("path", {
"stroke-linecap": "round",
stroke: l.value.style.thermometer.color,
"stroke-width": "1",
opacity: "0.3",
d: "M 10 17 L 10 6"
}, null, 8, Ut),
t("path", {
"stroke-linecap": "round",
stroke: l.value.style.thermometer.color,
"stroke-width": "1",
style: { opacity: "0.1" },
d: "M 10 17 L 10 3"
}, null, 8, Jt)
], 4)) : a("", !0),
u.value === "relationCircle" ? (o(), e("svg", {
key: 14,
xmlns: s(c),
width: "100%",
viewBox: "0 0 20 20",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("path", {
fill: "none",
stroke: l.value.style.relationCircle.color,
"stroke-width": "0.2",
"stroke-linecap": "round",
d: "M1 10A1 1 0 0019 10 1 1 0 001 10M1 10C7 11 9 13 10 19M10 19C10 11 8 7 6 2M10 19C10 11 12 7 14 2M10 19C11 13 12 11 19 10"
}, null, 8, Qt)
], 12, Kt)) : a("", !0),
u.value === "molecule" ? (o(), e("svg", {
key: 15,
xmlns: s(c),
width: "100%",
viewBox: "0 0 100 100",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("circle", {
cx: "50",
cy: "50",
r: "6",
"stroke-width": "2",
fill: "none",
stroke: l.value.style.molecule.color
}, null, 8, te),
t("circle", {
cx: "20",
cy: "50",
r: "3",
"stroke-width": "1.6",
fill: "none",
stroke: l.value.style.molecule.color
}, null, 8, ee),
t("circle", {
cx: "80",
cy: "50",
r: "3",
"stroke-width": "1.6",
fill: "none",
stroke: l.value.style.molecule.color
}, null, 8, oe),
t("circle", {
cx: "50",
cy: "20",
r: "3",
"stroke-width": "1.6",
fill: "none",
stroke: l.value.style.molecule.color
}, null, 8, se),
t("circle", {
cx: "50",
cy: "80",
r: "3",
"stroke-width": "1.6",
fill: "none",
stroke: l.value.style.molecule.color
}, null, 8, re),
t("line", {
x1: "50",
x2: "50",
y1: "23",
y2: "45",
"stroke-width": "1",
stroke: l.value.style.molecule.color
}, null, 8, ie),
t("line", {
x1: "50",
x2: "50",
y1: "77",
y2: "55",
"stroke-width": "1",
stroke: l.value.style.molecule.color
}, null, 8, ne),
t("line", {
x1: "23",
x2: "45",
y1: "50",
y2: "50",
"stroke-width": "1",
stroke: l.value.style.molecule.color
}, null, 8, ae),
t("line", {
x1: "77",
x2: "55",
y1: "50",
y2: "50",
"stroke-width": "1",
stroke: l.value.style.molecule.color
}, null, 8, ce)
], 12, le)) : a("", !0),
u.value === "tiremarks" ? (o(), e("svg", {
key: 16,
xmlns: s(c),
width: "100%",
viewBox: "0 0 312 56",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
(o(), e(k, null, v(100, (r) => t("g", null, [
t("line", {
x1: 10 + r * 2.9,
y1: 6,
x2: 10 + r * 2.9,
y2: 50,
stroke: l.value.style.tiremarks.color,
style: n(r > 80 ? "opacity: 0.5" : ""),
"stroke-linecap": "round"
}, null, 12, de)
])), 64))
], 12, ue)) : a("", !0),
u.value === "pyramid" ? (o(), e("svg", {
key: 17,
xmlns: s(c),
width: "100%",
viewBox: "0 0 105 80",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
(o(!0), e(k, null, v(m.value, (r, i) => (o(), e("g", null, [
t("rect", {
x: 50 - r[0],
y: i * (80 / m.value.length),
width: r[0],
height: 80 / m.value.length * 0.95,
fill: l.value.style.pyramid.color
}, null, 8, ke),
t("rect", {
x: 55,
y: i * (80 / m.value.length),
width: r[1],
height: 80 / m.value.length * 0.95,
fill: l.value.style.pyramid.color
}, null, 8, he)
]))), 256))
], 12, ye)) : a("", !0),
u.value === "rings" ? (o(), e("svg", {
key: 18,
xmlns: s(c),
width: "100%",
viewBox: "0 0 400 400",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("circle", {
cx: 200,
cy: 200,
r: 180,
fill: s(h)(l.value.style.rings.color, 40)
}, null, 8, _e),
t("circle", {
cx: 200,
cy: 250,
r: 130,
fill: s(h)(l.value.style.rings.color, 60)
}, null, 8, xe),
t("circle", {
cx: 200,
cy: 290,
r: 90,
fill: s(h)(l.value.style.rings.color, 100)
}, null, 8, pe)
], 12, ve)) : a("", !0),
u.value === "wheel" ? (o(), e("svg", {
key: 19,
xmlns: s(c),
width: "100%",
viewBox: "0 0 400 400",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
(o(!0), e(k, null, v(I.value, (r, i) => (o(), e("line", {
x1: r.x1,
x2: r.x2,
y1: r.y1,
y2: r.y2,
stroke: i < 66 ? r.color : s(h)(r.color, 50),
"stroke-width": 5,
"stroke-linecap": "round"
}, null, 8, fe))), 256)),
t("circle", {
cx: 200,
cy: 200,
r: 130,
"stroke-width": 3,
stroke: s(h)(l.value.style.wheel.color, 50),
fill: "none"
}, null, 8, we),
t("rect", {
fill: s(h)(l.value.style.wheel.color, 50),
rx: 12,
x: 160,
y: 170,
height: 60,
width: 80,
stroke: "none"
}, null, 8, me)
], 12, ge)) : a("", !0),
u.value === "sparkline" ? (o(), e("svg", {
key: 20,
xmlns: s(c),
width: "100%",
viewBox: "0 0 150 32",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
t("g", null, [
t("rect", {
x: "2",
y: "2",
height: "6",
width: "24",
fill: l.value.style.sparkline.color,
rx: "3"
}, null, 8, Me),
t("rect", {
x: "2",
y: "12",
height: "16",
width: "16",
fill: l.value.style.sparkline.color,
rx: "3"
}, null, 8, Ce)
]),
(o(!0), e(k, null, v(M.value, (r, i) => (o(), e("g", null, [
i < M.value.length - 1 ? (o(), e("line", {
key: 0,
x1: r.x,
y1: r.y,
x2: M.value[i + 1].x,
y2: M.value[i + 1].y,
"stroke-width": l.value.style.sparkline.strokeWidth,
stroke: l.value.style.sparkline.color,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Le)) : a("", !0)
]))), 256))
], 12, be)) : a("", !0),
u.value === "candlesticks" ? (o(), e("svg", {
key: 21,
xmlns: s(c),
width: "100%",
viewBox: "0 0 512 316",
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
l.value.style.candlesticks.axis.show ? (o(), e("g", Ae, [
t("line", {
x1: 2,
x2: 2,
y1: 2,
y2: 314,
stroke: l.value.style.candlesticks.axis.color,
"stroke-width": l.value.style.candlesticks.axis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Pe),
t("line", {
x1: 2,
x2: 510,
y1: 314,
y2: 314,
stroke: l.value.style.candlesticks.axis.color,
"stroke-width": l.value.style.candlesticks.axis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Be)
])) : a("", !0),
(o(!0), e(k, null, v(x.value, (r, i) => (o(), e("g", null, [
t("line", {
x1: 24 + 464 * i / (x.value.length - 1) - 464 / (x.value.length - 1) / 8,
x2: 24 + 464 * i / (x.value.length - 1) + 464 / (x.value.length - 1) / 8,
y1: r.y,
y2: r.y,
stroke: l.value.style.candlesticks.candle.color,
"stroke-width": l.value.style.candlesticks.candle.strokeWidth,
"stroke-linecap": "round"
}, null, 8, We),
t("line", {
x1: 24 + 464 * i / (x.value.length - 1) - 464 / (x.value.length - 1) / 8,
x2: 24 + 464 * i / (x.value.length - 1) + 464 / (x.value.length - 1) / 8,
y1: r.y + r.height,
y2: r.y + r.height,
stroke: l.value.style.candlesticks.candle.color,
"stroke-width": l.value.style.candlesticks.candle.strokeWidth,
"stroke-linecap": "round"
}, null, 8, ze),
t("line", {
x1: 24 + 464 * i / (x.value.length - 1),
x2: 24 + 464 * i / (x.value.length - 1),
y1: r.y,
y2: r.y + r.height,
stroke: l.value.style.candlesticks.candle.color,
"stroke-width": l.value.style.candlesticks.candle.strokeWidth,
"stroke-linecap": "round"
}, null, 8, je),
t("rect", {
x: 24 + 464 * i / (x.value.length - 1) - 464 / (x.value.length - 1) / 8,
y: r.y + (r.height - r.bar * 1.5),
height: r.bar,
width: 464 / (x.value.length - 1) / 4,
fill: l.value.style.candlesticks.candle.color,
rx: "1"
}, null, 8, qe)
]))), 256))
], 12, $e)) : a("", !0),
u.value === "heatmap" ? (o(), e("svg", {
key: 22,
xmlns: s(c),
width: "100%",
viewBox: `0 0 ${10 * l.value.style.heatmap.cellsX} ${10 * l.value.style.heatmap.cellsY}`,
style: n(`background:${l.value.style.backgroundColor}`)
}, [
d(y),
(o(!0), e(k, null, v(l.value.style.heatmap.cellsY, (r, i) => (o(), e("g", null, [
(o(!0), e(k, null, v(l.value