namirasoft-site-react 1.4.449 → 1.4.450
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/dist/App.js +2 -2
- package/dist/App.js.map +1 -1
- package/dist/components/NSBoxBooleans.d.ts +2 -0
- package/dist/components/NSBoxBooleans.js +1 -1
- package/dist/components/NSBoxBooleans.js.map +1 -1
- package/dist/components/NSDialog.module.css +3 -3
- package/dist/components/NSGaugeDate.d.ts +2 -0
- package/dist/components/NSGaugeDate.js +12 -3
- package/dist/components/NSGaugeDate.js.map +1 -1
- package/dist/components/NSGaugeDate.module.css +5 -1
- package/dist/components/NSGaugeNumber.d.ts +2 -0
- package/dist/components/NSGaugeNumber.js +14 -4
- package/dist/components/NSGaugeNumber.js.map +1 -1
- package/dist/components/NSGaugeNumber.module.css +4 -0
- package/dist/components/NSNoData.module.css +2 -0
- package/package.json +2 -2
- package/src/App.tsx +15 -16
- package/src/components/NSBoxBooleans.tsx +4 -1
- package/src/components/NSDialog.module.css +3 -3
- package/src/components/NSGaugeDate.module.css +5 -1
- package/src/components/NSGaugeDate.tsx +40 -13
- package/src/components/NSGaugeNumber.module.css +4 -0
- package/src/components/NSGaugeNumber.tsx +42 -8
- package/src/components/NSNoData.module.css +2 -0
package/dist/App.js
CHANGED
|
@@ -3,7 +3,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
3
3
|
import { Component } from 'react';
|
|
4
4
|
import './App.css';
|
|
5
5
|
import { NSLayout } from './components/NSLayout';
|
|
6
|
-
import {
|
|
6
|
+
import { NSGaugeDate, NSGaugeNumber, NSRow, NSSection } from './main';
|
|
7
7
|
export class App extends Component {
|
|
8
8
|
constructor(props) {
|
|
9
9
|
super(props);
|
|
@@ -24,7 +24,7 @@ export class App extends Component {
|
|
|
24
24
|
}
|
|
25
25
|
],
|
|
26
26
|
}
|
|
27
|
-
}, isLoggedIn: () => true, logo: 'https://static.namirasoft.com/image/namirasoft/access/logo/base.png', background: { image: "https://static.namirasoft.com/image/namirasoft/access/background/base.svg" }, notifications: [], notifier: {}, scope: '', children: _jsx(NSSection, { style: { paddingTop: "3rem" }, children: _jsxs(
|
|
27
|
+
}, isLoggedIn: () => true, logo: 'https://static.namirasoft.com/image/namirasoft/access/logo/base.png', background: { image: "https://static.namirasoft.com/image/namirasoft/access/background/base.svg" }, notifications: [], notifier: {}, scope: '', children: _jsx(NSSection, { style: { paddingTop: "3rem" }, children: _jsxs(NSRow, { style: { alignItems: "stretch" }, children: [_jsx(NSGaugeDate, { title: 'Date Gauge', from: new Date(Date.now() - 5 * 60000), to: new Date(Date.now() + 5 * 60000), colors: { low: "green", medium: "yellow", high: "red" }, noData: true }), _jsx(NSGaugeNumber, { title: 'Number Gauge', current: 13, total: 100, colors: { low: "green", medium: "yellow", high: "red" }, loading: true })] }) }) }));
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
//# sourceMappingURL=App.js.map
|
package/dist/App.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,WAAW,CAAC;AACnB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,WAAW,CAAC;AACnB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAQtE,MAAM,OAAO,GAAI,SAAQ,SAA6B;IAErD,YAAY,KAAe;QAE1B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;IAC5B,CAAC;IAEQ,kBAAkB;QAE1B,MAAM,GAAG,GAAW,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACtC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClB,CAAC;IAEQ,MAAM;QAEd,OAAO,CACN,KAAC,QAAQ,IACR,MAAM,EAAE;gBACP,KAAK,EAAE;oBACN,KAAK,EAAE;wBACN;4BACC,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC;4BACpB,GAAG,EAAE,qEAAqE;4BAC1E,KAAK,EAAE,CAAC;yBACR;qBACD;iBACD;aACD,EACD,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,EACtB,IAAI,EAAC,qEAAqE,EAC1E,UAAU,EAAE,EAAE,KAAK,EAAE,2EAA2E,EAAE,EAClG,aAAa,EAAE,EAAE,EACjB,QAAQ,EAAE,EAAS,EACnB,KAAK,EAAC,EAAE,YAER,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,YACvC,MAAC,KAAK,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,aACtC,KAAC,WAAW,IACX,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,KAAM,CAAC,EACvC,EAAE,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,KAAM,CAAC,EACrC,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,EACvD,MAAM,SACL,EACF,KAAC,aAAa,IACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,EAAE,EACX,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,EACvD,OAAO,SACN,IACK,GACG,GACF,CACX,CAAC;IACH,CAAC;CACD"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
3
|
+
import { NSInfoProps } from "./NSInfo";
|
|
3
4
|
export interface NSBoxBooleansProps extends IBaseComponentProps {
|
|
4
5
|
items: {
|
|
5
6
|
value: string;
|
|
6
7
|
text: string;
|
|
8
|
+
info?: NSInfoProps;
|
|
7
9
|
}[];
|
|
8
10
|
reverse?: boolean;
|
|
9
11
|
onChanged?: (e: NSBoxBooleans, callback?: () => void) => void;
|
|
@@ -93,7 +93,7 @@ export class NSBoxBooleans extends React.Component {
|
|
|
93
93
|
var _a, _b, _c, _d, _e, _f;
|
|
94
94
|
return (_jsxs(_Fragment, { children: [_jsx(NSBoxBoolean, { id: (_a = this.props.box_all) === null || _a === void 0 ? void 0 : _a.id, classList: (_b = this.props.box_all) === null || _b === void 0 ? void 0 : _b.classList, style: Object.assign({ maxWidth: "100%", width: "100%" }, (_c = this.props.box_all) === null || _c === void 0 ? void 0 : _c.style), label: (_d = this.props.box_all) === null || _d === void 0 ? void 0 : _d.label, input: (_e = this.props.box_all) === null || _e === void 0 ? void 0 : _e.input, title: "All", required: false, hideHeader: (_f = this.props.box_all) === null || _f === void 0 ? void 0 : _f.hideHeader, checked: this.getMarkAllValue(), onChanged: this.onMarkAllChecked }), this.props.items.map((e, index) => {
|
|
95
95
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
96
|
-
return _jsx(NSBoxBoolean, { id: e.value, classList: (_a = this.props.boxes) === null || _a === void 0 ? void 0 : _a.classList, style: Object.assign({ width: NSBox.width.one }, (_b = this.props.boxes) === null || _b === void 0 ? void 0 : _b.style), label: (_c = this.props.boxes) === null || _c === void 0 ? void 0 : _c.label, input: (_d = this.props.boxes) === null || _d === void 0 ? void 0 : _d.input, title: e.text, required: true, hideHeader: (_e = this.props.boxes) === null || _e === void 0 ? void 0 : _e.hideHeader, checked: this.state.values.includes(e.value), defaultValue: (_g = (_f = this.props.boxes) === null || _f === void 0 ? void 0 : _f.defaultValue) === null || _g === void 0 ? void 0 : _g.includes(e.value), onChanged: this.onItemChecked }, `NSBoxBooleans_NSBoxBoolean_key_${index}`);
|
|
96
|
+
return _jsx(NSBoxBoolean, { id: e.value, classList: (_a = this.props.boxes) === null || _a === void 0 ? void 0 : _a.classList, style: Object.assign({ width: NSBox.width.one }, (_b = this.props.boxes) === null || _b === void 0 ? void 0 : _b.style), label: (_c = this.props.boxes) === null || _c === void 0 ? void 0 : _c.label, input: (_d = this.props.boxes) === null || _d === void 0 ? void 0 : _d.input, title: e.text, required: true, hideHeader: (_e = this.props.boxes) === null || _e === void 0 ? void 0 : _e.hideHeader, checked: this.state.values.includes(e.value), defaultValue: (_g = (_f = this.props.boxes) === null || _f === void 0 ? void 0 : _f.defaultValue) === null || _g === void 0 ? void 0 : _g.includes(e.value), onChanged: this.onItemChecked, info: e.info }, `NSBoxBooleans_NSBoxBoolean_key_${index}`);
|
|
97
97
|
})] }));
|
|
98
98
|
}
|
|
99
99
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSBoxBooleans.js","sourceRoot":"","sources":["../../src/components/NSBoxBooleans.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"NSBoxBooleans.js","sourceRoot":"","sources":["../../src/components/NSBoxBooleans.tsx"],"names":[],"mappings":"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"}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
min-width: 350px;
|
|
40
40
|
min-height: 50px;
|
|
41
41
|
max-width: 90vw;
|
|
42
|
-
max-height: calc(
|
|
42
|
+
max-height: calc(100dvh - 6.125rem);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.ns_dialog_content {
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
min-width: 350px;
|
|
51
51
|
min-height: 50px;
|
|
52
52
|
max-width: 90vw;
|
|
53
|
-
max-height: calc(
|
|
53
|
+
max-height: calc(100dvh - 6.125rem);
|
|
54
54
|
width: 100%;
|
|
55
55
|
height: 100%;
|
|
56
56
|
overflow-y: auto;
|
|
@@ -101,6 +101,6 @@
|
|
|
101
101
|
|
|
102
102
|
.ns_dialog_parent,
|
|
103
103
|
.ns_dialog_content {
|
|
104
|
-
max-height: calc(
|
|
104
|
+
max-height: calc(100dvh - 4rem);
|
|
105
105
|
}
|
|
106
106
|
}
|
|
@@ -9,5 +9,7 @@ export interface NSGaugeDateProps extends IBaseComponentProps {
|
|
|
9
9
|
to: Date;
|
|
10
10
|
colors: NSGaugeColorProps;
|
|
11
11
|
link?: ILinkProps;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
noData?: boolean | string;
|
|
12
14
|
}
|
|
13
15
|
export declare function NSGaugeDate(props: NSGaugeDateProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { URLOperation } from "namirasoft-core";
|
|
3
3
|
import { useEffect, useState } from "react";
|
|
4
|
-
import { NSDownTimer, NSPanel, NSSpace, NSSpaceSizeType } from "../main";
|
|
4
|
+
import { NSDownTimer, NSLoading, NSNoData, NSPanel, NSSpace, NSSpaceSizeType } from "../main";
|
|
5
5
|
import { NSGauge } from "./NSGauge";
|
|
6
6
|
import Styles from "./NSGaugeDate.module.css";
|
|
7
7
|
const getFormattedDate = (date) => {
|
|
@@ -21,9 +21,18 @@ export function NSGaugeDate(props) {
|
|
|
21
21
|
};
|
|
22
22
|
}, [props.to]);
|
|
23
23
|
let total = props.to.getTime() - props.from.getTime();
|
|
24
|
+
let render_gauge_body = () => {
|
|
25
|
+
if (props.loading) {
|
|
26
|
+
return _jsx(NSLoading, { hideTitle: true, style: { margin: "auto 0", padding: 0 } });
|
|
27
|
+
}
|
|
28
|
+
if (props.noData) {
|
|
29
|
+
return (_jsx(NSNoData, { lable: props.noData !== true ? props.noData : "No Data", style: { marginTop: "1.5rem" } }));
|
|
30
|
+
}
|
|
31
|
+
return (_jsxs(_Fragment, { children: [_jsx(NSGauge, { total: total, current: state.current, showPercent: false, colors: props.colors }), _jsxs("div", { className: Styles.ns_gauge_dates, children: [_jsx("span", { children: getFormattedDate(props.from) }), _jsx("span", { children: getFormattedDate(props.to) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI }), _jsx(NSDownTimer, { text: "Remained", date: props.to })] }));
|
|
32
|
+
};
|
|
24
33
|
let content = (_jsxs(NSPanel, { classList: [Styles.ns_gauge_wrapper], children: [_jsxs("div", { className: Styles.ns_gauge_header, children: [props.icon &&
|
|
25
34
|
_jsx("img", { width: "40", height: "40", src: props.icon, alt: "gauge logo" }), _jsxs("div", { className: Styles.ns_gauge_header_titles, children: [props.headline &&
|
|
26
|
-
_jsx("span", { style: { lineHeight: "1rem" }, children: props.headline }), _jsx("span", { className: Styles.title, children: props.title })] })] }),
|
|
35
|
+
_jsx("span", { style: { lineHeight: "1rem" }, children: props.headline }), _jsx("span", { className: Styles.title, children: props.title })] })] }), _jsx("div", { className: Styles.ns_gauge_body, children: render_gauge_body() })] }));
|
|
27
36
|
if (props.link && !URLOperation.isEqual(props.link.href, window.location.href)) {
|
|
28
37
|
content = (_jsx("a", { href: props.link.href, target: props.link.target, rel: "noreferrer", className: Styles.ns_gauge_link, children: content }));
|
|
29
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSGaugeDate.js","sourceRoot":"","sources":["../../src/components/NSGaugeDate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAuB,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"NSGaugeDate.js","sourceRoot":"","sources":["../../src/components/NSGaugeDate.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,8 @@ export interface NSGaugeNumberProps extends IBaseComponentProps {
|
|
|
10
10
|
colors: NSGaugeColorProps;
|
|
11
11
|
description?: string;
|
|
12
12
|
link?: ILinkProps;
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
noData?: boolean | string;
|
|
13
15
|
formatter?: (value: number) => string;
|
|
14
16
|
}
|
|
15
17
|
export declare function NSGaugeNumber(props: NSGaugeNumberProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,22 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { URLOperation } from "namirasoft-core";
|
|
3
|
-
import { NSPanel } from "../main";
|
|
3
|
+
import { NSLoading, NSNoData, NSPanel } from "../main";
|
|
4
4
|
import { NSGauge } from "./NSGauge";
|
|
5
5
|
import Styles from "./NSGaugeNumber.module.css";
|
|
6
6
|
export function NSGaugeNumber(props) {
|
|
7
|
-
var _a
|
|
7
|
+
var _a;
|
|
8
8
|
let formatter = (_a = props === null || props === void 0 ? void 0 : props.formatter) !== null && _a !== void 0 ? _a : (value => value + "");
|
|
9
|
-
let
|
|
9
|
+
let render_gauge_body = () => {
|
|
10
|
+
var _a;
|
|
11
|
+
if (props.loading) {
|
|
12
|
+
return _jsx(NSLoading, { hideTitle: true, style: { margin: "auto 0", padding: 0 } });
|
|
13
|
+
}
|
|
14
|
+
if (props.noData) {
|
|
15
|
+
return (_jsx(NSNoData, { lable: props.noData !== true ? props.noData : "No Data", style: { marginTop: "1.5rem" } }));
|
|
16
|
+
}
|
|
17
|
+
return (_jsxs(_Fragment, { children: [_jsx(NSGauge, { total: props.total, current: props.current, showPercent: true, colors: props.colors }), _jsxs("div", { className: Styles.ns_title_wrapper, children: [_jsx("span", { className: Styles.title, children: formatter(props.current) }), _jsx("span", { className: Styles.subtitle, children: `Out of ${formatter(props.total)} ${(_a = props.description) !== null && _a !== void 0 ? _a : ""}`.trim() })] })] }));
|
|
18
|
+
};
|
|
19
|
+
let content = (_jsxs(NSPanel, { classList: [Styles.ns_gauge_wrapper], children: [_jsxs("div", { className: Styles.ns_gauge_header, children: [props.icon && _jsx("img", { width: "40", height: "40", src: props.icon, alt: "gauge logo" }), _jsxs("div", { className: Styles.ns_gauge_header_titles, children: [props.headline && _jsx("span", { style: { lineHeight: "1rem" }, children: props.headline }), _jsx("span", { className: Styles.title, children: props.title })] })] }), _jsx("div", { className: Styles.ns_gauge_body, children: render_gauge_body() })] }));
|
|
10
20
|
if (props.link && !URLOperation.isEqual(props.link.href, window.location.href)) {
|
|
11
21
|
content = (_jsx("a", { href: props.link.href, target: props.link.target, rel: "noreferrer", className: Styles.ns_gauge_link, children: content }));
|
|
12
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSGaugeNumber.js","sourceRoot":"","sources":["../../src/components/NSGaugeNumber.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAuB,OAAO,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"NSGaugeNumber.js","sourceRoot":"","sources":["../../src/components/NSGaugeNumber.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"framework": "npm",
|
|
9
9
|
"application": "package",
|
|
10
10
|
"private": false,
|
|
11
|
-
"version": "1.4.
|
|
11
|
+
"version": "1.4.450",
|
|
12
12
|
"author": "Amir Abolhasani",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"main": "./dist/main.js",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"namirasoft-api-product": "^1.4.40",
|
|
39
39
|
"namirasoft-core": "^1.4.87",
|
|
40
40
|
"namirasoft-schema": "^1.4.25",
|
|
41
|
-
"namirasoft-site": "^1.4.
|
|
41
|
+
"namirasoft-site": "^1.4.40",
|
|
42
42
|
"namirasoft-site-map": "^1.4.33",
|
|
43
43
|
"os-browserify": "^0.3.0",
|
|
44
44
|
"path-browserify": "^1.0.1",
|
package/src/App.tsx
CHANGED
|
@@ -2,7 +2,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
2
2
|
import { Component, ReactNode } from 'react';
|
|
3
3
|
import './App.css';
|
|
4
4
|
import { NSLayout } from './components/NSLayout';
|
|
5
|
-
import {
|
|
5
|
+
import { NSGaugeDate, NSGaugeNumber, NSRow, NSSection } from './main';
|
|
6
6
|
|
|
7
7
|
interface AppProps { }
|
|
8
8
|
interface AppState
|
|
@@ -47,23 +47,22 @@ export class App extends Component<AppProps, AppState>
|
|
|
47
47
|
scope=''
|
|
48
48
|
>
|
|
49
49
|
<NSSection style={{ paddingTop: "3rem" }}>
|
|
50
|
-
<
|
|
51
|
-
<
|
|
52
|
-
title='
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
<NSRow style={{ alignItems: "stretch" }}>
|
|
51
|
+
<NSGaugeDate
|
|
52
|
+
title='Date Gauge'
|
|
53
|
+
from={new Date(Date.now() - 5 * 60_000)}
|
|
54
|
+
to={new Date(Date.now() + 5 * 60_000)}
|
|
55
|
+
colors={{ low: "green", medium: "yellow", high: "red" }}
|
|
56
|
+
noData
|
|
55
57
|
/>
|
|
56
|
-
<
|
|
57
|
-
title='
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
<NSGaugeNumber
|
|
59
|
+
title='Number Gauge'
|
|
60
|
+
current={13}
|
|
61
|
+
total={100}
|
|
62
|
+
colors={{ low: "green", medium: "yellow", high: "red" }}
|
|
63
|
+
loading
|
|
60
64
|
/>
|
|
61
|
-
|
|
62
|
-
title='Money'
|
|
63
|
-
required={false}
|
|
64
|
-
onChanged={(box) => this.setState({ amount: box.getValue() ?? 0 })}
|
|
65
|
-
/>
|
|
66
|
-
</NSColumn>
|
|
65
|
+
</NSRow>
|
|
67
66
|
</NSSection>
|
|
68
67
|
</NSLayout>
|
|
69
68
|
);
|
|
@@ -2,12 +2,14 @@ import React from "react";
|
|
|
2
2
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
3
3
|
import { NSBoxBoolean } from "./NSBoxBoolean";
|
|
4
4
|
import { NSBox } from "./NSBox";
|
|
5
|
+
import { NSInfoProps } from "./NSInfo";
|
|
5
6
|
|
|
6
7
|
export interface NSBoxBooleansProps extends IBaseComponentProps
|
|
7
8
|
{
|
|
8
9
|
items: {
|
|
9
10
|
value: string,
|
|
10
|
-
text: string
|
|
11
|
+
text: string,
|
|
12
|
+
info?: NSInfoProps
|
|
11
13
|
}[];
|
|
12
14
|
reverse?: boolean;
|
|
13
15
|
onChanged?: (e: NSBoxBooleans, callback?: () => void) => void;
|
|
@@ -170,6 +172,7 @@ export class NSBoxBooleans extends React.Component<NSBoxBooleansProps, NSboxBool
|
|
|
170
172
|
checked={this.state.values.includes(e.value)}
|
|
171
173
|
defaultValue={this.props.boxes?.defaultValue?.includes(e.value)}
|
|
172
174
|
onChanged={this.onItemChecked}
|
|
175
|
+
info={e.info}
|
|
173
176
|
/>
|
|
174
177
|
)
|
|
175
178
|
}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
min-width: 350px;
|
|
40
40
|
min-height: 50px;
|
|
41
41
|
max-width: 90vw;
|
|
42
|
-
max-height: calc(
|
|
42
|
+
max-height: calc(100dvh - 6.125rem);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.ns_dialog_content {
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
min-width: 350px;
|
|
51
51
|
min-height: 50px;
|
|
52
52
|
max-width: 90vw;
|
|
53
|
-
max-height: calc(
|
|
53
|
+
max-height: calc(100dvh - 6.125rem);
|
|
54
54
|
width: 100%;
|
|
55
55
|
height: 100%;
|
|
56
56
|
overflow-y: auto;
|
|
@@ -101,6 +101,6 @@
|
|
|
101
101
|
|
|
102
102
|
.ns_dialog_parent,
|
|
103
103
|
.ns_dialog_content {
|
|
104
|
-
max-height: calc(
|
|
104
|
+
max-height: calc(100dvh - 4rem);
|
|
105
105
|
}
|
|
106
106
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { URLOperation } from "namirasoft-core";
|
|
2
2
|
import { useEffect, useState } from "react";
|
|
3
|
-
import { IBaseComponentProps, NSDownTimer, NSPanel, NSSpace, NSSpaceSizeType } from "../main";
|
|
3
|
+
import { IBaseComponentProps, NSDownTimer, NSLoading, NSNoData, NSPanel, NSSpace, NSSpaceSizeType } from "../main";
|
|
4
4
|
import { ILinkProps } from "../props/ILinkProps";
|
|
5
5
|
import { NSGauge, NSGaugeColorProps } from "./NSGauge";
|
|
6
6
|
import Styles from "./NSGaugeDate.module.css";
|
|
@@ -14,6 +14,8 @@ export interface NSGaugeDateProps extends IBaseComponentProps
|
|
|
14
14
|
to: Date;
|
|
15
15
|
colors: NSGaugeColorProps;
|
|
16
16
|
link?: ILinkProps;
|
|
17
|
+
loading?: boolean;
|
|
18
|
+
noData?: boolean | string;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
interface NSGaugeDateState
|
|
@@ -49,6 +51,42 @@ export function NSGaugeDate(props: NSGaugeDateProps)
|
|
|
49
51
|
}, [props.to]);
|
|
50
52
|
|
|
51
53
|
let total = props.to.getTime() - props.from.getTime();
|
|
54
|
+
|
|
55
|
+
let render_gauge_body = () =>
|
|
56
|
+
{
|
|
57
|
+
if (props.loading)
|
|
58
|
+
{
|
|
59
|
+
return <NSLoading hideTitle style={{ margin: "auto 0", padding: 0 }} />;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
if (props.noData)
|
|
63
|
+
{
|
|
64
|
+
return (
|
|
65
|
+
<NSNoData
|
|
66
|
+
lable={props.noData !== true ? props.noData : "No Data"}
|
|
67
|
+
style={{ marginTop: "1.5rem" }}
|
|
68
|
+
/>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<>
|
|
74
|
+
<NSGauge total={total} current={state.current} showPercent={false} colors={props.colors} />
|
|
75
|
+
<div className={Styles.ns_gauge_dates}>
|
|
76
|
+
<span>{getFormattedDate(props.from)}</span>
|
|
77
|
+
<span>{getFormattedDate(props.to)}</span>
|
|
78
|
+
</div>
|
|
79
|
+
<NSSpace
|
|
80
|
+
size={NSSpaceSizeType.MINI}
|
|
81
|
+
/>
|
|
82
|
+
<NSDownTimer
|
|
83
|
+
text="Remained"
|
|
84
|
+
date={props.to}
|
|
85
|
+
/>
|
|
86
|
+
</>
|
|
87
|
+
);
|
|
88
|
+
};
|
|
89
|
+
|
|
52
90
|
let content = (
|
|
53
91
|
<NSPanel classList={[Styles.ns_gauge_wrapper]}>
|
|
54
92
|
<div className={Styles.ns_gauge_header}>
|
|
@@ -65,18 +103,7 @@ export function NSGaugeDate(props: NSGaugeDateProps)
|
|
|
65
103
|
</div>
|
|
66
104
|
</div>
|
|
67
105
|
<div className={Styles.ns_gauge_body}>
|
|
68
|
-
|
|
69
|
-
<div className={Styles.ns_gauge_dates}>
|
|
70
|
-
<span>{getFormattedDate(props.from)}</span>
|
|
71
|
-
<span>{getFormattedDate(props.to)}</span>
|
|
72
|
-
</div>
|
|
73
|
-
<NSSpace
|
|
74
|
-
size={NSSpaceSizeType.MINI}
|
|
75
|
-
/>
|
|
76
|
-
<NSDownTimer
|
|
77
|
-
text="Remained"
|
|
78
|
-
date={props.to}
|
|
79
|
-
/>
|
|
106
|
+
{render_gauge_body()}
|
|
80
107
|
</div>
|
|
81
108
|
</NSPanel>
|
|
82
109
|
);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { URLOperation } from "namirasoft-core";
|
|
2
|
-
import { IBaseComponentProps, NSPanel } from "../main";
|
|
2
|
+
import { IBaseComponentProps, NSLoading, NSNoData, NSPanel } from "../main";
|
|
3
3
|
import { ILinkProps } from "../props/ILinkProps";
|
|
4
4
|
import { NSGauge, NSGaugeColorProps } from "./NSGauge";
|
|
5
5
|
import Styles from "./NSGaugeNumber.module.css";
|
|
@@ -14,6 +14,8 @@ export interface NSGaugeNumberProps extends IBaseComponentProps
|
|
|
14
14
|
colors: NSGaugeColorProps;
|
|
15
15
|
description?: string;
|
|
16
16
|
link?: ILinkProps;
|
|
17
|
+
loading?: boolean;
|
|
18
|
+
noData?: boolean | string;
|
|
17
19
|
formatter?: (value: number) => string;
|
|
18
20
|
}
|
|
19
21
|
|
|
@@ -21,7 +23,42 @@ export function NSGaugeNumber(props: NSGaugeNumberProps)
|
|
|
21
23
|
{
|
|
22
24
|
let formatter = props?.formatter ?? (value => value + "");
|
|
23
25
|
|
|
24
|
-
let
|
|
26
|
+
let render_gauge_body = () =>
|
|
27
|
+
{
|
|
28
|
+
if (props.loading)
|
|
29
|
+
{
|
|
30
|
+
return <NSLoading hideTitle style={{ margin: "auto 0", padding: 0 }} />;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (props.noData)
|
|
34
|
+
{
|
|
35
|
+
return (
|
|
36
|
+
<NSNoData
|
|
37
|
+
lable={props.noData !== true ? props.noData : "No Data"}
|
|
38
|
+
style={{ marginTop: "1.5rem" }}
|
|
39
|
+
/>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<>
|
|
45
|
+
<NSGauge
|
|
46
|
+
total={props.total}
|
|
47
|
+
current={props.current}
|
|
48
|
+
showPercent
|
|
49
|
+
colors={props.colors}
|
|
50
|
+
/>
|
|
51
|
+
<div className={Styles.ns_title_wrapper}>
|
|
52
|
+
<span className={Styles.title}>{formatter(props.current)}</span>
|
|
53
|
+
<span className={Styles.subtitle}>
|
|
54
|
+
{`Out of ${formatter(props.total)} ${props.description ?? ""}`.trim()}
|
|
55
|
+
</span>
|
|
56
|
+
</div>
|
|
57
|
+
</>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
let content = (
|
|
25
62
|
<NSPanel classList={[Styles.ns_gauge_wrapper]}>
|
|
26
63
|
<div className={Styles.ns_gauge_header}>
|
|
27
64
|
{props.icon && <img width="40" height="40" src={props.icon} alt="gauge logo" />}
|
|
@@ -31,13 +68,10 @@ export function NSGaugeNumber(props: NSGaugeNumberProps)
|
|
|
31
68
|
</div>
|
|
32
69
|
</div>
|
|
33
70
|
<div className={Styles.ns_gauge_body}>
|
|
34
|
-
|
|
35
|
-
<div className={Styles.ns_title_wrapper}>
|
|
36
|
-
<span className={Styles.title}>{formatter(props.current)}</span>
|
|
37
|
-
<span className={Styles.subtitle}>{(`Out of ${formatter(props.total)} ` + (props.description ?? "")).trim()}</span>
|
|
38
|
-
</div>
|
|
71
|
+
{render_gauge_body()}
|
|
39
72
|
</div>
|
|
40
|
-
</NSPanel
|
|
73
|
+
</NSPanel>
|
|
74
|
+
);
|
|
41
75
|
|
|
42
76
|
if (props.link && !URLOperation.isEqual(props.link.href, window.location.href))
|
|
43
77
|
{
|