UNPKG

vue-data-ui

Version:

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

2 lines (1 loc) 8.56 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=require("./index-CtzlfT2i.cjs"),$=require("./useNestedProp-B5jFEsaz.cjs"),w=require("./usePrinter-LlH3giBA.cjs"),q=require("./Shape-Ba8jxKwR.cjs"),G=require("./useUserOptionState-BgepsfED.cjs"),H=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),L=["id"],A={role:"cell"},D={role:"row"},X=["data-cell"],W={key:0,style:{display:"flex","flex-direction":"row",gap:"2px","align-items":"center"}},J=["height","width"],K={key:0,role:"cell","data-cell":"sum"},Q={key:1,role:"cell","data-cell":"average"},Y={key:2,role:"cell","data-cell":"median"},Z={key:1,ref:"source",dir:"auto"},j={__name:"vue-ui-table-heatmap",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}}},setup(P,{expose:N}){e.useCssVars(t=>({"424a6632":T.value,"72127c0d":R.value}));const{vue_ui_table_heatmap:E}=l.useConfig(),d=P,p=e.ref(l.createUid()),s=e.ref(!1),c=e.ref(null),m=e.ref(!1),f=e.ref(0),V=e.useSlots();e.onMounted(()=>{V["chart-background"]&&console.warn("VueUiTableHeatmap does not support the #chart-background slot.")});const o=e.computed({get:()=>y(),set:t=>t}),{userOptionsVisible:v,setUserOptionsVisibility:g,keepUserOptionState:h}=G.useUserOptionState({config:o.value});function y(){const t=$.useNestedProp({userConfig:d.config,defaultConfig:E});return t.theme?{...$.useNestedProp({userConfig:l.themes.vue_ui_table_heatmap[t.theme]||d.config,defaultConfig:t})}:t}e.watch(()=>d.config,t=>{o.value=y(),v.value=!o.value.userOptions.showOnChartHover,C()},{deep:!0});const{isPrinting:x,isImaging:O,generatePdf:k,generateImage:b}=w.usePrinter({elementId:`table_heatmap_${p.value}`,fileName:"vue-ui-table-heatmap"}),F=e.computed(()=>o.value.table.responsiveBreakpoint),z=e.computed(()=>!!d.dataset&&d.dataset.length);e.onMounted(()=>{C()});function C(){l.objectIsEmpty(d.dataset)&&l.error({componentName:"VueUiTableHeatmap",type:"dataset"});const t=new ResizeObserver(r=>{r.forEach(n=>{s.value=n.contentRect.width<F.value})});c.value&&t.observe(c.value)}const _=e.computed(()=>d.dataset.map(t=>{const r=t.values.map(a=>isNaN(a)?0:a),n=r.reduce((a,i)=>a+i,0);return{...t,values:r,serieExtremes:{max:Math.max(...r),min:Math.min(...r)},sum:n,average:n/r.length,median:l.calcMedian(r),displayValues:[t.name,...t.values],id:l.createUid()}})),B=e.computed(()=>{const t=_.value.flatMap(r=>r.values);return{min:Math.min(...t),max:Math.max(...t)}});function M(t,r){const n=o.value.style.heatmapColors.useIndividualScale;return l.interpolateColorHex(o.value.style.heatmapColors.min,o.value.style.heatmapColors.max,n?r.min:B.value.min,n?r.max:B.value.max,t)}const I=e.computed(()=>_.value.map(t=>({...t,colors:t.displayValues.map(r=>isNaN(r)?o.value.style.backgroundColor:M(r,t.serieExtremes))}))),R=e.computed(()=>o.value.style.backgroundColor),T=e.computed(()=>`${o.value.table.borderWidth}px`);function S(){e.nextTick(()=>{const t=I.value.map(a=>[[a.name],a.displayValues,[a.sum],[a.average],[a.median]]),r=[[[""],o.value.table.head.values,["sum"],["average"],["median"]]].concat(t),n=l.createCsvContent(r);l.downloadCsv({csvContent:n,title:"vue-ui-table-heatmap"})})}function U(t){m.value=t,f.value+=1}return N({generatePdf:k,generateCsv:S,generateImage:b}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"tableContainer",ref:c,style:e.normalizeStyle(`width:100%; overflow-x:auto; container-type: inline-size;padding-top:${o.value.userOptions.show?"36px":""}; ${m.value?"vue-data-ui-wrapper-fullscreen":""}; position:relative;`),class:e.normalizeClass({"vue-ui-responsive":s.value}),id:`table_heatmap_${p.value}`,onMouseenter:r[0]||(r[0]=()=>e.unref(g)(!0)),onMouseleave:r[1]||(r[1]=()=>e.unref(g)(!1))},[o.value.userOptions.show&&z.value&&(e.unref(h)||e.unref(v))?(e.openBlock(),e.createBlock(w.UserOptions,{ref:"details",key:`user_option_${f.value}`,backgroundColor:o.value.style.backgroundColor,color:o.value.style.color,isPrinting:e.unref(x),isImaging:e.unref(O),uid:p.value,hasPdf:o.value.userOptions.buttons.pdf,hasXls:o.value.userOptions.buttons.csv,hasImg:o.value.userOptions.buttons.img,hasFullscreen:o.value.userOptions.buttons.fullscreen,isFullscreen:m.value,titles:{...o.value.userOptions.buttonTitles},chartElement:c.value,position:o.value.userOptions.position,onToggleFullscreen:U,onGeneratePdf:e.unref(k),onGenerateCsv:S,onGenerateImage:e.unref(b),style:e.normalizeStyle({visibility:e.unref(h)?e.unref(v)?"visible":"hidden":"visible"})},e.createSlots({_:2},[t.$slots.menuIcon?{name:"menuIcon",fn:e.withCtx(({isOpen:n,color:a})=>[e.renderSlot(t.$slots,"menuIcon",e.normalizeProps(e.guardReactiveProps({isOpen:n,color:a})),void 0,!0)]),key:"0"}:void 0,t.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"optionPdf",{},void 0,!0)]),key:"1"}:void 0,t.$slots.optionCsv?{name:"optionCsv",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"optionCsv",{},void 0,!0)]),key:"2"}:void 0,t.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"optionImg",{},void 0,!0)]),key:"3"}:void 0,t.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:n,isFullscreen:a})=>[e.renderSlot(t.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:n,isFullscreen:a})),void 0,!0)]),key:"4"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasXls","hasImg","hasFullscreen","isFullscreen","titles","chartElement","position","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),e.createElementVNode("table",{class:e.normalizeClass({"vue-ui-table-heatmap":!0}),style:e.normalizeStyle(`width:100%;font-family:${o.value.style.fontFamily};background:${o.value.style.backgroundColor};`)},[e.createElementVNode("caption",null,[e.renderSlot(t.$slots,"caption",{},void 0,!0)]),e.createElementVNode("thead",null,[e.createElementVNode("tr",{role:"row",style:e.normalizeStyle(`background:${o.value.table.head.backgroundColor};color:${o.value.table.head.color}`)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value.table.head.values,(n,a)=>(e.openBlock(),e.createElementBlock("th",A,[e.renderSlot(t.$slots,"head",e.mergeProps({ref_for:!0},{value:n,rowIndex:a,type:typeof n,isResponsive:s.value}),void 0,!0)]))),256))],4)]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(I.value,(n,a)=>(e.openBlock(),e.createElementBlock("tr",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.displayValues,(i,u)=>(e.openBlock(),e.createElementBlock("td",{role:"cell","data-cell":o.value.table.head.values[u]},[n.color&&u===0?(e.openBlock(),e.createElementBlock("div",W,[n.color?(e.openBlock(),e.createElementBlock("svg",{key:0,height:o.value.style.shapeSize,width:o.value.style.shapeSize,viewBox:"0 0 20 20",style:{background:"none",overflow:"visible"}},[e.createVNode(q._sfc_main,{plot:{x:10,y:10},color:n.color,radius:9,shape:n.shape||"circle"},null,8,["color","shape"])],8,J)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"rowTitle",e.mergeProps({ref_for:!0},{value:i,rowIndex:a,colIndex:u,type:typeof i,isResponsive:s.value}),void 0,!0)])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[u===0?e.renderSlot(t.$slots,"rowTitle",e.mergeProps({key:0,ref_for:!0},{value:i,rowIndex:a,colIndex:u,type:typeof i,isResponsive:s.value}),void 0,!0):e.createCommentVNode("",!0),u>0?e.renderSlot(t.$slots,"cell",e.mergeProps({key:1,ref_for:!0},{value:i,rowIndex:a,colIndex:u,type:typeof i,isResponsive:s.value,color:n.colors[u],textColor:e.unref(l.adaptColorToBackground)(n.colors[u])}),void 0,!0):e.createCommentVNode("",!0)],64))],8,X))),256)),o.value.table.showSum?(e.openBlock(),e.createElementBlock("td",K,[e.renderSlot(t.$slots,"sum",e.mergeProps({ref_for:!0},{value:n.sum,rowIndex:a,isResponsive:s.value}),void 0,!0)])):e.createCommentVNode("",!0),o.value.table.showAverage?(e.openBlock(),e.createElementBlock("td",Q,[e.renderSlot(t.$slots,"average",e.mergeProps({ref_for:!0},{value:n.average,rowIndex:a,isResponsive:s.value}),void 0,!0)])):e.createCommentVNode("",!0),o.value.table.showMedian?(e.openBlock(),e.createElementBlock("td",Y,[e.renderSlot(t.$slots,"median",e.mergeProps({ref_for:!0},{value:n.median,rowIndex:a,isResponsive:s.value}),void 0,!0)])):e.createCommentVNode("",!0)]))),256))])],4),t.$slots.source?(e.openBlock(),e.createElementBlock("div",Z,[e.renderSlot(t.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0)],46,L))}},ee=H._export_sfc(j,[["__scopeId","data-v-a45c7e69"]]);exports.default=ee;