geekin-devtoys 0.2.13 → 0.2.14-t1
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/lib/GPie3D/index.js +1 -1
- package/lib/GPie3D/index.mjs +162 -156
- package/lib/GPie3D/style.css +1 -1
- package/lib/components/GTable/index.d.ts +4 -3
- package/package.json +1 -1
package/lib/GPie3D/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("vue"),ut=require("../_plugin-vue_export-helper-BHFhmbuH.js"),pt={class:"g-pie3d-tooltip__default"},vt={class:"g-pie3d-tooltip__name"},gt={class:"g-pie3d-tooltip__value"},yt=260,mt=h.defineComponent({__name:"index",props:{data:{default:()=>[]},config:{default:()=>({})},animation:{type:Boolean,default:!0}},emits:["slice-click"],setup(z,{emit:nt}){const P=z,at=nt,V={alpha:55,depth:26,startAngle:0,colors:["#22d3ee","#3b82f6","#8b5cf6","#06b6d4","#0ea5e9","#a855f7","#14b8a6"],textColor:"#cbd5e1",radiusRatio:.55,hoverDistance:14,showLabel:!0,showPercent:!0,labelFontSize:12,opacity:.7,showAura:!0,glowColor:"",labelLineColor:"auto",labelLineWidth:1},a={...V,...P.config},R=h.ref(null),T=h.ref(null);let E=null,C=0,_=0,L=1,p=0,u=0,v=0,x=0,M=[],$=P.animation?0:1,Y=null,N=P.animation,k=null,X=0;const B=h.ref(-1),D=h.ref(!1),U=h.ref(0),J=h.ref(0),I=h.ref(null),q=h.ref(0),K=t=>t*Math.PI/180,O=(t,l=0,n=0)=>({x:p+l+v*Math.cos(t),y:u+n+x*Math.sin(t)}),j=(t,l=0,n=0)=>({x:p+l+v*Math.cos(t),y:u+n+x*Math.sin(t)+a.depth}),F=()=>{if(!T.value||!R.value)return;const t=R.value,l=T.value;L=window.devicePixelRatio||1,C=t.clientWidth,_=t.clientHeight,l.width=C*L,l.height=_*L,l.style.width=C+"px",l.style.height=_+"px",E=l.getContext("2d"),E&&E.setTransform(L,0,0,L,0,0),p=C/2,u=_/2-a.depth/2;const n=a.showLabel?60:10,s=Math.min(C,_-a.depth-n)/2*a.radiusRatio*1.6;v=Math.max(20,s),x=v*Math.cos(K(a.alpha)),lt(),N?st():G()},lt=()=>{M=[];const t=P.data.reduce((n,s)=>n+(s.value||0),0);if(t<=0)return;let l=-Math.PI/2+K(a.startAngle);P.data.forEach((n,s)=>{const i=n.value/t,d=i*Math.PI*2;M.push({data:n,index:s,color:n.color||a.colors[s%a.colors.length],startA:l,endA:l+d,midA:l+d/2,percent:i,hover:!1,hoverProgress:0}),l+=d})},st=()=>{$=0;const t=800,l=performance.now(),n=s=>{const i=Math.min(1,(s-l)/t);$=1-Math.pow(1-i,3),G(),i<1?Y=requestAnimationFrame(n):(N=!1,Y=null)};Y=requestAnimationFrame(n)},it=t=>1-Math.pow(1-t,3),Q=t=>{const l=X===0?16:t-X;X=t;const n=l/yt;let s=!1;for(const i of M){const d=i.hover?1:0;if(i.hoverProgress===d)continue;const e=d>i.hoverProgress?1:-1;i.hoverProgress+=e*n,(e>0&&i.hoverProgress>=d||e<0&&i.hoverProgress<=d)&&(i.hoverProgress=d),i.hoverProgress!==d&&(s=!0)}G(),s?k=requestAnimationFrame(Q):(k=null,X=0)},Z=()=>{k==null&&(X=0,k=requestAnimationFrame(Q))},S=(t,l)=>{let n=t.replace("#","");n.length===3&&(n=n.split("").map(e=>e+e).join(""));const s=parseInt(n.slice(0,2),16),i=parseInt(n.slice(2,4),16),d=parseInt(n.slice(4,6),16);return`rgba(${s},${i},${d},${l})`},G=()=>{if(!E)return;const t=E;if(t.clearRect(0,0,C,_),!M.length)return;const l=M[0]?.startA??0,n=Math.PI*2*$,s=l+n,i=M.map(e=>{const r=e.startA,f=Math.min(e.endA,s),y=f>r,g=it(Math.max(0,Math.min(1,e.hoverProgress))),w=Math.cos(e.midA)*a.hoverDistance*g,b=Math.sin(e.midA)*a.hoverDistance*g;return{...e,startA:r,endA:f,valid:y,ox:w,oy:b,hp:g}});if(a.showAura){const e=t.createRadialGradient(p,u+a.depth,v*.1,p,u+a.depth,v*1.5);e.addColorStop(0,"rgba(6,182,212,0.15)"),e.addColorStop(.4,"rgba(59,130,246,0.08)"),e.addColorStop(.8,"rgba(139,92,246,0.03)"),e.addColorStop(1,"rgba(0,0,0,0)"),t.beginPath(),t.ellipse(p,u+a.depth,v*1.5,x*.9,0,0,Math.PI*2),t.fillStyle=e,t.fill(),t.strokeStyle="rgba(56,189,248,0.08)",t.lineWidth=1;for(let r=3;r>=1;r--){const f=v*(.3+r*.25);t.beginPath(),t.ellipse(p,u+a.depth,f,f*(x/v),0,0,Math.PI*2),t.stroke()}}const d=Math.PI/120;for(const e of i){if(!e.valid)continue;let r=e.startA;const f=a.glowColor||e.color;for(;r<e.endA;){const y=Math.min(r+d,e.endA),g=(r+y)/2;if(Math.sin(g)>0){const w=O(r,e.ox,e.oy),b=O(y,e.ox,e.oy),o=j(y,e.ox,e.oy),m=j(r,e.ox,e.oy);t.fillStyle=S(f,a.opacity*.4),t.beginPath(),t.moveTo(w.x,w.y),t.lineTo(b.x,b.y),t.lineTo(o.x,o.y),t.lineTo(m.x,m.y),t.closePath(),t.fill(),t.strokeStyle=S(f,.7),t.lineWidth=.8,t.beginPath(),t.moveTo(m.x,m.y),t.lineTo(o.x,o.y),t.stroke()}r=y}}for(const e of i){if(!e.valid)continue;const r=[];Math.sin(e.startA)>.001&&r.push({a:e.startA}),Math.sin(e.endA)>.001&&r.push({a:e.endA});const f=a.glowColor||e.color;for(const y of r){const g={x:p+e.ox,y:u+e.oy},w={x:g.x,y:g.y+a.depth},b=O(y.a,e.ox,e.oy),o=j(y.a,e.ox,e.oy);t.fillStyle=S(f,a.opacity*.5),t.beginPath(),t.moveTo(g.x,g.y),t.lineTo(b.x,b.y),t.lineTo(o.x,o.y),t.lineTo(w.x,w.y),t.closePath(),t.fill(),t.strokeStyle=S(f,.8),t.lineWidth=.8,t.beginPath(),t.moveTo(b.x,b.y),t.lineTo(o.x,o.y),t.stroke()}}for(const e of i){if(!e.valid)continue;const r=a.glowColor||e.color;e.hp>.01&&(t.save(),t.shadowColor=r,t.shadowBlur=12*e.hp,t.beginPath(),t.moveTo(p+e.ox,u+e.oy),t.ellipse(p+e.ox,u+e.oy,v,x,0,e.startA,e.endA),t.closePath(),t.fillStyle=S(r,.08*e.hp),t.fill(),t.restore()),t.beginPath(),t.moveTo(p+e.ox,u+e.oy),t.ellipse(p+e.ox,u+e.oy,v,x,0,e.startA,e.endA),t.closePath();const f=t.createRadialGradient(p+e.ox-v*.2,u+e.oy-x*.2,0,p+e.ox,u+e.oy,v*1.05);f.addColorStop(0,S(r,a.opacity*.95)),f.addColorStop(.6,S(r,a.opacity*.8)),f.addColorStop(1,S(r,a.opacity*.6)),t.fillStyle=f,t.fill(),t.strokeStyle=S(r,.95),t.lineWidth=.8+.6*e.hp,t.stroke()}if(a.showLabel&&$>=.999){t.font=`${a.labelFontSize}px Arial, sans-serif`,t.textBaseline="middle";const e=[],r=[],f=a.labelFontSize+6,y=14,g=4;for(const o of i){if(!o.valid)continue;const m=Math.cos(o.midA)>=0,A=p+o.ox+v*1.02*Math.cos(o.midA),c=u+o.oy+x*1.02*Math.sin(o.midA),H=u+o.oy+x*1.18*Math.sin(o.midA),ht=a.showPercent?`${o.data.name} ${(o.percent*100).toFixed(1)}%`:`${o.data.name}`,dt=!a.labelLineColor||a.labelLineColor==="auto"?a.glowColor||o.color:a.labelLineColor,ft={slice:o,text:ht,isRight:m,anchorX:A,anchorY:c,targetY:H,y:H,color:dt};(m?r:e).push(ft)}const w=o=>{if(!o.length)return;o.sort((c,H)=>c.targetY-H.targetY);const m=g+a.labelFontSize/2,A=_-g-a.labelFontSize/2;for(let c=0;c<o.length;c++)c===0?o[c].y=Math.max(m,o[c].targetY):o[c].y=Math.max(o[c].targetY,o[c-1].y+f);if(o[o.length-1].y>A){o[o.length-1].y=A;for(let c=o.length-2;c>=0;c--)o[c].y>o[c+1].y-f&&(o[c].y=o[c+1].y-f)}for(let c=0;c<o.length;c++)o[c].y<m&&(o[c].y=m)};w(e),w(r),t.lineWidth=a.labelLineWidth;const b=[...e,...r];for(const o of b){const m=t.measureText(o.text).width;let A;if(o.isRight){const c=Math.min(Math.max(o.anchorX+6,o.anchorX+Math.abs(o.targetY-o.y)*.2+6),C-g-m-y);A=c+y,t.strokeStyle=o.color,t.beginPath(),t.moveTo(o.anchorX,o.anchorY),t.lineTo(c,o.y),t.lineTo(A,o.y),t.stroke(),t.fillStyle=a.textColor,t.textAlign="left",t.fillText(o.text,A+2,o.y)}else{const c=Math.max(Math.min(o.anchorX-6,o.anchorX-Math.abs(o.targetY-o.y)*.2-6),g+m+y);A=c-y,t.strokeStyle=o.color,t.beginPath(),t.moveTo(o.anchorX,o.anchorY),t.lineTo(c,o.y),t.lineTo(A,o.y),t.stroke(),t.fillStyle=a.textColor,t.textAlign="right",t.fillText(o.text,A-2,o.y)}}}},tt=(t,l)=>{for(let n=0;n<M.length;n++){const s=M[n],i=(t-p)/v,d=(l-u)/x;if(i*i+d*d>1)continue;let e=Math.atan2((l-u)/x,(t-p)/v);for(;e<s.startA;)e+=Math.PI*2;for(;e>s.startA+Math.PI*2;)e-=Math.PI*2;if(e>=s.startA&&e<=s.endA)return n}return-1},et=t=>{const l=T.value,n=l.getBoundingClientRect(),s=n.width/(l.clientWidth||n.width)||1,i=n.height/(l.clientHeight||n.height)||1;return{mx:(t.clientX-n.left)/s,my:(t.clientY-n.top)/i}},rt=t=>{if(!T.value)return;const{mx:l,my:n}=et(t),s=tt(l,n);if(s!==B.value&&(B.value=s,M.forEach((i,d)=>i.hover=d===s),Z()),s>=0){const i=M[s];D.value=!0,I.value=i.data,q.value=i.percent;const d=R.value?.clientWidth||0,e=R.value?.clientHeight||0,r=Math.min(l+12,d-140),f=Math.min(n+12,e-60);U.value=Math.max(0,r),J.value=Math.max(0,f)}else D.value=!1,I.value=null},ct=()=>{B.value!==-1&&(B.value=-1,M.forEach(t=>t.hover=!1),Z()),D.value=!1,I.value=null},ot=t=>{if(!T.value)return;const{mx:l,my:n}=et(t),s=tt(l,n);s>=0&&at("slice-click",M[s].data,s)};return h.watch(()=>P.data,()=>{Object.assign(a,V,P.config),N=P.animation,F()},{deep:!0}),h.watch(()=>P.config,()=>{Object.assign(a,V,P.config),F()},{deep:!0}),h.onMounted(()=>{F(),window.addEventListener("resize",F),T.value?.addEventListener("click",ot)}),h.onUnmounted(()=>{window.removeEventListener("resize",F),T.value?.removeEventListener("click",ot),Y&&cancelAnimationFrame(Y),k&&cancelAnimationFrame(k)}),(t,l)=>(h.openBlock(),h.createElementBlock("div",{class:"g-pie3d-container",ref_key:"containerRef",ref:R},[h.createElementVNode("canvas",{ref_key:"canvasRef",ref:T,onMousemove:rt,onMouseleave:ct},null,544),D.value?(h.openBlock(),h.createElementBlock("div",{key:0,class:"g-pie3d-tooltip",style:h.normalizeStyle({left:`${U.value}px`,top:`${J.value}px`})},[h.renderSlot(t.$slots,"tooltip",{data:I.value,percent:q.value},()=>[h.createElementVNode("div",pt,[h.createElementVNode("p",vt,h.toDisplayString(I.value?.name),1),h.createElementVNode("p",gt,h.toDisplayString(I.value?.value)+" ("+h.toDisplayString((q.value*100).toFixed(1))+"%) ",1)])],!0)],4)):h.createCommentVNode("",!0)],512))}}),W=ut._export_sfc(mt,[["__scopeId","data-v-16239a65"]]);W.install=z=>{z.component(W.name,W)};exports.GPie3D=W;exports.default=W;
|
package/lib/GPie3D/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { _ as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as mt, ref as T, watch as lt, onMounted as xt, onUnmounted as Mt, createElementBlock as st, openBlock as it, createElementVNode as H, createCommentVNode as bt, normalizeStyle as At, renderSlot as Pt, toDisplayString as U } from "vue";
|
|
2
|
+
import { _ as wt } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
|
|
3
|
+
const St = { class: "g-pie3d-tooltip__default" }, Tt = { class: "g-pie3d-tooltip__name" }, Ct = { class: "g-pie3d-tooltip__value" }, _t = 260, kt = /* @__PURE__ */ mt({
|
|
4
4
|
__name: "index",
|
|
5
5
|
props: {
|
|
6
6
|
data: { default: () => [] },
|
|
@@ -8,8 +8,8 @@ const wt = { class: "g-pie3d-tooltip__default" }, St = { class: "g-pie3d-tooltip
|
|
|
8
8
|
animation: { type: Boolean, default: !0 }
|
|
9
9
|
},
|
|
10
10
|
emits: ["slice-click"],
|
|
11
|
-
setup(
|
|
12
|
-
const A =
|
|
11
|
+
setup(D, { emit: rt }) {
|
|
12
|
+
const A = D, ct = rt, O = {
|
|
13
13
|
alpha: 55,
|
|
14
14
|
depth: 26,
|
|
15
15
|
startAngle: 0,
|
|
@@ -25,251 +25,257 @@ const wt = { class: "g-pie3d-tooltip__default" }, St = { class: "g-pie3d-tooltip
|
|
|
25
25
|
glowColor: "",
|
|
26
26
|
labelLineColor: "auto",
|
|
27
27
|
labelLineWidth: 1
|
|
28
|
-
},
|
|
29
|
-
let L = null, C = 0, _ = 0, Y = 1,
|
|
30
|
-
const $ = T(-1),
|
|
31
|
-
x:
|
|
32
|
-
y:
|
|
33
|
-
}), j = (t,
|
|
34
|
-
x:
|
|
35
|
-
y:
|
|
28
|
+
}, a = { ...O, ...A.config }, R = T(null), S = T(null);
|
|
29
|
+
let L = null, C = 0, _ = 0, Y = 1, u = 0, f = 0, p = 0, m = 0, x = [], W = A.animation ? 0 : 1, X = null, q = A.animation, k = null, F = 0;
|
|
30
|
+
const $ = T(-1), z = T(!1), K = T(0), Q = T(0), I = T(null), N = T(0), Z = (t) => t * Math.PI / 180, V = (t, l = 0, n = 0) => ({
|
|
31
|
+
x: u + l + p * Math.cos(t),
|
|
32
|
+
y: f + n + m * Math.sin(t)
|
|
33
|
+
}), j = (t, l = 0, n = 0) => ({
|
|
34
|
+
x: u + l + p * Math.cos(t),
|
|
35
|
+
y: f + n + m * Math.sin(t) + a.depth
|
|
36
36
|
}), E = () => {
|
|
37
|
-
if (!
|
|
38
|
-
const t = R.value,
|
|
39
|
-
Y = window.devicePixelRatio || 1, C = t.clientWidth, _ = t.clientHeight,
|
|
40
|
-
const
|
|
41
|
-
|
|
37
|
+
if (!S.value || !R.value) return;
|
|
38
|
+
const t = R.value, l = S.value;
|
|
39
|
+
Y = window.devicePixelRatio || 1, C = t.clientWidth, _ = t.clientHeight, l.width = C * Y, l.height = _ * Y, l.style.width = C + "px", l.style.height = _ + "px", L = l.getContext("2d"), L && L.setTransform(Y, 0, 0, Y, 0, 0), u = C / 2, f = _ / 2 - a.depth / 2;
|
|
40
|
+
const n = a.showLabel ? 60 : 10, s = Math.min(C, _ - a.depth - n) / 2 * a.radiusRatio * 1.6;
|
|
41
|
+
p = Math.max(20, s), m = p * Math.cos(Z(a.alpha)), ht(), q ? dt() : G();
|
|
42
42
|
}, ht = () => {
|
|
43
43
|
x = [];
|
|
44
|
-
const t = A.data.reduce((
|
|
44
|
+
const t = A.data.reduce((n, s) => n + (s.value || 0), 0);
|
|
45
45
|
if (t <= 0) return;
|
|
46
|
-
let
|
|
47
|
-
A.data.forEach((
|
|
48
|
-
const i =
|
|
46
|
+
let l = -Math.PI / 2 + Z(a.startAngle);
|
|
47
|
+
A.data.forEach((n, s) => {
|
|
48
|
+
const i = n.value / t, h = i * Math.PI * 2;
|
|
49
49
|
x.push({
|
|
50
|
-
data:
|
|
51
|
-
index:
|
|
52
|
-
color:
|
|
53
|
-
startA:
|
|
54
|
-
endA:
|
|
55
|
-
midA:
|
|
50
|
+
data: n,
|
|
51
|
+
index: s,
|
|
52
|
+
color: n.color || a.colors[s % a.colors.length],
|
|
53
|
+
startA: l,
|
|
54
|
+
endA: l + h,
|
|
55
|
+
midA: l + h / 2,
|
|
56
56
|
percent: i,
|
|
57
57
|
hover: !1,
|
|
58
58
|
hoverProgress: 0
|
|
59
|
-
}),
|
|
59
|
+
}), l += h;
|
|
60
60
|
});
|
|
61
61
|
}, dt = () => {
|
|
62
62
|
W = 0;
|
|
63
|
-
const t = 800,
|
|
64
|
-
const i = Math.min(1, (
|
|
65
|
-
W = 1 - Math.pow(1 - i, 3), G(), i < 1 ? X = requestAnimationFrame(
|
|
63
|
+
const t = 800, l = performance.now(), n = (s) => {
|
|
64
|
+
const i = Math.min(1, (s - l) / t);
|
|
65
|
+
W = 1 - Math.pow(1 - i, 3), G(), i < 1 ? X = requestAnimationFrame(n) : (q = !1, X = null);
|
|
66
66
|
};
|
|
67
|
-
X = requestAnimationFrame(
|
|
68
|
-
},
|
|
69
|
-
const
|
|
67
|
+
X = requestAnimationFrame(n);
|
|
68
|
+
}, ft = (t) => 1 - Math.pow(1 - t, 3), tt = (t) => {
|
|
69
|
+
const l = F === 0 ? 16 : t - F;
|
|
70
70
|
F = t;
|
|
71
|
-
const
|
|
72
|
-
let
|
|
71
|
+
const n = l / _t;
|
|
72
|
+
let s = !1;
|
|
73
73
|
for (const i of x) {
|
|
74
|
-
const
|
|
75
|
-
if (i.hoverProgress ===
|
|
76
|
-
const e =
|
|
77
|
-
i.hoverProgress += e *
|
|
74
|
+
const h = i.hover ? 1 : 0;
|
|
75
|
+
if (i.hoverProgress === h) continue;
|
|
76
|
+
const e = h > i.hoverProgress ? 1 : -1;
|
|
77
|
+
i.hoverProgress += e * n, (e > 0 && i.hoverProgress >= h || e < 0 && i.hoverProgress <= h) && (i.hoverProgress = h), i.hoverProgress !== h && (s = !0);
|
|
78
78
|
}
|
|
79
|
-
G(),
|
|
80
|
-
},
|
|
81
|
-
k == null && (F = 0, k = requestAnimationFrame(
|
|
82
|
-
},
|
|
83
|
-
let
|
|
84
|
-
|
|
85
|
-
const
|
|
86
|
-
return `rgba(${
|
|
79
|
+
G(), s ? k = requestAnimationFrame(tt) : (k = null, F = 0);
|
|
80
|
+
}, et = () => {
|
|
81
|
+
k == null && (F = 0, k = requestAnimationFrame(tt));
|
|
82
|
+
}, w = (t, l) => {
|
|
83
|
+
let n = t.replace("#", "");
|
|
84
|
+
n.length === 3 && (n = n.split("").map((e) => e + e).join(""));
|
|
85
|
+
const s = parseInt(n.slice(0, 2), 16), i = parseInt(n.slice(2, 4), 16), h = parseInt(n.slice(4, 6), 16);
|
|
86
|
+
return `rgba(${s},${i},${h},${l})`;
|
|
87
87
|
}, G = () => {
|
|
88
88
|
if (!L) return;
|
|
89
89
|
const t = L;
|
|
90
90
|
if (t.clearRect(0, 0, C, _), !x.length) return;
|
|
91
|
-
const
|
|
92
|
-
const
|
|
93
|
-
return { ...e, startA:
|
|
91
|
+
const l = x[0]?.startA ?? 0, n = Math.PI * 2 * W, s = l + n, i = x.map((e) => {
|
|
92
|
+
const r = e.startA, d = Math.min(e.endA, s), g = d > r, v = ft(Math.max(0, Math.min(1, e.hoverProgress))), P = Math.cos(e.midA) * a.hoverDistance * v, M = Math.sin(e.midA) * a.hoverDistance * v;
|
|
93
|
+
return { ...e, startA: r, endA: d, valid: g, ox: P, oy: M, hp: v };
|
|
94
94
|
});
|
|
95
|
-
if (
|
|
95
|
+
if (a.showAura) {
|
|
96
96
|
const e = t.createRadialGradient(
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
97
|
+
u,
|
|
98
|
+
f + a.depth,
|
|
99
|
+
p * 0.1,
|
|
100
|
+
u,
|
|
101
|
+
f + a.depth,
|
|
102
|
+
p * 1.5
|
|
103
103
|
);
|
|
104
|
-
e.addColorStop(0, "rgba(6,182,212,0.15)"), e.addColorStop(0.4, "rgba(59,130,246,0.08)"), e.addColorStop(0.8, "rgba(139,92,246,0.03)"), e.addColorStop(1, "rgba(0,0,0,0)"), t.beginPath(), t.ellipse(
|
|
105
|
-
for (let
|
|
106
|
-
const
|
|
107
|
-
t.beginPath(), t.ellipse(
|
|
104
|
+
e.addColorStop(0, "rgba(6,182,212,0.15)"), e.addColorStop(0.4, "rgba(59,130,246,0.08)"), e.addColorStop(0.8, "rgba(139,92,246,0.03)"), e.addColorStop(1, "rgba(0,0,0,0)"), t.beginPath(), t.ellipse(u, f + a.depth, p * 1.5, m * 0.9, 0, 0, Math.PI * 2), t.fillStyle = e, t.fill(), t.strokeStyle = "rgba(56,189,248,0.08)", t.lineWidth = 1;
|
|
105
|
+
for (let r = 3; r >= 1; r--) {
|
|
106
|
+
const d = p * (0.3 + r * 0.25);
|
|
107
|
+
t.beginPath(), t.ellipse(u, f + a.depth, d, d * (m / p), 0, 0, Math.PI * 2), t.stroke();
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
const
|
|
110
|
+
const h = Math.PI / 120;
|
|
111
111
|
for (const e of i) {
|
|
112
112
|
if (!e.valid) continue;
|
|
113
|
-
let
|
|
114
|
-
const
|
|
115
|
-
for (;
|
|
116
|
-
const
|
|
117
|
-
if (Math.sin(
|
|
118
|
-
const P = V(
|
|
119
|
-
t.fillStyle =
|
|
113
|
+
let r = e.startA;
|
|
114
|
+
const d = a.glowColor || e.color;
|
|
115
|
+
for (; r < e.endA; ) {
|
|
116
|
+
const g = Math.min(r + h, e.endA), v = (r + g) / 2;
|
|
117
|
+
if (Math.sin(v) > 0) {
|
|
118
|
+
const P = V(r, e.ox, e.oy), M = V(g, e.ox, e.oy), o = j(g, e.ox, e.oy), y = j(r, e.ox, e.oy);
|
|
119
|
+
t.fillStyle = w(d, a.opacity * 0.4), t.beginPath(), t.moveTo(P.x, P.y), t.lineTo(M.x, M.y), t.lineTo(o.x, o.y), t.lineTo(y.x, y.y), t.closePath(), t.fill(), t.strokeStyle = w(d, 0.7), t.lineWidth = 0.8, t.beginPath(), t.moveTo(y.x, y.y), t.lineTo(o.x, o.y), t.stroke();
|
|
120
120
|
}
|
|
121
|
-
|
|
121
|
+
r = g;
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
for (const e of i) {
|
|
125
125
|
if (!e.valid) continue;
|
|
126
|
-
const
|
|
127
|
-
Math.sin(e.startA) > 1e-3 &&
|
|
128
|
-
const
|
|
129
|
-
for (const
|
|
130
|
-
const
|
|
131
|
-
t.fillStyle =
|
|
126
|
+
const r = [];
|
|
127
|
+
Math.sin(e.startA) > 1e-3 && r.push({ a: e.startA }), Math.sin(e.endA) > 1e-3 && r.push({ a: e.endA });
|
|
128
|
+
const d = a.glowColor || e.color;
|
|
129
|
+
for (const g of r) {
|
|
130
|
+
const v = { x: u + e.ox, y: f + e.oy }, P = { x: v.x, y: v.y + a.depth }, M = V(g.a, e.ox, e.oy), o = j(g.a, e.ox, e.oy);
|
|
131
|
+
t.fillStyle = w(d, a.opacity * 0.5), t.beginPath(), t.moveTo(v.x, v.y), t.lineTo(M.x, M.y), t.lineTo(o.x, o.y), t.lineTo(P.x, P.y), t.closePath(), t.fill(), t.strokeStyle = w(d, 0.8), t.lineWidth = 0.8, t.beginPath(), t.moveTo(M.x, M.y), t.lineTo(o.x, o.y), t.stroke();
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
for (const e of i) {
|
|
135
135
|
if (!e.valid) continue;
|
|
136
|
-
const
|
|
137
|
-
e.hp > 0.01 && (t.save(), t.shadowColor =
|
|
138
|
-
const
|
|
139
|
-
|
|
140
|
-
|
|
136
|
+
const r = a.glowColor || e.color;
|
|
137
|
+
e.hp > 0.01 && (t.save(), t.shadowColor = r, t.shadowBlur = 12 * e.hp, t.beginPath(), t.moveTo(u + e.ox, f + e.oy), t.ellipse(u + e.ox, f + e.oy, p, m, 0, e.startA, e.endA), t.closePath(), t.fillStyle = w(r, 0.08 * e.hp), t.fill(), t.restore()), t.beginPath(), t.moveTo(u + e.ox, f + e.oy), t.ellipse(u + e.ox, f + e.oy, p, m, 0, e.startA, e.endA), t.closePath();
|
|
138
|
+
const d = t.createRadialGradient(
|
|
139
|
+
u + e.ox - p * 0.2,
|
|
140
|
+
f + e.oy - m * 0.2,
|
|
141
141
|
0,
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
142
|
+
u + e.ox,
|
|
143
|
+
f + e.oy,
|
|
144
|
+
p * 1.05
|
|
145
145
|
);
|
|
146
|
-
|
|
146
|
+
d.addColorStop(0, w(r, a.opacity * 0.95)), d.addColorStop(0.6, w(r, a.opacity * 0.8)), d.addColorStop(1, w(r, a.opacity * 0.6)), t.fillStyle = d, t.fill(), t.strokeStyle = w(r, 0.95), t.lineWidth = 0.8 + 0.6 * e.hp, t.stroke();
|
|
147
147
|
}
|
|
148
|
-
if (
|
|
149
|
-
t.font = `${
|
|
150
|
-
const e = [],
|
|
148
|
+
if (a.showLabel && W >= 0.999) {
|
|
149
|
+
t.font = `${a.labelFontSize}px Arial, sans-serif`, t.textBaseline = "middle";
|
|
150
|
+
const e = [], r = [], d = a.labelFontSize + 6, g = 14, v = 4;
|
|
151
151
|
for (const o of i) {
|
|
152
152
|
if (!o.valid) continue;
|
|
153
|
-
const y = Math.cos(o.midA) >= 0, b =
|
|
153
|
+
const y = Math.cos(o.midA) >= 0, b = u + o.ox + p * 1.02 * Math.cos(o.midA), c = f + o.oy + m * 1.02 * Math.sin(o.midA), B = f + o.oy + m * 1.18 * Math.sin(o.midA), vt = a.showPercent ? `${o.data.name} ${(o.percent * 100).toFixed(1)}%` : `${o.data.name}`, gt = !a.labelLineColor || a.labelLineColor === "auto" ? a.glowColor || o.color : a.labelLineColor, yt = {
|
|
154
154
|
slice: o,
|
|
155
|
-
text:
|
|
155
|
+
text: vt,
|
|
156
156
|
isRight: y,
|
|
157
157
|
anchorX: b,
|
|
158
|
-
anchorY:
|
|
159
|
-
targetY:
|
|
160
|
-
y:
|
|
161
|
-
color:
|
|
158
|
+
anchorY: c,
|
|
159
|
+
targetY: B,
|
|
160
|
+
y: B,
|
|
161
|
+
color: gt
|
|
162
162
|
};
|
|
163
|
-
(y ?
|
|
163
|
+
(y ? r : e).push(yt);
|
|
164
164
|
}
|
|
165
165
|
const P = (o) => {
|
|
166
166
|
if (!o.length) return;
|
|
167
|
-
o.sort((
|
|
168
|
-
const y =
|
|
169
|
-
for (let
|
|
170
|
-
|
|
167
|
+
o.sort((c, B) => c.targetY - B.targetY);
|
|
168
|
+
const y = v + a.labelFontSize / 2, b = _ - v - a.labelFontSize / 2;
|
|
169
|
+
for (let c = 0; c < o.length; c++)
|
|
170
|
+
c === 0 ? o[c].y = Math.max(y, o[c].targetY) : o[c].y = Math.max(o[c].targetY, o[c - 1].y + d);
|
|
171
171
|
if (o[o.length - 1].y > b) {
|
|
172
172
|
o[o.length - 1].y = b;
|
|
173
|
-
for (let
|
|
174
|
-
o[
|
|
173
|
+
for (let c = o.length - 2; c >= 0; c--)
|
|
174
|
+
o[c].y > o[c + 1].y - d && (o[c].y = o[c + 1].y - d);
|
|
175
175
|
}
|
|
176
|
-
for (let
|
|
177
|
-
o[
|
|
176
|
+
for (let c = 0; c < o.length; c++)
|
|
177
|
+
o[c].y < y && (o[c].y = y);
|
|
178
178
|
};
|
|
179
|
-
P(e), P(
|
|
180
|
-
const M = [...e, ...
|
|
179
|
+
P(e), P(r), t.lineWidth = a.labelLineWidth;
|
|
180
|
+
const M = [...e, ...r];
|
|
181
181
|
for (const o of M) {
|
|
182
182
|
const y = t.measureText(o.text).width;
|
|
183
183
|
let b;
|
|
184
184
|
if (o.isRight) {
|
|
185
|
-
const
|
|
185
|
+
const c = Math.min(
|
|
186
186
|
Math.max(o.anchorX + 6, o.anchorX + Math.abs(o.targetY - o.y) * 0.2 + 6),
|
|
187
|
-
C -
|
|
187
|
+
C - v - y - g
|
|
188
188
|
);
|
|
189
|
-
b =
|
|
189
|
+
b = c + g, t.strokeStyle = o.color, t.beginPath(), t.moveTo(o.anchorX, o.anchorY), t.lineTo(c, o.y), t.lineTo(b, o.y), t.stroke(), t.fillStyle = a.textColor, t.textAlign = "left", t.fillText(o.text, b + 2, o.y);
|
|
190
190
|
} else {
|
|
191
|
-
const
|
|
191
|
+
const c = Math.max(
|
|
192
192
|
Math.min(o.anchorX - 6, o.anchorX - Math.abs(o.targetY - o.y) * 0.2 - 6),
|
|
193
|
-
|
|
193
|
+
v + y + g
|
|
194
194
|
);
|
|
195
|
-
b =
|
|
195
|
+
b = c - g, t.strokeStyle = o.color, t.beginPath(), t.moveTo(o.anchorX, o.anchorY), t.lineTo(c, o.y), t.lineTo(b, o.y), t.stroke(), t.fillStyle = a.textColor, t.textAlign = "right", t.fillText(o.text, b - 2, o.y);
|
|
196
196
|
}
|
|
197
197
|
}
|
|
198
198
|
}
|
|
199
|
-
},
|
|
200
|
-
for (let
|
|
201
|
-
const
|
|
202
|
-
if (
|
|
203
|
-
let
|
|
204
|
-
for (;
|
|
205
|
-
for (;
|
|
206
|
-
if (
|
|
199
|
+
}, ot = (t, l) => {
|
|
200
|
+
for (let n = 0; n < x.length; n++) {
|
|
201
|
+
const s = x[n], i = (t - u) / p, h = (l - f) / m;
|
|
202
|
+
if (i * i + h * h > 1) continue;
|
|
203
|
+
let e = Math.atan2((l - f) / m, (t - u) / p);
|
|
204
|
+
for (; e < s.startA; ) e += Math.PI * 2;
|
|
205
|
+
for (; e > s.startA + Math.PI * 2; ) e -= Math.PI * 2;
|
|
206
|
+
if (e >= s.startA && e <= s.endA) return n;
|
|
207
207
|
}
|
|
208
208
|
return -1;
|
|
209
|
-
},
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
209
|
+
}, nt = (t) => {
|
|
210
|
+
const l = S.value, n = l.getBoundingClientRect(), s = n.width / (l.clientWidth || n.width) || 1, i = n.height / (l.clientHeight || n.height) || 1;
|
|
211
|
+
return {
|
|
212
|
+
mx: (t.clientX - n.left) / s,
|
|
213
|
+
my: (t.clientY - n.top) / i
|
|
214
|
+
};
|
|
215
|
+
}, ut = (t) => {
|
|
216
|
+
if (!S.value) return;
|
|
217
|
+
const { mx: l, my: n } = nt(t), s = ot(l, n);
|
|
218
|
+
if (s !== $.value && ($.value = s, x.forEach((i, h) => i.hover = h === s), et()), s >= 0) {
|
|
219
|
+
const i = x[s];
|
|
220
|
+
z.value = !0, I.value = i.data, N.value = i.percent;
|
|
221
|
+
const h = R.value?.clientWidth || 0, e = R.value?.clientHeight || 0, r = Math.min(l + 12, h - 140), d = Math.min(n + 12, e - 60);
|
|
222
|
+
K.value = Math.max(0, r), Q.value = Math.max(0, d);
|
|
217
223
|
} else
|
|
218
|
-
|
|
219
|
-
},
|
|
220
|
-
$.value !== -1 && ($.value = -1, x.forEach((t) => t.hover = !1),
|
|
224
|
+
z.value = !1, I.value = null;
|
|
225
|
+
}, pt = () => {
|
|
226
|
+
$.value !== -1 && ($.value = -1, x.forEach((t) => t.hover = !1), et()), z.value = !1, I.value = null;
|
|
221
227
|
}, at = (t) => {
|
|
222
|
-
if (!
|
|
223
|
-
const
|
|
224
|
-
|
|
228
|
+
if (!S.value) return;
|
|
229
|
+
const { mx: l, my: n } = nt(t), s = ot(l, n);
|
|
230
|
+
s >= 0 && ct("slice-click", x[s].data, s);
|
|
225
231
|
};
|
|
226
232
|
return lt(
|
|
227
233
|
() => A.data,
|
|
228
234
|
() => {
|
|
229
|
-
Object.assign(
|
|
235
|
+
Object.assign(a, O, A.config), q = A.animation, E();
|
|
230
236
|
},
|
|
231
237
|
{ deep: !0 }
|
|
232
238
|
), lt(
|
|
233
239
|
() => A.config,
|
|
234
240
|
() => {
|
|
235
|
-
Object.assign(
|
|
241
|
+
Object.assign(a, O, A.config), E();
|
|
236
242
|
},
|
|
237
243
|
{ deep: !0 }
|
|
238
|
-
),
|
|
239
|
-
E(), window.addEventListener("resize", E),
|
|
240
|
-
}),
|
|
241
|
-
window.removeEventListener("resize", E),
|
|
242
|
-
}), (t,
|
|
244
|
+
), xt(() => {
|
|
245
|
+
E(), window.addEventListener("resize", E), S.value?.addEventListener("click", at);
|
|
246
|
+
}), Mt(() => {
|
|
247
|
+
window.removeEventListener("resize", E), S.value?.removeEventListener("click", at), X && cancelAnimationFrame(X), k && cancelAnimationFrame(k);
|
|
248
|
+
}), (t, l) => (it(), st("div", {
|
|
243
249
|
class: "g-pie3d-container",
|
|
244
250
|
ref_key: "containerRef",
|
|
245
251
|
ref: R
|
|
246
252
|
}, [
|
|
247
|
-
|
|
253
|
+
H("canvas", {
|
|
248
254
|
ref_key: "canvasRef",
|
|
249
|
-
ref:
|
|
250
|
-
onMousemove:
|
|
251
|
-
onMouseleave:
|
|
255
|
+
ref: S,
|
|
256
|
+
onMousemove: ut,
|
|
257
|
+
onMouseleave: pt
|
|
252
258
|
}, null, 544),
|
|
253
|
-
|
|
259
|
+
z.value ? (it(), st("div", {
|
|
254
260
|
key: 0,
|
|
255
261
|
class: "g-pie3d-tooltip",
|
|
256
|
-
style:
|
|
262
|
+
style: At({ left: `${K.value}px`, top: `${Q.value}px` })
|
|
257
263
|
}, [
|
|
258
|
-
|
|
264
|
+
Pt(t.$slots, "tooltip", {
|
|
259
265
|
data: I.value,
|
|
260
266
|
percent: N.value
|
|
261
267
|
}, () => [
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
268
|
+
H("div", St, [
|
|
269
|
+
H("p", Tt, U(I.value?.name), 1),
|
|
270
|
+
H("p", Ct, U(I.value?.value) + " (" + U((N.value * 100).toFixed(1)) + "%) ", 1)
|
|
265
271
|
])
|
|
266
272
|
], !0)
|
|
267
|
-
], 4)) :
|
|
273
|
+
], 4)) : bt("", !0)
|
|
268
274
|
], 512));
|
|
269
275
|
}
|
|
270
|
-
}), J = /* @__PURE__ */
|
|
271
|
-
J.install = (
|
|
272
|
-
|
|
276
|
+
}), J = /* @__PURE__ */ wt(kt, [["__scopeId", "data-v-16239a65"]]);
|
|
277
|
+
J.install = (D) => {
|
|
278
|
+
D.component(J.name, J);
|
|
273
279
|
};
|
|
274
280
|
export {
|
|
275
281
|
J as GPie3D,
|
package/lib/GPie3D/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.g-pie3d-container[data-v-
|
|
1
|
+
.g-pie3d-container[data-v-16239a65]{position:relative;width:100%;height:100%;overflow:hidden}canvas[data-v-16239a65]{display:block;width:100%;height:100%}.g-pie3d-tooltip[data-v-16239a65]{position:absolute;pointer-events:none;z-index:10;background:#0a121ed9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#e2e8f0;padding:8px 12px;border-radius:4px;font-size:12px;min-width:100px;box-shadow:0 4px 20px #22d3ee40;border:1px solid rgba(34,211,238,.5)}.g-pie3d-tooltip__default p[data-v-16239a65]{margin:0;line-height:1.5}.g-pie3d-tooltip__name[data-v-16239a65]{font-weight:600}
|