@campxdev/react-blueprint 1.0.4 → 1.0.5
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/package.json +5 -2
- package/public/index.html +3 -4
- package/src/components/Assets/Icons/IconComponents/CompletedStateIcon.tsx +35 -0
- package/src/components/Assets/Icons/IconComponents/SaveIcon.tsx +42 -0
- package/src/components/Assets/Icons/IconComponents/ShareIcon.tsx +61 -0
- package/src/components/Assets/Icons/Icons.tsx +6 -0
- package/src/components/Charts/BarChart/BarChart.tsx +160 -0
- package/src/components/Charts/LineChart/LineChart.tsx +119 -0
- package/src/components/Charts/PieChart/PieChart.tsx +95 -0
- package/src/components/Charts/TreeMap/TreeMap.tsx +151 -0
- package/src/components/Charts/types/types.ts +43 -0
- package/src/components/DataDisplay/Accordion/Accordion.tsx +55 -0
- package/src/components/DataDisplay/Accordion/utils/StandardImageList.tsx +70 -0
- package/src/components/DataDisplay/export.ts +4 -1
- package/src/components/Input/export.ts +1 -0
- package/src/components/Layout/TabsLayout/Tabs.tsx +67 -0
- package/src/components/Layout/TabsLayout/TabsLayout.tsx +56 -0
- package/src/components/Layout/exports.ts +4 -0
- package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx +40 -0
- package/src/components/Navigation/Sidebar/styles.tsx +1 -1
- package/src/components/Navigation/Stepper/Stepper.tsx +59 -0
- package/src/components/Navigation/Stepper/StepperComponents.tsx +72 -0
- package/src/components/Navigation/exports.ts +4 -0
- package/src/components/export.ts +1 -1
- package/src/stories/Charts/BarChart.stories.tsx +142 -0
- package/src/stories/Charts/LineChart.stories.tsx +112 -0
- package/src/stories/Charts/PieChart.stories.tsx +137 -0
- package/src/stories/Charts/Treemap.stories.tsx +224 -0
- package/src/stories/DataDisplay/Accordion.stories.tsx +62 -0
- package/src/stories/Layout/TabsLayout.stories.tsx +53 -0
- package/src/stories/Navigation/Breadcrumbs.stories.tsx +34 -0
- package/src/stories/Navigation/Stepper.stories.tsx +51 -0
- package/src/themes/commonTheme.ts +47 -1
- package/types/theme.d.ts +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@campxdev/react-blueprint",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"main": "./export.ts",
|
|
5
5
|
"private": false,
|
|
6
6
|
"dependencies": {
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"@types/react-router-dom": "^5.3.3",
|
|
23
23
|
"axios": "^1.7.2",
|
|
24
24
|
"framer-motion": "^11.2.9",
|
|
25
|
+
"global": "^4.4.0",
|
|
25
26
|
"js-cookie": "^3.0.5",
|
|
26
27
|
"lodash": "^4.17.21",
|
|
27
28
|
"pullstate": "^1.24.0",
|
|
@@ -31,9 +32,11 @@
|
|
|
31
32
|
"react-joyride": "^2.8.2",
|
|
32
33
|
"react-router-dom": "^6.24.0",
|
|
33
34
|
"react-scripts": "^5.0.1",
|
|
35
|
+
"recharts": "^2.12.7",
|
|
34
36
|
"storybook-dark-mode": "^4.0.1",
|
|
35
37
|
"typescript": "^5.5.2",
|
|
36
|
-
"web-vitals": "^2.1.0"
|
|
38
|
+
"web-vitals": "^2.1.0",
|
|
39
|
+
"yalc": "^1.0.0-pre.53"
|
|
37
40
|
},
|
|
38
41
|
"scripts": {
|
|
39
42
|
"start": "react-scripts start",
|
package/public/index.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
work correctly both with client-side routing and a non-root public URL.
|
|
25
25
|
Learn how to configure a non-root public URL by running `npm run build`.
|
|
26
26
|
-->
|
|
27
|
-
<script type="text/javascript" src="https://campx.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/278rlr/b/9/c95134bc67d3a521bb3f4331beb9b804/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-GB&collectorId=5fea0763"></script>
|
|
27
|
+
<!-- <script type="text/javascript" src="https://campx.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/278rlr/b/9/c95134bc67d3a521bb3f4331beb9b804/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-GB&collectorId=5fea0763"></script>
|
|
28
28
|
|
|
29
29
|
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
|
|
30
30
|
"triggerFunction": function(showCollectorDialog) {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
e.preventDefault();
|
|
34
34
|
showCollectorDialog();
|
|
35
35
|
});
|
|
36
|
-
}};</script>
|
|
36
|
+
}};</script> -->
|
|
37
37
|
|
|
38
38
|
<title>React Blueprint | Building Blocks</title>
|
|
39
39
|
</head>
|
|
@@ -50,6 +50,5 @@
|
|
|
50
50
|
To begin the development, run `npm start` or `yarn start`.
|
|
51
51
|
To create a production bundle, use `npm run build` or `yarn build`.
|
|
52
52
|
-->
|
|
53
|
-
|
|
54
53
|
</body>
|
|
55
54
|
</html>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export const CompletedStateIcon = () => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
width="24"
|
|
5
|
+
height="24"
|
|
6
|
+
viewBox="0 0 24 24"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
|
|
12
|
+
fill="url(#paint0_linear_1129_5750)"
|
|
13
|
+
/>
|
|
14
|
+
<path
|
|
15
|
+
d="M10.4057 15.249C10.2792 15.2491 10.154 15.2242 10.0372 15.1758C9.92038 15.1274 9.8143 15.0563 9.72503 14.9668L7.66775 12.9095C7.56158 12.8031 7.50195 12.659 7.50195 12.5087C7.50195 12.3584 7.56158 12.2143 7.66775 12.1079C7.77411 12.0017 7.91826 11.9421 8.06855 11.9421C8.21883 11.9421 8.36298 12.0017 8.46935 12.1079L10.4057 14.0442L15.5282 8.92165C15.6346 8.81548 15.7787 8.75586 15.929 8.75586C16.0793 8.75586 16.2235 8.81548 16.3298 8.92165C16.436 9.02802 16.4956 9.17216 16.4956 9.32245C16.4956 9.47273 16.436 9.61688 16.3298 9.72325L11.0863 14.9668C10.997 15.0563 10.8909 15.1274 10.7741 15.1758C10.6573 15.2242 10.5321 15.2491 10.4057 15.249Z"
|
|
16
|
+
fill="white"
|
|
17
|
+
stroke="white"
|
|
18
|
+
stroke-width="0.5"
|
|
19
|
+
/>
|
|
20
|
+
<defs>
|
|
21
|
+
<linearGradient
|
|
22
|
+
id="paint0_linear_1129_5750"
|
|
23
|
+
x1="4.32"
|
|
24
|
+
y1="3.36"
|
|
25
|
+
x2="19.2"
|
|
26
|
+
y2="21.12"
|
|
27
|
+
gradientUnits="userSpaceOnUse"
|
|
28
|
+
>
|
|
29
|
+
<stop stop-color="#323167" />
|
|
30
|
+
<stop offset="1" stop-color="#656599" />
|
|
31
|
+
</linearGradient>
|
|
32
|
+
</defs>
|
|
33
|
+
</svg>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { useTheme } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
export const SaveIcon = ({size = 16}) => {
|
|
4
|
+
const theme = useTheme();
|
|
5
|
+
const color = theme.palette.text.primary;
|
|
6
|
+
return(
|
|
7
|
+
<svg
|
|
8
|
+
width={size}
|
|
9
|
+
height={size}
|
|
10
|
+
viewBox="0 0 20 21"
|
|
11
|
+
fill="none"
|
|
12
|
+
style={{
|
|
13
|
+
stroke: color,
|
|
14
|
+
}}
|
|
15
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
16
|
+
>
|
|
17
|
+
<g clip-path="url(#clip0_538_3422)">
|
|
18
|
+
<path
|
|
19
|
+
d="M4.10828 19.2083C3.76966 19.2116 3.43618 19.1254 3.14162 18.9583C2.80532 18.7323 2.53488 18.4212 2.35777 18.0567C2.18066 17.6923 2.10321 17.2874 2.13328 16.8833V5.13332C2.13505 4.11499 2.54036 3.13887 3.26043 2.4188C3.9805 1.69873 4.95662 1.29342 5.97495 1.29166L14.0166 1.29166C15.0349 1.29342 16.0111 1.69873 16.7311 2.4188C17.4512 3.13887 17.8565 4.11499 17.8583 5.13332V16.875C17.8884 17.2791 17.8109 17.6839 17.6338 18.0484C17.4567 18.4129 17.1862 18.7239 16.8499 18.95C16.4881 19.1337 16.0842 19.2188 15.679 19.1969C15.2738 19.1749 14.8815 19.0467 14.5416 18.825L10.4749 16.5667C10.3238 16.5007 10.1607 16.4667 9.99578 16.4667C9.83088 16.4667 9.66776 16.5007 9.51661 16.5667L5.44995 18.825C5.0424 19.0643 4.58075 19.1962 4.10828 19.2083ZM5.98328 2.54166C5.29661 2.54385 4.63868 2.81761 4.15313 3.30317C3.66757 3.78872 3.39381 4.44665 3.39162 5.13332V16.875C3.36688 17.0612 3.38984 17.2506 3.45835 17.4256C3.52685 17.6005 3.63866 17.7551 3.78328 17.875C3.95876 17.9424 4.14832 17.9647 4.33465 17.94C4.52098 17.9152 4.69814 17.8442 4.84995 17.7333L8.91662 15.475C9.25285 15.3064 9.6238 15.2186 9.99995 15.2186C10.3761 15.2186 10.747 15.3064 11.0833 15.475L15.1499 17.7333C15.3008 17.8461 15.4781 17.9183 15.6648 17.9431C15.8516 17.9679 16.0415 17.9445 16.2166 17.875C16.3598 17.7539 16.4706 17.5991 16.5389 17.4245C16.6073 17.25 16.6312 17.0611 16.6083 16.875V5.13332C16.6061 4.44665 16.3323 3.78872 15.8468 3.30317C15.3612 2.81761 14.7033 2.54385 14.0166 2.54166H5.98328Z"
|
|
20
|
+
fill="white"
|
|
21
|
+
fill-opacity="0.5"
|
|
22
|
+
/>
|
|
23
|
+
<path
|
|
24
|
+
d="M4.10926 19.3083L4.11085 19.3083C4.59984 19.2958 5.07765 19.1593 5.49955 18.9118C5.4999 18.9116 5.50024 18.9114 5.50059 18.9112L9.56089 16.6565C9.69822 16.5972 9.8462 16.5667 9.99578 16.5667C10.1454 16.5667 10.2934 16.5972 10.4307 16.6565L14.49 18.9107C14.8439 19.1408 15.2521 19.2739 15.6736 19.2967C16.0964 19.3196 16.5177 19.2308 16.8952 19.0392L16.8956 19.0398L16.9057 19.033C17.2567 18.7971 17.5389 18.4724 17.7237 18.0921C17.908 17.7129 17.9889 17.2918 17.9583 16.8713V5.13332L17.9583 5.13315C17.9565 4.08836 17.5406 3.08687 16.8018 2.34809C16.0631 1.60931 15.0616 1.19347 14.0168 1.19166H14.0166L5.97495 1.19166L5.97478 1.19166C4.92998 1.19347 3.9285 1.60931 3.18972 2.34809C2.45094 3.08687 2.03509 4.08836 2.03328 5.13315V5.13332V16.8796C2.00265 17.3001 2.08355 17.7212 2.26783 18.1004C2.45265 18.4808 2.73488 18.8054 3.08583 19.0413L3.08567 19.0416L3.09229 19.0453C3.40218 19.2211 3.75301 19.3118 4.10926 19.3083ZM3.49075 16.8882L3.49162 16.8883V16.875V5.1335C3.49377 4.47328 3.75699 3.84072 4.22384 3.37388C4.69068 2.90703 5.32324 2.64381 5.98346 2.64166H14.0164C14.6767 2.64381 15.3092 2.90703 15.7761 3.37388C16.2429 3.84069 16.5061 4.47319 16.5083 5.13335C16.5083 5.13345 16.5083 5.13355 16.5083 5.13364L16.5083 16.875H16.5075L16.509 16.8872C16.5299 17.0568 16.5082 17.2289 16.4458 17.3881C16.3855 17.5421 16.289 17.6793 16.1645 17.788C16.0095 17.8465 15.8424 17.8658 15.678 17.844C15.5082 17.8214 15.347 17.7558 15.2098 17.6532L15.2104 17.6525L15.1985 17.6459L11.1318 15.3876L11.1319 15.3875L11.1281 15.3856C10.778 15.21 10.3917 15.1186 9.99995 15.1186C9.60824 15.1186 9.22194 15.21 8.87179 15.3856L8.87175 15.3855L8.86807 15.3876L4.8014 17.6459L4.80103 17.6452L4.79098 17.6526C4.65267 17.7536 4.49125 17.8183 4.32149 17.8408C4.15716 17.8626 3.99006 17.8443 3.83453 17.7874C3.70903 17.6799 3.61179 17.5431 3.55146 17.3891C3.48913 17.2299 3.46824 17.0576 3.49075 16.8882Z"
|
|
25
|
+
stroke="white"
|
|
26
|
+
stroke-opacity="0.5"
|
|
27
|
+
stroke-width="0.2"
|
|
28
|
+
/>
|
|
29
|
+
</g>
|
|
30
|
+
<defs>
|
|
31
|
+
<clipPath id="clip0_538_3422">
|
|
32
|
+
<rect
|
|
33
|
+
width="20"
|
|
34
|
+
height="20"
|
|
35
|
+
fill="white"
|
|
36
|
+
transform="translate(0 0.25)"
|
|
37
|
+
/>
|
|
38
|
+
</clipPath>
|
|
39
|
+
</defs>
|
|
40
|
+
</svg>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { useTheme } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
export const ShareIcon = ({ size = 16 }) => {
|
|
4
|
+
const theme = useTheme();
|
|
5
|
+
const color = theme.palette.text.primary;
|
|
6
|
+
return (
|
|
7
|
+
<svg
|
|
8
|
+
width={size}
|
|
9
|
+
height={size}
|
|
10
|
+
viewBox="0 0 24 25"
|
|
11
|
+
fill="none"
|
|
12
|
+
style={{
|
|
13
|
+
stroke: color,
|
|
14
|
+
}}
|
|
15
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
16
|
+
>
|
|
17
|
+
<g clip-path="url(#clip0_538_8774)">
|
|
18
|
+
<path
|
|
19
|
+
d="M20.36 12.98C20.181 12.9795 20.0084 12.9129 19.8756 12.7929C19.7427 12.6729 19.6588 12.5081 19.64 12.33C19.5219 11.2439 19.1714 10.1959 18.6123 9.25725C18.0533 8.31859 17.2988 7.51123 16.4 6.89001C16.2422 6.77995 16.1346 6.61171 16.1009 6.42229C16.0671 6.23288 16.11 6.03782 16.22 5.88001C16.3301 5.72221 16.4983 5.61459 16.6878 5.58084C16.8772 5.54708 17.0722 5.58995 17.23 5.70001C18.2984 6.4422 19.1956 7.40447 19.8612 8.52216C20.5268 9.63986 20.9455 10.8871 21.089 12.18C21.1086 12.3722 21.0512 12.5644 20.9294 12.7143C20.8075 12.8643 20.6312 12.9598 20.439 12.98H20.36Z"
|
|
20
|
+
fill="white"
|
|
21
|
+
fill-opacity="0.5"
|
|
22
|
+
/>
|
|
23
|
+
<path
|
|
24
|
+
d="M3.73988 13.03H3.66988C3.47772 13.0098 3.30139 12.9143 3.17955 12.7643C3.05771 12.6144 3.00029 12.4222 3.01988 12.23C3.15261 10.9399 3.56006 9.69325 4.21483 8.5738C4.86959 7.45434 5.75649 6.48808 6.81587 5.74001C6.97307 5.62918 7.16757 5.58467 7.35732 5.61611C7.54707 5.64755 7.71682 5.7524 7.82987 5.90801C7.93976 6.06498 7.98353 6.25887 7.95172 6.44782C7.91992 6.63678 7.8151 6.80566 7.65987 6.91801C6.77004 7.54619 6.02498 8.35756 5.47475 9.2976C4.92453 10.2376 4.58189 11.2846 4.46987 12.368C4.45158 12.5491 4.36684 12.717 4.23202 12.8392C4.0972 12.9615 3.92187 13.0294 3.73988 13.03Z"
|
|
25
|
+
fill="white"
|
|
26
|
+
fill-opacity="0.5"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
d="M15.99 21.35C14.7641 21.9396 13.4204 22.2439 12.06 22.24C10.6396 22.2466 9.23809 21.9141 7.97204 21.27C7.88623 21.2283 7.80964 21.1698 7.74679 21.098C7.68394 21.0261 7.63611 20.9425 7.6061 20.8519C7.57609 20.7613 7.56452 20.6656 7.57206 20.5705C7.57961 20.4754 7.60612 20.3827 7.65004 20.298C7.73541 20.1261 7.8853 19.9949 8.06702 19.9331C8.24874 19.8713 8.44754 19.8838 8.62004 19.968C9.24536 20.2831 9.91189 20.5086 10.6 20.638C11.5171 20.8179 12.4593 20.8281 13.38 20.668C14.0625 20.5494 14.7254 20.3374 15.35 20.038C15.4358 19.9953 15.5293 19.9702 15.6249 19.9642C15.7205 19.9582 15.8164 19.9715 15.9068 20.0032C15.9973 20.0349 16.0804 20.0844 16.1514 20.1488C16.2224 20.2131 16.2797 20.2911 16.32 20.378C16.3644 20.4631 16.3911 20.5562 16.3984 20.6519C16.4058 20.7476 16.3936 20.8437 16.3628 20.9345C16.332 21.0254 16.283 21.109 16.219 21.1804C16.1549 21.2519 16.077 21.3095 15.99 21.35Z"
|
|
30
|
+
fill="white"
|
|
31
|
+
fill-opacity="0.5"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M12.05 2.26001C11.4922 2.26001 10.947 2.4254 10.4833 2.73527C10.0195 3.04513 9.65808 3.48555 9.44464 4.00084C9.2312 4.51613 9.17536 5.08314 9.28417 5.63016C9.39298 6.17719 9.66156 6.67967 10.0559 7.07405C10.4503 7.46844 10.9528 7.73701 11.4998 7.84582C12.0469 7.95464 12.6139 7.89879 13.1291 7.68535C13.6444 7.47191 14.0849 7.11047 14.3947 6.64672C14.7046 6.18297 14.87 5.63775 14.87 5.08001C14.8692 4.33234 14.5718 3.61553 14.0431 3.08685C13.5145 2.55817 12.7976 2.2608 12.05 2.26001Z"
|
|
35
|
+
fill="white"
|
|
36
|
+
fill-opacity="0.5"
|
|
37
|
+
/>
|
|
38
|
+
<path
|
|
39
|
+
d="M5.04998 14.12C4.49224 14.12 3.94702 14.2854 3.48327 14.5953C3.01953 14.9051 2.65808 15.3455 2.44464 15.8608C2.2312 16.3761 2.17536 16.9431 2.28417 17.4901C2.39298 18.0372 2.66156 18.5397 3.05594 18.934C3.45032 19.3284 3.9528 19.597 4.49983 19.7058C5.04685 19.8146 5.61386 19.7588 6.12915 19.5453C6.64444 19.3319 7.08486 18.9704 7.39473 18.5067C7.70459 18.043 7.86998 17.4977 7.86998 16.94C7.86919 16.1923 7.57183 15.4755 7.04315 14.9468C6.51447 14.4182 5.79765 14.1208 5.04998 14.12Z"
|
|
40
|
+
fill="white"
|
|
41
|
+
fill-opacity="0.5"
|
|
42
|
+
/>
|
|
43
|
+
<path
|
|
44
|
+
d="M18.9499 14.12C18.3921 14.12 17.8469 14.2854 17.3832 14.5953C16.9194 14.9051 16.558 15.3455 16.3445 15.8608C16.1311 16.3761 16.0753 16.9431 16.1841 17.4901C16.2929 18.0372 16.5615 18.5397 16.9558 18.934C17.3502 19.3284 17.8527 19.597 18.3997 19.7058C18.9468 19.8146 19.5138 19.7588 20.0291 19.5453C20.5443 19.3319 20.9848 18.9704 21.2946 18.5067C21.6045 18.043 21.7699 17.4977 21.7699 16.94C21.7691 16.1923 21.4717 15.4755 20.9431 14.9468C20.4144 14.4182 19.6976 14.1208 18.9499 14.12Z"
|
|
45
|
+
fill="white"
|
|
46
|
+
fill-opacity="0.5"
|
|
47
|
+
/>
|
|
48
|
+
</g>
|
|
49
|
+
<defs>
|
|
50
|
+
<clipPath id="clip0_538_8774">
|
|
51
|
+
<rect
|
|
52
|
+
width="24"
|
|
53
|
+
height="24"
|
|
54
|
+
fill="white"
|
|
55
|
+
transform="translate(0 0.25)"
|
|
56
|
+
/>
|
|
57
|
+
</clipPath>
|
|
58
|
+
</defs>
|
|
59
|
+
</svg>
|
|
60
|
+
);
|
|
61
|
+
};
|
|
@@ -8,6 +8,7 @@ import { CheckedCheckboxIcon } from "./IconComponents/CheckedCheckBoxIcon";
|
|
|
8
8
|
import { CheckedRadioIcon } from "./IconComponents/CheckedRadioIcon";
|
|
9
9
|
import { ClogWheelIcon } from "./IconComponents/ClogWheelIcon";
|
|
10
10
|
import { CommutexIcon } from "./IconComponents/CommutexIcon";
|
|
11
|
+
import { CompletedStateIcon } from "./IconComponents/CompletedStateIcon";
|
|
11
12
|
import { CrossIcon } from "./IconComponents/CrossIcon";
|
|
12
13
|
import { DashBoardIcon } from "./IconComponents/DashBoardIcon";
|
|
13
14
|
import { DeviceIcon } from "./IconComponents/DeviceIcon";
|
|
@@ -38,6 +39,8 @@ import { TicketsIcon } from "./IconComponents/TicketsIcon";
|
|
|
38
39
|
import { UmsIcon } from "./IconComponents/UmsIcon";
|
|
39
40
|
import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
|
|
40
41
|
import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
|
|
42
|
+
import { ShareIcon } from "./IconComponents/ShareIcon";
|
|
43
|
+
import { SaveIcon } from "./IconComponents/SaveIcon";
|
|
41
44
|
|
|
42
45
|
export const Icons = {
|
|
43
46
|
AppsIcon,
|
|
@@ -58,6 +61,7 @@ export const Icons = {
|
|
|
58
61
|
InstitutionsIcon,
|
|
59
62
|
ActiveDevicesIcon,
|
|
60
63
|
NavigationIcon,
|
|
64
|
+
CompletedStateIcon,
|
|
61
65
|
UnCheckedCheckboxIcon,
|
|
62
66
|
CheckedCheckboxIcon,
|
|
63
67
|
UnCheckedRadioIcon,
|
|
@@ -79,4 +83,6 @@ export const Icons = {
|
|
|
79
83
|
ExamxIcon,
|
|
80
84
|
UmsIcon,
|
|
81
85
|
AdminIcon,
|
|
86
|
+
ShareIcon,
|
|
87
|
+
SaveIcon,
|
|
82
88
|
};
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import { Stack, SxProps, Typography, useTheme } from "@mui/material";
|
|
2
|
+
import {
|
|
3
|
+
Bar,
|
|
4
|
+
CartesianGrid,
|
|
5
|
+
Label,
|
|
6
|
+
Legend,
|
|
7
|
+
BarChart as ReBarChart,
|
|
8
|
+
Tooltip,
|
|
9
|
+
XAxis,
|
|
10
|
+
YAxis,
|
|
11
|
+
} from "recharts";
|
|
12
|
+
import {
|
|
13
|
+
AxisLabelProps,
|
|
14
|
+
CartesianGridProps,
|
|
15
|
+
LegendProps,
|
|
16
|
+
MarginProps,
|
|
17
|
+
} from "../types/types";
|
|
18
|
+
import { LayoutType } from "recharts/types/util/types";
|
|
19
|
+
|
|
20
|
+
export type BarChartProps = {
|
|
21
|
+
title?: string;
|
|
22
|
+
titleSx?: SxProps;
|
|
23
|
+
width?: number;
|
|
24
|
+
height?: number;
|
|
25
|
+
layout?: LayoutType;
|
|
26
|
+
dataKey: string;
|
|
27
|
+
data: any[];
|
|
28
|
+
bars: BarItem[];
|
|
29
|
+
barGap?: number;
|
|
30
|
+
barSize?: number;
|
|
31
|
+
showToolTip?: boolean;
|
|
32
|
+
showLegend?: boolean;
|
|
33
|
+
cartesianGrid?: CartesianGridProps;
|
|
34
|
+
axisLabelProps?: AxisLabelProps;
|
|
35
|
+
legendSx?: LegendProps;
|
|
36
|
+
containerSx?: SxProps;
|
|
37
|
+
margin?: MarginProps;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
type BarItem = {
|
|
41
|
+
dataKey: string;
|
|
42
|
+
stackId?: string;
|
|
43
|
+
fill: string;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export const BarChart = ({
|
|
47
|
+
title = "Bar Chart",
|
|
48
|
+
titleSx,
|
|
49
|
+
width = 700,
|
|
50
|
+
height = 500,
|
|
51
|
+
margin,
|
|
52
|
+
layout = "horizontal",
|
|
53
|
+
dataKey,
|
|
54
|
+
data,
|
|
55
|
+
bars,
|
|
56
|
+
barGap = 10,
|
|
57
|
+
barSize = 20,
|
|
58
|
+
showToolTip = true,
|
|
59
|
+
showLegend = true,
|
|
60
|
+
cartesianGrid = { showCartesianGrid: false },
|
|
61
|
+
axisLabelProps,
|
|
62
|
+
legendSx,
|
|
63
|
+
containerSx,
|
|
64
|
+
}: BarChartProps) => {
|
|
65
|
+
const { showCartesianGrid, size } = cartesianGrid;
|
|
66
|
+
const isVerticalLayout = layout === "vertical";
|
|
67
|
+
const { xLabel, yLabel } = axisLabelProps ?? {};
|
|
68
|
+
const theme = useTheme();
|
|
69
|
+
|
|
70
|
+
return (
|
|
71
|
+
<Stack alignItems={"center"} sx={{ ...containerSx }}>
|
|
72
|
+
<Typography variant={"h5"} align={"center"} sx={{ ...titleSx }}>
|
|
73
|
+
{title}
|
|
74
|
+
</Typography>
|
|
75
|
+
<ReBarChart
|
|
76
|
+
width={width}
|
|
77
|
+
height={height}
|
|
78
|
+
margin={margin}
|
|
79
|
+
layout={isVerticalLayout ? "horizontal" : "vertical"}
|
|
80
|
+
data={data}
|
|
81
|
+
barGap={barGap}
|
|
82
|
+
barSize={barSize}
|
|
83
|
+
>
|
|
84
|
+
{showCartesianGrid && (
|
|
85
|
+
<CartesianGrid strokeDasharray={`${size} ${size}`} />
|
|
86
|
+
)}
|
|
87
|
+
{showToolTip && (
|
|
88
|
+
<Tooltip
|
|
89
|
+
itemStyle={{
|
|
90
|
+
color: theme.palette.text.primary,
|
|
91
|
+
}}
|
|
92
|
+
contentStyle={{
|
|
93
|
+
color: theme.palette.text.secondary,
|
|
94
|
+
backgroundColor: theme.palette.background.paper,
|
|
95
|
+
borderRadius: "5px",
|
|
96
|
+
padding: "5px 10px",
|
|
97
|
+
}}
|
|
98
|
+
/>
|
|
99
|
+
)}
|
|
100
|
+
{showLegend && <Legend {...legendSx} />}
|
|
101
|
+
{bars?.map((item, index) => (
|
|
102
|
+
<Bar key={index} {...item} />
|
|
103
|
+
))}
|
|
104
|
+
{isVerticalLayout ? (
|
|
105
|
+
<>
|
|
106
|
+
<XAxis
|
|
107
|
+
type="category"
|
|
108
|
+
dataKey={dataKey}
|
|
109
|
+
stroke={theme.palette.primary.dark}
|
|
110
|
+
>
|
|
111
|
+
<Label
|
|
112
|
+
{...xLabel}
|
|
113
|
+
dy={xLabel?.dy}
|
|
114
|
+
style={{ fill: theme.palette.text.primary }}
|
|
115
|
+
/>
|
|
116
|
+
</XAxis>
|
|
117
|
+
<YAxis type="number" stroke={theme.palette.primary.dark}>
|
|
118
|
+
{yLabel && (
|
|
119
|
+
<Label
|
|
120
|
+
offset={10}
|
|
121
|
+
position={"insideLeft"}
|
|
122
|
+
{...yLabel}
|
|
123
|
+
angle={yLabel.angle ?? -90}
|
|
124
|
+
dx={yLabel?.dx}
|
|
125
|
+
style={{ fill: theme.palette.text.primary }}
|
|
126
|
+
/>
|
|
127
|
+
)}
|
|
128
|
+
</YAxis>
|
|
129
|
+
</>
|
|
130
|
+
) : (
|
|
131
|
+
<>
|
|
132
|
+
<XAxis type="number" stroke={theme.palette.primary.dark}>
|
|
133
|
+
<Label
|
|
134
|
+
{...xLabel}
|
|
135
|
+
dy={xLabel?.dy}
|
|
136
|
+
style={{ fill: theme.palette.text.primary }}
|
|
137
|
+
/>
|
|
138
|
+
</XAxis>
|
|
139
|
+
<YAxis
|
|
140
|
+
dataKey={dataKey}
|
|
141
|
+
type="category"
|
|
142
|
+
stroke={theme.palette.primary.dark}
|
|
143
|
+
>
|
|
144
|
+
{yLabel && (
|
|
145
|
+
<Label
|
|
146
|
+
offset={10}
|
|
147
|
+
position={"insideLeft"}
|
|
148
|
+
{...yLabel}
|
|
149
|
+
angle={yLabel.angle ?? -90}
|
|
150
|
+
dx={yLabel?.dx}
|
|
151
|
+
style={{ fill: theme.palette.text.primary }}
|
|
152
|
+
/>
|
|
153
|
+
)}
|
|
154
|
+
</YAxis>
|
|
155
|
+
</>
|
|
156
|
+
)}
|
|
157
|
+
</ReBarChart>
|
|
158
|
+
</Stack>
|
|
159
|
+
);
|
|
160
|
+
};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { Box, Stack, SxProps, Typography, useTheme } from "@mui/material";
|
|
2
|
+
import {
|
|
3
|
+
Bar,
|
|
4
|
+
CartesianGrid,
|
|
5
|
+
Label,
|
|
6
|
+
Legend,
|
|
7
|
+
Line,
|
|
8
|
+
LineChart as ReLineChart,
|
|
9
|
+
Tooltip,
|
|
10
|
+
XAxis,
|
|
11
|
+
YAxis,
|
|
12
|
+
} from "recharts";
|
|
13
|
+
import {
|
|
14
|
+
AxisLabelProps,
|
|
15
|
+
CartesianGridProps,
|
|
16
|
+
LegendProps,
|
|
17
|
+
MarginProps,
|
|
18
|
+
} from "../types/types";
|
|
19
|
+
import { CurveType } from "recharts/types/shape/Curve";
|
|
20
|
+
|
|
21
|
+
export type LineChartProps = {
|
|
22
|
+
title?: string;
|
|
23
|
+
titleSx?: SxProps;
|
|
24
|
+
width?: number;
|
|
25
|
+
height?: number;
|
|
26
|
+
dataKey: string;
|
|
27
|
+
data: any[];
|
|
28
|
+
lines: LineItem[];
|
|
29
|
+
showToolTip?: boolean;
|
|
30
|
+
showLegend?: boolean;
|
|
31
|
+
cartesianGrid?: CartesianGridProps;
|
|
32
|
+
axisLabelProps?: AxisLabelProps;
|
|
33
|
+
legendSx?: LegendProps;
|
|
34
|
+
containerSx?: SxProps;
|
|
35
|
+
margin?: MarginProps;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
type LineItem = {
|
|
39
|
+
type: CurveType;
|
|
40
|
+
dataKey: string;
|
|
41
|
+
stroke: string;
|
|
42
|
+
activeDot?: any;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export const LineChart = ({
|
|
46
|
+
title = "Line Chart",
|
|
47
|
+
titleSx,
|
|
48
|
+
width = 700,
|
|
49
|
+
height = 500,
|
|
50
|
+
margin,
|
|
51
|
+
dataKey,
|
|
52
|
+
data,
|
|
53
|
+
lines,
|
|
54
|
+
showToolTip = true,
|
|
55
|
+
showLegend = true,
|
|
56
|
+
cartesianGrid = { showCartesianGrid: false },
|
|
57
|
+
axisLabelProps,
|
|
58
|
+
legendSx,
|
|
59
|
+
containerSx,
|
|
60
|
+
}: LineChartProps) => {
|
|
61
|
+
const { showCartesianGrid, size } = cartesianGrid;
|
|
62
|
+
const { xLabel, yLabel } = axisLabelProps ?? {};
|
|
63
|
+
const theme = useTheme();
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<Stack alignItems={"center"} sx={containerSx}>
|
|
67
|
+
<Typography variant={"h5"} align={"center"} sx={titleSx}>
|
|
68
|
+
{title}
|
|
69
|
+
</Typography>
|
|
70
|
+
<ReLineChart width={width} height={height} margin={margin} data={data}>
|
|
71
|
+
{showCartesianGrid && (
|
|
72
|
+
<CartesianGrid strokeDasharray={`${size} ${size}`} />
|
|
73
|
+
)}
|
|
74
|
+
{showToolTip && (
|
|
75
|
+
<Tooltip
|
|
76
|
+
itemStyle={{
|
|
77
|
+
color: theme.palette.text.primary,
|
|
78
|
+
}}
|
|
79
|
+
contentStyle={{
|
|
80
|
+
color: theme.palette.text.secondary,
|
|
81
|
+
backgroundColor: theme.palette.background.paper,
|
|
82
|
+
borderRadius: "5px",
|
|
83
|
+
padding: "5px 10px",
|
|
84
|
+
}}
|
|
85
|
+
/>
|
|
86
|
+
)}
|
|
87
|
+
{showLegend && <Legend {...legendSx} />}
|
|
88
|
+
|
|
89
|
+
<XAxis
|
|
90
|
+
padding={"gap"}
|
|
91
|
+
type="category"
|
|
92
|
+
dataKey={dataKey}
|
|
93
|
+
stroke={theme.palette.primary.dark}
|
|
94
|
+
>
|
|
95
|
+
<Label
|
|
96
|
+
{...xLabel}
|
|
97
|
+
dy={xLabel?.dy}
|
|
98
|
+
style={{ fill: theme.palette.text.primary }}
|
|
99
|
+
/>
|
|
100
|
+
</XAxis>
|
|
101
|
+
<YAxis type="number" stroke={theme.palette.primary.dark}>
|
|
102
|
+
{yLabel && (
|
|
103
|
+
<Label
|
|
104
|
+
offset={10}
|
|
105
|
+
position={"insideLeft"}
|
|
106
|
+
{...yLabel}
|
|
107
|
+
angle={yLabel.angle ?? -90}
|
|
108
|
+
dx={yLabel?.dx}
|
|
109
|
+
style={{ fill: theme.palette.text.primary }}
|
|
110
|
+
/>
|
|
111
|
+
)}
|
|
112
|
+
</YAxis>
|
|
113
|
+
{lines?.map((item, index) => (
|
|
114
|
+
<Line key={index} {...item} />
|
|
115
|
+
))}
|
|
116
|
+
</ReLineChart>
|
|
117
|
+
</Stack>
|
|
118
|
+
);
|
|
119
|
+
};
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { Stack, SxProps, Typography, useTheme } from "@mui/material";
|
|
2
|
+
import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from "recharts";
|
|
3
|
+
import { LegendProps, MarginProps } from "../types/types";
|
|
4
|
+
|
|
5
|
+
export type PieChartProps = {
|
|
6
|
+
title?: string;
|
|
7
|
+
titleSx?: SxProps;
|
|
8
|
+
margin?: MarginProps;
|
|
9
|
+
width?: number;
|
|
10
|
+
height?: number;
|
|
11
|
+
pie1: PieProps;
|
|
12
|
+
pie2?: PieProps;
|
|
13
|
+
containerSx?: SxProps;
|
|
14
|
+
showLegend?: boolean;
|
|
15
|
+
legendSx?: LegendProps;
|
|
16
|
+
showToolTip?: boolean;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
type PieProps = {
|
|
20
|
+
data: any[];
|
|
21
|
+
dataKey: string;
|
|
22
|
+
innerRadius?: number;
|
|
23
|
+
outerRadius?: number;
|
|
24
|
+
fill?: string;
|
|
25
|
+
label?: boolean;
|
|
26
|
+
cx?: string;
|
|
27
|
+
cy?: string;
|
|
28
|
+
colors?: string[];
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const PieChart = ({
|
|
32
|
+
title = "Pie Chart",
|
|
33
|
+
titleSx,
|
|
34
|
+
margin,
|
|
35
|
+
width = 500,
|
|
36
|
+
height = 500,
|
|
37
|
+
showToolTip = true,
|
|
38
|
+
showLegend = true,
|
|
39
|
+
legendSx,
|
|
40
|
+
pie1,
|
|
41
|
+
pie2,
|
|
42
|
+
containerSx,
|
|
43
|
+
}: PieChartProps) => {
|
|
44
|
+
const theme = useTheme();
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<Stack alignItems="center" sx={{ ...containerSx }}>
|
|
48
|
+
<Typography variant="h5" align="center" sx={{ ...titleSx }}>
|
|
49
|
+
{title}
|
|
50
|
+
</Typography>
|
|
51
|
+
<RePieChart width={width} height={height} margin={margin}>
|
|
52
|
+
{showToolTip && (
|
|
53
|
+
<Tooltip
|
|
54
|
+
itemStyle={{
|
|
55
|
+
color: theme.palette.text.primary,
|
|
56
|
+
}}
|
|
57
|
+
contentStyle={{
|
|
58
|
+
color: theme.palette.text.secondary,
|
|
59
|
+
backgroundColor: theme.palette.background.paper,
|
|
60
|
+
borderRadius: "5px",
|
|
61
|
+
padding: "5px 10px",
|
|
62
|
+
}}
|
|
63
|
+
/>
|
|
64
|
+
)}
|
|
65
|
+
{showLegend && <Legend {...legendSx} />}
|
|
66
|
+
<Pie {...pie1} cx={pie1?.cx ?? "50%"} cy={pie1?.cy ?? "50%"}>
|
|
67
|
+
{pie1?.data.map((entry, index) => (
|
|
68
|
+
<Cell
|
|
69
|
+
key={`cell-${index}`}
|
|
70
|
+
fill={
|
|
71
|
+
pie1.colors
|
|
72
|
+
? pie1.colors[index % pie1.colors.length]
|
|
73
|
+
: pie1.fill
|
|
74
|
+
}
|
|
75
|
+
/>
|
|
76
|
+
))}
|
|
77
|
+
</Pie>
|
|
78
|
+
{pie2 && (
|
|
79
|
+
<Pie {...pie2} cx={pie2?.cx ?? "50%"} cy={pie2?.cy ?? "50%"}>
|
|
80
|
+
{pie2?.data.map((entry, index) => (
|
|
81
|
+
<Cell
|
|
82
|
+
key={`cell-${index}`}
|
|
83
|
+
fill={
|
|
84
|
+
pie2.colors
|
|
85
|
+
? pie2.colors[index % pie2.colors.length]
|
|
86
|
+
: pie2.fill
|
|
87
|
+
}
|
|
88
|
+
/>
|
|
89
|
+
))}
|
|
90
|
+
</Pie>
|
|
91
|
+
)}
|
|
92
|
+
</RePieChart>
|
|
93
|
+
</Stack>
|
|
94
|
+
);
|
|
95
|
+
};
|