@ogurrr/minichart/main.min.js

Simple Library to creating charts in javascript

class minichart_line{constructor(t,i,e){this.canvas=t,this.height=i,this.width=e,this.context=t.getContext("2d"),this.showLabels=!0,this.margin=30}setLineColor(t){this.lineColor=t}toggleLabels(t){this.showLabels=t}setMargin(t){t>=0?this.margin=t:console.error("Margines musi być liczbą większą lub r\xf3wną 0.")}draw(t){if(!t||!Array.isArray(t)||0===t.length){console.error("Invalid JSON data.");return}let i=Math.min(...t.map(t=>t.x)),e=Math.max(...t.map(t=>t.x)),h=Math.min(...t.map(t=>t.y)),s=Math.max(...t.map(t=>t.y)),o=(this.width-2*this.margin)/(e-i),n=(this.height-2*this.margin)/(s-h);if(this.context.clearRect(0,0,this.width,this.height),this.context.beginPath(),this.context.rect(this.margin,this.margin,this.width-2*this.margin,this.height-2*this.margin),this.context.strokeStyle="#000000",this.context.lineWidth=2,this.context.stroke(),this.context.beginPath(),this.context.moveTo(this.margin,this.height-this.margin-h*n),this.context.lineTo(this.width-this.margin,this.height-this.margin-h*n),this.context.strokeStyle="#000000",this.context.stroke(),this.showLabels){let l=Math.ceil((e-i)/5);for(let r=i;r<=e;r+=l){let a=(r-i)*o+this.margin;this.context.beginPath(),this.context.moveTo(a,this.height-this.margin-h*n),this.context.lineTo(a,this.height-this.margin-h*n+5),this.context.stroke(),this.context.fillStyle="#000000",this.context.font="10px Arial",this.context.fillText(r,a-10,this.height-this.margin-h*n+15)}let c=Math.ceil((s-h)/5);for(let x=h;x<=s;x+=c){let $=this.height-this.margin-(x-h)*n;this.context.beginPath(),this.context.moveTo(this.margin,$),this.context.lineTo(this.margin-5,$),this.context.stroke(),this.context.fillStyle="#000000",this.context.font="10px Arial",this.context.fillText(x,this.margin-25,$+5)}}this.context.beginPath(),t.forEach((t,e)=>{let s=(t.x-i)*o+this.margin,l=this.height-this.margin-(t.y-h)*n;0===e?this.context.moveTo(s,l):this.context.lineTo(s,l)}),void 0===this.lineColor&&(this.lineColor="#3498db"),this.context.strokeStyle=this.lineColor,this.context.lineWidth=2,this.context.stroke()}}class minichart_pie{constructor(t,i){this.canvas=t,this.context=t.getContext("2d"),this.radius=i||Math.min(t.width,t.height)/2,this.centerX=t.width/2,this.centerY=t.height/2}draw(t){if(!t||!Array.isArray(t)||0===t.length){console.error("Invalid data.");return}let i=0;t.forEach(t=>{i+=t.value});let e=0;t.forEach(t=>{let h=t.value/i*2*Math.PI;this.context.beginPath(),this.context.moveTo(this.centerX,this.centerY),this.context.arc(this.centerX,this.centerY,this.radius,e,e+h),this.context.fillStyle=t.color||this.getRandomColor(),this.context.fill(),t.label&&this.drawLabel(e,h,t.label),e+=h})}getRandomColor(){let t="#";for(let i=0;i<6;i++)t+="0123456789ABCDEF"[Math.floor(16*Math.random())];return t}setFont(t){this.font=t}setFontColor(t){this.fontColor=t}drawLabel(t,i,e){let h=t+i/2,s=this.centerX+Math.cos(h)*(this.radius/1.5),o=this.centerY+Math.sin(h)*(this.radius/1.5);void 0===this.fontColor&&(this.context.fillStyle="#000000"),void 0===this.font&&(this.context.font="14px Arial"),this.context.fillText(e,s,o)}}class minichart_column{constructor(t,i,e){this.canvas=t,this.context=t.getContext("2d"),this.height=i,this.width=e}draw(t,i="above"){if(!t||!Array.isArray(t)||0===t.length){console.error("Invalid data.");return}let e=this.width/t.length,h=Math.max(...t.map(t=>t.value));t.forEach((t,s)=>{let o=s*e,n=t.value/h*this.height;this.context.beginPath(),this.context.rect(o,this.height-n,e-2,n),this.context.fillStyle=t.color||this.getRandomColor(),this.context.fill(),t.label&&this.drawLabel(o+e/2,this.height-n,t.label,i)})}getRandomColor(){let t="#";for(let i=0;i<6;i++)t+="0123456789ABCDEF"[Math.floor(16*Math.random())];return t}setFont(t){this.font=t}setFontColor(t){this.fontColor=t}drawLabel(t,i,e,h){void 0===this.fontColor&&(this.context.fillStyle="#000000"),void 0===this.font&&(this.context.font="12px Arial"),this.context.textAlign="center","above"===h?this.context.fillText(e,t,i-5):"below"===h?this.context.fillText(e,t,i+15):"inside"===h&&(this.context.save(),this.context.translate(t,i-(i-(this.height-5))/2),this.context.rotate(Math.PI/2),this.context.fillText(e,0,0),this.context.restore())}}class minichart_point{constructor(t,i,e){this.canvas=t,this.context=t.getContext("2d"),this.height=i,this.width=e,this.tooltip=null,this.offsetX=0,this.offsetY=0}draw(t,i="above",e=!0){if(!t||!Array.isArray(t)||0===t.length){console.error("Invalid data.");return}let h=this.width/1e3,s=this.height/1e3;e&&this.drawGrid(),t.forEach(t=>{let e=t.x*h,o=this.height-t.y*s;this.context.beginPath(),this.context.arc(e,o,5,0,2*Math.PI),this.context.fillStyle=t.color||this.getRandomColor(),this.context.fill(),t.label&&this.drawLabel(e,o,t.label,i),this.canvas.addEventListener("mousemove",i=>{let h=i.offsetX-this.offsetX,s=i.offsetY-this.offsetY;10>Math.sqrt(Math.pow(h-e,2)+Math.pow(s-o,2))?this.showTooltip(i,t):this.hideTooltip()})})}drawGrid(){let t=this.width/10,i=this.height/10;for(let e=0;e<=10;e++)this.context.beginPath(),this.context.moveTo(e*t,0),this.context.lineTo(e*t,this.height),this.context.strokeStyle="#ddd",this.context.stroke();for(let h=0;h<=10;h++)this.context.beginPath(),this.context.moveTo(0,h*i),this.context.lineTo(this.width,h*i),this.context.strokeStyle="#ddd",this.context.stroke()}getRandomColor(){let t="#";for(let i=0;i<6;i++)t+="0123456789ABCDEF"[Math.floor(16*Math.random())];return t}setFont(t){this.font=t}setFontColor(t){this.fontColor=t}drawLabel(t,i,e,h){void 0===this.fontColor&&(this.context.fillStyle="#000000"),void 0===this.font&&(this.context.font="12px Arial"),this.context.textAlign="center","above"===h?this.context.fillText(e,t,i-5):"below"===h?this.context.fillText(e,t,i+15):"inside"===h&&(this.context.save(),this.context.translate(t,i-(i-(this.height-5))/2),this.context.rotate(Math.PI/2),this.context.fillText(e,0,0),this.context.restore())}showTooltip(t,i){this.tooltip||(this.tooltip=document.createElement("div"),this.tooltip.style.position="absolute",this.tooltip.style.backgroundColor="#fff",this.tooltip.style.border="1px solid #ddd",this.tooltip.style.padding="5px",this.tooltip.style.boxShadow="0px 0px 5px rgba(0, 0, 0, 0.2)",document.body.appendChild(this.tooltip)),this.tooltip.style.left=`${t.pageX+10}px`,this.tooltip.style.top=`${t.pageY+10}px`,this.tooltip.innerHTML=`X: ${i.x}<br>Y: ${i.y}<br>Label: ${i.label}`}hideTooltip(){this.tooltip&&(this.tooltip.style.display="none")}}class minichart_progressbar{constructor(t,i,e){this.canvas=t,this.height=i,this.width=e,this.context=t.getContext("2d"),this.margin=10,this.progress=0}setProgress(t){t>=0&&t<=100?this.progress=t:console.error("Progress value must be between 0 and 100.")}setMargin(t){t>=0?this.margin=t:console.error("Margin must be a number greater than or equal to 0.")}draw(){this.context.clearRect(0,0,this.width,this.height),this.context.fillStyle="#e0e0e0",this.context.fillRect(this.margin,this.margin,this.width-2*this.margin,this.height-2*this.margin),this.context.fillStyle="#76c7c0";let t=(this.width-2*this.margin)*(this.progress/100);this.context.fillRect(this.margin,this.margin,t,this.height-2*this.margin),this.context.strokeStyle="#000000",this.context.lineWidth=2,this.context.strokeRect(this.margin,this.margin,this.width-2*this.margin,this.height-2*this.margin),this.context.fillStyle="#000000",this.context.font="14px Arial",this.context.fillText(`${this.progress}%`,this.width/2-15,this.height/2+5)}}module.exports=minichart_line;