@konstructio/ui/dist/components/PieChart/PieChart.js

A set of reusable and customizable React components built for konstruct.io

import { a as $, r as D, t as v } from "../../dist-BHslNQd82.js";
import { useMemo as i } from "react";
import { jsx as y } from "react/jsx-runtime";
$.register(D);
var T = ({ values: p, colors: x = ["#525252", "#00D492"], borderColors: h = ["#FFFFFF", "#FFFFFF"], borderWidth: m = 0, cutoutPercentage: l = 80, title: n, subtitle: s, titleFontSize: a = 16, subtitleFontSize: o = 14, titleColor: g = "#111827", subtitleColor: c = "#6B7280", titleFontWeight: u = "bold", subtitleFontWeight: w = "normal", redraw: F = !0 }) => /* @__PURE__ */ y(v, {
  data: i(() => ({ datasets: [{
    data: p,
    backgroundColor: x,
    borderWidth: m,
    borderColor: h
  }] }), [
    h,
    m,
    x,
    p
  ]),
  options: i(() => ({
    plugins: { legend: { display: !1 } },
    cutout: `${l}%`,
    hover: { mode: null }
  }), [l]),
  plugins: i(() => {
    const f = [];
    return n && f.push({
      id: "titleCenter",
      beforeDraw(r) {
        const e = r.ctx, t = r.width, d = r.height;
        e.restore(), e.font = `${u} ${a}px sans-serif`, e.fillStyle = g, e.textAlign = "center", e.textBaseline = "middle", e.fillText(n, t / 2, d / 2 - (s ? a / 2 : 0)), e.save();
      }
    }), s && f.push({
      id: "subtitleCenter",
      beforeDraw(r) {
        const e = r.ctx, t = r.width, d = r.height;
        e.restore(), e.font = `${w} ${o}px sans-serif`, e.fillStyle = c, e.fillText(s, t / 2, d / 2 + o / 2), e.save();
      }
    }), f;
  }, [
    s,
    c,
    o,
    w,
    n,
    g,
    a,
    u
  ]),
  redraw: F
});
export {
  T as PieChart
};