vue-data-ui-hq/dist/vue-ui-spark-trend-WUW6R3PI.cjs

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=require("./index-ZfICPrrM.cjs"),T=require("./useNestedProp-C14rfl0j.cjs"),w=require("./BaseIcon-DO69J5Rk.cjs"),A=require("./vue-ui-skeleton-Bvmpr51u.cjs"),F=require("./PackageVersion-D3dK8oA3.cjs"),q=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),O=["id"],D=["xmlns","viewBox"],P=["width","height"],G=["id"],U=["stop-color"],W=["stop-color"],Z={key:1},H=["d","fill"],R=["d","fill"],X=["d","stroke","stroke-width","stroke-linecap","stroke-linejoin"],J=["d","stroke","stroke-width","stroke-linecap","stroke-linejoin"],K=["height","width","x"],Q={style:{width:"100%"}},Y=["x","y","fill","font-size","font-weight"],ee=["stroke","cx","cy","fill"],te=["x","y","font-size","fill","font-weight"],ne={key:2,ref:"source",dir:"auto"},re={__name:"vue-ui-spark-trend",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}}},setup(E){const{vue_ui_spark_trend:$}=r.useConfig(),u=E,S=e.computed(()=>!!u.dataset&&u.dataset.length),y=e.ref(r.createUid()),t=e.computed({get:()=>x(),set:n=>n});function x(){const n=T.useNestedProp({userConfig:u.config,defaultConfig:$});return n.theme?{...T.useNestedProp({userConfig:r.themes.vue_ui_spark_trend[n.theme]||u.config,defaultConfig:n})}:n}const c=e.computed(()=>r.largestTriangleThreeBucketsArray({data:u.dataset,threshold:t.value.downsample.threshold}));e.watch(()=>u.config,n=>{t.value=x(),C()},{deep:!0}),e.watch(()=>u.dataset,n=>{h.value=r.largestTriangleThreeBucketsArray({data:u.dataset,threshold:t.value.downsample.threshold}).map(a=>[void 0,1/0,-1/0,null,NaN].includes(a)?null:a)},{deep:!0});function v(n){return n.map(a=>r.checkNaN(a))}const h=e.ref(r.largestTriangleThreeBucketsArray({data:u.dataset,threshold:t.value.downsample.threshold}).map(n=>t.value.style.animation.show||[void 0,1/0,-1/0,null,NaN].includes(n)?null:n)),p=e.ref(!1),_=e.ref(null);e.onMounted(()=>{C();let a=1e3/t.value.style.animation.animationFrames,i=performance.now();if(t.value.style.animation.show&&t.value.style.animation.animationFrames&&u.dataset.length>1){let N=function(){p.value=!0;let L=performance.now(),V=L-i;V>a?(i=L-V%a,f<c.value.length?(h.value.push(c.value[f]),f+=1,_.value=requestAnimationFrame(N)):(cancelAnimationFrame(_.value),h.value=v(c.value),p.value=!1)):_.value=requestAnimationFrame(N)};h.value=[];let f=0;N()}});function C(){r.objectIsEmpty(u.dataset)&&r.error({componentName:"VueUiSparkTrend",type:"dataset"})}const o=e.ref({height:80,width:300}),d=e.computed(()=>({top:t.value.style.padding.top,left:t.value.style.padding.left,right:o.value.width-t.value.style.padding.right,bottom:o.value.height-t.value.style.padding.bottom,height:o.value.height-(t.value.style.padding.top+t.value.style.padding.bottom)-(t.value.style.dataLabel.show?t.value.style.dataLabel.fontSize:0),width:o.value.width-(t.value.style.padding.left+t.value.style.padding.right)})),b=e.computed(()=>{const n=v(c.value);return{max:Math.max(...n.map(a=>r.checkNaN(a))),min:Math.min(...n.map(a=>r.checkNaN(a)))}}),m=e.computed(()=>{const n=b.value.min>=0?0:b.value.min;return Math.abs(n)}),z=e.computed(()=>b.value.max+m.value);function B(n){return n/z.value}const M=e.computed(()=>c.value.length),l=e.computed(()=>h.value.map((n,a)=>{const i=isNaN(n)||[void 0,null,"NaN",NaN,1/0,-1/0].includes(n)?0:n||0;return{value:r.checkNaN(n),absoluteValue:r.checkNaN(i),plotValue:r.checkNaN(i+m.value),toMax:B(i+m.value),x:d.value.left+r.checkNaN(a*(d.value.width/(M.value-1)))-t.value.style.padding.right,y:d.value.bottom-r.checkNaN(d.value.height*B(i+m.value))}})),k=e.computed(()=>{const n=v(c.value);return t.value.style.trendLabel.trendType==="global"?r.calcTrend(n):t.value.style.trendLabel.trendType==="n-1"&&n.length>1?(n.at(-1)/n.at(-2)-1)*100:t.value.style.trendLabel.trendType==="lastToFirst"?(n.at(-1)/n[0]-1)*100:0}),g=e.computed(()=>p.value||k.value===0?"neutral":k.value>0?"positive":"negative"),s=e.computed(()=>t.value.style.arrow.colors[g.value]),I=e.computed(()=>{const n={x:l.value[0].x,y:o.value.height-6},a={x:l.value[l.value.length-1].x,y:o.value.height-6},i=[];return l.value.forEach(f=>{i.push(`${f.x},${f.y} `)}),[n.x,n.y,...i,a.x,a.y].toString()}),j=e.computed(()=>{let n=[];return l.value.forEach(a=>{n.push(`${a.x},${a.y} `)}),`M ${n.toString()}`});return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:"vue-ui-spark-trend",id:e.unref(y),style:e.normalizeStyle(`width:100%;font-family:${e.unref(t).style.fontFamily};background:${e.unref(t).style.backgroundColor}`)},[e.unref(S)?(e.openBlock(),e.createElementBlock("svg",{key:1,xmlns:e.unref(r.XMLNS),viewBox:`0 0 ${e.unref(o).width} ${e.unref(o).height}`,style:"width:100%;background:transparent;overflow:visible"},[e.createVNode(F._sfc_main),n.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:e.unref(o).width<=0?10:e.unref(o).width,height:e.unref(o).height<=0?10:e.unref(o).height,style:{pointerEvents:"none"}},[e.renderSlot(n.$slots,"chart-background",{},void 0,!0)],8,P)):e.createCommentVNode("",!0),e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{x1:"0%",y1:"0%",x2:"0%",y2:"100%",id:`pill_gradient_${e.unref(y)}`},[e.createElementVNode("stop",{offset:"0%","stop-color":e.unref(r.setOpacity)(e.unref(t).style.line.useColorTrend?e.unref(s):e.unref(t).style.line.stroke,e.unref(t).style.area.opacity)},null,8,U),e.createElementVNode("stop",{offset:"100%","stop-color":e.unref(t).style.backgroundColor},null,8,W)],8,G)]),e.unref(t).style.area.show&&e.unref(l)[0]?(e.openBlock(),e.createElementBlock("g",Z,[e.unref(t).style.line.smooth?(e.openBlock(),e.createElementBlock("path",{key:0,d:`M ${e.unref(l)[0].x},${e.unref(d).bottom} ${e.unref(r.createSmoothPath)(e.unref(l))} L ${e.unref(l).at(-1).x},${e.unref(d).bottom} Z`,fill:e.unref(t).style.area.useGradient?`url(#pill_gradient_${e.unref(y)})`:e.unref(r.setOpacity)(e.unref(t).style.line.useColorTrend?e.unref(s):e.unref(t).style.line.stroke,e.unref(t).style.area.opacity),stroke:"none"},null,8,H)):(e.openBlock(),e.createElementBlock("path",{key:1,d:`M${e.unref(I)}Z`,fill:e.unref(t).style.area.useGradient?`url(#pill_gradient_${e.unref(y)})`:e.unref(r.setOpacity)(e.unref(t).style.line.useColorTrend?e.unref(s):e.unref(t).style.line.stroke,e.unref(t).style.area.opacity),stroke:"none"},null,8,R))])):e.createCommentVNode("",!0),e.unref(t).style.line.smooth&&e.unref(l).length?(e.openBlock(),e.createElementBlock("path",{key:2,d:`M ${e.unref(r.createSmoothPath)(e.unref(l))}`,stroke:e.unref(t).style.line.useColorTrend?e.unref(s):e.unref(t).style.line.stroke,fill:"none","stroke-width":e.unref(t).style.line.strokeWidth,"stroke-linecap":e.unref(t).style.line.strokeLinecap,"stroke-linejoin":e.unref(t).style.line.strokeLinejoin},null,8,X)):e.createCommentVNode("",!0),!e.unref(t).style.line.smooth&&e.unref(l).length?(e.openBlock(),e.createElementBlock("path",{key:3,d:e.unref(j),stroke:e.unref(t).style.line.useColorTrend?e.unref(s):e.unref(t).style.line.stroke,fill:"none","stroke-width":e.unref(t).style.line.strokeWidth,"stroke-linecap":e.unref(t).style.line.strokeLinecap,"stroke-linejoin":e.unref(t).style.line.strokeLinejoin},null,8,J)):e.createCommentVNode("",!0),e.unref(p)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("foreignObject",{key:4,height:e.unref(o).height/2,width:e.unref(o).height/2,x:e.unref(o).height/5,y:8},[e.createElementVNode("div",Q,[e.unref(g)==="positive"?(e.openBlock(),e.createBlock(w.default,{key:0,stroke:e.unref(s),name:"arrowTop",size:e.unref(o).height/2},null,8,["stroke","size"])):e.createCommentVNode("",!0),e.unref(g)==="negative"?(e.openBlock(),e.createBlock(w.default,{key:1,stroke:e.unref(s),name:"arrowBottom",size:e.unref(o).height/2},null,8,["stroke","size"])):e.createCommentVNode("",!0),e.unref(g)==="neutral"?(e.openBlock(),e.createBlock(w.default,{key:2,stroke:e.unref(s),name:"arrowRight",size:e.unref(o).height/2},null,8,["stroke","size"])):e.createCommentVNode("",!0)])],8,K)),e.unref(p)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("text",{key:5,x:e.unref(o).height/2-e.unref(o).height/20,y:e.unref(d).bottom,"text-anchor":"middle",fill:e.unref(t).style.trendLabel.useColorTrend?e.unref(s):e.unref(t).style.trendLabel.color,"font-size":e.unref(t).style.trendLabel.fontSize,"font-weight":e.unref(t).style.trendLabel.bold?"bold":"normal"},e.toDisplayString(e.unref(r.dataLabel)({p:e.unref(k)>0?"+":"",v:e.unref(k),s:"%",r:e.unref(t).style.trendLabel.rounding})),9,Y)),e.unref(l).length&&e.unref(l).at(-1).x!==void 0?(e.openBlock(),e.createElementBlock("circle",{key:6,stroke:e.unref(t).style.backgroundColor,"stroke-width":2,cx:e.unref(l).at(-1).x,cy:e.unref(l).at(-1).y,r:4,fill:e.unref(s)},null,8,ee)):e.createCommentVNode("",!0),e.unref(l).length&&e.unref(l).at(-1).x!==void 0&&e.unref(t).style.dataLabel.show?(e.openBlock(),e.createElementBlock("text",{key:7,"text-anchor":"middle",x:e.unref(l).at(-1).x,y:e.unref(l).at(-1).y-e.unref(t).style.dataLabel.fontSize/1.5,"font-size":e.unref(t).style.dataLabel.fontSize,fill:e.unref(t).style.dataLabel.useColorTrend?e.unref(s):e.unref(t).style.dataLabel.color,"font-weight":e.unref(t).style.dataLabel.bold?"bold":"normal"},e.toDisplayString(e.unref(r.applyDataLabel)(e.unref(t).style.dataLabel.formatter,e.unref(l).at(-1).value,e.unref(r.dataLabel)({p:e.unref(t).style.dataLabel.prefix,v:e.unref(l).at(-1).value,s:e.unref(t).style.dataLabel.suffix,r:e.unref(t).style.dataLabel.rounding}),{datapoint:e.unref(l).at(-1)})),9,te)):e.createCommentVNode("",!0)],8,D)):(e.openBlock(),e.createBlock(A.default,{key:0,config:{type:"sparkline",style:{backgroundColor:e.unref(t).style.backgroundColor,sparkline:{color:"#CCCCCC"}}}},null,8,["config"])),n.$slots.source?(e.openBlock(),e.createElementBlock("div",ne,[e.renderSlot(n.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0)],12,O))}},le=q._export_sfc(re,[["__scopeId","data-v-3f4d1cdd"]]);exports.default=le;