@etsoo/materialui 1.6.70 → 1.6.72
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.
- package/lib/cjs/BarChart.d.ts +31 -0
- package/lib/cjs/BarChart.js +59 -0
- package/lib/cjs/LineChart.d.ts +4 -2
- package/lib/cjs/LineChart.js +1 -1
- package/lib/cjs/PieChart.d.ts +31 -0
- package/lib/cjs/PieChart.js +59 -0
- package/lib/cjs/index.d.ts +2 -0
- package/lib/cjs/index.js +2 -0
- package/lib/mjs/BarChart.d.ts +31 -0
- package/lib/mjs/BarChart.js +53 -0
- package/lib/mjs/LineChart.d.ts +4 -2
- package/lib/mjs/LineChart.js +1 -1
- package/lib/mjs/PieChart.d.ts +31 -0
- package/lib/mjs/PieChart.js +53 -0
- package/lib/mjs/index.d.ts +2 -0
- package/lib/mjs/index.js +2 -0
- package/package.json +17 -17
- package/src/BarChart.tsx +117 -0
- package/src/LineChart.tsx +8 -4
- package/src/PieChart.tsx +117 -0
- package/src/index.ts +2 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ChartData, ChartOptions } from "chart.js" with {
|
|
3
|
+
"resolution-mode": "import"
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Bar chart
|
|
7
|
+
*/
|
|
8
|
+
export type BarChartProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Chart data
|
|
11
|
+
*/
|
|
12
|
+
data: ChartData<"bar">;
|
|
13
|
+
/**
|
|
14
|
+
* Options
|
|
15
|
+
*/
|
|
16
|
+
options?: ChartOptions<"bar">;
|
|
17
|
+
/**
|
|
18
|
+
* Subtitle
|
|
19
|
+
*/
|
|
20
|
+
subtitle?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Title
|
|
23
|
+
*/
|
|
24
|
+
title?: string;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Bar chart
|
|
28
|
+
* @param props Props
|
|
29
|
+
* @returns Component
|
|
30
|
+
*/
|
|
31
|
+
export declare function BarChart(props: BarChartProps): React.JSX.Element;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.BarChart = BarChart;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const react_1 = __importDefault(require("react"));
|
|
9
|
+
const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
|
|
10
|
+
/**
|
|
11
|
+
* Bar chart
|
|
12
|
+
* @param props Props
|
|
13
|
+
* @returns Component
|
|
14
|
+
*/
|
|
15
|
+
function BarChart(props) {
|
|
16
|
+
// Destruct
|
|
17
|
+
const { data, options, subtitle, title } = props;
|
|
18
|
+
// State
|
|
19
|
+
const [BarType, setBarType] = react_1.default.useState();
|
|
20
|
+
react_1.default.useEffect(() => {
|
|
21
|
+
Promise.all([
|
|
22
|
+
import("react-chartjs-2"),
|
|
23
|
+
import("chart.js"),
|
|
24
|
+
import("chartjs-plugin-datalabels")
|
|
25
|
+
]).then(([{ Bar }, { Chart: ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
|
|
26
|
+
// https://www.chartjs.org/docs/latest/getting-started/
|
|
27
|
+
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
|
|
28
|
+
);
|
|
29
|
+
setBarType(Bar);
|
|
30
|
+
});
|
|
31
|
+
}, []);
|
|
32
|
+
return BarType == null ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : ((0, jsx_runtime_1.jsx)(BarType, { options: {
|
|
33
|
+
scales: {
|
|
34
|
+
x: {
|
|
35
|
+
ticks: {
|
|
36
|
+
display: true // When false, this will remove x labels
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
responsive: true,
|
|
41
|
+
plugins: {
|
|
42
|
+
datalabels: {
|
|
43
|
+
display: (context) => context.dataset.data.length <= 31,
|
|
44
|
+
align: "end"
|
|
45
|
+
},
|
|
46
|
+
legend: {
|
|
47
|
+
position: "top"
|
|
48
|
+
},
|
|
49
|
+
subtitle: subtitle ? { text: subtitle, display: true } : undefined,
|
|
50
|
+
title: title
|
|
51
|
+
? {
|
|
52
|
+
text: title,
|
|
53
|
+
display: true
|
|
54
|
+
}
|
|
55
|
+
: undefined
|
|
56
|
+
},
|
|
57
|
+
...options
|
|
58
|
+
}, data: data }));
|
|
59
|
+
}
|
package/lib/cjs/LineChart.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { ChartData,
|
|
2
|
+
import type { ChartData, ChartOptions } from "chart.js" with {
|
|
3
|
+
"resolution-mode": "import"
|
|
4
|
+
};
|
|
3
5
|
/**
|
|
4
6
|
* Line chart
|
|
5
7
|
*/
|
|
@@ -11,7 +13,7 @@ export type LineChartProps = {
|
|
|
11
13
|
/**
|
|
12
14
|
* Options
|
|
13
15
|
*/
|
|
14
|
-
options?:
|
|
16
|
+
options?: ChartOptions<"line">;
|
|
15
17
|
/**
|
|
16
18
|
* Subtitle
|
|
17
19
|
*/
|
package/lib/cjs/LineChart.js
CHANGED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ChartData, ChartOptions } from "chart.js" with {
|
|
3
|
+
"resolution-mode": "import"
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Pie chart
|
|
7
|
+
*/
|
|
8
|
+
export type PieChartProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Chart data
|
|
11
|
+
*/
|
|
12
|
+
data: ChartData<"pie">;
|
|
13
|
+
/**
|
|
14
|
+
* Options
|
|
15
|
+
*/
|
|
16
|
+
options?: ChartOptions<"pie">;
|
|
17
|
+
/**
|
|
18
|
+
* Subtitle
|
|
19
|
+
*/
|
|
20
|
+
subtitle?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Title
|
|
23
|
+
*/
|
|
24
|
+
title?: string;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Pie chart
|
|
28
|
+
* @param props Props
|
|
29
|
+
* @returns Component
|
|
30
|
+
*/
|
|
31
|
+
export declare function PieChart(props: PieChartProps): React.JSX.Element;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.PieChart = PieChart;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const react_1 = __importDefault(require("react"));
|
|
9
|
+
const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
|
|
10
|
+
/**
|
|
11
|
+
* Pie chart
|
|
12
|
+
* @param props Props
|
|
13
|
+
* @returns Component
|
|
14
|
+
*/
|
|
15
|
+
function PieChart(props) {
|
|
16
|
+
// Destruct
|
|
17
|
+
const { data, options, subtitle, title } = props;
|
|
18
|
+
// State
|
|
19
|
+
const [PieType, setPieType] = react_1.default.useState();
|
|
20
|
+
react_1.default.useEffect(() => {
|
|
21
|
+
Promise.all([
|
|
22
|
+
import("react-chartjs-2"),
|
|
23
|
+
import("chart.js"),
|
|
24
|
+
import("chartjs-plugin-datalabels")
|
|
25
|
+
]).then(([{ Pie }, { Chart: ChartJS, CategoryScale, LinearScale, ArcElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
|
|
26
|
+
// https://www.chartjs.org/docs/latest/getting-started/
|
|
27
|
+
ChartJS.register(CategoryScale, LinearScale, ArcElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
|
|
28
|
+
);
|
|
29
|
+
setPieType(Pie);
|
|
30
|
+
});
|
|
31
|
+
}, []);
|
|
32
|
+
return PieType == null ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : ((0, jsx_runtime_1.jsx)(PieType, { options: {
|
|
33
|
+
scales: {
|
|
34
|
+
x: {
|
|
35
|
+
ticks: {
|
|
36
|
+
display: true // When false, this will remove x labels
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
responsive: true,
|
|
41
|
+
plugins: {
|
|
42
|
+
datalabels: {
|
|
43
|
+
display: (context) => context.dataset.data.length <= 31,
|
|
44
|
+
align: "end"
|
|
45
|
+
},
|
|
46
|
+
legend: {
|
|
47
|
+
position: "top"
|
|
48
|
+
},
|
|
49
|
+
subtitle: subtitle ? { text: subtitle, display: true } : undefined,
|
|
50
|
+
title: title
|
|
51
|
+
? {
|
|
52
|
+
text: title,
|
|
53
|
+
display: true
|
|
54
|
+
}
|
|
55
|
+
: undefined
|
|
56
|
+
},
|
|
57
|
+
...options
|
|
58
|
+
}, data: data }));
|
|
59
|
+
}
|
package/lib/cjs/index.d.ts
CHANGED
|
@@ -39,6 +39,7 @@ export * from "./AddresSelector";
|
|
|
39
39
|
export * from "./AuditDisplay";
|
|
40
40
|
export * from "./AutocompleteExtendedProps";
|
|
41
41
|
export * from "./BackButton";
|
|
42
|
+
export * from "./BarChart";
|
|
42
43
|
export * from "./BridgeCloseButton";
|
|
43
44
|
export * from "./ButtonLink";
|
|
44
45
|
export * from "./ButtonList";
|
|
@@ -104,6 +105,7 @@ export * from "./OptionGroupFlag";
|
|
|
104
105
|
export * from "./PercentCircularProgress";
|
|
105
106
|
export * from "./PercentLinearProgress";
|
|
106
107
|
export * from "./PhoneInput";
|
|
108
|
+
export * from "./PieChart";
|
|
107
109
|
export * from "./PList";
|
|
108
110
|
export * from "./ProgressCount";
|
|
109
111
|
export * from "./PullToRefreshUI";
|
package/lib/cjs/index.js
CHANGED
|
@@ -59,6 +59,7 @@ __exportStar(require("./AddresSelector"), exports);
|
|
|
59
59
|
__exportStar(require("./AuditDisplay"), exports);
|
|
60
60
|
__exportStar(require("./AutocompleteExtendedProps"), exports);
|
|
61
61
|
__exportStar(require("./BackButton"), exports);
|
|
62
|
+
__exportStar(require("./BarChart"), exports);
|
|
62
63
|
__exportStar(require("./BridgeCloseButton"), exports);
|
|
63
64
|
__exportStar(require("./ButtonLink"), exports);
|
|
64
65
|
__exportStar(require("./ButtonList"), exports);
|
|
@@ -124,6 +125,7 @@ __exportStar(require("./OptionGroupFlag"), exports);
|
|
|
124
125
|
__exportStar(require("./PercentCircularProgress"), exports);
|
|
125
126
|
__exportStar(require("./PercentLinearProgress"), exports);
|
|
126
127
|
__exportStar(require("./PhoneInput"), exports);
|
|
128
|
+
__exportStar(require("./PieChart"), exports);
|
|
127
129
|
__exportStar(require("./PList"), exports);
|
|
128
130
|
__exportStar(require("./ProgressCount"), exports);
|
|
129
131
|
__exportStar(require("./PullToRefreshUI"), exports);
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ChartData, ChartOptions } from "chart.js" with {
|
|
3
|
+
"resolution-mode": "import"
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Bar chart
|
|
7
|
+
*/
|
|
8
|
+
export type BarChartProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Chart data
|
|
11
|
+
*/
|
|
12
|
+
data: ChartData<"bar">;
|
|
13
|
+
/**
|
|
14
|
+
* Options
|
|
15
|
+
*/
|
|
16
|
+
options?: ChartOptions<"bar">;
|
|
17
|
+
/**
|
|
18
|
+
* Subtitle
|
|
19
|
+
*/
|
|
20
|
+
subtitle?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Title
|
|
23
|
+
*/
|
|
24
|
+
title?: string;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Bar chart
|
|
28
|
+
* @param props Props
|
|
29
|
+
* @returns Component
|
|
30
|
+
*/
|
|
31
|
+
export declare function BarChart(props: BarChartProps): React.JSX.Element;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import LinearProgress from "@mui/material/LinearProgress";
|
|
4
|
+
/**
|
|
5
|
+
* Bar chart
|
|
6
|
+
* @param props Props
|
|
7
|
+
* @returns Component
|
|
8
|
+
*/
|
|
9
|
+
export function BarChart(props) {
|
|
10
|
+
// Destruct
|
|
11
|
+
const { data, options, subtitle, title } = props;
|
|
12
|
+
// State
|
|
13
|
+
const [BarType, setBarType] = React.useState();
|
|
14
|
+
React.useEffect(() => {
|
|
15
|
+
Promise.all([
|
|
16
|
+
import("react-chartjs-2"),
|
|
17
|
+
import("chart.js"),
|
|
18
|
+
import("chartjs-plugin-datalabels")
|
|
19
|
+
]).then(([{ Bar }, { Chart: ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
|
|
20
|
+
// https://www.chartjs.org/docs/latest/getting-started/
|
|
21
|
+
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
|
|
22
|
+
);
|
|
23
|
+
setBarType(Bar);
|
|
24
|
+
});
|
|
25
|
+
}, []);
|
|
26
|
+
return BarType == null ? (_jsx(LinearProgress, {})) : (_jsx(BarType, { options: {
|
|
27
|
+
scales: {
|
|
28
|
+
x: {
|
|
29
|
+
ticks: {
|
|
30
|
+
display: true // When false, this will remove x labels
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
responsive: true,
|
|
35
|
+
plugins: {
|
|
36
|
+
datalabels: {
|
|
37
|
+
display: (context) => context.dataset.data.length <= 31,
|
|
38
|
+
align: "end"
|
|
39
|
+
},
|
|
40
|
+
legend: {
|
|
41
|
+
position: "top"
|
|
42
|
+
},
|
|
43
|
+
subtitle: subtitle ? { text: subtitle, display: true } : undefined,
|
|
44
|
+
title: title
|
|
45
|
+
? {
|
|
46
|
+
text: title,
|
|
47
|
+
display: true
|
|
48
|
+
}
|
|
49
|
+
: undefined
|
|
50
|
+
},
|
|
51
|
+
...options
|
|
52
|
+
}, data: data }));
|
|
53
|
+
}
|
package/lib/mjs/LineChart.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { ChartData,
|
|
2
|
+
import type { ChartData, ChartOptions } from "chart.js" with {
|
|
3
|
+
"resolution-mode": "import"
|
|
4
|
+
};
|
|
3
5
|
/**
|
|
4
6
|
* Line chart
|
|
5
7
|
*/
|
|
@@ -11,7 +13,7 @@ export type LineChartProps = {
|
|
|
11
13
|
/**
|
|
12
14
|
* Options
|
|
13
15
|
*/
|
|
14
|
-
options?:
|
|
16
|
+
options?: ChartOptions<"line">;
|
|
15
17
|
/**
|
|
16
18
|
* Subtitle
|
|
17
19
|
*/
|
package/lib/mjs/LineChart.js
CHANGED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ChartData, ChartOptions } from "chart.js" with {
|
|
3
|
+
"resolution-mode": "import"
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Pie chart
|
|
7
|
+
*/
|
|
8
|
+
export type PieChartProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Chart data
|
|
11
|
+
*/
|
|
12
|
+
data: ChartData<"pie">;
|
|
13
|
+
/**
|
|
14
|
+
* Options
|
|
15
|
+
*/
|
|
16
|
+
options?: ChartOptions<"pie">;
|
|
17
|
+
/**
|
|
18
|
+
* Subtitle
|
|
19
|
+
*/
|
|
20
|
+
subtitle?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Title
|
|
23
|
+
*/
|
|
24
|
+
title?: string;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Pie chart
|
|
28
|
+
* @param props Props
|
|
29
|
+
* @returns Component
|
|
30
|
+
*/
|
|
31
|
+
export declare function PieChart(props: PieChartProps): React.JSX.Element;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import LinearProgress from "@mui/material/LinearProgress";
|
|
4
|
+
/**
|
|
5
|
+
* Pie chart
|
|
6
|
+
* @param props Props
|
|
7
|
+
* @returns Component
|
|
8
|
+
*/
|
|
9
|
+
export function PieChart(props) {
|
|
10
|
+
// Destruct
|
|
11
|
+
const { data, options, subtitle, title } = props;
|
|
12
|
+
// State
|
|
13
|
+
const [PieType, setPieType] = React.useState();
|
|
14
|
+
React.useEffect(() => {
|
|
15
|
+
Promise.all([
|
|
16
|
+
import("react-chartjs-2"),
|
|
17
|
+
import("chart.js"),
|
|
18
|
+
import("chartjs-plugin-datalabels")
|
|
19
|
+
]).then(([{ Pie }, { Chart: ChartJS, CategoryScale, LinearScale, ArcElement, Title, Tooltip, Legend }, ChartDataLabels]) => {
|
|
20
|
+
// https://www.chartjs.org/docs/latest/getting-started/
|
|
21
|
+
ChartJS.register(CategoryScale, LinearScale, ArcElement, Title, Tooltip, Legend, ChartDataLabels // CommonJS says 'id' is missing
|
|
22
|
+
);
|
|
23
|
+
setPieType(Pie);
|
|
24
|
+
});
|
|
25
|
+
}, []);
|
|
26
|
+
return PieType == null ? (_jsx(LinearProgress, {})) : (_jsx(PieType, { options: {
|
|
27
|
+
scales: {
|
|
28
|
+
x: {
|
|
29
|
+
ticks: {
|
|
30
|
+
display: true // When false, this will remove x labels
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
responsive: true,
|
|
35
|
+
plugins: {
|
|
36
|
+
datalabels: {
|
|
37
|
+
display: (context) => context.dataset.data.length <= 31,
|
|
38
|
+
align: "end"
|
|
39
|
+
},
|
|
40
|
+
legend: {
|
|
41
|
+
position: "top"
|
|
42
|
+
},
|
|
43
|
+
subtitle: subtitle ? { text: subtitle, display: true } : undefined,
|
|
44
|
+
title: title
|
|
45
|
+
? {
|
|
46
|
+
text: title,
|
|
47
|
+
display: true
|
|
48
|
+
}
|
|
49
|
+
: undefined
|
|
50
|
+
},
|
|
51
|
+
...options
|
|
52
|
+
}, data: data }));
|
|
53
|
+
}
|
package/lib/mjs/index.d.ts
CHANGED
|
@@ -39,6 +39,7 @@ export * from "./AddresSelector";
|
|
|
39
39
|
export * from "./AuditDisplay";
|
|
40
40
|
export * from "./AutocompleteExtendedProps";
|
|
41
41
|
export * from "./BackButton";
|
|
42
|
+
export * from "./BarChart";
|
|
42
43
|
export * from "./BridgeCloseButton";
|
|
43
44
|
export * from "./ButtonLink";
|
|
44
45
|
export * from "./ButtonList";
|
|
@@ -104,6 +105,7 @@ export * from "./OptionGroupFlag";
|
|
|
104
105
|
export * from "./PercentCircularProgress";
|
|
105
106
|
export * from "./PercentLinearProgress";
|
|
106
107
|
export * from "./PhoneInput";
|
|
108
|
+
export * from "./PieChart";
|
|
107
109
|
export * from "./PList";
|
|
108
110
|
export * from "./ProgressCount";
|
|
109
111
|
export * from "./PullToRefreshUI";
|
package/lib/mjs/index.js
CHANGED
|
@@ -39,6 +39,7 @@ export * from "./AddresSelector";
|
|
|
39
39
|
export * from "./AuditDisplay";
|
|
40
40
|
export * from "./AutocompleteExtendedProps";
|
|
41
41
|
export * from "./BackButton";
|
|
42
|
+
export * from "./BarChart";
|
|
42
43
|
export * from "./BridgeCloseButton";
|
|
43
44
|
export * from "./ButtonLink";
|
|
44
45
|
export * from "./ButtonList";
|
|
@@ -104,6 +105,7 @@ export * from "./OptionGroupFlag";
|
|
|
104
105
|
export * from "./PercentCircularProgress";
|
|
105
106
|
export * from "./PercentLinearProgress";
|
|
106
107
|
export * from "./PhoneInput";
|
|
108
|
+
export * from "./PieChart";
|
|
107
109
|
export * from "./PList";
|
|
108
110
|
export * from "./ProgressCount";
|
|
109
111
|
export * from "./PullToRefreshUI";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/materialui",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.72",
|
|
4
4
|
"description": "TypeScript Material-UI Implementation",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/mjs/index.js",
|
|
@@ -36,20 +36,20 @@
|
|
|
36
36
|
},
|
|
37
37
|
"homepage": "https://github.com/ETSOO/ReactMU#readme",
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@base-ui/react": "^1.
|
|
39
|
+
"@base-ui/react": "^1.6.0",
|
|
40
40
|
"@dnd-kit/react": "^0.5.0",
|
|
41
41
|
"@emotion/react": "^11.14.0",
|
|
42
42
|
"@emotion/styled": "^11.14.1",
|
|
43
|
-
"@etsoo/appscript": "^1.6.
|
|
43
|
+
"@etsoo/appscript": "^1.6.67",
|
|
44
44
|
"@etsoo/notificationbase": "^1.1.71",
|
|
45
|
-
"@etsoo/react": "^1.8.
|
|
46
|
-
"@etsoo/shared": "^1.2.
|
|
45
|
+
"@etsoo/react": "^1.8.92",
|
|
46
|
+
"@etsoo/shared": "^1.2.86",
|
|
47
47
|
"@mui/icons-material": "^9.1.1",
|
|
48
|
-
"@mui/material": "^9.1.
|
|
49
|
-
"@mui/x-data-grid": "^9.
|
|
48
|
+
"@mui/material": "^9.1.2",
|
|
49
|
+
"@mui/x-data-grid": "^9.6.0",
|
|
50
50
|
"chart.js": "^4.5.1",
|
|
51
51
|
"chartjs-plugin-datalabels": "^2.2.0",
|
|
52
|
-
"dompurify": "^3.4.
|
|
52
|
+
"dompurify": "^3.4.11",
|
|
53
53
|
"eventemitter3": "^5.0.4",
|
|
54
54
|
"pica": "^10.0.1",
|
|
55
55
|
"pulltorefreshjs": "^0.1.22",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"react-avatar-editor": "^15.1.0",
|
|
58
58
|
"react-chartjs-2": "^5.3.1",
|
|
59
59
|
"react-dom": "^19.2.7",
|
|
60
|
-
"react-draggable": "^4.
|
|
60
|
+
"react-draggable": "^4.7.0",
|
|
61
61
|
"react-imask": "7.6.1"
|
|
62
62
|
},
|
|
63
63
|
"overrides": {
|
|
@@ -65,12 +65,12 @@
|
|
|
65
65
|
"react-dom": "$react-dom"
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
|
-
"@babel/core": "^
|
|
69
|
-
"@babel/plugin-transform-runtime": "^
|
|
70
|
-
"@babel/preset-env": "^
|
|
71
|
-
"@babel/preset-react": "^
|
|
72
|
-
"@babel/preset-typescript": "^
|
|
73
|
-
"@babel/runtime-corejs3": "^
|
|
68
|
+
"@babel/core": "^8.0.1",
|
|
69
|
+
"@babel/plugin-transform-runtime": "^8.0.1",
|
|
70
|
+
"@babel/preset-env": "^8.0.2",
|
|
71
|
+
"@babel/preset-react": "^8.0.1",
|
|
72
|
+
"@babel/preset-typescript": "^8.0.1",
|
|
73
|
+
"@babel/runtime-corejs3": "^8.0.0",
|
|
74
74
|
"@testing-library/jest-dom": "^6.9.1",
|
|
75
75
|
"@testing-library/react": "^16.3.2",
|
|
76
76
|
"@types/pica": "^9.0.5",
|
|
@@ -79,9 +79,9 @@
|
|
|
79
79
|
"@types/react-avatar-editor": "^13.0.4",
|
|
80
80
|
"@types/react-dom": "^19.2.3",
|
|
81
81
|
"@types/react-input-mask": "^3.0.6",
|
|
82
|
-
"@vitejs/plugin-react": "^6.0.
|
|
82
|
+
"@vitejs/plugin-react": "^6.0.3",
|
|
83
83
|
"jsdom": "^29.1.1",
|
|
84
84
|
"typescript": "^6.0.3",
|
|
85
|
-
"vitest": "^4.1.
|
|
85
|
+
"vitest": "^4.1.9"
|
|
86
86
|
}
|
|
87
87
|
}
|
package/src/BarChart.tsx
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ChartData, ChartOptions } from "chart.js" with {
|
|
3
|
+
"resolution-mode": "import"
|
|
4
|
+
};
|
|
5
|
+
import type { Bar } from "react-chartjs-2" with {
|
|
6
|
+
"resolution-mode": "import"
|
|
7
|
+
};
|
|
8
|
+
import LinearProgress from "@mui/material/LinearProgress";
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Bar chart
|
|
12
|
+
*/
|
|
13
|
+
export type BarChartProps = {
|
|
14
|
+
/**
|
|
15
|
+
* Chart data
|
|
16
|
+
*/
|
|
17
|
+
data: ChartData<"bar">;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Options
|
|
21
|
+
*/
|
|
22
|
+
options?: ChartOptions<"bar">;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Subtitle
|
|
26
|
+
*/
|
|
27
|
+
subtitle?: string;
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Title
|
|
31
|
+
*/
|
|
32
|
+
title?: string;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Bar chart
|
|
37
|
+
* @param props Props
|
|
38
|
+
* @returns Component
|
|
39
|
+
*/
|
|
40
|
+
export function BarChart(props: BarChartProps) {
|
|
41
|
+
// Destruct
|
|
42
|
+
const { data, options, subtitle, title } = props;
|
|
43
|
+
|
|
44
|
+
// State
|
|
45
|
+
const [BarType, setBarType] = React.useState<typeof Bar>();
|
|
46
|
+
|
|
47
|
+
React.useEffect(() => {
|
|
48
|
+
Promise.all([
|
|
49
|
+
import("react-chartjs-2"),
|
|
50
|
+
import("chart.js"),
|
|
51
|
+
import("chartjs-plugin-datalabels")
|
|
52
|
+
]).then(
|
|
53
|
+
([
|
|
54
|
+
{ Bar },
|
|
55
|
+
{
|
|
56
|
+
Chart: ChartJS,
|
|
57
|
+
CategoryScale,
|
|
58
|
+
LinearScale,
|
|
59
|
+
BarElement,
|
|
60
|
+
Title,
|
|
61
|
+
Tooltip,
|
|
62
|
+
Legend
|
|
63
|
+
},
|
|
64
|
+
ChartDataLabels
|
|
65
|
+
]) => {
|
|
66
|
+
// https://www.chartjs.org/docs/latest/getting-started/
|
|
67
|
+
ChartJS.register(
|
|
68
|
+
CategoryScale,
|
|
69
|
+
LinearScale,
|
|
70
|
+
BarElement,
|
|
71
|
+
Title,
|
|
72
|
+
Tooltip,
|
|
73
|
+
Legend,
|
|
74
|
+
|
|
75
|
+
ChartDataLabels as any // CommonJS says 'id' is missing
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
setBarType(Bar);
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
}, []);
|
|
82
|
+
|
|
83
|
+
return BarType == null ? (
|
|
84
|
+
<LinearProgress />
|
|
85
|
+
) : (
|
|
86
|
+
<BarType
|
|
87
|
+
options={{
|
|
88
|
+
scales: {
|
|
89
|
+
x: {
|
|
90
|
+
ticks: {
|
|
91
|
+
display: true // When false, this will remove x labels
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
responsive: true,
|
|
96
|
+
plugins: {
|
|
97
|
+
datalabels: {
|
|
98
|
+
display: (context) => context.dataset.data.length <= 31,
|
|
99
|
+
align: "end"
|
|
100
|
+
},
|
|
101
|
+
legend: {
|
|
102
|
+
position: "top" as const
|
|
103
|
+
},
|
|
104
|
+
subtitle: subtitle ? { text: subtitle, display: true } : undefined,
|
|
105
|
+
title: title
|
|
106
|
+
? {
|
|
107
|
+
text: title,
|
|
108
|
+
display: true
|
|
109
|
+
}
|
|
110
|
+
: undefined
|
|
111
|
+
},
|
|
112
|
+
...options
|
|
113
|
+
}}
|
|
114
|
+
data={data}
|
|
115
|
+
/>
|
|
116
|
+
);
|
|
117
|
+
}
|
package/src/LineChart.tsx
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { ChartData,
|
|
3
|
-
|
|
2
|
+
import type { ChartData, ChartOptions } from "chart.js" with {
|
|
3
|
+
"resolution-mode": "import"
|
|
4
|
+
};
|
|
5
|
+
import type { Line } from "react-chartjs-2" with {
|
|
6
|
+
"resolution-mode": "import"
|
|
7
|
+
};
|
|
4
8
|
import LinearProgress from "@mui/material/LinearProgress";
|
|
5
9
|
|
|
6
10
|
/**
|
|
@@ -15,7 +19,7 @@ export type LineChartProps = {
|
|
|
15
19
|
/**
|
|
16
20
|
* Options
|
|
17
21
|
*/
|
|
18
|
-
options?:
|
|
22
|
+
options?: ChartOptions<"line">;
|
|
19
23
|
|
|
20
24
|
/**
|
|
21
25
|
* Subtitle
|
|
@@ -86,7 +90,7 @@ export function LineChart(props: LineChartProps) {
|
|
|
86
90
|
scales: {
|
|
87
91
|
x: {
|
|
88
92
|
ticks: {
|
|
89
|
-
display: false
|
|
93
|
+
display: true // When false, this will remove x labels
|
|
90
94
|
}
|
|
91
95
|
}
|
|
92
96
|
},
|
package/src/PieChart.tsx
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ChartData, ChartOptions } from "chart.js" with {
|
|
3
|
+
"resolution-mode": "import"
|
|
4
|
+
};
|
|
5
|
+
import type { Pie } from "react-chartjs-2" with {
|
|
6
|
+
"resolution-mode": "import"
|
|
7
|
+
};
|
|
8
|
+
import LinearProgress from "@mui/material/LinearProgress";
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Pie chart
|
|
12
|
+
*/
|
|
13
|
+
export type PieChartProps = {
|
|
14
|
+
/**
|
|
15
|
+
* Chart data
|
|
16
|
+
*/
|
|
17
|
+
data: ChartData<"pie">;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Options
|
|
21
|
+
*/
|
|
22
|
+
options?: ChartOptions<"pie">;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Subtitle
|
|
26
|
+
*/
|
|
27
|
+
subtitle?: string;
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Title
|
|
31
|
+
*/
|
|
32
|
+
title?: string;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Pie chart
|
|
37
|
+
* @param props Props
|
|
38
|
+
* @returns Component
|
|
39
|
+
*/
|
|
40
|
+
export function PieChart(props: PieChartProps) {
|
|
41
|
+
// Destruct
|
|
42
|
+
const { data, options, subtitle, title } = props;
|
|
43
|
+
|
|
44
|
+
// State
|
|
45
|
+
const [PieType, setPieType] = React.useState<typeof Pie>();
|
|
46
|
+
|
|
47
|
+
React.useEffect(() => {
|
|
48
|
+
Promise.all([
|
|
49
|
+
import("react-chartjs-2"),
|
|
50
|
+
import("chart.js"),
|
|
51
|
+
import("chartjs-plugin-datalabels")
|
|
52
|
+
]).then(
|
|
53
|
+
([
|
|
54
|
+
{ Pie },
|
|
55
|
+
{
|
|
56
|
+
Chart: ChartJS,
|
|
57
|
+
CategoryScale,
|
|
58
|
+
LinearScale,
|
|
59
|
+
ArcElement,
|
|
60
|
+
Title,
|
|
61
|
+
Tooltip,
|
|
62
|
+
Legend
|
|
63
|
+
},
|
|
64
|
+
ChartDataLabels
|
|
65
|
+
]) => {
|
|
66
|
+
// https://www.chartjs.org/docs/latest/getting-started/
|
|
67
|
+
ChartJS.register(
|
|
68
|
+
CategoryScale,
|
|
69
|
+
LinearScale,
|
|
70
|
+
ArcElement,
|
|
71
|
+
Title,
|
|
72
|
+
Tooltip,
|
|
73
|
+
Legend,
|
|
74
|
+
|
|
75
|
+
ChartDataLabels as any // CommonJS says 'id' is missing
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
setPieType(Pie);
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
}, []);
|
|
82
|
+
|
|
83
|
+
return PieType == null ? (
|
|
84
|
+
<LinearProgress />
|
|
85
|
+
) : (
|
|
86
|
+
<PieType
|
|
87
|
+
options={{
|
|
88
|
+
scales: {
|
|
89
|
+
x: {
|
|
90
|
+
ticks: {
|
|
91
|
+
display: true // When false, this will remove x labels
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
responsive: true,
|
|
96
|
+
plugins: {
|
|
97
|
+
datalabels: {
|
|
98
|
+
display: (context) => context.dataset.data.length <= 31,
|
|
99
|
+
align: "end"
|
|
100
|
+
},
|
|
101
|
+
legend: {
|
|
102
|
+
position: "top" as const
|
|
103
|
+
},
|
|
104
|
+
subtitle: subtitle ? { text: subtitle, display: true } : undefined,
|
|
105
|
+
title: title
|
|
106
|
+
? {
|
|
107
|
+
text: title,
|
|
108
|
+
display: true
|
|
109
|
+
}
|
|
110
|
+
: undefined
|
|
111
|
+
},
|
|
112
|
+
...options
|
|
113
|
+
}}
|
|
114
|
+
data={data}
|
|
115
|
+
/>
|
|
116
|
+
);
|
|
117
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -45,6 +45,7 @@ export * from "./AddresSelector";
|
|
|
45
45
|
export * from "./AuditDisplay";
|
|
46
46
|
export * from "./AutocompleteExtendedProps";
|
|
47
47
|
export * from "./BackButton";
|
|
48
|
+
export * from "./BarChart";
|
|
48
49
|
export * from "./BridgeCloseButton";
|
|
49
50
|
export * from "./ButtonLink";
|
|
50
51
|
export * from "./ButtonList";
|
|
@@ -110,6 +111,7 @@ export * from "./OptionGroupFlag";
|
|
|
110
111
|
export * from "./PercentCircularProgress";
|
|
111
112
|
export * from "./PercentLinearProgress";
|
|
112
113
|
export * from "./PhoneInput";
|
|
114
|
+
export * from "./PieChart";
|
|
113
115
|
export * from "./PList";
|
|
114
116
|
export * from "./ProgressCount";
|
|
115
117
|
export * from "./PullToRefreshUI";
|