smart-webcomponents-react/source/smart.sparkline.js

[](https://jqwidgets.com/license/)

/* Smart UI v23.0.8 (2025-05-13) 
Copyright (c) 2011-2024 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart("smart-sparkline",class extends Smart.BaseElement{static get properties(){return{width:{value:100,type:"number"},height:{value:30,type:"number"},gap:{value:5,type:"number"},strokeWidth:{value:2,type:"number"},type:{value:"bar",type:"string"},colors:{value:["gray"],type:"array"},points:{value:[],type:"any"},labels:{value:[],type:"any"},format:{value:[],type:"any"}}}get enableShadowDOM(){return!1}template(){return'<div id="container" role="presentation">\n                </div>'}render(){const t=this,e={svg:null,width:t.width,height:t.height,gap:t.gap,strokeWidth:t.strokeWidth,type:t.type,colors:t.colors,points:t.points,labels:t.labels,format:t.format};switch(e.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),e.svg.setAttribute("width",e.width),e.svg.setAttribute("height",e.height),function(e){Array.isArray(e.colors)||(e.colors=t.colors.split(",")),e.points&&(t.$.container.innerHTML="",e.points=e.points.split(",").map((t=>parseInt(t,10))))}(e),e.type){case"bar":t.bar(e);break;case"line":t.line(e);break;case"pie":t.pie(e);break;case"stacked":t.stacked(e)}super.render()}refresh(){this.render()}propertyChangedHandler(t,e,s){super.propertyChangedHandler(t,e,s),this.render()}bar(t){const e=t.gap/t.points.length+t.width/t.points.length-t.gap,s=Math.max(...t.points);t.points.forEach(((i,n)=>{const r=t.colors[n%t.colors.length],o=document.createElementNS("http://www.w3.org/2000/svg","rect"),a=i/s*t.height;o.setAttribute("x",n*e+n*t.gap),o.setAttribute("y",t.height-a),o.setAttribute("width",e),o.setAttribute("height",a),o.setAttribute("fill",r);const h=document.createElementNS("http://www.w3.org/2000/svg","title");h.textContent=i,o.appendChild(h),t.svg.appendChild(o)})),this.$.container.appendChild(t.svg)}line(t){const e=t.width/(t.points.length-1),s=Math.max(...t.points),i=[];t.points.forEach(((n,r)=>{const o=n/s*t.height,a=r*e,h=t.height-o;i.push(`${a},${h}`)}));const n=document.createElementNS("http://www.w3.org/2000/svg","polyline");n.setAttribute("points",i.join(" ")),n.setAttribute("fill","none"),n.setAttribute("stroke-width",t.strokeWidth),n.setAttribute("stroke",t.colors[0]),t.svg.appendChild(n),this.$.container.appendChild(t.svg)}pie(t){const e=Math.min(t.width,t.height)/2,s=t.width/2,i=t.height/2,n=t.points.reduce(((t,e)=>t+e),0);let r=0;t.points.forEach(((o,a)=>{const h=t.colors[a%t.colors.length],p=o/n*2*Math.PI,l=r+p,c=s+e*Math.cos(r),d=i+e*Math.sin(r),g=s+e*Math.cos(l),u=i+e*Math.sin(l),w=document.createElementNS("http://www.w3.org/2000/svg","path"),b=p>Math.PI?1:0,m=`M ${s},${i} L ${c},${d} A ${e},${e} 0 ${b} 1 ${g},${u} Z`;w.setAttribute("d",m),w.setAttribute("fill",h);const v=document.createElementNS("http://www.w3.org/2000/svg","title");v.textContent=`${(o/n*100).toFixed(2)}%`,w.appendChild(v),t.svg.appendChild(w),r=l})),this.$.container.appendChild(t.svg)}stacked(t){let e=t.points.reduce(((t,e)=>t+e),0),s=(t.points.length-1)*t.gap,i=t.width-s,n=0;t.points.forEach(((s,r)=>{const o=t.colors[r%t.colors.length],a=s/e*i,h=document.createElementNS("http://www.w3.org/2000/svg","rect");h.setAttribute("x",n),h.setAttribute("y",0),h.setAttribute("width",a),h.setAttribute("height",t.height),h.setAttribute("fill",o);const p=document.createElementNS("http://www.w3.org/2000/svg","title");p.textContent=s,h.appendChild(p),t.svg.appendChild(h),n+=a+t.gap})),this.$.container.appendChild(t.svg)}});