vue-data-ui-hq/dist/Slicer-CtTQxL9r.cjs

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

"use strict";const e=require("vue"),G=require("./BaseIcon-DO69J5Rk.cjs"),V=require("./useResponsive-BJ7DTGpm.cjs"),h=require("./index-ZfICPrrM.cjs"),H=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),J={"data-html2canvas-ignore":"",style:{padding:"0 24px"},class:"vue-data-ui-zoom"},K={class:"vue-data-ui-slicer-labels",style:{position:"relative","z-index":"1","pointer-events":"none"}},Q={key:0,style:{width:"100%",position:"relative"}},Y={key:0,class:"minimap",style:{width:"100%"}},_=["xmlns","viewBox"],ee=["id"],te=["stop-color"],ne=["d","stroke"],le=["x","width","height","fill","rx"],re=["d","fill"],oe=["x","width","height","rx","fill"],ie=["x","width","height","fill","rx"],ae=["d","fill"],ue=["d","stroke"],se=["cx","cy","stroke","fill"],de=["cx","cy","stroke","fill"],ce=["x1","x2","y2","stroke"],me=["x","height","width","onMouseenter"],fe=["min","max"],he=["min","max"],pe={__name:"Slicer",props:{background:{type:String,default:"#FFFFFF"},borderColor:{type:String,default:"#FFFFFF"},fontSize:{type:Number,default:14},labelLeft:{type:String,default:""},labelRight:{type:String,default:""},textColor:{type:String,default:"#1A1A1A"},inputColor:{type:String,default:"#1A1A1A"},max:{type:Number,default:0},min:{type:Number,default:0},selectColor:{type:String,default:"#4A4A4A"},useResetSlot:{type:Boolean,default:!1},valueStart:{type:[Number,String],default:0},valueEnd:{type:[Number,String],default:0},minimap:{type:Array,default:[]},smoothMinimap:{type:Boolean,default:!1},minimapSelectedColor:{type:String,default:"#1f77b4"},minimapSelectionRadius:{type:Number,default:12},minimapLineColor:{type:String,default:"#2D353C"},minimapSelectedColorOpacity:{type:Number,default:.2},minimapSelectedIndex:{type:Number,default:null},minimapIndicatorColor:{type:String,default:"#2D353C"},refreshStartPoint:{type:Number,default:0},refreshEndPoint:{type:Number,default:null}},emits:["update:start","update:end","reset","trapMouse"],setup(l,{expose:B,emit:$}){e.useCssVars(n=>({b551c218:e.unref(z),"3d4ca768":e.unref(v),"5763f24e":e.unref(R),"1d81e898":l.selectColor,"39e04726":e.unref(L)}));const t=l,i=e.ref(t.min),a=e.ref(t.max),p=e.computed(()=>!!t.minimap.length),g=e.ref(h.createUid()),M=e.computed(()=>t.refreshEndPoint===null?t.max:t.refreshEndPoint),f=$,P=e.computed(()=>{const n=t.max-t.min,r=(i.value-t.min)/n*100,u=(a.value-t.min)/n*100;return{left:`${r}%`,width:`${u-r}%`,background:t.selectColor}}),z=e.computed(()=>t.inputColor),L=e.computed(()=>t.background),R=e.computed(()=>`${t.selectColor}33`),v=e.computed(()=>t.borderColor),C=e.computed(()=>{let n=[];for(let r=0;r<t.minimap.length;r+=1)n.push(r);return n});function w(){f("reset")}function F(){Number(i.value)>Number(a.value)-1&&(i.value=Number(a.value)-1),f("update:start",Number(i.value))}function I(){Number(a.value)<Number(i.value)+1&&(a.value=Number(i.value)+1),f("update:end",Number(a.value))}e.watch(()=>t.min,n=>{Number(i.value)<Number(n)&&(i.value=Number(n)),Number(a.value)<Number(n)&&(a.value=Number(n))}),e.watch(()=>t.max,n=>{Number(i.value)>Number(n)&&(i.value=Number(n)),Number(a.value)>Number(n)&&(a.value=Number(n))});const S=e.ref(null),o=e.ref({width:1,height:1}),y=e.ref(null);e.onMounted(()=>{if(p.value){const n=V.throttle(()=>{const{width:r,height:u}=V.useResponsive({chart:S.value});o.value.width=r,o.value.height=u-47});y.value=new ResizeObserver(n),y.value.observe(S.value)}}),e.onBeforeUnmount(()=>{y.value&&y.value.disconnect()});const s=e.computed(()=>t.minimap.length?o.value.width/t.minimap.length:0),d=e.computed(()=>{if(!t.minimap.length)return[];const n=Math.max(...t.minimap),r=Math.min(...t.minimap)-10,u=n-(r>0?0:r),c=t.minimap.map((j,X)=>{const Z=j-r;return{x:o.value.width/t.minimap.length*X+s.value/2,y:o.value.height-Z/u*(o.value.height*.9)}}),N=t.smoothMinimap?h.createSmoothPath(c):h.createStraightPath(c),E=[...c].slice(t.valueStart,t.valueEnd),W=t.smoothMinimap?h.createSmoothPath(E):h.createStraightPath(E);return{fullSet:N,selectionSet:W,sliced:E,firstPlot:c[t.valueStart],lastPlot:c[t.valueEnd-1]}}),m=e.computed(()=>({x:s.value*i.value+s.value/2,width:o.value.width*((a.value-i.value)/t.max)-s.value})),A=e.computed(()=>({left:0,color:t.textColor,fontSize:`${t.fontSize}px`,top:p.value?"28px":"-28px",pointerEvents:"none"})),q=e.computed(()=>({right:0,color:t.textColor,fontSize:`${t.fontSize}px`,top:p.value?"28px":"-28px",direction:"rtl",pointerEvents:"none"})),x=e.ref(t.minimapSelectedIndex);e.watch(()=>t.minimapSelectedIndex,n=>{x.value=n+t.valueStart},{immediate:!0});function D(n){x.value=n,n>=t.valueStart&&n<t.valueEnd&&f("trapMouse",n-t.valueStart)}const O=e.ref(0),b=e.ref(null),k=e.ref(null);function T(n){i.value=n,b.value&&(b.value.value=n),f("update:start",Number(i.value))}function U(n){a.value=n,k.value&&(k.value.value=n),f("update:end",Number(a.value))}return B({setStartValue:T,setEndValue:U}),(n,r)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("div",K,[l.valueStart!==l.refreshStartPoint||l.valueEnd!==e.unref(M)?(e.openBlock(),e.createElementBlock("div",Q,[l.useResetSlot?e.renderSlot(n.$slots,"reset-action",{key:1,reset:w},void 0,!0):(e.openBlock(),e.createElementBlock("button",{key:0,"data-cy-reset":"",tabindex:"0",role:"button",class:"vue-data-ui-refresh-button",style:e.normalizeStyle({top:e.unref(p)?"36px":"-16px",pointerEvents:"all !important"}),onClick:w},[e.createVNode(G.default,{name:"refresh",stroke:l.textColor},null,8,["stroke"])],4))])):e.createCommentVNode("",!0)]),e.createElementVNode("div",{class:"double-range-slider",ref_key:"minimapWrapper",ref:S,style:{"z-index":"0"}},[e.unref(p)?(e.openBlock(),e.createElementBlock("div",Y,[(e.openBlock(),e.createElementBlock("svg",{xmlns:e.unref(h.XMLNS),viewBox:`0 0 ${e.unref(o).width<0?0:e.unref(o).width} ${e.unref(o).height<0?0:e.unref(o).height}`},[e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:e.unref(g),x1:"0%",y1:"0%",x2:"0%",y2:"100%"},[e.createElementVNode("stop",{offset:"0%","stop-color":`${l.minimapLineColor}50`},null,8,te),r[3]||(r[3]=e.createElementVNode("stop",{offset:"100%","stop-color":"transparent"},null,-1))],8,ee)]),e.createElementVNode("path",{d:`M${e.unref(d).fullSet}`,stroke:`${l.minimapLineColor}`,fill:"none","stroke-width":"1","stroke-linecap":"round","stroke-linejoin":"round",style:{opacity:"1"}},null,8,ne),e.createElementVNode("rect",{x:e.unref(m).x,width:e.unref(m).width<0?0:e.unref(m).width,height:Math.max(e.unref(o).height,0),y:0,fill:e.unref(v),rx:l.minimapSelectionRadius,stroke:"none"},null,8,le),e.createElementVNode("path",{d:`M${e.unref(s)/2},${Math.max(e.unref(o).height,0)} ${e.unref(d).fullSet} L${e.unref(o).width-e.unref(s)/2},${Math.max(e.unref(o).height,0)}Z`,fill:`url(#${e.unref(g)})`,stroke:"none",style:{opacity:"1"}},null,8,re),e.createElementVNode("rect",{x:e.unref(m).x,width:e.unref(m).width<0?0:e.unref(m).width,height:Math.max(e.unref(o).height,0),y:0,rx:l.minimapSelectionRadius,fill:e.unref(v)},null,8,oe),e.createElementVNode("rect",{x:e.unref(m).x,width:e.unref(m).width<0?0:e.unref(m).width,height:Math.max(e.unref(o).height,0),y:0,fill:l.minimapSelectedColor,rx:l.minimapSelectionRadius,style:e.normalizeStyle({opacity:l.minimapSelectedColorOpacity})},null,12,ie),e.createElementVNode("path",{d:`M${e.unref(d).sliced[0].x},${Math.max(e.unref(o).height,0)} ${e.unref(d).selectionSet} L${e.unref(d).sliced.at(-1).x},${Math.max(e.unref(o).height,0)}Z`,fill:`url(#${e.unref(g)})`,stroke:"none",style:{opacity:"1"}},null,8,ae),e.createElementVNode("path",{d:`M ${e.unref(d).selectionSet}`,stroke:`${l.minimapLineColor}`,fill:"transparent","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,8,ue),e.createElementVNode("circle",{cx:e.unref(d).firstPlot.x,cy:e.unref(d).firstPlot.y,"stroke-width":"0.5",stroke:e.unref(v),r:"3",fill:l.minimapLineColor},null,8,se),e.createElementVNode("circle",{cx:e.unref(d).lastPlot.x,cy:e.unref(d).lastPlot.y,"stroke-width":"0.5",stroke:e.unref(v),r:"3",fill:l.minimapLineColor},null,8,de),e.unref(x)!==null?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(C),(u,c)=>(e.openBlock(),e.createElementBlock("g",null,[e.unref(x)===u&&u>=l.valueStart&&u<l.valueEnd?(e.openBlock(),e.createElementBlock("line",{key:0,x1:e.unref(s)*c+e.unref(s)/2,x2:e.unref(s)*c+e.unref(s)/2,y1:0,y2:Math.max(e.unref(o).height,0),stroke:l.minimapIndicatorColor,"stroke-linecap":"round","stroke-dasharray":"2","stroke-width":"1"},null,8,ce)):e.createCommentVNode("",!0)]))),256)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(C),(u,c)=>(e.openBlock(),e.createElementBlock("rect",{x:e.unref(s)*c,y:0,height:Math.max(e.unref(o).height,0),width:e.unref(s)<0?0:e.unref(s),fill:"transparent",style:{"pointer-events":"all !important"},onMouseenter:N=>D(u),onMouseleave:r[0]||(r[0]=N=>{x.value=null,f("trapMouse",null)})},null,40,me))),256))],8,_))])):e.createCommentVNode("",!0),r[4]||(r[4]=e.createElementVNode("div",{class:"slider-track"},null,-1)),e.createElementVNode("div",{class:"range-highlight",style:e.normalizeStyle(e.unref(P))},null,4),e.withDirectives((e.openBlock(),e.createElementBlock("input",{ref_key:"rangeStart",ref:b,key:`range-min${e.unref(O)}`,type:"range",class:"range-left",min:l.min,max:l.max,"onUpdate:modelValue":r[1]||(r[1]=u=>e.isRef(i)?i.value=u:null),onInput:F},null,40,fe)),[[e.vModelText,e.unref(i)]]),e.createElementVNode("div",{class:"thumb-label thumb-label-left",style:e.normalizeStyle(e.unref(A))},e.toDisplayString(l.labelLeft),5),e.withDirectives(e.createElementVNode("input",{ref_key:"rangeEnd",ref:k,type:"range",class:"range-right",min:l.min,max:l.max,"onUpdate:modelValue":r[2]||(r[2]=u=>e.isRef(a)?a.value=u:null),onInput:I},null,40,he),[[e.vModelText,e.unref(a)]]),e.createElementVNode("div",{class:"thumb-label thumb-label-right",style:e.normalizeStyle(e.unref(q))},e.toDisplayString(l.labelRight),5)],512)]))}},ve=H._export_sfc(pe,[["__scopeId","data-v-7b7105e4"]]);exports.Slicer=ve;