vue-data-ui-hq/dist/vue-ui-thermometer-DZFX18hJ.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"),s=require("./index-ZfICPrrM.cjs"),te=require("./Title-FbHK83tB.cjs"),U=require("./usePrinter-B-gh2f22.cjs"),re=require("./vue-ui-skeleton-Bvmpr51u.cjs"),Y=require("./useNestedProp-C14rfl0j.cjs"),oe=require("./PackageVersion-D3dK8oA3.cjs"),ne=require("./PenAndPaper-PL3bp4ud.cjs"),se=require("./useUserOptionState-BgepsfED.cjs"),le=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),ae=["id"],ue={key:1,ref:"noTitle",class:"vue-data-ui-no-title-space",style:"height:36px; width: 100%;background:transparent"},ie={key:2,style:"width:100%"},ce=["xmlns","viewBox"],de=["width","height"],he={id:"vueUiPill",clipPathUnits:"objectBoundingBox"},fe=["fill"],me=["id"],pe=["stop-color"],ye=["stop-color"],ge=["stop-color"],ke={"clip-path":"url(#vueUiPill)"},ve=["x","y","height","width"],be=["x","y","height","width","fill"],xe=["x1","x2","y1","y2","stroke-width","stroke"],Ce=["x1","x2","y1","y2","stroke-width","stroke"],we=["x1","x2","y1","y2","stroke-width","stroke"],_e=["x1","x2","y1","y2","stroke-width","stroke"],Ne=["x1","x2","y1","y2","stroke-width","stroke"],Be=["x1","x2","y1","y2","stroke-width","stroke"],Ve=["x1","x2","y1","y2","stroke-width","stroke"],Ee=["x1","x2","y1","y2","stroke-width","stroke"],Pe=["x","y","height","width"],$e=["y","x","fill","font-size","font-weight"],Fe={key:5,class:"vue-data-ui-watermark"},Oe={key:6,ref:"source",dir:"auto"},Se={__name:"vue-ui-thermometer",props:{dataset:{type:Object,default(){return{}}},config:{type:Object,default(){return{}}}},setup(m,{expose:z}){e.useCssVars(o=>({"0db7fa96":e.unref(R),d42e3e90:e.unref(D),"51b178b6":e.unref(j)}));const{vue_ui_thermometer:L}=s.useConfig(),l=m,k=e.computed(()=>!!l.dataset&&Object.keys(l.dataset).length);e.onMounted(()=>{V()});function V(){s.objectIsEmpty(l.dataset)?s.error({componentName:"VueUiThermometer",type:"dataset"}):s.getMissingDatasetAttributes({datasetObject:l.dataset,requiredAttributes:["value","from","to"]}).forEach(o=>{s.error({componentName:"VueUiThermometer",type:"datasetAttribute",property:o})})}const d=e.ref(s.createUid()),v=e.ref(null),E=e.ref(0),P=e.ref(0),t=e.computed({get:()=>O(),set:o=>o}),{userOptionsVisible:b,setUserOptionsVisibility:$,keepUserOptionState:F}=se.useUserOptionState({config:t.value});function O(){const o=Y.useNestedProp({userConfig:l.config,defaultConfig:L});return o.theme?{...Y.useNestedProp({userConfig:s.themes.vue_ui_thermometer[o.theme]||l.config,defaultConfig:o}),customPalette:s.themePalettes[o.theme]||s.palette}:o}e.watch(()=>l.config,o=>{t.value=O(),b.value=!t.value.showOnChartHover,V(),P.value+=1},{deep:!0});const{isPrinting:S,isImaging:I,generatePdf:q,generateImage:A}=U.usePrinter({elementId:`thermometer__${d.value}`,fileName:t.value.style.title.text||"vue-ui-thermometer"}),G=e.computed(()=>t.value.userOptions.show&&!t.value.style.title.text),p=e.computed(()=>s.convertCustomPalette(t.value.customPalette)),H=e.computed(()=>t.value.style.chart.thermometer.width),c=e.computed(()=>l.dataset.steps||10),i=e.ref({top:t.value.style.chart.padding.top,left:t.value.style.chart.padding.left,right:t.value.style.chart.padding.right,bottom:t.value.style.chart.padding.bottom});function y(o,a,r){const u=[],N=T(o),B=T(a);for(let f=0;f<r;f++){const K=x(N.red,B.red,f,r),Q=x(N.green,B.green,f,r),Z=x(N.blue,B.blue,f,r),ee=`#${C(K)}${C(Q)}${C(Z)}`;u.push(ee)}return u}function T(o){const a=o.slice(1);return{red:parseInt(a.slice(0,2),16),green:parseInt(a.slice(2,4),16),blue:parseInt(a.slice(4,6),16)}}function x(o,a,r,u){return Math.round(o+(a-o)*r/u)}function C(o){return o.toString(16).padStart(2,"0")}const n=e.computed(()=>{const o=H.value+i.value.left+i.value.right,a=t.value.style.chart.height;return{width:o,left:i.value.left,right:o-i.value.right,top:i.value.top,bottom:a-i.value.bottom,height:a}}),W=e.computed(()=>n.value),w=e.computed(()=>{const o=s.checkNaN(l.dataset.from)<0?Math.abs(s.checkNaN(l.dataset.from)):s.checkNaN(l.dataset.from),a=s.checkNaN(l.dataset.to)<0?Math.abs(s.checkNaN(l.dataset.to)):s.checkNaN(l.dataset.to);let r=0;return s.checkNaN(l.dataset.to)>0?r=o+a:o>a?r=o-a:r=a-o,(1-(Math.abs(s.checkNaN(l.dataset.from))+s.checkNaN(l.dataset.value))/r)*(n.value.height-i.value.top-i.value.bottom)}),j=e.computed(()=>`${w.value}px`),D=e.computed(()=>`${n.value.height-t.value.style.chart.padding.bottom-i.value.top}px`),R=e.computed(()=>`${t.value.style.chart.animation.speedMs}ms`),X=e.computed(()=>{if(l.dataset.colors){if(!l.dataset.colors.from)return y(p.value[0]||s.palette[0],s.convertColorToHex(l.dataset.colors.to),c.value||10);if(!l.dataset.colors.to)return y(s.convertColorToHex(l.dataset.colors.from),p.value[1]||s.palette[1],c.value||10)}else return y(p.value[1]||s.palette[1],p.value[0]||s.palette[0],c.value||10);return y(s.convertColorToHex(l.dataset.colors.from),s.convertColorToHex(l.dataset.colors.to),c.value||10)}),M=e.computed(()=>{const o=[];let a=0;const r=n.value.height-i.value.top-i.value.bottom;for(let u=0;u<r-1;u+=r/c.value)o.push({x:n.value.left,y:n.value.top+u,qYLess:n.value.top+u+r/c.value/4,halfY:n.value.top+u+r/c.value/2,qYMore:n.value.top+u+r/c.value/4*3,color:X.value[a],height:r/c.value}),a+=1;return o}),h=e.ref(!1);function J(o){h.value=o,E.value+=1}const g=e.ref(!1);function _(){g.value=!g.value}return z({generatePdf:q,generateImage:A,toggleAnnotator:_}),(o,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"thermoChart",ref:v,class:e.normalizeClass(`vue-ui-thermometer ${e.unref(h)?"vue-data-ui-wrapper-fullscreen":""}`),style:e.normalizeStyle(`width:100%;background:${e.unref(t).style.chart.backgroundColor};color:${e.unref(t).style.chart.color};font-family:${e.unref(t).style.fontFamily}`),id:`thermometer__${e.unref(d)}`,onMouseenter:a[0]||(a[0]=()=>e.unref($)(!0)),onMouseleave:a[1]||(a[1]=()=>e.unref($)(!1))},[e.unref(t).userOptions.buttons.annotator?(e.openBlock(),e.createBlock(ne.PenAndPaper,{key:0,parent:e.unref(v),backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color,active:e.unref(g),onClose:_},null,8,["parent","backgroundColor","color","active"])):e.createCommentVNode("",!0),e.unref(G)?(e.openBlock(),e.createElementBlock("div",ue,null,512)):e.createCommentVNode("",!0),e.unref(t).style.title.text?(e.openBlock(),e.createElementBlock("div",ie,[(e.openBlock(),e.createBlock(te._sfc_main,{key:`title_${e.unref(P)}`,config:{title:{cy:"thermometer-div-title",...e.unref(t).style.title},subtitle:{cy:"thermometer-div-subtitle",...e.unref(t).style.title.subtitle}}},null,8,["config"]))])):e.createCommentVNode("",!0),e.unref(t).userOptions.show&&e.unref(k)&&(e.unref(F)||e.unref(b))?(e.openBlock(),e.createBlock(U.UserOptions,{ref:"details",key:`user_options_${e.unref(E)}`,backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color,isImaging:e.unref(I),isPrinting:e.unref(S),uid:e.unref(d),hasPdf:e.unref(t).userOptions.buttons.pdf,hasImg:e.unref(t).userOptions.buttons.img,hasFullscreen:e.unref(t).userOptions.buttons.fullscreen,hasXls:!1,isFullscreen:e.unref(h),titles:{...e.unref(t).userOptions.buttonTitles},chartElement:e.unref(v),position:e.unref(t).userOptions.position,hasAnnotator:e.unref(t).userOptions.buttons.annotator,isAnnotation:e.unref(g),onToggleFullscreen:J,onGeneratePdf:e.unref(q),onGenerateImage:e.unref(A),onToggleAnnotator:_,style:e.normalizeStyle({visibility:e.unref(F)?e.unref(b)?"visible":"hidden":"visible"})},e.createSlots({_:2},[o.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,o.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"optionImg",{},void 0,!0)]),key:"1"}:void 0,o.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:r,isFullscreen:u})=>[e.renderSlot(o.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:r,isFullscreen:u})),void 0,!0)]),key:"2"}:void 0,o.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:r,isAnnotator:u})=>[e.renderSlot(o.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:r,isAnnotator:u})),void 0,!0)]),key:"3"}:void 0]),1032,["backgroundColor","color","isImaging","isPrinting","uid","hasPdf","hasImg","hasFullscreen","isFullscreen","titles","chartElement","position","hasAnnotator","isAnnotation","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),e.unref(k)?(e.openBlock(),e.createElementBlock("svg",{key:4,xmlns:e.unref(s.XMLNS),class:e.normalizeClass({"vue-data-ui-fullscreen--on":e.unref(h),"vue-data-ui-fulscreen--off":!e.unref(h)}),width:"100%",viewBox:`0 0 ${e.unref(n).width} ${e.unref(n).height}`,style:"background:transparent"},[e.createVNode(oe._sfc_main),o.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:e.unref(n).width,height:e.unref(n).height,style:{pointerEvents:"none"}},[e.renderSlot(o.$slots,"chart-background",{},void 0,!0)],8,de)):e.createCommentVNode("",!0),e.createElementVNode("defs",null,[e.createElementVNode("clipPath",he,[e.createElementVNode("rect",{x:"0",y:"0",width:"1",height:"1",rx:"0.5",ry:"0.07",fill:e.unref(t).style.chart.backgroundColor},null,8,fe)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(M),(r,u)=>(e.openBlock(),e.createElementBlock("linearGradient",{id:`vueUiThermometerGradient_${u}_${e.unref(d)}`,x1:"0%",y1:"0%",x2:"100%",y2:"0%"},[e.createElementVNode("stop",{offset:"0%","stop-color":r.color},null,8,pe),e.createElementVNode("stop",{offset:"50%","stop-color":e.unref(s.setOpacity)(r.color,100-e.unref(t).style.chart.graduations.gradient.intensity)},null,8,ye),e.createElementVNode("stop",{offset:"100%","stop-color":r.color},null,8,ge)],8,me))),256))]),e.createElementVNode("g",ke,[e.createElementVNode("rect",{x:e.unref(n).left,y:e.unref(n).top,height:e.unref(n).height-e.unref(i).top-e.unref(i).bottom,width:e.unref(n).width-e.unref(i).left-e.unref(i).right,fill:"#FFFFFF"},null,8,ve),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(M),(r,u)=>(e.openBlock(),e.createElementBlock("g",{key:`graduation_${u}`},[e.createElementVNode("rect",{x:r.x,y:r.y,height:r.height,width:e.unref(n).width-e.unref(t).style.chart.padding.left-e.unref(t).style.chart.padding.right,fill:e.unref(t).style.chart.graduations.gradient.show?`url(#vueUiThermometerGradient_${u}_${e.unref(d)})`:r.color,"shape-rendering":"crispEdges"},null,8,be),e.unref(t).style.chart.graduations.show&&["both","left"].includes(e.unref(t).style.chart.graduations.sides)?(e.openBlock(),e.createElementBlock("line",{key:0,x1:r.x,x2:r.x+10,y1:r.y,y2:r.y,"stroke-width":e.unref(t).style.chart.graduations.strokeWidth,stroke:e.unref(t).style.chart.graduations.stroke,"stroke-linecap":"round"},null,8,xe)):e.createCommentVNode("",!0),e.unref(t).style.chart.graduations.showIntermediate?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(t).style.chart.graduations.show&&["both","left"].includes(e.unref(t).style.chart.graduations.sides)?(e.openBlock(),e.createElementBlock("line",{key:0,x1:r.x,x2:r.x+5,y1:r.halfY,y2:r.halfY,"stroke-width":e.unref(t).style.chart.graduations.strokeWidth/2,stroke:e.unref(t).style.chart.graduations.stroke,"stroke-linecap":"round"},null,8,Ce)):e.createCommentVNode("",!0),e.unref(t).style.chart.graduations.show&&["both","left"].includes(e.unref(t).style.chart.graduations.sides)?(e.openBlock(),e.createElementBlock("line",{key:1,x1:r.x,x2:r.x+2.5,y1:r.qYLess,y2:r.qYLess,"stroke-width":e.unref(t).style.chart.graduations.strokeWidth/2,stroke:e.unref(t).style.chart.graduations.stroke,"stroke-linecap":"round"},null,8,we)):e.createCommentVNode("",!0),e.unref(t).style.chart.graduations.show&&["both","left"].includes(e.unref(t).style.chart.graduations.sides)?(e.openBlock(),e.createElementBlock("line",{key:2,x1:r.x,x2:r.x+2.5,y1:r.qYMore,y2:r.qYMore,"stroke-width":e.unref(t).style.chart.graduations.strokeWidth/2,stroke:e.unref(t).style.chart.graduations.stroke,"stroke-linecap":"round"},null,8,_e)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0),e.unref(t).style.chart.graduations.show&&["both","right"].includes(e.unref(t).style.chart.graduations.sides)?(e.openBlock(),e.createElementBlock("line",{key:2,x1:e.unref(n).right,x2:e.unref(n).right-10,y1:r.y,y2:r.y,"stroke-width":e.unref(t).style.chart.graduations.strokeWidth,stroke:e.unref(t).style.chart.graduations.stroke,"stroke-linecap":"round"},null,8,Ne)):e.createCommentVNode("",!0),e.unref(t).style.chart.graduations.showIntermediate?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.unref(t).style.chart.graduations.show&&["both","right"].includes(e.unref(t).style.chart.graduations.sides)?(e.openBlock(),e.createElementBlock("line",{key:0,x1:e.unref(n).right,x2:e.unref(n).right-5,y1:r.halfY,y2:r.halfY,"stroke-width":e.unref(t).style.chart.graduations.strokeWidth/2,stroke:e.unref(t).style.chart.graduations.stroke,"stroke-linecap":"round"},null,8,Be)):e.createCommentVNode("",!0),e.unref(t).style.chart.graduations.show&&["both","right"].includes(e.unref(t).style.chart.graduations.sides)?(e.openBlock(),e.createElementBlock("line",{key:1,x1:e.unref(n).right,x2:e.unref(n).right-2.5,y1:r.qYLess,y2:r.qYLess,"stroke-width":e.unref(t).style.chart.graduations.strokeWidth/2,stroke:e.unref(t).style.chart.graduations.stroke,"stroke-linecap":"round"},null,8,Ve)):e.createCommentVNode("",!0),e.unref(t).style.chart.graduations.show&&["both","right"].includes(e.unref(t).style.chart.graduations.sides)?(e.openBlock(),e.createElementBlock("line",{key:2,x1:e.unref(n).right,x2:e.unref(n).right-2.5,y1:r.qYMore,y2:r.qYMore,"stroke-width":e.unref(t).style.chart.graduations.strokeWidth/2,stroke:e.unref(t).style.chart.graduations.stroke,"stroke-linecap":"round"},null,8,Ee)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)]))),128)),e.createElementVNode("rect",{class:e.normalizeClass({"vue-ui-thermometer-temperature":e.unref(t).style.chart.animation.use}),x:e.unref(n).left,y:e.unref(n).top,height:e.unref(w),width:e.unref(n).width-e.unref(t).style.chart.padding.left-e.unref(t).style.chart.padding.right,fill:"#FFFFFF66"},null,10,Pe)]),e.createElementVNode("text",{class:e.normalizeClass({"vue-ui-thermometer-temperature-value":e.unref(t).style.chart.animation.use}),y:e.unref(w)+e.unref(n).top+e.unref(t).style.chart.label.fontSize/3,x:e.unref(n).left-10,"text-anchor":"end",fill:e.unref(t).style.chart.label.color,"font-size":e.unref(t).style.chart.label.fontSize,"font-weight":e.unref(t).style.chart.label.bold?"bold":"normal"},e.toDisplayString(e.unref(s.applyDataLabel)(e.unref(t).style.chart.label.formatter,m.dataset.value,e.unref(s.dataLabel)({p:e.unref(t).style.chart.label.prefix,v:m.dataset.value,s:e.unref(t).style.chart.label.suffix,r:e.unref(t).style.chart.label.rounding}),{datapoint:m.dataset})),11,$e),e.renderSlot(o.$slots,"svg",{svg:e.unref(W)},void 0,!0)],10,ce)):e.createCommentVNode("",!0),o.$slots.watermark?(e.openBlock(),e.createElementBlock("div",Fe,[e.renderSlot(o.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(S)||e.unref(I)})),void 0,!0)])):e.createCommentVNode("",!0),o.$slots.source?(e.openBlock(),e.createElementBlock("div",Oe,[e.renderSlot(o.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),e.unref(k)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(re.default,{key:7,config:{type:"thermometer",style:{backgroundColor:e.unref(t).style.chart.backgroundColor,thermometer:{color:"#CCCCCC"}}}},null,8,["config"]))],46,ae))}},Ie=le._export_sfc(Se,[["__scopeId","data-v-f5875a02"]]);exports.default=Ie;