@etsoo/materialui 1.6.70 → 1.6.71

package/lib/cjs/BarChart.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { ChartData, ChartOptions } from "chart.js" with {
+    "resolution-mode": "import"
+};
+/**
+ * Bar chart
+ */
+export type BarChartProps = {
+    /**
+     * Chart data
+     */
+    data: ChartData<"bar">;
+    /**
+     * Options
+     */
+    options?: ChartOptions<"bar">;
+    /**
+     * Subtitle
+     */
+    subtitle?: string;
+    /**
+     * Title
+     */
+    title?: string;
+};
+/**
+ * Bar chart
+ * @param props Props
+ * @returns Component
+ */
+export declare function BarChart(props: BarChartProps): React.JSX.Element;

package/lib/cjs/BarChart.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChart = BarChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
+/**
+ * Bar chart
+ * @param props Props
+ * @returns Component
+ */
+function BarChart(props) {
+    // Destruct
+    const { data, options, subtitle, title } = props;
+    // State
+    const [BarType, setBarType] = react_1.default.useState();
+    react_1.default.useEffect(() => {
+        Promise.all([
+            import("react-chartjs-2"),
+            import("chart.js"),
+            import("chartjs-plugin-datalabels")
+        ]).then(([{ Bar }, { Chart: ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
+            // https://www.chartjs.org/docs/latest/getting-started/
+            ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
+            );
+            setBarType(Bar);
+        });
+    }, []);
+    return BarType == null ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : ((0, jsx_runtime_1.jsx)(BarType, { options: {
+            scales: {
+                x: {
+                    ticks: {
+                        display: true // When false, this will remove x labels
+                    }
+                }
+            },
+            responsive: true,
+            plugins: {
+                datalabels: {
+                    display: (context) => context.dataset.data.length <= 31,
+                    align: "end"
+                },
+                legend: {
+                    position: "top"
+                },
+                subtitle: subtitle ? { text: subtitle, display: true } : undefined,
+                title: title
+                    ? {
+                        text: title,
+                        display: true
+                    }
+                    : undefined
+            },
+            ...options
+        }, data: data }));
+}

package/lib/cjs/LineChart.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
-import type { ChartData, LineControllerChartOptions } from "chart.js" with { "resolution-mode": "import" };
+import type { ChartData, ChartOptions } from "chart.js" with {
+    "resolution-mode": "import"
+};
 /**
  * Line chart
  */
@@ -11,7 +13,7 @@ export type LineChartProps = {
     /**
      * Options
      */
-    options?: LineControllerChartOptions;
+    options?: ChartOptions<"line">;
     /**
      * Subtitle
      */

package/lib/cjs/LineChart.js

@@ -33,7 +33,7 @@ function LineChart(props) {
             scales: {
                 x: {
                     ticks: {
-                        display: false //this will remove only the label
+                        display: true // When false, this will remove x labels
                     }
                 }
             },

package/lib/cjs/PieChart.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { ChartData, ChartOptions } from "chart.js" with {
+    "resolution-mode": "import"
+};
+/**
+ * Pie chart
+ */
+export type PieChartProps = {
+    /**
+     * Chart data
+     */
+    data: ChartData<"pie">;
+    /**
+     * Options
+     */
+    options?: ChartOptions<"pie">;
+    /**
+     * Subtitle
+     */
+    subtitle?: string;
+    /**
+     * Title
+     */
+    title?: string;
+};
+/**
+ * Pie chart
+ * @param props Props
+ * @returns Component
+ */
+export declare function PieChart(props: PieChartProps): React.JSX.Element;

package/lib/cjs/PieChart.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = PieChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
+/**
+ * Pie chart
+ * @param props Props
+ * @returns Component
+ */
+function PieChart(props) {
+    // Destruct
+    const { data, options, subtitle, title } = props;
+    // State
+    const [PieType, setPieType] = react_1.default.useState();
+    react_1.default.useEffect(() => {
+        Promise.all([
+            import("react-chartjs-2"),
+            import("chart.js"),
+            import("chartjs-plugin-datalabels")
+        ]).then(([{ Pie }, { Chart: ChartJS, CategoryScale, LinearScale, ArcElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
+            // https://www.chartjs.org/docs/latest/getting-started/
+            ChartJS.register(CategoryScale, LinearScale, ArcElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
+            );
+            setPieType(Pie);
+        });
+    }, []);
+    return PieType == null ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : ((0, jsx_runtime_1.jsx)(PieType, { options: {
+            scales: {
+                x: {
+                    ticks: {
+                        display: true // When false, this will remove x labels
+                    }
+                }
+            },
+            responsive: true,
+            plugins: {
+                datalabels: {
+                    display: (context) => context.dataset.data.length <= 31,
+                    align: "end"
+                },
+                legend: {
+                    position: "top"
+                },
+                subtitle: subtitle ? { text: subtitle, display: true } : undefined,
+                title: title
+                    ? {
+                        text: title,
+                        display: true
+                    }
+                    : undefined
+            },
+            ...options
+        }, data: data }));
+}

package/lib/cjs/index.d.ts

@@ -39,6 +39,7 @@ export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
+export * from "./BarChart";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
 export * from "./ButtonList";
@@ -104,6 +105,7 @@ export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
 export * from "./PhoneInput";
+export * from "./PieChart";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/lib/cjs/index.js

@@ -59,6 +59,7 @@ __exportStar(require("./AddresSelector"), exports);
 __exportStar(require("./AuditDisplay"), exports);
 __exportStar(require("./AutocompleteExtendedProps"), exports);
 __exportStar(require("./BackButton"), exports);
+__exportStar(require("./BarChart"), exports);
 __exportStar(require("./BridgeCloseButton"), exports);
 __exportStar(require("./ButtonLink"), exports);
 __exportStar(require("./ButtonList"), exports);
@@ -124,6 +125,7 @@ __exportStar(require("./OptionGroupFlag"), exports);
 __exportStar(require("./PercentCircularProgress"), exports);
 __exportStar(require("./PercentLinearProgress"), exports);
 __exportStar(require("./PhoneInput"), exports);
+__exportStar(require("./PieChart"), exports);
 __exportStar(require("./PList"), exports);
 __exportStar(require("./ProgressCount"), exports);
 __exportStar(require("./PullToRefreshUI"), exports);

package/lib/mjs/BarChart.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { ChartData, ChartOptions } from "chart.js" with {
+    "resolution-mode": "import"
+};
+/**
+ * Bar chart
+ */
+export type BarChartProps = {
+    /**
+     * Chart data
+     */
+    data: ChartData<"bar">;
+    /**
+     * Options
+     */
+    options?: ChartOptions<"bar">;
+    /**
+     * Subtitle
+     */
+    subtitle?: string;
+    /**
+     * Title
+     */
+    title?: string;
+};
+/**
+ * Bar chart
+ * @param props Props
+ * @returns Component
+ */
+export declare function BarChart(props: BarChartProps): React.JSX.Element;

package/lib/mjs/BarChart.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import LinearProgress from "@mui/material/LinearProgress";
+/**
+ * Bar chart
+ * @param props Props
+ * @returns Component
+ */
+export function BarChart(props) {
+    // Destruct
+    const { data, options, subtitle, title } = props;
+    // State
+    const [BarType, setBarType] = React.useState();
+    React.useEffect(() => {
+        Promise.all([
+            import("react-chartjs-2"),
+            import("chart.js"),
+            import("chartjs-plugin-datalabels")
+        ]).then(([{ Bar }, { Chart: ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
+            // https://www.chartjs.org/docs/latest/getting-started/
+            ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
+            );
+            setBarType(Bar);
+        });
+    }, []);
+    return BarType == null ? (_jsx(LinearProgress, {})) : (_jsx(BarType, { options: {
+            scales: {
+                x: {
+                    ticks: {
+                        display: true // When false, this will remove x labels
+                    }
+                }
+            },
+            responsive: true,
+            plugins: {
+                datalabels: {
+                    display: (context) => context.dataset.data.length <= 31,
+                    align: "end"
+                },
+                legend: {
+                    position: "top"
+                },
+                subtitle: subtitle ? { text: subtitle, display: true } : undefined,
+                title: title
+                    ? {
+                        text: title,
+                        display: true
+                    }
+                    : undefined
+            },
+            ...options
+        }, data: data }));
+}

package/lib/mjs/LineChart.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
-import type { ChartData, LineControllerChartOptions } from "chart.js" with { "resolution-mode": "import" };
+import type { ChartData, ChartOptions } from "chart.js" with {
+    "resolution-mode": "import"
+};
 /**
  * Line chart
  */
@@ -11,7 +13,7 @@ export type LineChartProps = {
     /**
      * Options
      */
-    options?: LineControllerChartOptions;
+    options?: ChartOptions<"line">;
     /**
      * Subtitle
      */

package/lib/mjs/LineChart.js

@@ -27,7 +27,7 @@ export function LineChart(props) {
             scales: {
                 x: {
                     ticks: {
-                        display: false //this will remove only the label
+                        display: true // When false, this will remove x labels
                     }
                 }
             },

package/lib/mjs/PieChart.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { ChartData, ChartOptions } from "chart.js" with {
+    "resolution-mode": "import"
+};
+/**
+ * Pie chart
+ */
+export type PieChartProps = {
+    /**
+     * Chart data
+     */
+    data: ChartData<"pie">;
+    /**
+     * Options
+     */
+    options?: ChartOptions<"pie">;
+    /**
+     * Subtitle
+     */
+    subtitle?: string;
+    /**
+     * Title
+     */
+    title?: string;
+};
+/**
+ * Pie chart
+ * @param props Props
+ * @returns Component
+ */
+export declare function PieChart(props: PieChartProps): React.JSX.Element;

package/lib/mjs/PieChart.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import LinearProgress from "@mui/material/LinearProgress";
+/**
+ * Pie chart
+ * @param props Props
+ * @returns Component
+ */
+export function PieChart(props) {
+    // Destruct
+    const { data, options, subtitle, title } = props;
+    // State
+    const [PieType, setPieType] = React.useState();
+    React.useEffect(() => {
+        Promise.all([
+            import("react-chartjs-2"),
+            import("chart.js"),
+            import("chartjs-plugin-datalabels")
+        ]).then(([{ Pie }, { Chart: ChartJS, CategoryScale, LinearScale, ArcElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
+            // https://www.chartjs.org/docs/latest/getting-started/
+            ChartJS.register(CategoryScale, LinearScale, ArcElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
+            );
+            setPieType(Pie);
+        });
+    }, []);
+    return PieType == null ? (_jsx(LinearProgress, {})) : (_jsx(PieType, { options: {
+            scales: {
+                x: {
+                    ticks: {
+                        display: true // When false, this will remove x labels
+                    }
+                }
+            },
+            responsive: true,
+            plugins: {
+                datalabels: {
+                    display: (context) => context.dataset.data.length <= 31,
+                    align: "end"
+                },
+                legend: {
+                    position: "top"
+                },
+                subtitle: subtitle ? { text: subtitle, display: true } : undefined,
+                title: title
+                    ? {
+                        text: title,
+                        display: true
+                    }
+                    : undefined
+            },
+            ...options
+        }, data: data }));
+}

package/lib/mjs/index.d.ts

@@ -39,6 +39,7 @@ export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
+export * from "./BarChart";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
 export * from "./ButtonList";
@@ -104,6 +105,7 @@ export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
 export * from "./PhoneInput";
+export * from "./PieChart";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/lib/mjs/index.js

@@ -39,6 +39,7 @@ export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
+export * from "./BarChart";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
 export * from "./ButtonList";
@@ -104,6 +105,7 @@ export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
 export * from "./PhoneInput";
+export * from "./PieChart";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.70",
+  "version": "1.6.71",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -43,7 +43,7 @@
     "@etsoo/appscript": "^1.6.66",
     "@etsoo/notificationbase": "^1.1.71",
     "@etsoo/react": "^1.8.91",
-    "@etsoo/shared": "^1.2.84",
+    "@etsoo/shared": "^1.2.86",
     "@mui/icons-material": "^9.1.1",
     "@mui/material": "^9.1.1",
     "@mui/x-data-grid": "^9.5.0",
@@ -82,6 +82,6 @@
     "@vitejs/plugin-react": "^6.0.2",
     "jsdom": "^29.1.1",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.9"
   }
 }

package/src/BarChart.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import type { ChartData, ChartOptions } from "chart.js" with {
+  "resolution-mode": "import"
+};
+import type { Bar } from "react-chartjs-2" with {
+  "resolution-mode": "import"
+};
+import LinearProgress from "@mui/material/LinearProgress";
+
+/**
+ * Bar chart
+ */
+export type BarChartProps = {
+  /**
+   * Chart data
+   */
+  data: ChartData<"bar">;
+
+  /**
+   * Options
+   */
+  options?: ChartOptions<"bar">;
+
+  /**
+   * Subtitle
+   */
+  subtitle?: string;
+
+  /**
+   * Title
+   */
+  title?: string;
+};
+
+/**
+ * Bar chart
+ * @param props Props
+ * @returns Component
+ */
+export function BarChart(props: BarChartProps) {
+  // Destruct
+  const { data, options, subtitle, title } = props;
+
+  // State
+  const [BarType, setBarType] = React.useState<typeof Bar>();
+
+  React.useEffect(() => {
+    Promise.all([
+      import("react-chartjs-2"),
+      import("chart.js"),
+      import("chartjs-plugin-datalabels")
+    ]).then(
+      ([
+        { Bar },
+        {
+          Chart: ChartJS,
+          CategoryScale,
+          LinearScale,
+          BarElement,
+          Title,
+          Tooltip,
+          Legend
+        },
+        ChartDataLabels
+      ]) => {
+        // https://www.chartjs.org/docs/latest/getting-started/
+        ChartJS.register(
+          CategoryScale,
+          LinearScale,
+          BarElement,
+          Title,
+          Tooltip,
+          Legend,
+
+          ChartDataLabels as any // CommonJS says 'id' is missing
+        );
+
+        setBarType(Bar);
+      }
+    );
+  }, []);
+
+  return BarType == null ? (
+    <LinearProgress />
+  ) : (
+    <BarType
+      options={{
+        scales: {
+          x: {
+            ticks: {
+              display: true // When false, this will remove x labels
+            }
+          }
+        },
+        responsive: true,
+        plugins: {
+          datalabels: {
+            display: (context) => context.dataset.data.length <= 31,
+            align: "end"
+          },
+          legend: {
+            position: "top" as const
+          },
+          subtitle: subtitle ? { text: subtitle, display: true } : undefined,
+          title: title
+            ? {
+                text: title,
+                display: true
+              }
+            : undefined
+        },
+        ...options
+      }}
+      data={data}
+    />
+  );
+}

package/src/LineChart.tsx

@@ -1,6 +1,10 @@
 import React from "react";
-import type { ChartData, LineControllerChartOptions } from "chart.js" with { "resolution-mode": "import" };
-import type { Line } from "react-chartjs-2" with { "resolution-mode": "import" };
+import type { ChartData, ChartOptions } from "chart.js" with {
+  "resolution-mode": "import"
+};
+import type { Line } from "react-chartjs-2" with {
+  "resolution-mode": "import"
+};
 import LinearProgress from "@mui/material/LinearProgress";
 
 /**
@@ -15,7 +19,7 @@ export type LineChartProps = {
   /**
    * Options
    */
-  options?: LineControllerChartOptions;
+  options?: ChartOptions<"line">;
 
   /**
    * Subtitle
@@ -86,7 +90,7 @@ export function LineChart(props: LineChartProps) {
         scales: {
           x: {
             ticks: {
-              display: false //this will remove only the label
+              display: true // When false, this will remove x labels
             }
           }
         },

package/src/PieChart.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import type { ChartData, ChartOptions } from "chart.js" with {
+  "resolution-mode": "import"
+};
+import type { Pie } from "react-chartjs-2" with {
+  "resolution-mode": "import"
+};
+import LinearProgress from "@mui/material/LinearProgress";
+
+/**
+ * Pie chart
+ */
+export type PieChartProps = {
+  /**
+   * Chart data
+   */
+  data: ChartData<"pie">;
+
+  /**
+   * Options
+   */
+  options?: ChartOptions<"pie">;
+
+  /**
+   * Subtitle
+   */
+  subtitle?: string;
+
+  /**
+   * Title
+   */
+  title?: string;
+};
+
+/**
+ * Pie chart
+ * @param props Props
+ * @returns Component
+ */
+export function PieChart(props: PieChartProps) {
+  // Destruct
+  const { data, options, subtitle, title } = props;
+
+  // State
+  const [PieType, setPieType] = React.useState<typeof Pie>();
+
+  React.useEffect(() => {
+    Promise.all([
+      import("react-chartjs-2"),
+      import("chart.js"),
+      import("chartjs-plugin-datalabels")
+    ]).then(
+      ([
+        { Pie },
+        {
+          Chart: ChartJS,
+          CategoryScale,
+          LinearScale,
+          ArcElement,
+          Title,
+          Tooltip,
+          Legend
+        },
+        ChartDataLabels
+      ]) => {
+        // https://www.chartjs.org/docs/latest/getting-started/
+        ChartJS.register(
+          CategoryScale,
+          LinearScale,
+          ArcElement,
+          Title,
+          Tooltip,
+          Legend,
+
+          ChartDataLabels as any // CommonJS says 'id' is missing
+        );
+
+        setPieType(Pie);
+      }
+    );
+  }, []);
+
+  return PieType == null ? (
+    <LinearProgress />
+  ) : (
+    <PieType
+      options={{
+        scales: {
+          x: {
+            ticks: {
+              display: true // When false, this will remove x labels
+            }
+          }
+        },
+        responsive: true,
+        plugins: {
+          datalabels: {
+            display: (context) => context.dataset.data.length <= 31,
+            align: "end"
+          },
+          legend: {
+            position: "top" as const
+          },
+          subtitle: subtitle ? { text: subtitle, display: true } : undefined,
+          title: title
+            ? {
+                text: title,
+                display: true
+              }
+            : undefined
+        },
+        ...options
+      }}
+      data={data}
+    />
+  );
+}

package/src/index.ts

@@ -45,6 +45,7 @@ export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
+export * from "./BarChart";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
 export * from "./ButtonList";
@@ -110,6 +111,7 @@ export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
 export * from "./PhoneInput";
+export * from "./PieChart";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";