@esic-lab/data-core-ui 0.0.54 → 0.0.55

package/dist/index.d.ts

@@ -7,7 +7,6 @@ import { InputNumberProps, SelectProps } from 'antd';
 import { Color } from 'antd/es/color-picker';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
-import { ReactNode as ReactNode$1 } from '@tabler/icons-react';
 
 type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
@@ -443,10 +442,9 @@ interface SortFilterProps {
 declare function SortFilter({ showYear, showQuarter, showMonth, onSortClick, onFilterClick, }: SortFilterProps): react_jsx_runtime.JSX.Element;
 
 interface FileUploaderProps {
-    onUpload: (file: any) => Promise<void>;
+    onUpload: (file: File) => Promise<void>;
     onRemove?: (index: number) => Promise<void>;
     onError?: (message: string) => void;
-    onClickFile?: (file: any) => void;
     accept?: string[];
     maxSize?: number;
     disabled?: boolean;
@@ -454,12 +452,8 @@ interface FileUploaderProps {
     description?: string;
     label?: string;
     value?: File[] | any[];
-    uploadText?: string;
-    uploaderWidth?: string;
-    attachWidth?: string;
-    readOnly?: boolean;
 }
-declare function FileUploader({ onUpload, onError, onRemove, onClickFile, accept, maxSize, disabled, mode, description, label, value, uploadText, uploaderWidth, attachWidth, readOnly, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
+declare function FileUploader({ onUpload, onError, onRemove, accept, maxSize, disabled, mode, description, label, value, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
 
 declare function setMessageApi(api: MessageInstance): void;
 declare function messageSuccess(content: string): void;
@@ -528,22 +522,16 @@ interface IndicatorProps {
     }[];
     type: "OUTPUT" | "OUTCOME";
     arrayData: IndicatorArray[];
-    canEdit?: boolean;
     setArrayData: (data: IndicatorArray[]) => void;
-    onDeleteClick?: (payload: {
-        index: number;
-        item: IndicatorArray;
-        confirm: () => void;
-    }) => void;
 }
 interface IndicatorArray {
     indicatorType: "OUTPUT" | "OUTCOME";
     inputType: "TEXT" | "NUMBER";
     textValue: string;
-    numberValue?: number;
+    numberValue?: string;
     unit?: string;
 }
-declare function Indicator({ option, type, arrayData, setArrayData, canEdit, onDeleteClick, }: IndicatorProps): react_jsx_runtime.JSX.Element;
+declare function Indicator({ option, type, arrayData, setArrayData, }: IndicatorProps): react_jsx_runtime.JSX.Element;
 
 interface optionSelect {
     value: string;
@@ -554,38 +542,4 @@ declare const FilterPopUp: (filter: {
     handleSearch: (listFiler: string[]) => void;
 }) => react_jsx_runtime.JSX.Element;
 
-interface UserData {
-    id: string;
-    name: string;
-    profile: string;
-}
-interface ProfileSelectProp {
-    allUser: UserData[];
-    assignUser: UserData[];
-    mode: "show" | "showAssign" | "icon";
-    className?: string;
-    onUpdateAssignUser: (user: UserData, action?: "add" | "remove") => void;
-}
-declare function ProfileSelect({ allUser, assignUser, mode, className, onUpdateAssignUser, }: ProfileSelectProp): react_jsx_runtime.JSX.Element;
-
-interface QRCodeGeneratorProps {
-    url: string;
-    previewSize?: number;
-    defaultExportSize?: number;
-    fileBaseName?: string;
-}
-declare const QRCodeGenerator: react.FC<QRCodeGeneratorProps>;
-
-interface TabProjectProp {
-    tabOption: {
-        key: string;
-        label: string;
-        icon: ReactNode$1;
-    }[];
-    projectId: string;
-    now: string;
-    onChange: (key: string) => void;
-}
-declare function TabProject({ tabOption, now, onChange }: TabProjectProp): react_jsx_runtime.JSX.Element;
-
-export { AntDModal, AntDataTable, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, ProfileSelect, ProgressBar, QRCodeGenerator, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabProject, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };
+export { AntDModal, AntDataTable, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, ProgressBar, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };

package/dist/index.js

@@ -357,6 +357,7 @@ var index_exports = {};
 __export(index_exports, {
   AntDModal: () => AntDModal,
   AntDataTable: () => AntDataTable,
+  BarChart: () => BarChart,
   Breadcrumbs: () => Breadcrumbs,
   Calendar: () => Calendar,
   Checkbox: () => Checkbox,
@@ -376,6 +377,7 @@ __export(index_exports, {
   KpiSection: () => KpiSection,
   Loader: () => Loader,
   MenuNavBar: () => MenuNavBar,
+  PieChart: () => PieChart,
   PrimaryButton: () => PrimaryButton,
   ProfileSelect: () => ProfileSelect,
   ProgressBar: () => ProgressBar,
@@ -1243,7 +1245,7 @@ function InputFieldNumber({
   addonAfter,
   defaultValue,
   className,
-  max,
+  max: max2,
   min,
   controls,
   size,
@@ -1276,7 +1278,7 @@ function InputFieldNumber({
             addonBefore,
             addonAfter,
             defaultValue,
-            max,
+            max: max2,
             min,
             controls,
             size,
@@ -1730,8 +1732,8 @@ function splitColorStr(str, parseNum) {
   return numList;
 }
 var parseHSVorHSL = (num, _, index) => index === 0 ? num : num / 100;
-function limitRange(value, max) {
-  const mergedMax = max || 255;
+function limitRange(value, max2) {
+  const mergedMax = max2 || 255;
   if (value > mergedMax) {
     return mergedMax;
   }
@@ -2025,9 +2027,9 @@ var FastColor = class _FastColor {
   }
   // ====================== Privates ======================
   /** Return a new FastColor object with one channel changed */
-  _sc(rgb, value, max) {
+  _sc(rgb, value, max2) {
     const clone = this.clone();
-    clone[rgb] = limitRange(value, max);
+    clone[rgb] = limitRange(value, max2);
     return clone;
   }
   _c(input) {
@@ -4343,7 +4345,7 @@ var QRCodeGenerator = ({
   fileBaseName = "qr-code"
 }) => {
   const canvasRef = (0, import_react21.useRef)(null);
-  const [format3, setFormat] = (0, import_react21.useState)("png");
+  const [format4, setFormat] = (0, import_react21.useState)("png");
   const [exportSize, setExportSize] = (0, import_react21.useState)(defaultExportSize);
   const sizeOption = [
     {
@@ -4397,7 +4399,7 @@ var QRCodeGenerator = ({
   }, [url, previewSize]);
   const download = async () => {
     try {
-      if (format3 === "svg") {
+      if (format4 === "svg") {
         const svgString = await import_qrcode.default.toString(url, {
           type: "svg",
           width: exportSize,
@@ -4413,9 +4415,9 @@ var QRCodeGenerator = ({
           width: exportSize,
           margin: 1
         });
-        const mime = format3 === "png" ? "image/png" : "image/jpeg";
-        const dataURL = format3 === "jpeg" ? offscreen.toDataURL(mime, 0.92) : offscreen.toDataURL(mime);
-        triggerDownload(dataURL, `${fileBaseName}.${format3}`);
+        const mime = format4 === "png" ? "image/png" : "image/jpeg";
+        const dataURL = format4 === "jpeg" ? offscreen.toDataURL(mime, 0.92) : offscreen.toDataURL(mime);
+        triggerDownload(dataURL, `${fileBaseName}.${format4}`);
       }
     } catch (err) {
       console.error("Failed to generate QR export:", err);
@@ -4448,7 +4450,7 @@ var QRCodeGenerator = ({
               SelectField,
               {
                 label: "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A",
-                value: format3,
+                value: format4,
                 onChange: (e) => setFormat(e.target.value),
                 options: typeOption
               }
@@ -4508,10 +4510,165 @@ function TabProject({ tabOption, now, onChange }) {
     }
   );
 }
+
+// src/Chart/BarChart/BarChart.tsx
+var import_react22 = require("react");
+var d3 = __toESM(require("d3"));
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var defaultMargin = { top: 30, right: 200, bottom: 36, left: 50 };
+var defaultColorPalette = [
+  "#4E79A7",
+  "#F28E2B",
+  "#E15759",
+  "#76B7B2",
+  "#59A14F",
+  "#EDC949",
+  "#AF7AA1",
+  "#FF9DA7",
+  "#9C755F",
+  "#BAB0AC"
+];
+var BarChart = ({
+  data,
+  height = 300,
+  margin = defaultMargin,
+  yLabel,
+  xLabel,
+  colorPalette = defaultColorPalette
+}) => {
+  const svgRef = (0, import_react22.useRef)(null);
+  const gRef = (0, import_react22.useRef)(null);
+  const xAxisRef = (0, import_react22.useRef)(null);
+  const yAxisRef = (0, import_react22.useRef)(null);
+  const containerRef = (0, import_react22.useRef)(null);
+  const widthRef = (0, import_react22.useRef)(0);
+  (0, import_react22.useEffect)(() => {
+    if (!containerRef.current) return;
+    const ro = new ResizeObserver((entries) => {
+      const cr = entries[0].contentRect;
+      widthRef.current = cr.width;
+      render();
+    });
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, []);
+  const xDomain = (0, import_react22.useMemo)(() => data.map((d) => d.x), [data]);
+  const yDomain = (0, import_react22.useMemo)(() => {
+    const maxY = d3.max(data, (d) => d.y);
+    return [0, (maxY !== void 0 ? maxY : 0) + (maxY !== void 0 ? maxY : 0) * 0.1];
+  }, [data]);
+  const render = () => {
+    const svg = d3.select(svgRef.current);
+    const g = d3.select(gRef.current);
+    const xAxisG = d3.select(xAxisRef.current);
+    const yAxisG = d3.select(yAxisRef.current);
+    const width = Math.max(200, widthRef.current || 600);
+    const innerW = width - margin.left - margin.right;
+    const innerH = height - margin.top - margin.bottom;
+    svg.attr("width", width).attr("height", height);
+    const x = d3.scaleBand().domain(xDomain).range([0, innerW]).padding(0.2);
+    const y = d3.scaleLinear().domain(yDomain).nice().range([innerH, 0]);
+    const xAxis = d3.axisBottom(x).tickSizeOuter(0).tickSize(0).tickFormat((d) => d);
+    const yAxis = d3.axisLeft(y).ticks(5).tickFormat(d3.format("~s"));
+    const grid = d3.axisLeft(y).ticks(5).tickSize(-innerW).scale(y);
+    const gridG = svg.append("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px");
+    gridG.selectAll("path").remove();
+    const barsG = svg.append("g").attr("class", "bars");
+    svg.selectAll(".grid").data([0]).join("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px").call((g2) => g2.selectAll("path").remove()).call(
+      (g2) => g2.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1)
+      // keep faint
+    );
+    svg.select(".grid").lower();
+    xAxisG.attr("transform", `translate(${margin.left},${height - margin.bottom})`).call(xAxis).selectAll("text").style("text-anchor", "middle").attr("dy", "1.5em").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
+    yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
+      (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr("x", -margin.left + 8).attr("y", -margin.top + 20).attr("text-anchor", "start").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
+      (update) => update.text((d) => d)
+    );
+    xAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
+      (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", width).attr("y", height - margin.bottom).attr("text-anchor", "middle").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
+      (update) => update.text((d) => d).attr("x", width)
+    );
+    const t = svg.transition().duration(400);
+    const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
+    bars.join(
+      (enter) => enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]).append("title").text((d) => `${d.x}: ${d.y}`).merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((enter2) => enter2.raise()),
+      // Bring the new bars to the front
+      (update) => update.call((update2) => update2.raise()).transition(t).attr("x", (d) => x(d.x) ?? 0).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
+      // Update color on update
+      (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
+    );
+    g.selectAll("text.bar-label").data(data).join(
+      (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).text((d) => d.y),
+      (update) => update.transition(t).attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).text((d) => d.y),
+      (exit) => exit.remove()
+    );
+  };
+  (0, import_react22.useEffect)(() => {
+    render();
+  }, [data, height, margin, xDomain.toString(), yDomain.toString()]);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("svg", { ref: svgRef, role: "img", "aria-label": "Bar chart", style: { display: "block", width: "100%", height }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("title", { children: "Bar chart" }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("g", { ref: xAxisRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("g", { ref: yAxisRef })
+  ] }) });
+};
+
+// src/Chart/PieChart/PieChart.tsx
+var import_react23 = __toESM(require("react"));
+var d32 = __toESM(require("d3"));
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var defaultColors = d32.schemeCategory10;
+var PieChart = ({
+  title,
+  description,
+  data,
+  width,
+  height,
+  colorPalette = defaultColors
+}) => {
+  const svgRef = (0, import_react23.useRef)(null);
+  const [dataSide, setDataSide] = import_react23.default.useState([]);
+  (0, import_react23.useEffect)(() => {
+    if (!svgRef.current) return;
+    d32.select(svgRef.current).selectAll("*").remove();
+    const radius = Math.min(width, height) / 2;
+    const totalValue = d32.sum(data, (d) => d.value) ?? 0;
+    const svg = d32.select(svgRef.current).attr("width", width).attr("height", height).append("g").attr("transform", `translate(${width / 2}, ${height / 2})`);
+    const pie2 = d32.pie().value((d) => d.value);
+    const arc2 = d32.arc().innerRadius(0).outerRadius(radius);
+    const arcs = svg.selectAll(".arc").data(pie2(data)).enter().append("g").attr("class", "arc");
+    arcs.append("path").attr("d", arc2).attr("fill", (d, i) => colorPalette[i]).attr("stroke", "white").attr("stroke-width", 2).attr("stroke-linejoin", "round");
+    setDataSide(
+      data.map((d, i) => ({
+        color: colorPalette[i],
+        label: d.label,
+        value: d.value
+      }))
+    );
+    arcs.append("text").attr("transform", (d) => `translate(${arc2.centroid(d)})`).attr("dy", ".35em").attr("text-anchor", "middle").style("fill", "white").style("font-family", "Kanit").style("font-size", "20px").style("font-style", "normal").style("font-weight", "500px").text((d) => {
+      const percentage = (d.data.value / totalValue * 100).toFixed(1);
+      return `${percentage}%`;
+    });
+  }, [data, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "body-2", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "caption-1", children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("svg", { ref: svgRef }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex flex-col gap-2 body-3 pl-[200px]", children: dataSide.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "grid grid-cols-3 gap-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-[20px] h-[20px]", style: { backgroundColor: d.color } }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: d.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: d.value })
+      ] }, i)) })
+    ] })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AntDModal,
   AntDataTable,
+  BarChart,
   Breadcrumbs,
   Calendar,
   Checkbox,
@@ -4531,6 +4688,7 @@ function TabProject({ tabOption, now, onChange }) {
   KpiSection,
   Loader,
   MenuNavBar,
+  PieChart,
   PrimaryButton,
   ProfileSelect,
   ProgressBar,

package/dist/index.mjs

@@ -1182,7 +1182,7 @@ function InputFieldNumber({
   addonAfter,
   defaultValue,
   className,
-  max,
+  max: max2,
   min,
   controls,
   size,
@@ -1215,7 +1215,7 @@ function InputFieldNumber({
             addonBefore,
             addonAfter,
             defaultValue,
-            max,
+            max: max2,
             min,
             controls,
             size,
@@ -1669,8 +1669,8 @@ function splitColorStr(str, parseNum) {
   return numList;
 }
 var parseHSVorHSL = (num, _, index) => index === 0 ? num : num / 100;
-function limitRange(value, max) {
-  const mergedMax = max || 255;
+function limitRange(value, max2) {
+  const mergedMax = max2 || 255;
   if (value > mergedMax) {
     return mergedMax;
   }
@@ -1964,9 +1964,9 @@ var FastColor = class _FastColor {
   }
   // ====================== Privates ======================
   /** Return a new FastColor object with one channel changed */
-  _sc(rgb, value, max) {
+  _sc(rgb, value, max2) {
     const clone = this.clone();
-    clone[rgb] = limitRange(value, max);
+    clone[rgb] = limitRange(value, max2);
     return clone;
   }
   _c(input) {
@@ -4288,7 +4288,7 @@ var QRCodeGenerator = ({
   fileBaseName = "qr-code"
 }) => {
   const canvasRef = useRef7(null);
-  const [format3, setFormat] = useState19("png");
+  const [format4, setFormat] = useState19("png");
   const [exportSize, setExportSize] = useState19(defaultExportSize);
   const sizeOption = [
     {
@@ -4342,7 +4342,7 @@ var QRCodeGenerator = ({
   }, [url, previewSize]);
   const download = async () => {
     try {
-      if (format3 === "svg") {
+      if (format4 === "svg") {
         const svgString = await QRCode.toString(url, {
           type: "svg",
           width: exportSize,
@@ -4358,9 +4358,9 @@ var QRCodeGenerator = ({
           width: exportSize,
           margin: 1
         });
-        const mime = format3 === "png" ? "image/png" : "image/jpeg";
-        const dataURL = format3 === "jpeg" ? offscreen.toDataURL(mime, 0.92) : offscreen.toDataURL(mime);
-        triggerDownload(dataURL, `${fileBaseName}.${format3}`);
+        const mime = format4 === "png" ? "image/png" : "image/jpeg";
+        const dataURL = format4 === "jpeg" ? offscreen.toDataURL(mime, 0.92) : offscreen.toDataURL(mime);
+        triggerDownload(dataURL, `${fileBaseName}.${format4}`);
       }
     } catch (err) {
       console.error("Failed to generate QR export:", err);
@@ -4393,7 +4393,7 @@ var QRCodeGenerator = ({
               SelectField,
               {
                 label: "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A",
-                value: format3,
+                value: format4,
                 onChange: (e) => setFormat(e.target.value),
                 options: typeOption
               }
@@ -4453,9 +4453,164 @@ function TabProject({ tabOption, now, onChange }) {
     }
   );
 }
+
+// src/Chart/BarChart/BarChart.tsx
+import { useEffect as useEffect9, useMemo as useMemo2, useRef as useRef8 } from "react";
+import * as d3 from "d3";
+import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
+var defaultMargin = { top: 30, right: 200, bottom: 36, left: 50 };
+var defaultColorPalette = [
+  "#4E79A7",
+  "#F28E2B",
+  "#E15759",
+  "#76B7B2",
+  "#59A14F",
+  "#EDC949",
+  "#AF7AA1",
+  "#FF9DA7",
+  "#9C755F",
+  "#BAB0AC"
+];
+var BarChart = ({
+  data,
+  height = 300,
+  margin = defaultMargin,
+  yLabel,
+  xLabel,
+  colorPalette = defaultColorPalette
+}) => {
+  const svgRef = useRef8(null);
+  const gRef = useRef8(null);
+  const xAxisRef = useRef8(null);
+  const yAxisRef = useRef8(null);
+  const containerRef = useRef8(null);
+  const widthRef = useRef8(0);
+  useEffect9(() => {
+    if (!containerRef.current) return;
+    const ro = new ResizeObserver((entries) => {
+      const cr = entries[0].contentRect;
+      widthRef.current = cr.width;
+      render();
+    });
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, []);
+  const xDomain = useMemo2(() => data.map((d) => d.x), [data]);
+  const yDomain = useMemo2(() => {
+    const maxY = d3.max(data, (d) => d.y);
+    return [0, (maxY !== void 0 ? maxY : 0) + (maxY !== void 0 ? maxY : 0) * 0.1];
+  }, [data]);
+  const render = () => {
+    const svg = d3.select(svgRef.current);
+    const g = d3.select(gRef.current);
+    const xAxisG = d3.select(xAxisRef.current);
+    const yAxisG = d3.select(yAxisRef.current);
+    const width = Math.max(200, widthRef.current || 600);
+    const innerW = width - margin.left - margin.right;
+    const innerH = height - margin.top - margin.bottom;
+    svg.attr("width", width).attr("height", height);
+    const x = d3.scaleBand().domain(xDomain).range([0, innerW]).padding(0.2);
+    const y = d3.scaleLinear().domain(yDomain).nice().range([innerH, 0]);
+    const xAxis = d3.axisBottom(x).tickSizeOuter(0).tickSize(0).tickFormat((d) => d);
+    const yAxis = d3.axisLeft(y).ticks(5).tickFormat(d3.format("~s"));
+    const grid = d3.axisLeft(y).ticks(5).tickSize(-innerW).scale(y);
+    const gridG = svg.append("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px");
+    gridG.selectAll("path").remove();
+    const barsG = svg.append("g").attr("class", "bars");
+    svg.selectAll(".grid").data([0]).join("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px").call((g2) => g2.selectAll("path").remove()).call(
+      (g2) => g2.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1)
+      // keep faint
+    );
+    svg.select(".grid").lower();
+    xAxisG.attr("transform", `translate(${margin.left},${height - margin.bottom})`).call(xAxis).selectAll("text").style("text-anchor", "middle").attr("dy", "1.5em").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
+    yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
+      (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr("x", -margin.left + 8).attr("y", -margin.top + 20).attr("text-anchor", "start").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
+      (update) => update.text((d) => d)
+    );
+    xAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
+      (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", width).attr("y", height - margin.bottom).attr("text-anchor", "middle").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
+      (update) => update.text((d) => d).attr("x", width)
+    );
+    const t = svg.transition().duration(400);
+    const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
+    bars.join(
+      (enter) => enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]).append("title").text((d) => `${d.x}: ${d.y}`).merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((enter2) => enter2.raise()),
+      // Bring the new bars to the front
+      (update) => update.call((update2) => update2.raise()).transition(t).attr("x", (d) => x(d.x) ?? 0).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
+      // Update color on update
+      (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
+    );
+    g.selectAll("text.bar-label").data(data).join(
+      (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).text((d) => d.y),
+      (update) => update.transition(t).attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).text((d) => d.y),
+      (exit) => exit.remove()
+    );
+  };
+  useEffect9(() => {
+    render();
+  }, [data, height, margin, xDomain.toString(), yDomain.toString()]);
+  return /* @__PURE__ */ jsx45("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxs39("svg", { ref: svgRef, role: "img", "aria-label": "Bar chart", style: { display: "block", width: "100%", height }, children: [
+    /* @__PURE__ */ jsx45("title", { children: "Bar chart" }),
+    /* @__PURE__ */ jsx45("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
+    /* @__PURE__ */ jsx45("g", { ref: xAxisRef }),
+    /* @__PURE__ */ jsx45("g", { ref: yAxisRef })
+  ] }) });
+};
+
+// src/Chart/PieChart/PieChart.tsx
+import React3, { useRef as useRef9, useEffect as useEffect10 } from "react";
+import * as d32 from "d3";
+import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
+var defaultColors = d32.schemeCategory10;
+var PieChart = ({
+  title,
+  description,
+  data,
+  width,
+  height,
+  colorPalette = defaultColors
+}) => {
+  const svgRef = useRef9(null);
+  const [dataSide, setDataSide] = React3.useState([]);
+  useEffect10(() => {
+    if (!svgRef.current) return;
+    d32.select(svgRef.current).selectAll("*").remove();
+    const radius = Math.min(width, height) / 2;
+    const totalValue = d32.sum(data, (d) => d.value) ?? 0;
+    const svg = d32.select(svgRef.current).attr("width", width).attr("height", height).append("g").attr("transform", `translate(${width / 2}, ${height / 2})`);
+    const pie2 = d32.pie().value((d) => d.value);
+    const arc2 = d32.arc().innerRadius(0).outerRadius(radius);
+    const arcs = svg.selectAll(".arc").data(pie2(data)).enter().append("g").attr("class", "arc");
+    arcs.append("path").attr("d", arc2).attr("fill", (d, i) => colorPalette[i]).attr("stroke", "white").attr("stroke-width", 2).attr("stroke-linejoin", "round");
+    setDataSide(
+      data.map((d, i) => ({
+        color: colorPalette[i],
+        label: d.label,
+        value: d.value
+      }))
+    );
+    arcs.append("text").attr("transform", (d) => `translate(${arc2.centroid(d)})`).attr("dy", ".35em").attr("text-anchor", "middle").style("fill", "white").style("font-family", "Kanit").style("font-size", "20px").style("font-style", "normal").style("font-weight", "500px").text((d) => {
+      const percentage = (d.data.value / totalValue * 100).toFixed(1);
+      return `${percentage}%`;
+    });
+  }, [data, width, height]);
+  return /* @__PURE__ */ jsxs40("div", { children: [
+    title && /* @__PURE__ */ jsx46("p", { className: "body-2", children: title }),
+    description && /* @__PURE__ */ jsx46("p", { className: "caption-1", children: description }),
+    /* @__PURE__ */ jsxs40("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx46("svg", { ref: svgRef }),
+      /* @__PURE__ */ jsx46("div", { className: "flex flex-col gap-2 body-3 pl-[200px]", children: dataSide.map((d, i) => /* @__PURE__ */ jsxs40("div", { className: "grid grid-cols-3 gap-2 items-center", children: [
+        /* @__PURE__ */ jsx46("div", { className: "w-[20px] h-[20px]", style: { backgroundColor: d.color } }),
+        /* @__PURE__ */ jsx46("div", { children: d.label }),
+        /* @__PURE__ */ jsx46("div", { children: d.value })
+      ] }, i)) })
+    ] })
+  ] });
+};
 export {
   AntDModal,
   AntDataTable,
+  BarChart,
   Breadcrumbs,
   Calendar,
   Checkbox,
@@ -4475,6 +4630,7 @@ export {
   KpiSection,
   Loader,
   MenuNavBar,
+  PieChart,
   PrimaryButton,
   ProfileSelect,
   ProgressBar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,8 +41,10 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "tsup src/index.ts --dts --dts-resolve --format esm,cjs --out-dir dist && npm run copy-assets",
-    "copy-assets": "xcopy src\\assets dist\\assets /E /I /Y"
+    "build": "tsup src/index.ts --format esm,cjs --out-dir dist && npm run copy-assets",
+    "build:dts": "tsup src/index.ts --dts --dts-resolve --out-dir dist",
+    "copy-assets": "xcopy src\\assets dist\\assets /E /I /Y",
+    "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
     "react": ">=18.0.0",