@etsoo/materialui 1.2.47 → 1.2.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/LineChart.d.ts +29 -0
  2. package/lib/LineChart.js +51 -0
  3. package/lib/index.d.ts +1 -0
  4. package/lib/index.js +1 -0
  5. package/package.json +6 -3
  6. package/src/LineChart.tsx +115 -0
  7. package/src/index.ts +1 -0
package/lib/LineChart.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import React from "react";
2
+ import type { ChartData, LineControllerChartOptions } from "chart.js";
3
+ /**
4
+ * Line chart
5
+ */
6
+ export type LineChartProps = {
7
+ /**
8
+ * Chart data
9
+ */
10
+ data: ChartData<"line">;
11
+ /**
12
+ * Options
13
+ */
14
+ options?: LineControllerChartOptions;
15
+ /**
16
+ * Subtitle
17
+ */
18
+ subtitle?: string;
19
+ /**
20
+ * Title
21
+ */
22
+ title?: string;
23
+ };
24
+ /**
25
+ * Line chart
26
+ * @param props Props
27
+ * @returns Component
28
+ */
29
+ export declare function LineChart(props: LineChartProps): React.JSX.Element;
package/lib/LineChart.js ADDED
@@ -0,0 +1,51 @@
1
+ import { LinearProgress } from "@mui/material";
2
+ import React from "react";
3
+ /**
4
+ * Line chart
5
+ * @param props Props
6
+ * @returns Component
7
+ */
8
+ export function LineChart(props) {
9
+ // Destruct
10
+ const { data, options, subtitle, title } = props;
11
+ // State
12
+ const [LineType, setLineType] = React.useState();
13
+ React.useEffect(() => {
14
+ Promise.all([
15
+ import("react-chartjs-2"),
16
+ import("chart.js"),
17
+ import("chartjs-plugin-datalabels")
18
+ ]).then(([{ Line }, { Chart: ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
19
+ // https://www.chartjs.org/docs/latest/getting-started/
20
+ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ChartDataLabels);
21
+ setLineType(Line);
22
+ });
23
+ }, []);
24
+ return LineType == null ? (React.createElement(LinearProgress, null)) : (React.createElement(LineType, { options: {
25
+ scales: {
26
+ x: {
27
+ ticks: {
28
+ display: false //this will remove only the label
29
+ }
30
+ }
31
+ },
32
+ responsive: true,
33
+ plugins: {
34
+ datalabels: {
35
+ display: (context) => context.dataset.data.length <= 31,
36
+ align: "end"
37
+ },
38
+ legend: {
39
+ position: "top"
40
+ },
41
+ subtitle: subtitle ? { text: subtitle, display: true } : undefined,
42
+ title: title
43
+ ? {
44
+ text: title,
45
+ display: true
46
+ }
47
+ : undefined
48
+ },
49
+ ...options
50
+ }, data: data }));
51
+ }
package/lib/index.d.ts CHANGED
@@ -56,6 +56,7 @@ export * from "./InputField";
56
56
  export * from "./InputTipField";
57
57
  export * from "./IntInputField";
58
58
  export * from "./ItemList";
59
+ export * from "./LineChart";
59
60
  export * from "./ListChooser";
60
61
  export * from "./ListItemRightIcon";
61
62
  export * from "./ListMoreDisplay";
package/lib/index.js CHANGED
@@ -56,6 +56,7 @@ export * from "./InputField";
56
56
  export * from "./InputTipField";
57
57
  export * from "./IntInputField";
58
58
  export * from "./ItemList";
59
+ export * from "./LineChart";
59
60
  export * from "./ListChooser";
60
61
  export * from "./ListItemRightIcon";
61
62
  export * from "./ListMoreDisplay";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.2.47",
3
+ "version": "1.2.49",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
50
50
  "@emotion/css": "^11.11.0",
51
51
  "@emotion/react": "^11.11.0",
52
52
  "@emotion/styled": "^11.11.0",
53
- "@etsoo/appscript": "^1.4.10",
53
+ "@etsoo/appscript": "^1.4.11",
54
54
  "@etsoo/notificationbase": "^1.1.25",
55
- "@etsoo/react": "^1.6.87",
55
+ "@etsoo/react": "^1.6.88",
56
56
  "@etsoo/shared": "^1.2.5",
57
57
  "@mui/icons-material": "^5.11.16",
58
58
  "@mui/material": "^5.13.1",
@@ -63,10 +63,13 @@
63
63
  "@types/react-avatar-editor": "^13.0.0",
64
64
  "@types/react-dom": "^18.2.4",
65
65
  "@types/react-input-mask": "^3.0.2",
66
+ "chart.js": "^4.3.0",
67
+ "chartjs-plugin-datalabels": "^2.2.0",
66
68
  "pica": "^9.0.1",
67
69
  "pulltorefreshjs": "^0.1.22",
68
70
  "react": "^18.2.0",
69
71
  "react-avatar-editor": "^13.0.0",
72
+ "react-chartjs-2": "^5.2.0",
70
73
  "react-dom": "^18.2.0",
71
74
  "react-draggable": "^4.4.5",
72
75
  "react-imask": "^6.6.1"
package/src/LineChart.tsx ADDED
@@ -0,0 +1,115 @@
1
+ import { LinearProgress } from "@mui/material";
2
+ import React from "react";
3
+ import type { ChartData, LineControllerChartOptions } from "chart.js";
4
+ import type { Line } from "react-chartjs-2";
5
+
6
+ /**
7
+ * Line chart
8
+ */
9
+ export type LineChartProps = {
10
+ /**
11
+ * Chart data
12
+ */
13
+ data: ChartData<"line">;
14
+
15
+ /**
16
+ * Options
17
+ */
18
+ options?: LineControllerChartOptions;
19
+
20
+ /**
21
+ * Subtitle
22
+ */
23
+ subtitle?: string;
24
+
25
+ /**
26
+ * Title
27
+ */
28
+ title?: string;
29
+ };
30
+
31
+ /**
32
+ * Line chart
33
+ * @param props Props
34
+ * @returns Component
35
+ */
36
+ export function LineChart(props: LineChartProps) {
37
+ // Destruct
38
+ const { data, options, subtitle, title } = props;
39
+
40
+ // State
41
+ const [LineType, setLineType] = React.useState<typeof Line>();
42
+
43
+ React.useEffect(() => {
44
+ Promise.all([
45
+ import("react-chartjs-2"),
46
+ import("chart.js"),
47
+ import("chartjs-plugin-datalabels")
48
+ ]).then(
49
+ ([
50
+ { Line },
51
+ {
52
+ Chart: ChartJS,
53
+ CategoryScale,
54
+ LinearScale,
55
+ PointElement,
56
+ LineElement,
57
+ Title,
58
+ Tooltip,
59
+ Legend
60
+ },
61
+ ChartDataLabels
62
+ ]) => {
63
+ // https://www.chartjs.org/docs/latest/getting-started/
64
+ ChartJS.register(
65
+ CategoryScale,
66
+ LinearScale,
67
+ PointElement,
68
+ LineElement,
69
+ Title,
70
+ Tooltip,
71
+ Legend,
72
+
73
+ ChartDataLabels
74
+ );
75
+
76
+ setLineType(Line);
77
+ }
78
+ );
79
+ }, []);
80
+
81
+ return LineType == null ? (
82
+ <LinearProgress />
83
+ ) : (
84
+ <LineType
85
+ options={{
86
+ scales: {
87
+ x: {
88
+ ticks: {
89
+ display: false //this will remove only the label
90
+ }
91
+ }
92
+ },
93
+ responsive: true,
94
+ plugins: {
95
+ datalabels: {
96
+ display: (context) => context.dataset.data.length <= 31,
97
+ align: "end"
98
+ },
99
+ legend: {
100
+ position: "top" as const
101
+ },
102
+ subtitle: subtitle ? { text: subtitle, display: true } : undefined,
103
+ title: title
104
+ ? {
105
+ text: title,
106
+ display: true
107
+ }
108
+ : undefined
109
+ },
110
+ ...options
111
+ }}
112
+ data={data}
113
+ />
114
+ );
115
+ }
package/src/index.ts CHANGED
@@ -59,6 +59,7 @@ export * from "./InputField";
59
59
  export * from "./InputTipField";
60
60
  export * from "./IntInputField";
61
61
  export * from "./ItemList";
62
+ export * from "./LineChart";
62
63
  export * from "./ListChooser";
63
64
  export * from "./ListItemRightIcon";
64
65
  export * from "./ListMoreDisplay";