@gspa/ui 0.1.3 → 0.2.0

package/dist/components/charts/LineChart.js

@@ -0,0 +1,322 @@
+import { ref as $, computed as u, onMounted as J, onBeforeUnmount as K, createElementBlock as i, openBlock as r, createCommentVNode as c, createElementVNode as M, Fragment as x, renderList as m, normalizeClass as y, toDisplayString as p, withDirectives as Q, vShow as _ } from "vue";
+const ee = ["width", "height", "viewBox"], te = { key: 0 }, le = ["x1", "y1", "x2", "y2", "stroke"], ae = ["d", "stroke", "stroke-width"], ne = { key: 1 }, oe = ["cx", "cy", "r", "fill", "stroke", "onMouseenter"], ie = { key: 2 }, re = ["x", "y"], ue = ["d", "fill", "fill-opacity"], se = { key: 4 }, de = ["x", "y", "text-anchor", "transform"], he = { key: 5 }, ce = ["x", "y"], fe = { key: 6 }, ge = ["x", "y", "width", "height", "fill", "stroke"], ve = ["x", "y"], me = {
+  __name: "LineChart",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    labels: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: [Number, String],
+      default: "auto"
+    },
+    height: {
+      type: [Number, String],
+      default: "auto"
+    },
+    padding: {
+      type: Object,
+      default: () => ({ top: 20, right: 20, bottom: 60, left: 60 })
+    },
+    showGrid: {
+      type: Boolean,
+      default: !0
+    },
+    showXAxis: {
+      type: Boolean,
+      default: !0
+    },
+    showYAxis: {
+      type: Boolean,
+      default: !0
+    },
+    showPoints: {
+      type: Boolean,
+      default: !0
+    },
+    showValues: {
+      type: Boolean,
+      default: !0
+    },
+    valueSuffix: {
+      type: String,
+      default: ""
+    },
+    fillArea: {
+      type: Boolean,
+      default: !1
+    },
+    gridColor: {
+      type: String,
+      default: "#e5e7eb"
+    },
+    lineColor: {
+      type: String,
+      default: "#3b82f6"
+    },
+    strokeWidth: {
+      type: Number,
+      default: 2
+    },
+    pointRadius: {
+      type: Number,
+      default: 4
+    },
+    pointColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    fillColor: {
+      type: String,
+      default: "#3b82f6"
+    },
+    fillOpacity: {
+      type: Number,
+      default: 0.1
+    },
+    lineClasses: {
+      type: String,
+      default: "transition-all duration-200"
+    },
+    pointClasses: {
+      type: String,
+      default: "transition-all duration-200 hover:r-6 cursor-pointer"
+    },
+    axisLabelClasses: {
+      type: String,
+      default: "fill-(--ui-text) text-xs font-medium"
+    },
+    autoSkipXAxisLabels: {
+      type: Boolean,
+      default: !0
+    },
+    minLabelSpacing: {
+      type: Number,
+      default: 72
+    },
+    maxLabelLength: {
+      type: Number,
+      default: 16
+    },
+    rotateLabelsWhenDense: {
+      type: Boolean,
+      default: !0
+    },
+    labelRotationDegrees: {
+      type: Number,
+      default: -35
+    },
+    tooltipBackground: {
+      type: String,
+      default: "#1f2937"
+    },
+    tooltipBorder: {
+      type: String,
+      default: "#374151"
+    },
+    tooltipTextClasses: {
+      type: String,
+      default: "fill-white text-xs font-semibold"
+    },
+    maxValue: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: ["point-click", "point-hover"],
+  setup(n, { emit: P }) {
+    const t = n, D = P, w = $(null), g = $({ width: 0, height: 0 });
+    let b = null;
+    const s = $({
+      visible: !1,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      content: ""
+    }), v = u(() => {
+      const e = Number(t.width);
+      return Number.isFinite(e) && e > 0 ? e : g.value.width > 0 ? g.value.width : 400;
+    }), h = u(() => {
+      const e = Number(t.height);
+      return Number.isFinite(e) && e > 0 ? e : g.value.height > 0 ? g.value.height : 300;
+    }), C = u(() => {
+      if (t.maxValue && t.maxValue > 0) return t.maxValue;
+      const e = t.data.map((a) => Number(a) || 0), l = Math.max(0, ...e);
+      return l > 0 ? l : 1;
+    }), d = u(() => t.data.map((e, l) => ({
+      x: k(l),
+      y: F(e),
+      value: e
+    }))), T = u(() => d.value.length === 0 ? "" : d.value.map((l, a) => `${a === 0 ? "M" : "L"} ${l.x} ${l.y}`).join(" ")), W = u(() => {
+      if (d.value.length === 0) return "";
+      const e = d.value.map((o, f) => `${f === 0 ? "M" : "L"} ${o.x} ${o.y}`).join(" "), l = h.value - t.padding.bottom, a = `L ${d.value[d.value.length - 1].x} ${l} L ${d.value[0].x} ${l} Z`;
+      return e + " " + a;
+    }), A = u(() => {
+      const e = [], l = h.value - t.padding.top - t.padding.bottom, a = 5;
+      for (let o = 0; o <= a; o++) {
+        const f = t.padding.top + l / a * o;
+        e.push(f);
+      }
+      return e;
+    }), N = u(() => v.value - t.padding.left - t.padding.right), B = u(() => {
+      if (!t.autoSkipXAxisLabels || !t.labels.length) return 1;
+      const e = Math.max(1, Math.floor(N.value / Math.max(1, t.minLabelSpacing)));
+      return Math.max(1, Math.ceil(t.labels.length / e));
+    }), L = u(() => t.rotateLabelsWhenDense ? B.value > 1 : !1), X = u(() => h.value - t.padding.bottom + (L.value ? 28 : 20)), H = u(() => L.value ? "end" : "middle"), V = u(() => {
+      const e = t.padding.left, l = v.value - t.padding.right - s.value.width, a = s.value.x - s.value.width / 2;
+      return Math.min(Math.max(a, e), Math.max(e, l));
+    }), R = u(() => {
+      const e = s.value.y - s.value.height - 10, l = t.padding.top + 4;
+      return Math.max(e, l);
+    }), O = u(() => V.value + s.value.width / 2), z = u(() => R.value + s.value.height / 2 + 0.5), k = (e) => {
+      const l = N.value / (t.data.length - 1 || 1);
+      return t.padding.left + e * l;
+    }, F = (e) => {
+      const l = h.value - t.padding.top - t.padding.bottom, a = l / C.value;
+      return t.padding.top + l - e * a;
+    }, j = (e) => {
+      const l = h.value - t.padding.top - t.padding.bottom, a = (h.value - t.padding.bottom - e) / l * C.value;
+      return S(Math.round(a));
+    }, S = (e) => `${e}${t.valueSuffix}`, E = (e, l) => {
+      const a = t.labels[l] || `Point ${l + 1}`, o = Number(e.value), f = Number.isFinite(o) ? o.toLocaleString() : String(e.value ?? 0), Y = `${a}: ${S(f)}`, I = Math.min(280, Math.max(120, Y.length * 7.2 + 20));
+      s.value = {
+        visible: !0,
+        x: Number(e.x) || 0,
+        y: Number(e.y) || 0,
+        width: I,
+        height: 28,
+        content: Y
+      }, D("point-hover", { value: e.value, index: l, label: a });
+    }, G = () => {
+      s.value.visible = !1;
+    }, q = (e) => !t.autoSkipXAxisLabels || t.labels.length <= 2 ? !0 : e % B.value === 0 || e === t.labels.length - 1, U = (e) => {
+      const l = String(e ?? "");
+      return l ? !t.maxLabelLength || t.maxLabelLength <= 0 || l.length <= t.maxLabelLength ? l : `${l.slice(0, Math.max(1, t.maxLabelLength - 1))}…` : "";
+    }, Z = (e) => {
+      if (!L.value) return;
+      const l = k(e), a = X.value;
+      return `rotate(${t.labelRotationDegrees} ${l} ${a})`;
+    };
+    return J(() => {
+      b = new ResizeObserver((e) => {
+        const l = e[0];
+        if (!l) return;
+        const { width: a, height: o } = l.contentRect;
+        g.value = {
+          width: Math.round(a),
+          height: Math.round(o)
+        };
+      }), w.value && b.observe(w.value);
+    }), K(() => {
+      b && b.disconnect();
+    }), (e, l) => (r(), i("div", {
+      ref_key: "containerRef",
+      ref: w,
+      class: "ui-surface w-full h-full"
+    }, [
+      (r(), i("svg", {
+        width: v.value,
+        height: h.value,
+        viewBox: `0 0 ${v.value} ${h.value}`,
+        class: "block mx-auto overflow-visible"
+      }, [
+        n.showGrid ? (r(), i("g", te, [
+          (r(!0), i(x, null, m(A.value, (a) => (r(), i("line", {
+            key: `grid-${a}`,
+            x1: n.padding.left,
+            y1: a,
+            x2: v.value - n.padding.right,
+            y2: a,
+            stroke: n.gridColor,
+            "stroke-width": "1",
+            "stroke-dasharray": "2,2"
+          }, null, 8, le))), 128))
+        ])) : c("", !0),
+        M("path", {
+          d: T.value,
+          stroke: n.lineColor,
+          "stroke-width": n.strokeWidth,
+          fill: "none",
+          class: y(n.lineClasses)
+        }, null, 10, ae),
+        n.showPoints ? (r(), i("g", ne, [
+          (r(!0), i(x, null, m(d.value, (a, o) => (r(), i("circle", {
+            key: `point-${o}`,
+            cx: a.x,
+            cy: a.y,
+            r: n.pointRadius,
+            fill: n.pointColor,
+            stroke: n.lineColor,
+            "stroke-width": 2,
+            class: y(n.pointClasses),
+            onMouseenter: (f) => E(a, o),
+            onMouseleave: G
+          }, null, 42, oe))), 128))
+        ])) : c("", !0),
+        n.showValues ? (r(), i("g", ie, [
+          (r(!0), i(x, null, m(d.value, (a, o) => (r(), i("text", {
+            key: `value-${o}`,
+            x: a.x,
+            y: a.y - 10,
+            class: "fill-(--ui-text) text-[10px] font-semibold",
+            "text-anchor": "middle"
+          }, p(S(a.value)), 9, re))), 128))
+        ])) : c("", !0),
+        n.fillArea ? (r(), i("path", {
+          key: 3,
+          d: W.value,
+          fill: n.fillColor,
+          "fill-opacity": n.fillOpacity
+        }, null, 8, ue)) : c("", !0),
+        n.showXAxis ? (r(), i("g", se, [
+          (r(!0), i(x, null, m(n.labels, (a, o) => Q((r(), i("text", {
+            key: `xlabel-${o}`,
+            x: k(o),
+            y: X.value,
+            class: y(n.axisLabelClasses),
+            "text-anchor": H.value,
+            transform: Z(o)
+          }, p(U(a)), 11, de)), [
+            [_, q(o)]
+          ])), 128))
+        ])) : c("", !0),
+        n.showYAxis ? (r(), i("g", he, [
+          (r(!0), i(x, null, m(A.value, (a) => (r(), i("text", {
+            key: `ylabel-${a}`,
+            x: n.padding.left - 10,
+            y: a + 4,
+            class: y(n.axisLabelClasses),
+            "text-anchor": "end"
+          }, p(j(a)), 11, ce))), 128))
+        ])) : c("", !0),
+        s.value.visible ? (r(), i("g", fe, [
+          M("rect", {
+            x: V.value,
+            y: R.value,
+            width: s.value.width,
+            height: s.value.height,
+            fill: n.tooltipBackground,
+            stroke: n.tooltipBorder,
+            "stroke-width": "1",
+            rx: "4"
+          }, null, 8, ge),
+          M("text", {
+            x: O.value,
+            y: z.value,
+            class: y(n.tooltipTextClasses),
+            "text-anchor": "middle",
+            "dominant-baseline": "middle"
+          }, p(s.value.content), 11, ve)
+        ])) : c("", !0)
+      ], 8, ee))
+    ], 512));
+  }
+};
+export {
+  me as default
+};

package/dist/components/charts/PieChart.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),Z={key:0,class:"ui-surface w-full h-full flex items-center justify-center"},U=["width","height","viewBox"],G=["d","fill","stroke","stroke-width","onMouseenter","onClick"],J=["cx","cy","r","fill"],K={key:1},Q=["x","y"],ee=["x","y"],te={key:2},le=["x","y"],oe={key:3},ae=["transform"],ne=["fill"],se={class:"ui-surface ui-text px-4 py-3 rounded-lg shadow-2xl border ui-border-strong min-w-[180px]"},re={class:"flex items-center gap-2 mb-1.5"},ie={class:"font-semibold text-sm"},ue={class:"flex items-baseline gap-2 ml-5"},ce={class:"text-2xl font-bold"},de={class:"mt-1 ml-5"},me={class:"text-xs ui-text"},_=2,T=24,he={__name:"PieChart",props:{data:{type:Array,required:!0},labels:{type:Array,default:()=>[]},colors:{type:Array,default:()=>["#3b82f6","#ef4444","#10b981","#f59e0b","#8b5cf6","#ec4899","#14b8a6","#f97316"]},width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:"auto"},doughnut:{type:Boolean,default:!1},innerRadiusRatio:{type:Number,default:.6},showValues:{type:Boolean,default:!0},minLabelPercentage:{type:Number,default:3},showPercentages:{type:Boolean,default:!0},valueSuffix:{type:String,default:""},showLegend:{type:Boolean,default:!0},showCenterText:{type:Boolean,default:!0},legendPosition:{type:String,default:"bottom",validator:s=>["bottom","right"].includes(s)},strokeColor:{type:String,default:"#ffffff"},strokeWidth:{type:Number,default:2},centerFill:{type:String,default:"#ffffff"},sliceClasses:{type:String,default:"transition-all duration-200 hover:opacity-80 cursor-pointer"},valueLabelClasses:{type:String,default:"fill-(--ui-surface) text-sm font-bold drop-shadow-md"},centerTextClasses:{type:String,default:"fill-(--ui-text) text-2xl font-bold"},centerLabelClasses:{type:String,default:"fill-(--ui-text) text-sm"},legendTextClasses:{type:String,default:"fill-(--ui-text) text-xs font-medium"}},emits:["slice-click","slice-hover"],setup(s,{emit:A}){const n=s,z=A,B=e.ref(null),h=e.ref({width:0,height:0});let y=null;const i=e.computed(()=>{const t=Number(n.width);return Number.isFinite(t)&&t>0?t:h.value.width>0?h.value.width:400}),v=e.computed(()=>{const t=Number(n.height);return Number.isFinite(t)&&t>0?t:h.value.height>0?h.value.height:300}),u=e.ref({visible:!1,x:0,y:0,label:"",value:0,percentage:"0",color:""}),k=e.computed(()=>Array.isArray(n.data)?n.data.map(t=>Number(t)||0):[]),$=e.computed(()=>k.value.reduce((l,o)=>l+o,0)||0),R=e.computed(()=>k.value.length>0&&$.value>0),F=e.computed(()=>k.value.filter(t=>t>0).length),D=e.computed(()=>!n.showLegend||n.legendPosition!=="bottom"?0:Math.max(1,Math.ceil(F.value/_))),C=e.computed(()=>n.showLegend&&n.legendPosition==="bottom"?D.value*T+8:0),f=e.computed(()=>n.showLegend&&n.legendPosition==="right"?i.value/3:i.value/2),g=e.computed(()=>(v.value-C.value)/2),x=e.computed(()=>{const t=v.value-C.value,l=n.showLegend&&n.legendPosition==="right"?i.value*.6:i.value;return Math.max(12,Math.min(l,t)/2-40)}),M=e.computed(()=>n.doughnut?x.value*n.innerRadiusRatio:0),N=e.computed(()=>{if(!R.value)return[];const t=$.value;let l=-Math.PI/2;return k.value.map((o,a)=>{const r=o,c=(r/t*100).toFixed(1),p=r/t*2*Math.PI,d=l+p,w=H(f.value,g.value,x.value,M.value,l,d),b=n.doughnut?(x.value+M.value)/2:x.value*.7,m=l+p/2,V=f.value+Math.cos(m)*b,P=g.value+Math.sin(m)*b,L={value:r,percentage:c,path:w,labelX:V,labelY:P,label:n.labels[a]||`Item ${a+1}`,startAngle:l,endAngle:d};return l=d,L}).filter(o=>o.value>0)}),I=e.computed(()=>N.value.filter(t=>Number(t.percentage)>=n.minLabelPercentage)),H=(t,l,o,a,r,c)=>{const p=t+o*Math.cos(r),d=l+o*Math.sin(r),w=t+o*Math.cos(c),b=l+o*Math.sin(c),m=c-r>Math.PI?1:0;if(a===0)return`M ${t} ${l} L ${p} ${d} A ${o} ${o} 0 ${m} 1 ${w} ${b} Z`;{const V=t+a*Math.cos(c),P=l+a*Math.sin(c),L=t+a*Math.cos(r),q=l+a*Math.sin(r);return`M ${p} ${d} A ${o} ${o} 0 ${m} 1 ${w} ${b} L ${V} ${P} A ${a} ${a} 0 ${m} 0 ${L} ${q} Z`}},E=t=>n.colors[t%n.colors.length],X=t=>{if(n.legendPosition==="right")return i.value*.65;const o=t%_;return i.value/4+o*(i.value/2)},Y=t=>{if(n.legendPosition==="right")return 40+t*25;const o=Math.floor(t/_);return v.value-C.value+6+o*T},j=(t,l,o)=>{u.value={visible:!0,x:t.clientX,y:t.clientY,label:l.label,value:l.value,percentage:l.percentage,color:E(o)},z("slice-hover",{value:l.value,index:o,label:l.label,percentage:l.percentage})},W=()=>{u.value.visible=!1},O=(t,l)=>{z("slice-click",{value:t.value,index:l,label:t.label,percentage:t.percentage})},S=t=>`${t}${n.valueSuffix}`;return e.onMounted(()=>{y=new ResizeObserver(t=>{const l=t[0];if(!l)return;const{width:o,height:a}=l.contentRect;h.value={width:Math.round(o),height:Math.round(a)}}),B.value&&y.observe(B.value)}),e.onBeforeUnmount(()=>{y&&y.disconnect()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:B,class:"ui-surface w-full h-full relative"},[R.value?(e.openBlock(),e.createElementBlock("svg",{key:1,width:i.value,height:v.value,viewBox:`0 0 ${i.value} ${v.value}`,class:"block mx-auto overflow-visible"},[e.createElementVNode("g",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,(o,a)=>(e.openBlock(),e.createElementBlock("path",{key:`slice-${a}`,d:o.path,fill:E(a),stroke:s.strokeColor,"stroke-width":s.strokeWidth,class:e.normalizeClass(s.sliceClasses),onMouseenter:r=>j(r,o,a),onMouseleave:W,onClick:r=>O(o,a)},null,42,G))),128))]),s.doughnut?(e.openBlock(),e.createElementBlock("circle",{key:0,cx:f.value,cy:g.value,r:M.value,fill:s.centerFill},null,8,J)):e.createCommentVNode("",!0),s.doughnut&&s.showCenterText?(e.openBlock(),e.createElementBlock("g",K,[e.createElementVNode("text",{x:f.value,y:g.value-5,class:e.normalizeClass(s.centerTextClasses),"text-anchor":"middle","dominant-baseline":"middle"},e.toDisplayString(S($.value)),11,Q),e.createElementVNode("text",{x:f.value,y:g.value+15,class:e.normalizeClass(s.centerLabelClasses),"text-anchor":"middle","dominant-baseline":"middle"}," Total ",10,ee)])):e.createCommentVNode("",!0),s.showValues?(e.openBlock(),e.createElementBlock("g",te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(I.value,(o,a)=>(e.openBlock(),e.createElementBlock("text",{key:`value-${a}`,x:o.labelX,y:o.labelY,class:e.normalizeClass(s.valueLabelClasses),"text-anchor":"middle","dominant-baseline":"middle"},e.toDisplayString(s.showPercentages?`${o.percentage}%`:S(o.value)),11,le))),128))])):e.createCommentVNode("",!0),s.showLegend?(e.openBlock(),e.createElementBlock("g",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,(o,a)=>(e.openBlock(),e.createElementBlock("g",{key:`legend-${a}`,transform:`translate(${X(a)}, ${Y(a)})`},[e.createElementVNode("rect",{width:12,height:12,fill:E(a),rx:"2"},null,8,ne),e.createElementVNode("text",{x:18,y:10,class:e.normalizeClass(s.legendTextClasses)},e.toDisplayString(o.label),3)],8,ae))),128))])):e.createCommentVNode("",!0)],8,U)):(e.openBlock(),e.createElementBlock("div",Z,[...l[0]||(l[0]=[e.createStaticVNode('<div class="text-center"><div class="ui-text mb-2"><svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path></svg></div><p class="text-sm ui-text"> No data available </p></div>',1)])])),u.value.visible?(e.openBlock(),e.createElementBlock("div",{key:2,style:e.normalizeStyle({position:"fixed",left:`${u.value.x}px`,top:`${u.value.y}px`,transform:"translate(-50%, -120%)",pointerEvents:"none",zIndex:9999}),class:"animate-in fade-in duration-200"},[e.createElementVNode("div",se,[e.createElementVNode("div",re,[e.createElementVNode("div",{style:e.normalizeStyle({backgroundColor:u.value.color}),class:"w-3 h-3 rounded-full shadow-sm"},null,4),e.createElementVNode("p",ie,e.toDisplayString(u.value.label),1)]),e.createElementVNode("div",ue,[e.createElementVNode("span",ce,e.toDisplayString(S(u.value.value)),1)]),e.createElementVNode("div",de,[e.createElementVNode("span",me,e.toDisplayString(u.value.percentage)+"% of total",1)]),l[1]||(l[1]=e.createElementVNode("div",{class:"absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 ui-surface border-r border-b ui-border-strong"},null,-1))])],4)):e.createCommentVNode("",!0)],512))}};exports.default=he;

package/dist/components/charts/PieChart.js

@@ -0,0 +1,311 @@
+import { ref as H, computed as n, onMounted as oe, onBeforeUnmount as se, createElementBlock as r, openBlock as i, createCommentVNode as k, createStaticVNode as ne, createElementVNode as u, Fragment as X, renderList as Y, normalizeClass as M, toDisplayString as m, normalizeStyle as D } from "vue";
+const re = {
+  key: 0,
+  class: "ui-surface w-full h-full flex items-center justify-center"
+}, ie = ["width", "height", "viewBox"], ue = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onClick"], ce = ["cx", "cy", "r", "fill"], de = { key: 1 }, he = ["x", "y"], ve = ["x", "y"], fe = { key: 2 }, ge = ["x", "y"], me = { key: 3 }, be = ["transform"], xe = ["fill"], ye = { class: "ui-surface ui-text px-4 py-3 rounded-lg shadow-2xl border ui-border-strong min-w-[180px]" }, pe = { class: "flex items-center gap-2 mb-1.5" }, we = { class: "font-semibold text-sm" }, $e = { class: "flex items-baseline gap-2 ml-5" }, ke = { class: "text-2xl font-bold" }, Me = { class: "mt-1 ml-5" }, Ce = { class: "text-xs ui-text" }, E = 2, O = 24, Pe = {
+  __name: "PieChart",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    labels: {
+      type: Array,
+      default: () => []
+    },
+    colors: {
+      type: Array,
+      default: () => ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#ec4899", "#14b8a6", "#f97316"]
+    },
+    width: {
+      type: [Number, String],
+      default: "auto"
+    },
+    height: {
+      type: [Number, String],
+      default: "auto"
+    },
+    doughnut: {
+      type: Boolean,
+      default: !1
+    },
+    innerRadiusRatio: {
+      type: Number,
+      default: 0.6
+    },
+    showValues: {
+      type: Boolean,
+      default: !0
+    },
+    minLabelPercentage: {
+      type: Number,
+      default: 3
+    },
+    showPercentages: {
+      type: Boolean,
+      default: !0
+    },
+    valueSuffix: {
+      type: String,
+      default: ""
+    },
+    showLegend: {
+      type: Boolean,
+      default: !0
+    },
+    showCenterText: {
+      type: Boolean,
+      default: !0
+    },
+    legendPosition: {
+      type: String,
+      default: "bottom",
+      validator: (s) => ["bottom", "right"].includes(s)
+    },
+    strokeColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    strokeWidth: {
+      type: Number,
+      default: 2
+    },
+    centerFill: {
+      type: String,
+      default: "#ffffff"
+    },
+    sliceClasses: {
+      type: String,
+      default: "transition-all duration-200 hover:opacity-80 cursor-pointer"
+    },
+    valueLabelClasses: {
+      type: String,
+      default: "fill-(--ui-surface) text-sm font-bold drop-shadow-md"
+    },
+    centerTextClasses: {
+      type: String,
+      default: "fill-(--ui-text) text-2xl font-bold"
+    },
+    centerLabelClasses: {
+      type: String,
+      default: "fill-(--ui-text) text-sm"
+    },
+    legendTextClasses: {
+      type: String,
+      default: "fill-(--ui-text) text-xs font-medium"
+    }
+  },
+  emits: ["slice-click", "slice-hover"],
+  setup(s, { emit: Z }) {
+    const o = s, W = Z, N = H(null), b = H({ width: 0, height: 0 });
+    let C = null;
+    const d = n(() => {
+      const e = Number(o.width);
+      return Number.isFinite(e) && e > 0 ? e : b.value.width > 0 ? b.value.width : 400;
+    }), x = n(() => {
+      const e = Number(o.height);
+      return Number.isFinite(e) && e > 0 ? e : b.value.height > 0 ? b.value.height : 300;
+    }), h = H({
+      visible: !1,
+      x: 0,
+      y: 0,
+      label: "",
+      value: 0,
+      percentage: "0",
+      color: ""
+    }), S = n(() => Array.isArray(o.data) ? o.data.map((e) => Number(e) || 0) : []), _ = n(() => S.value.reduce((t, l) => t + l, 0) || 0), j = n(() => S.value.length > 0 && _.value > 0), q = n(() => S.value.filter((e) => e > 0).length), U = n(() => !o.showLegend || o.legendPosition !== "bottom" ? 0 : Math.max(1, Math.ceil(q.value / E))), B = n(() => o.showLegend && o.legendPosition === "bottom" ? U.value * O + 8 : 0), y = n(() => o.showLegend && o.legendPosition === "right" ? d.value / 3 : d.value / 2), p = n(() => (x.value - B.value) / 2), P = n(() => {
+      const e = x.value - B.value, t = o.showLegend && o.legendPosition === "right" ? d.value * 0.6 : d.value;
+      return Math.max(12, Math.min(t, e) / 2 - 40);
+    }), V = n(() => o.doughnut ? P.value * o.innerRadiusRatio : 0), R = n(() => {
+      if (!j.value) return [];
+      const e = _.value;
+      let t = -Math.PI / 2;
+      return S.value.map((l, a) => {
+        const c = l, v = (c / e * 100).toFixed(1), w = c / e * 2 * Math.PI, f = t + w, L = J(
+          y.value,
+          p.value,
+          P.value,
+          V.value,
+          t,
+          f
+        ), $ = o.doughnut ? (P.value + V.value) / 2 : P.value * 0.7, g = t + w / 2, T = y.value + Math.cos(g) * $, F = p.value + Math.sin(g) * $, I = {
+          value: c,
+          percentage: v,
+          path: L,
+          labelX: T,
+          labelY: F,
+          label: o.labels[a] || `Item ${a + 1}`,
+          startAngle: t,
+          endAngle: f
+        };
+        return t = f, I;
+      }).filter((l) => l.value > 0);
+    }), G = n(() => R.value.filter((e) => Number(e.percentage) >= o.minLabelPercentage)), J = (e, t, l, a, c, v) => {
+      const w = e + l * Math.cos(c), f = t + l * Math.sin(c), L = e + l * Math.cos(v), $ = t + l * Math.sin(v), g = v - c > Math.PI ? 1 : 0;
+      if (a === 0)
+        return `M ${e} ${t} L ${w} ${f} A ${l} ${l} 0 ${g} 1 ${L} ${$} Z`;
+      {
+        const T = e + a * Math.cos(v), F = t + a * Math.sin(v), I = e + a * Math.cos(c), ae = t + a * Math.sin(c);
+        return `M ${w} ${f} A ${l} ${l} 0 ${g} 1 ${L} ${$} L ${T} ${F} A ${a} ${a} 0 ${g} 0 ${I} ${ae} Z`;
+      }
+    }, z = (e) => o.colors[e % o.colors.length], K = (e) => {
+      if (o.legendPosition === "right")
+        return d.value * 0.65;
+      const l = e % E;
+      return d.value / 4 + l * (d.value / 2);
+    }, Q = (e) => {
+      if (o.legendPosition === "right")
+        return 40 + e * 25;
+      const l = Math.floor(e / E);
+      return x.value - B.value + 6 + l * O;
+    }, ee = (e, t, l) => {
+      h.value = {
+        visible: !0,
+        x: e.clientX,
+        y: e.clientY,
+        label: t.label,
+        value: t.value,
+        percentage: t.percentage,
+        color: z(l)
+      }, W("slice-hover", {
+        value: t.value,
+        index: l,
+        label: t.label,
+        percentage: t.percentage
+      });
+    }, te = () => {
+      h.value.visible = !1;
+    }, le = (e, t) => {
+      W("slice-click", {
+        value: e.value,
+        index: t,
+        label: e.label,
+        percentage: e.percentage
+      });
+    }, A = (e) => `${e}${o.valueSuffix}`;
+    return oe(() => {
+      C = new ResizeObserver((e) => {
+        const t = e[0];
+        if (!t) return;
+        const { width: l, height: a } = t.contentRect;
+        b.value = {
+          width: Math.round(l),
+          height: Math.round(a)
+        };
+      }), N.value && C.observe(N.value);
+    }), se(() => {
+      C && C.disconnect();
+    }), (e, t) => (i(), r("div", {
+      ref_key: "containerRef",
+      ref: N,
+      class: "ui-surface w-full h-full relative"
+    }, [
+      j.value ? (i(), r("svg", {
+        key: 1,
+        width: d.value,
+        height: x.value,
+        viewBox: `0 0 ${d.value} ${x.value}`,
+        class: "block mx-auto overflow-visible"
+      }, [
+        u("g", null, [
+          (i(!0), r(X, null, Y(R.value, (l, a) => (i(), r("path", {
+            key: `slice-${a}`,
+            d: l.path,
+            fill: z(a),
+            stroke: s.strokeColor,
+            "stroke-width": s.strokeWidth,
+            class: M(s.sliceClasses),
+            onMouseenter: (c) => ee(c, l, a),
+            onMouseleave: te,
+            onClick: (c) => le(l, a)
+          }, null, 42, ue))), 128))
+        ]),
+        s.doughnut ? (i(), r("circle", {
+          key: 0,
+          cx: y.value,
+          cy: p.value,
+          r: V.value,
+          fill: s.centerFill
+        }, null, 8, ce)) : k("", !0),
+        s.doughnut && s.showCenterText ? (i(), r("g", de, [
+          u("text", {
+            x: y.value,
+            y: p.value - 5,
+            class: M(s.centerTextClasses),
+            "text-anchor": "middle",
+            "dominant-baseline": "middle"
+          }, m(A(_.value)), 11, he),
+          u("text", {
+            x: y.value,
+            y: p.value + 15,
+            class: M(s.centerLabelClasses),
+            "text-anchor": "middle",
+            "dominant-baseline": "middle"
+          }, " Total ", 10, ve)
+        ])) : k("", !0),
+        s.showValues ? (i(), r("g", fe, [
+          (i(!0), r(X, null, Y(G.value, (l, a) => (i(), r("text", {
+            key: `value-${a}`,
+            x: l.labelX,
+            y: l.labelY,
+            class: M(s.valueLabelClasses),
+            "text-anchor": "middle",
+            "dominant-baseline": "middle"
+          }, m(s.showPercentages ? `${l.percentage}%` : A(l.value)), 11, ge))), 128))
+        ])) : k("", !0),
+        s.showLegend ? (i(), r("g", me, [
+          (i(!0), r(X, null, Y(R.value, (l, a) => (i(), r("g", {
+            key: `legend-${a}`,
+            transform: `translate(${K(a)}, ${Q(a)})`
+          }, [
+            u("rect", {
+              width: 12,
+              height: 12,
+              fill: z(a),
+              rx: "2"
+            }, null, 8, xe),
+            u("text", {
+              x: 18,
+              y: 10,
+              class: M(s.legendTextClasses)
+            }, m(l.label), 3)
+          ], 8, be))), 128))
+        ])) : k("", !0)
+      ], 8, ie)) : (i(), r("div", re, [...t[0] || (t[0] = [
+        ne('<div class="text-center"><div class="ui-text mb-2"><svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path></svg></div><p class="text-sm ui-text"> No data available </p></div>', 1)
+      ])])),
+      h.value.visible ? (i(), r("div", {
+        key: 2,
+        style: D({
+          position: "fixed",
+          left: `${h.value.x}px`,
+          top: `${h.value.y}px`,
+          transform: "translate(-50%, -120%)",
+          pointerEvents: "none",
+          zIndex: 9999
+        }),
+        class: "animate-in fade-in duration-200"
+      }, [
+        u("div", ye, [
+          u("div", pe, [
+            u("div", {
+              style: D({ backgroundColor: h.value.color }),
+              class: "w-3 h-3 rounded-full shadow-sm"
+            }, null, 4),
+            u("p", we, m(h.value.label), 1)
+          ]),
+          u("div", $e, [
+            u("span", ke, m(A(h.value.value)), 1)
+          ]),
+          u("div", Me, [
+            u("span", Ce, m(h.value.percentage) + "% of total", 1)
+          ]),
+          t[1] || (t[1] = u("div", { class: "absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 ui-surface border-r border-b ui-border-strong" }, null, -1))
+        ])
+      ], 4)) : k("", !0)
+    ], 512));
+  }
+};
+export {
+  Pe as default
+};

package/dist/components/charts/StackedBarChart.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),O={key:0,class:"absolute top-3 left-3 z-10 ui-surface border ui-border-strong rounded-md px-2.5 py-2"},R={class:"flex items-center gap-3 flex-wrap"},W={class:"text-xs font-semibold ui-text"},H=["width","height","viewBox"],j={key:0},q=["x1","y1","x2","y2","stroke"],U=["id"],P=["stop-color"],J=["stop-color"],Q=["x","y","width","height","fill","onMouseenter","onClick"],Z=["to","begin"],_=["from","to","begin"],I={key:0},ee=["x","y"],te={key:1},le=["x","y"],oe={key:2},ne=["x","y"],ae={key:3},re=["x","y"],se={key:4},ie=["x","y"],ce=["x1","y1","x2","y2"],ue=["x1","y1","x2","y2"],de={class:"ui-surface ui-text px-4 py-3 rounded-lg shadow-2xl border ui-border-strong min-w-[180px]"},me={class:"flex items-center gap-2 mb-2"},ge={class:"font-semibold text-sm"},he={class:"ml-5"},ye={class:"text-xs ui-text mb-1"},fe={class:"text-2xl font-bold"},pe={__name:"StackedBarChart",props:{data:{type:Array,required:!0},labels:{type:Array,default:()=>[]},colors:{type:Array,default:()=>["#f97316","#10b981"]},groupKeys:{type:Array,default:()=>["complied","uncomplied"]},width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:"auto"},padding:{type:Object,default:()=>({top:20,right:20,bottom:60,left:60})},showGrid:{type:Boolean,default:!0},showXAxis:{type:Boolean,default:!0},showYAxis:{type:Boolean,default:!0},gridColor:{type:String,default:"#e5e7eb"},barClasses:{type:String,default:"transition-all duration-200 hover:opacity-90 cursor-pointer"},axisLabelClasses:{type:String,default:"fill-(--ui-text) text-xs font-medium"},maxValue:{type:Number,default:100},xAxisLabel:{type:String,default:""},yAxisLabel:{type:String,default:""},showValues:{type:Boolean,default:!0},valueSuffix:{type:String,default:""},showLegend:{type:Boolean,default:!0},legendLabels:{type:Array,default:()=>[]}},emits:["bar-click","bar-hover"],setup(l,{emit:$}){const n=l,E=$,p=e.ref(null),m=e.ref({width:0,height:0});let y=null;const g=e.computed(()=>{const t=Number(n.width);return Number.isFinite(t)&&t>0?t:m.value.width>0?m.value.width:400}),c=e.computed(()=>{const t=Number(n.height);return Number.isFinite(t)&&t>0?t:m.value.height>0?m.value.height:300}),u=e.ref({visible:!1,x:0,y:0,label:"",barLabel:"",value:0,color:""}),d=e.computed(()=>c.value-n.padding.top-n.padding.bottom),v=e.computed(()=>g.value-n.padding.left-n.padding.right),b=e.computed(()=>v.value/n.data.length*.8),N=e.computed(()=>v.value/n.data.length*.2),k=e.computed(()=>b.value/n.groupKeys.length),A=e.computed(()=>0),V=e.computed(()=>{const t=[];for(let o=0;o<=5;o++){const r=n.padding.top+d.value/5*o;t.push(r)}return t}),w=t=>n.padding.left+t*(b.value+N.value)+N.value/2,L=(t,a)=>w(t)+a*(k.value+A.value),x=t=>{const a=d.value/n.maxValue;return n.padding.top+d.value-t*a},S=t=>{const a=d.value/n.maxValue;return t*a},f=t=>n.colors[t%n.colors.length],z=t=>(Number(t)||0)<=0?n.padding.top+d.value-6:Math.max(x(t)+18,n.padding.top+16),M=t=>(Number(t)||0)<=0?"fill-(--ui-text) text-[10px] font-semibold":"fill-white text-[10px] font-semibold",F=t=>{const a=(c.value-n.padding.bottom-t)/d.value*n.maxValue;return B(Math.round(a))},C=t=>t.charAt(0).toUpperCase()+t.slice(1),D=e.computed(()=>n.valueSuffix?n.valueSuffix:String(n.yAxisLabel||"").includes("%")||n.maxValue===100?"%":""),B=t=>`${t}${D.value}`,K=e.computed(()=>n.groupKeys.map((t,a)=>({key:t,color:f(a),label:n.legendLabels[a]||C(t)}))),X=(t,a,o)=>{const r=n.data[a],i=n.groupKeys[o],s=r[i]||0,h=n.labels[a]||`Item ${a+1}`,T=C(i);u.value={visible:!0,x:t.clientX,y:t.clientY,label:h,barLabel:T,value:s,color:f(o)},E("bar-hover",{dataIndex:a,barIndex:o,key:i,value:s,label:h})},G=()=>{u.value.visible=!1},Y=(t,a)=>{const o=n.data[t],r=n.groupKeys[a],i=o[r]||0,s=n.labels[t]||`Item ${t+1}`;E("bar-click",{dataIndex:t,barIndex:a,key:r,value:i,label:s})};return e.onMounted(()=>{y=new ResizeObserver(t=>{const a=t[0];if(!a)return;const{width:o,height:r}=a.contentRect;m.value={width:Math.round(o),height:Math.round(r)}}),p.value&&y.observe(p.value)}),e.onBeforeUnmount(()=>{y&&y.disconnect()}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:p,class:"w-full h-full relative"},[l.showLegend?(e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("div",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(K.value,o=>(e.openBlock(),e.createElementBlock("div",{key:`legend-${o.key}`,class:"flex items-center gap-1.5"},[e.createElementVNode("span",{class:"w-2.5 h-2.5 rounded-sm",style:e.normalizeStyle({backgroundColor:o.color})},null,4),e.createElementVNode("span",W,e.toDisplayString(o.label),1)]))),128))])])):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{width:g.value,height:c.value,viewBox:`0 0 ${g.value} ${c.value}`,class:"overflow-visible"},[l.showGrid?(e.openBlock(),e.createElementBlock("g",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(V.value,o=>(e.openBlock(),e.createElementBlock("line",{key:`grid-${o}`,x1:l.padding.left,y1:o,x2:g.value-l.padding.right,y2:o,stroke:l.gridColor,"stroke-width":"1","stroke-dasharray":"4,4",opacity:"0.3"},null,8,q))),128))])):e.createCommentVNode("",!0),e.createElementVNode("defs",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.groupKeys,(o,r)=>(e.openBlock(),e.createElementBlock("linearGradient",{id:`barGradient-${r}`,key:`gradient-${r}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%"},[e.createElementVNode("stop",{offset:"0%","stop-color":f(r),"stop-opacity":"0.95"},null,8,P),e.createElementVNode("stop",{offset:"100%","stop-color":f(r),"stop-opacity":"0.85"},null,8,J)],8,U))),128))]),e.createElementVNode("g",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.data,(o,r)=>(e.openBlock(),e.createElementBlock("g",{key:`bar-group-${r}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.groupKeys,(i,s)=>(e.openBlock(),e.createElementBlock("rect",{key:`bar-${r}-${s}`,x:L(r,s),y:x(o[i]||0),width:k.value,height:S(o[i]||0),fill:`url(#barGradient-${s})`,class:e.normalizeClass(l.barClasses),rx:"4",onMouseenter:h=>X(h,r,s),onMouseleave:G,onClick:h=>Y(r,s)},[e.createElementVNode("animate",{attributeName:"height",from:0,to:S(o[i]||0),dur:"0.6s",begin:`${s*.1}s`,fill:"freeze"},null,8,Z),e.createElementVNode("animate",{attributeName:"y",from:l.padding.top+d.value,to:x(o[i]||0),dur:"0.6s",begin:`${s*.1}s`,fill:"freeze"},null,8,_)],42,Q))),128)),l.showValues?(e.openBlock(),e.createElementBlock("g",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.groupKeys,(i,s)=>(e.openBlock(),e.createElementBlock("text",{key:`bar-value-${r}-${s}`,x:L(r,s)+k.value/2,y:z(o[i]||0),class:e.normalizeClass(M(o[i]||0)),"text-anchor":"middle"},e.toDisplayString(B(o[i]||0)),11,ee))),128))])):e.createCommentVNode("",!0)]))),128))]),l.showXAxis?(e.openBlock(),e.createElementBlock("g",te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.labels,(o,r)=>(e.openBlock(),e.createElementBlock("text",{key:`xlabel-${r}`,x:w(r)+b.value/2,y:c.value-l.padding.bottom+20,class:e.normalizeClass(l.axisLabelClasses),"text-anchor":"middle"},e.toDisplayString(o),11,le))),128))])):e.createCommentVNode("",!0),l.xAxisLabel?(e.openBlock(),e.createElementBlock("g",oe,[e.createElementVNode("text",{x:l.padding.left+v.value/2,y:c.value-10,class:"fill-(--ui-text) text-sm font-semibold","text-anchor":"middle"},e.toDisplayString(l.xAxisLabel),9,ne)])):e.createCommentVNode("",!0),l.showYAxis?(e.openBlock(),e.createElementBlock("g",ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(V.value,o=>(e.openBlock(),e.createElementBlock("text",{key:`ylabel-${o}`,x:l.padding.left-10,y:o+4,class:e.normalizeClass(l.axisLabelClasses),"text-anchor":"end"},e.toDisplayString(F(o)),11,re))),128))])):e.createCommentVNode("",!0),l.yAxisLabel?(e.openBlock(),e.createElementBlock("g",se,[e.createElementVNode("text",{x:-(l.padding.top+d.value/2),y:l.padding.left-40,class:"fill-(--ui-text) text-sm font-semibold","text-anchor":"middle",transform:"rotate(-90)"},e.toDisplayString(l.yAxisLabel),9,ie)])):e.createCommentVNode("",!0),e.createElementVNode("line",{x1:l.padding.left,y1:l.padding.top,x2:l.padding.left,y2:c.value-l.padding.bottom,stroke:"#cbd5e1","stroke-width":"2"},null,8,ce),e.createElementVNode("line",{x1:l.padding.left,y1:c.value-l.padding.bottom,x2:g.value-l.padding.right,y2:c.value-l.padding.bottom,stroke:"#cbd5e1","stroke-width":"2"},null,8,ue)],8,H)),u.value.visible?(e.openBlock(),e.createElementBlock("div",{key:1,style:e.normalizeStyle({position:"fixed",left:`${u.value.x}px`,top:`${u.value.y}px`,transform:"translate(-50%, -120%)",pointerEvents:"none",zIndex:9999}),class:"animate-in fade-in duration-200"},[e.createElementVNode("div",de,[e.createElementVNode("div",me,[e.createElementVNode("div",{style:e.normalizeStyle({backgroundColor:u.value.color}),class:"w-3 h-3 rounded shadow-sm"},null,4),e.createElementVNode("p",ge,e.toDisplayString(u.value.label),1)]),e.createElementVNode("div",he,[e.createElementVNode("p",ye,e.toDisplayString(u.value.barLabel),1),e.createElementVNode("span",fe,e.toDisplayString(B(u.value.value)),1)]),a[0]||(a[0]=e.createElementVNode("div",{class:"absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 ui-surface border-r border-b ui-border-strong"},null,-1))])],4)):e.createCommentVNode("",!0)],512))}};exports.default=pe;