@iwusong/datav-vue3
Version:
Vue3 large screen data display component library
8 lines (7 loc) • 2.03 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),y=require("lodash-es"),q=require("../../hooks/useResize.js"),v=require("../../utils/common.js"),M=require("../../utils/decoration.js"),N=require("../../utils/styled.js");require("../../utils/logger.js");const b=["#7acaec","#7acaec"],S=300,$=35,j=1,z=40,k=7,C=k/2,w=N.styled.div`
width: 100%;
height: 100%;
}
.__STYLED__ .svg-origin {
transform-origin: left top;
`("decoration-6");function A({width:h,height:t,rowPoints:o,rowCount:s}){const g=h/(o+1),c=t/(s+1),l=new Array(s).fill(0).map((a,n)=>new Array(o).fill(0).map((i,e)=>[g*(e+1),c*(n+1)])).reduce((a,n)=>[...a,...n],[]),d=new Array(s*o).fill(0).map(()=>Math.random()>.8?y.random(.7*t,t):y.random(.2*t,.5*t)),p=new Array(s*o).fill(0).map((a,n)=>d[n]*Math.random()),f=new Array(s*o).fill(0).map(()=>Math.random()+1.5);return{points:l,heights:d,minHeights:p,randoms:f}}const{points:D,heights:u,minHeights:m,randoms:_}=A({width:S,height:$,rowPoints:z,rowCount:j}),R=v.withInstall(r.defineComponent({name:"Decoration6",props:M.createColorProps(),setup(h,{expose:t}){const{autoBindRef:o,refreshLayoutSize:s,domSize:g}=q.useResize();return t({refreshLayoutSize:s}),()=>{const{width:c,height:l}=g,{color:d}=h,p=v.mergeColor(b,d),f={transform:`scale(${c/S},${l/$})`},a=()=>p[Math.random()>.5?0:1];return r.createVNode(w,{ref:o},{default:()=>[r.createVNode("svg",{class:"svg-origin",width:c,height:l,style:f},[D.map(([n,i],e)=>r.createVNode("rect",{key:`rect${e}`,fill:a(),x:n-C,y:i-u[e],width:k,height:u[e]},[r.createVNode("animate",{attributeName:"y",values:`${i-m[e]/2};${i-u[e]/2};${i-m[e]/2}`,dur:_[e],keyTimes:"0;0.5;1",calcMode:"spline",keySplines:"0.42,0,0.58,1;0.42,0,0.58,1",begin:"0s",repeatCount:"indefinite"},null),r.createVNode("animate",{attributeName:"height",values:`${m[e]};${u[e]};${m[e]}`,dur:_[e],keyTimes:"0;0.5;1",calcMode:"spline",keySplines:"0.42,0,0.58,1;0.42,0,0.58,1",begin:"0s",repeatCount:"indefinite"},null)]))])]})}}}));exports.Decoration6=R;