@etsoo/materialui 1.2.48 → 1.2.49

package/lib/LineChart.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { ChartData, LineControllerChartOptions } from "chart.js";
+/**
+ * Line chart
+ */
+export type LineChartProps = {
+    /**
+     * Chart data
+     */
+    data: ChartData<"line">;
+    /**
+     * Options
+     */
+    options?: LineControllerChartOptions;
+    /**
+     * Subtitle
+     */
+    subtitle?: string;
+    /**
+     * Title
+     */
+    title?: string;
+};
+/**
+ * Line chart
+ * @param props Props
+ * @returns Component
+ */
+export declare function LineChart(props: LineChartProps): React.JSX.Element;

package/lib/LineChart.js

@@ -0,0 +1,51 @@
+import { LinearProgress } from "@mui/material";
+import React from "react";
+/**
+ * Line chart
+ * @param props Props
+ * @returns Component
+ */
+export function LineChart(props) {
+    // Destruct
+    const { data, options, subtitle, title } = props;
+    // State
+    const [LineType, setLineType] = React.useState();
+    React.useEffect(() => {
+        Promise.all([
+            import("react-chartjs-2"),
+            import("chart.js"),
+            import("chartjs-plugin-datalabels")
+        ]).then(([{ Line }, { Chart: ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
+            // https://www.chartjs.org/docs/latest/getting-started/
+            ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ChartDataLabels);
+            setLineType(Line);
+        });
+    }, []);
+    return LineType == null ? (React.createElement(LinearProgress, null)) : (React.createElement(LineType, { options: {
+            scales: {
+                x: {
+                    ticks: {
+                        display: false //this will remove only the label
+                    }
+                }
+            },
+            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/index.d.ts

@@ -56,6 +56,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./LineChart";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";

package/lib/index.js

@@ -56,6 +56,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./LineChart";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.48",
+  "version": "1.2.49",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -63,10 +63,13 @@
     "@types/react-avatar-editor": "^13.0.0",
     "@types/react-dom": "^18.2.4",
     "@types/react-input-mask": "^3.0.2",
+    "chart.js": "^4.3.0",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
     "react": "^18.2.0",
     "react-avatar-editor": "^13.0.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-imask": "^6.6.1"

package/src/LineChart.tsx

@@ -0,0 +1,115 @@
+import { LinearProgress } from "@mui/material";
+import React from "react";
+import type { ChartData, LineControllerChartOptions } from "chart.js";
+import type { Line } from "react-chartjs-2";
+
+/**
+ * Line chart
+ */
+export type LineChartProps = {
+  /**
+   * Chart data
+   */
+  data: ChartData<"line">;
+
+  /**
+   * Options
+   */
+  options?: LineControllerChartOptions;
+
+  /**
+   * Subtitle
+   */
+  subtitle?: string;
+
+  /**
+   * Title
+   */
+  title?: string;
+};
+
+/**
+ * Line chart
+ * @param props Props
+ * @returns Component
+ */
+export function LineChart(props: LineChartProps) {
+  // Destruct
+  const { data, options, subtitle, title } = props;
+
+  // State
+  const [LineType, setLineType] = React.useState<typeof Line>();
+
+  React.useEffect(() => {
+    Promise.all([
+      import("react-chartjs-2"),
+      import("chart.js"),
+      import("chartjs-plugin-datalabels")
+    ]).then(
+      ([
+        { Line },
+        {
+          Chart: ChartJS,
+          CategoryScale,
+          LinearScale,
+          PointElement,
+          LineElement,
+          Title,
+          Tooltip,
+          Legend
+        },
+        ChartDataLabels
+      ]) => {
+        // https://www.chartjs.org/docs/latest/getting-started/
+        ChartJS.register(
+          CategoryScale,
+          LinearScale,
+          PointElement,
+          LineElement,
+          Title,
+          Tooltip,
+          Legend,
+
+          ChartDataLabels
+        );
+
+        setLineType(Line);
+      }
+    );
+  }, []);
+
+  return LineType == null ? (
+    <LinearProgress />
+  ) : (
+    <LineType
+      options={{
+        scales: {
+          x: {
+            ticks: {
+              display: false //this will remove only the label
+            }
+          }
+        },
+        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

@@ -59,6 +59,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./LineChart";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";