wizechart/dist/wizechart.es.js

A jQuery + Bootstrap simple progress bar chart plugin

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