next-helios-fe 1.4.4 → 1.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/button/index.tsx

@@ -64,7 +64,7 @@ export const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
-      className={`relative flex ${position} items-center ${width} px-3 ${height} rounded-md text-left ${variant} ${border} ${isActive} select-none disabled:pointer-events-none active:opacity-70 active:duration-300 active:ease-out ${className}`}
+      className={`relative flex ${position} items-center ${width} px-3 ${height} rounded-md text-left ${variant} ${border} ${isActive} select-none disabled:pointer-events-none active:opacity-70 active:duration-300 active:ease-out disabled:active:opacity-100 ${className}`}
       {...rest}
     >
       {loading ? (

package/src/components/chart/index.tsx

@@ -4,31 +4,49 @@ import dynamic from "next/dynamic";
 const Ch = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 interface ChartProps {
-  type: "line" | "area" | "bar" | "pie" | "donut" | "radialBar" | "heatmap";
-  theme?: "light" | "dark" | "system";
+  type:
+    | "line"
+    | "area"
+    | "bar"
+    | "pie"
+    | "donut"
+    | "radialBar"
+    | "heatmap"
+    | "scatter"
+    | "bubble"
+    | "candlestick"
+    | "boxPlot"
+    | "radar"
+    | "polarArea"
+    | "rangeBar"
+    | "rangeArea"
+    | "treemap";
+
   id?: string;
   title?: string;
   subTitle?: string;
-  series: any;
   labels?: string[];
+  series: any;
   xaxis?: {
     categories: string[];
   };
-  height?: number;
-  sparkline?: boolean;
+  options?: {
+    theme?: "light" | "dark" | "system";
+    height?: number;
+    barChart?: { variant: "vertical" | "horizontal" };
+    sparkline?: boolean;
+  };
 }
 
 export const Chart: React.FC<ChartProps> = ({
   type,
-  theme,
   id,
   title,
   subTitle,
   series,
   labels,
   xaxis,
-  height,
-  sparkline,
+  options,
 }) => {
   const areaOptions = type === "area" && {
     fill: {
@@ -42,10 +60,10 @@ export const Chart: React.FC<ChartProps> = ({
 
   return (
     <Ch
-      type={type}
       id={id}
+      type={type}
       series={series}
-      height={height}
+      height={options?.height}
       options={{
         title: {
           text: title,
@@ -74,6 +92,7 @@ export const Chart: React.FC<ChartProps> = ({
           "#9e9e9e",
         ],
         chart: {
+          type: type,
           toolbar: {
             show: false,
           },
@@ -81,14 +100,14 @@ export const Chart: React.FC<ChartProps> = ({
             enabled: false,
           },
           sparkline: {
-            enabled: sparkline ?? true,
+            enabled: options?.sparkline ?? true,
           },
           events: {
             mounted: (chart) => {
               chart.windowResizeHandler();
             },
           },
-          foreColor: theme === "light" ? "#475569" : "#ffffff",
+          foreColor: options?.theme === "light" ? "#475569" : "#ffffff",
         },
         dataLabels: {
           enabled: false,
@@ -101,18 +120,39 @@ export const Chart: React.FC<ChartProps> = ({
           bar: {
             borderRadius: 4,
             columnWidth: "30%",
+            horizontal: options?.barChart?.variant === "horizontal",
           },
           pie: {
             donut: {
-              size: "70%",
+              labels: {
+                show: type === "donut",
+                name: {
+                  show: true,
+                },
+                value: {
+                  show: true,
+                },
+                total: {
+                  show: true,
+                },
+              },
+            },
+          },
+          radialBar: {
+            dataLabels: {
+              total: {
+                show: true,
+                label: "Total",
+              },
             },
           },
         },
         tooltip: {
-          theme: theme === "light" ? "light" : "dark",
+          theme: options?.theme === "light" ? "light" : "dark",
+          fillSeriesColor: false,
         },
         grid: {
-          borderColor: theme === "light" ? "#e5e6e8" : "#545869",
+          borderColor: options?.theme === "light" ? "#e5e6e8" : "#545869",
         },
         ...areaOptions,
       }}

package/src/components/content-container/modal/index.tsx

@@ -31,8 +31,8 @@ export const Modal: React.FC<ModalProps> = ({
   useEffect(() => {
     if (!options?.disableClose) {
       document.addEventListener("keydown", (e) => {
-        e.preventDefault();
         if (e.key === "Escape") {
+          e.preventDefault();
           onClose && onClose();
         }
       });