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

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) {
@@ -2956,7 +2956,8 @@ function FileUploader({
   value,
   uploadText = "\u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C",
   uploaderWidth = "w-full",
-  attachWidth = "w-full"
+  attachWidth = "w-full",
+  readOnly = false
 }) {
   const [internalFileList, setInternalFileList] = useState12([]);
   const [uploading, setUploading] = useState12(false);
@@ -3028,7 +3029,7 @@ function FileUploader({
   };
   return /* @__PURE__ */ jsxs30("div", { className: "w-full", children: [
     label && /* @__PURE__ */ jsx34("p", { className: "body-1", children: label }),
-    /* @__PURE__ */ jsxs30("div", { className: uploaderWidth, children: [
+    !readOnly && /* @__PURE__ */ jsxs30("div", { className: uploaderWidth, children: [
       mode === "upload" ? /* @__PURE__ */ jsx34(
         "button",
         {
@@ -3098,7 +3099,7 @@ function FileUploader({
             /* @__PURE__ */ jsx34("div", { className: "w-[24px] h-[24px] flex items-center justify-center", children: /* @__PURE__ */ jsx34(IconFileDescription, { size: 20 }) }),
             /* @__PURE__ */ jsx34("span", { className: "truncate", children: file.name || file.fileName })
           ] }),
-          !disabled && /* @__PURE__ */ jsx34(
+          !readOnly && !disabled && /* @__PURE__ */ jsx34(
             IconTrash2,
             {
               size: 20,
@@ -4287,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 = [
     {
@@ -4341,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,
@@ -4357,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);
@@ -4392,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
               }
@@ -4452,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,
@@ -4474,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.53",
+  "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",