wizechart/dist/wizechart.umd.js

A jQuery + Bootstrap simple progress bar chart plugin

(function(r){typeof define=="function"&&define.amd?define(["jquery"],r):r()})(function(){"use strict";(function(r){r.fn.WizeChart=function(g){const h={data:null,ajax:null,label:"{label}",value:a=>a,popover:{title:"{label}",content:a=>`${a} doses`,placement:"top"},color:"primary",colors:null,rulerPoints:5},t=r.extend(!0,{},h,g),i=(a,n)=>typeof a=="function"?a(n):a.replace("{label}",n),m=a=>{if(a<=10)return 10;const n=Math.floor(Math.log10(a)),o=Math.pow(10,n);return Math.ceil(a/o)*o},f=(a,n,o)=>{const d=m(Math.max(...o));let l="";if(n.forEach((e,s)=>{const u=o[s],v=Math.round(u/d*100),p=t.colors&&t.colors[s]||t.color,b=["primary","secondary","success","danger","warning","info","light","dark"].includes(p),y=b?`progress-bar bg-${p}`:"progress-bar",j=b?"":`background-color: ${p};`;l+=`
          <div class="mb-2">
            <div class="d-flex justify-content-between">
              <span class="fw-semibold text-dark">${i(t.label,e)}</span>
              <small>${i(t.value,u)}</small>
            </div>
            <div 
              class="progress"
              role="progressbar"
              aria-valuenow="${v}"
              aria-valuemin="0" aria-valuemax="100"
              data-bs-toggle="popover"
              data-bs-placement="${t.popover.placement}"
              title="${i(t.popover.title,e)}"
              data-bs-content="${i(t.popover.content,u)}"
            >
              <div 
                class="${y}"
                style="width: ${v}%; ${j}"
              ></div>
            </div>
          </div>
        `}),l+='<div class="d-flex justify-content-between px-1 text-muted small mt-2">',Array.isArray(t.rulerPoints))t.rulerPoints.forEach(e=>{l+=`<span>${e.toLocaleString()}</span>`});else{const e=d/(t.rulerPoints-1);for(let s=0;s<t.rulerPoints;s++)l+=`<span>${Math.round(s*e).toLocaleString()}</span>`}l+="</div>",a.html(l);const x=[].slice.call(a.find('[data-bs-toggle="popover"]'));let c=null;x.forEach(e=>{const s=new bootstrap.Popover(e);e.addEventListener("click",()=>{c&&c!==s&&c.hide(),c=s})}),document.addEventListener("click",e=>{!e.target.closest('[data-bs-toggle="popover"]')&&c&&(c.hide(),c=null)})};return this.each(function(){const a=r(this);if(t.data)f(a,t.data.labels,t.data.values);else if(t.ajax){const n=typeof t.ajax.data=="function"?t.ajax.data():t.ajax.data;r.get(t.ajax.url,n,o=>{if(!o.success)return;const d=o.data.labels,l=o.data.values;f(a,d,l)})}})}})(jQuery)});