vue-data-ui-hq/dist/vue-ui-table-sparkline-YmGsrfQG.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"),u=require("./index-ZfICPrrM.cjs"),Y=require("./useNestedProp-C14rfl0j.cjs"),ce=require("./vue-ui-sparkline-DXUi22SR.cjs"),x=require("./BaseIcon-DO69J5Rk.cjs"),D=require("./usePrinter-B-gh2f22.cjs"),fe=require("./useUserOptionState-BgepsfED.cjs"),pe=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),me=["id"],ve={style:{"z-index":"1","padding-right":"24px"}},ye={key:0,style:{display:"flex",flexDirection:"row",alignItems:"center"}},ge={key:0,style:{display:"flex",flexDirection:"row",alignItems:"center"}},be=["onClick"],ke=["onClick"],he=["data-cell"],Se=["data-cell","onPointerenter"],Ce=["data-cell"],_e=["data-cell"],xe=["data-cell"],we=["data-cell"],Ne={key:1,ref:"source",dir:"auto"},ze={__name:"vue-ui-table-sparkline",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}}},setup(Z,{expose:ee}){e.useCssVars(n=>({"2d36faad":n.tdo}));const{vue_ui_table_sparkline:te}=u.useConfig(),y=Z,w=e.ref(u.createUid()),$=e.ref(0),N=e.ref(0),z=e.ref(null),ne=e.useSlots();e.onMounted(()=>{ne["chart-background"]&&console.warn("VueUiTableSparkline does not support the #chart-background slot.")});const t=e.computed({get:()=>T(),set:n=>n}),{userOptionsVisible:V,setUserOptionsVisibility:P,keepUserOptionState:F}=fe.useUserOptionState({config:t.value});function T(){const n=Y.useNestedProp({userConfig:y.config,defaultConfig:te});return n.theme?{...Y.useNestedProp({userConfig:u.themes.vue_ui_table_sparkline[n.theme]||y.config,defaultConfig:n}),customPalette:u.themePalettes[n.theme]||u.palette}:n}e.watch(()=>y.config,n=>{t.value=T(),V.value=!t.value.showOnChartHover,q(),N.value+=1},{deep:!0}),e.watch(()=>y.dataset,n=>{c.value=h.value,N.value+=1},{deep:!0});const{isPrinting:M,isImaging:W,generatePdf:L,generateImage:U}=D.usePrinter({elementId:`table_${w.value}`,fileName:t.value.title.text||"vue-ui-table-sparkline"}),oe=e.computed(()=>u.convertCustomPalette(t.value.customPalette)),C=e.ref(null),B=e.ref(!1),re=e.computed(()=>t.value.responsiveBreakpoint);e.onMounted(()=>{q()});const E=e.ref(t.value.colNames);function q(){u.objectIsEmpty(y.dataset)&&u.error({componentName:"VueUiTableSparkline",type:"dataset"});const n=new ResizeObserver(r=>{r.forEach(o=>{B.value=o.contentRect.width<re.value})});C.value&&n.observe(C.value),E.value=[];for(let r=0;r<R.value;r+=1)E.value.push(t.value.colNames[r]||`col ${r}`)}const G=e.computed(()=>(y.dataset.forEach((n,r)=>{u.getMissingDatasetAttributes({datasetObject:n,requiredAttributes:["name","values"]}).forEach(o=>{u.error({componentName:"VueUiTableSparkline",type:"datasetSerieAttribute",property:o,index:r})})}),y.dataset.map((n,r)=>{const o=(n.values||[]).map(d=>isNaN(d)?0:d??0),l=o.reduce((d,i)=>d+i,0),s=l/o.length,a=u.calcMedian(o);return{...n,values:n.values||[],color:u.convertColorToHex(n.color)||oe.value[r]||u.palette[r]||u.palette[r%u.palette.length],sum:l,average:s,median:a,sparklineDataset:o.map((d,i)=>({period:t.value.colNames[i]||`col ${i}`,value:d||0}))}})));function le(n){const o=(n[0].values||[]).map((s,a)=>n.map(d=>d.values[a]||[])).map(s=>s.map((a,d)=>[a,d]).sort((a,d)=>d[0]-a[0]).map(a=>a[1]));return n.map((s,a)=>({...s,values:s.values||[],orders:o[a]}))}const h=e.computed(()=>le(G.value)),c=e.ref(h.value),ae=e.computed(()=>Math.max(...c.value.map(n=>(n.values||[]).length))),I=e.ref(void 0),A=e.ref(!1),f=e.ref(void 0),H=e.ref(1);function k(){A.value=!1,f.value=void 0,p.value=void 0,H.value=1,S.value.forEach(n=>n.state=1),g.value={name:1,sum:1,average:1,median:1},c.value=h.value}function _(n,r,o){if(["name","sum","average","median"].includes(n.type)){ue(n.type,r,o);return}if(!J(r))return;if(b.value=r,p.value=void 0,![null,void 0].includes(f.value)&&r!==f.value&&(f.value=void 0,k()),S.value[r].state===o&&f.value===r){f.value=void 0,k();return}A.value=!0,f.value=r;const l=h.value.map(i=>i.values[r]||[]),s=o;S.value[r].state=s,H.value=s,r===I.value?I.value=void 0:I.value=r;const d=l.map((i,m)=>[m,i]).sort((i,m)=>s*(m[1]-i[1])).map(i=>i[0]).map(i=>h.value[i]);c.value=d,N.value+=1}const R=e.computed(()=>Math.max(...y.dataset.map(n=>(n.values||[]).length))),v=e.computed(()=>{let n=E.value.map(o=>({type:"reg",value:o}));if(!n.length)for(let o=0;o<R.value;o+=1)n.push({type:"reg",value:`col ${o+1}`});t.value.showTotal&&(n=[...n,{type:"sum",value:t.value.translations.total}]);let r;return t.value.showAverage&&t.value.showMedian?r=[...n,{type:"average",value:t.value.translations.average},{type:"median",value:t.value.translations.median}]:t.value.showAverage&&!t.value.showMedian?r=[...n,{type:"average",value:t.value.translations.average}]:!t.value.showAverage&&t.value.showMedian?r=[...n,{type:"median",value:t.value.translations.median}]:r=n,t.value.showSparklines?[...r,{type:"chart",value:t.value.translations.chart}]:r}),g=e.ref({name:1,sum:1,average:1,median:1}),p=e.ref(void 0);function ue(n,r,o){if(!c.value||c.value.length===0||!K(n))return;if(p.value!==n&&(p.value=void 0),![null,void 0].includes(f.value)&&r!==f.value&&k(),f.value=void 0,g.value[n]===o&&p.value){p.value=void 0,k();return}p.value=n,A.value=!0,g.value[n]=o,[null,void 0].includes(r)||(S.value[r].state=g.value[n]);const l=g.value[n],s=[...c.value].sort((a,d)=>{const i=a[n]??(typeof a[n]=="number"?0:""),m=d[n]??(typeof d[n]=="number"?0:"");return typeof i=="string"&&typeof m=="string"?l===-1?i.localeCompare(m):m.localeCompare(i):typeof i=="number"&&typeof m=="number"?l===-1?i-m:m-i:0});c.value=s}const b=e.ref(void 0),O=e.ref(void 0);function se({dataIndex:n,serieIndex:r}){b.value=n,O.value=r,z.value[n]&&!B.value&&z.value[n].scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}const X=e.ref(!1);function ie(n){X.value=n,$.value+=1}function j(){e.nextTick(()=>{const n=[t.value.translations.serie].concat(v.value),r=G.value.map((s,a)=>[[s.name],s.values,[s.sum],[s.average],[s.median]]),o=[n].concat(r),l=u.createCsvContent(o);u.downloadCsv({csvContent:l,title:t.value.title.text||"vue-ui-table-sparkline"})})}function J(n){return t.value.sortedDataColumnIndices.includes(n)}function K(n){return n.type==="name"||n==="name"?t.value.sortedSeriesName:n.type==="sum"||n==="sum"?t.value.sortedSum:n.type==="average"||n==="average"?t.value.sortedAverage:n.type==="median"||n==="median"?t.value.sortedMedian:!1}function Q(n,r,o){return["sum","average","median"].includes(r.type)?p.value===r.type&&g.value[r.type]===o?1:.3:n===f.value&&S.value[n].state===o?1:.3}function de(){t.value.resetSortOnClickOutside&&k()}const S=e.computed({get:()=>v.value.map(n=>({state:1})),set:n=>n});return ee({generatePdf:L,generateImage:U,generateCsv:j,restoreOrder:k}),(n,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"tableContainer",ref:C,class:e.normalizeClass({"vue-ui-responsive":e.unref(B)}),style:{overflow:"hidden"},id:`table_${e.unref(w)}`,onMouseenter:r[3]||(r[3]=()=>e.unref(P)(!0)),onMouseleave:r[4]||(r[4]=()=>e.unref(P)(!1))},[e.unref(t).title.text?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vue-ui-table-sparkline-caption",style:e.normalizeStyle({backgroundColor:e.unref(t).title.backgroundColor})},[e.createElementVNode("div",{style:e.normalizeStyle({fontSize:`${e.unref(t).title.fontSize}px`,fontWeight:e.unref(t).title.bold?"bold":"normal",color:e.unref(t).title.color,textAlign:e.unref(t).title.textAlign})},e.toDisplayString(e.unref(t).title.text),5),e.unref(t).title.subtitle.text?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({fontSize:`${e.unref(t).title.subtitle.fontSize}px`,fontWeight:e.unref(t).title.subtitle.bold?"bold":"normal",color:e.unref(t).title.subtitle.color,textAlign:e.unref(t).title.textAlign})},e.toDisplayString(e.unref(t).title.subtitle.text),5)):e.createCommentVNode("",!0)],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{style:{overflow:"auto"},onPointerleave:r[2]||(r[2]=o=>{O.value=void 0,b.value=void 0})},[e.createElementVNode("table",{class:"vue-ui-data-table",style:e.normalizeStyle({fontFamily:e.unref(t).fontFamily,position:"relative"})},[e.createElementVNode("thead",ve,[e.withDirectives((e.openBlock(),e.createElementBlock("tr",{role:"row",class:"vue-ui-data-table__thead-row",style:e.normalizeStyle({backgroundColor:e.unref(t).thead.backgroundColor,color:e.unref(t).thead.color})},[e.createElementVNode("th",{role:"cell",style:e.normalizeStyle({backgroundColor:e.unref(t).thead.backgroundColor,border:e.unref(t).thead.outline,textAlign:e.unref(t).thead.textAlign,fontWeight:e.unref(t).thead.bold?"bold":"normal"}),class:"sticky-col-first"},[e.createElementVNode("div",{style:e.normalizeStyle({display:"flex",flexDirection:"row",alignItems:"center",gap:"3px",justifyContent:e.unref(t).thead.textAlign})},[e.createElementVNode("span",null,e.toDisplayString(e.unref(t).translations.serie),1),e.unref(c).length>1&&e.unref(t).sortedSeriesName?(e.openBlock(),e.createElementBlock("div",ye,[e.createElementVNode("button",{class:"vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-down",onClick:r[0]||(r[0]=o=>_({type:"name"},null,-1))},[e.createVNode(x.default,{size:12,name:"arrowBottom",stroke:e.unref(t).thead.color,style:e.normalizeStyle({opacity:e.unref(p)==="name"&&e.unref(g).name===-1?1:.3})},null,8,["stroke","style"])]),e.createElementVNode("button",{class:"vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-up",onClick:r[1]||(r[1]=o=>_({type:"name"},null,1))},[e.createVNode(x.default,{size:12,name:"arrowTop",stroke:e.unref(t).thead.color,style:e.normalizeStyle({opacity:e.unref(p)==="name"&&e.unref(g).name===1?1:.3})},null,8,["stroke","style"])])])):e.createCommentVNode("",!0)],4)],4),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),(o,l)=>(e.openBlock(),e.createElementBlock("th",{role:"cell",style:e.normalizeStyle({background:e.unref(t).thead.backgroundColor,border:e.unref(t).thead.outline,textAlign:e.unref(t).thead.textAlign,fontWeight:e.unref(t).thead.bold?"bold":"normal",minWidth:l===e.unref(v).length-1?`${e.unref(t).sparkline.dimensions.width}px`:"48px",paddingRight:l===e.unref(v).length-1&&e.unref(t).userOptions.show?"36px":""}),class:e.normalizeClass({"sticky-col":l===e.unref(v).length-1&&e.unref(t).showSparklines})},[e.createElementVNode("div",{style:e.normalizeStyle({display:"flex",flexDirection:"row",alignItems:"center",gap:"3px",justifyContent:e.unref(t).thead.textAlign})},[e.createElementVNode("span",null,e.toDisplayString(o.value),1),e.unref(c).length>1&&(J(l)||K(o))?(e.openBlock(),e.createElementBlock("div",ge,[e.createElementVNode("button",{class:"vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-down",onClick:()=>_(o,l,-1)},[e.createVNode(x.default,{size:12,name:"arrowBottom",stroke:e.unref(t).thead.color,style:e.normalizeStyle({opacity:Q(l,o,-1)})},null,8,["stroke","style"])],8,be),e.createElementVNode("button",{class:"vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-up",onClick:()=>_(o,l,1)},[e.createVNode(x.default,{size:12,name:"arrowTop",stroke:e.unref(t).thead.color,style:e.normalizeStyle({opacity:Q(l,o,1)})},null,8,["stroke","style"])],8,ke)])):e.createCommentVNode("",!0)],4),e.unref(t).userOptions.show&&l===e.unref(v).length-1&&(e.unref(F)||e.unref(V))?(e.openBlock(),e.createBlock(D.UserOptions,{ref_for:!0,ref:"details",key:`user_option_${e.unref($)}`,backgroundColor:e.unref(t).thead.backgroundColor,color:e.unref(t).thead.color,isPrinting:e.unref(M),isImaging:e.unref(W),uid:e.unref(w),hasPdf:e.unref(t).userOptions.buttons.pdf,hasXls:e.unref(t).userOptions.buttons.csv,hasImg:e.unref(t).userOptions.buttons.img,hasFullscreen:e.unref(t).userOptions.buttons.fullscreen,isFullscreen:e.unref(X),titles:{...e.unref(t).userOptions.buttonTitles},chartElement:e.unref(C),position:e.unref(t).userOptions.position,onToggleFullscreen:ie,onGeneratePdf:e.unref(L),onGenerateImage:e.unref(U),onGenerateCsv:j,style:e.normalizeStyle({visibility:e.unref(F)?e.unref(V)?"visible":"hidden":"visible"})},e.createSlots({_:2},[n.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,n.$slots.optionCsv?{name:"optionCsv",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"optionCsv",{},void 0,!0)]),key:"1"}:void 0,n.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"optionImg",{},void 0,!0)]),key:"2"}:void 0,n.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:s,isFullscreen:a})=>[e.renderSlot(n.$slots,"optionFullscreen",e.mergeProps({ref_for:!0},{toggleFullscreen:s,isFullscreen:a}),void 0,!0)]),key:"3"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasXls","hasImg","hasFullscreen","isFullscreen","titles","chartElement","position","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0)],6))),256))],4)),[[e.unref(D.vClickOutside),de]])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c),(o,l)=>(e.openBlock(),e.createElementBlock("tr",{role:"row",style:e.normalizeStyle({backgroundColor:e.unref(t).tbody.backgroundColor,color:e.unref(t).tbody.color}),class:e.normalizeClass({"vue-ui-data-table__tbody__row":!0,"vue-ui-data-table__tbody__row-even":l%2===0,"vue-ui-data-table__tbody__row-odd":l%2!==0})},[e.createElementVNode("td",{role:"cell",style:e.normalizeStyle({backgroundColor:e.unref(t).tbody.backgroundColor,border:e.unref(t).tbody.outline,fontSize:`${e.unref(t).tbody.fontSize}px`,fontWeight:e.unref(t).tbody.bold?"bold":"normal",textAlign:e.unref(t).tbody.textAlign}),"data-cell":e.unref(t).translations.serie,class:"vue-ui-data-table__tbody__td sticky-col-first"},[e.createElementVNode("div",{dir:"auto",style:e.normalizeStyle({display:"flex",flexDirection:"row",alignItems:"center",gap:"6px",justifyContent:e.unref(t).tbody.textAlign})},[e.unref(t).tbody.showColorMarker?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({color:o.color})},"⬤",4)):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(o.name??"-"),1)],4)],12,he),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(ae),(s,a)=>(e.openBlock(),e.createElementBlock("td",{dir:"auto",role:"cell",ref_for:!0,ref_key:"TD",ref:z,style:e.normalizeStyle({border:e.unref(t).tbody.outline,fontSize:`${e.unref(t).tbody.fontSize}px`,fontWeight:e.unref(t).tbody.bold?"bold":"normal",textAlign:e.unref(t).tbody.textAlign,background:e.unref(b)!==void 0&&a===e.unref(b)?e.unref(t).tbody.selectedColor.useSerieColor?`${o.color.length>7?o.color.slice(0,-2):o.color}33`:e.unref(t).tbody.selectedColor.fallback:""}),"data-cell":e.unref(v)[a]?e.unref(v)[a].value:"",class:"vue-ui-data-table__tbody__td",onPointerenter:d=>{O.value=l,b.value=a}},e.toDisplayString([null,void 0].includes(o.values[a])?"-":e.unref(u.applyDataLabel)(e.unref(t).formatter,Number(o.values[a]),e.unref(u.dataLabel)({p:e.unref(t).prefix,v:Number(o.values[a]),s:e.unref(t).suffix,r:e.unref(t).roundingValues}),{datapoint:o,seriesIndex:l,datapointIndex:a})),45,Se))),256)),e.unref(t).showTotal?(e.openBlock(),e.createElementBlock("td",{key:0,dir:"auto",role:"cell",style:e.normalizeStyle({border:e.unref(t).tbody.outline,fontSize:`${e.unref(t).tbody.fontSize}px`,fontWeight:e.unref(t).tbody.bold?"bold":"normal",textAlign:e.unref(t).tbody.textAlign}),"data-cell":e.unref(t).translations.total,class:"vue-ui-data-table__tbody__td"},e.toDisplayString(e.unref(u.applyDataLabel)(e.unref(t).formatter,o.sum,e.unref(u.dataLabel)({p:e.unref(t).prefix,v:o.sum,s:e.unref(t).suffix,r:e.unref(t).roundingTotal}),{datapoint:o.sum,seriesIndex:l})),13,Ce)):e.createCommentVNode("",!0),e.unref(t).showAverage?(e.openBlock(),e.createElementBlock("td",{key:1,dir:"auto",role:"cell",style:e.normalizeStyle({border:e.unref(t).tbody.outline,fontSize:`${e.unref(t).tbody.fontSize}px`,fontWeight:e.unref(t).tbody.bold?"bold":"normal",textAlign:e.unref(t).tbody.textAlign}),"data-cell":e.unref(t).translations.average,class:"vue-ui-data-table__tbody__td"},e.toDisplayString(e.unref(u.applyDataLabel)(e.unref(t).formatter,o.average,e.unref(u.dataLabel)({p:e.unref(t).prefix,v:o.average,s:e.unref(t).suffix,r:e.unref(t).roundingAverage}),{datapoint:o.average,seriesIndex:l})),13,_e)):e.createCommentVNode("",!0),e.unref(t).showMedian?(e.openBlock(),e.createElementBlock("td",{key:2,dir:"auto",role:"cell",style:e.normalizeStyle({border:e.unref(t).tbody.outline,fontSize:`${e.unref(t).tbody.fontSize}px`,fontWeight:e.unref(t).tbody.bold?"bold":"normal",textAlign:e.unref(t).tbody.textAlign}),"data-cell":e.unref(t).translations.median,class:"vue-ui-data-table__tbody__td"},e.toDisplayString(e.unref(u.applyDataLabel)(e.unref(t).formatter,o.median,e.unref(u.dataLabel)({p:e.unref(t).prefix,v:o.median,s:e.unref(t).suffix,r:e.unref(t).roundingMedian}),{datapoint:o.median,seriesIndex:l})),13,xe)):e.createCommentVNode("",!0),e.unref(t).showSparklines?(e.openBlock(),e.createElementBlock("td",{key:3,role:"cell","data-cell":e.unref(t).translations.chart,style:e.normalizeStyle({border:e.unref(t).tbody.outline,fontSize:`${e.unref(t).tbody.fontSize}px`,fontWeight:e.unref(t).tbody.bold?"bold":"normal",textAlign:e.unref(t).tbody.textAlign,backgroundColor:e.unref(t).tbody.backgroundColor,padding:"0"}),class:"vue-ui-data-table__tbody__td sticky-col"},[e.createVNode(ce.default,{onHoverIndex:({index:s})=>se({dataIndex:s,serieIndex:l}),"height-ratio":e.unref(t).sparkline.dimensions.heightRatio,"forced-padding":30,dataset:o.sparklineDataset,showInfo:!1,selectedIndex:e.unref(b),config:{type:e.unref(t).sparkline.type,style:{backgroundColor:"transparent",animation:{show:e.unref(t).sparkline.animation.show&&!e.unref(M)&&!e.unref(W),animationFrames:e.unref(t).sparkline.animation.animationFrames},line:{color:o.color,smooth:e.unref(t).sparkline.smooth,strokeWidth:e.unref(t).sparkline.strokeWidth},bar:{color:o.color},area:{color:o.color,opacity:e.unref(t).sparkline.showArea?16:0,useGradient:e.unref(t).sparkline.useGradient},verticalIndicator:{color:o.color},plot:{radius:9,stroke:e.unref(t).tbody.backgroundColor,strokeWidth:3}}}},null,8,["onHoverIndex","height-ratio","dataset","selectedIndex","config"])],12,we)):e.createCommentVNode("",!0)],6))),256))])],4)],32),n.$slots.source?(e.openBlock(),e.createElementBlock("div",Ne,[e.renderSlot(n.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0)],42,me))}},Ve=pe._export_sfc(ze,[["__scopeId","data-v-26859642"]]);exports.default=Ve;