1 line
2.7 KiB
JavaScript
1 line
2.7 KiB
JavaScript
|
define("components/chart",[],function(){return class e{constructor(e){this.element=e,this.state={},this.chartHeight=100,this.numberOfDates=6,this.source=[],this.maxValue,this.minValue;for(let e in chartValues)this.source.push({dateString:e,days:this.getDateInDays(e),value:chartValues[e],count:chartValues[e]}),this.maxValue=this.maxValue?Math.max(this.maxValue,chartValues[e]):chartValues[e],this.minValue=this.minValue?Math.min(this.minValue,chartValues[e]):chartValues[e];this.source.map(e=>{return e.value=(e.value-this.minValue)/(this.maxValue-this.minValue),e}),this.rangeOfDays=this.source[this.source.length-1].days-this.source[0].days,this.chartCards1=this.insertCards(this.element.querySelector(".chart__cards--desktop"),17),this.chartCards2=this.insertCards(this.element.querySelector(".chart__cards--small"),11),this.chartCards3=this.insertCards(this.element.querySelector(".chart__cards--mobile"),6)}init(){this.delayedDropClass(this.chartCards1,50,"fix",()=>{setTimeout(()=>{this.element.querySelector(".chart__cards--desktop").classList.remove("loading")},1e3)}),this.delayedDropClass(this.chartCards2,50,"fix",()=>{setTimeout(()=>{this.element.querySelector(".chart__cards--small").classList.remove("loading")},1e3)}),this.delayedDropClass(this.chartCards3,50,"fix",()=>{setTimeout(()=>{this.element.querySelector(".chart__cards--mobile").classList.remove("loading")},1e3)})}delayedDropClass(e,t,s,a,i){void 0===i&&(i=e.length-1),e[i].classList.remove(s),i>0?setTimeout(()=>{this.delayedDropClass(e,t,s,a,i-1)},t+30*Math.random()):a&&a()}insertCards(e,t){let s=document.createElement("div");s.className="chart__card fix";let a=this.element.querySelectorAll(".chart__date"),i=this.element.querySelector(".chart__button");for(let r=0;r<t;r++){let c=s.cloneNode();c.style.right=100*r/(t-1)+"%",c.style.bottom=this.getValue((t-1-r)/(t-1))*this.chartHeight+"%";let h=Math.floor((t-r)/(t/(this.numberOfDates-1)));c.addEventListener("mouseover",()=>{0==r?i.classList.add("active"):i.classList.remove("active"),this.element.querySelectorAll(".chart__date.active").forEach(e=>{e.classList.contains("active")&&e.classList.remove("active")}),a[h].classList.add("active")}),e.appendChild(c)}return e.addEventListener("mouseleave",()=>{this.element.querySelectorAll(".chart__date.active").forEach(e=>{e.classList.remove("active")}),i.classList.remove("active")}),e.querySelectorAll(".chart__card")}getValue(e){let t,s,a=this.source[0].days+Math.floor(e*this.rangeOfDays);for(let e=0;e<this.source.length;e++)if(!s&&this.source[e].days>=a)return s=this.source[e],t=0==e?s:this.source[e-1],0==e?t.value:t.value+(a-t.days)*(s.value-t.value)/(s.days-t.days)}getDateInDays(e){let t=e.split("."),s=new Date(t[2],t[1],t[0]);return Math.floor(s/864e5)}}});
|