@coderundebug/ui-web/ui-day-chart.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as t}from"./ui-tools.js";class i{static TYPE_VERTICAL=0;static TYPE_HORIZONTAL=1;constructor(){this.t=null,this.i={},this.i.x=0,this.i.y=0,this.i.width=0,this.i.height=0,this.h={},this.h.x=0,this.h.y=0,this.h.width=0,this.h.height=0,this.o={},this.o.x=0,this.o.y=0,this.o.width=0,this.o.height=0,this.p={},this.p.x=0,this.p.y=0,this.p.width=0,this.p.height=0,this.l=null,this.u=null,this.m=[],this.v=0,this.k=0,this._=0,this.D=0,this.I=[],this.A=[],this.T=0,this.C=0,this.M=0,this.L=0,this.F=0,this.j=0,this.P=[],this.H=[],this.U=this.U.bind(this),this.O=this.O.bind(this),this.W=this.W.bind(this),this.G=this.G.bind(this),this.R=this.R.bind(this)}get options(){return this.t}get innerArea(){return this.i}get monthAxisArea(){return this.h}get weekAxisArea(){return this.o}get dataArea(){return this.p}get fromDate(){return this.l}get toDate(){return this.u}get dataList(){return this.m}get chartWidth(){return this.v}get chartHeight(){return this.k}get valueMin(){return this._}get valueMax(){return this.D}get weekList(){return this.I}get gridColumnList(){return this.A}get dayTextList(){return this.P}get monthTextList(){return this.H}processOptions(t){if(this.t={},this.t.chartType=i.TYPE_HORIZONTAL,this.t.padding=12,this.t.fillWeek=!1,this.t.monthAxis={},this.t.legend={},this.t.legend.colorItemList=[],this.t.legend.formatTextCallback=this.U,this.t.monthAxis.show=!0,this.t.monthAxis.size=30,this.t.monthAxis.switch=!1,this.t.monthAxis.textType="short",this.t.monthAxis.rotateText=!1,this.t.monthAxis.textGap=8,this.t.monthAxis.formatTextCallback=this.O,this.t.weekAxis={},this.t.weekAxis.show=!0,this.t.weekAxis.size=40,this.t.weekAxis.switch=!1,this.t.weekAxis.startOfWeek="sun",this.t.weekAxis.startOfWeekType=0,this.t.weekAxis.textType="short",this.t.weekAxis.showSundayText=!1,this.t.weekAxis.showMondayText=!0,this.t.weekAxis.showTuesdayText=!1,this.t.weekAxis.showWednesdayText=!0,this.t.weekAxis.showThursdayText=!1,this.t.weekAxis.showFridayText=!0,this.t.weekAxis.showSaturdayText=!1,this.t.weekAxis.rotateText=!1,this.t.weekAxis.textGap=8,this.t.weekAxis.formatTextCallback=this.W,this.t.cell={},this.t.cell.fromValue=0,this.t.cell.toValue=1,this.t.cell.emptyColor="#b0bec5",this.t.cell.fromColor="#a6c4f5",this.t.cell.toColor="#0047b7",this.t.cell.colorCount=4,this.t.cell.colorList=[],this.t.cell.size=12,this.t.cell.gap=4,this.t.cell.radius=2,this.t.popup={},this.t.popup.show=!1,this.t.popup.formatInfoTextCallback=this.G,this.t.popup.formatValueTextCallback=this.R,t){const s="undefined";if("vertical"===t.type&&(this.t.chartType=i.TYPE_VERTICAL),"horizontal"===t.type&&(this.t.chartType=i.TYPE_HORIZONTAL),this.t.chartType===i.TYPE_VERTICAL&&(this.t.monthAxis.size=40,this.t.weekAxis.size=30,this.t.weekAxis.textType="narrow"),typeof t.padding!==s&&(this.t.padding=t.padding),typeof t.fillWeek!==s&&(this.t.fillWeek=t.fillWeek),"object"==typeof t.legend&&(!0===Array.isArray(t.legend.colorItemList)&&t.legend.colorItemList.forEach((t=>{const i={};i.name=t.name,this.t.legend.colorItemList.push(i)})),typeof t.legend.formatTextCallback!==s&&(this.t.legend.formatTextCallback=t.legend.formatTextCallback)),"object"==typeof t.monthAxis&&(typeof t.monthAxis.show!==s&&(this.t.monthAxis.show=t.monthAxis.show),typeof t.monthAxis.size!==s&&(this.t.monthAxis.size=t.monthAxis.size),typeof t.monthAxis.switch!==s&&(this.t.monthAxis.switch=t.monthAxis.switch),typeof t.monthAxis.textType!==s&&(this.t.monthAxis.textType=t.monthAxis.textType),typeof t.monthAxis.rotateText!==s&&(this.t.monthAxis.rotateText=t.monthAxis.rotateText),typeof t.monthAxis.textGap!==s&&(this.t.monthAxis.textGap=t.monthAxis.textGap),typeof t.monthAxis.formatTextCallback!==s&&(this.t.monthAxis.formatTextCallback=t.monthAxis.formatTextCallback)),"object"==typeof t.weekAxis){typeof t.weekAxis.show!==s&&(this.t.weekAxis.show=t.weekAxis.show),typeof t.weekAxis.size!==s&&(this.t.weekAxis.size=t.weekAxis.size),typeof t.weekAxis.switch!==s&&(this.t.weekAxis.switch=t.weekAxis.switch),typeof t.weekAxis.startOfWeek!==s&&(this.t.weekAxis.startOfWeek=t.weekAxis.startOfWeek),typeof t.weekAxis.textType!==s&&(this.t.weekAxis.textType=t.weekAxis.textType),typeof t.weekAxis.showSundayText!==s&&(this.t.weekAxis.showSundayText=t.weekAxis.showSundayText),typeof t.weekAxis.showMondayText!==s&&(this.t.weekAxis.showMondayText=t.weekAxis.showMondayText),typeof t.weekAxis.showTuesdayText!==s&&(this.t.weekAxis.showTuesdayText=t.weekAxis.showTuesdayText),typeof t.weekAxis.showWednesdayText!==s&&(this.t.weekAxis.showWednesdayText=t.weekAxis.showWednesdayText),typeof t.weekAxis.showThursdayText!==s&&(this.t.weekAxis.showThursdayText=t.weekAxis.showThursdayText),typeof t.weekAxis.showFridayText!==s&&(this.t.weekAxis.showFridayText=t.weekAxis.showFridayText),typeof t.weekAxis.showSaturdayText!==s&&(this.t.weekAxis.showSaturdayText=t.weekAxis.showSaturdayText),typeof t.weekAxis.rotateText!==s&&(this.t.weekAxis.rotateText=t.weekAxis.rotateText),typeof t.weekAxis.textGap!==s&&(this.t.weekAxis.textGap=t.weekAxis.textGap),typeof t.weekAxis.formatTextCallback!==s&&(this.t.weekAxis.formatTextCallback=t.weekAxis.formatTextCallback);const i=this.t.weekAxis.startOfWeek.toLowerCase().substring(0,3);"sun"===i&&(this.t.weekAxis.startOfWeekType=0),"mon"===i&&(this.t.weekAxis.startOfWeekType=1),"tue"===i&&(this.t.weekAxis.startOfWeekType=2),"wed"===i&&(this.t.weekAxis.startOfWeekType=3),"thu"===i&&(this.t.weekAxis.startOfWeekType=4),"fri"===i&&(this.t.weekAxis.startOfWeekType=5),"sat"===i&&(this.t.weekAxis.startOfWeekType=6)}"object"==typeof t.cell&&(typeof t.cell.fromValue!==s&&(this.t.cell.fromValue=t.cell.fromValue),typeof t.cell.toValue!==s&&(this.t.cell.toValue=t.cell.toValue),typeof t.cell.emptyColor!==s&&(this.t.cell.emptyColor=t.cell.emptyColor),typeof t.cell.fromColor!==s&&(this.t.cell.fromColor=t.cell.fromColor),typeof t.cell.toColor!==s&&(this.t.cell.toColor=t.cell.toColor),typeof t.cell.colorCount!==s&&(this.t.cell.colorCount=t.cell.colorCount),typeof t.cell.size!==s&&(this.t.cell.size=t.cell.size),typeof t.cell.gap!==s&&(this.t.cell.gap=t.cell.gap),typeof t.cell.radius!==s&&(this.t.cell.radius=t.cell.radius),(this.t.cell.colorCount<=1||this.t.cell.colorCount>255)&&(this.t.cell.colorCount=5),!0===Array.isArray(t.cell.colorList)&&t.cell.colorList.forEach((t=>{this.t.cell.colorList.push(t)}))),"object"==typeof t.popup&&(typeof t.popup.show!==s&&(this.t.popup.show=t.popup.show),typeof t.popup.formatInfoTextCallback!==s&&(this.t.popup.formatInfoTextCallback=t.popup.formatInfoTextCallback),typeof t.popup.formatValueTextCallback!==s&&(this.t.popup.formatValueTextCallback=t.popup.formatValueTextCallback)),7===this.t.cell.fromColor.length&&!0===this.t.cell.fromColor.startsWith("#")&&(this.T=parseInt(this.t.cell.fromColor.substring(1,3),16),this.C=parseInt(this.t.cell.fromColor.substring(3,5),16),this.M=parseInt(this.t.cell.fromColor.substring(5,7),16)),7===this.t.cell.toColor.length&&!0===this.t.cell.toColor.startsWith("#")&&(this.L=parseInt(this.t.cell.toColor.substring(1,3),16),this.F=parseInt(this.t.cell.toColor.substring(3,5),16),this.j=parseInt(this.t.cell.toColor.substring(5,7),16))}this.V(),this.Y()}processData(t,s,e){if(this.l=t,this.u=s,this.m=[],!e)return;if(!1===Array.isArray(e))return;const h=this.t.cell.fromValue,r=this.t.cell.toValue;e.forEach((t=>{if("object"!=typeof t.date)return;if(!(t.date instanceof Date))return;if("number"!=typeof t.value)return;if(t.value<h)return;if(t.value>r)return;const i={};i.date=t.date,i.value=t.value,i.text=t.text,i.dayOfMonth=t.date.getDate(),i.month=t.date.getMonth()+1,i.year=t.date.getFullYear(),i.dayOfWeek=t.date.getDay(),this.m.push(i)}));for(let t=0;t<this.m.length;t++){this.m[t].selectIndex=t}this.m.sort(this.B);for(let t=0;t<this.m.length;t++){this.m[t].index=t}if(this._=this.l,this.D=this.u,!0===this.t.fillWeek){for(let t=0;t<7;t++){if(this._.getDay()===this.t.weekAxis.startOfWeekType)break;this._.setDate(this._.getDate()-1)}let t=this.t.weekAxis.startOfWeekType+6;t>=7&&(t-=7);for(let i=0;i<7;i++){if(this.D.getDay()===t)break;this.D.setDate(this.D.getDate()+1)}}if(0===this.t.cell.colorList.length){const t=(this.L-this.T)/(this.t.cell.colorCount-1),i=(this.F-this.C)/(this.t.cell.colorCount-1),s=(this.j-this.M)/(this.t.cell.colorCount-1);for(let e=0;e<this.t.cell.colorCount;e++){const h=Math.floor(this.T+t*e),r=Math.floor(this.C+i*e),o=Math.floor(this.M+s*e);let n=h.toString(16),a=r.toString(16),p=o.toString(16);1===n.length&&(n="0"+n),1===a.length&&(a="0"+a),1===p.length&&(p="0"+p);const l="#"+n+a+p;this.t.cell.colorList.push(l)}}const o=this.t.cell.toValue-this.t.cell.fromValue,n=new Map;this.m.forEach((t=>{if(!0===n.has(t.value))return void(t.color=n.get(t.value));const i=(t.value-this.t.cell.fromValue)/o,s=Math.floor(i*(this.t.cell.colorList.length-1));t.color=this.t.cell.colorList[s],n.set(t.value,t.color)})),this.I=[];for(let t=0;t<7;t++){let i=t+this.t.weekAxis.startOfWeekType;i>=7&&(i-=7);const s={};s.dayOfWeek=i,this.I.push(s)}let a=this._.getDay(),p=0;for(let t=0;t<this.I.length;t++){if(this.I[t].dayOfWeek===a){p=t;break}}this.A=[];let l=this._,u={};for(u.date=l,u.cellList=[];;){const t={};t.date=l,t.weekIndex=p,t.dataItem=this.N(l),u.cellList.push(t),l=new Date(l),l.setDate(l.getDate()+1),p++;let i=!1;if(p>=7&&(i=!0),l>this.D&&(i=!0),!1!==i){if(this.A.push(u),l>this.D)break;u={},u.date=l,u.cellList=[],p=0}}this.t.chartType===i.TYPE_HORIZONTAL&&(this.k=2*this.t.padding+7*this.t.cell.size+6*this.t.cell.gap,!0===this.t.monthAxis.show&&(this.k+=this.t.monthAxis.size),this.v=2*this.t.padding+this.t.cell.size*this.A.length+this.t.cell.gap*(this.A.length-1),!0===this.t.weekAxis.show&&(this.v+=this.t.weekAxis.size)),this.t.chartType===i.TYPE_VERTICAL&&(this.k=2*this.t.padding+this.t.cell.size*this.A.length+this.t.cell.gap*(this.A.length-1),!0===this.t.weekAxis.show&&(this.k+=this.t.weekAxis.size),this.v=2*this.t.padding+7*this.t.cell.size+6*this.t.cell.gap,!0===this.t.monthAxis.show&&(this.v+=this.t.monthAxis.size))}N(t){if(0===this.m.length)return null;const i={};i.year=t.getFullYear(),i.month=t.getMonth()+1,i.dayOfMonth=t.getDate();let s=0,e=this.m.length-1,h=0,r=0;for(;;){h=Math.floor((s+e)/2);const t=this.m[h];if(r=this.B(t,i),0===r)return t;if(s===e)return null;1===r&&(e=e===h?s:h),-1===r&&(s=s===h?e:h)}}calculateInnerArea(){const t=this.t,s=this.i,e=this.h,h=this.o,r=this.p;s.x=t.padding,s.y=t.padding,s.width=this.v-2*t.padding,s.height=this.k-2*t.padding,this.t.chartType===i.TYPE_HORIZONTAL&&(!0===t.weekAxis.show&&(!1===t.weekAxis.switch&&(h.x=s.x,h.width=t.weekAxis.size,e.x=s.x+t.weekAxis.size,e.width=s.width-t.weekAxis.size,r.x=s.x+t.weekAxis.size,r.width=s.width-t.weekAxis.size),!0===t.weekAxis.switch&&(h.x=s.x+s.width-t.weekAxis.size,h.width=t.weekAxis.size,e.x=s.x,e.width=s.width-t.weekAxis.size,r.x=s.x,r.width=s.width-t.weekAxis.size)),!1===t.weekAxis.show&&(h.x=0,h.width=0,e.x=s.x,e.width=s.width,r.x=s.x,r.width=s.width),!0===t.monthAxis.show&&(!1===t.monthAxis.switch&&(h.y=s.y+t.monthAxis.size,h.height=s.height-t.monthAxis.size,e.y=s.y,e.height=t.monthAxis.size,r.y=s.y+t.monthAxis.size,r.height=s.height-t.monthAxis.size),!0===t.monthAxis.switch&&(h.y=s.y,h.height=s.height-t.monthAxis.size,e.y=s.y+s.height-t.monthAxis.size,e.height=t.monthAxis.size,r.y=s.y,r.height=s.height-t.monthAxis.size)),!1===t.monthAxis.show&&(h.y=s.y,h.height=s.height,e.y=0,e.height=0,r.y=s.y,r.height=s.height)),this.t.chartType===i.TYPE_VERTICAL&&(!0===t.monthAxis.show&&(!1===t.monthAxis.switch&&(h.x=s.x+t.monthAxis.size,h.width=s.width-t.monthAxis.size,e.x=s.x,e.width=t.monthAxis.size,r.x=s.x+t.monthAxis.size,r.width=s.width-t.monthAxis.size),!0===t.monthAxis.switch&&(h.x=s.x,h.width=s.width-t.monthAxis.size,e.x=s.x+s.width-t.monthAxis.size,e.width=t.monthAxis.size,r.x=s.y,r.width=s.width-t.monthAxis.size)),!1===t.monthAxis.show&&(h.x=s.y,h.width=s.height,e.x=0,e.width=0,r.x=s.y,r.width=s.height),!0===t.weekAxis.show&&(!1===t.weekAxis.switch&&(h.y=s.y,h.height=t.weekAxis.size,e.y=s.y+t.weekAxis.size,e.height=s.height-t.weekAxis.size,r.y=s.y+t.weekAxis.size,r.height=s.height-t.weekAxis.size),!0===t.weekAxis.switch&&(h.y=s.y+s.height-t.weekAxis.size,h.height=t.weekAxis.size,e.y=s.y,e.height=s.height-t.weekAxis.size,r.y=s.y,r.height=s.height-t.weekAxis.size)),!1===t.weekAxis.show&&(h.y=0,h.height=0,e.y=s.y,e.height=s.height,r.y=s.y,r.height=s.height))}B(t,i){return t.year>i.year?1:t.year<i.year?-1:t.month>i.month?1:t.month<i.month?-1:t.dayOfMonth>i.dayOfMonth?1:t.dayOfMonth<i.dayOfMonth?-1:0}V(){this.H=[];const t=Intl.DateTimeFormat(void 0,{year:"numeric",month:this.t.monthAxis.textType,weekday:"short"});for(let i=0;i<12;i++){const s=new Date(2024,i,1),e=t.formatToParts(s);let h="?";for(let t=0;t<e.length;t++){const i=e[t];if("month"===i.type){h=i.value;break}}this.H.push(h)}}Y(){this.P=[];const t=Intl.DateTimeFormat(void 0,{year:"numeric",month:"short",weekday:this.t.weekAxis.textType});for(let i=0;i<7;i++){const s=new Date(2026,0,4+i),e=t.formatToParts(s);let h="?";for(let t=0;t<e.length;t++){const i=e[t];if("weekday"===i.type){h=i.value;break}}this.P.push(h)}}U(t){return t<this.t.legend.colorItemList.length?this.t.legend.colorItemList[t].name:""}O(t,i){return this.H[t-1]}W(t){return this.P[t]}G(t,i){return i.toDateString()}R(t,i){if(!t)return"";if(t.text)return t.text;return t.value.toString()}}class s{constructor(t,i){this.S=t,this.Z=i,this.q=t.shadowRoot.querySelector(".base"),this.J=t.shadowRoot.getElementById("chart"),this.K=t.shadowRoot.getElementById("popup"),this.X=t.shadowRoot.getElementById("popup-color"),this.$=t.shadowRoot.getElementById("popup-info"),this.tt=t.shadowRoot.getElementById("popup-value"),this.it=this.it.bind(this),this.st=this.st.bind(this),this.et=[],this.ht=null,this.rt=null}addEvents(){this.et.forEach((t=>{t.removeEventListener("pointermove",this.it),t.removeEventListener("pointerout",this.st)})),this.et=this.S.shadowRoot.querySelectorAll(".cell"),this.et.forEach((t=>{t.addEventListener("pointermove",this.it),t.addEventListener("pointerout",this.st)}))}removeEvents(t){this.et.forEach((t=>{t.removeEventListener("pointermove",this.it),t.removeEventListener("pointerout",this.st)}))}chartDateHighlight(t){if(null==t)return this.K.style.display="none",void(this.ht=null);if("object"!=typeof t)return;if(!(t instanceof Date))return;const i=this.S.shadowRoot.querySelector('.cell[data-date="'+t.toISOString().substring(0,10)+'"]');i&&this.ot(i)}it(t){let i=t.target;null!==i&&(this.ot(i),this.nt(i))}st(t){this.K.style.display="none",this.ht=null}nt(t){let i;if("string"==typeof t.dataset.index){const s=parseInt(t.dataset.index);i=this.Z.dataList[s].value}parseInt(t.dataset.index);const s=t.dataset.date;if(s===this.rt)return;this.rt=s;const e=new CustomEvent("highlighted",{bubbles:!0,composed:!0,detail:{date:s,value:i}});this.S.dispatchEvent(e)}ot(t){if(!1===this.Z.options.popup.show)return;if(t===this.ht)return;this.ht=t;const i=t.dataset.date,s=new Date(i),e=parseInt(t.dataset.index),h=this.Z.dataList[e],r=this.J.getBoundingClientRect(),o=t.getBoundingClientRect();let n=o.x-r.x+o.width/2,a=o.y-r.y+o.height/2;const p=this.Z.chartWidth/3,l=this.Z.chartWidth-this.Z.chartWidth/3;this.K.style.opacity=0,this.K.style.display="grid",this.K.classList.remove("triangle-top","triangle-bottom","triangle-left","triangle-right"),this.lt(h,s);const u=this.K.getBoundingClientRect();this.K.classList.add("triangle-top");const c=this.K.getBoundingClientRect();this.K.classList.remove("triangle-top");let d=null,f=null,g=null,m=null;const v=c.height-u.height;n<p?a<=c.height/2?n<u.width/2?(g=a+v,d=n+v):(this.K.classList.add("triangle-top"),g=a,d=n-u.width/2):a>r.height-c.height?n<u.width/2?(m=r.height-a+v,d=n+v):(this.K.classList.add("triangle-bottom"),m=r.height-a,d=n-u.width/2):(this.K.classList.add("triangle-left"),g=a-u.height/2,d=n):n>l?a<=c.height?n>=r.width-u.width/2?(g=a+v,f=r.width-n+v):(this.K.classList.add("triangle-top"),g=a,f=r.width-n-u.width/2):a>r.height-c.height?n>=r.width-u.width/2?(m=r.height-a+v,f=r.width-n+v):(this.K.classList.add("triangle-bottom"),m=r.height-a,f=r.width-n-u.width/2):(this.K.classList.add("triangle-right"),g=a-u.height/2,f=r.width-n):a<=c.height?(this.K.classList.add("triangle-top"),g=a,f=r.width-n-u.width/2):(this.K.classList.add("triangle-bottom"),m=r.height-a,f=r.width-n-u.width/2),this.K.style.left="",this.K.style.right="",this.K.style.top="",this.K.style.bottom="",d&&(this.K.style.left=d.toString()+"px"),f&&(this.K.style.right=f.toString()+"px"),g&&(this.K.style.top=g.toString()+"px"),m&&(this.K.style.bottom=m.toString()+"px"),this.K.style.opacity=1}lt(t,i){const s=this.Z.options,e=s.popup.formatInfoTextCallback(t,i),h=s.popup.formatValueTextCallback(t,i);this.X.style.backgroundColor=this.Z.options.cell.emptyColor,t&&(this.X.style.backgroundColor=t.color),this.$.innerText=e,this.tt.innerText=h,this.K.classList.remove("has-info","has-value"),e&&this.K.classList.add("has-info"),h&&this.K.classList.add("has-value"),e||h||(this.K.style.display="none")}}class e{constructor(t){this.Z=t}create(){this.Z.calculateInnerArea();const t=[];this.ut(t),this.ct(t),this.dt(t);return t.join("")}ut(t){const i=this.Z.options,s=this.Z.monthAxisArea,e=this.Z.options.cell.size,h=this.Z.options.cell.gap;let r="text-top",o="start";!1===i.monthAxis.switch&&(!1===i.monthAxis.rotateText&&(r="text-top",o="start"),!0===i.monthAxis.rotateText&&(r="middle",o="start")),!0===i.monthAxis.switch&&(!1===i.monthAxis.rotateText&&(r="hanging",o="start"),!0===i.monthAxis.rotateText&&(r="middle",o="end"));for(let n=0;n<this.Z.gridColumnList.length-1;n++){const a=this.Z.gridColumnList[n];for(let p=0;p<a.cellList.length;p++){const l=a.cellList[p];if(1!==l.date.getDate())continue;const u=i.monthAxis.formatTextCallback(l.date.getMonth()+1,l.date.getFullYear());let c=s.x+n*e;n>0&&(c+=n*h);let d=0;!1===i.monthAxis.switch&&(!1===i.monthAxis.rotateText&&(d=s.y+s.height-i.monthAxis.textGap),!0===i.monthAxis.rotateText&&(d=s.y+s.height-i.monthAxis.textGap,c+=e/2)),!0===i.monthAxis.switch&&(!1===i.monthAxis.rotateText&&(d=s.y+i.monthAxis.textGap),!0===i.monthAxis.rotateText&&(d=s.y+i.monthAxis.textGap,c+=e/2));let f="";!0===i.monthAxis.rotateText&&(f=' transform="rotate(-90,'+c.toString()+","+d.toString()+')" '),t.push('<text class="month-axis-text" x="'+c.toString()+'" y="'+d.toString()+'" dominant-baseline="'+r+'" text-anchor="'+o+'"'+f+">"+u+"</text>")}}}ct(t){const i=this.Z.options,s=this.Z.weekAxisArea,e=this.Z.options.cell.size,h=this.Z.options.cell.gap;let r="text-top",o="start";!1===i.weekAxis.switch&&(!1===i.weekAxis.rotateText&&(r="middle",o="end"),!0===i.weekAxis.rotateText&&(r="hanging",o="start")),!0===i.weekAxis.switch&&(!1===i.weekAxis.rotateText&&(r="middle",o="start"),!0===i.weekAxis.rotateText&&(r="text-top",o="start"));for(let n=0;n<this.Z.weekList.length;n++){const a=this.Z.weekList[n].dayOfWeek;if(0===a&&!1===i.weekAxis.showSundayText)continue;if(1===a&&!1===i.weekAxis.showMondayText)continue;if(2===a&&!1===i.weekAxis.showTuesdayText)continue;if(3===a&&!1===i.weekAxis.showWednesdayText)continue;if(4===a&&!1===i.weekAxis.showThursdayText)continue;if(5===a&&!1===i.weekAxis.showFridayText)continue;if(6===a&&!1===i.weekAxis.showSaturdayText)continue;const p=i.weekAxis.formatTextCallback(a);let l=s.y+n*e;n>0&&(l+=n*h);let u=0;!1===i.weekAxis.switch&&(!1===i.weekAxis.rotateText&&(u=s.x+s.width-i.weekAxis.textGap,l+=e/2),!0===i.weekAxis.rotateText&&(u=s.x+s.width-i.weekAxis.textGap)),!0===i.weekAxis.switch&&(!1===i.weekAxis.rotateText&&(u=s.x+i.weekAxis.textGap,l+=e/2),!0===i.weekAxis.rotateText&&(u=s.x+i.weekAxis.textGap));let c="";!0===i.weekAxis.rotateText&&(c=' transform="rotate(90,'+u.toString()+","+l.toString()+')" '),t.push('<text class="week-axis-text" x="'+u.toString()+'" y="'+l.toString()+'" dominant-baseline="'+r+'" text-anchor="'+o+'"'+c+">"+p+"</text>")}}dt(t){const i=this.Z.dataArea,s=this.Z.options.cell.size,e=this.Z.options.cell.gap,h=this.Z.options.cell.radius,r=this.Z.options.cell.emptyColor;for(let o=0;o<this.Z.gridColumnList.length;o++){const n=this.Z.gridColumnList[o];for(let a=0;a<n.cellList.length;a++){const p=n.cellList[a];let l=i.y+p.weekIndex*s;p.weekIndex>0&&(l+=p.weekIndex*e);let u=i.x+o*s;0!==o&&(u+=o*e),t.push('<rect class="cell" '),t.push('data-date="'+p.date.toISOString().substring(0,10)+'" ');let c=r;p.dataItem&&(t.push('data-index="'+p.dataItem.index.toString()+'" '),c=p.dataItem.color),t.push('style="--ui-cccc: '+c+';" '),t.push('x="'+u.toString()+'" '),t.push('y="'+l.toString()+'" '),t.push('width="'+s.toString()+'" '),t.push('height="'+s.toString()+'" '),h&&t.push('rx="'+h.toString()+'" '),t.push("></rect>")}}}}class h{constructor(t){this.Z=t}create(){this.Z.calculateInnerArea();const t=[];this.ut(t),this.ct(t),this.dt(t);return t.join("")}ut(t){const i=this.Z.options,s=this.Z.monthAxisArea,e=this.Z.options.cell.size,h=this.Z.options.cell.gap;let r="text-top",o="start";!1===i.monthAxis.switch&&(!1===i.monthAxis.rotateText&&(r="hanging",o="end"),!0===i.monthAxis.rotateText&&(r="hanging",o="start")),!0===i.monthAxis.switch&&(!1===i.monthAxis.rotateText&&(r="hanging",o="start"),!0===i.monthAxis.rotateText&&(r="text-top",o="start"));for(let n=0;n<this.Z.gridColumnList.length-1;n++){const a=this.Z.gridColumnList[n];for(let p=0;p<a.cellList.length;p++){const l=a.cellList[p];if(1!==l.date.getDate())continue;const u=i.monthAxis.formatTextCallback(l.date.getMonth()+1,l.date.getFullYear());let c=s.y+n*e;n>0&&(c+=n*h);let d=0;!1===i.monthAxis.switch&&(!1===i.monthAxis.rotateText&&(d=s.x+s.width-i.monthAxis.textGap),!0===i.monthAxis.rotateText&&(d=s.x+s.width-i.monthAxis.textGap)),!0===i.monthAxis.switch&&(!1===i.monthAxis.rotateText&&(d=s.x+i.monthAxis.textGap),!0===i.monthAxis.rotateText&&(d=s.x+i.monthAxis.textGap));let f="";!0===i.monthAxis.rotateText&&(f=' transform="rotate(90,'+d.toString()+","+c.toString()+')" '),t.push('<text class="month-axis-text" x="'+d.toString()+'" y="'+c.toString()+'" dominant-baseline="'+r+'" text-anchor="'+o+'"'+f+">"+u+"</text>")}}}ct(t){const i=this.Z.options,s=this.Z.weekAxisArea,e=this.Z.options.cell.size,h=this.Z.options.cell.gap;let r="text-top",o="start";!1===i.weekAxis.switch&&(!1===i.weekAxis.rotateText&&(r="text-top",o="start"),!0===i.weekAxis.rotateText&&(r="middle",o="start")),!0===i.weekAxis.switch&&(!1===i.weekAxis.rotateText&&(r="hanging",o="start"),!0===i.weekAxis.rotateText&&(r="middle",o="end"));for(let n=0;n<this.Z.weekList.length;n++){const a=this.Z.weekList[n].dayOfWeek;if(0===a&&!1===i.weekAxis.showSundayText)continue;if(1===a&&!1===i.weekAxis.showMondayText)continue;if(2===a&&!1===i.weekAxis.showTuesdayText)continue;if(3===a&&!1===i.weekAxis.showWednesdayText)continue;if(4===a&&!1===i.weekAxis.showThursdayText)continue;if(5===a&&!1===i.weekAxis.showFridayText)continue;if(6===a&&!1===i.weekAxis.showSaturdayText)continue;const p=i.weekAxis.formatTextCallback(a);let l=s.x+n*e;n>0&&(l+=n*h);let u=0;!1===i.weekAxis.switch&&(!1===i.weekAxis.rotateText&&(u=s.y+s.height-i.weekAxis.textGap),!0===i.weekAxis.rotateText&&(u=s.y+s.height-i.weekAxis.textGap,l+=e/2)),!0===i.weekAxis.switch&&(!1===i.weekAxis.rotateText&&(u=s.y+i.weekAxis.textGap),!0===i.weekAxis.rotateText&&(u=s.y+i.weekAxis.textGap,l+=e/2));let c="";!0===i.weekAxis.rotateText&&(c=' transform="rotate(-90,'+l.toString()+","+u.toString()+')" '),!1===i.weekAxis.rotateText&&1===p.length&&(l+=e/2,o="middle"),t.push('<text class="week-axis-text" x="'+l.toString()+'" y="'+u.toString()+'" dominant-baseline="'+r+'" text-anchor="'+o+'"'+c+">"+p+"</text>")}}dt(t){const i=this.Z.dataArea,s=this.Z.options.cell.size,e=this.Z.options.cell.gap,h=this.Z.options.cell.radius,r=this.Z.options.cell.emptyColor;for(let o=0;o<this.Z.gridColumnList.length;o++){const n=this.Z.gridColumnList[o];for(let a=0;a<n.cellList.length;a++){const p=n.cellList[a];let l=i.y+o*s;0!==o&&(l+=o*e);let u=i.x+p.weekIndex*s;p.weekIndex>0&&(u+=p.weekIndex*e),t.push('<rect class="cell" '),t.push('data-date="'+p.date.toISOString().substring(0,10)+'" ');let c=r;p.dataItem&&(t.push('data-index="'+p.dataItem.index.toString()+'" '),c=p.dataItem.color),t.push('style="--ui-cccc: '+c+';" '),t.push('x="'+u.toString()+'" '),t.push('y="'+l.toString()+'" '),t.push('width="'+s.toString()+'" '),t.push('height="'+s.toString()+'" '),h&&t.push('rx="'+h.toString()+'" '),t.push("></rect>")}}}}export class UiDayChart extends HTMLElement{constructor(){super(),this.Z=new i,this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiDayChart.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiDayChart.uiCssStyleSheet],this.J=this.shadowRoot.getElementById("chart"),this.ft=this.shadowRoot.getElementById("svg"),this.q=this.shadowRoot.querySelector(".base"),this.gt=new e(this.Z),this.vt=new h(this.Z),this.yt=new s(this,this.Z),this.xt=!1}connectedCallback(){}disconnectedCallback(){this.yt.removeEvents(this.J)}chartItemHighlight(t){}chartItemSelect(t){}chartDateHighlight(t){this.yt.chartDateHighlight(t)}getColorList(){return this.Z.options.cell.colorList}setChart(t,i,s,e){t&&i&&t instanceof Date&&i instanceof Date&&(t>=i||(this.Z.processOptions(e),this.Z.processData(t,i,s),this.bt(),this.wt=setTimeout((()=>{this.kt(),this.ft.style.opacity=1}),250)))}kt(){this.ft.innerHTML="",this.ft.setAttribute("viewbox","0 0 "+this.Z.chartWidth.toString()+" "+this.Z.chartHeight.toString());let t="";this.Z.options.chartType===i.TYPE_HORIZONTAL&&(t=this.gt.create()),this.Z.options.chartType===i.TYPE_VERTICAL&&(t=this.vt.create()),this.ft.innerHTML=t,this.ft.style.width=this.Z.chartWidth.toString()+"px",this.ft.style.height=this.Z.chartHeight.toString()+"px",this.yt.addEvents(this.J)}async bt(){const t=this._t();if(!t)return;await customElements.whenDefined("ui-chart-legend");const i=[];for(let t=0;t<this.Z.options.cell.colorList.length;t++){const s=this.Z.options.cell.colorList[t],e=this.Z.options.legend.formatTextCallback(t);if(!e)continue;const h={};h.color=s,h.legend=e,h.index=t,i.push(h)}t.setChart(i,this)}_t(){if(!1===this.hasAttribute("id"))return;let t=this.getAttribute("id");if(!t)return;const i='ui-chart-legend[for="'+t+'"]';let s=!0,e=this;for(;e;){if(!0===s&&e.querySelector){const t=e.querySelector(i);if(t)return t}if(e.assignedSlot)e=e.assignedSlot,s=!1;else if(e.parentElement)e=e.parentElement,s=!0;else if(e.parentNode)e=e.parentNode,s=!1;else{if(!e.host)break;e=e.host,s=!0}}}}UiDayChart.uiCss=":host{isolation:isolate;}.base{position:relative;direction:ltr;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;width:fit-content;height:fit-content;}#chart{grid-column:1;grid-row:1;display:flex;z-index:2;}#chart > svg{opacity:0;background-color:var(--ui-day-chart-background, var(--ui-background, hsl(0 0% 97% / 1)));transition:opacity var(--ui-day-chart-animation-show-duraction, var(--ui-animation-duration-default, 200ms)) linear;pointer-events:none;}.cell{pointer-events:all;user-select:none;-webkit-user-select:none;fill:var(--ui-cccc);stroke:color-mix(in hsl, var(--ui-cccc) 80%, black 20%);stroke-width:var(--ui-day-chart-cell-width, 1px);}.week-axis-text{user-select:none;-webkit-user-select:none;fill:var(--ui-day-chart-week-axis-text-color, var(--ui-foreground, hsl(0 0% 18% / 1)));stroke:none;font-size:var(--ui-day-chart-week-axis-text-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-day-chart-week-axis-text-font-weight, var(--ui-font-weight-normal, normal));}.month-axis-text{user-select:none;-webkit-user-select:none;fill:var(--ui-day-chart-month-axis-text-color, var(--ui-foreground, hsl(0 0% 18% / 1)));stroke:none;font-size:var(--ui-day-chart-month-axis-text-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-day-chart-month-axis-text-font-weight, var(--ui-font-weight-normal, normal));}#popup{position:absolute;display:none;z-index:3;pointer-events:none;--ui-cp-pbc:var(--ui-day-chart-popup-background, var(--ui-foreground, hsl(0 0% 18% / 1)));--ui-cp-pts:var(--ui-day-chart-popup-triangle-size, 8px);}#popup.triangle-top, #popup.triangle-bottom{grid-template-columns:1fr;grid-template-rows:auto auto;}#popup.triangle-left{grid-template-columns:1fr auto;grid-template-rows:1fr;}#popup.triangle-right{grid-template-columns:auto 1fr;grid-template-rows:1fr;}#popup.triangle-top .inner{grid-column:1;grid-row:2;}#popup.triangle-top .triangle{grid-column:1;grid-row:1;}#popup.triangle-bottom .inner{grid-column:1;grid-row:1;}#popup.triangle-bottom .triangle{grid-column:1;grid-row:2;}#popup.triangle-left .inner{grid-column:2;grid-row:1;}#popup.triangle-left .triangle{grid-column:1;grid-row:1;}#popup.triangle-right .inner{grid-column:1;grid-row:1;}#popup.triangle-right .triangle{grid-column:2;grid-row:1;}#popup .inner{display:grid;grid-template-columns:var(--ui-day-chart-popup-tab, 8px) 1fr;grid-template-rows:auto 1fr;row-gap:var(--ui-day-chart-popup-row-gap, 0);column-gap:var(--ui-day-chart-popup-column-gap, 4px);min-width:var(--ui-day-chart-popup-min-width, 100px);max-width:var(--ui-day-chart-popup-max-width, 150px);padding:var(--ui-day-chart-popup-padding, 4px);border-radius:var(--ui-day-chart-popup-radius, var(--ui-border-radius-small, 3px));background-color:var(--ui-cp-pbc);color:var(--ui-day-chart-popup-foreground, var(--ui-background, hsl(0 0% 90% / 1)));align-items:center;justify-items:center;user-select:none;-webkit-user-select:none;}#popup .triangle{width:0;height:0;}#popup.triangle-top .triangle{border-left:var(--ui-cp-pts) solid transparent;border-right:var(--ui-cp-pts) solid transparent;border-bottom:var(--ui-cp-pts) solid var(--ui-cp-pbc);justify-self:center;}#popup.triangle-bottom .triangle{border-left:var(--ui-cp-pts) solid transparent;border-right:var(--ui-cp-pts) solid transparent;border-top:var(--ui-cp-pts) solid var(--ui-cp-pbc);justify-self:center;}#popup.triangle-left .triangle{border-top:var(--ui-cp-pts) solid transparent;border-bottom:var(--ui-cp-pts) solid transparent;border-right:var(--ui-cp-pts) solid var(--ui-cp-pbc);align-self:center;}#popup.triangle-right .triangle{border-top:var(--ui-cp-pts) solid transparent;border-bottom:var(--ui-cp-pts) solid transparent;border-left:var(--ui-cp-pts) solid var(--ui-cp-pbc);align-self:center;}#popup.has-info.has-value{& #popup-info{grid-column:2;grid-row:1;}& #popup-value{grid-column:2;grid-row:2;}} #popup.has-value:not(.has-info){& .inner{min-width:0;}& #popup-info{display:none;}& #popup-value{grid-column:2;grid-row:1 / -1;}} #popup.has-info:not(.has-value){& .inner{min-width:0;}& #popup-info{grid-column:2;grid-row:1 / -1;}& #popup-value{display:none;}} #popup-info{font-size:var(--ui-day-chart-popup-info-font-size, var(--ui-font-size-small, 12px));font-weight:var(--ui-day-chart-popup-info-font-weight, var(--ui-font-weight-normal, normal));}#popup-value{font-size:var(--ui-day-chart-popup-value-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-day-chart-popup-value-font-weight, var(--ui-font-weight-bold, 600));}#popup-color{grid-column:1;grid-row:1 / -1;width:100%;height:100%;border-radius:2px;}::slotted(*:not(:defined)){display:none;}@media (prefers-reduced-motion){#chart > svg{transition:none;}}",UiDayChart.uiHtml='<div class="base"><div id="chart"><svg id="svg"></svg></div><div id="popup"><div class="triangle"></div><div class="inner"><div id="popup-color"></div><div id="popup-info"></div><div id="popup-value"></div></div></div></div>',t.createUi(UiDayChart,"ui-day-chart",import.meta.url);