namirasoft-site-react 1.3.447 → 1.3.449

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 (16) hide show
  1. package/dist/components/NSRange.js +2 -2
  2. package/dist/components/NSRange.js.map +1 -1
  3. package/dist/components/NSRange.module.css +62 -19
  4. package/dist/components/NSTimeTable.js +4 -3
  5. package/dist/components/NSTimeTable.js.map +1 -1
  6. package/dist/components/NSTimeTable.module.css +5 -1
  7. package/dist/components/NSTimelineMonthly.js +2 -1
  8. package/dist/components/NSTimelineMonthly.js.map +1 -1
  9. package/dist/components/NSTimelineMonthly.module.css +49 -33
  10. package/package.json +71 -71
  11. package/src/components/NSRange.module.css +62 -19
  12. package/src/components/NSRange.tsx +62 -63
  13. package/src/components/NSTimeTable.module.css +5 -1
  14. package/src/components/NSTimeTable.tsx +12 -10
  15. package/src/components/NSTimelineMonthly.module.css +49 -33
  16. package/src/components/NSTimelineMonthly.tsx +30 -30
package/dist/components/NSRange.js CHANGED
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
3
3
  import Styles from './NSRange.module.css';
4
4
  import { Color } from "../Color";
5
5
  export function NSRange(props) {
6
- var _a;
6
+ var _a, _b;
7
7
  const [Widths, setWidths] = useState([]);
8
8
  const [positions, setPositions] = useState([]);
9
9
  useEffect(() => {
@@ -28,7 +28,7 @@ export function NSRange(props) {
28
28
  const width = ((minute * 100) / 1440).toString();
29
29
  return `${width}%`;
30
30
  };
31
- return (_jsxs("div", { className: "container-fluid d-flex justify-content-center direction-ltr", children: [_jsx("h5", { className: Styles.ns_time_line_title, children: props.title }), _jsx("div", { className: "col-12 col-sm-11 px-0", children: _jsxs("div", { className: ` ${Styles.ns_range_time_box_full} d-flex justify-content-start`, children: [_jsx("div", { children: (_a = props.data) === null || _a === void 0 ? void 0 : _a.map((data, index) => _jsx("span", { className: Styles.ns_range_time_line, style: {
31
+ return (_jsxs("div", { className: `${Styles.ns_range_parent} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("h5", { className: Styles.ns_time_line_title, children: props.title }), _jsx("div", { className: "col-12 px-0", children: _jsxs("div", { className: ` ${Styles.ns_range_time_box_full} d-flex justify-content-start`, children: [_jsx("div", { children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.map((data, index) => _jsx("span", { className: Styles.ns_range_time_line, style: {
32
32
  background: Color.getColor(data === null || data === void 0 ? void 0 : data.percentage),
33
33
  width: Widths[index] || '0%',
34
34
  left: positions[index] || '%0'
package/dist/components/NSRange.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSRange.js","sourceRoot":"","sources":["../../src/components/NSRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAG1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAejC,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAExC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;;QAEX,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAEpC,MAAM,OAAO,GAAG,uBAAuB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACxE,OAAO,mBAAmB,CAAC,OAAO,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAEvC,MAAM,OAAO,GAAG,uBAAuB,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;YAC1F,OAAO,mBAAmB,CAAC,OAAO,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,SAAS,CAAC,MAAM,CAAC,CAAC;QAClB,YAAY,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEjB,MAAM,uBAAuB,GAAG,CAAC,UAAgB,EAAE,QAAc,EAAU,EAAE;QAEzE,MAAM,0BAA0B,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;QACvF,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,0BAA0B,GAAG,IAAI,GAAG,EAAE,CAAC,CAAC;QACjF,OAAO,qBAAqB,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,MAAc,EAAU,EAAE;QAEnD,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;QACjD,OAAO,GAAG,KAAK,GAAG,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAC,6DAA6D,aACxE,aAAI,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,CAAC,KAAK,GAAM,EAE5D,cAAK,SAAS,EAAC,uBAAuB,YAClC,eAAK,SAAS,EAAE,IAAI,MAAM,CAAC,sBAAsB,+BAA+B,aAC5E,wBAEQ,MAAA,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC5B,eAEI,SAAS,EAAE,MAAM,CAAC,kBAAkB,EACpC,KAAK,EAAE;oCACH,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,CAAC;oCAC5C,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI;oCAC5B,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,IAAI;iCACjC,IANI,KAAK,CAOP,CACV,GAEH,EACL,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC/B,cAAgB,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAChD,2BAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,WAAW,IAD5C,IAAI,CAER,CACT,CAAC,IACA,GACJ,IACJ,CACT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"NSRange.js","sourceRoot":"","sources":["../../src/components/NSRange.tsx"],"names":[],"mappings":"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"}
package/dist/components/NSRange.module.css CHANGED
@@ -1,24 +1,67 @@
1
+ .ns_range_parent {
2
+ width: 100%;
3
+ max-width: 1150px;
4
+ }
5
+
1
6
  .ns_range_time_item {
2
- z-index: 99;
3
- text-align: center;
4
- padding: 10px;
5
- width: 4.166666%;
6
- display: inline-block;
7
- height: 60px;
8
- position: relative;
9
- border-width: 1px;
10
- border-color: black;
11
- border-style: groove;
7
+ z-index: 99;
8
+ text-align: center;
9
+ max-width: 48px;
10
+ display: inline-block;
11
+ height: 60px;
12
+ position: relative;
13
+ border-width: 1px;
14
+ border-color: #DCDCDC;
15
+ border-style: groove;
12
16
  }
13
17
 
14
18
  .ns_range_time_box_full {
15
- background-color: #fff;
16
- border-radius: 5px;
17
- position: relative;
18
- box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
19
- overflow: hidden;
20
- }
21
- .ns_range_time_line{
22
- position: absolute;
23
- height: 100%;
19
+ background-color: #fff;
20
+ border-radius: 5px;
21
+ position: relative;
22
+ box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
23
+ overflow-x: scroll;
24
+ }
25
+
26
+ .ns_range_time_box_full::-webkit-scrollbar {
27
+ height: 6px;
28
+ }
29
+
30
+ .ns_range_time_box_full::-webkit-scrollbar-track {
31
+ background-color: #c0c0c0;
32
+ border-radius: 6px;
33
+ }
34
+
35
+ .ns_range_time_box_full::-webkit-scrollbar-thumb {
36
+ background: #141B5C;
37
+ border-radius: 6px;
38
+ }
39
+
40
+ .ns_range_time_line {
41
+ position: absolute;
42
+ height: 100%;
43
+ }
44
+
45
+ .ns_time_line_title {
46
+ color: #141B5C;
47
+ margin-bottom: 16px;
48
+ }
49
+
50
+ .ns_range_time_item span {
51
+ color: #141B5C;
52
+ width: 100%;
53
+ display: inline-block;
54
+ background-color: #DCDCDC;
55
+ border-bottom: 1px solid #DCDCDC;
56
+ font-weight: 500;
57
+ }
58
+
59
+ @media screen and (min-width: 992px) {
60
+ .ns_range_time_box_full {
61
+ overflow: hidden;
62
+ }
63
+
64
+ .ns_range_time_item {
65
+ width: 4.166666%;
66
+ }
24
67
  }
package/dist/components/NSTimeTable.js CHANGED
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { ConfigProvider, Table } from 'antd';
3
3
  import Styles from "./NSTimeTable.module.css";
4
4
  export function NSTimeTable(props) {
5
+ var _a;
5
6
  return (_jsx(ConfigProvider, { theme: {
6
7
  components: {
7
8
  Table: {
@@ -12,9 +13,9 @@ export function NSTimeTable(props) {
12
13
  colorText: "#141B5C",
13
14
  }
14
15
  }
15
- }, children: _jsx(Table, { columns: props.columns, dataSource: props.rows, bordered: false, rowClassName: Styles.custom_row, rowHoverable: false, scroll: {
16
- x: true
17
- } }) }));
16
+ }, children: _jsx("div", { className: `${Styles.ns_timetable_parent} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsx(Table, { columns: props.columns, dataSource: props.rows, bordered: false, rowClassName: Styles.custom_row, rowHoverable: false, scroll: {
17
+ x: true
18
+ } }) }) }));
18
19
  }
19
20
  ;
20
21
  //# sourceMappingURL=NSTimeTable.js.map
package/dist/components/NSTimeTable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSTimeTable.js","sourceRoot":"","sources":["../../src/components/NSTimeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAG7C,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAiB7C,MAAM,UAAU,WAAW,CAAC,KAAuB;IAGlD,OAAO,CACN,KAAC,cAAc,IAAC,KAAK,EAAE;YACtB,UAAU,EAAE;gBACX,KAAK,EAAE;oBACN,QAAQ,EAAE,SAAS;oBACnB,WAAW,EAAE,MAAM;oBACnB,gBAAgB,EAAE,SAAS;oBAC3B,YAAY,EAAE,EAAE;oBAChB,SAAS,EAAE,SAAS;iBACpB;aACD;SACD,YACA,KAAC,KAAK,IACL,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,UAAU,EAAE,KAAK,CAAC,IAAI,EACtB,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,MAAM,CAAC,UAAU,EAC/B,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE;gBACP,CAAC,EAAE,IAAI;aACP,GACA,GACc,CACjB,CAAA;AACF,CAAC;AAAA,CAAC"}
1
+ {"version":3,"file":"NSTimeTable.js","sourceRoot":"","sources":["../../src/components/NSTimeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAG7C,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAiB7C,MAAM,UAAU,WAAW,CAAC,KAAuB;;IAGlD,OAAO,CACN,KAAC,cAAc,IAAC,KAAK,EAAE;YACtB,UAAU,EAAE;gBACX,KAAK,EAAE;oBACN,QAAQ,EAAE,SAAS;oBACnB,WAAW,EAAE,MAAM;oBACnB,gBAAgB,EAAE,SAAS;oBAC3B,YAAY,EAAE,EAAE;oBAChB,SAAS,EAAE,SAAS;iBACpB;aACD;SACD,YACA,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,mBAAmB,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,YAChG,KAAC,KAAK,IACL,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,UAAU,EAAE,KAAK,CAAC,IAAI,EACtB,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,MAAM,CAAC,UAAU,EAC/B,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE;oBACP,CAAC,EAAE,IAAI;iBACP,GACA,GACG,GACU,CACjB,CAAA;AACF,CAAC;AAAA,CAAC"}
package/dist/components/NSTimeTable.module.css CHANGED
@@ -1,3 +1,7 @@
1
1
  .custom_row th:nth-child(1) {
2
- box-shadow: 4px 0px 4px 0px #00000040;
2
+ box-shadow: 4px 0px 4px 0px #00000040;
3
+ }
4
+
5
+ .ns_timetable_parent {
6
+ max-width: 1150px;
3
7
  }
package/dist/components/NSTimelineMonthly.js CHANGED
@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import Styles from './NSTimelineMonthly.module.css';
3
3
  import { Color } from "../Color";
4
4
  export function NSTimelineMonthly(props) {
5
+ var _a;
5
6
  function getPercentage(value) {
6
7
  let percentage = (value * 100) / 24;
7
8
  return percentage.toString() + "%";
8
9
  }
9
- return (_jsx(_Fragment, { children: _jsxs("div", { className: `container-fluid d-flex justify-content-center ${Styles.ns_parent}`, children: [_jsx("h5", { className: Styles.ns_time_line_title, children: props.title }), _jsx("div", { className: Styles.ns_time_line_monthly, children: props.data.map((card, index) => (_jsxs("div", { className: Styles.ns_time_line_monthly_card, children: [_jsx("h5", { className: Styles.ns_time_line_monthly_card_week_day, children: card.title }), _jsx("span", { className: Styles.ns_time_line_cards_hour, children: card.value }), _jsx("div", { className: Styles.ns_time_line_monthly_card_parent_chart, children: _jsx("div", { className: Styles.ns_time_line_monthly_card_bar, style: { width: getPercentage(card.value), background: Color.getColor(card.percentage) }, children: "bar" }) })] }, index))) })] }) }));
10
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: `${Styles.ns_parent} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} `, style: props.style, children: [_jsx("h5", { className: Styles.ns_time_line_title, children: props.title }), _jsx("div", { className: Styles.ns_time_line_monthly, children: props.data.map((card, index) => (_jsxs("div", { className: Styles.ns_time_line_monthly_card, children: [_jsx("h5", { className: Styles.ns_time_line_monthly_card_week_day, children: card.title }), _jsx("span", { className: Styles.ns_time_line_cards_hour, children: card.value }), _jsx("div", { className: Styles.ns_time_line_monthly_card_parent_chart, children: _jsx("div", { className: Styles.ns_time_line_monthly_card_bar, style: { width: getPercentage(card.value), background: Color.getColor(card.percentage) }, children: "bar" }) })] }, index))) })] }) }));
10
11
  }
11
12
  //# sourceMappingURL=NSTimelineMonthly.js.map
package/dist/components/NSTimelineMonthly.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSTimelineMonthly.js","sourceRoot":"","sources":["../../src/components/NSTimelineMonthly.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAahC,MAAM,UAAU,iBAAiB,CAAC,KAAgC;IAE9D,SAAS,aAAa,CAAC,KAAa;QAEhC,IAAI,UAAU,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACpC,OAAO,UAAU,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACvC,CAAC;IACD,OAAO,CACH,4BACI,eAAK,SAAS,EAAE,iDAAiD,MAAM,CAAC,SAAS,EAAE,aAC/E,aAAI,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,CAAC,KAAK,GAAM,EAC5D,cAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,YAEnC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC5C,aAAI,SAAS,EAAE,MAAM,CAAC,kCAAkC,YAAG,IAAI,CAAC,KAAK,GAAM,EAC3E,eAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,YAAG,IAAI,CAAC,KAAK,GAAQ,EACpE,cAAK,SAAS,EAAE,MAAM,CAAC,sCAAsC,YACzD,cAAK,SAAS,EAAE,MAAM,CAAC,6BAA6B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,oBAAW,GACvJ,KAL6C,KAAK,CAMtD,CACT,CAAC,GAEJ,IACJ,GACP,CACN,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"NSTimelineMonthly.js","sourceRoot":"","sources":["../../src/components/NSTimelineMonthly.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAahC,MAAM,UAAU,iBAAiB,CAAC,KAAgC;;IAEjE,SAAS,aAAa,CAAC,KAAa;QAEnC,IAAI,UAAU,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACpC,OAAO,UAAU,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACpC,CAAC;IACD,OAAO,CACN,4BACC,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,KAAK,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aACxF,aAAI,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,CAAC,KAAK,GAAM,EAC5D,cAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,YAEzC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC/C,aAAI,SAAS,EAAE,MAAM,CAAC,kCAAkC,YAAG,IAAI,CAAC,KAAK,GAAM,EAC3E,eAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,YAAG,IAAI,CAAC,KAAK,GAAQ,EACpE,cAAK,SAAS,EAAE,MAAM,CAAC,sCAAsC,YAC5D,cAAK,SAAS,EAAE,MAAM,CAAC,6BAA6B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,oBAAW,GACpJ,KALgD,KAAK,CAMtD,CACN,CAAC,GAEE,IACD,GACJ,CACH,CAAC;AACH,CAAC"}
package/dist/components/NSTimelineMonthly.module.css CHANGED
@@ -1,56 +1,72 @@
1
1
  .ns_time_line_monthly_card {
2
- width: 72px;
3
- border-radius: 4px;
4
- background-color: #fff;
5
- overflow: hidden;
6
- text-align: center;
7
- display: flex;
8
- flex-direction: column;
9
- gap: 5px;
10
- box-shadow: 1px 0px 3px 1px #b2b2b2;
2
+ width: 72px;
3
+ border-radius: 4px;
4
+ background-color: #fff;
5
+ overflow: hidden;
6
+ text-align: center;
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 5px;
10
+ box-shadow: 1px 0px 3px 1px #b2b2b2;
11
11
  }
12
12
 
13
13
  .ns_time_line_monthly_card_week_day {
14
- background-color: #141B5C;
15
- color: #fff;
16
- margin: 0;
17
- text-align: center;
18
- padding: 8px;
19
- /* margin-bottom: 4px; */
14
+ background-color: #141B5C;
15
+ color: #fff;
16
+ margin: 0;
17
+ text-align: center;
18
+ padding: 8px;
19
+ /* margin-bottom: 4px; */
20
20
  }
21
21
 
22
22
  .ns_time_line_cards_hour {
23
- color: #141B5C;
23
+ color: #141B5C;
24
24
  }
25
25
 
26
26
  .ns_time_line_monthly_card_parent_chart {
27
- width: 100%;
28
- height: 30%;
29
- background-color: #E0DFFF;
30
- box-shadow: 1px 1px 2px 1px #6c6a6acc;
27
+ width: 100%;
28
+ height: 30%;
29
+ background-color: #E0DFFF;
30
+ box-shadow: 1px 1px 2px 1px #6c6a6acc;
31
31
  }
32
32
 
33
33
  .ns_time_line_monthly_card_bar {
34
- height: 100%;
35
- /* background-color: #3B9D00; */
36
- color: transparent;
34
+ height: 100%;
35
+ /* background-color: #3B9D00; */
36
+ color: transparent;
37
37
  }
38
38
 
39
39
  .ns_time_line_monthly {
40
- display: flex;
41
- gap: 2px;
42
- flex-direction: row;
43
- width: max-content;
40
+ display: flex;
41
+ gap: 2px;
42
+ flex-direction: row;
43
+ width: max-content;
44
44
  }
45
45
 
46
46
  .ns_parent {
47
- width: 100%;
48
- overflow-x: scroll;
49
- -ms-overflow-style: none;
50
- scrollbar-width: none;
47
+ width: 100%;
48
+ max-width: 1150px;
49
+ overflow-x: scroll;
50
+ flex-direction: column;
51
+ }
52
+
53
+ .ns_parent::-webkit-scrollbar {
54
+ height: 6px;
55
+ }
56
+
57
+ .ns_parent::-webkit-scrollbar-track {
58
+ background-color: #c0c0c0;
59
+ border-radius: 6px;
60
+ }
61
+
62
+ .ns_parent::-webkit-scrollbar-thumb {
63
+ background: #141B5C;
64
+ border-radius: 6px;
51
65
  }
52
66
 
53
67
  .ns_time_line_title {
54
- color: #141B5C;
55
- margin-bottom: 16px;
68
+ color: #141B5C;
69
+ margin-bottom: 16px;
70
+ position: sticky;
71
+ left: 0;
56
72
  }
package/package.json CHANGED
@@ -1,73 +1,73 @@
1
1
  {
2
- "name": "namirasoft-site-react",
3
- "title": "Namirasoft Site React NPM Package",
4
- "description": "Namira Software Corporation Site React NPM Package",
5
- "icon": "logo.png",
6
- "logo": "https://static.namirasoft.com/image/namirasoft/site/logo/base.png",
7
- "language": "ts",
8
- "framework": "npm",
9
- "application": "package",
10
- "private": false,
11
- "version": "1.3.447",
12
- "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh, Mehrab Bahramian",
13
- "license": "MIT",
14
- "main": "./dist/main.js",
15
- "types": "./dist/main.d.ts",
16
- "scripts": {
17
- "start": "react-app-rewired start",
18
- "build": "npm run copy",
19
- "test": "react-app-rewired test",
20
- "eject": "react-app-rewired eject",
21
- "copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
22
- },
23
- "dependencies": {
24
- "@ant-design/charts": "^2.1.2",
25
- "@types/node": "^22.4.1",
26
- "@types/react": "^18.3.3",
27
- "@types/react-bootstrap": "^0.32.37",
28
- "@types/react-dom": "^18.3.0",
29
- "antd": "^5.20.1",
30
- "bootstrap": "^5.3.3",
31
- "chart.js": "^4.4.3",
32
- "copyfiles": "^2.4.1",
33
- "link-react": "^3.0.0",
34
- "namirasoft-api-link": "^1.4.3",
35
- "namirasoft-api-product": "^1.4.3",
36
- "namirasoft-core": "^1.4.5",
37
- "path-browserify": "^1.0.1",
38
- "react": "^18.3.1",
39
- "react-app-rewired": "^2.2.1",
40
- "react-bootstrap": "^2.10.4",
41
- "react-chartjs-2": "^5.2.0",
42
- "react-dom": "^18.3.1",
43
- "react-phone-input-2": "^2.15.1",
44
- "react-phone-number-input": "^3.4.5",
45
- "react-router-dom": "^6.26.1",
46
- "react-scripts": "5.0.1",
47
- "styled-components": "^6.1.12",
48
- "xlsx": "^0.18.5"
49
- },
50
- "eslintConfig": {
51
- "extends": [
52
- "react-app",
53
- "react-app/jest"
54
- ]
55
- },
56
- "skip": {
57
- "files": [
58
- "/tsconfig.json"
59
- ]
60
- },
61
- "browserslist": {
62
- "production": [
63
- ">0.2%",
64
- "not dead",
65
- "not op_mini all"
66
- ],
67
- "development": [
68
- "last 1 chrome version",
69
- "last 1 firefox version",
70
- "last 1 safari version"
71
- ]
72
- }
2
+ "name": "namirasoft-site-react",
3
+ "title": "Namirasoft Site React NPM Package",
4
+ "description": "Namira Software Corporation Site React NPM Package",
5
+ "icon": "logo.png",
6
+ "logo": "https://static.namirasoft.com/image/namirasoft/site/logo/base.png",
7
+ "language": "ts",
8
+ "framework": "npm",
9
+ "application": "package",
10
+ "private": false,
11
+ "version": "1.3.449",
12
+ "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh, Mehrab Bahramian",
13
+ "license": "MIT",
14
+ "main": "./dist/main.js",
15
+ "types": "./dist/main.d.ts",
16
+ "scripts": {
17
+ "start": "react-app-rewired start",
18
+ "build": "npm run copy",
19
+ "test": "react-app-rewired test",
20
+ "eject": "react-app-rewired eject",
21
+ "copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
22
+ },
23
+ "dependencies": {
24
+ "@ant-design/charts": "^2.1.2",
25
+ "@types/node": "^22.4.1",
26
+ "@types/react": "^18.3.3",
27
+ "@types/react-bootstrap": "^0.32.37",
28
+ "@types/react-dom": "^18.3.0",
29
+ "antd": "^5.20.1",
30
+ "bootstrap": "^5.3.3",
31
+ "chart.js": "^4.4.3",
32
+ "copyfiles": "^2.4.1",
33
+ "link-react": "^3.0.0",
34
+ "namirasoft-api-link": "^1.4.3",
35
+ "namirasoft-api-product": "^1.4.3",
36
+ "namirasoft-core": "^1.4.5",
37
+ "path-browserify": "^1.0.1",
38
+ "react": "^18.3.1",
39
+ "react-app-rewired": "^2.2.1",
40
+ "react-bootstrap": "^2.10.4",
41
+ "react-chartjs-2": "^5.2.0",
42
+ "react-dom": "^18.3.1",
43
+ "react-phone-input-2": "^2.15.1",
44
+ "react-phone-number-input": "^3.4.5",
45
+ "react-router-dom": "^6.26.1",
46
+ "react-scripts": "5.0.1",
47
+ "styled-components": "^6.1.12",
48
+ "xlsx": "^0.18.5"
49
+ },
50
+ "eslintConfig": {
51
+ "extends": [
52
+ "react-app",
53
+ "react-app/jest"
54
+ ]
55
+ },
56
+ "skip": {
57
+ "files": [
58
+ "/tsconfig.json"
59
+ ]
60
+ },
61
+ "browserslist": {
62
+ "production": [
63
+ ">0.2%",
64
+ "not dead",
65
+ "not op_mini all"
66
+ ],
67
+ "development": [
68
+ "last 1 chrome version",
69
+ "last 1 firefox version",
70
+ "last 1 safari version"
71
+ ]
72
+ }
73
73
  }
package/src/components/NSRange.module.css CHANGED
@@ -1,24 +1,67 @@
1
+ .ns_range_parent {
2
+ width: 100%;
3
+ max-width: 1150px;
4
+ }
5
+
1
6
  .ns_range_time_item {
2
- z-index: 99;
3
- text-align: center;
4
- padding: 10px;
5
- width: 4.166666%;
6
- display: inline-block;
7
- height: 60px;
8
- position: relative;
9
- border-width: 1px;
10
- border-color: black;
11
- border-style: groove;
7
+ z-index: 99;
8
+ text-align: center;
9
+ max-width: 48px;
10
+ display: inline-block;
11
+ height: 60px;
12
+ position: relative;
13
+ border-width: 1px;
14
+ border-color: #DCDCDC;
15
+ border-style: groove;
12
16
  }
13
17
 
14
18
  .ns_range_time_box_full {
15
- background-color: #fff;
16
- border-radius: 5px;
17
- position: relative;
18
- box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
19
- overflow: hidden;
20
- }
21
- .ns_range_time_line{
22
- position: absolute;
23
- height: 100%;
19
+ background-color: #fff;
20
+ border-radius: 5px;
21
+ position: relative;
22
+ box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
23
+ overflow-x: scroll;
24
+ }
25
+
26
+ .ns_range_time_box_full::-webkit-scrollbar {
27
+ height: 6px;
28
+ }
29
+
30
+ .ns_range_time_box_full::-webkit-scrollbar-track {
31
+ background-color: #c0c0c0;
32
+ border-radius: 6px;
33
+ }
34
+
35
+ .ns_range_time_box_full::-webkit-scrollbar-thumb {
36
+ background: #141B5C;
37
+ border-radius: 6px;
38
+ }
39
+
40
+ .ns_range_time_line {
41
+ position: absolute;
42
+ height: 100%;
43
+ }
44
+
45
+ .ns_time_line_title {
46
+ color: #141B5C;
47
+ margin-bottom: 16px;
48
+ }
49
+
50
+ .ns_range_time_item span {
51
+ color: #141B5C;
52
+ width: 100%;
53
+ display: inline-block;
54
+ background-color: #DCDCDC;
55
+ border-bottom: 1px solid #DCDCDC;
56
+ font-weight: 500;
57
+ }
58
+
59
+ @media screen and (min-width: 992px) {
60
+ .ns_range_time_box_full {
61
+ overflow: hidden;
62
+ }
63
+
64
+ .ns_range_time_item {
65
+ width: 4.166666%;
66
+ }
24
67
  }
package/src/components/NSRange.tsx CHANGED
@@ -6,79 +6,78 @@ import { Color } from "../Color";
6
6
 
7
7
  export interface NSRangeRow
8
8
  {
9
- start_time: Date;
10
- end_time: Date;
11
- percentage: number;
9
+ start_time: Date;
10
+ end_time: Date;
11
+ percentage: number;
12
12
  }
13
13
 
14
14
  export interface INSRangeProps extends IBaseComponentProps
15
15
  {
16
- data: NSRangeRow[];
17
- title?:string;
16
+ data: NSRangeRow[];
17
+ title?: string;
18
18
  }
19
19
 
20
20
  export function NSRange(props: INSRangeProps)
21
21
  {
22
- const [Widths, setWidths] = useState<string[]>([]);
23
- const [positions, setPositions] = useState<string[]>([]);
22
+ const [Widths, setWidths] = useState<string[]>([]);
23
+ const [positions, setPositions] = useState<string[]>([]);
24
24
 
25
- useEffect(() =>
26
- {
27
- const widths = props.data?.map((data) =>
28
- {
29
- const minutes = calculateMinutesBetween(data.start_time, data.end_time);
30
- return convertToPercentage(minutes);
31
- });
32
- const positions = props.data?.map((data) =>
33
- {
34
- const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
35
- return convertToPercentage(minutes);
36
- });
37
- setWidths(widths);
38
- setPositions(positions);
39
- }, [props.data]);
25
+ useEffect(() =>
26
+ {
27
+ const widths = props.data?.map((data) =>
28
+ {
29
+ const minutes = calculateMinutesBetween(data.start_time, data.end_time);
30
+ return convertToPercentage(minutes);
31
+ });
32
+ const positions = props.data?.map((data) =>
33
+ {
34
+ const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
35
+ return convertToPercentage(minutes);
36
+ });
37
+ setWidths(widths);
38
+ setPositions(positions);
39
+ }, [props.data]);
40
40
 
41
- const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
42
- {
43
- const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
44
- const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
45
- return difference_in_minutes;
46
- };
41
+ const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
42
+ {
43
+ const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
44
+ const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
45
+ return difference_in_minutes;
46
+ };
47
47
 
48
- const convertToPercentage = (minute: number): string =>
49
- {
50
- const width = ((minute * 100) / 1440).toString();
51
- return `${width}%`;
52
- };
48
+ const convertToPercentage = (minute: number): string =>
49
+ {
50
+ const width = ((minute * 100) / 1440).toString();
51
+ return `${width}%`;
52
+ };
53
53
 
54
- return (
55
- <div className="container-fluid d-flex justify-content-center direction-ltr">
56
- <h5 className={Styles.ns_time_line_title}>{props.title}</h5>
57
-
58
- <div className="col-12 col-sm-11 px-0">
59
- <div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
60
- <div>
61
- {
62
- props.data?.map((data, index) =>
63
- <span
64
- key={index}
65
- className={Styles.ns_range_time_line}
66
- style={{
67
- background: Color.getColor(data?.percentage),
68
- width: Widths[index] || '0%',
69
- left: positions[index] || '%0'
70
- }}>
71
- </span>
72
- )
73
- }
74
- </div>
75
- {[...Array(24).keys()].map(hour => (
76
- <div key={hour} className={Styles.ns_range_time_item}>
77
- <span>{hour.toString().padStart(2, '0')}:00</span>
78
- </div>
79
- ))}
80
- </div>
81
- </div>
82
- </div>
83
- );
54
+ return (
55
+ <div className={`${Styles.ns_range_parent} ${props.classList?.join(" ")}`} style={props.style}>
56
+ <h5 className={Styles.ns_time_line_title}>{props.title}</h5>
57
+ <div className="col-12 px-0">
58
+ <div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
59
+ <div>
60
+ {
61
+ props.data?.map((data, index) =>
62
+ <span
63
+ key={index}
64
+ className={Styles.ns_range_time_line}
65
+ style={{
66
+ background: Color.getColor(data?.percentage),
67
+ width: Widths[index] || '0%',
68
+ left: positions[index] || '%0'
69
+ }}>
70
+ </span>
71
+ )
72
+ }
73
+ </div>
74
+ {[...Array(24).keys()].map(hour => (
75
+ <div key={hour} className={Styles.ns_range_time_item}>
76
+ <span>{hour.toString().padStart(2, '0')}:00</span>
77
+ </div>
78
+ ))}
79
+ </div>
80
+ </div>
81
+ </div>
82
+ );
84
83
  }
package/src/components/NSTimeTable.module.css CHANGED
@@ -1,3 +1,7 @@
1
1
  .custom_row th:nth-child(1) {
2
- box-shadow: 4px 0px 4px 0px #00000040;
2
+ box-shadow: 4px 0px 4px 0px #00000040;
3
+ }
4
+
5
+ .ns_timetable_parent {
6
+ max-width: 1150px;
3
7
  }
package/src/components/NSTimeTable.tsx CHANGED
@@ -33,16 +33,18 @@ export function NSTimeTable(props: NSTimeTableProps)
33
33
  }
34
34
  }
35
35
  }}>
36
- <Table
37
- columns={props.columns}
38
- dataSource={props.rows}
39
- bordered={false}
40
- rowClassName={Styles.custom_row}
41
- rowHoverable={false}
42
- scroll={{
43
- x: true
44
- }}
45
- />
36
+ <div className={`${Styles.ns_timetable_parent} ${props.classList?.join(" ")}`} style={props.style}>
37
+ <Table
38
+ columns={props.columns}
39
+ dataSource={props.rows}
40
+ bordered={false}
41
+ rowClassName={Styles.custom_row}
42
+ rowHoverable={false}
43
+ scroll={{
44
+ x: true
45
+ }}
46
+ />
47
+ </div>
46
48
  </ConfigProvider>
47
49
  )
48
50
  };
package/src/components/NSTimelineMonthly.module.css CHANGED
@@ -1,56 +1,72 @@
1
1
  .ns_time_line_monthly_card {
2
- width: 72px;
3
- border-radius: 4px;
4
- background-color: #fff;
5
- overflow: hidden;
6
- text-align: center;
7
- display: flex;
8
- flex-direction: column;
9
- gap: 5px;
10
- box-shadow: 1px 0px 3px 1px #b2b2b2;
2
+ width: 72px;
3
+ border-radius: 4px;
4
+ background-color: #fff;
5
+ overflow: hidden;
6
+ text-align: center;
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 5px;
10
+ box-shadow: 1px 0px 3px 1px #b2b2b2;
11
11
  }
12
12
 
13
13
  .ns_time_line_monthly_card_week_day {
14
- background-color: #141B5C;
15
- color: #fff;
16
- margin: 0;
17
- text-align: center;
18
- padding: 8px;
19
- /* margin-bottom: 4px; */
14
+ background-color: #141B5C;
15
+ color: #fff;
16
+ margin: 0;
17
+ text-align: center;
18
+ padding: 8px;
19
+ /* margin-bottom: 4px; */
20
20
  }
21
21
 
22
22
  .ns_time_line_cards_hour {
23
- color: #141B5C;
23
+ color: #141B5C;
24
24
  }
25
25
 
26
26
  .ns_time_line_monthly_card_parent_chart {
27
- width: 100%;
28
- height: 30%;
29
- background-color: #E0DFFF;
30
- box-shadow: 1px 1px 2px 1px #6c6a6acc;
27
+ width: 100%;
28
+ height: 30%;
29
+ background-color: #E0DFFF;
30
+ box-shadow: 1px 1px 2px 1px #6c6a6acc;
31
31
  }
32
32
 
33
33
  .ns_time_line_monthly_card_bar {
34
- height: 100%;
35
- /* background-color: #3B9D00; */
36
- color: transparent;
34
+ height: 100%;
35
+ /* background-color: #3B9D00; */
36
+ color: transparent;
37
37
  }
38
38
 
39
39
  .ns_time_line_monthly {
40
- display: flex;
41
- gap: 2px;
42
- flex-direction: row;
43
- width: max-content;
40
+ display: flex;
41
+ gap: 2px;
42
+ flex-direction: row;
43
+ width: max-content;
44
44
  }
45
45
 
46
46
  .ns_parent {
47
- width: 100%;
48
- overflow-x: scroll;
49
- -ms-overflow-style: none;
50
- scrollbar-width: none;
47
+ width: 100%;
48
+ max-width: 1150px;
49
+ overflow-x: scroll;
50
+ flex-direction: column;
51
+ }
52
+
53
+ .ns_parent::-webkit-scrollbar {
54
+ height: 6px;
55
+ }
56
+
57
+ .ns_parent::-webkit-scrollbar-track {
58
+ background-color: #c0c0c0;
59
+ border-radius: 6px;
60
+ }
61
+
62
+ .ns_parent::-webkit-scrollbar-thumb {
63
+ background: #141B5C;
64
+ border-radius: 6px;
51
65
  }
52
66
 
53
67
  .ns_time_line_title {
54
- color: #141B5C;
55
- margin-bottom: 16px;
68
+ color: #141B5C;
69
+ margin-bottom: 16px;
70
+ position: sticky;
71
+ left: 0;
56
72
  }
package/src/components/NSTimelineMonthly.tsx CHANGED
@@ -3,41 +3,41 @@ import { IBaseComponentProps } from "../props/IBaseComponentProps";
3
3
  import { Color } from "../Color"
4
4
  export interface NSdata
5
5
  {
6
- title: string;
7
- value: number;
8
- percentage: number;
6
+ title: string;
7
+ value: number;
8
+ percentage: number;
9
9
  }
10
10
  export interface INSNSTimelineMonthlyProps extends IBaseComponentProps
11
11
  {
12
- data: NSdata[];
13
- title?: string;
12
+ data: NSdata[];
13
+ title?: string;
14
14
  }
15
15
 
16
16
  export function NSTimelineMonthly(props: INSNSTimelineMonthlyProps)
17
17
  {
18
- function getPercentage(value: number): string
19
- {
20
- let percentage = (value * 100) / 24;
21
- return percentage.toString() + "%";
22
- }
23
- return (
24
- <>
25
- <div className={`container-fluid d-flex justify-content-center ${Styles.ns_parent}`}>
26
- <h5 className={Styles.ns_time_line_title}>{props.title}</h5>
27
- <div className={Styles.ns_time_line_monthly}>
28
- {
29
- props.data.map((card, index) => (
30
- <div className={Styles.ns_time_line_monthly_card} key={index}>
31
- <h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
32
- <span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
33
- <div className={Styles.ns_time_line_monthly_card_parent_chart}>
34
- <div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage) }}>bar</div>
35
- </div>
36
- </div>
37
- ))
38
- }
39
- </div>
40
- </div>
41
- </>
42
- );
18
+ function getPercentage(value: number): string
19
+ {
20
+ let percentage = (value * 100) / 24;
21
+ return percentage.toString() + "%";
22
+ }
23
+ return (
24
+ <>
25
+ <div className={`${Styles.ns_parent} ${props.classList?.join(" ")} `} style={props.style}>
26
+ <h5 className={Styles.ns_time_line_title}>{props.title}</h5>
27
+ <div className={Styles.ns_time_line_monthly}>
28
+ {
29
+ props.data.map((card, index) => (
30
+ <div className={Styles.ns_time_line_monthly_card} key={index}>
31
+ <h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
32
+ <span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
33
+ <div className={Styles.ns_time_line_monthly_card_parent_chart}>
34
+ <div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage) }}>bar</div>
35
+ </div>
36
+ </div>
37
+ ))
38
+ }
39
+ </div>
40
+ </div>
41
+ </>
42
+ );
43
43
  }