vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,761 lines • 78.9 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { Bt as t, M as n, q as r, t as i, z as ee } from "./lib-Bttd6u5E.js";
import { n as te, t as ne } from "./useHints-Dq_w2E8B.js";
import { t as re } from "./useConfig-D3scuR88.js";
import { t as ie } from "./useNestedProp-vPNvh7rV.js";
import { t as a } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { t as ae } from "./DefGrad-DVBqDjhO.js";
import { n as o } from "./PackageVersion-D6d8SCp9.js";
import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createStaticVNode as f, createVNode as p, normalizeClass as oe, normalizeStyle as m, openBlock as h, ref as g, renderList as _, unref as v } from "vue";
//#region src/components/vue-ui-skeleton.vue
var y = /* @__PURE__ */ e({ default: () => K }), se = ["id"], ce = ["xmlns"], le = { transform: "translate(300, 300)" }, b = [
"d",
"fill",
"stroke"
], x = ["xmlns"], S = ["fill", "stroke"], C = ["fill", "stroke"], w = ["fill", "stroke"], T = ["fill", "stroke"], E = ["fill", "stroke"], D = ["xmlns"], O = ["stroke"], k = ["stroke"], A = ["stroke"], j = ["fill", "stroke"], M = ["fill"], N = ["fill", "stroke"], P = ["fill"], F = ["fill", "stroke"], I = ["fill"], L = ["fill", "stroke"], R = ["fill"], z = ["fill", "stroke"], B = ["fill"], V = ["fill", "stroke"], H = ["fill"], U = ["xmlns"], W = ["stroke"], ue = ["stroke"], de = ["stroke"], fe = ["stroke"], pe = ["stroke"], me = ["stroke"], he = ["stroke"], ge = ["stroke"], _e = ["stroke"], ve = ["xmlns"], ye = ["stroke", "fill"], be = ["xmlns"], xe = ["stroke", "fill"], Se = ["xmlns"], Ce = ["fill"], we = ["fill"], Te = ["fill"], Ee = ["fill"], De = ["xmlns"], Oe = ["stroke"], ke = ["fill"], Ae = ["stroke", "fill"], je = ["stroke", "fill"], Me = ["fill"], Ne = ["stroke", "fill"], Pe = ["stroke", "fill"], Fe = ["fill"], Ie = ["stroke", "fill"], Le = ["stroke", "fill"], Re = ["fill"], ze = ["stroke", "fill"], Be = ["stroke", "fill"], Ve = ["fill"], He = ["stroke", "fill"], Ue = ["stroke", "fill"], We = ["xmlns"], Ge = ["stroke"], Ke = ["stroke"], qe = ["stroke", "fill"], Je = ["stroke", "fill"], Ye = ["stroke", "fill"], Xe = ["stroke", "fill"], Ze = ["stroke", "fill"], Qe = ["stroke", "fill"], $e = ["stroke", "fill"], et = ["stroke", "fill"], tt = ["stroke", "fill"], nt = ["stroke", "fill"], rt = ["stroke", "fill"], it = ["stroke", "fill"], at = ["stroke", "fill"], ot = ["stroke", "fill"], st = ["stroke", "fill"], ct = ["stroke", "fill"], lt = ["stroke", "fill"], ut = ["stroke", "fill"], dt = ["stroke", "fill"], ft = ["stroke", "fill"], pt = ["stroke", "fill"], mt = ["stroke", "fill"], ht = ["stroke", "fill"], gt = ["xmlns"], _t = ["stroke"], vt = ["xmlns"], yt = ["stroke"], bt = ["xmlns"], xt = ["stroke"], St = ["xmlns"], Ct = ["fill"], wt = ["fill"], Tt = ["fill"], Et = ["fill"], Dt = ["fill"], Ot = ["fill"], kt = ["fill"], At = ["fill"], jt = ["fill"], Mt = ["fill"], Nt = ["fill"], Pt = ["fill"], Ft = ["xmlns"], It = ["stroke"], Lt = ["stroke"], Rt = ["stroke"], zt = ["stroke"], Bt = ["stroke"], Vt = ["stroke"], Ht = ["xmlns"], Ut = ["stroke"], Wt = ["stroke"], Gt = ["stroke"], Kt = ["stroke"], qt = ["stroke"], Jt = ["stroke"], Yt = ["stroke"], Xt = ["stroke"], Zt = ["stroke"], Qt = ["xmlns"], $t = ["stroke"], en = ["xmlns"], tn = ["stroke"], nn = ["stroke"], rn = ["stroke"], an = ["stroke"], on = ["stroke"], sn = ["stroke"], cn = ["stroke"], ln = ["stroke"], un = ["stroke"], dn = ["xmlns"], fn = [
"x1",
"x2",
"stroke"
], pn = ["xmlns"], mn = [
"x",
"y",
"width",
"height",
"fill"
], hn = [
"y",
"width",
"height",
"fill"
], gn = ["xmlns"], _n = ["fill"], vn = ["fill"], yn = ["fill"], bn = ["xmlns"], xn = [
"x1",
"x2",
"y1",
"y2",
"stroke"
], Sn = ["stroke"], Cn = ["fill"], wn = ["xmlns"], Tn = ["fill"], En = ["fill"], Dn = [
"x1",
"y1",
"x2",
"y2",
"stroke-width",
"stroke"
], On = ["xmlns"], kn = { key: 0 }, An = ["stroke", "stroke-width"], jn = ["stroke", "stroke-width"], Mn = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], Nn = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], Pn = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], Fn = [
"x",
"y",
"height",
"width",
"fill"
], In = ["xmlns", "viewBox"], Ln = [
"x",
"y",
"stroke",
"fill"
], Rn = ["xmlns"], zn = ["d", "stroke"], Bn = [
"cx",
"cy",
"r",
"fill",
"stroke"
], Vn = [
"cx",
"cy",
"r",
"fill",
"stroke"
], Hn = [
"x",
"y",
"width",
"fill"
], Un = [
"cx",
"cy",
"fill"
], Wn = [
"cx",
"cy",
"fill"
], Gn = ["stroke"], Kn = ["xmlns"], qn = ["stroke", "stroke-width"], Jn = ["stroke", "stroke-width"], Yn = ["stroke", "stroke-width"], Xn = ["fill"], Zn = ["fill"], Qn = ["fill"], $n = ["fill"], er = ["fill"], tr = ["fill"], nr = ["xmlns"], rr = { key: 0 }, ir = ["stroke", "stroke-width"], ar = ["stroke", "stroke-width"], or = ["stroke", "stroke-width"], sr = { key: 1 }, cr = ["r", "fill"], lr = ["r", "fill"], ur = ["xmlns"], dr = { key: 0 }, fr = ["stroke", "stroke-width"], pr = ["stroke", "stroke-width"], mr = [
"fill",
"rx",
"x",
"y",
"width",
"height"
], hr = ["xmlns"], gr = ["stroke-width", "stroke"], _r = ["stroke-width", "stroke"], vr = ["stroke-width", "stroke"], yr = ["xmlns"], br = ["stroke"], xr = ["stroke"], Sr = ["stroke"], Cr = ["stroke"], wr = ["fill"], Tr = ["stroke"], Er = ["xmlns"], Dr = ["stroke", "stroke-width"], Or = ["stroke", "stroke-width"], kr = ["fill", "r"], Ar = ["fill", "r"], jr = ["fill", "r"], Mr = ["fill", "r"], Nr = ["fill", "r"], Pr = ["fill", "r"], Fr = ["fill", "r"], Ir = ["fill", "r"], Lr = ["fill", "r"], Rr = ["xmlns"], zr = [
"d",
"stroke",
"stroke-width"
], Br = [
"d",
"stroke",
"stroke-width"
], Vr = [
"d",
"stroke",
"stroke-width"
], Hr = [
"d",
"stroke",
"stroke-width"
], Ur = ["stroke", "stroke-width"], Wr = ["stroke", "stroke-width"], Gr = ["stroke", "stroke-width"], Kr = ["fill"], qr = ["fill"], Jr = ["xmlns"], Yr = [
"x",
"y",
"fill"
], Xr = [
"x",
"y",
"fill"
], Zr = [
"x",
"y",
"fill"
], Qr = ["xmlns"], $r = ["fill"], ei = ["fill"], ti = [
"y1",
"y2",
"stroke",
"stroke-width"
], ni = [
"x1",
"x2",
"stroke",
"stroke-width"
], ri = ["xmlns", "stroke"], ii = ["fill"], ai = ["xmlns", "stroke"], oi = ["xmlns", "stroke"], si = ["fill"], ci = ["xmlns", "stroke"], li = ["xmlns", "stroke"], ui = ["fill"], di = ["xmlns", "stroke"], fi = ["xmlns", "stroke"], pi = ["fill"], mi = ["xmlns", "stroke"], G = ["xmlns", "stroke"], hi = ["fill"], gi = ["xmlns", "stroke"], _i = ["xmlns"], vi = [
"points",
"fill",
"stroke",
"stroke-width"
], yi = ["xmlns"], bi = { key: 0 }, xi = ["stroke", "stroke-width"], Si = [
"y",
"width",
"fill",
"rx"
], K = /*#__PURE__*/ a({
__name: "vue-ui-skeleton",
props: { config: {
type: Object,
default() {
return {};
}
} },
setup(e) {
let { vue_ui_skeleton: a } = re(), y = e, K = g(`vue-ui-skeleton-${r()}`), q = c(() => ie({
userConfig: y.config,
defaultConfig: a
}));
te({
config: () => q.value,
dataset: () => [],
component: "VueUiSkeleton",
rules: [ne.noHint]
});
let Ci = c(() => q.value.style.animated), J = c(() => q.value.type), wi = g([
60,
50,
55,
36,
40,
25,
26,
12
]), Ti = c(() => n({
plot: {
x: 50,
y: 50
},
radius: 40,
sides: 6
}).path), Ei = c(() => n({
plot: {
x: 50,
y: 50
},
radius: 30,
sides: 6
}).path), Di = c(() => n({
plot: {
x: 50,
y: 50
},
radius: 20,
sides: 6
}).path), Oi = c(() => n({
plot: {
x: 50,
y: 50
},
radius: 10,
sides: 6
}).path), Y = g([
{
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 = g([
{
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
}
]), Z = g([
[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]
]), Q = g([
{
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 $(e, t = 1) {
let n = 29.85;
return {
x: 200 + 160 * Math.cos(n + e * Math.PI / 180) * t,
y: 200 + 160 * Math.sin(n + e * Math.PI / 180) * t
};
}
let ki = c(() => {
let e = [];
for (let t = 0; t < 100; t += 1) e.push({
x1: $(360 / 100 * t).x,
y1: $(360 / 100 * t).y,
x2: $(360 / 100 * t, .9).x,
y2: $(360 / 100 * t, .9).y,
color: q.value.style.wheel.color
});
return e;
}), Ai = g([
"M1.74,203.99 A204,204 0 0 1 -131.29,-156.13 L-115.85,-137.77 A180,180 0 0 0 1.53,179.99 Z",
"M-123.33,-162.5 A204,204 0 0 1 -10.2,-203.75 L-9,-179.78 A180,180 0 0 0 -108.82,-143.38 Z",
"M0,-204 A204,204 0 0 1 198.55,46.84 L175.19,41.33 A180,180 0 0 0 0,-180 Z",
"M195.96,56.7 A204,204 0 0 1 11.93,203.65 L10.53,179.69 A180,180 0 0 0 172.91,50.03 Z",
"M-166.87,-67.49A180,180 0 0 1 -115.85,-137.77Q0,0 119.83,-134.32A180,180 0 0 1 171.96,-53.19Q0,0 -166.87,-67.49Z",
"M-29.99,-177.48A180,180 0 0 1 -19.26,-178.97Q0,0 112.89,140.2A180,180 0 0 1 53.63,171.83Q0,0 -29.99,-177.48Z",
"M179.71,10.29A180,180 0 0 1 175.19,41.33Q0,0 -40.87,-175.3A180,180 0 0 1 -29.99,-177.48Q0,0 179.71,10.29Z",
"M-19.26,-178.97A180,180 0 0 1 -9,-179.78Q0,0 -179.01,18.87A180,180 0 0 1 -166.87,-67.49Q0,0 -19.26,-178.97Z",
"M-108.82,-143.38A180,180 0 0 1 -40.87,-175.3Q0,0 -108.82,-143.38A180,180 0 0 1 -40.87,-175.3Q0,0 -108.82,-143.38Z",
"M0,-180A180,180 0 0 1 119.83,-134.32Q0,0 0,-180A180,180 0 0 1 119.83,-134.32Q0,0 0,-180Z",
"M-148.85,101.22A180,180 0 0 1 -179.01,18.87Q0,0 -148.85,101.22A180,180 0 0 1 -179.01,18.87Q0,0 -148.85,101.22Z",
"M1.53,179.99A180,180 0 0 1 -148.85,101.22Q0,0 53.63,171.83A180,180 0 0 1 31.73,177.18Q0,0 1.53,179.99Z",
"M31.73,177.18A180,180 0 0 1 10.53,179.69Q0,0 171.96,-53.19A180,180 0 0 1 179.71,10.29Q0,0 31.73,177.18Z",
"M172.91,50.03A180,180 0 0 1 112.89,140.2Q0,0 172.91,50.03A180,180 0 0 1 112.89,140.2Q0,0 172.91,50.03Z"
]);
return (e, n) => (h(), u("div", {
id: K.value,
class: oe({
"vue-data-ui-component": !0,
"vue-ui-skeleton": !0,
"vue-ui-skeleton-animated": Ci.value
}),
style: m(`background:${q.value.style.backgroundColor};color:${q.value.style.color};display:flex;align-items:center;justify-content:center;`)
}, [
J.value === "chord" ? (h(), u("svg", {
key: 0,
xmlns: v(i),
width: "100%",
viewBox: "0 0 600 600",
style: m({ background: q.value.style.backgroundColor })
}, [p(o), d("g", le, [(h(!0), u(s, null, _(Ai.value, (e, t) => (h(), u("path", {
key: e,
d: e,
fill: q.value.style.chord.color,
stroke: q.value.style.backgroundColor,
"stroke-width": "2",
style: m({ opacity: t > 3 ? .6 : 1 })
}, null, 12, b))), 128))])], 12, ce)) : l("", !0),
J.value === "ridgeline" ? (h(), u("svg", {
key: 1,
xmlns: v(i),
width: "100%",
viewBox: "20 0 512 200",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("defs", null, [p(ae, {
t: "linear",
id: `ridgeline-gradient-${K.value}`,
x1: "50%",
y1: "0%",
x2: "50%",
y2: "100%",
stops: [
[
"0%",
q.value.style.ridgeline.color,
1
],
[
"30%",
q.value.style.ridgeline.color,
.7
],
[
"70%",
q.value.style.ridgeline.color,
.3
],
[
"100%",
q.value.style.ridgeline.color,
.1
]
]
}, null, 8, ["id", "stops"])]),
d("path", {
fill: `url(#ridgeline-gradient-${K.value})`,
stroke: q.value.style.ridgeline.color,
"stroke-width": "1",
d: "M66.7 60 66.7 60C72.88 59.4 79.06 58.89 85.25 58.21 91.43 57.53 97.62 55.83 103.8 55.81 109.99 55.8 116.17 55.81 122.36 55.8 128.54 55.78 134.73 50.5 140.91 50.5 147.1 50.5 153.28 55.45 159.47 55.45 165.65 55.45 171.84 52.67 178.02 52.67 184.21 52.67 190.39 53.69 196.58 54.59 202.76 55.49 208.95 59.17 215.13 59.17 221.31 59.17 227.5 52.46 233.68 52.46 239.87 52.46 246.05 53.35 252.24 53.35 258.42 53.35 264.61 48.87 270.79 48.87 276.98 48.87 283.16 53.66 289.35 53.66 295.53 53.66 301.72 27.59 307.9 27.59 314.09 27.59 320.27 36.9 326.46 41.44 332.64 45.98 338.83 54.83 345.01 54.83 351.2 54.83 357.38 18.69 363.57 18.69 369.75 18.69 375.93 57.14 382.12 57.14 388.3 57.14 394.49 45.68 400.67 40.2 406.86 34.72 413.04 24.23 419.23 24.23 425.41 24.23 431.6 40.63 437.78 40.63 443.97 40.63 450.15 40.51 456.34 40.28 462.52 40.06 468.71 2.2 474.89 2.2 481.08 2.2 487.26 26.27 493.45 38.3L493.45 60",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, S),
d("path", {
fill: `url(#ridgeline-gradient-${K.value})`,
stroke: q.value.style.ridgeline.color,
"stroke-width": "1",
d: "M66.7 90 66.7 90C72.88 89.78 79.06 89.65 85.25 89.33 91.43 89.01 97.62 87.68 103.8 87.68 109.99 87.68 116.17 89.34 122.36 89.34 128.54 89.34 134.73 80.58 140.91 80.58 147.1 80.58 153.28 84.73 159.47 84.73 165.65 84.73 171.84 76.29 178.02 76.29 184.21 76.29 190.39 87.16 196.58 87.16 202.76 87.16 208.95 77.95 215.13 75 221.31 72.04 227.5 68.03 233.68 68.03 239.87 68.03 246.05 77.62 252.24 80.8 258.42 83.98 264.61 88.4 270.79 88.4 276.98 88.4 283.16 63.96 289.35 63.96 295.53 63.96 301.72 80.93 307.9 80.93 314.09 80.93 320.27 60.31 326.46 60.31 332.64 60.31 338.83 80.68 345.01 80.68 351.2 80.68 357.38 67.55 363.57 67.55 369.75 67.55 375.93 81.06 382.12 81.06 388.3 81.06 394.49 54.65 400.67 54.65 406.86 54.65 413.04 55.14 419.23 55.91 425.41 56.69 431.6 69.73 437.78 69.73 443.97 69.73 450.15 64.43 456.34 61.43 462.52 58.43 468.71 51.62 474.89 51.62 481.08 51.62 487.26 71.44 493.45 81.34L493.45 90",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, C),
d("path", {
fill: `url(#ridgeline-gradient-${K.value})`,
stroke: q.value.style.ridgeline.color,
"stroke-width": "1",
d: "M66.7 120 66.7 120C72.88 119.66 79.06 119.45 85.25 118.99 91.43 118.53 97.62 117.82 103.8 116.84 109.99 115.85 116.17 113.14 122.36 112.15 128.54 111.17 134.73 110 140.91 110 147.1 110 153.28 110.52 159.47 111.2 165.65 111.88 171.84 117.87 178.02 117.87 184.21 117.87 190.39 105.72 196.58 105.72 202.76 105.72 208.95 110.32 215.13 110.32 221.31 110.32 227.5 99.7 233.68 98.99 239.87 98.28 246.05 97.81 252.24 97.81 258.42 97.81 264.61 115.56 270.79 116.03 276.98 116.51 283.16 116.77 289.35 116.77 295.53 116.77 301.72 99.68 307.9 99.68 314.09 99.68 320.27 112.36 326.46 112.36 332.64 112.36 338.83 112.03 345.01 111.69 351.2 111.35 357.38 110.9 363.57 109.63 369.75 108.37 375.93 84.18 382.12 84.18 388.3 84.18 394.49 94.53 400.67 94.53 406.86 94.53 413.04 73.46 419.23 73.46 425.41 73.46 431.6 106.73 437.78 106.73 443.97 106.73 450.15 79.76 456.34 79.76 462.52 79.76 468.71 106.73 474.89 107.12 481.08 107.52 487.26 107.53 493.45 107.73L493.45 120",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, w),
d("path", {
fill: `url(#ridgeline-gradient-${K.value})`,
stroke: q.value.style.ridgeline.color,
"stroke-width": "1",
d: "M66.7 150 66.7 150C72.88 149.48 79.06 148.43 85.25 148.43 91.43 148.43 97.62 149.79 103.8 149.79 109.99 149.79 116.17 148.04 122.36 146.61 128.54 145.18 134.73 139.99 140.91 139.99 147.1 139.99 153.28 149.97 159.47 149.97 165.65 149.97 171.84 145.03 178.02 144.33 184.21 143.62 190.39 143.81 196.58 143.02 202.76 142.24 208.95 130.59 215.13 130.59 221.31 130.59 227.5 149.11 233.68 149.11 239.87 149.11 246.05 146.62 252.24 146.62 258.42 146.62 264.61 149.64 270.79 149.64 276.98 149.64 283.16 120.25 289.35 120.25 295.53 120.25 301.72 125.81 307.9 128.61 314.09 131.42 320.27 133.75 326.46 137.08 332.64 140.42 338.83 149.33 345.01 149.33 351.2 149.33 357.38 145.03 363.57 140.55 369.75 136.07 375.93 111.78 382.12 111.78 388.3 111.78 394.49 113.07 400.67 114.8 406.86 116.52 413.04 133.16 419.23 133.16 425.41 133.16 431.6 125.48 437.78 120.24 443.97 115 450.15 101.73 456.34 100.14 462.52 98.56 468.71 97.44 474.89 97.44 481.08 97.44 487.26 132.13 493.45 149.48L493.45 150",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, T),
d("path", {
fill: `url(#ridgeline-gradient-${K.value})`,
stroke: q.value.style.ridgeline.color,
"stroke-width": "1",
d: "M66.7 180 66.7 180C72.88 179.4 79.06 178.93 85.25 178.19 91.43 177.45 97.62 175.33 103.8 175.33 109.99 175.33 116.17 177.47 122.36 177.47 128.54 177.47 134.73 170.39 140.91 170.39 147.1 170.39 153.28 171.47 159.47 172.42 165.65 173.37 171.84 177.17 178.02 177.17 184.21 177.17 190.39 174.72 196.58 172.55 202.76 170.38 208.95 161.56 215.13 161.56 221.31 161.56 227.5 171.14 233.68 171.14 239.87 171.14 246.05 170.89 252.24 170.45 258.42 170.02 264.61 156.85 270.79 156.85 276.98 156.85 283.16 174.08 289.35 174.08 295.53 174.08 301.72 171.58 307.9 168.89 314.09 166.21 320.27 153.44 326.46 150.89 332.64 148.34 338.83 146.03 345.01 146.03 351.2 146.03 357.38 164.64 363.57 164.64 369.75 164.64 375.93 140.42 382.12 137.98 388.3 135.53 394.49 133.73 400.67 133.73 406.86 133.73 413.04 141.65 419.23 141.65 425.41 141.65 431.6 139.7 437.78 139.7 443.97 139.7 450.15 169.39 456.34 169.39 462.52 169.39 468.71 166.84 474.89 163.25 481.08 159.67 487.26 134.42 493.45 120L493.45 180",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, E)
], 12, x)) : l("", !0),
J.value === "historyPlot" ? (h(), u("svg", {
key: 2,
xmlns: v(i),
width: "100%",
viewBox: "0 0 612 512",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("line", {
x1: "12",
x2: "12",
y1: "12",
y2: "500",
stroke: q.value.style.historyPlot.color,
"stroke-width": "3",
"stroke-linecap": "round"
}, null, 8, O),
d("line", {
x1: "12",
x2: "600",
y1: "500",
y2: "500",
stroke: q.value.style.historyPlot.color,
"stroke-width": "3",
"stroke-linecap": "round"
}, null, 8, k),
d("path", {
d: "M 80,100 300,200 400,150 560,230 360,420 230,320",
fill: "none",
stroke: q.value.style.historyPlot.color,
"stroke-width": "3"
}, null, 8, A),
d("circle", {
cx: "80",
cy: "100",
r: "24",
fill: q.value.style.historyPlot.color,
stroke: q.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, j),
d("text", {
x: "80",
y: "108",
fill: q.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, " 1 ", 8, M),
d("circle", {
cx: "300",
cy: "200",
r: "24",
fill: q.value.style.historyPlot.color,
stroke: q.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, N),
d("text", {
x: "300",
y: "208",
fill: q.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, " 2 ", 8, P),
d("circle", {
cx: "400",
cy: "150",
r: "24",
fill: q.value.style.historyPlot.color,
stroke: q.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, F),
d("text", {
x: "400",
y: "158",
fill: q.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, " 3 ", 8, I),
d("circle", {
cx: "560",
cy: "230",
r: "24",
fill: q.value.style.historyPlot.color,
stroke: q.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, L),
d("text", {
x: "560",
y: "238",
fill: q.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, " 4 ", 8, R),
d("circle", {
cx: "360",
cy: "420",
r: "24",
fill: q.value.style.historyPlot.color,
stroke: q.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, z),
d("text", {
x: "360",
y: "428",
fill: q.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, " 5 ", 8, B),
d("circle", {
cx: "230",
cy: "320",
r: "24",
fill: q.value.style.historyPlot.color,
stroke: q.value.style.backgroundColor,
"stroke-width": "3"
}, null, 8, V),
d("text", {
x: "230",
y: "328",
fill: q.value.style.backgroundColor,
"font-size": "24",
"text-anchor": "middle"
}, " 6 ", 8, H)
], 12, D)) : l("", !0),
J.value === "circlePack" ? (h(), u("svg", {
key: 3,
xmlns: v(i),
width: "100%",
viewBox: "0 0 100 100",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
d("circle", {
cx: 50,
cy: 50,
r: 20,
stroke: q.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, W),
d("circle", {
cx: 80,
cy: 50,
r: 10,
stroke: q.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, ue),
d("circle", {
cx: 28,
cy: 30,
r: 10,
stroke: q.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, de),
d("circle", {
cx: 25,
cy: 76,
r: 16,
stroke: q.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, fe),
d("circle", {
cx: 60,
cy: 78.5,
r: 10,
stroke: q.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, pe),
d("circle", {
cx: 64,
cy: 20,
r: 13,
stroke: q.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, me),
d("circle", {
cx: 72,
cy: 37,
r: 5,
stroke: q.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, he),
d("circle", {
cx: 25,
cy: 45,
r: 5,
stroke: q.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, ge),
d("circle", {
cx: 70,
cy: 66,
r: 5,
stroke: q.value.style.circlePack.color,
"stroke-width": 1,
fill: "none"
}, null, 8, _e)
], 12, U)) : l("", !0),
J.value === "flow" ? (h(), u("svg", {
key: 4,
xmlns: v(i),
width: "100%",
viewBox: "0 0 80 60",
style: m(`background:${q.value.style.backgroundColor}`)
}, [p(o), d("path", {
d: "M5 5 5 55M75 5 75 55M28 5 28 55M52 5 52 55M5 8 28 12 52 9 75 8 75 12 52 12 28 21 5 29ZM5 34 28 35 52 24 75 21 75 27 52 30 28 44 52 39 75 41 75 47 52 45 28 52 5 52Z",
stroke: q.value.style.flow.color,
"stroke-width": .8,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: q.value.style.flow.color
}, null, 8, ye)], 12, ve)) : l("", !0),
J.value === "parallelCoordinatePlot" ? (h(), u("svg", {
key: 5,
xmlns: v(i),
width: "100%",
viewBox: "0 0 80 60",
style: m(`background:${q.value.style.backgroundColor}`)
}, [p(o), d("path", {
d: "M5 5 5 55M75 5 75 55M28 5 28 55M52 5 52 55M5 10A1 1 0 005 12 1 1 0 005 10M28 15A1 1 0 0028 17 1 1 0 0028 15M52 8A1 1 0 0052 10 1 1 0 0052 8M75 11A1 1 0 0075 13 1 1 0 0075 11M6 11 27 16M29 16 51 9M53 9 74 12M5 50A1 1 0 005 48 1 1 0 005 50M28 39A1 1 0 0028 41 1 1 0 0028 39M52 45A1 1 0 0052 47 1 1 0 0052 45M75 45A1 1 0 0075 47 1 1 0 0075 45M6 49 27 40M29 40 51 46M53 46 74 46M5 25A1 1 0 005 27 1 1 0 005 25M28 31A1 1 0 0028 33 1 1 0 0028 31M52 23A1 1 0 0052 25 1 1 0 0052 23M75 21A1 1 0 0075 23 1 1 0 0075 21M6 26 27 32M29 32 51 24M53 24 74 22",
stroke: q.value.style.parallelCoordinatePlot.color,
"stroke-width": .8,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: q.value.style.parallelCoordinatePlot.color
}, null, 8, xe)], 12, be)) : l("", !0),
J.value === "bullet" ? (h(), u("svg", {
key: 6,
xmlns: v(i),
width: "100%",
viewBox: "0 0 600 96",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
d("rect", {
fill: q.value.style.bullet.color,
x: 24,
y: 12,
width: 300,
height: 72,
style: { opacity: "0.8" }
}, null, 8, Ce),
d("rect", {
fill: q.value.style.bullet.color,
x: 324,
y: 12,
width: 150,
height: 72,
style: { opacity: "0.6" }
}, null, 8, we),
d("rect", {
fill: q.value.style.bullet.color,
x: 474,
y: 12,
width: 102,
height: 72,
style: { opacity: "0.3" }
}, null, 8, Te),
d("rect", {
fill: q.value.style.bullet.color,
x: 24,
y: 36,
width: 490,
height: 24,
style: { opacity: "1" }
}, null, 8, Ee)
], 12, Se)) : l("", !0),
J.value === "dumbbell" ? (h(), u("svg", {
key: 7,
xmlns: v(i),
width: "100%",
viewBox: "0 0 100 55",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("line", {
x1: "3",
x2: "3",
y1: "3",
y2: "67",
stroke: q.value.style.dumbbell.color,
"stroke-width": .5,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Oe),
d("path", {
d: "\n M 30,11\n C 39,10 39,10\n 45,11\n L 45,9\n C 39,10 39,10\n 30,9 Z\n ",
fill: q.value.style.dumbbell.color
}, null, 8, ke),
d("circle", {
cx: "30",
cy: "10",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, Ae),
d("circle", {
cx: "46",
cy: "10",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, je),
d("path", {
d: "\n M 10,21\n C 23,20 23,20\n 36,21\n L 36,19\n C 23,20 23,20\n 10,19 Z\n ",
fill: q.value.style.dumbbell.color
}, null, 8, Me),
d("circle", {
cx: "10",
cy: "20",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, Ne),
d("circle", {
cx: "36",
cy: "20",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, Pe),
d("path", {
d: "\n M 30,31\n C 45,30 45,30\n 60,31\n L 60,29\n C 45,30 45,30\n 30,29 Z\n ",
fill: q.value.style.dumbbell.color
}, null, 8, Fe),
d("circle", {
cx: "30",
cy: "30",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, Ie),
d("circle", {
cx: "60",
cy: "30",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, Le),
d("path", {
d: "\n M 50,41\n C 65,40 65,40\n 80,41\n L 80,39\n C 65,40 65,40\n 50,39 Z\n ",
fill: q.value.style.dumbbell.color
}, null, 8, Re),
d("circle", {
cx: "50",
cy: "40",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, ze),
d("circle", {
cx: "80",
cy: "40",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, Be),
d("path", {
d: "\n M 40,51\n C 65,50 65,50\n 90,51\n L 90,49\n C 65,50 65,50\n 40,49 Z\n ",
fill: q.value.style.dumbbell.color
}, null, 8, Ve),
d("circle", {
cx: "40",
cy: "50",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, He),
d("circle", {
cx: "90",
cy: "50",
r: "2",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.dumbbell.color
}, null, 8, Ue)
], 12, De)) : l("", !0),
J.value === "stripPlot" ? (h(), u("svg", {
key: 8,
xmlns: v(i),
width: "100%",
viewBox: "0 0 100 100",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("line", {
x1: "3",
x2: "3",
y1: "3",
y2: "97",
stroke: q.value.style.stripPlot.color,
"stroke-width": .5,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Ge),
d("line", {
x1: "3",
x2: "97",
y1: "97",
y2: "97",
stroke: q.value.style.stripPlot.color,
"stroke-width": .5,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Ke),
d("circle", {
cx: "12",
cy: "8",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, qe),
d("circle", {
cx: "12",
cy: "40",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Je),
d("circle", {
cx: "12",
cy: "60",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Ye),
d("circle", {
cx: "12",
cy: "70",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Xe),
d("circle", {
cx: "32",
cy: "25",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Ze),
d("circle", {
cx: "32",
cy: "38",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, Qe),
d("circle", {
cx: "32",
cy: "44",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, $e),
d("circle", {
cx: "32",
cy: "55",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, et),
d("circle", {
cx: "52",
cy: "30",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, tt),
d("circle", {
cx: "52",
cy: "33",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, nt),
d("circle", {
cx: "52",
cy: "43",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, rt),
d("circle", {
cx: "52",
cy: "63",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, it),
d("circle", {
cx: "52",
cy: "78",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, at),
d("circle", {
cx: "72",
cy: "58",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, ot),
d("circle", {
cx: "72",
cy: "70",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, st),
d("circle", {
cx: "72",
cy: "78",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, ct),
d("circle", {
cx: "72",
cy: "88",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, lt),
d("circle", {
cx: "92",
cy: "66",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, ut),
d("circle", {
cx: "92",
cy: "77",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, dt),
d("circle", {
cx: "92",
cy: "85",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, ft),
d("circle", {
cx: "92",
cy: "88",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, pt),
d("circle", {
cx: "92",
cy: "90",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, mt),
d("circle", {
cx: "92",
cy: "92",
r: "4",
stroke: q.value.style.backgroundColor,
"stroke-width": .3,
fill: q.value.style.stripPlot.color,
style: { opacity: "0.5" }
}, null, 8, ht)
], 12, We)) : l("", !0),
J.value === "treemap" ? (h(), u("svg", {
key: 9,
xmlns: v(i),
width: "100%",
viewBox: "0 0 30 21",
style: m(`background:${q.value.style.backgroundColor}`)
}, [p(o), d("path", {
fill: "none",
stroke: q.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, _t)], 12, gt)) : l("", !0),
J.value === "galaxy" ? (h(), u("svg", {
key: 10,
xmlns: v(i),
width: "100%",
viewBox: "0.5 0 20 20",
style: m(`background:${q.value.style.backgroundColor}`)
}, [p(o), d("path", {
fill: "none",
stroke: q.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, yt)], 12, vt)) : l("", !0),
J.value === "bar3d" ? (h(), u("svg", {
key: 11,
xmlns: v(i),
width: "100%",
viewBox: "2 0 16 20",
style: m(`background:${q.value.style.backgroundColor}`)
}, [p(o), d("path", {
fill: "none",
stroke: q.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, xt)], 12, bt)) : l("", !0),
J.value === "sparkHistogram" ? (h(), u("svg", {
key: 12,
xmlns: v(i),
width: "100%",
viewBox: "0 0 100 20",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("rect", {
x: "3",
y: "8",
height: "4",
width: "6",
rx: "1.5",
fill: q.value.style.sparkHistogram.color
}, null, 8, Ct),
d("rect", {
x: "11",
y: "6",
height: "8",
width: "6",
rx: "2",
fill: q.value.style.sparkHistogram.color
}, null, 8, wt),
d("rect", {
x: "19",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: q.value.style.sparkHistogram.color
}, null, 8, Tt),
d("rect", {
x: "27",
y: "6",
height: "8",
width: "6",
rx: "2",
fill: q.value.style.sparkHistogram.color
}, null, 8, Et),
d("rect", {
x: "35",
y: "8",
height: "4",
width: "6",
rx: "1.5",
fill: q.value.style.sparkHistogram.color
}, null, 8, Dt),
d("rect", {
x: "43",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: q.value.style.sparkHistogram.color
}, null, 8, Ot),
d("rect", {
x: "51",
y: "8.5",
height: "3",
width: "6",
rx: "1.5",
fill: q.value.style.sparkHistogram.color
}, null, 8, kt),
d("rect", {
x: "59",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: q.value.style.sparkHistogram.color
}, null, 8, At),
d("rect", {
x: "67",
y: "6",
height: "8",
width: "6",
rx: "2",
fill: q.value.style.sparkHistogram.color
}, null, 8, jt),
d("rect", {
x: "75",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: q.value.style.sparkHistogram.color
}, null, 8, Mt),
d("rect", {
x: "83",
y: "7",
height: "6",
width: "6",
rx: "2",
fill: q.value.style.sparkHistogram.color
}, null, 8, Nt),
d("rect", {
x: "91",
y: "8",
height: "4",
width: "6",
rx: "1.5",
fill: q.value.style.sparkHistogram.color
}, null, 8, Pt)
], 12, St)) : l("", !0),
J.value === "sparkbar" ? (h(), u("svg", {
key: 13,
xmlns: v(i),
width: "100%",
viewBox: "0 0 500 200",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("line", {
x1: "12",
x2: "488",
y1: "50",
y2: "50",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkbar.color,
opacity: "0.5"
}, null, 8, It),
d("line", {
x1: "12",
x2: "400",
y1: "50",
y2: "50",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkbar.color,
opacity: "1"
}, null, 8, Lt),
d("line", {
x1: "12",
x2: "488",
y1: "100",
y2: "100",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkbar.color,
opacity: "0.5"
}, null, 8, Rt),
d("line", {
x1: "12",
x2: "350",
y1: "100",
y2: "100",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkbar.color,
opacity: "1"
}, null, 8, zt),
d("line", {
x1: "12",
x2: "488",
y1: "150",
y2: "150",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkbar.color,
opacity: "0.5"
}, null, 8, Bt),
d("line", {
x1: "12",
x2: "235",
y1: "150",
y2: "150",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkbar.color,
opacity: "1"
}, null, 8, Vt)
], 12, Ft)) : l("", !0),
J.value === "sparkStackbar" ? (h(), u("svg", {
key: 14,
xmlns: v(i),
width: "100%",
viewBox: "0 0 500 64",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("line", {
x1: "12",
x2: "488",
y1: "32",
y2: "32",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkStackbar.color,
opacity: "0.5"
}, null, 8, Ut),
d("line", {
x1: "12",
x2: "380",
y1: "32",
y2: "32",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkStackbar.color,
opacity: "0.6"
}, null, 8, Wt),
d("line", {
x1: "12",
x2: "200",
y1: "32",
y2: "32",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkStackbar.color,
opacity: "0.8"
}, null, 8, Gt),
d("line", {
x1: "12",
x2: "120",
y1: "32",
y2: "32",
"stroke-width": "16",
"stroke-linecap": "round",
stroke: q.value.style.sparkStackbar.color,
opacity: "1"
}, null, 8, Kt)
], 12, Ht)) : l("", !0),
J.value === "thermometer" ? (h(), u("svg", {
key: 15,
width: "100%",
viewBox: "0 0 20 20",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("path", {
fill: "none",
stroke: q.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, qt),
d("path", {
stroke: q.value.style.thermometer.color,
"stroke-width": "1",
style: { opacity: "0.6" },
d: "M 10 17 L 10 12 ",
"stroke-linecap": "round"
}, null, 8, Jt),
d("path", {
"stroke-linecap": "round",
stroke: q.value.style.thermometer.color,
"stroke-width": "1",
opacity: "M 10 17 L 10 9"
}, null, 8, Yt),
d("path", {
"stroke-linecap": "round",
stroke: q.value.style.thermometer.color,
"stroke-width": "1",
opacity: "0.3",
d: "M 10 17 L 10 6"
}, null, 8, Xt),
d("path", {
"stroke-linecap": "round",
stroke: q.value.style.thermometer.color,
"stroke-width": "1",
style: { opacity: "0.1" },
d: "M 10 17 L 10 3"
}, null, 8, Zt)
], 4)) : l("", !0),
J.value === "relationCircle" ? (h(), u("svg", {
key: 16,
xmlns: v(i),
width: "100%",
viewBox: "0 0 20 20",
style: m(`background:${q.value.style.backgroundColor}`)
}, [p(o), d("path", {
fill: "none",
stroke: q.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, $t)], 12, Qt)) : l("", !0),
J.value === "molecule" ? (h(), u("svg", {
key: 17,
xmlns: v(i),
width: "100%",
viewBox: "0 0 100 100",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("circle", {
cx: "50",
cy: "50",
r: "6",
"stroke-width": "2",
fill: "none",
stroke: q.value.style.molecule.color
}, null, 8, tn),
d("circle", {
cx: "20",
cy: "50",
r: "3",
"stroke-width": "1.6",
fill: "none",
stroke: q.value.style.molecule.color
}, null, 8, nn),
d("circle", {
cx: "80",
cy: "50",
r: "3",
"stroke-width": "1.6",
fill: "none",
stroke: q.value.style.molecule.color
}, null, 8, rn),
d("circle", {
cx: "50",
cy: "20",
r: "3",
"stroke-width": "1.6",
fill: "none",
stroke: q.value.style.molecule.color
}, null, 8, an),
d("circle", {
cx: "50",
cy: "80",
r: "3",
"stroke-width": "1.6",
fill: "none",
stroke: q.value.style.molecule.color
}, null, 8, on),
d("line", {
x1: "50",
x2: "50",
y1: "23",
y2: "45",
"stroke-width": "1",
stroke: q.value.style.molecule.color
}, null, 8, sn),
d("line", {
x1: "50",
x2: "50",
y1: "77",
y2: "55",
"stroke-width": "1",
stroke: q.value.style.molecule.color
}, null, 8, cn),
d("line", {
x1: "23",
x2: "45",
y1: "50",
y2: "50",
"stroke-width": "1",
stroke: q.value.style.molecule.color
}, null, 8, ln),
d("line", {
x1: "77",
x2: "55",
y1: "50",
y2: "50",
"stroke-width": "1",
stroke: q.value.style.molecule.color
}, null, 8, un)
], 12, en)) : l("", !0),
J.value === "tiremarks" ? (h(), u("svg", {
key: 18,
xmlns: v(i),
width: "100%",
viewBox: "0 0 312 56",
style: m(`background:${q.value.style.backgroundColor}`)
}, [p(o), (h(), u(s, null, _(100, (e) => d("g", null, [d("line", {
x1: 10 + e * 2.9,
y1: 6,
x2: 10 + e * 2.9,
y2: 50,
stroke: q.value.style.tiremarks.color,
style: m(e > 80 ? "opacity: 0.5" : ""),
"stroke-linecap": "round"
}, null, 12, fn)])), 64))], 12, dn)) : l("", !0),
J.value === "pyramid" ? (h(), u("svg", {
key: 19,
xmlns: v(i),
width: "100%",
viewBox: "0 0 105 80",
style: m(`background:${q.value.style.backgroundColor}`)
}, [p(o), (h(!0), u(s, null, _(Z.value, (e, t) => (h(), u("g", null, [d("rect", {
x: 50 - e[0],
y: t * (80 / Z.value.length),
width: e[0],
height: 80 / Z.value.length * .95,
fill: q.value.style.pyramid.color
}, null, 8, mn), d("rect", {
x: 55,
y: t * (80 / Z.value.length),
width: e[1],
height: 80 / Z.value.length * .95,
fill: q.value.style.pyramid.color
}, null, 8, hn)]))), 256))], 12, pn)) : l("", !0),
J.value === "rings" ? (h(), u("svg", {
key: 20,
xmlns: v(i),
width: "100%",
viewBox: "0 0 400 400",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("circle", {
cx: 200,
cy: 200,
r: 180,
fill: v(t)(q.value.style.rings.color, 40)
}, null, 8, _n),
d("circle", {
cx: 200,
cy: 250,
r: 130,
fill: v(t)(q.value.style.rings.color, 60)
}, null, 8, vn),
d("circle", {
cx: 200,
cy: 290,
r: 90,
fill: v(t)(q.value.style.rings.color, 100)
}, null, 8, yn)
], 12, gn)) : l("", !0),
J.value === "wheel" ? (h(), u("svg", {
key: 21,
xmlns: v(i),
width: "100%",
viewBox: "0 0 400 400",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
(h(!0), u(s, null, _(ki.value, (e, n) => (h(), u("line", {
x1: e.x1,
x2: e.x2,
y1: e.y1,
y2: e.y2,
stroke: n < 66 ? e.color : v(t)(e.color, 50),
"stroke-width": 5,
"stroke-linecap": "round"
}, null, 8, xn))), 256)),
d("circle", {
cx: 200,
cy: 200,
r: 130,
"stroke-width": 3,
stroke: v(t)(q.value.style.wheel.color, 50),
fill: "none"
}, null, 8, Sn),
d("rect", {
fill: v(t)(q.value.style.wheel.color, 50),
rx: 12,
x: 160,
y: 170,
height: 60,
width: 80,
stroke: "none"
}, null, 8, Cn)
], 12, bn)) : l("", !0),
J.value === "sparkline" ? (h(), u("svg", {
key: 22,
xmlns: v(i),
width: "100%",
viewBox: "0 0 150 32",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
d("g", null, [d("rect", {
x: "2",
y: "2",
height: "6",
width: "24",
fill: q.value.style.sparkline.color,
rx: "3"
}, null, 8, Tn), d("rect", {
x: "2",
y: "12",
height: "16",
width: "16",
fill: q.value.style.sparkline.color,
rx: "3"
}, null, 8, En)]),
(h(!0), u(s, null, _(Q.value, (e, t) => (h(), u("g", null, [t < Q.value.length - 1 ? (h(), u("line", {
key: 0,
x1: e.x,
y1: e.y,
x2: Q.value[t + 1].x,
y2: Q.value[t + 1].y,
"stroke-width": q.value.style.sparkline.strokeWidth,
stroke: q.value.style.sparkline.color,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Dn)) : l("", !0)]))), 256))
], 12, wn)) : l("", !0),
J.value === "candlesticks" ? (h(), u("svg", {
key: 23,
xmlns: v(i),
width: "100%",
viewBox: "0 0 512 316",
style: m(`background:${q.value.style.backgroundColor}`)
}, [
p(o),
q.value.style.candlesticks.axis.show ? (h(), u("g"