namirasoft-site-react 1.4.424 → 1.4.427

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 (30) hide show
  1. package/dist/App.js +10 -2
  2. package/dist/App.js.map +1 -1
  3. package/dist/components/NSChartColumn.d.ts +6 -1
  4. package/dist/components/NSChartColumn.js +35 -21
  5. package/dist/components/NSChartColumn.js.map +1 -1
  6. package/dist/components/NSGauge.d.ts +12 -0
  7. package/dist/components/NSGauge.js +13 -0
  8. package/dist/components/NSGauge.js.map +1 -0
  9. package/dist/components/NSGauge.module.css +68 -0
  10. package/dist/components/NSGaugeDate.d.ts +9 -0
  11. package/dist/components/NSGaugeDate.js +25 -0
  12. package/dist/components/NSGaugeDate.js.map +1 -0
  13. package/dist/components/NSGaugeDate.module.css +28 -0
  14. package/dist/components/NSGaugeNumber.d.ts +10 -0
  15. package/dist/components/NSGaugeNumber.js +10 -0
  16. package/dist/components/NSGaugeNumber.js.map +1 -0
  17. package/dist/components/NSGaugeNumber.module.css +34 -0
  18. package/dist/main.d.ts +3 -0
  19. package/dist/main.js +3 -0
  20. package/dist/main.js.map +1 -1
  21. package/package.json +6 -6
  22. package/src/App.tsx +22 -1
  23. package/src/components/NSChartColumn.tsx +44 -24
  24. package/src/components/NSGauge.module.css +68 -0
  25. package/src/components/NSGauge.tsx +53 -0
  26. package/src/components/NSGaugeDate.module.css +28 -0
  27. package/src/components/NSGaugeDate.tsx +67 -0
  28. package/src/components/NSGaugeNumber.module.css +34 -0
  29. package/src/components/NSGaugeNumber.tsx +31 -0
  30. package/src/main.ts +5 -0
package/dist/App.js CHANGED
@@ -13,7 +13,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
13
13
  import { NSPanel } from './components/NSPanel';
14
14
  import { NSSection } from './components/NSSection';
15
15
  import { NSLayout } from './components/NSLayout';
16
- import { MoneyFormatter, NSBoxDynamic, NSBoxEntity, NSBoxString, NSButtonBlue, NSColumn, NSDialog, NSFilterBox, NSLine, NSTable, NSImplementing, NSTabPage } from './main';
16
+ import { MoneyFormatter, NSBoxDynamic, NSBoxEntity, NSBoxString, NSButtonBlue, NSColumn, NSDialog, NSFilterBox, NSLine, NSTable, NSImplementing, NSTabPage, NSGaugeDate, NSGaugeNumber } from './main';
17
17
  import { FilterItemColumnType } from 'namirasoft-core';
18
18
  import { NSRepeaterNSTag } from './components/NSRepeaterNSTag';
19
19
  import { BaseVariableSchema, StringSchema } from 'namirasoft-schema';
@@ -72,7 +72,15 @@ export function App() {
72
72
  text: "test"
73
73
  }
74
74
  }
75
- ] }), _jsx(NSLine, {}), _jsx(NSLineText, { title: 'OR' }), _jsx(NSTable, { checkbox: true, columns: [
75
+ ] }), _jsx(NSGaugeDate, { title: 'XXX', from: new Date("2025/06/28"), to: new Date("2025/08/02"), colors: {
76
+ low: "green",
77
+ medium: "yellow",
78
+ high: "red"
79
+ } }), _jsx(NSGaugeNumber, { title: 'XXX', current: 10, total: 100, colors: {
80
+ low: "green",
81
+ medium: "yellow",
82
+ high: "red"
83
+ }, formatter: (value) => `${value} MB` }), _jsx(NSLine, {}), _jsx(NSLineText, { title: 'OR' }), _jsx(NSTable, { checkbox: true, columns: [
76
84
  {
77
85
  index: 0,
78
86
  name: "id",
package/dist/App.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACvM,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,UAAU,GAAG;IAElB,IAAI,EAAE,GAAG,CAAC;QACT,OAAO,KAAC,cAAc,IACrB,IAAI,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,GAC3B,CAAA;IACH,OAAO,CACN,4BACC,MAAC,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,EACR,MAAM,EAAE;gBACP;oBACC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI;oBACrB,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,6HAA6H,EAAE;iBACjL;gBACD;oBACC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI;oBACrB,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,8BAA8B,EAAE;iBACvE;aACD,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,iBAAiB,EAAE,EACtE,MAAM,EAAE;gBACP,KAAK,EAAE,oBAAoB;gBAC3B,WAAW,EAAE,QAAQ;gBACrB,KAAK,EACL;oBACC,GAAG,EAAE,CAAC;4BACL,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;4BACpB,OAAO,EAAE;gCACR,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;gCACjB,WAAW,EAAE,KAAK;6BAClB;4BACD,SAAS,EAAE,MAAM;4BACjB,EAAE,EAAE,MAAM;yBACV,CAAC;oBACF,GAAG,EAAE,CAAC;4BACL,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;4BACpB,OAAO,EAAE;gCACR,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;gCACjB,WAAW,EAAE,KAAK;6BAClB;4BACD,SAAS,EAAE,MAAM;4BACjB,EAAE,EAAE,MAAM;yBACV,CAAC;iBACF;aACD,aAED,KAAC,SAAS,IACT,IAAI,EAAE;wBACL;4BACC,OAAO,EAAE,IAAI;4BACb,UAAU,EAAE,GAAG,EAAE,CAAC,mBAAK;4BACvB,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE;gCACL,IAAI,EAAE,MAAM;6BACZ;yBACD;qBACD,GACA,EACF,KAAC,WAAW,IACX,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,EAC5B,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,EAC1B,MAAM,EAAE;wBACP,GAAG,EAAE,OAAO;wBACZ,MAAM,EAAE,QAAQ;wBAChB,IAAI,EAAE,KAAK;qBACX,GACA,EACF,KAAC,aAAa,IACb,KAAK,EAAC,KAAK,EACX,OAAO,EAAE,EAAE,EACX,KAAK,EAAE,GAAG,EACV,MAAM,EAAE;wBACP,GAAG,EAAE,OAAO;wBACZ,MAAM,EAAE,QAAQ;wBAChB,IAAI,EAAE,KAAK;qBACX,EACD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,KAAK,GAClC,EACF,KAAC,MAAM,KAAG,EACV,KAAC,UAAU,IACV,KAAK,EAAC,IAAI,GACG,EACd,KAAC,OAAO,IACP,QAAQ,QACR,OAAO,EAAE;wBACR;4BACC,KAAK,EAAE,CAAC;4BACR,IAAI,EAAE,IAAI;4BACV,IAAI,EAAE,IAAI;4BACV,KAAK,EAAE;gCACN,IAAI,EAAE,GAAG;gCACT,IAAI,EAAE,GAAG;6BACT;4BACD,SAAS,EAAE,IAAI,cAAc,EAAE;yBAC/B;wBACD;4BACC,KAAK,EAAE,CAAC;4BACR,IAAI,EAAE,MAAM;4BACZ,IAAI,EAAE,MAAM;4BACZ,KAAK,EAAE;gCACN,IAAI,EAAE,GAAG;gCACT,IAAI,EAAE,GAAG;6BACT;4BACD,SAAS,EAAE,IAAI,cAAc,EAAE;yBAC/B;qBACD,EACD,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,EAC9B,OAAO,EAAE,CAAO,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;wBAE9B,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;wBAC7B,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;oBAC/B,CAAC,CAAA,EACD,IAAI,EAAC,MAAM,GACV,EACF,KAAC,WAAW,IACX,IAAI,EAAE,CAAO,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;wBAEnC,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;4BAErB,UAAU,CAAC,GAAG,EAAE;gCAEf,CAAC,CAAC,IAAI,CAAC,CAAC;4BACT,CAAC,EAAE,IAAI,CAAC,CAAC;wBACV,CAAC,CAAC,CAAA;wBACF,IAAI,KAAK,GAAG,GAAG,CAAC;wBAChB,IAAI,IAAI,GAAG,EAAE,CAAC;wBACd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE;4BAC7B,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;wBACpD,IAAI,OAAO;4BACV,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;gCACvB,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACjE,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;wBAEpB,IAAI,IAAI;4BACP,IAAI,IAAI;gCACP,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;wBACpD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;oBACxB,CAAC,CAAA,EAED,UAAU,EAAC,EAAE,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACrB,QAAQ,EAAE,KAAK,EACf,QAAQ,QACR,KAAK,EAAC,MAAM,GACE,EAEd,EAAE,GAAG,CAAC;oBACN,MAAC,QAAQ,IACR,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAClB,aAAa,QACb,WAAW,EAAE;4BACZ,GAAG,EAAE,IAAI;yBACT,aAED,KAAC,YAAY,IACZ,OAAO,EAAE;oCACR,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;iCACjB,EACD,KAAK,EAAC,IAAI,GACK,EAChB,KAAC,YAAY,IACZ,OAAO,EAAE;oCACR,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;iCACjB,EACD,KAAK,EAAC,IAAI,GACK,EAChB,KAAC,YAAY,IACZ,OAAO,EAAE;oCACR,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;iCACjB,EACD,KAAK,EAAC,IAAI,GACK,EAChB,KAAC,YAAY,IACZ,OAAO,EAAE;oCACR,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;iCACjB,EACD,KAAK,EAAC,IAAI,GACK,EAChB,KAAC,YAAY,IACZ,OAAO,EAAE;oCACR,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;iCACjB,EACD,KAAK,EAAC,IAAI,GACK,EAChB,KAAC,YAAY,IACZ,OAAO,EAAE;oCACR,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;iCACjB,EACD,KAAK,EAAC,IAAI,GACK,IACN,EAGZ,KAAC,YAAY,IACZ,OAAO,EAAE;wBACR,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;qBACjB,EACD,KAAK,EAAC,IAAI,GACK,EAChB,KAAC,YAAY,IACZ,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,kBAAkB,CAAC,GAAG,EAAE,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAC7D,KAAK,EAAC,YAAY,GACjB,EACF,MAAC,SAAS,eAET,MAAC,OAAO,eAEP,KAAC,WAAW,IACX,SAAS,EAAE,GAAG,EAAE;wCAEf,OAAO,CAAC;gDACP,IAAI,EAAE,SAAS;gDACf,IAAI,EAAE,SAAS;gDACf,QAAQ,EAAE,IAAI;gDACd,OAAO,EAAE,CAAC;wDACT,EAAE,EAAE,IAAI;wDACR,IAAI,EAAE,IAAI;wDACV,IAAI,EAAE,IAAI;wDACV,IAAI,EAAE,oBAAoB,CAAC,MAAM;qDACjC,EAAE;wDACF,EAAE,EAAE,MAAM;wDACV,IAAI,EAAE,MAAM;wDACZ,IAAI,EAAE,MAAM;wDACZ,IAAI,EAAE,oBAAoB,CAAC,MAAM;qDACjC,EAAE;wDACF,EAAE,EAAE,OAAO;wDACX,IAAI,EAAE,OAAO;wDACb,IAAI,EAAE,OAAO;wDACb,IAAI,EAAE,oBAAoB,CAAC,MAAM;qDACjC,CAAC;6CACF,CAAC,CAAC;oCACJ,CAAC,EACD,aAAa,EAAE,GAAS,EAAE,gDAAC,OAAA,EAAE,CAAA,GAAA,EAC7B,SAAS,EAAE,CAAO,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;wCAEjC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;4CAE5B,UAAU,CAAC,GAAG,EAAE;gDAEf,OAAO,CAAC;oDACP,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;oDAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;oDAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;oDAChC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;oDACpC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;oDAC9B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;oDAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;oDAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;oDAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;oDAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;oDACpC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;iDAClC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;4CACzC,CAAC,EAAE,IAAI,CAAC,CAAC;wCACV,CAAC,CAAC,CAAA;oCACH,CAAC,CAAA,GACA,EACF,KAAC,WAAW,IACX,QAAQ,QACR,KAAK,EAAC,EAAE,GACM,IACN,EAEV,KAAC,QAAQ,cACR,KAAC,eAAe,IACf,IAAI,EAAC,EAAE,EACP,KAAK,EAAC,EAAE,EACR,QAAQ,SACP,GACQ,IACA,IACF,GACT,CACH,CAAC;AACH,CAAC"}
package/dist/components/NSChartColumn.d.ts CHANGED
@@ -1,7 +1,12 @@
1
1
  import { IBaseComponentProps } from '../props/IBaseComponentProps';
2
+ export interface DataSetItem {
3
+ label: string;
4
+ color?: string;
5
+ data: number[];
6
+ }
2
7
  export interface NSChartColumnProps extends IBaseComponentProps {
3
8
  labels: string[];
4
- datasets: number[];
9
+ dataset: DataSetItem[];
5
10
  range: {
6
11
  min: number;
7
12
  max: number;
package/dist/components/NSChartColumn.js CHANGED
@@ -1,36 +1,50 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Bar } from 'react-chartjs-2';
3
- import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, } from 'chart.js';
3
+ import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
4
4
  import Styles from "./NSChartColumn.module.css";
5
5
  ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
6
+ const prepareDatasets = (dataset) => {
7
+ const colors = [
8
+ "#7583E6",
9
+ "#C3406C",
10
+ "#3AA498",
11
+ "#8C4BCB",
12
+ "#DB7E46",
13
+ "#2962AA",
14
+ "#95274A",
15
+ "#95274A",
16
+ "#95274A",
17
+ "#977E19",
18
+ ];
19
+ return dataset.map((item, index) => {
20
+ var _a;
21
+ return ({
22
+ label: item.label,
23
+ data: item.data,
24
+ backgroundColor: (_a = item.color) !== null && _a !== void 0 ? _a : colors[index % colors.length],
25
+ stack: "stack",
26
+ });
27
+ });
28
+ };
29
+ ;
6
30
  export function NSChartColumn(props) {
7
- var _a, _b;
31
+ var _a, _b, _c, _d;
8
32
  const data = {
9
33
  labels: props.labels,
10
- datasets: [
11
- {
12
- label: 'Dataset 1',
13
- data: props.datasets,
14
- backgroundColor: '#3354F4',
15
- borderRadius: 10,
16
- barThickness: 12,
17
- borderSkipped: false,
18
- },
19
- ],
34
+ datasets: prepareDatasets(props.dataset)
20
35
  };
21
36
  const options = {
22
37
  responsive: true,
23
38
  maintainAspectRatio: false,
24
39
  plugins: {
25
40
  legend: {
26
- display: false,
41
+ display: true,
42
+ position: "bottom"
27
43
  },
28
44
  tooltip: {
29
45
  enabled: true,
30
46
  callbacks: {
31
- label: function (context) {
32
- return `$${context.raw}`;
33
- },
47
+ label: ({ dataset, raw }) => `${dataset.label}: $${raw}`,
34
48
  },
35
49
  },
36
50
  },
@@ -38,8 +52,8 @@ export function NSChartColumn(props) {
38
52
  x: {
39
53
  ticks: {
40
54
  font: {
41
- size: 8,
42
- weight: 700
55
+ size: 12,
56
+ weight: 400,
43
57
  },
44
58
  color: '#141B5C',
45
59
  maxRotation: 554,
@@ -60,8 +74,8 @@ export function NSChartColumn(props) {
60
74
  return `$${value}`;
61
75
  },
62
76
  font: {
63
- size: 8,
64
- weight: 700,
77
+ size: 12,
78
+ weight: 400,
65
79
  },
66
80
  color: '#141B5C',
67
81
  },
@@ -75,7 +89,7 @@ export function NSChartColumn(props) {
75
89
  },
76
90
  },
77
91
  };
78
- return (_jsx("div", { style: props.style, className: `${Styles.chart_column_container} ${(_b = (_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")) !== null && _b !== void 0 ? _b : ""}`, children: _jsx(Bar, { data: data, options: options, height: props.height ? props.height : 250, width: props.width ? props.width : 320 }) }));
92
+ return (_jsx("div", { style: props.style, className: `${Styles.chart_column_container} ${(_b = (_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")) !== null && _b !== void 0 ? _b : ""}`, children: _jsx(Bar, { data: data, options: options, height: (_c = props.height) !== null && _c !== void 0 ? _c : 250, width: (_d = props.width) !== null && _d !== void 0 ? _d : 320 }) }));
79
93
  }
80
94
  ;
81
95
  //# sourceMappingURL=NSChartColumn.js.map
package/dist/components/NSChartColumn.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSChartColumn.js","sourceRoot":"","sources":["../../src/components/NSChartColumn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,GAAiB,MAAM,UAAU,CAAC;AAE3H,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAE/C,OAAO,CAAC,QAAQ,CAAC,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AAejF,MAAM,UAAU,aAAa,CAAC,KAAyB;;IAEtD,MAAM,IAAI,GAAG;QACZ,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,QAAQ,EAAE;YACT;gBACC,KAAK,EAAE,WAAW;gBAClB,IAAI,EAAE,KAAK,CAAC,QAAQ;gBACpB,eAAe,EAAE,SAAS;gBAC1B,YAAY,EAAE,EAAE;gBAChB,YAAY,EAAE,EAAE;gBAChB,aAAa,EAAE,KAAK;aACpB;SACD;KACD,CAAC;IAEF,MAAM,OAAO,GAAwB;QACpC,UAAU,EAAE,IAAI;QAChB,mBAAmB,EAAE,KAAK;QAC1B,OAAO,EAAE;YACR,MAAM,EAAE;gBACP,OAAO,EAAE,KAAK;aACd;YACD,OAAO,EAAE;gBACR,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE;oBACV,KAAK,EAAE,UAAU,OAAO;wBAEvB,OAAO,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;oBAC1B,CAAC;iBACD;aACD;SACD;QACD,MAAM,EAAE;YACP,CAAC,EAAE;gBACF,KAAK,EAAE;oBACN,IAAI,EAAE;wBACL,IAAI,EAAE,CAAC;wBACP,MAAM,EAAE,GAAG;qBACX;oBACD,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,GAAG;oBAChB,WAAW,EAAE,CAAC;iBACd;gBACD,IAAI,EAAE;oBACL,OAAO,EAAE,KAAK;iBACd;gBACD,MAAM,EAAE;oBACP,OAAO,EAAE,KAAK;iBACd;aACD;YACD,CAAC,EAAE;gBACF,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG;gBACpB,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG;gBACpB,KAAK,EAAE;oBACN,QAAQ,EAAE,UAAU,KAAK;wBAExB,OAAO,IAAI,KAAK,EAAE,CAAC;oBACpB,CAAC;oBACD,IAAI,EAAE;wBACL,IAAI,EAAE,CAAC;wBACP,MAAM,EAAE,GAAG;qBACX;oBACD,KAAK,EAAE,SAAS;iBAChB;gBACD,IAAI,EAAE;oBACL,OAAO,EAAE,KAAK,CAAC,KAAK;oBACpB,KAAK,EAAE,SAAS;iBAChB;gBACD,MAAM,EAAE;oBACP,OAAO,EAAE,KAAK;iBACd;aACD;SACD;KACD,CAAC;IAEF,OAAO,CACN,cAAK,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,sBAAsB,IAAI,MAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,mCAAI,EAAE,EAAE,YACzG,KAAC,GAAG,IACH,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EACzC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GACrC,GACG,CACN,CAAC;AACH,CAAC;AAAA,CAAC"}
1
+ {"version":3,"file":"NSChartColumn.js","sourceRoot":"","sources":["../../src/components/NSChartColumn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAA2B,MAAM,UAAU,CAAC;AAErI,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAE/C,OAAO,CAAC,QAAQ,CAAC,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AAEjF,MAAM,eAAe,GAAG,CAAC,OAAsB,EAAE,EAAE;IAElD,MAAM,MAAM,GAAG;QACd,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACT,CAAC;IAEF,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;QAAC,OAAA,CAAC;YACpC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC;YAC5D,KAAK,EAAE,OAAO;SACd,CAAC,CAAA;KAAA,CAAC,CAAC;AACL,CAAC,CAAC;AAOD,CAAC;AAgBF,MAAM,UAAU,aAAa,CAAC,KAAyB;;IAEtD,MAAM,IAAI,GAAuC;QAChD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,QAAQ,EAAE,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC;KACxC,CAAC;IAEF,MAAM,OAAO,GAAwB;QACpC,UAAU,EAAE,IAAI;QAChB,mBAAmB,EAAE,KAAK;QAC1B,OAAO,EAAE;YACR,MAAM,EAAE;gBACP,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,QAAQ;aAClB;YACD,OAAO,EAAE;gBACR,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE;oBACV,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,OAAO,CAAC,KAAK,MAAM,GAAG,EAAE;iBACxD;aACD;SACD;QACD,MAAM,EAAE;YACP,CAAC,EAAE;gBACF,KAAK,EAAE;oBACN,IAAI,EAAE;wBACL,IAAI,EAAE,EAAE;wBACR,MAAM,EAAE,GAAG;qBACX;oBACD,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,GAAG;oBAChB,WAAW,EAAE,CAAC;iBACd;gBACD,IAAI,EAAE;oBACL,OAAO,EAAE,KAAK;iBACd;gBACD,MAAM,EAAE;oBACP,OAAO,EAAE,KAAK;iBACd;aACD;YACD,CAAC,EAAE;gBACF,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG;gBACpB,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG;gBACpB,KAAK,EAAE;oBACN,QAAQ,EAAE,UAAU,KAAK;wBAExB,OAAO,IAAI,KAAK,EAAE,CAAC;oBACpB,CAAC;oBACD,IAAI,EAAE;wBACL,IAAI,EAAE,EAAE;wBACR,MAAM,EAAE,GAAG;qBACX;oBACD,KAAK,EAAE,SAAS;iBAChB;gBACD,IAAI,EAAE;oBACL,OAAO,EAAE,KAAK,CAAC,KAAK;oBACpB,KAAK,EAAE,SAAS;iBAChB;gBACD,MAAM,EAAE;oBACP,OAAO,EAAE,KAAK;iBACd;aACD;SACD;KACD,CAAC;IAEF,OAAO,CACN,cAAK,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,sBAAsB,IAAI,MAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,mCAAI,EAAE,EAAE,YACzG,KAAC,GAAG,IACH,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,GAAG,EAC3B,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,GAAG,GACxB,GACG,CACN,CAAC;AACH,CAAC;AAAA,CAAC"}
package/dist/components/NSGauge.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export interface NSGaugeProps {
2
+ total: number;
3
+ current: number;
4
+ showPercent: boolean;
5
+ colors: NSGaugeColorProps;
6
+ }
7
+ export interface NSGaugeColorProps {
8
+ low: string;
9
+ medium: string;
10
+ high: string;
11
+ }
12
+ export declare function NSGauge(props: NSGaugeProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/NSGauge.js ADDED
@@ -0,0 +1,13 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import Styles from "./NSGauge.module.css";
3
+ export function NSGauge(props) {
4
+ const progressPercent = 100 - Math.max(Math.min((props.current * 100) / props.total, 100), 0);
5
+ const progressDeg = Math.round(progressPercent) * 1.8;
6
+ const color = progressPercent <= 25 ? props.colors.low : progressPercent >= 75 ? props.colors.high : props.colors.medium;
7
+ return (_jsxs("div", { className: Styles.ns_wrapper, children: [_jsxs("div", { className: Styles.ns_gauge_and_hand_wrapper, children: [_jsx("div", { className: Styles.ns_gauge_wrapper, children: _jsxs("div", { className: Styles.ns_gauge_progress_wrapper, children: [_jsx("div", { className: Styles.ns_gauge_progress }), _jsx("div", { className: `${Styles.ns_gauge_progress_bar}`, style: {
8
+ transform: `rotateZ(${progressDeg}deg)`,
9
+ borderRightColor: color,
10
+ borderBottomColor: color
11
+ } })] }) }), _jsx("svg", { width: "72", height: "4", viewBox: "0 0 72 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { transform: `rotateZ(${progressDeg}deg)` }, children: _jsx("path", { d: "M70 0L0 2L70 4L72 2L70 0Z", fill: "black", "fill-opacity": "0.6" }) })] }), props.showPercent && _jsxs("span", { children: [Math.round(progressPercent), "%"] })] }));
12
+ }
13
+ //# sourceMappingURL=NSGauge.js.map
package/dist/components/NSGauge.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NSGauge.js","sourceRoot":"","sources":["../../src/components/NSGauge.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAgB1C,MAAM,UAAU,OAAO,CAAC,KAAmB;IAEvC,MAAM,eAAe,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9F,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,GAAG,CAAC;IACtD,MAAM,KAAK,GAAG,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;IAEzH,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,UAAU,aAC7B,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC5C,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,YACnC,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC5C,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,GAAI,EAC5C,cACI,SAAS,EAAE,GAAG,MAAM,CAAC,qBAAqB,EAAE,EAC5C,KAAK,EAAE;wCACH,SAAS,EAAE,WAAW,WAAW,MAAM;wCACvC,gBAAgB,EAAE,KAAK;wCACvB,iBAAiB,EAAE,KAAK;qCAC3B,GACH,IACA,GACJ,EACN,cACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,WAAW,MAAM,EAAE,YAElD,eAAM,CAAC,EAAC,2BAA2B,EAAC,IAAI,EAAC,OAAO,kBAAc,KAAK,GAAG,GACpE,IACJ,EACL,KAAK,CAAC,WAAW,IAAI,2BAAO,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,SAAS,IAC/D,CACT,CAAC;AACN,CAAC"}
package/dist/components/NSGauge.module.css ADDED
@@ -0,0 +1,68 @@
1
+ .ns_wrapper {
2
+ display: flex;
3
+ flex-direction: column;
4
+ align-items: center;
5
+
6
+ span {
7
+ margin-top: 0.5rem;
8
+ font-weight: 500;
9
+ line-height: 1.25rem;
10
+ text-align: center;
11
+ color: #A1A4B0;
12
+ }
13
+ }
14
+
15
+ .ns_gauge_and_hand_wrapper {
16
+ position: relative;
17
+ height: 5.5rem;
18
+ width: 11rem;
19
+
20
+ svg {
21
+ position: absolute;
22
+ bottom: -2px;
23
+ left: 18px;
24
+ transform-origin: 70px 2px;
25
+ transition: transform 0.5s ease-in-out;
26
+ animation: rotation 0.5s ease-in-out;
27
+ }
28
+ }
29
+
30
+ .ns_gauge_wrapper {
31
+ position: relative;
32
+ height: 100%;
33
+ width: 100%;
34
+ overflow: hidden;
35
+ }
36
+
37
+ .ns_gauge_progress_wrapper {
38
+ position: absolute;
39
+ width: 100%;
40
+ height: 11rem;
41
+ transform: rotateZ(45deg);
42
+ }
43
+
44
+ .ns_gauge_progress {
45
+ position: absolute;
46
+ width: 100%;
47
+ height: 100%;
48
+ border-radius: 50%;
49
+ border: 2.25rem solid #e9e9e9;
50
+ }
51
+
52
+ .ns_gauge_progress_bar {
53
+ position: absolute;
54
+ top: 0.25rem;
55
+ left: 0.25rem;
56
+ width: 10.5rem;
57
+ height: 10.5rem;
58
+ border: 1.75rem solid #e9e9e9;
59
+ border-radius: 50%;
60
+ transition: transform 0.5s ease-in-out;
61
+ animation: rotation 0.5s ease-in-out;
62
+ }
63
+
64
+ @keyframes rotation {
65
+ from {
66
+ transform: rotateZ(0);
67
+ }
68
+ }
package/dist/components/NSGaugeDate.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { IBaseComponentProps } from "../main";
2
+ import { NSGaugeColorProps } from "./NSGauge";
3
+ export interface NSGaugeDateProps extends IBaseComponentProps {
4
+ title: string;
5
+ from: Date;
6
+ to: Date;
7
+ colors: NSGaugeColorProps;
8
+ }
9
+ export declare function NSGaugeDate(props: NSGaugeDateProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/NSGaugeDate.js ADDED
@@ -0,0 +1,25 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useState } from "react";
3
+ import { NSDownTimer, NSPanel, NSSpace, NSSpaceSizeType } from "../main";
4
+ import { NSGauge } from "./NSGauge";
5
+ import Styles from "./NSGaugeDate.module.css";
6
+ const getFormattedDate = (date) => {
7
+ const year = date.getFullYear();
8
+ const month = String(date.getMonth() + 1).padStart(2, "0");
9
+ const day = String(date.getDate()).padStart(2, "0");
10
+ return `${year}-${month}-${day}`;
11
+ };
12
+ export function NSGaugeDate(props) {
13
+ let [state, setState] = useState({ current: props.to.getTime() - new Date().getTime() });
14
+ useEffect(() => {
15
+ const interval = setInterval(() => {
16
+ setState({ current: props.to.getTime() - new Date().getTime() });
17
+ }, 1000);
18
+ return () => {
19
+ clearInterval(interval);
20
+ };
21
+ }, [props.to]);
22
+ let total = props.to.getTime() - props.from.getTime();
23
+ return (_jsxs(NSPanel, { style: { margin: 0, padding: 0, width: "340px", height: "100%" }, children: [_jsx("div", { className: Styles.ns_gauge_header, children: _jsx("span", { className: Styles.title, children: props.title }) }), _jsxs("div", { className: Styles.ns_gauge_body, 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 })] })] }));
24
+ }
25
+ //# sourceMappingURL=NSGaugeDate.js.map
package/dist/components/NSGaugeDate.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NSGaugeDate.js","sourceRoot":"","sources":["../../src/components/NSGaugeDate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAuB,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAe9C,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,EAAE;IAEpC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAChC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC3D,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAEpD,OAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,UAAU,WAAW,CAAC,KAAuB;IAE/C,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAmB,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAE3G,SAAS,CAAC,GAAG,EAAE;QAEX,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAE9B,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;QACpE,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE;YAER,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5B,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAEf,IAAI,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;IACtD,OAAO,CACH,MAAC,OAAO,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,aACrE,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,YAClC,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAQ,GACjD,EACN,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAChC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,EAC3F,eAAK,SAAS,EAAE,MAAM,CAAC,cAAc,aACjC,yBAAO,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,GAAQ,EAC3C,yBAAO,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC,GAAQ,IACvC,EACN,KAAC,OAAO,IACJ,IAAI,EAAE,eAAe,CAAC,IAAI,GAC5B,EACF,KAAC,WAAW,IACR,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,KAAK,CAAC,EAAE,GAChB,IACA,IACA,CACb,CAAC;AACN,CAAC"}
package/dist/components/NSGaugeDate.module.css ADDED
@@ -0,0 +1,28 @@
1
+ .ns_gauge_header {
2
+ width: 100%;
3
+ padding: 1rem;
4
+ background-color: #e9e9e9;
5
+
6
+ .title {
7
+ font-size: 1.25rem;
8
+ line-height: 1.25rem;
9
+ font-weight: 900;
10
+ color: #141b5c;
11
+ }
12
+ }
13
+
14
+ .ns_gauge_body {
15
+ padding: 0 2rem 1rem;
16
+ }
17
+
18
+ .ns_gauge_dates {
19
+ display: flex;
20
+ gap: 6.5rem;
21
+ margin-top: 0.5rem;
22
+
23
+ span {
24
+ font-weight: 500;
25
+ line-height: 1.25rem;
26
+ color: #A1A4B0;
27
+ }
28
+ }
package/dist/components/NSGaugeNumber.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { IBaseComponentProps } from "../main";
2
+ import { NSGaugeColorProps } from "./NSGauge";
3
+ export interface NSGaugeNumberProps extends IBaseComponentProps {
4
+ title: string;
5
+ total: number;
6
+ current: number;
7
+ colors: NSGaugeColorProps;
8
+ formatter?: (value: number) => string;
9
+ }
10
+ export declare function NSGaugeNumber(props: NSGaugeNumberProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/NSGaugeNumber.js ADDED
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { NSPanel } from "../main";
3
+ import { NSGauge } from "./NSGauge";
4
+ import Styles from "./NSGaugeNumber.module.css";
5
+ export function NSGaugeNumber(props) {
6
+ var _a;
7
+ let formatter = (_a = props.formatter) !== null && _a !== void 0 ? _a : (value => value.toString());
8
+ return (_jsxs(NSPanel, { style: { margin: 0, padding: 0, width: "340px", height: "100%" }, children: [_jsx("div", { className: Styles.ns_gauge_header, children: _jsx("span", { className: Styles.title, children: props.title }) }), _jsxs("div", { className: Styles.ns_gauge_body, 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)}` })] })] })] }));
9
+ }
10
+ //# sourceMappingURL=NSGaugeNumber.js.map
package/dist/components/NSGaugeNumber.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NSGaugeNumber.js","sourceRoot":"","sources":["../../src/components/NSGaugeNumber.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,OAAO,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAWhD,MAAM,UAAU,aAAa,CAAC,KAAyB;;IAEnD,IAAI,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC/D,OAAO,CACH,MAAC,OAAO,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,aACrE,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,YAClC,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAQ,GACjD,EACN,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAChC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,QAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,EACzF,eAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACnC,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAQ,EAChE,eAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,UAAU,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,GAAQ,IAC3E,IACJ,IACA,CACb,CAAC;AACN,CAAC"}
package/dist/components/NSGaugeNumber.module.css ADDED
@@ -0,0 +1,34 @@
1
+ .ns_gauge_header {
2
+ width: 100%;
3
+ padding: 1rem;
4
+ background-color: #e9e9e9;
5
+ .title {
6
+ font-size: 1.25rem;
7
+ line-height: 1.25rem;
8
+ font-weight: 900;
9
+ color: #141b5c;
10
+ }
11
+ }
12
+
13
+ .ns_gauge_body {
14
+ padding: 0 2rem 1rem;
15
+ }
16
+
17
+ .ns_title_wrapper {
18
+ margin-top: 1rem;
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: center;
22
+ gap: 0.5rem;
23
+ .title {
24
+ font-size: 2rem;
25
+ line-height: 2rem;
26
+ font-weight: 700;
27
+ color: #141b5c;
28
+ }
29
+ .subtitle {
30
+ color: #a1a4b0;
31
+ font-weight: 500;
32
+ line-height: 1.25rem;
33
+ }
34
+ }
package/dist/main.d.ts CHANGED
@@ -94,6 +94,9 @@ export * from "./components/NSTable";
94
94
  export * from "./components/NSTabPage";
95
95
  export * from "./components/NSTag";
96
96
  export * from "./components/NSTitle";
97
+ export * from "./components/NSGauge";
98
+ export * from "./components/NSGaugeNumber";
99
+ export * from "./components/NSGaugeDate";
97
100
  export * from "./formatter/BackColorFormatter";
98
101
  export * from "./formatter/BaseColumnFormatter";
99
102
  export * from "./formatter/BaseURLImageFormatter";
package/dist/main.js CHANGED
@@ -96,6 +96,9 @@ export * from "./components/NSTable";
96
96
  export * from "./components/NSTabPage";
97
97
  export * from "./components/NSTag";
98
98
  export * from "./components/NSTitle";
99
+ export * from "./components/NSGauge";
100
+ export * from "./components/NSGaugeNumber";
101
+ export * from "./components/NSGaugeDate";
99
102
  export * from "./formatter/BackColorFormatter";
100
103
  export * from "./formatter/BaseColumnFormatter";
101
104
  export * from "./formatter/BaseURLImageFormatter";
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"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.424",
11
+ "version": "1.4.427",
12
12
  "author": "Amir Abolhasani",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
@@ -21,14 +21,14 @@
21
21
  "copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
22
22
  },
23
23
  "dependencies": {
24
- "@ant-design/charts": "^2.6.0",
24
+ "@ant-design/charts": "^2.6.1",
25
25
  "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
26
- "@types/node": "^24.0.15",
26
+ "@types/node": "^24.1.0",
27
27
  "@types/react": "^18.3.12",
28
28
  "@types/react-bootstrap": "^1.1.0",
29
29
  "@types/react-dom": "^18.3.1",
30
30
  "@types/react-gtm-module": "^2.0.4",
31
- "antd": "^5.26.6",
31
+ "antd": "^5.26.7",
32
32
  "async-mutex": "^0.5.0",
33
33
  "bootstrap": "^5.3.7",
34
34
  "chart.js": "^4.5.0",
@@ -36,10 +36,10 @@
36
36
  "link-react": "^3.0.0",
37
37
  "namirasoft-api-link": "^1.4.20",
38
38
  "namirasoft-api-product": "^1.4.36",
39
- "namirasoft-core": "^1.4.76",
39
+ "namirasoft-core": "^1.4.80",
40
40
  "namirasoft-schema": "^1.4.25",
41
41
  "namirasoft-site": "^1.4.39",
42
- "namirasoft-site-map": "^1.4.29",
42
+ "namirasoft-site-map": "^1.4.31",
43
43
  "os-browserify": "^0.3.0",
44
44
  "path-browserify": "^1.0.1",
45
45
  "react": "^18.3.1",
package/src/App.tsx CHANGED
@@ -3,7 +3,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
3
3
  import { NSPanel } from './components/NSPanel';
4
4
  import { NSSection } from './components/NSSection';
5
5
  import { NSLayout } from './components/NSLayout';
6
- import { MoneyFormatter, NSBoxDynamic, NSBoxEntity, NSBoxString, NSButtonBlue, NSColumn, NSDialog, NSFilterBox, NSLine, NSTable, NSImplementing, NSTabPage } from './main';
6
+ import { MoneyFormatter, NSBoxDynamic, NSBoxEntity, NSBoxString, NSButtonBlue, NSColumn, NSDialog, NSFilterBox, NSLine, NSTable, NSImplementing, NSTabPage, NSGaugeDate, NSGaugeNumber } from './main';
7
7
  import { FilterItemColumnType } from 'namirasoft-core';
8
8
  import { NSRepeaterNSTag } from './components/NSRepeaterNSTag';
9
9
  import { BaseVariableSchema, StringSchema } from 'namirasoft-schema';
@@ -84,6 +84,27 @@ export function App()
84
84
  }
85
85
  ]}
86
86
  />
87
+ <NSGaugeDate
88
+ title='XXX'
89
+ from={new Date("2025/06/28")}
90
+ to={new Date("2025/08/02")}
91
+ colors={{
92
+ low: "green",
93
+ medium: "yellow",
94
+ high: "red"
95
+ }}
96
+ />
97
+ <NSGaugeNumber
98
+ title='XXX'
99
+ current={10}
100
+ total={100}
101
+ colors={{
102
+ low: "green",
103
+ medium: "yellow",
104
+ high: "red"
105
+ }}
106
+ formatter={(value) => `${value} MB`}
107
+ />
87
108
  <NSLine />
88
109
  <NSLineText
89
110
  title='OR'
package/src/components/NSChartColumn.tsx CHANGED
@@ -1,14 +1,45 @@
1
1
  import { Bar } from 'react-chartjs-2';
2
- import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartOptions, } from 'chart.js';
2
+ import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartOptions, ChartData } from 'chart.js';
3
3
  import { IBaseComponentProps } from '../props/IBaseComponentProps';
4
4
  import Styles from "./NSChartColumn.module.css"
5
5
 
6
6
  ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
7
7
 
8
+ const prepareDatasets = (dataset: DataSetItem[]) =>
9
+ {
10
+ const colors = [
11
+ "#7583E6",
12
+ "#C3406C",
13
+ "#3AA498",
14
+ "#8C4BCB",
15
+ "#DB7E46",
16
+ "#2962AA",
17
+ "#95274A",
18
+ "#95274A",
19
+ "#95274A",
20
+ "#977E19",
21
+ ];
22
+
23
+ return dataset.map((item, index) => ({
24
+ label: item.label,
25
+ data: item.data,
26
+ backgroundColor: item.color ?? colors[index % colors.length],
27
+ stack: "stack",
28
+ }));
29
+ };
30
+
31
+ export interface DataSetItem
32
+ {
33
+ label: string;
34
+ color?: string;
35
+ data: number[]
36
+ };
37
+
38
+
8
39
  export interface NSChartColumnProps extends IBaseComponentProps
9
40
  {
10
41
  labels: string[];
11
- datasets: number[];
42
+ dataset: DataSetItem[];
12
43
  range: {
13
44
  min: number,
14
45
  max: number,
@@ -20,18 +51,9 @@ export interface NSChartColumnProps extends IBaseComponentProps
20
51
 
21
52
  export function NSChartColumn(props: NSChartColumnProps)
22
53
  {
23
- const data = {
54
+ const data: ChartData<"bar", number[], string> = {
24
55
  labels: props.labels,
25
- datasets: [
26
- {
27
- label: 'Dataset 1',
28
- data: props.datasets,
29
- backgroundColor: '#3354F4',
30
- borderRadius: 10,
31
- barThickness: 12,
32
- borderSkipped: false,
33
- },
34
- ],
56
+ datasets: prepareDatasets(props.dataset)
35
57
  };
36
58
 
37
59
  const options: ChartOptions<'bar'> = {
@@ -39,15 +61,13 @@ export function NSChartColumn(props: NSChartColumnProps)
39
61
  maintainAspectRatio: false,
40
62
  plugins: {
41
63
  legend: {
42
- display: false,
64
+ display: true,
65
+ position: "bottom"
43
66
  },
44
67
  tooltip: {
45
68
  enabled: true,
46
69
  callbacks: {
47
- label: function (context)
48
- {
49
- return `$${context.raw}`;
50
- },
70
+ label: ({ dataset, raw }) => `${dataset.label}: $${raw}`,
51
71
  },
52
72
  },
53
73
  },
@@ -55,8 +75,8 @@ export function NSChartColumn(props: NSChartColumnProps)
55
75
  x: {
56
76
  ticks: {
57
77
  font: {
58
- size: 8,
59
- weight: 700
78
+ size: 12,
79
+ weight: 400,
60
80
  },
61
81
  color: '#141B5C',
62
82
  maxRotation: 554,
@@ -78,8 +98,8 @@ export function NSChartColumn(props: NSChartColumnProps)
78
98
  return `$${value}`;
79
99
  },
80
100
  font: {
81
- size: 8,
82
- weight: 700,
101
+ size: 12,
102
+ weight: 400,
83
103
  },
84
104
  color: '#141B5C',
85
105
  },
@@ -99,8 +119,8 @@ export function NSChartColumn(props: NSChartColumnProps)
99
119
  <Bar
100
120
  data={data}
101
121
  options={options}
102
- height={props.height ? props.height : 250}
103
- width={props.width ? props.width : 320}
122
+ height={props.height ?? 250}
123
+ width={props.width ?? 320}
104
124
  />
105
125
  </div>
106
126
  );
package/src/components/NSGauge.module.css ADDED
@@ -0,0 +1,68 @@
1
+ .ns_wrapper {
2
+ display: flex;
3
+ flex-direction: column;
4
+ align-items: center;
5
+
6
+ span {
7
+ margin-top: 0.5rem;
8
+ font-weight: 500;
9
+ line-height: 1.25rem;
10
+ text-align: center;
11
+ color: #A1A4B0;
12
+ }
13
+ }
14
+
15
+ .ns_gauge_and_hand_wrapper {
16
+ position: relative;
17
+ height: 5.5rem;
18
+ width: 11rem;
19
+
20
+ svg {
21
+ position: absolute;
22
+ bottom: -2px;
23
+ left: 18px;
24
+ transform-origin: 70px 2px;
25
+ transition: transform 0.5s ease-in-out;
26
+ animation: rotation 0.5s ease-in-out;
27
+ }
28
+ }
29
+
30
+ .ns_gauge_wrapper {
31
+ position: relative;
32
+ height: 100%;
33
+ width: 100%;
34
+ overflow: hidden;
35
+ }
36
+
37
+ .ns_gauge_progress_wrapper {
38
+ position: absolute;
39
+ width: 100%;
40
+ height: 11rem;
41
+ transform: rotateZ(45deg);
42
+ }
43
+
44
+ .ns_gauge_progress {
45
+ position: absolute;
46
+ width: 100%;
47
+ height: 100%;
48
+ border-radius: 50%;
49
+ border: 2.25rem solid #e9e9e9;
50
+ }
51
+
52
+ .ns_gauge_progress_bar {
53
+ position: absolute;
54
+ top: 0.25rem;
55
+ left: 0.25rem;
56
+ width: 10.5rem;
57
+ height: 10.5rem;
58
+ border: 1.75rem solid #e9e9e9;
59
+ border-radius: 50%;
60
+ transition: transform 0.5s ease-in-out;
61
+ animation: rotation 0.5s ease-in-out;
62
+ }
63
+
64
+ @keyframes rotation {
65
+ from {
66
+ transform: rotateZ(0);
67
+ }
68
+ }
package/src/components/NSGauge.tsx ADDED
@@ -0,0 +1,53 @@
1
+ import Styles from "./NSGauge.module.css";
2
+
3
+ export interface NSGaugeProps
4
+ {
5
+ total: number;
6
+ current: number;
7
+ showPercent: boolean;
8
+ colors: NSGaugeColorProps;
9
+ }
10
+ export interface NSGaugeColorProps
11
+ {
12
+ low: string;
13
+ medium: string;
14
+ high: string;
15
+ }
16
+
17
+ export function NSGauge(props: NSGaugeProps)
18
+ {
19
+ const progressPercent = 100 - Math.max(Math.min((props.current * 100) / props.total, 100), 0);
20
+ const progressDeg = Math.round(progressPercent) * 1.8;
21
+ const color = progressPercent <= 25 ? props.colors.low : progressPercent >= 75 ? props.colors.high : props.colors.medium;
22
+
23
+ return (
24
+ <div className={Styles.ns_wrapper}>
25
+ <div className={Styles.ns_gauge_and_hand_wrapper}>
26
+ <div className={Styles.ns_gauge_wrapper}>
27
+ <div className={Styles.ns_gauge_progress_wrapper}>
28
+ <div className={Styles.ns_gauge_progress} />
29
+ <div
30
+ className={`${Styles.ns_gauge_progress_bar}`}
31
+ style={{
32
+ transform: `rotateZ(${progressDeg}deg)`,
33
+ borderRightColor: color,
34
+ borderBottomColor: color
35
+ }}
36
+ />
37
+ </div>
38
+ </div>
39
+ <svg
40
+ width="72"
41
+ height="4"
42
+ viewBox="0 0 72 4"
43
+ fill="none"
44
+ xmlns="http://www.w3.org/2000/svg"
45
+ style={{ transform: `rotateZ(${progressDeg}deg)` }}
46
+ >
47
+ <path d="M70 0L0 2L70 4L72 2L70 0Z" fill="black" fill-opacity="0.6" />
48
+ </svg>
49
+ </div>
50
+ {props.showPercent && <span>{Math.round(progressPercent)}%</span>}
51
+ </div>
52
+ );
53
+ }
package/src/components/NSGaugeDate.module.css ADDED
@@ -0,0 +1,28 @@
1
+ .ns_gauge_header {
2
+ width: 100%;
3
+ padding: 1rem;
4
+ background-color: #e9e9e9;
5
+
6
+ .title {
7
+ font-size: 1.25rem;
8
+ line-height: 1.25rem;
9
+ font-weight: 900;
10
+ color: #141b5c;
11
+ }
12
+ }
13
+
14
+ .ns_gauge_body {
15
+ padding: 0 2rem 1rem;
16
+ }
17
+
18
+ .ns_gauge_dates {
19
+ display: flex;
20
+ gap: 6.5rem;
21
+ margin-top: 0.5rem;
22
+
23
+ span {
24
+ font-weight: 500;
25
+ line-height: 1.25rem;
26
+ color: #A1A4B0;
27
+ }
28
+ }
package/src/components/NSGaugeDate.tsx ADDED
@@ -0,0 +1,67 @@
1
+ import { useEffect, useState } from "react";
2
+ import { IBaseComponentProps, NSDownTimer, NSPanel, NSSpace, NSSpaceSizeType } from "../main";
3
+ import { NSGauge, NSGaugeColorProps } from "./NSGauge";
4
+ import Styles from "./NSGaugeDate.module.css";
5
+
6
+ export interface NSGaugeDateProps extends IBaseComponentProps
7
+ {
8
+ title: string;
9
+ from: Date;
10
+ to: Date;
11
+ colors: NSGaugeColorProps;
12
+ }
13
+
14
+ interface NSGaugeDateState
15
+ {
16
+ current: number;
17
+ }
18
+
19
+ const getFormattedDate = (date: Date) =>
20
+ {
21
+ const year = date.getFullYear();
22
+ const month = String(date.getMonth() + 1).padStart(2, "0");
23
+ const day = String(date.getDate()).padStart(2, "0");
24
+
25
+ return `${year}-${month}-${day}`;
26
+ };
27
+
28
+ export function NSGaugeDate(props: NSGaugeDateProps)
29
+ {
30
+ let [state, setState] = useState<NSGaugeDateState>({ current: props.to.getTime() - new Date().getTime() });
31
+
32
+ useEffect(() =>
33
+ {
34
+ const interval = setInterval(() =>
35
+ {
36
+ setState({ current: props.to.getTime() - new Date().getTime() })
37
+ }, 1000);
38
+
39
+ return () =>
40
+ {
41
+ clearInterval(interval);
42
+ };
43
+ }, [props.to]);
44
+
45
+ let total = props.to.getTime() - props.from.getTime();
46
+ return (
47
+ <NSPanel style={{ margin: 0, padding: 0, width: "340px", height: "100%" }}>
48
+ <div className={Styles.ns_gauge_header}>
49
+ <span className={Styles.title}>{props.title}</span>
50
+ </div>
51
+ <div className={Styles.ns_gauge_body}>
52
+ <NSGauge total={total} current={state.current} showPercent={false} colors={props.colors} />
53
+ <div className={Styles.ns_gauge_dates}>
54
+ <span>{getFormattedDate(props.from)}</span>
55
+ <span>{getFormattedDate(props.to)}</span>
56
+ </div>
57
+ <NSSpace
58
+ size={NSSpaceSizeType.MINI}
59
+ />
60
+ <NSDownTimer
61
+ text="Remained"
62
+ date={props.to}
63
+ />
64
+ </div>
65
+ </NSPanel>
66
+ );
67
+ }
package/src/components/NSGaugeNumber.module.css ADDED
@@ -0,0 +1,34 @@
1
+ .ns_gauge_header {
2
+ width: 100%;
3
+ padding: 1rem;
4
+ background-color: #e9e9e9;
5
+ .title {
6
+ font-size: 1.25rem;
7
+ line-height: 1.25rem;
8
+ font-weight: 900;
9
+ color: #141b5c;
10
+ }
11
+ }
12
+
13
+ .ns_gauge_body {
14
+ padding: 0 2rem 1rem;
15
+ }
16
+
17
+ .ns_title_wrapper {
18
+ margin-top: 1rem;
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: center;
22
+ gap: 0.5rem;
23
+ .title {
24
+ font-size: 2rem;
25
+ line-height: 2rem;
26
+ font-weight: 700;
27
+ color: #141b5c;
28
+ }
29
+ .subtitle {
30
+ color: #a1a4b0;
31
+ font-weight: 500;
32
+ line-height: 1.25rem;
33
+ }
34
+ }
package/src/components/NSGaugeNumber.tsx ADDED
@@ -0,0 +1,31 @@
1
+ import { IBaseComponentProps, NSPanel } from "../main";
2
+ import { NSGauge, NSGaugeColorProps } from "./NSGauge";
3
+ import Styles from "./NSGaugeNumber.module.css";
4
+
5
+ export interface NSGaugeNumberProps extends IBaseComponentProps
6
+ {
7
+ title: string;
8
+ total: number;
9
+ current: number;
10
+ colors: NSGaugeColorProps;
11
+ formatter?: (value: number) => string;
12
+ }
13
+
14
+ export function NSGaugeNumber(props: NSGaugeNumberProps)
15
+ {
16
+ let formatter = props.formatter ?? (value => value.toString());
17
+ return (
18
+ <NSPanel style={{ margin: 0, padding: 0, width: "340px", height: "100%" }}>
19
+ <div className={Styles.ns_gauge_header}>
20
+ <span className={Styles.title}>{props.title}</span>
21
+ </div>
22
+ <div className={Styles.ns_gauge_body}>
23
+ <NSGauge total={props.total} current={props.current} showPercent colors={props.colors} />
24
+ <div className={Styles.ns_title_wrapper}>
25
+ <span className={Styles.title}>{formatter(props.current)}</span>
26
+ <span className={Styles.subtitle}>{`Out of ${formatter(props.total)}`}</span>
27
+ </div>
28
+ </div>
29
+ </NSPanel>
30
+ );
31
+ }
package/src/main.ts CHANGED
@@ -163,6 +163,11 @@ export * from "./components/NSTag";
163
163
  // Title
164
164
  export * from "./components/NSTitle";
165
165
 
166
+ // Gauge
167
+ export * from "./components/NSGauge";
168
+ export * from "./components/NSGaugeNumber";
169
+ export * from "./components/NSGaugeDate";
170
+
166
171
  // formatter
167
172
  export * from "./formatter/BackColorFormatter";
168
173
  export * from "./formatter/BaseColumnFormatter";