@gkucmierz/nano-ui 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/nano-ui.css +1 -1
- package/dist/nano-ui.js +215 -80
- package/package.json +7 -2
package/README.md
CHANGED
|
@@ -101,6 +101,7 @@ const chartData = ref([
|
|
|
101
101
|
| `selectedItemId` | `String \| Number` | `null` | The ID of the currently locked slice (supports `v-model:selectedItemId`). |
|
|
102
102
|
| `centerValue` | `String \| Number` | `''` | Value displayed inside the donut hole (defaults to sum of all items). |
|
|
103
103
|
| `centerLabel` | `String` | `''` | Sub-label text displayed below the center value. |
|
|
104
|
+
| `centerValueFormatter` | `Function` | `null` | Custom formatter function for the center value: `(value, item) => string`. |
|
|
104
105
|
| `valueDecimals` | `Number` | `undefined` | Decimals to round slice values to on label callouts. |
|
|
105
106
|
| `aggregateOthers` | `Boolean` | `false` | Merges small items below a threshold into an "Other" slice. |
|
|
106
107
|
| `othersThreshold`| `Number` | `0.01` | Fraction threshold (e.g. `0.05` for 5%) below which items are aggregated. |
|
package/dist/nano-ui.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.global-tooltip[data-v-37c91a21]{--nu-tooltip-bg:#0f172af2;--nu-tooltip-color:#f8fafc;--nu-tooltip-radius:8px;--nu-tooltip-padding:8px 14px;--nu-tooltip-shadow:0 8px 24px #0000004d;--nu-tooltip-border:1px solid #ffffff1a;--nu-tooltip-arrow-border:#ffffff1a;z-index:99999;background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(8px);color:var(--nu-tooltip-color);padding:var(--nu-tooltip-padding);border-radius:var(--nu-tooltip-radius);text-align:center;white-space:normal;word-wrap:break-word;pointer-events:none;width:max-content;max-width:min(350px,100vw - 32px);box-shadow:var(--nu-tooltip-shadow);border:var(--nu-tooltip-border);opacity:0;visibility:hidden;font-size:.85rem;font-weight:500;line-height:1.4;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);position:fixed;top:0;left:0;transform:translateY(4px)scale(.95)}.global-tooltip[data-v-37c91a21]:after{content:"";left:calc(50% + var(--arrow-offset,0px));background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(8px);border-right:1px solid var(--nu-tooltip-arrow-border);border-bottom:1px solid var(--nu-tooltip-arrow-border);clip-path:polygon(100% 0,100% 100%,0 100%);border-radius:0 0 2px;width:10px;height:10px;margin-left:-5px;position:absolute;bottom:-5px;transform:rotate(45deg)}.global-tooltip.tooltip-bottom[data-v-37c91a21]:after{border-bottom:none;border-right:none;border-left:1px solid var(--nu-tooltip-arrow-border);border-top:1px solid var(--nu-tooltip-arrow-border);clip-path:polygon(0 0,100% 0,0 100%);border-radius:2px 0 0;top:-5px;bottom:auto}.global-tooltip.visible[data-v-37c91a21]{opacity:1;visibility:visible}:root{--nano-modal-bg:#1e1e24;--nano-modal-glass-bg:#1e1e24d9;--nano-modal-border:#ffffff1a;--nano-modal-text:#fff;--nano-modal-text-muted:#a0a0a0;--nano-modal-backdrop:#0009;--nano-modal-radius:12px;--nano-btn-primary:#3498db;--nano-btn-primary-hover:#2980b9;--nano-btn-secondary:#34495e;--nano-btn-secondary-hover:#2c3e50}.nano-modal-overlay{z-index:99999;background:var(--nano-modal-backdrop);box-sizing:border-box;outline:none;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.nano-modal-overlay.nano-glass{-webkit-backdrop-filter:blur(8px)}.nano-modal-window{background:var(--nano-modal-bg);border:1px solid var(--nano-modal-border);border-radius:var(--nano-modal-radius);max-height:90vh;color:var(--nano-modal-text);flex-direction:column;display:flex;position:relative;box-shadow:0 24px 48px #00000080}.nano-modal-window:not([style*="position: absolute"]){margin:auto}.nano-glass .nano-modal-window{background:var(--nano-modal-glass-bg);-webkit-backdrop-filter:blur(16px)}.nano-modal-header{border-bottom:1px solid var(--nano-modal-border);-webkit-user-select:none;user-select:none;background:#0003;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.nano-modal-header.is-draggable{cursor:grab}.nano-modal-header.is-draggable:active{cursor:grabbing}.nano-modal-title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.4}.nano-modal-close-btn{color:var(--nano-modal-text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.nano-modal-close-btn:hover{color:var(--nano-modal-text);background:#ffffff1a}.nano-modal-body{flex:1;padding:24px;overflow-y:auto}.nano-modal-footer{border-top:1px solid var(--nano-modal-border);background:#00000026;justify-content:flex-end;padding:16px 24px;display:flex}.nano-modal-actions{gap:12px;display:flex}.nano-btn{cursor:pointer;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:.95rem;font-weight:600;transition:all .2s}.nano-btn-primary{background:var(--nano-btn-primary)}.nano-btn-primary:hover{background:var(--nano-btn-primary-hover)}.nano-btn-secondary{background:var(--nano-btn-secondary)}.nano-btn-secondary:hover{background:var(--nano-btn-secondary-hover)}.nano-modal-resizer{cursor:se-resize;width:16px;height:16px;color:var(--nano-modal-text-muted);z-index:10;justify-content:center;align-items:center;transition:color .2s;display:flex;position:absolute;bottom:4px;right:4px}.nano-modal-resizer:hover{color:var(--nano-modal-text)}.nano-modal-fade-enter-active,.nano-modal-fade-leave-active{transition:opacity .25s}.nano-modal-fade-enter-active .nano-modal-window{transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.nano-modal-fade-leave-active .nano-modal-window{transition:transform .2s ease-in}.nano-modal-fade-enter-from,.nano-modal-fade-leave-to{opacity:0}.nano-modal-fade-enter-from .nano-modal-window{transform:scale(.9)translateY(10px)}.nano-modal-fade-leave-to .nano-modal-window{transform:scale(.95)translateY(-10px)}.donut-canvas-wrapper[data-v-
|
|
1
|
+
.global-tooltip[data-v-37c91a21]{--nu-tooltip-bg:#0f172af2;--nu-tooltip-color:#f8fafc;--nu-tooltip-radius:8px;--nu-tooltip-padding:8px 14px;--nu-tooltip-shadow:0 8px 24px #0000004d;--nu-tooltip-border:1px solid #ffffff1a;--nu-tooltip-arrow-border:#ffffff1a;z-index:99999;background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(8px);color:var(--nu-tooltip-color);padding:var(--nu-tooltip-padding);border-radius:var(--nu-tooltip-radius);text-align:center;white-space:normal;word-wrap:break-word;pointer-events:none;width:max-content;max-width:min(350px,100vw - 32px);box-shadow:var(--nu-tooltip-shadow);border:var(--nu-tooltip-border);opacity:0;visibility:hidden;font-size:.85rem;font-weight:500;line-height:1.4;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);position:fixed;top:0;left:0;transform:translateY(4px)scale(.95)}.global-tooltip[data-v-37c91a21]:after{content:"";left:calc(50% + var(--arrow-offset,0px));background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(8px);border-right:1px solid var(--nu-tooltip-arrow-border);border-bottom:1px solid var(--nu-tooltip-arrow-border);clip-path:polygon(100% 0,100% 100%,0 100%);border-radius:0 0 2px;width:10px;height:10px;margin-left:-5px;position:absolute;bottom:-5px;transform:rotate(45deg)}.global-tooltip.tooltip-bottom[data-v-37c91a21]:after{border-bottom:none;border-right:none;border-left:1px solid var(--nu-tooltip-arrow-border);border-top:1px solid var(--nu-tooltip-arrow-border);clip-path:polygon(0 0,100% 0,0 100%);border-radius:2px 0 0;top:-5px;bottom:auto}.global-tooltip.visible[data-v-37c91a21]{opacity:1;visibility:visible}:root{--nano-modal-bg:#1e1e24;--nano-modal-glass-bg:#1e1e24d9;--nano-modal-border:#ffffff1a;--nano-modal-text:#fff;--nano-modal-text-muted:#a0a0a0;--nano-modal-backdrop:#0009;--nano-modal-radius:12px;--nano-btn-primary:#3498db;--nano-btn-primary-hover:#2980b9;--nano-btn-secondary:#34495e;--nano-btn-secondary-hover:#2c3e50}.nano-modal-overlay{z-index:99999;background:var(--nano-modal-backdrop);box-sizing:border-box;outline:none;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.nano-modal-overlay.nano-glass{-webkit-backdrop-filter:blur(8px)}.nano-modal-window{background:var(--nano-modal-bg);border:1px solid var(--nano-modal-border);border-radius:var(--nano-modal-radius);max-height:90vh;color:var(--nano-modal-text);flex-direction:column;display:flex;position:relative;box-shadow:0 24px 48px #00000080}.nano-modal-window:not([style*="position: absolute"]){margin:auto}.nano-glass .nano-modal-window{background:var(--nano-modal-glass-bg);-webkit-backdrop-filter:blur(16px)}.nano-modal-header{border-bottom:1px solid var(--nano-modal-border);-webkit-user-select:none;user-select:none;background:#0003;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.nano-modal-header.is-draggable{cursor:grab}.nano-modal-header.is-draggable:active{cursor:grabbing}.nano-modal-title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.4}.nano-modal-close-btn{color:var(--nano-modal-text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.nano-modal-close-btn:hover{color:var(--nano-modal-text);background:#ffffff1a}.nano-modal-body{flex:1;padding:24px;overflow-y:auto}.nano-modal-footer{border-top:1px solid var(--nano-modal-border);background:#00000026;justify-content:flex-end;padding:16px 24px;display:flex}.nano-modal-actions{gap:12px;display:flex}.nano-btn{cursor:pointer;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:.95rem;font-weight:600;transition:all .2s}.nano-btn-primary{background:var(--nano-btn-primary)}.nano-btn-primary:hover{background:var(--nano-btn-primary-hover)}.nano-btn-secondary{background:var(--nano-btn-secondary)}.nano-btn-secondary:hover{background:var(--nano-btn-secondary-hover)}.nano-modal-resizer{cursor:se-resize;width:16px;height:16px;color:var(--nano-modal-text-muted);z-index:10;justify-content:center;align-items:center;transition:color .2s;display:flex;position:absolute;bottom:4px;right:4px}.nano-modal-resizer:hover{color:var(--nano-modal-text)}.nano-modal-fade-enter-active,.nano-modal-fade-leave-active{transition:opacity .25s}.nano-modal-fade-enter-active .nano-modal-window{transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.nano-modal-fade-leave-active .nano-modal-window{transition:transform .2s ease-in}.nano-modal-fade-enter-from,.nano-modal-fade-leave-to{opacity:0}.nano-modal-fade-enter-from .nano-modal-window{transform:scale(.9)translateY(10px)}.nano-modal-fade-leave-to .nano-modal-window{transform:scale(.95)translateY(-10px)}.donut-canvas-wrapper[data-v-a055ea0b]{flex-shrink:0;justify-content:center;align-items:center;width:120px;height:120px;transition:width .45s cubic-bezier(.25,1,.5,1),height .45s cubic-bezier(.25,1,.5,1);display:flex;position:relative}.donut-canvas-wrapper.is-expanded[data-v-a055ea0b]{width:100%;max-width:760px;height:320px}@media (width<=760px){.donut-canvas-wrapper.is-expanded[data-v-a055ea0b]{height:42vw}}.items-svg-chart[data-v-a055ea0b]{width:100%;height:100%;display:block;overflow:visible}.slice-group-3d[data-v-a055ea0b]{cursor:pointer;transition:transform .25s cubic-bezier(.25,1,.5,1),opacity .25s}.slice-group-3d.is-dimmed[data-v-a055ea0b]{opacity:.35}.label-group[data-v-a055ea0b]{transition:opacity .25s}.label-group path[data-v-a055ea0b]{transition:d .25s cubic-bezier(.25,1,.5,1),stroke-width .2s,opacity .2s}.label-group text[data-v-a055ea0b]{transition:transform .25s cubic-bezier(.25,1,.5,1),font-weight .2s,opacity .2s}.label-group.is-hovered path[data-v-a055ea0b]{stroke-width:2.2px}.label-group.is-hovered text[data-v-a055ea0b]{font-weight:700}.label-group.is-dimmed[data-v-a055ea0b]{opacity:.25}.no-transitions .label-group[data-v-a055ea0b],.no-transitions .label-group path[data-v-a055ea0b],.no-transitions .label-group text[data-v-a055ea0b],.no-transitions .slice-group-3d[data-v-a055ea0b]{transition:none!important}.center-text-value[data-v-a055ea0b]{fill:#fff;filter:drop-shadow(0 0 3px #000c)}.center-text-label[data-v-a055ea0b]{fill:#94a3b8;filter:drop-shadow(0 0 2px #000c)}:root[data-theme=light] .center-text-value[data-v-a055ea0b]{fill:#0f172a;filter:drop-shadow(0 0 3px #ffffffe6)}:root[data-theme=light] .center-text-label[data-v-a055ea0b]{fill:#475569;filter:drop-shadow(0 0 2px #ffffffe6)}.nano-scrub-track[data-v-5ed42841]{cursor:ew-resize;-webkit-user-select:none;user-select:none;background:#00e5ff05;border:1px dashed #00e5ff40;border-radius:8px;justify-content:center;align-items:center;width:100%;height:32px;transition:border-color .2s,background-color .2s;display:flex;position:relative;overflow:hidden}.nano-scrub-track[data-v-5ed42841]:hover{background:#00e5ff0a;border-color:#00e5ff66}.nano-scrub-progress[data-v-5ed42841]{pointer-events:none;background:#00e5ff0f;height:100%;position:absolute;top:0;left:0}.nano-scrub-label[data-v-5ed42841]{color:#00e5ff;letter-spacing:.03rem;z-index:1;pointer-events:none;align-items:center;gap:6px;font-size:10px;font-weight:700;display:flex}.nano-scrub-overlay[data-v-5ed42841]{z-index:99999;pointer-events:none;-webkit-user-select:none;user-select:none;width:100vw;height:100vh;position:fixed;top:0;left:0}.nano-scrub-anchor[data-v-5ed42841]{background:#00e5ff;border-radius:50%;width:10px;height:10px;position:fixed;transform:translate(-50%,-50%);box-shadow:0 0 12px #00e5ff,0 0 24px #00e5ff66}.nano-scrub-svg-line[data-v-5ed42841]{width:100vw;height:100vh;position:fixed;top:0;left:0}.nano-scrub-popup[data-v-5ed42841]{pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172af2;border:1px solid #00e5ff59;border-radius:10px;flex-direction:column;gap:6px;min-width:200px;padding:12px 16px;display:flex;position:fixed;box-shadow:0 10px 30px #0009,0 0 20px #00e5ff26}.nano-scrub-popup-title[data-v-5ed42841]{text-transform:uppercase;color:#64748b;letter-spacing:.06rem;font-size:10px;font-weight:700}.nano-scrub-popup-val[data-v-5ed42841]{color:#fff;letter-spacing:.05rem;font-family:monospace;font-size:1.25rem;font-weight:800}.nano-scrub-popup-res[data-v-5ed42841]{color:#00e5ff;font-size:11px;font-weight:700}span.ripple{background-color:var(--nano-ripple-color,#fff6);pointer-events:none;border-radius:50%;animation:.6s linear nano-ripple-anim;position:absolute;transform:scale(0)}@keyframes nano-ripple-anim{to{opacity:0;transform:scale(4)}}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/nano-ui.js
CHANGED
|
@@ -433,7 +433,7 @@ var N = {
|
|
|
433
433
|
"id",
|
|
434
434
|
"y1",
|
|
435
435
|
"y2"
|
|
436
|
-
], ce = ["stop-color"], le = ["stop-color"], ue = { key: 1 }, de = ["x", "y"], fe = { key: 2 }, pe = ["d", "fill"], me = ["d", "stroke"], he = ["d", "fill"], ge = ["d", "fill"], _e = ["d", "fill"], ve = ["d", "stroke"], ye = ["d", "fill"], be = ["d", "stroke"], xe = ["d", "stroke-width"], Se = ["transform"], Ce = ["font-size"], we = ["font-size"], Te = ["d", "fill"], Ee = ["d", "stroke"], De = ["d", "fill"], Oe = ["d", "fill"], ke = ["d", "fill"], Ae = ["d", "stroke"], je = ["d", "fill"], Me = ["d", "stroke"], Ne = ["d", "stroke-width"], Pe = ["onMouseenter", "onClick"], Fe = ["d"], Ie = ["d"], Le = ["onMouseenter", "onClick"], Re = ["d", "stroke"], ze = ["y", "fill"], Be = ["onMouseenter", "onClick"], Ve = ["d", "stroke"], He = ["y", "fill"],
|
|
436
|
+
], ce = ["stop-color"], le = ["stop-color"], ue = { key: 1 }, de = ["x", "y"], fe = { key: 2 }, pe = ["d", "fill"], me = ["d", "stroke"], he = ["d", "fill"], ge = ["d", "fill"], _e = ["d", "fill"], ve = ["d", "stroke"], ye = ["d", "fill"], be = ["d", "stroke"], xe = ["d", "stroke-width"], Se = ["transform"], Ce = ["font-size"], we = ["font-size"], Te = ["d", "fill"], Ee = ["d", "stroke"], De = ["d", "fill"], Oe = ["d", "fill"], ke = ["d", "fill"], Ae = ["d", "stroke"], je = ["d", "fill"], Me = ["d", "stroke"], Ne = ["d", "stroke-width"], Pe = ["onMouseenter", "onClick"], Fe = ["d"], Ie = ["d"], Le = ["onMouseenter", "onClick"], Re = ["d", "stroke"], ze = ["y", "fill"], Be = ["onMouseenter", "onClick"], Ve = ["d", "stroke"], He = ["y", "fill"], H = /* @__PURE__ */ P({
|
|
437
437
|
__name: "ThreeDDonutChart",
|
|
438
438
|
props: {
|
|
439
439
|
data: {
|
|
@@ -515,6 +515,19 @@ var N = {
|
|
|
515
515
|
showLabels: {
|
|
516
516
|
type: Boolean,
|
|
517
517
|
default: !0
|
|
518
|
+
},
|
|
519
|
+
thickness: {
|
|
520
|
+
type: Number,
|
|
521
|
+
default: .5,
|
|
522
|
+
validator: (e) => e >= 0 && e <= 1
|
|
523
|
+
},
|
|
524
|
+
showCenterText: {
|
|
525
|
+
type: Boolean,
|
|
526
|
+
default: !0
|
|
527
|
+
},
|
|
528
|
+
centerValueFormatter: {
|
|
529
|
+
type: Function,
|
|
530
|
+
default: null
|
|
518
531
|
}
|
|
519
532
|
},
|
|
520
533
|
emits: ["update:hoveredItemId", "update:selectedItemId"],
|
|
@@ -618,14 +631,14 @@ var N = {
|
|
|
618
631
|
percentage: n
|
|
619
632
|
};
|
|
620
633
|
});
|
|
621
|
-
}),
|
|
634
|
+
}), H = r(() => A.value.reduce((e, t) => e + t.value, 0)), Ue = r(() => {
|
|
622
635
|
if (c.centerValue !== void 0 && c.centerValue !== "") return c.centerValue;
|
|
623
|
-
let e =
|
|
624
|
-
return e ? L(e.item.value) : c.valueDecimals === void 0 ? Math.round(
|
|
625
|
-
}),
|
|
626
|
-
let e =
|
|
636
|
+
let e = nt.value.find((e) => e.item.id === w.value);
|
|
637
|
+
return e ? c.centerValueFormatter ? c.centerValueFormatter(e.item.value, e.item) : L(e.item.value) : c.centerValueFormatter ? c.centerValueFormatter(H.value, null) : c.valueDecimals === void 0 ? Math.round(H.value) : L(H.value);
|
|
638
|
+
}), We = r(() => {
|
|
639
|
+
let e = nt.value.find((e) => e.item.id === w.value);
|
|
627
640
|
return e ? R(e.item.name, 12).toUpperCase() : (c.centerLabel || "").toUpperCase();
|
|
628
|
-
}),
|
|
641
|
+
}), Ge = (e, t = !1) => {
|
|
629
642
|
let n = new Map(A.value.map((e) => [e.id, e])), r = new Map(e.map((e) => [e.id, e])), i = [];
|
|
630
643
|
e.forEach((e) => {
|
|
631
644
|
let r = n.get(e.id);
|
|
@@ -666,7 +679,7 @@ var N = {
|
|
|
666
679
|
unit: e.unit
|
|
667
680
|
});
|
|
668
681
|
}), A.value = i, t && (A.value = A.value.filter((e) => e.targetValue > 0));
|
|
669
|
-
},
|
|
682
|
+
}, Ke = (e, t = -90) => {
|
|
670
683
|
if (!e || e.length === 0) return t;
|
|
671
684
|
let n = e.reduce((e, t) => e + (t.value || 0), 0);
|
|
672
685
|
if (n === 0) return t;
|
|
@@ -684,22 +697,22 @@ var N = {
|
|
|
684
697
|
l < o ? (o = l, a = e, s = u) : l === o && u < s && (a = e, s = u);
|
|
685
698
|
}
|
|
686
699
|
return a;
|
|
687
|
-
},
|
|
688
|
-
let e = (
|
|
700
|
+
}, qe = r(() => c.autoRotate && B.value && B.value.length > 0 ? Ke(B.value, c.rotationAngle) : c.rotationAngle), U = _(qe.value), W = _(!1), Je = _(!1), Ye = null, G = c.is3D, K = _(c.isExpanded ? 380 : 60), q = _(c.isExpanded ? 160 : 60), J = _(c.isExpanded ? 180 : 48), Y = _(c.isExpanded ? G ? 180 * c.slopeRatio : 180 : G ? 48 * c.slopeRatio : 48), X = _(c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness)), Z = _(c.isExpanded ? G ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : G ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness)), Xe = c.isExpanded && G ? 32 : 0, Q = _(G && c.slopeRatio > .5 ? Xe * (2 - 2 * c.slopeRatio) : Xe), Ze = _(c.isExpanded ? 760 : 120), Qe = _(c.isExpanded ? 320 : 120), $ = _(c.isExpanded && c.showLabels ? 1 : 0), $e = r(() => {
|
|
701
|
+
let e = (J.value - 48) / 132;
|
|
689
702
|
return 13 + 6 * Math.max(0, Math.min(1, e));
|
|
690
|
-
}),
|
|
691
|
-
let e = (
|
|
703
|
+
}), et = r(() => {
|
|
704
|
+
let e = (J.value - 48) / 132;
|
|
692
705
|
return 7 + 1.5 * Math.max(0, Math.min(1, e));
|
|
693
|
-
}),
|
|
694
|
-
let e = A.value, t =
|
|
706
|
+
}), tt = r(() => q.value - Q.value / 2), nt = r(() => {
|
|
707
|
+
let e = A.value, t = H.value;
|
|
695
708
|
if (t === 0) return [];
|
|
696
|
-
let n = [], r =
|
|
697
|
-
|
|
698
|
-
let a =
|
|
709
|
+
let n = [], r = U.value * Math.PI / 180, i = K.value;
|
|
710
|
+
q.value;
|
|
711
|
+
let a = J.value, o = Y.value, s = X.value, l = Z.value, u = Q.value, d = tt.value, f = e.filter((e) => e.value > .001);
|
|
699
712
|
if (f.length === 1) {
|
|
700
713
|
let t = f[0], n = e.indexOf(t), r = F(t, n), p = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, m = "", h = "";
|
|
701
714
|
u > 0 && (m = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - a} ${d + u} A ${a} ${o} 0 0 0 ${i + a} ${d + u} Z`, h = `M ${i - s} ${d} A ${s} ${l} 0 0 1 ${i + s} ${d} L ${i + s} ${d + u} A ${s} ${l} 0 0 0 ${i - s} ${d + u} Z`);
|
|
702
|
-
let g = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} L ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, _ = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} M ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d}`, v = h, y = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} Z`, b = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d}`, x = m, S =
|
|
715
|
+
let g = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} L ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, _ = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} M ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d}`, v = h, y = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} Z`, b = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d}`, x = m, S = U.value * Math.PI / 180 + Math.PI, C = i + a * Math.cos(S), w = d + o * Math.sin(S), T = i + (a + 25) * Math.cos(S), E = d + (o + 35 * c.slopeRatio) * Math.sin(S), D = i + (a + s) / 2 * Math.cos(S), O = d + (o + l) / 2 * Math.sin(S), k = a - s, A = o - l;
|
|
703
716
|
return [{
|
|
704
717
|
item: t,
|
|
705
718
|
index: n,
|
|
@@ -828,19 +841,19 @@ var N = {
|
|
|
828
841
|
let n = w.value === e.item.id, r = w.value === t.item.id;
|
|
829
842
|
return n && !r ? 1 : !n && r ? -1 : e.midY - t.midY;
|
|
830
843
|
});
|
|
831
|
-
}),
|
|
844
|
+
}), rt = r(() => {
|
|
832
845
|
let e = /* @__PURE__ */ new Set(), t = [];
|
|
833
|
-
return
|
|
846
|
+
return nt.value.forEach((n) => {
|
|
834
847
|
e.has(n.item.id) || (e.add(n.item.id), t.push(n));
|
|
835
848
|
}), t;
|
|
836
|
-
}),
|
|
837
|
-
if (
|
|
849
|
+
}), it = (e) => w.value === e.item.id ? { transform: `translate(${10 * Math.cos(e.originalMidAngle)}px, ${10 * Math.sin(e.originalMidAngle)}px)` } : {}, at = r(() => {
|
|
850
|
+
if ($.value <= .001) return {
|
|
838
851
|
left: [],
|
|
839
852
|
right: []
|
|
840
853
|
};
|
|
841
854
|
let e = [], t = [];
|
|
842
|
-
return
|
|
843
|
-
let r = Math.cos(n.originalMidAngle) < 0, i = Math.sin(n.originalMidAngle) > 0, a =
|
|
855
|
+
return rt.value.forEach((n) => {
|
|
856
|
+
let r = Math.cos(n.originalMidAngle) < 0, i = Math.sin(n.originalMidAngle) > 0, a = Q.value, o = n.y0 + (i ? a : 0), s = n.y1 + (i ? a : 0), c = {
|
|
844
857
|
item: n.item,
|
|
845
858
|
index: n.index,
|
|
846
859
|
color: n.color,
|
|
@@ -858,40 +871,40 @@ var N = {
|
|
|
858
871
|
left: e,
|
|
859
872
|
right: t
|
|
860
873
|
};
|
|
861
|
-
}),
|
|
874
|
+
}), ot = r(() => at.value.left), st = r(() => at.value.right), ct = (e) => {
|
|
862
875
|
let t = w.value === e.item.id, n = e.x0, r = e.y0, i = e.finalY;
|
|
863
876
|
if (t) {
|
|
864
877
|
let t = 10 * Math.cos(e.originalMidAngle || 0), a = 10 * Math.sin(e.originalMidAngle || 0);
|
|
865
878
|
n += t, r += a, i -= 5;
|
|
866
879
|
}
|
|
867
|
-
let a = n + 30 * Math.cos(e.originalMidAngle || 0), o = r + 30 * Math.sin(e.originalMidAngle || 0), s = e.isLeft, c = Math.sin(e.originalMidAngle || 0) < 0, l =
|
|
880
|
+
let a = n + 30 * Math.cos(e.originalMidAngle || 0), o = r + 30 * Math.sin(e.originalMidAngle || 0), s = e.isLeft, c = Math.sin(e.originalMidAngle || 0) < 0, l = K.value, u = J.value, d = s ? l - u - 15 : l + u + 15, f = s ? Math.min(d, a - 30) : Math.max(d, a + 30);
|
|
868
881
|
return `M ${n} ${r} C ${a} ${o}, ${f} ${c ? Math.min(o, i) : Math.max(o, i)}, ${s ? 90 : 670} ${i}`;
|
|
869
|
-
},
|
|
882
|
+
}, lt = (e = 450) => {
|
|
870
883
|
if (c.currentLowFxMode || c.immediate) {
|
|
871
884
|
A.value.forEach((e) => {
|
|
872
885
|
e.value = e.targetValue, e.percentage = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
|
|
873
|
-
}), A.value = A.value.filter((e) => e.targetValue > 0),
|
|
886
|
+
}), A.value = A.value.filter((e) => e.targetValue > 0), U.value = qe.value;
|
|
874
887
|
let e = c.is3D;
|
|
875
|
-
|
|
888
|
+
K.value = c.isExpanded ? 380 : 60, q.value = c.isExpanded ? 160 : 60, J.value = c.isExpanded ? 180 : 48, Y.value = c.isExpanded ? e ? 180 * c.slopeRatio : 180 : e ? 48 * c.slopeRatio : 48, X.value = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), Z.value = c.isExpanded ? e ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : e ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness);
|
|
876
889
|
let t = c.isExpanded && e ? 32 : 0;
|
|
877
|
-
|
|
890
|
+
Q.value = e && c.slopeRatio > .5 ? t * (2 - 2 * c.slopeRatio) : t, Ze.value = c.isExpanded ? 760 : 120, Qe.value = c.isExpanded ? 320 : 120, $.value = c.isExpanded && c.showLabels ? 1 : 0, W.value = !1;
|
|
878
891
|
return;
|
|
879
892
|
}
|
|
880
|
-
g && cancelAnimationFrame(g),
|
|
881
|
-
let t = performance.now(), n =
|
|
893
|
+
g && cancelAnimationFrame(g), W.value = !0;
|
|
894
|
+
let t = performance.now(), n = U.value, r = qe.value, i = K.value, a = q.value, o = J.value, s = Y.value, l = X.value, u = Z.value, d = Q.value, f = Ze.value, p = Qe.value, m = $.value, h = c.is3D, _ = c.isExpanded ? 380 : 60, v = c.isExpanded ? 160 : 60, y = c.isExpanded ? 180 : 48, b = c.isExpanded ? h ? 180 * c.slopeRatio : 180 : h ? 48 * c.slopeRatio : 48, x = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), S = c.isExpanded ? h ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : h ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness), C = c.isExpanded && h ? 32 : 0, w = h && c.slopeRatio > .5 ? C * (2 - 2 * c.slopeRatio) : C, T = c.isExpanded ? 760 : 120, E = c.isExpanded ? 320 : 120, D = c.isExpanded && c.showLabels ? 1 : 0, O = (c) => {
|
|
882
895
|
let h = c - t, C = Math.min(1, h / e), k = 1 - (1 - C) ** 3;
|
|
883
896
|
A.value.forEach((e) => {
|
|
884
897
|
e.value = e.startValue + (e.targetValue - e.startValue) * k;
|
|
885
898
|
let t = e.startPercentage === void 0 ? 0 : e.startPercentage, n = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
|
|
886
899
|
e.percentage = Math.round(t + (n - t) * k);
|
|
887
|
-
}),
|
|
900
|
+
}), U.value = n + (r - n) * k, K.value = i + (_ - i) * k, q.value = a + (v - a) * k, J.value = o + (y - o) * k, Y.value = s + (b - s) * k, X.value = l + (x - l) * k, Z.value = u + (S - u) * k, Q.value = d + (w - d) * k, Ze.value = f + (T - f) * k, Qe.value = p + (E - p) * k, $.value = m + (D - m) * k, C < 1 ? g = requestAnimationFrame(O) : (g = null, A.value.forEach((e) => {
|
|
888
901
|
e.value = e.targetValue, e.percentage = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
|
|
889
|
-
}), A.value = A.value.filter((e) => e.targetValue > 0),
|
|
902
|
+
}), A.value = A.value.filter((e) => e.targetValue > 0), K.value = _, q.value = v, J.value = y, Y.value = b, X.value = x, Z.value = S, Q.value = w, Ze.value = T, Qe.value = E, $.value = D, W.value = !1);
|
|
890
903
|
};
|
|
891
904
|
g = requestAnimationFrame(O);
|
|
892
|
-
},
|
|
905
|
+
}, ut = (e) => {
|
|
893
906
|
if (e.isSingleSlice) return !0;
|
|
894
|
-
let t =
|
|
907
|
+
let t = nt.value, n = -1;
|
|
895
908
|
for (let r = t.length - 1; r >= 0; r--) if (t[r].item.id === e.item.id) {
|
|
896
909
|
n = r;
|
|
897
910
|
break;
|
|
@@ -900,41 +913,46 @@ var N = {
|
|
|
900
913
|
};
|
|
901
914
|
return C(B, (e) => {
|
|
902
915
|
let t = c.immediate || c.currentLowFxMode;
|
|
903
|
-
|
|
916
|
+
Ge(e || [], t), t || lt();
|
|
904
917
|
}, {
|
|
905
918
|
deep: !0,
|
|
906
919
|
immediate: !0
|
|
907
920
|
}), C(() => c.rotationAngle, () => {
|
|
908
|
-
|
|
909
|
-
|
|
921
|
+
Je.value = !0, Ye && clearTimeout(Ye), Ye = setTimeout(() => {
|
|
922
|
+
Je.value = !1;
|
|
910
923
|
}, 100);
|
|
911
|
-
}), C(
|
|
912
|
-
c.immediate || c.currentLowFxMode ?
|
|
924
|
+
}), C(qe, (e) => {
|
|
925
|
+
c.immediate || c.currentLowFxMode ? U.value = e : lt();
|
|
913
926
|
}), C(() => c.isExpanded, () => {
|
|
914
927
|
u(() => {
|
|
915
|
-
|
|
928
|
+
lt();
|
|
916
929
|
});
|
|
917
930
|
}), C(() => c.is3D, () => {
|
|
918
931
|
u(() => {
|
|
919
|
-
|
|
932
|
+
lt();
|
|
920
933
|
});
|
|
921
934
|
}), C(() => c.showLabels, () => {
|
|
922
935
|
u(() => {
|
|
923
|
-
|
|
936
|
+
lt();
|
|
924
937
|
});
|
|
925
938
|
}), C(() => c.slopeRatio, (e) => {
|
|
926
939
|
if (c.is3D) {
|
|
927
|
-
|
|
928
|
-
let t = c.isExpanded ?
|
|
929
|
-
|
|
940
|
+
Y.value = c.isExpanded ? 180 * e : 48;
|
|
941
|
+
let t = c.isExpanded ? 180 : 48, n = c.isExpanded ? 180 * e : 48;
|
|
942
|
+
X.value = t * (1 - c.thickness), Z.value = n * (1 - c.thickness);
|
|
943
|
+
let r = c.isExpanded ? 32 : 0;
|
|
944
|
+
Q.value = e > .5 ? r * (2 - 2 * e) : r;
|
|
930
945
|
}
|
|
946
|
+
}), C(() => c.thickness, (e) => {
|
|
947
|
+
let t = c.is3D, n = c.isExpanded ? 180 : 48, r = c.isExpanded ? t ? 180 * c.slopeRatio : 180 : t ? 48 * c.slopeRatio : 48;
|
|
948
|
+
X.value = n * (1 - e), Z.value = r * (1 - e);
|
|
931
949
|
}), C(() => c.hoveredItemId, (e) => {
|
|
932
950
|
y.value !== e && (y.value = e);
|
|
933
951
|
}), C(y, (e) => {
|
|
934
952
|
c.hoveredItemId !== e && l("update:hoveredItemId", e);
|
|
935
953
|
}), p(() => {
|
|
936
954
|
document.addEventListener("click", k), u(() => {
|
|
937
|
-
|
|
955
|
+
lt();
|
|
938
956
|
});
|
|
939
957
|
}), m(() => {
|
|
940
958
|
document.removeEventListener("click", k), g && cancelAnimationFrame(g);
|
|
@@ -947,14 +965,14 @@ var N = {
|
|
|
947
965
|
ref: O,
|
|
948
966
|
class: d(["donut-canvas-wrapper", {
|
|
949
967
|
"is-expanded": t.isExpanded,
|
|
950
|
-
"no-transitions":
|
|
968
|
+
"no-transitions": W.value || Je.value
|
|
951
969
|
}])
|
|
952
970
|
}, [(h(), o("svg", {
|
|
953
|
-
viewBox: `0 0 ${
|
|
971
|
+
viewBox: `0 0 ${Ze.value} ${Qe.value}`,
|
|
954
972
|
class: "items-svg-chart",
|
|
955
973
|
xmlns: "http://www.w3.org/2000/svg"
|
|
956
974
|
}, [B.value && B.value.length > 0 ? (h(), o("defs", te, [
|
|
957
|
-
(h(!0), o(e, null, v(
|
|
975
|
+
(h(!0), o(e, null, v(rt.value, (e) => (h(), o("linearGradient", {
|
|
958
976
|
key: "top-grad-" + z(e.item.id),
|
|
959
977
|
id: "top-grad-" + z(e.item.id),
|
|
960
978
|
gradientUnits: "userSpaceOnUse",
|
|
@@ -969,7 +987,7 @@ var N = {
|
|
|
969
987
|
offset: "100%",
|
|
970
988
|
"stop-color": N(e.color, .85)
|
|
971
989
|
}, null, 8, re)], 8, V))), 128)),
|
|
972
|
-
(h(!0), o(e, null, v(
|
|
990
|
+
(h(!0), o(e, null, v(rt.value, (e) => (h(), o("linearGradient", {
|
|
973
991
|
key: "outer-grad-" + z(e.item.id),
|
|
974
992
|
id: "outer-grad-" + z(e.item.id),
|
|
975
993
|
gradientUnits: "userSpaceOnUse",
|
|
@@ -984,7 +1002,7 @@ var N = {
|
|
|
984
1002
|
offset: "100%",
|
|
985
1003
|
"stop-color": N(e.color, .5)
|
|
986
1004
|
}, null, 8, oe)], 8, ie))), 128)),
|
|
987
|
-
(h(!0), o(e, null, v(
|
|
1005
|
+
(h(!0), o(e, null, v(rt.value, (e) => (h(), o("linearGradient", {
|
|
988
1006
|
key: "inner-grad-" + z(e.item.id),
|
|
989
1007
|
id: "inner-grad-" + z(e.item.id),
|
|
990
1008
|
gradientUnits: "userSpaceOnUse",
|
|
@@ -1008,13 +1026,13 @@ var N = {
|
|
|
1008
1026
|
"text-anchor": "middle",
|
|
1009
1027
|
"dominant-baseline": "middle"
|
|
1010
1028
|
}, x(t.emptyText || "No data"), 9, de)])) : (h(), o("g", fe, [
|
|
1011
|
-
(h(!0), o(e, null, v(
|
|
1029
|
+
(h(!0), o(e, null, v(nt.value.filter((e) => e.midY < tt.value), (e) => (h(), o("g", {
|
|
1012
1030
|
key: "slice-sub-back-" + e.item.id + "-" + e.midAngle,
|
|
1013
1031
|
class: d(["slice-group-3d", {
|
|
1014
1032
|
"is-hovered": w.value === e.item.id,
|
|
1015
1033
|
"is-dimmed": w.value !== null && w.value !== e.item.id
|
|
1016
1034
|
}]),
|
|
1017
|
-
style: f(
|
|
1035
|
+
style: f(it(e))
|
|
1018
1036
|
}, [
|
|
1019
1037
|
t.isExpanded && e.innerWallPath ? (h(), o("path", {
|
|
1020
1038
|
key: 0,
|
|
@@ -1052,12 +1070,12 @@ var N = {
|
|
|
1052
1070
|
"stroke-width": "0.8",
|
|
1053
1071
|
"stroke-linejoin": "round"
|
|
1054
1072
|
}, null, 8, ve)) : a("", !0),
|
|
1055
|
-
|
|
1073
|
+
ut(e) ? (h(), o("path", {
|
|
1056
1074
|
key: 6,
|
|
1057
1075
|
d: e.originalTopPath,
|
|
1058
1076
|
fill: `url(#top-grad-${z(e.item.id)})`
|
|
1059
1077
|
}, null, 8, ye)) : a("", !0),
|
|
1060
|
-
|
|
1078
|
+
ut(e) ? (h(), o("path", {
|
|
1061
1079
|
key: 7,
|
|
1062
1080
|
d: e.topStrokePath,
|
|
1063
1081
|
fill: "none",
|
|
@@ -1065,7 +1083,7 @@ var N = {
|
|
|
1065
1083
|
"stroke-width": "0.8",
|
|
1066
1084
|
"stroke-linejoin": "round"
|
|
1067
1085
|
}, null, 8, be)) : a("", !0),
|
|
1068
|
-
|
|
1086
|
+
ut(e) ? (h(), o("path", {
|
|
1069
1087
|
key: 8,
|
|
1070
1088
|
d: e.topStrokePath,
|
|
1071
1089
|
fill: "none",
|
|
@@ -1074,35 +1092,36 @@ var N = {
|
|
|
1074
1092
|
"stroke-linejoin": "round"
|
|
1075
1093
|
}, null, 8, xe)) : a("", !0)
|
|
1076
1094
|
], 6))), 128)),
|
|
1077
|
-
|
|
1078
|
-
|
|
1095
|
+
c.showCenterText ? (h(), o("g", {
|
|
1096
|
+
key: 0,
|
|
1097
|
+
transform: `translate(${K.value}, ${q.value})`,
|
|
1079
1098
|
class: "center-text-group"
|
|
1080
1099
|
}, [s("text", {
|
|
1081
1100
|
x: "0",
|
|
1082
1101
|
y: "-3",
|
|
1083
1102
|
class: "center-text-value",
|
|
1084
|
-
"font-size":
|
|
1103
|
+
"font-size": $e.value,
|
|
1085
1104
|
"font-weight": "bold",
|
|
1086
1105
|
"font-family": "'JetBrains Mono', monospace",
|
|
1087
1106
|
"text-anchor": "middle",
|
|
1088
1107
|
"dominant-baseline": "middle"
|
|
1089
|
-
}, x(
|
|
1108
|
+
}, x(Ue.value), 9, Ce), s("text", {
|
|
1090
1109
|
x: "0",
|
|
1091
1110
|
y: "10",
|
|
1092
1111
|
class: "center-text-label",
|
|
1093
|
-
"font-size":
|
|
1112
|
+
"font-size": et.value,
|
|
1094
1113
|
"font-family": "system-ui, -apple-system, sans-serif",
|
|
1095
1114
|
"font-weight": "600",
|
|
1096
1115
|
"text-anchor": "middle",
|
|
1097
1116
|
"dominant-baseline": "middle"
|
|
1098
|
-
}, x(
|
|
1099
|
-
(h(!0), o(e, null, v(
|
|
1117
|
+
}, x(We.value), 9, we)], 8, Se)) : a("", !0),
|
|
1118
|
+
(h(!0), o(e, null, v(nt.value.filter((e) => e.midY >= tt.value), (e) => (h(), o("g", {
|
|
1100
1119
|
key: "slice-sub-front-" + e.item.id + "-" + e.midAngle,
|
|
1101
1120
|
class: d(["slice-group-3d", {
|
|
1102
1121
|
"is-hovered": w.value === e.item.id,
|
|
1103
1122
|
"is-dimmed": w.value !== null && w.value !== e.item.id
|
|
1104
1123
|
}]),
|
|
1105
|
-
style: f(
|
|
1124
|
+
style: f(it(e))
|
|
1106
1125
|
}, [
|
|
1107
1126
|
t.isExpanded && e.innerWallPath ? (h(), o("path", {
|
|
1108
1127
|
key: 0,
|
|
@@ -1140,12 +1159,12 @@ var N = {
|
|
|
1140
1159
|
"stroke-width": "0.8",
|
|
1141
1160
|
"stroke-linejoin": "round"
|
|
1142
1161
|
}, null, 8, Ae)) : a("", !0),
|
|
1143
|
-
|
|
1162
|
+
ut(e) ? (h(), o("path", {
|
|
1144
1163
|
key: 6,
|
|
1145
1164
|
d: e.originalTopPath,
|
|
1146
1165
|
fill: `url(#top-grad-${z(e.item.id)})`
|
|
1147
1166
|
}, null, 8, je)) : a("", !0),
|
|
1148
|
-
|
|
1167
|
+
ut(e) ? (h(), o("path", {
|
|
1149
1168
|
key: 7,
|
|
1150
1169
|
d: e.topStrokePath,
|
|
1151
1170
|
fill: "none",
|
|
@@ -1153,7 +1172,7 @@ var N = {
|
|
|
1153
1172
|
"stroke-width": "0.8",
|
|
1154
1173
|
"stroke-linejoin": "round"
|
|
1155
1174
|
}, null, 8, Me)) : a("", !0),
|
|
1156
|
-
|
|
1175
|
+
ut(e) ? (h(), o("path", {
|
|
1157
1176
|
key: 8,
|
|
1158
1177
|
d: e.topStrokePath,
|
|
1159
1178
|
fill: "none",
|
|
@@ -1162,7 +1181,7 @@ var N = {
|
|
|
1162
1181
|
"stroke-linejoin": "round"
|
|
1163
1182
|
}, null, 8, Ne)) : a("", !0)
|
|
1164
1183
|
], 6))), 128)),
|
|
1165
|
-
(h(!0), o(e, null, v(
|
|
1184
|
+
(h(!0), o(e, null, v(rt.value, (e) => (h(), o("g", {
|
|
1166
1185
|
key: "hover-trigger-" + e.item.id,
|
|
1167
1186
|
class: "hover-trigger-group",
|
|
1168
1187
|
style: f({ cursor: c.selectable && !j.value ? "pointer" : "default" }),
|
|
@@ -1180,10 +1199,10 @@ var N = {
|
|
|
1180
1199
|
s("g", {
|
|
1181
1200
|
class: "labels-layer",
|
|
1182
1201
|
style: f({
|
|
1183
|
-
opacity:
|
|
1184
|
-
pointerEvents:
|
|
1202
|
+
opacity: $.value,
|
|
1203
|
+
pointerEvents: $.value > .01 ? "auto" : "none"
|
|
1185
1204
|
})
|
|
1186
|
-
}, [(h(!0), o(e, null, v(
|
|
1205
|
+
}, [(h(!0), o(e, null, v(ot.value, (e, t) => (h(), o("g", {
|
|
1187
1206
|
key: "label-left-" + e.item.id,
|
|
1188
1207
|
class: d(["label-group", {
|
|
1189
1208
|
"is-hovered": w.value === e.item.id,
|
|
@@ -1194,7 +1213,7 @@ var N = {
|
|
|
1194
1213
|
onClick: (t) => E(e.item.id),
|
|
1195
1214
|
style: f({ cursor: c.selectable && !j.value ? "pointer" : "default" })
|
|
1196
1215
|
}, [s("path", {
|
|
1197
|
-
d:
|
|
1216
|
+
d: ct(e),
|
|
1198
1217
|
fill: "none",
|
|
1199
1218
|
stroke: e.color,
|
|
1200
1219
|
"stroke-width": "1.2"
|
|
@@ -1208,7 +1227,7 @@ var N = {
|
|
|
1208
1227
|
"text-anchor": "end",
|
|
1209
1228
|
"dominant-baseline": "middle",
|
|
1210
1229
|
style: f(w.value === e.item.id ? "transform: translate(0, -5px);" : "")
|
|
1211
|
-
}, x(R(e.item.name, 24)) + " " + x(L(e.item.value)) + " " + x(e.item.unit || "") + " (" + x(e.item.percentage) + "%) ", 13, ze)], 46, Le))), 128)), (h(!0), o(e, null, v(
|
|
1230
|
+
}, x(R(e.item.name, 24)) + " " + x(L(e.item.value)) + " " + x(e.item.unit || "") + " (" + x(e.item.percentage) + "%) ", 13, ze)], 46, Le))), 128)), (h(!0), o(e, null, v(st.value, (e, t) => (h(), o("g", {
|
|
1212
1231
|
key: "label-right-" + e.item.id,
|
|
1213
1232
|
class: d(["label-group", {
|
|
1214
1233
|
"is-hovered": w.value === e.item.id,
|
|
@@ -1219,7 +1238,7 @@ var N = {
|
|
|
1219
1238
|
onClick: (t) => E(e.item.id),
|
|
1220
1239
|
style: f({ cursor: c.selectable && !j.value ? "pointer" : "default" })
|
|
1221
1240
|
}, [s("path", {
|
|
1222
|
-
d:
|
|
1241
|
+
d: ct(e),
|
|
1223
1242
|
fill: "none",
|
|
1224
1243
|
stroke: e.color,
|
|
1225
1244
|
"stroke-width": "1.2"
|
|
@@ -1236,12 +1255,128 @@ var N = {
|
|
|
1236
1255
|
}, x(R(e.item.name, 24)) + " " + x(L(e.item.value)) + " " + x(e.item.unit || "") + " (" + x(e.item.percentage) + "%) ", 13, He)], 46, Be))), 128))], 4)
|
|
1237
1256
|
]))], 8, ee))], 2));
|
|
1238
1257
|
}
|
|
1239
|
-
}, [["__scopeId", "data-v-
|
|
1258
|
+
}, [["__scopeId", "data-v-a055ea0b"]]), Ue = { class: "nano-scrub-label" }, We = {
|
|
1259
|
+
key: 0,
|
|
1260
|
+
class: "nano-scrub-overlay"
|
|
1261
|
+
}, Ge = {
|
|
1262
|
+
key: 1,
|
|
1263
|
+
class: "nano-scrub-svg-line"
|
|
1264
|
+
}, Ke = [
|
|
1265
|
+
"x1",
|
|
1266
|
+
"y1",
|
|
1267
|
+
"x2",
|
|
1268
|
+
"y2"
|
|
1269
|
+
], qe = { class: "nano-scrub-popup-val" }, U = { class: "nano-scrub-popup-res" }, W = /* @__PURE__ */ P({
|
|
1270
|
+
__name: "PrecisionScrubber",
|
|
1271
|
+
props: {
|
|
1272
|
+
modelValue: {
|
|
1273
|
+
type: Number,
|
|
1274
|
+
required: !0
|
|
1275
|
+
},
|
|
1276
|
+
min: {
|
|
1277
|
+
type: Number,
|
|
1278
|
+
default: 0
|
|
1279
|
+
},
|
|
1280
|
+
max: {
|
|
1281
|
+
type: Number,
|
|
1282
|
+
required: !0
|
|
1283
|
+
},
|
|
1284
|
+
label: {
|
|
1285
|
+
type: String,
|
|
1286
|
+
default: "↔ Hold & Drag to Scrub (Pull Down to Fine-Tune) ↕"
|
|
1287
|
+
},
|
|
1288
|
+
formatValue: {
|
|
1289
|
+
type: Function,
|
|
1290
|
+
default: (e) => String(e)
|
|
1291
|
+
}
|
|
1292
|
+
},
|
|
1293
|
+
emits: ["update:modelValue"],
|
|
1294
|
+
setup(n, { emit: c }) {
|
|
1295
|
+
let l = n, u = c, d = _(null), p = _(!1), m = _(!1), g = _(0), v = _(0), y = _(0), b = _(0), S = _(0), C = _(0), w = _(0), T = _(""), E = _({
|
|
1296
|
+
left: 0,
|
|
1297
|
+
width: 0
|
|
1298
|
+
}), D = r(() => {
|
|
1299
|
+
let e = l.max - l.min;
|
|
1300
|
+
return e <= 0 ? 0 : (l.modelValue - l.min) / e * 100;
|
|
1301
|
+
}), O = r(() => l.formatValue(l.modelValue)), k = (e) => {
|
|
1302
|
+
if (e.button !== 0 || l.max - l.min <= 0) return;
|
|
1303
|
+
p.value = !0, m.value = !1;
|
|
1304
|
+
let t = e.currentTarget.getBoundingClientRect();
|
|
1305
|
+
E.value = {
|
|
1306
|
+
left: t.left,
|
|
1307
|
+
width: t.width
|
|
1308
|
+
};
|
|
1309
|
+
let n = e.clientX;
|
|
1310
|
+
g.value = n, v.value = l.modelValue, S.value = l.modelValue, y.value = n, b.value = e.clientY, C.value = n, w.value = e.clientY, T.value = "Coarse (Full range)", document.addEventListener("mousemove", A), document.addEventListener("mouseup", j), e.preventDefault();
|
|
1311
|
+
}, A = (e) => {
|
|
1312
|
+
if (!p.value) return;
|
|
1313
|
+
C.value = e.clientX, w.value = e.clientY;
|
|
1314
|
+
let t = e.clientY - b.value, n = Math.abs(t), r = l.max - l.min;
|
|
1315
|
+
if (!(r <= 0)) if (!m.value && n >= 15 && (m.value = !0, y.value = e.clientX, Math.abs(e.clientX - g.value) < 8 ? S.value = v.value : S.value = l.modelValue), m.value) {
|
|
1316
|
+
let e = Math.max(0, Math.abs(t) - 15), n = .25, r = 1.08, i = e + (r ** +e - 1), a = Math.round(-Math.sign(t) * n * i), o = S.value + a;
|
|
1317
|
+
o > l.max && (o = l.max), o < l.min && (o = l.min), u("update:modelValue", o);
|
|
1318
|
+
let s = n * (1 + r ** +e * Math.log(r));
|
|
1319
|
+
s >= 1e9 ? T.value = `Coarse (±${M(Math.round(s))} / px)` : s >= 1e6 ? T.value = `Medium (±${M(Math.round(s))} / px)` : s >= 1 ? T.value = `Fine (±${M(Math.round(s))} / px)` : T.value = `Ultra-Fine (±1 index per ${Math.round(1 / s)}px)`;
|
|
1320
|
+
} else {
|
|
1321
|
+
let t = E.value, n = t.width - 16, i = Math.min(1, Math.max(0, (e.clientX - t.left - 8) / n));
|
|
1322
|
+
u("update:modelValue", l.min + Math.round(i * r)), T.value = "Coarse (Full range)";
|
|
1323
|
+
}
|
|
1324
|
+
}, j = (e) => {
|
|
1325
|
+
if (p.value && !m.value) {
|
|
1326
|
+
let t = l.max - l.min;
|
|
1327
|
+
if (t > 0 && E.value.width > 0) {
|
|
1328
|
+
let n = E.value, r = n.width - 16, i = Math.min(1, Math.max(0, (e.clientX - n.left - 8) / r));
|
|
1329
|
+
u("update:modelValue", l.min + Math.round(i * t));
|
|
1330
|
+
}
|
|
1331
|
+
}
|
|
1332
|
+
p.value = !1, document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", j);
|
|
1333
|
+
}, M = (e) => String(e).replace(/\B(?=(\d{3})+(?!\d))/g, " ");
|
|
1334
|
+
return (r, c) => (h(), o(e, null, [s("div", {
|
|
1335
|
+
class: "nano-scrub-track",
|
|
1336
|
+
onMousedown: k,
|
|
1337
|
+
ref_key: "trackRef",
|
|
1338
|
+
ref: d
|
|
1339
|
+
}, [s("div", {
|
|
1340
|
+
class: "nano-scrub-progress",
|
|
1341
|
+
style: f({ width: D.value + "%" })
|
|
1342
|
+
}, null, 4), s("span", Ue, x(n.label), 1)], 544), (h(), i(t, { to: "body" }, [p.value ? (h(), o("div", We, [
|
|
1343
|
+
m.value ? (h(), o("div", {
|
|
1344
|
+
key: 0,
|
|
1345
|
+
class: "nano-scrub-anchor",
|
|
1346
|
+
style: f({
|
|
1347
|
+
left: y.value + "px",
|
|
1348
|
+
top: b.value + "px"
|
|
1349
|
+
})
|
|
1350
|
+
}, null, 4)) : a("", !0),
|
|
1351
|
+
m.value ? (h(), o("svg", Ge, [s("line", {
|
|
1352
|
+
x1: y.value,
|
|
1353
|
+
y1: b.value,
|
|
1354
|
+
x2: C.value,
|
|
1355
|
+
y2: w.value,
|
|
1356
|
+
stroke: "#00e5ff",
|
|
1357
|
+
"stroke-dasharray": "4,4",
|
|
1358
|
+
"stroke-width": "1.5",
|
|
1359
|
+
opacity: "0.6"
|
|
1360
|
+
}, null, 8, Ke)])) : a("", !0),
|
|
1361
|
+
s("div", {
|
|
1362
|
+
class: "nano-scrub-popup",
|
|
1363
|
+
style: f({
|
|
1364
|
+
left: C.value + 15 + "px",
|
|
1365
|
+
top: w.value + 15 + "px"
|
|
1366
|
+
})
|
|
1367
|
+
}, [
|
|
1368
|
+
c[0] ||= s("div", { class: "nano-scrub-popup-title" }, "Scrubbing Mode", -1),
|
|
1369
|
+
s("div", qe, x(O.value), 1),
|
|
1370
|
+
s("div", U, x(T.value), 1)
|
|
1371
|
+
], 4)
|
|
1372
|
+
])) : a("", !0)]))], 64));
|
|
1373
|
+
}
|
|
1374
|
+
}, [["__scopeId", "data-v-5ed42841"]]);
|
|
1240
1375
|
//#endregion
|
|
1241
1376
|
//#region src/index.js
|
|
1242
1377
|
O.init("nano-ui", "https://analytics.7u.pl");
|
|
1243
|
-
var
|
|
1244
|
-
e.directive("ripple", k), e.directive("tooltip", N), e.component("GlobalTooltip", F), e.component("NanoModal", B), e.component("ThreeDDonutChart",
|
|
1378
|
+
var Je = { install(e) {
|
|
1379
|
+
e.directive("ripple", k), e.directive("tooltip", N), e.component("GlobalTooltip", F), e.component("NanoModal", B), e.component("ThreeDDonutChart", H), e.component("PrecisionScrubber", W);
|
|
1245
1380
|
} };
|
|
1246
1381
|
//#endregion
|
|
1247
|
-
export { F as GlobalTooltip, B as NanoModal, k as Ripple,
|
|
1382
|
+
export { F as GlobalTooltip, B as NanoModal, W as PrecisionScrubber, k as Ripple, H as ThreeDDonutChart, Je as default, M as hideTooltip, j as showTooltip, N as tooltipDirective, A as tooltipState };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gkucmierz/nano-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"description": "High-performance, minimal footprint Vue 3 UI library, interactive 3D charts, and directives.",
|
|
6
6
|
"type": "module",
|
|
@@ -48,7 +48,12 @@
|
|
|
48
48
|
"pie-chart",
|
|
49
49
|
"3d-chart",
|
|
50
50
|
"svg-chart",
|
|
51
|
-
"interactive-charts"
|
|
51
|
+
"interactive-charts",
|
|
52
|
+
"scrubber",
|
|
53
|
+
"precision-scrubber",
|
|
54
|
+
"high-precision",
|
|
55
|
+
"slider",
|
|
56
|
+
"jog-dial"
|
|
52
57
|
],
|
|
53
58
|
"dependencies": {
|
|
54
59
|
"@gkucmierz/analytics": "^1.0.1",
|