15 |
16 |
17 |
18 | ## How does DBTop Monitoring look like?
19 |
20 | 
21 |
22 | 
23 |
24 | 
25 |
26 |
27 | ### [Visit the YouTube channel for videos](https://www.youtube.com/@DBTopMonitoringSolution)
28 |
29 |
30 |
31 | ## How it works?
32 |
33 | 
34 |
35 |
36 |
37 | ## Database engine support
38 |
39 | DBTop Monitoring Solution currently supports following database engines:
40 |
41 | - [Amazon Relational Database Service (RDS)](https://aws.amazon.com/rds/)
42 | - [Amazon RDS for MySQL](https://aws.amazon.com/rds/mysql/)
43 | - [Amazon RDS for PostgreSQL](https://aws.amazon.com/rds/postgresql/)
44 | - [Amazon RDS for MariaDB](https://aws.amazon.com/rds/mariadb/)
45 | - [Amazon RDS for Oracle](https://aws.amazon.com/rds/oracle/)
46 | - [Amazon RDS for SQLServer](https://aws.amazon.com/rds/sqlserver/)
47 | - [Amazon Aurora Instance (MySQL-Compatible Edition)](https://aws.amazon.com/rds/aurora/)
48 | - [Amazon Aurora Instance (MySQL-Compatible Edition)](https://aws.amazon.com/rds/aurora/)
49 | - [Amazon Aurora Instance (PostgreSQL-Compatible Edition)](https://aws.amazon.com/rds/aurora/)
50 | - [Amazon Aurora Clusters (MySQL-Compatible Edition)](https://aws.amazon.com/rds/aurora/)
51 | - [Amazon Aurora Clusters (PostgreSQL-Compatible Edition)](https://aws.amazon.com/rds/aurora/)
52 | - [Amazon In-Memory Databases](https://aws.amazon.com/elasticache/)
53 | - [Amazon ElastiCache for Redis](https://aws.amazon.com/elasticache/redis/)
54 | - [Amazon MemoryDB for Redis](https://aws.amazon.com/memorydb/)
55 | - [Amazon DocumentDB (with MongoDB compatibility)](https://aws.amazon.com/documentdb/)
56 |
57 | Additional expanded support coming later to :
58 |
59 | - [Amazon OpenSearch Service](https://aws.amazon.com/opensearch-service/)
60 |
61 |
62 |
63 | ## Solution Components
64 |
65 | - **Frontend.** React Developed Application to provide user interface to visualize performance database information.
66 |
67 | - **Backend.** NodeJS API Component to gather performance information from database engines, AWS CloudWatch and Enhanced Monitoring.
68 |
69 |
70 |
71 | ## Architecture
72 |
73 | 
74 |
75 |
76 |
77 | ## Use cases
78 |
79 | - **Monitor instance performance.**
80 | Visualize performance data on realtime, and correlate data to understand and resolve the root cause of performance issues in your database instances.
81 |
82 | - **Perform root cause analysis.**
83 | Analyze database and operating system metrics to speed up debugging and reduce overall mean time to resolution.
84 |
85 | - **Optimize resources proactively.**
86 | Identify top consumer sessions, gather SQL statements and resource usages.
87 |
88 |
89 |
90 | ## Solution Requirements
91 |
92 | #### [Amazon RDS](https://aws.amazon.com/rds/) Enhanced Monitoring
93 |
94 | [Amazon RDS](https://aws.amazon.com/rds/) provides metrics in real time for the operating system (OS) that your DB instance runs on. DBTop Monitoring solution integrate metrics from Enhanced Monitoring and it has to be enabled. Follow procedure below to turn on Enhanced Monitoring.
95 |
96 | [Setting up and enabling Enhanced Monitoring](https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/USER_Monitoring.OS.Enabling.html)
97 |
98 |
99 | #### VPC Network Access to AWS Database Instances
100 |
101 | DBTop Monitoring Solution needs to access privately AWS Database resources, grant inboud access for security groups used by database resources.
102 |
103 | _First, you need to take a note of the Cloudformation resources created by the stack_
104 |
105 | 
106 |
107 |
108 | _Second, you need to edit the Security Group that allows access to your Database resources, in this case to ElastiCache_
109 |
110 | 
111 |
112 |
113 | ## Resource Usage and Cost
114 |
115 | DBTop Monitoring Solution will use following resources:
116 |
117 | - **AWS EC2 instance.**
118 | The cost of this resource will depend of size selected during the deployment process. AWS EC2 instance pricing can be review [here](https://aws.amazon.com/ec2/pricing/).
119 |
120 | - **AWS CloudWatch API Calls.**
121 | The cost of this resource will depend how much time the application is being used and modules as well.
122 | DBTop Monitoring Solution uses data extracted from DBEngine itself and only extract information on demand from AWS CloudWatch (GetMetricData API) in case the module is selected.
123 | AWS CloudWatch API Calls pricing can be review [here](https://aws.amazon.com/cloudwatch/pricing/).
124 |
125 |
126 |
127 | ## Solution Deployment
128 |
129 | > **Time to deploy:** Approximately 10 minutes.
130 |
131 |
132 | ### Create database monitoring users
133 |
134 | Database credentials are needed to connect to the database engine and gather real-time metrics, use following statements to create the monitoring users.
135 |
136 |
137 | #### [Amazon RDS for MySQL](https://aws.amazon.com/rds/mysql/)
138 | ```sql
139 | CREATE USER 'monitor'@'%' IDENTIFIED BY '
8 |
9 | 
10 |
11 |
12 | ## About This Initiative
13 |
14 | This feature is part of an ongoing effort led by AWS Database Specialists to enhance the AWS Community's database monitoring capabilities. Their commitment to open-source development aims to provide advanced observability solutions for AWS database services, making it easier for customers to monitor, troubleshoot, and optimize their database deployments.
15 |
16 | The DBTop Monitoring Solution exemplifies AWS's commitment to open-source software, allowing customers to not only use but also customize and enhance the solution according to their specific needs. This collaboration between AWS Database Specialists and the community helps drive innovation in database monitoring and management.
17 |
18 |
19 |
20 | ## Key Features
21 |
22 | ### Real-time Router and Shard Monitoring
23 |
24 | * Live visualization of router performance metrics and traffic distribution
25 | * Detailed metrics for individual database shards including throughput, latency, and connection statistics
26 | * Dynamic topology view showing router-to-shard relationships and data flow
27 |
28 | ### CloudWatch Integration and Enhanced Monitoring
29 |
30 | * Aggregated CloudWatch metrics visualization
31 | * Enhanced monitoring integration providing OS-level metrics:
32 | * CPU utilization per process
33 | * Memory consumption patterns
34 | * I/O operations and throughput
35 | * Real-time process-level resource consumption analysis
36 |
37 | ### Storage Analysis
38 |
39 | * Comprehensive storage usage metrics at database level
40 | * Per-shard storage utilization
41 | * Data distribution visualization across shards.
42 |
43 | ## Feedback and Continuous Improvement
44 |
45 | At AWS, we are deeply committed to our Leadership Principle of Customer Obsession, and this open-source project is no exception. We are actively seeking feedback from our customers.
46 |
47 |
48 | ## Community Contribution
49 |
50 | We encourage community contributions to enhance this feature:
51 |
52 | * Additional metric collections
53 | * New visualization options
54 | * Custom analysis modules
55 | * Performance optimizations
56 |
57 | Submit pull requests or open issues on our GitHub repository to contribute or suggest improvements.
58 |
59 |
60 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@aws-amplify/ui-react": "^4.6.4",
7 | "@awsui/components-react": "^3.0.949",
8 | "@cloudscape-design/components": "^3.0.277",
9 | "@cloudscape-design/design-tokens": "^3.0.28",
10 | "@cloudscape-design/global-styles": "^1.0.9",
11 | "@testing-library/jest-dom": "^5.16.5",
12 | "@testing-library/react": "^13.4.0",
13 | "@testing-library/user-event": "^13.5.0",
14 | "axios": "^1.4.0",
15 | "crypto-js": "^4.1.1",
16 | "percentile": "^1.6.0",
17 | "react": "^18.2.0",
18 | "react-apexcharts": "^1.4.1",
19 | "react-dom": "^18.2.0",
20 | "react-router-dom": "^6.11.1",
21 | "web-vitals": "^2.1.4",
22 | "zustand": "^5.0.2"
23 | },
24 | "devDependencies": {
25 | "react-scripts": "^5.0.1"
26 | },
27 | "scripts": {
28 | "start": "react-scripts start",
29 | "build": "react-scripts build",
30 | "test": "react-scripts test",
31 | "eject": "react-scripts eject"
32 | },
33 | "proxy": "http://34.192.180.1:3000",
34 | "eslintConfig": {
35 | "extends": [
36 | "react-app",
37 | "react-app/jest"
38 | ]
39 | },
40 | "browserslist": {
41 | "production": [
42 | ">0.2%",
43 | "not dead",
44 | "not op_mini all"
45 | ],
46 | "development": [
47 | "last 1 chrome version",
48 | "last 1 firefox version",
49 | "last 1 safari version"
50 | ]
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
20 |
21 |
30 |
22 |
25 | );
26 | });
27 |
28 | export default ChartAnimation;
29 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartArea01.js:
--------------------------------------------------------------------------------
1 | import {useState,useEffect} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | function ChartArea({series,serie,history, height, width="100%", title, colors=[]}) {
5 |
6 | const [chartData, setChartData] = useState(series);
7 |
8 | var options = {
9 | chart: {
10 | height: height,
11 | type: 'area',
12 | stacked: true,
13 | zoom: {
14 | enabled: false
15 | },
16 | animations: {
17 | enabled: false,
18 | },
19 | dynamicAnimation :
20 | {
21 | enabled: true,
22 | },
23 | toolbar: {
24 | show: false,
25 | }
26 |
27 | },
28 | colors: colors,
29 | markers: {
30 | size: 0,
31 | },
32 | dataLabels: {
33 | enabled: false
34 | },
35 | stroke: {
36 | curve: 'straight',
37 | width: 1,
38 | },
39 | fill: {
40 | type: 'gradient',
41 | gradient: {
42 | opacityFrom: 0.6,
43 | opacityTo: 0.8,
44 | }
45 | },
46 | title: {
47 | text : title,
48 | align: "center",
49 | show: false
50 | },
51 | grid: {
52 | show: false,
53 | yaxis: {
54 | lines: {
55 | show: false
56 | }
57 | },
58 | },
59 | xaxis: {
60 | labels: {
61 | show: false,
62 | }
63 | },
64 | yaxis: {
65 | tickAmount: 5,
66 | axisTicks: {
67 | show: true,
68 | },
69 | axisBorder: {
70 | show: true,
71 | color: '#78909C',
72 | offsetX: 0,
73 | offsetY: 0
74 | },
75 | min : 0,
76 | labels : {
77 | formatter: function(val, index) {
78 |
79 | if(val === 0) return '0';
80 | if(val < 1000) return parseFloat(val).toFixed(1);
81 |
82 | var k = 1000,
83 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
84 | i = Math.floor(Math.log(val) / Math.log(k));
85 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
86 |
87 | },
88 | style: {
89 | colors: ['#C6C2C1'],
90 | fontSize: '11px',
91 | fontFamily: 'Lato',
92 | },
93 | },
94 |
95 | }
96 | };
97 |
98 | // eslint-disable-next-line
99 | useEffect(() => {
100 | updateMetrics();
101 | // eslint-disable-next-line react-hooks/exhaustive-deps
102 | }, [serie]);
103 |
104 |
105 | function updateMetrics(){
106 |
107 | var currentData = [];
108 | var iCursor=0;
109 | chartData.forEach(function(item) {
110 | item.data.push(serie[iCursor] || null);
111 | if (item.data.length > history ){
112 | item.data = item.data.slice(item.data.length-history)
113 | }
114 | currentData.push({name : item.name, data : item.data});
115 | iCursor++;
116 | })
117 | setChartData(currentData);
118 |
119 | }
120 |
121 |
122 | return (
123 |
23 |
24 |
124 |
126 | );
127 | }
128 |
129 | export default ChartArea;
130 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartArea02.js:
--------------------------------------------------------------------------------
1 | import {useState,useEffect,useRef} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | function ChartLine({series,history, height, width="100%", title, colors=[], border=2, timestamp}) {
5 |
6 | var options = {
7 | chart: {
8 | height: height,
9 | type: 'area',
10 | foreColor: '#C6C2C1',
11 | zoom: {
12 | enabled: false
13 | },
14 | animations: {
15 | enabled: false,
16 | },
17 | dynamicAnimation :
18 | {
19 | enabled: true,
20 | },
21 | toolbar: {
22 | show: false,
23 | }
24 |
25 | },/*
26 | markers: {
27 | size: 4,
28 | strokeColors: '#29313e',
29 | },*/
30 | dataLabels: {
31 | enabled: false
32 | },
33 | colors: colors,
34 | stroke: {
35 | curve: 'smooth',
36 | width: 1
37 | },
38 | markers: {
39 | size: 3,
40 | strokeWidth: 0,
41 | hover: {
42 | size: 9
43 | }
44 | },
45 | fill: {
46 | type: "gradient",
47 | gradient: {
48 | shadeIntensity: 1,
49 | opacityFrom: 0.1,
50 | opacityTo: 0.8,
51 | stops: [0, 99, 100]
52 | }
53 | },
54 | title: {
55 | text : title,
56 | align: "center",
57 | show: false,
58 | style: {
59 | fontSize: '12px',
60 | fontWeight: 'bold',
61 | fontFamily: "Lato",
62 | color : "#C6C2C1"
63 | }
64 |
65 | },
66 | grid: {
67 | show: false,
68 | yaxis: {
69 | lines: {
70 | show: false
71 | }
72 | },
73 | xaxis: {
74 | lines: {
75 | show: false
76 | }
77 | }
78 | },
79 | tooltip: {
80 | theme: "dark",
81 | },
82 | xaxis: {
83 | labels: {
84 | show: false,
85 | },
86 | axisBorder: {
87 | show: false
88 | },
89 | axisTicks: {
90 | show: true,
91 | borderType: 'solid',
92 | color: '#78909C',
93 | height: 4,
94 | offsetX: 0,
95 | offsetY: 0
96 | },
97 | },
98 | yaxis: {
99 | tickAmount: 5,
100 | axisTicks: {
101 | show: true,
102 | },
103 | axisBorder: {
104 | show: true,
105 | color: '#78909C',
106 | offsetX: 0,
107 | offsetY: 0
108 | },
109 | min : 0,
110 | labels : {
111 | formatter: function(val, index) {
112 |
113 | if(val === 0) return '0';
114 | if(val < 1000) return parseFloat(val).toFixed(1);
115 |
116 | var k = 1000,
117 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
118 | i = Math.floor(Math.log(val) / Math.log(k));
119 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
120 |
121 | },
122 | style: {
123 | colors: ['#C6C2C1'],
124 | fontSize: '11px',
125 | fontFamily: 'Lato',
126 | },
127 | },
128 |
129 | }
130 | };
131 |
132 |
133 | return (
134 |
135 |
137 | );
138 | }
139 |
140 | export default ChartLine;
141 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartArea03.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartLine = memo(({series, categories,history, height, width="100%", title, border=2, stacked=false }) => {
5 |
6 | var options = {
7 | chart: {
8 | height: height,
9 | type: 'area',
10 | foreColor: '#9e9b9a',
11 | stacked : stacked,
12 | zoom: {
13 | enabled: false
14 | },
15 | animations: {
16 | enabled: true,
17 | },
18 | dynamicAnimation :
19 | {
20 | enabled: true,
21 | },
22 | toolbar: {
23 | show: false,
24 | },
25 | dropShadow: {
26 | enabled: false,
27 | top: 2,
28 | left: 2,
29 | blur: 4,
30 | opacity: 1,
31 | }
32 |
33 | },
34 | markers: {
35 | size: 5,
36 | radius: 0,
37 | strokeWidth: 2,
38 | fillOpacity: 1,
39 | shape: "circle",
40 | },
41 | dataLabels: {
42 | enabled: false
43 | },
44 | legend: {
45 | show: true,
46 | showForSingleSeries: true,
47 | fontSize: '11px',
48 | fontFamily: 'Lato',
49 | },
50 | theme: {
51 | palette : "palette2",
52 | monochrome: {
53 | enabled: true
54 | }
55 | },
56 | stroke: {
57 | curve: 'straight',
58 | width: border
59 | },
60 | title: {
61 | text : title,
62 | align: "center",
63 | show: false,
64 | style: {
65 | fontSize: '14px',
66 | fontWeight: 'bold',
67 | fontFamily: 'Lato',
68 | }
69 |
70 | },
71 | grid: {
72 | show: false,
73 | yaxis: {
74 | lines: {
75 | show: false
76 | }
77 | },
78 | xaxis: {
79 | lines: {
80 | show: false
81 | }
82 | }
83 | },
84 | tooltip: {
85 | theme: "dark",
86 | x : {
87 | format: 'HH:mm',
88 | }
89 | },
90 | xaxis: {
91 | type: 'datetime',
92 | labels: {
93 | format: 'HH:mm',
94 | style: {
95 | fontSize: '11px',
96 | fontFamily: 'Lato',
97 | },
98 | }
99 | },
100 | yaxis: {
101 | tickAmount: 5,
102 | axisTicks: {
103 | show: true,
104 | },
105 | axisBorder: {
106 | show: true,
107 | color: '#78909C',
108 | offsetX: 0,
109 | offsetY: 0
110 | },
111 | min : 0,
112 | labels : {
113 | formatter: function(val, index) {
114 |
115 | if(val === 0) return '0';
116 | if(val < 1000) return parseFloat(val).toFixed(1);
117 |
118 | var k = 1000,
119 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
120 | i = Math.floor(Math.log(val) / Math.log(k));
121 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
122 |
123 | },
124 | style: {
125 | fontSize: '11px',
126 | fontFamily: 'Lato',
127 | },
128 | },
129 |
130 | }
131 | };
132 |
133 |
134 | return (
135 |
136 |
138 | );
139 | });
140 |
141 | export default ChartLine;
142 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartBar01.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 |
5 | const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp, stacked=false }) => {
6 |
7 | var options = {
8 | chart: {
9 | height: height,
10 | type: 'bar',
11 | stacked : stacked,
12 | foreColor: '#2ea597',
13 | zoom: {
14 | enabled: false
15 | },
16 | animations: {
17 | enabled: true,
18 | easing: 'easeinout',
19 | },
20 | dynamicAnimation :
21 | {
22 | enabled: true,
23 | },
24 | toolbar: {
25 | show: false,
26 | }
27 |
28 | },
29 | dataLabels: {
30 | enabled: false
31 | },
32 | colors : colors,
33 | stroke: {
34 | curve: 'smooth',
35 | width: 1
36 | },
37 | theme: {
38 | palette : "palette2"
39 | },
40 | markers: {
41 | size: 3,
42 | strokeWidth: 0,
43 | hover: {
44 | size: 9
45 | }
46 | },
47 | plotOptions: {
48 | bar: {
49 | borderRadius: 2,
50 |
51 | }
52 | },
53 | tooltip: {
54 | theme: "dark",
55 | x : {
56 | format: 'HH:mm',
57 | }
58 | },
59 | title: {
60 | text : title,
61 | align: "center",
62 | show: false,
63 | style: {
64 | fontSize: '14px',
65 | fontWeight: 'bold',
66 | fontFamily: "Lato",
67 | color : "#2ea597"
68 | }
69 |
70 | },
71 | grid: {
72 | show: false,
73 | yaxis: {
74 | lines: {
75 | show: false
76 | }
77 | },
78 | xaxis: {
79 | lines: {
80 | show: false
81 | }
82 | }
83 | },
84 | xaxis: {
85 | type: 'datetime',
86 | labels: {
87 | format: 'HH:mm',
88 | style: {
89 | fontSize: '11px',
90 | fontFamily: 'Lato',
91 | },
92 | }
93 | },
94 | yaxis: {
95 | tickAmount: 5,
96 | axisTicks: {
97 | show: true,
98 | },
99 | axisBorder: {
100 | show: true,
101 | color: '#78909C',
102 | offsetX: 0,
103 | offsetY: 0
104 | },
105 | min : 0,
106 | labels : {
107 | formatter: function(val, index) {
108 |
109 | if(val === 0) return '0';
110 | if(val < 1000) return parseFloat(val).toFixed(1);
111 |
112 | var k = 1000,
113 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
114 | i = Math.floor(Math.log(val) / Math.log(k));
115 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
116 |
117 | },
118 | style: {
119 | fontSize: '11px',
120 | fontFamily: 'Lato',
121 | },
122 | },
123 |
124 | }
125 | };
126 |
127 |
128 | return (
129 |
130 |
132 | );
133 | });
134 |
135 | export default ChartBar;
136 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartBar02.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 |
5 | const ChartBar = memo(({ series, p50, p90, p95, avg, max, height, width="100%", title, colors=[], border=2 }) => {
6 |
7 | var options = {
8 | chart: {
9 | height: height,
10 | type: 'bar',
11 | foreColor: '#2ea597',
12 | zoom: {
13 | enabled: false
14 | },
15 | animations: {
16 | enabled: true,
17 | easing: 'easeinout',
18 | },
19 | dynamicAnimation :
20 | {
21 | enabled: true,
22 | },
23 | toolbar: {
24 | show: false,
25 | }
26 |
27 | },
28 | annotations: {
29 | yaxis: [
30 | {
31 | y: p90,
32 | strokeDashArray: 20,
33 | borderColor: 'red',
34 | label: {
35 | text: 'p90 : ' + CustomFormatNumberData(p90,2),
36 | offsetX : 950,
37 | offsetY : 9,
38 | position : "left",
39 | borderColor: 'red',
40 | style: {
41 | fontSize: '14px',
42 | fontWeight: 'bold',
43 | fontFamily: 'Lato',
44 | color: 'white',
45 | background: 'red',
46 | },
47 | }
48 | },
49 | {
50 | y: p95,
51 | strokeDashArray: 10,
52 | borderColor: 'gray',
53 | label: {
54 | text: 'p95 : ' + CustomFormatNumberData(p95,2),
55 | offsetX : 650,
56 | offsetY : 9,
57 | position : "left",
58 | borderColor: 'gray',
59 | style: {
60 | fontSize: '14px',
61 | fontWeight: 'bold',
62 | fontFamily: 'Lato',
63 | color: 'white',
64 | background: 'gray',
65 | },
66 | }
67 | },
68 | {
69 | y: avg,
70 | strokeDashArray: 10,
71 | borderColor: 'orange',
72 | label: {
73 | text: 'avg : ' + CustomFormatNumberData(avg,2),
74 | offsetX : 300,
75 | offsetY : 9,
76 | position : "left",
77 | borderColor: 'orange',
78 | style: {
79 | fontSize: '14px',
80 | fontWeight: 'bold',
81 | fontFamily: 'Lato',
82 | color: 'white',
83 | background: 'orange',
84 | },
85 | }
86 | }
87 | ],
88 | },
89 | dataLabels: {
90 | enabled: false
91 | },
92 | legend: {
93 | show: true,
94 | showForSingleSeries: true,
95 | fontSize: '11px',
96 | fontFamily: 'Lato',
97 | },
98 | colors : colors,
99 | stroke: {
100 | curve: 'smooth',
101 | width: 1
102 | },
103 | markers: {
104 | size: 3,
105 | strokeWidth: 0,
106 | hover: {
107 | size: 9
108 | }
109 | },
110 | tooltip: {
111 | theme: "dark"
112 | },
113 | title: {
114 | text : title,
115 | align: "center",
116 | show: false,
117 | style: {
118 | fontSize: '14px',
119 | fontWeight: 'bold',
120 | fontFamily: "Lato",
121 | color : "#2ea597"
122 | }
123 |
124 | },
125 | grid: {
126 | show: false,
127 | yaxis: {
128 | lines: {
129 | show: false
130 | }
131 | },
132 | xaxis: {
133 | lines: {
134 | show: false
135 | }
136 | }
137 | },
138 | xaxis: {
139 | labels: {
140 | show: false,
141 | },
142 | },
143 | yaxis: {
144 | tickAmount: 5,
145 | axisTicks: {
146 | show: true,
147 | },
148 | axisBorder: {
149 | show: true,
150 | color: '#78909C',
151 | offsetX: 0,
152 | offsetY: 0
153 | },
154 | min : 0,
155 | labels : {
156 | formatter: function(val, index) {
157 |
158 | if(val === 0) return '0';
159 | if(val < 1000) return parseFloat(val).toFixed(1);
160 |
161 | var k = 1000,
162 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
163 | i = Math.floor(Math.log(val) / Math.log(k));
164 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
165 |
166 | },
167 | style: {
168 | fontSize: '11px',
169 | fontFamily: 'Lato',
170 | },
171 | },
172 |
173 | }
174 | };
175 |
176 |
177 | function CustomFormatNumberData(value,decimalLength) {
178 | if(value == 0) return '0';
179 | if(value < 1024) return parseFloat(value).toFixed(decimalLength);
180 |
181 | var k = 1024,
182 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
183 | i = Math.floor(Math.log(value) / Math.log(k));
184 | return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
185 | }
186 |
187 | return (
188 |
189 |
191 | );
192 | });
193 |
194 | export default ChartBar;
195 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartBar03.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 |
5 | const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp }) => {
6 |
7 | var options = {
8 | chart: {
9 | height: height,
10 | type: 'bar',
11 | foreColor: '#2ea597',
12 | zoom: {
13 | enabled: false
14 | },
15 | animations: {
16 | enabled: false,
17 | easing: 'easeinout',
18 | },
19 | dynamicAnimation :
20 | {
21 | enabled: true,
22 | },
23 | toolbar: {
24 | show: false,
25 | }
26 |
27 | },
28 | dataLabels: {
29 | enabled: false
30 | },
31 | colors : colors,
32 | stroke: {
33 | curve: 'smooth',
34 | width: 1
35 | },
36 | markers: {
37 | size: 3,
38 | strokeWidth: 0,
39 | hover: {
40 | size: 9
41 | }
42 | },
43 | plotOptions: {
44 | bar: {
45 | borderRadius: 0
46 | }
47 | },
48 | tooltip: {
49 | theme: "dark",
50 | x : {
51 | format: 'HH:mm',
52 | }
53 | },
54 | title: {
55 | text : title,
56 | align: "center",
57 | show: false,
58 | style: {
59 | fontSize: '14px',
60 | fontWeight: 'bold',
61 | fontFamily: "Lato",
62 | color : "#2ea597"
63 | }
64 |
65 | },
66 | grid: {
67 | show: false,
68 | yaxis: {
69 | lines: {
70 | show: false
71 | }
72 | },
73 | xaxis: {
74 | lines: {
75 | show: false
76 | }
77 | }
78 | },
79 | xaxis: {
80 | labels: {
81 | show: false,
82 | },
83 | },
84 | yaxis: {
85 | tickAmount: 5,
86 | axisTicks: {
87 | show: true,
88 | },
89 | axisBorder: {
90 | show: true,
91 | color: '#78909C',
92 | offsetX: 0,
93 | offsetY: 0
94 | },
95 | min : 0,
96 | labels : {
97 | formatter: function(val, index) {
98 |
99 | if(val === 0) return '0';
100 | if(val < 1000) return parseFloat(val).toFixed(1);
101 |
102 | var k = 1000,
103 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
104 | i = Math.floor(Math.log(val) / Math.log(k));
105 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
106 |
107 | },
108 | style: {
109 | fontSize: '11px',
110 | fontFamily: 'Lato',
111 | },
112 | },
113 |
114 | }
115 | };
116 |
117 |
118 | return (
119 |
120 |
122 | );
123 | });
124 |
125 | export default ChartBar;
126 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartBar04.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 |
5 | const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp }) => {
6 |
7 | var options = {
8 | chart: {
9 | height: height,
10 | foreColor: '#2ea597',
11 | zoom: {
12 | enabled: false
13 | },
14 | animations: {
15 | enabled: true,
16 | easing: 'easeinout',
17 | },
18 | dynamicAnimation :
19 | {
20 | enabled: true,
21 | },
22 | toolbar: {
23 | show: false,
24 | }
25 |
26 | },
27 | dataLabels: {
28 | enabled: false
29 | },
30 | colors : colors,
31 | stroke: {
32 | curve: 'smooth',
33 | width: 1
34 | },
35 | markers: {
36 | size: 15,
37 | radius: 2,
38 | strokeWidth: 5,
39 | fillOpacity: 2,
40 | shape: "circle",
41 | hover: {
42 | size: 9
43 | },
44 | },
45 | /*plotOptions: {
46 | bar: {
47 | borderRadius: 2,
48 |
49 | }
50 | },*/
51 | theme: {
52 | monochrome: {
53 | enabled: true
54 | },
55 |
56 | },
57 | tooltip: {
58 | theme: "dark",
59 | x : {
60 | format: 'HH:mm',
61 | }
62 | },
63 | title: {
64 | text : title,
65 | align: "center",
66 | show: false,
67 | style: {
68 | fontSize: '14px',
69 | fontWeight: 'bold',
70 | fontFamily: "Lato",
71 | color : "#2ea597"
72 | }
73 |
74 | },
75 | grid: {
76 | show: false,
77 | yaxis: {
78 | lines: {
79 | show: false
80 | }
81 | },
82 | xaxis: {
83 | lines: {
84 | show: false
85 | }
86 | }
87 | },
88 | xaxis: {
89 | type: 'datetime',
90 | labels: {
91 | format: 'HH:mm',
92 | style: {
93 | fontSize: '11px',
94 | fontFamily: 'Lato',
95 | },
96 | }
97 | },
98 | yaxis: {
99 | tickAmount: 5,
100 | axisTicks: {
101 | show: true,
102 | },
103 | axisBorder: {
104 | show: true,
105 | color: '#78909C',
106 | offsetX: 0,
107 | offsetY: 0
108 | },
109 | min : 0,
110 | labels : {
111 | formatter: function(val, index) {
112 |
113 | if(val === 0) return '0';
114 | if(val < 1000) return parseFloat(val).toFixed(1);
115 |
116 | var k = 1000,
117 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
118 | i = Math.floor(Math.log(val) / Math.log(k));
119 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
120 |
121 | },
122 | style: {
123 | fontSize: '11px',
124 | fontFamily: 'Lato',
125 | },
126 | },
127 |
128 | }
129 | };
130 |
131 |
132 | return (
133 |
134 |
136 | );
137 | });
138 |
139 | export default ChartBar;
140 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartBar05.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 |
5 | const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp, maximum=100 }) => {
6 |
7 | var options = {
8 | chart: {
9 | height: height,
10 | type: 'bar',
11 | foreColor: '#2ea597',
12 | zoom: {
13 | enabled: false
14 | },
15 | animations: {
16 | enabled: true,
17 | easing: 'easeinout',
18 | },
19 | dynamicAnimation :
20 | {
21 | enabled: true,
22 | },
23 | toolbar: {
24 | show: false,
25 | }
26 |
27 | },
28 | dataLabels: {
29 | enabled: false
30 | },
31 | colors : colors,
32 | stroke: {
33 | curve: 'smooth',
34 | width: 1
35 | },
36 | markers: {
37 | size: 3,
38 | strokeWidth: 0,
39 | hover: {
40 | size: 9
41 | }
42 | },
43 | plotOptions: {
44 | bar: {
45 | borderRadius: 2,
46 |
47 | }
48 | },
49 | tooltip: {
50 | theme: "dark",
51 | x : {
52 | format: 'HH:mm',
53 | }
54 | },
55 | title: {
56 | text : title,
57 | align: "center",
58 | show: false,
59 | style: {
60 | fontSize: '14px',
61 | fontWeight: 'bold',
62 | fontFamily: "Lato",
63 | color : "#2ea597"
64 | }
65 |
66 | },
67 | grid: {
68 | show: false,
69 | yaxis: {
70 | lines: {
71 | show: false
72 | }
73 | },
74 | xaxis: {
75 | lines: {
76 | show: false
77 | }
78 | }
79 | },
80 | xaxis: {
81 | type: 'datetime',
82 | labels: {
83 | format: 'HH:mm',
84 | style: {
85 | fontSize: '11px',
86 | fontFamily: 'Lato',
87 | },
88 | }
89 | },
90 | yaxis: {
91 | tickAmount: 5,
92 | axisTicks: {
93 | show: true,
94 | },
95 | axisBorder: {
96 | show: true,
97 | color: '#78909C',
98 | offsetX: 0,
99 | offsetY: 0
100 | },
101 | min : 0,
102 | max : maximum,
103 | labels : {
104 | formatter: function(val, index) {
105 |
106 | if(val === 0) return '0';
107 | if(val < 1000) return parseFloat(val).toFixed(0);
108 |
109 | var k = 1000,
110 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
111 | i = Math.floor(Math.log(val) / Math.log(k));
112 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
113 |
114 | },
115 | style: {
116 | fontSize: '11px',
117 | fontFamily: 'Lato',
118 | },
119 | },
120 |
121 | },
122 | annotations: {
123 | yaxis: [
124 | {
125 | y: maximum,
126 | strokeDashArray: 10,
127 | borderColor: 'gray'
128 | },
129 | ],
130 | },
131 | };
132 |
133 | function CustomFormatNumberData(value,decimalLength) {
134 | if(value == 0) return '0';
135 | if(value < 1024) return parseFloat(value).toFixed(decimalLength);
136 |
137 | var k = 1024,
138 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
139 | i = Math.floor(Math.log(value) / Math.log(k));
140 | return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
141 | }
142 |
143 | return (
144 |
145 |
147 | );
148 | });
149 |
150 | export default ChartBar;
151 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartColumn01.js:
--------------------------------------------------------------------------------
1 | import Chart from 'react-apexcharts';
2 |
3 | function ChartBar({ series, height, width="100%", title }) {
4 |
5 | var data = [{
6 | data: series.data
7 | }];
8 |
9 | var options = {
10 | chart: {
11 | type: 'bar',
12 | height: height,
13 | foreColor: '#9e9b9a',
14 | zoom: {
15 | enabled: false
16 | },
17 | animations: {
18 | enabled: false,
19 | },
20 | labels: series.categories,
21 | dynamicAnimation :
22 | {
23 | enabled: true,
24 | },
25 | toolbar: {
26 | show: false,
27 | }
28 | },
29 | plotOptions: {
30 | bar: {
31 | borderRadius: 4,
32 | horizontal: true,
33 | }
34 | },
35 | xaxis: {
36 | //categories: series.categories,
37 | labels : {
38 | formatter: function(val, index) {
39 |
40 | if(val === 0) return '0';
41 | if(val < 1000) return parseFloat(val).toFixed(0);
42 |
43 | var k = 1000,
44 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
45 | i = Math.floor(Math.log(val) / Math.log(k));
46 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
47 |
48 | },
49 | style: {
50 | fontSize: '11px',
51 | fontFamily: 'Lato',
52 | },
53 |
54 | },
55 | },
56 | grid: {
57 | show: false,
58 | yaxis: {
59 | lines: {
60 | show: false
61 | }
62 | },
63 | xaxis: {
64 | lines: {
65 | show: false
66 | },
67 | }
68 | },
69 | tooltip: {
70 | theme: "dark",
71 | },
72 | dataLabels: {
73 | enabled: true,
74 | style: {
75 | fontSize: '11px',
76 | fontWeight: 'bold',
77 | fontFamily: 'Lato',
78 | },
79 | formatter: function(val, index) {
80 |
81 | if(val === 0) return '0';
82 | if(val < 1000) return parseFloat(val).toFixed(0);
83 |
84 | var k = 1000,
85 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
86 | i = Math.floor(Math.log(val) / Math.log(k));
87 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
88 |
89 | },
90 | },
91 |
92 | };
93 |
94 |
95 | return (
96 |
97 |
99 | );
100 | }
101 |
102 | export default ChartBar;
103 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartColumn02.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartBar = memo(({ series, categories, height, width="100%", title }) => {
5 |
6 | console.log(series,categories);
7 | var options = {
8 | chart: {
9 | type: 'bar',
10 | height: height,
11 | foreColor: '#9e9b9a',
12 | zoom: {
13 | enabled: false
14 | },
15 | animations: {
16 | enabled: false,
17 | },
18 | labels: JSON.parse(categories),
19 | dynamicAnimation :
20 | {
21 | enabled: true,
22 | },
23 | toolbar: {
24 | show: false,
25 | }
26 | },
27 | plotOptions: {
28 | bar: {
29 | borderRadius: 4,
30 | horizontal: true,
31 | }
32 | },
33 | xaxis: {
34 | categories: JSON.parse(categories),
35 | labels : {
36 | formatter: function(val, index) {
37 |
38 | if(val === 0) return '0';
39 | if(val < 1000) return parseFloat(val).toFixed(0);
40 |
41 | var k = 1000,
42 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
43 | i = Math.floor(Math.log(val) / Math.log(k));
44 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
45 |
46 | },
47 | style: {
48 | fontSize: '11px',
49 | fontFamily: 'Lato',
50 | },
51 |
52 | },
53 | },
54 | grid: {
55 | show: false,
56 | yaxis: {
57 | lines: {
58 | show: false
59 | }
60 | },
61 | xaxis: {
62 | lines: {
63 | show: false
64 | },
65 | }
66 | },
67 | tooltip: {
68 | theme: "dark",
69 | },
70 | dataLabels: {
71 | enabled: true,
72 | style: {
73 | fontSize: '11px',
74 | fontWeight: 'bold',
75 | fontFamily: 'Lato',
76 | },
77 | formatter: function(val, index) {
78 |
79 | if(val === 0) return '0';
80 | if(val < 1000) return parseFloat(val).toFixed(0);
81 |
82 | var k = 1000,
83 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
84 | i = Math.floor(Math.log(val) / Math.log(k));
85 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
86 |
87 | },
88 | },
89 |
90 | };
91 |
92 |
93 | return (
94 |
95 |
97 | );
98 | });
99 |
100 | export default ChartBar;
101 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartLine02.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartLine = memo(({series,history, height, width="100%", title, border=2 }) => {
5 |
6 | var options = {
7 | chart: {
8 | height: height,
9 | type: 'line',
10 | foreColor: '#9e9b9a',
11 | zoom: {
12 | enabled: false
13 | },
14 | animations: {
15 | enabled: false,
16 | },
17 | dynamicAnimation :
18 | {
19 | enabled: true,
20 | },
21 | toolbar: {
22 | show: false,
23 | },
24 | dropShadow: {
25 | enabled: false,
26 | top: 2,
27 | left: 2,
28 | blur: 4,
29 | opacity: 1,
30 | }
31 |
32 | },
33 | theme: {
34 | palette : "palette2"
35 | },
36 | markers: {
37 | size: 5,
38 | radius: 0,
39 | strokeWidth: 2,
40 | fillOpacity: 1,
41 | shape: "circle",
42 | },
43 | dataLabels: {
44 | enabled: false
45 | },
46 | legend: {
47 | show: true,
48 | showForSingleSeries: true,
49 | fontSize: '11px',
50 | fontFamily: 'Lato',
51 | },
52 | stroke: {
53 | curve: 'straight',
54 | width: border,
55 |
56 | },
57 | title: {
58 | text : title,
59 | align: "center",
60 | show: false,
61 | style: {
62 | fontSize: '12px',
63 | fontWeight: 'bold',
64 | fontFamily: 'Lato',
65 | }
66 |
67 | },
68 | grid: {
69 | show: false,
70 | yaxis: {
71 | lines: {
72 | show: false
73 | }
74 | },
75 | xaxis: {
76 | lines: {
77 | show: false
78 | }
79 | }
80 | },
81 | tooltip: {
82 | theme: "dark",
83 | },
84 | xaxis: {
85 | labels: {
86 | show: false,
87 | },
88 | axisBorder: {
89 | show: false
90 | },
91 | axisTicks: {
92 | show: true,
93 | borderType: 'solid',
94 | color: '#78909C',
95 | height: 4,
96 | offsetX: 0,
97 | offsetY: 0
98 | },
99 | },
100 | yaxis: {
101 | tickAmount: 5,
102 | axisTicks: {
103 | show: true,
104 | },
105 | axisBorder: {
106 | show: true,
107 | color: '#78909C',
108 | offsetX: 0,
109 | offsetY: 0
110 | },
111 | min : 0,
112 | labels : {
113 | formatter: function(val, index) {
114 |
115 | if(val === 0) return '0';
116 | if(val < 1000) return parseFloat(val).toFixed(1);
117 |
118 | var k = 1000,
119 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
120 | i = Math.floor(Math.log(val) / Math.log(k));
121 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
122 |
123 | },
124 | style: {
125 | fontSize: '11px',
126 | fontFamily: 'Lato',
127 | },
128 | },
129 |
130 | }
131 | };
132 |
133 |
134 | return (
135 |
136 |
138 | );
139 | });
140 |
141 | export default ChartLine;
142 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartLine03.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartLine = memo(({series,history, height, width="100%", title, border=2 }) => {
5 |
6 | var options = {
7 | chart: {
8 | height: height,
9 | type: 'line',
10 | foreColor: '#9e9b9a',
11 | zoom: {
12 | enabled: false
13 | },
14 | animations: {
15 | enabled: false,
16 | },
17 | dynamicAnimation :
18 | {
19 | enabled: true,
20 | },
21 | toolbar: {
22 | show: false,
23 | },
24 | dropShadow: {
25 | enabled: false,
26 | top: 2,
27 | left: 2,
28 | blur: 4,
29 | opacity: 1,
30 | }
31 |
32 | },
33 | theme: {
34 | palette : "palette2"
35 | },
36 | markers: {
37 | size: 4,
38 | radius: 0,
39 | strokeWidth: 0.1,
40 | fillOpacity: 1,
41 | shape: "circle",
42 | },
43 | dataLabels: {
44 | enabled: false
45 | },
46 | legend: {
47 | show: true,
48 | showForSingleSeries: true,
49 | fontSize: '11px',
50 | fontFamily: 'Lato',
51 | },
52 | stroke: {
53 | curve: 'straight',
54 | width: border,
55 | dashArray: [5,5,5]
56 | },
57 | title: {
58 | text : title,
59 | align: "center",
60 | show: false,
61 | style: {
62 | fontSize: '12px',
63 | fontWeight: 'bold',
64 | fontFamily: "Lato",
65 | }
66 |
67 | },
68 | grid: {
69 | show: false,
70 | yaxis: {
71 | lines: {
72 | show: false
73 | }
74 | },
75 | xaxis: {
76 | lines: {
77 | show: false
78 | }
79 | }
80 | },
81 | tooltip: {
82 | theme: "dark",
83 | },
84 | xaxis: {
85 | labels: {
86 | show: false,
87 | },
88 | axisBorder: {
89 | show: false
90 | },
91 | axisTicks: {
92 | show: true,
93 | borderType: 'solid',
94 | color: '#78909C',
95 | height: 4,
96 | offsetX: 0,
97 | offsetY: 0
98 | },
99 | },
100 | yaxis: {
101 | tickAmount: 5,
102 | axisTicks: {
103 | show: true,
104 | },
105 | axisBorder: {
106 | show: true,
107 | color: '#78909C',
108 | offsetX: 0,
109 | offsetY: 0
110 | },
111 | min : 0,
112 | labels : {
113 | formatter: function(val, index) {
114 |
115 | if(val === 0) return '0';
116 | if(val < 1000) return parseFloat(val).toFixed(1);
117 |
118 | var k = 1000,
119 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
120 | i = Math.floor(Math.log(val) / Math.log(k));
121 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
122 |
123 | },
124 | style: {
125 | fontSize: '11px',
126 | fontFamily: 'Lato',
127 | },
128 | },
129 | }
130 | };
131 |
132 |
133 | return (
134 |
135 |
137 | );
138 | });
139 |
140 | export default ChartLine;
141 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartLine04.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartLine = memo(({series, categories,history, height, width="100%", title, border=2, stacked = false }) => {
5 |
6 | var options = {
7 | chart: {
8 | height: height,
9 | type: 'line',
10 | foreColor: '#9e9b9a',
11 | stacked : stacked,
12 | zoom: {
13 | enabled: false
14 | },
15 | animations: {
16 | enabled: true,
17 | },
18 | dynamicAnimation :
19 | {
20 | enabled: true,
21 | },
22 | toolbar: {
23 | show: false,
24 | },
25 | dropShadow: {
26 | enabled: false,
27 | top: 2,
28 | left: 2,
29 | blur: 4,
30 | opacity: 1,
31 | }
32 |
33 | },
34 | markers: {
35 | size: 5,
36 | radius: 0,
37 | strokeWidth: 2,
38 | fillOpacity: 1,
39 | shape: "circle",
40 | },
41 | dataLabels: {
42 | enabled: false
43 | },
44 | legend: {
45 | show: true,
46 | showForSingleSeries: true,
47 | fontSize: '11px',
48 | fontFamily: 'Lato',
49 | },
50 | theme: {
51 | palette : "palette2"
52 | },
53 | stroke: {
54 | curve: 'straight',
55 | width: border
56 | },
57 | title: {
58 | text : title,
59 | align: "center",
60 | show: false,
61 | style: {
62 | fontSize: '14px',
63 | fontWeight: 'bold',
64 | fontFamily: 'Lato',
65 | }
66 |
67 | },
68 | grid: {
69 | show: false,
70 | yaxis: {
71 | lines: {
72 | show: false
73 | }
74 | },
75 | xaxis: {
76 | lines: {
77 | show: false
78 | }
79 | }
80 | },
81 | tooltip: {
82 | theme: "dark",
83 | x : {
84 | format: 'HH:mm',
85 | }
86 | },
87 | xaxis: {
88 | type: 'datetime',
89 | labels: {
90 | format: 'HH:mm',
91 | style: {
92 | fontSize: '11px',
93 | fontFamily: 'Lato',
94 | },
95 | }
96 | },
97 | yaxis: {
98 | tickAmount: 5,
99 | axisTicks: {
100 | show: true,
101 | },
102 | axisBorder: {
103 | show: true,
104 | color: '#78909C',
105 | offsetX: 0,
106 | offsetY: 0
107 | },
108 | min : 0,
109 | labels : {
110 | formatter: function(val, index) {
111 |
112 | if(val === 0) return '0';
113 | if(val < 1000) return parseFloat(val).toFixed(1);
114 |
115 | var k = 1000,
116 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
117 | i = Math.floor(Math.log(val) / Math.log(k));
118 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
119 |
120 | },
121 | style: {
122 | fontSize: '11px',
123 | fontFamily: 'Lato',
124 | },
125 | },
126 |
127 | }
128 | };
129 |
130 |
131 | return (
132 |
133 |
135 | );
136 | });
137 |
138 | export default ChartLine;
139 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartLine05.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartLine = memo(({ series, p50, p90, p95, avg, max, height, width="100%", title, border=2 }) => {
5 |
6 |
7 | var options = {
8 | chart: {
9 | height: height,
10 | type: 'line',
11 | foreColor: '#9e9b9a',
12 | zoom: {
13 | enabled: false
14 | },
15 | animations: {
16 | enabled: true,
17 | },
18 | dynamicAnimation :
19 | {
20 | enabled: true,
21 | },
22 | toolbar: {
23 | show: false,
24 | },
25 | dropShadow: {
26 | enabled: false,
27 | top: 2,
28 | left: 2,
29 | blur: 4,
30 | opacity: 1,
31 | }
32 |
33 | },
34 | annotations: {
35 | yaxis: [
36 | {
37 | y: p90,
38 | strokeDashArray: 20,
39 | borderColor: 'red',
40 | label: {
41 | text: 'p90 : ' + CustomFormatNumberData(p90,2),
42 | offsetX : 900,
43 | offsetY : 9,
44 | position : "left",
45 | borderColor: 'red',
46 | style: {
47 | fontSize: '14px',
48 | fontWeight: 'bold',
49 | fontFamily: 'Lato',
50 | color: 'white',
51 | background: 'red',
52 | },
53 | }
54 | },
55 | {
56 | y: p95,
57 | strokeDashArray: 10,
58 | borderColor: 'gray',
59 | label: {
60 | text: 'p95 : ' + CustomFormatNumberData(p95,2),
61 | offsetX : 600,
62 | offsetY : 9,
63 | position : "left",
64 | borderColor: 'gray',
65 | style: {
66 | fontSize: '14px',
67 | fontWeight: 'bold',
68 | fontFamily: 'Lato',
69 | color: 'white',
70 | background: 'gray',
71 | },
72 | }
73 | },
74 | {
75 | y: avg,
76 | strokeDashArray: 10,
77 | borderColor: 'orange',
78 | label: {
79 | text: 'avg : ' + CustomFormatNumberData(avg,2),
80 | offsetX : 300,
81 | offsetY : 9,
82 | position : "left",
83 | borderColor: 'orange',
84 | style: {
85 | fontSize: '14px',
86 | fontWeight: 'bold',
87 | fontFamily: 'Lato',
88 | color: 'white',
89 | background: 'orange',
90 | },
91 | }
92 | }
93 | ],
94 | },
95 | markers: {
96 | size: 4,
97 | radius: 0,
98 | strokeWidth: 0.1,
99 | fillOpacity: 1,
100 | shape: "circle",
101 | },
102 | dataLabels: {
103 | enabled: false
104 | },
105 | legend: {
106 | show: true,
107 | showForSingleSeries: true,
108 | fontSize: '11px',
109 | fontFamily: 'Lato',
110 | },
111 | stroke: {
112 | curve: 'straight',
113 | width: border
114 | },
115 | title: {
116 | text : title,
117 | align: "center",
118 | show: false,
119 | style: {
120 | fontSize: '14px',
121 | fontWeight: 'bold',
122 | fontFamily: 'Lato',
123 | }
124 |
125 | },
126 | grid: {
127 | show: false,
128 | yaxis: {
129 | lines: {
130 | show: false
131 | }
132 | },
133 | xaxis: {
134 | lines: {
135 | show: false
136 | }
137 | }
138 | },
139 | tooltip: {
140 | theme: "dark",
141 | x : {
142 | format: 'HH:mm',
143 | }
144 | },
145 | xaxis: {
146 | type: 'datetime',
147 | labels: {
148 | format: 'HH:mm',
149 | style: {
150 | fontSize: '11px',
151 | fontFamily: 'Lato',
152 | },
153 | }
154 | },
155 | yaxis: {
156 | tickAmount: 5,
157 | axisTicks: {
158 | show: true,
159 | },
160 | axisBorder: {
161 | show: true,
162 | color: '#78909C',
163 | offsetX: 0,
164 | offsetY: 0
165 | },
166 | min : 0,
167 | labels : {
168 | formatter: function(val, index) {
169 |
170 | if(val === 0) return '0';
171 | if(val < 1000) return parseFloat(val).toFixed(1);
172 |
173 | var k = 1000,
174 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
175 | i = Math.floor(Math.log(val) / Math.log(k));
176 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
177 |
178 | },
179 | style: {
180 | fontSize: '11px',
181 | fontFamily: 'Lato',
182 | },
183 | },
184 |
185 | }
186 | };
187 |
188 |
189 | function CustomFormatNumberData(value,decimalLength) {
190 | if(value == 0) return '0';
191 | if(value < 1024) return parseFloat(value).toFixed(decimalLength);
192 |
193 | var k = 1024,
194 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
195 | i = Math.floor(Math.log(value) / Math.log(k));
196 | return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
197 | }
198 |
199 | return (
200 |
201 |
203 | );
204 | });
205 |
206 | export default ChartLine;
207 |
208 |
209 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartPie-01.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartComponent = memo(({ series, labels, title="", height="350px", width="100%" }) => {
5 |
6 |
7 | var options = {
8 | chart: {
9 | type: 'donut',
10 | foreColor: '#9e9b9a',
11 | zoom: {
12 | enabled: true,
13 | },
14 | },
15 | labels: labels,
16 | stroke: {
17 | colors: ['#fff']
18 | },
19 | fill: {
20 | opacity: 0.8
21 | },
22 | theme: {
23 | monochrome: {
24 | enabled: true
25 | }
26 | },
27 | title: {
28 | text : title,
29 | align: "center",
30 | show: false,
31 | style: {
32 | fontSize: '14px',
33 | fontWeight: 'bold',
34 | fontFamily: 'Lato',
35 | }
36 |
37 | },
38 | legend: {
39 | show: true,
40 | showForSingleSeries: true,
41 | fontSize: '11px',
42 | fontFamily: 'Lato',
43 | position: 'bottom'
44 | },
45 | responsive: [{
46 | breakpoint: 480,
47 | options: {
48 | chart: {
49 | width: 200
50 | },
51 | legend: {
52 | position: 'bottom'
53 | }
54 | }
55 | }],
56 | yaxis: {
57 | tickAmount: 5,
58 | axisTicks: {
59 | show: true,
60 | },
61 | axisBorder: {
62 | show: true,
63 | color: '#78909C',
64 | offsetX: 0,
65 | offsetY: 0
66 | },
67 | min : 0,
68 | labels : {
69 | formatter: function(val, index) {
70 |
71 | if(val === 0) return '0';
72 | if(val < 1000) return parseFloat(val).toFixed(1);
73 |
74 | var k = 1000,
75 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
76 | i = Math.floor(Math.log(val) / Math.log(k));
77 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
78 |
79 | },
80 | style: {
81 | fontSize: '11px',
82 | fontFamily: 'Lato',
83 | },
84 | },
85 | },
86 | dataLabels: {
87 | formatter(val, opts) {
88 | const name = opts.w.globals.labels[opts.seriesIndex]
89 | return [name, val.toFixed(1) + '%']
90 | },
91 | },
92 | };
93 |
94 |
95 | return (
96 |
97 |
99 | );
100 | });
101 |
102 | export default ChartComponent;
103 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartPolar-01.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartComponent = memo(({ series, labels, title="", height="350px", width="100%", onClickEvent }) => {
5 |
6 | function onClickChart(object){
7 | onClickEvent(object);
8 | }
9 |
10 | var options = {
11 | chart: {
12 | type: 'polarArea',
13 | foreColor: '#9e9b9a',
14 | zoom: {
15 | enabled: true,
16 | },
17 | events: {
18 | dataPointSelection: function(event, chartContext, config) {
19 | onClickChart({ selectedItem : config.dataPointIndex } );
20 | }
21 |
22 | },
23 | },
24 | title: {
25 | text : title,
26 | align: "right",
27 | show: false,
28 | style: {
29 | fontSize: '14px',
30 | fontWeight: 'bold',
31 | fontFamily: "Lato",
32 | color : "#2ea597"
33 | }
34 |
35 | },
36 | theme: {
37 | palette : "palette2",
38 | monochrome: {
39 | enabled: true
40 | }
41 | },
42 | labels: labels,
43 | stroke: {
44 | colors: ['#fff']
45 | },
46 | fill: {
47 | opacity: 0.8
48 | },
49 | legend: {
50 | show: true,
51 | showForSingleSeries: true,
52 | fontSize: '11px',
53 | fontFamily: 'Lato',
54 | },
55 | responsive: [{
56 | breakpoint: 480,
57 | options: {
58 | legend: {
59 | position: 'bottom'
60 | }
61 | }
62 | }],
63 | yaxis: {
64 | tickAmount: 3,
65 | axisTicks: {
66 | show: true,
67 | },
68 | axisBorder: {
69 | show: true,
70 | color: '#78909C',
71 | offsetX: 0,
72 | offsetY: 0
73 | },
74 | min : 0,
75 | labels : {
76 | formatter: function(val, index) {
77 |
78 | if(val === 0) return '0';
79 | if(val < 1000) return parseFloat(val).toFixed(1);
80 |
81 | var k = 1000,
82 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
83 | i = Math.floor(Math.log(val) / Math.log(k));
84 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
85 |
86 | },
87 | style: {
88 | fontSize: '11px',
89 | fontFamily: 'Lato',
90 | },
91 | },
92 | }
93 | };
94 |
95 |
96 | return (
97 |
98 |
100 | );
101 | });
102 |
103 | export default ChartComponent;
104 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartPolar-02.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartComponent = memo(({ series, labels, title="", height="350px", width="100%"}) => {
5 |
6 | var options = {
7 | chart: {
8 | type: 'polarArea',
9 | foreColor: '#9e9b9a',
10 | zoom: {
11 | enabled: true,
12 | },
13 | },
14 | title: {
15 | text : title,
16 | align: "right",
17 | show: false,
18 | style: {
19 | fontSize: '14px',
20 | fontWeight: 'bold',
21 | fontFamily: "Lato",
22 | color : "#2ea597"
23 | }
24 |
25 | },
26 | theme: {
27 | palette : "palette2",
28 | monochrome: {
29 | enabled: true
30 | }
31 | },
32 | labels: JSON.parse(labels),
33 | stroke: {
34 | colors: ['#fff']
35 | },
36 | fill: {
37 | opacity: 0.8
38 | },
39 | legend: {
40 | show: true,
41 | showForSingleSeries: true,
42 | fontSize: '11px',
43 | fontFamily: 'Lato',
44 | },
45 | responsive: [{
46 | breakpoint: 480,
47 | options: {
48 | legend: {
49 | position: 'bottom'
50 | }
51 | }
52 | }],
53 | yaxis: {
54 | tickAmount: 3,
55 | axisTicks: {
56 | show: true,
57 | },
58 | axisBorder: {
59 | show: true,
60 | color: '#78909C',
61 | offsetX: 0,
62 | offsetY: 0
63 | },
64 | min : 0,
65 | labels : {
66 | formatter: function(val, index) {
67 |
68 | if(val === 0) return '0';
69 | if(val < 1000) return parseFloat(val).toFixed(1);
70 |
71 | var k = 1000,
72 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
73 | i = Math.floor(Math.log(val) / Math.log(k));
74 | return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
75 |
76 | },
77 | style: {
78 | fontSize: '11px',
79 | fontFamily: 'Lato',
80 | },
81 | },
82 | }
83 | };
84 |
85 |
86 | return (
87 |
88 |
90 | );
91 | });
92 |
93 | export default ChartComponent;
94 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartProgressBar-01.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 |
3 | const Metric = memo(({ value, valueSufix, title, precision, format=1, height="10px", fontSizeTitle = "11px", fontSizeValue = "22px", fontSizeValueSufix = "12px", fontColorTitle = "#2ea597", fontColorValue = "orange", chartColor="#8ea9ff" }) => {
4 |
5 | var counterValue = 0;
6 | if (value > 100){
7 | chartColor = "red";
8 | }
9 |
10 |
11 | try {
12 | switch (format) {
13 | case 1:
14 | counterValue = CustomFormatNumberRaw(value,precision);
15 | break;
16 |
17 | case 2:
18 | counterValue = CustomFormatNumberData(value,precision);
19 | break;
20 |
21 | case 3:
22 | counterValue = CustomFormatNumberRawInteger(value,0);
23 | break;
24 |
25 | }
26 |
27 | }
28 | catch{
29 | console.log('error');
30 | }
31 |
32 |
33 |
34 | function CustomFormatNumberData(value,decimalLength) {
35 | if(value == 0) return '0';
36 | if(value < 1024) return parseFloat(value).toFixed(decimalLength);
37 |
38 | var k = 1024,
39 | sizes = ['', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZT', 'YB'],
40 | i = Math.floor(Math.log(value) / Math.log(k));
41 | return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
42 | }
43 |
44 |
45 | function CustomFormatNumberRaw(value,decimalLength) {
46 | if (value < 100 && decimalLength == 0 )
47 | decimalLength=2;
48 |
49 | if (value==0)
50 | decimalLength=0;
51 |
52 | return value.toLocaleString('en-US', {minimumFractionDigits:decimalLength, maximumFractionDigits:decimalLength});
53 |
54 | }
55 |
56 | function CustomFormatNumberRawInteger(value,decimalLength) {
57 | return value.toLocaleString('en-US', {minimumFractionDigits:decimalLength, maximumFractionDigits:decimalLength});
58 | }
59 |
60 | return (
61 |
62 |
63 | {counterValue}
64 |
65 |
66 | {valueSufix}
67 |
68 |
69 |
76 | )
77 | });
78 |
79 | export default Metric
80 |
81 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartRadialBar01.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartRadial = memo(({ series, height, width, title, fontSizeTitle = "11px", fontSizeValue = "22px", fontColorTitle = "#C6C2C1", fontColorValue = "orange" }) => {
5 |
6 | var options = {
7 | chart: {
8 | type: 'radialBar',
9 | foreColor: '#C6C2C1',
10 | },
11 | plotOptions: {
12 | radialBar: {
13 | hollow: {
14 | size: '70%',
15 | }
16 | },
17 | },
18 | labels: [title],
19 | };
20 |
21 | return (
22 | 69 |
70 |
72 |
73 | {title}
74 |
75 | = 100 ? "100%" : (String( (Math.trunc( parseFloat(value) ) || 0 ) ) + "%" ) ) }}>
71 |
23 |
27 |
28 | );
29 | });
30 |
31 | export default ChartRadial;
32 |
--------------------------------------------------------------------------------
/frontend/src/components/ChartSparkline01.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | const ChartLine = memo(({series, height="60px", width="100%", title, border=2, type="line" }) => {
5 |
6 | var options = {
7 | chart: {
8 | type: type,
9 | sparkline: {
10 | enabled: true
11 | },
12 | },
13 | stroke: {
14 | curve: 'straight'
15 | },
16 | fill: {
17 | opacity: 0.3,
18 | },
19 | yaxis: {
20 | min: 0
21 | },
22 | };
23 |
24 |
25 | return (
26 |
24 |
26 |
27 |
29 | );
30 | });
31 |
32 | export default ChartLine;
33 |
--------------------------------------------------------------------------------
/frontend/src/components/Functions.js:
--------------------------------------------------------------------------------
1 | import { configuration } from '../pages/Configs';
2 | import { createSearchParams } from "react-router-dom";
3 | import Box from "@awsui/components-react/box";
4 |
5 |
6 | //--++ Version Functions
7 |
8 | export async function applicationVersionUpdate(params) {
9 | var version = await gatherVersionJsonFile(params);
10 | return version;
11 | }
12 |
13 |
14 | const gatherVersionJsonFile = async (params) => {
15 | var json = { release : "0.0.0", date : "2023-09-01"}
16 | try {
17 | const response = await fetch(configuration["apps-settings"]["version-code-url"]
18 | + '?' + createSearchParams({
19 | codeId: params.codeId,
20 | moduleId: params.moduleId
21 | }).toString()
22 | );
23 | json = await response.json();
24 | }
25 | catch{
26 |
27 | }
28 | return(json);
29 | }
30 |
31 |
32 | //-- Version Functions
33 | export const gatherLocalVersion = async () => {
34 | var json = { release : "0.0.0", date : "2023-09-01"}
35 | try {
36 | const response = await fetch("/version.json");
37 | json = await response.json();
38 | }
39 | catch{
40 |
41 | }
42 | return(json);
43 | }
44 |
45 |
46 | //--++ Custom Format Functions
47 |
48 | export function customFormatNumber(value,decimalLength) {
49 | if(value == 0) return '0';
50 | if(value < 1024) return parseFloat(value).toFixed(decimalLength);
51 |
52 | var k = 1024,
53 | sizes = ['', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
54 | i = Math.floor(Math.log(value) / Math.log(k));
55 | return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
56 | }
57 |
58 |
59 | export function customFormatNumberLong(value,decimalLength) {
60 | if(value == 0) return '0';
61 | if(value < 1000) return parseFloat(value).toFixed(decimalLength);
62 |
63 | var k = 1000,
64 | sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
65 | i = Math.floor(Math.log(value) / Math.log(k));
66 | return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
67 | }
68 |
69 |
70 | export function customFormatNumberShort(value,decimalLength) {
71 | if (value < 100 && decimalLength == 0 )
72 | decimalLength=2;
73 |
74 | if (value==0)
75 | decimalLength=0;
76 |
77 | return value.toLocaleString('en-US', {minimumFractionDigits:decimalLength, maximumFractionDigits:decimalLength});
78 |
79 | }
80 |
81 |
82 | export function customFormatNumberInteger(value) {
83 |
84 | return value.toLocaleString('en-US', {minimumFractionDigits:0, maximumFractionDigits:0});
85 |
86 | }
87 |
88 | export class classMetric {
89 |
90 |
91 | constructor(arrayMetrics) {
92 |
93 | this.dataHistory = {};
94 |
95 | arrayMetrics.forEach(metric => {
96 |
97 | this.dataHistory = {...this.dataHistory, [metric.name]: { name : metric.name, history : metric.history, data : Array(50).fill(null) } }
98 |
99 | });
100 |
101 |
102 | }
103 |
104 | init(currentObject,currentTime,oldObject,oldTime) {
105 | this.currentObject = currentObject;
106 | this.currentTime = currentTime;
107 | this.oldObject = oldObject;
108 | this.oldTime = oldTime;
109 | }
110 |
111 | newSnapshot(currentObject,currentTime) {
112 |
113 | this.oldObject = this.currentObject;
114 | this.oldTime = this.currentTime;
115 |
116 | this.currentObject = currentObject;
117 | this.currentTime = currentTime;
118 |
119 | }
120 |
121 |
122 | getDelta(propertyName) {
123 | try
124 | {
125 | return (
126 | (
127 | (this.currentObject[propertyName]['Value'] - this.oldObject[propertyName]['Value']) /
128 | (Math.abs(this.currentTime - this.oldTime) / 1000)
129 | ) || 0
130 | ) ;
131 | }
132 | catch(e) {
133 | return 0;
134 | }
135 | }
136 |
137 | getDeltaByValue(propertyName,propertyValue) {
138 | try
139 | {
140 | return (
141 | (
142 | (this.currentObject[propertyName][propertyValue] - this.oldObject[propertyName][propertyValue]) /
143 | (Math.abs(this.currentTime - this.oldTime) / 1000)
144 | ) || 0
145 | ) ;
146 | }
147 | catch(e) {
148 | return 0;
149 | }
150 | }
151 |
152 | getDeltaByIndex(propertyName) {
153 | try
154 | {
155 | return (
156 | (
157 | (this.currentObject[propertyName] - this.oldObject[propertyName]) /
158 | (Math.abs(this.currentTime - this.oldTime) / 1000)
159 | ) || 0
160 | ) ;
161 | }
162 | catch(e) {
163 | return 0;
164 | }
165 | }
166 |
167 | getValue(propertyName) {
168 | try
169 | {
170 | return (this.currentObject[propertyName]['Value']) ;
171 | }
172 | catch(e) {
173 | return 0;
174 | }
175 | }
176 |
177 | getValueByValue(propertyName,propertyValue) {
178 | try
179 | {
180 | return (this.currentObject[propertyName][propertyValue]) ;
181 | }
182 | catch(e) {
183 | return 0;
184 | }
185 | }
186 |
187 | getValueByIndex(propertyName) {
188 | try
189 | {
190 | return (this.currentObject[propertyName]) ;
191 | }
192 | catch(e) {
193 | return 0;
194 | }
195 | }
196 |
197 | addProperty(propertyName)
198 | {
199 | this.dataHistory = {...this.dataHistory, [propertyName]: Array(50).fill(null) }
200 | }
201 |
202 | getPropertyValues (propertyName){
203 | return this.dataHistory[propertyName];
204 | }
205 |
206 |
207 | addPropertyValue (propertyName,propertyValue){
208 | this.dataHistory[propertyName].data.push(propertyValue);
209 | this.dataHistory[propertyName].data = this.dataHistory[propertyName].data.slice(this.dataHistory[propertyName].data.length-this.dataHistory[propertyName].history);
210 |
211 | }
212 |
213 | addPropertyValueByArray (propertyName,propertyValue){
214 | this.dataHistory[propertyName].data = propertyValue;
215 |
216 | }
217 |
218 | }
219 |
220 |
221 |
222 | //--## Table Functions and Variable
223 |
224 |
225 | export function getMatchesCountText(count) {
226 | return count === 1 ? `1 match` : `${count} matches`;
227 | }
228 |
229 |
230 |
231 | export function formatDate(date) {
232 | const dateFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long' });
233 | const timeFormatter = new Intl.DateTimeFormat('en-US', { timeStyle: 'short', hour12: false });
234 | return `${dateFormatter.format(date)}, ${timeFormatter.format(date)}`;
235 | }
236 |
237 |
238 |
239 | export function createLabelFunction(columnName) {
240 | return ({ sorted, descending }) => {
241 | const sortState = sorted ? `sorted ${descending ? 'descending' : 'ascending'}` : 'not sorted';
242 | return `${columnName}, ${sortState}.`;
243 | };
244 | }
245 |
246 |
247 |
248 | export const paginationLabels = {
249 | nextPageLabel: 'Next page',
250 | pageLabel: pageNumber => `Go to page ${pageNumber}`,
251 | previousPageLabel: 'Previous page',
252 | };
253 |
254 |
255 |
256 |
257 | export const pageSizePreference = {
258 | title: 'Select page size',
259 | options: [
260 | { value: 10, label: '10 resources' },
261 | { value: 20, label: '20 resources' },
262 | ],
263 | };
264 |
265 |
266 |
267 | export function EmptyState({ title, subtitle, action }) {
268 | return (
269 |
67 |
99 |
100 | );
101 | }
102 |
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/frontend/src/components/HeaderApp.js:
--------------------------------------------------------------------------------
1 | import TopNavigation from '@cloudscape-design/components/top-navigation';
2 | import { Authenticator } from "@aws-amplify/ui-react";
3 | import { configuration } from '../pages/Configs';
4 | import { applyMode, Mode } from '@cloudscape-design/global-styles';
5 |
6 | export default function App() {
7 |
8 | const handleClickMenu = ({detail}) => {
9 |
10 | switch (detail.id) {
11 |
12 | case 'themeDark':
13 | applyMode(Mode.Dark);
14 | localStorage.setItem("themeMode", "dark");
15 | break;
16 |
17 | case 'themeLight':
18 | applyMode(Mode.Light);
19 | localStorage.setItem("themeMode", "light");
20 | break;
21 |
22 |
23 | }
24 |
25 | };
26 |
27 |
28 | const i18nStrings = {
29 | searchIconAriaLabel: 'Search',
30 | searchDismissIconAriaLabel: 'Close search',
31 | overflowMenuTriggerText: 'More',
32 | overflowMenuTitleText: 'All',
33 | overflowMenuBackIconAriaLabel: 'Back',
34 | overflowMenuDismissIconAriaLabel: 'Close menu',
35 | };
36 |
37 | const profileActions = [
38 | { type: 'button', id: 'profile', text: 'AppVersion : ' + configuration["apps-settings"]["release"]},
39 | {
40 | type: 'menu-dropdown',
41 | id: 'preferences',
42 | text: 'Preferences',
43 | items: [
44 | { type: 'button', id: 'themeDark', text: 'Theme Dark' },
45 | { type: 'button', id: 'themeLight', text: 'Theme Light'},
46 | ]
47 | },
48 | {
49 | type: 'menu-dropdown',
50 | id: 'support-group',
51 | text: 'Support',
52 | items: [
53 | {id: 'documentation',text: 'Documentation'},
54 | { id: 'feedback', text: 'Feedback' },
55 | { id: 'support', text: 'Customer support' },
56 | ],
57 | }
58 | ];
59 |
60 |
61 |
62 | return (
63 |
64 |
65 |
68 |
101 |
102 | )}
103 |
104 |
73 |
74 | {counterValue}{postFix}
75 |
76 |
77 | 78 | {title} 79 | 80 | 81 |
82 | )
83 | });
84 |
85 | export default Metric
86 |
87 |
--------------------------------------------------------------------------------
/frontend/src/components/Metric02.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react';
2 |
3 | const Metric = memo(({ value, title, precision, format=1, fontSizeTitle = "11px", fontSizeValue = "22px", fontColorTitle = "#2ea597", fontColorValue = "orange"}) => {
4 |
5 | var counterValue = 0;
6 |
7 | try {
8 | switch (format) {
9 | case 1:
10 | counterValue = CustomFormatNumberRaw(value,precision);
11 | break;
12 |
13 | case 2:
14 | counterValue = CustomFormatNumberData(value,precision);
15 | break;
16 |
17 | case 3:
18 | counterValue = CustomFormatNumberRawInteger(value,0);
19 | break;
20 |
21 | }
22 |
23 | }
24 | catch{
25 | console.log('error');
26 | }
27 |
28 |
29 |
30 |
31 |
32 |
33 | function CustomFormatNumberData(value,decimalLength) {
34 | if(value == 0) return '0';
35 | if(value < 1024) return parseFloat(value).toFixed(decimalLength);
36 |
37 | var k = 1024,
38 | sizes = ['', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZT', 'YB'],
39 | i = Math.floor(Math.log(value) / Math.log(k));
40 | return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
41 | }
42 |
43 |
44 | function CustomFormatNumberRaw(value,decimalLength) {
45 | if (value < 100 && decimalLength == 0 )
46 | decimalLength=2;
47 |
48 | if (value==0)
49 | decimalLength=0;
50 |
51 | return value.toLocaleString('en-US', {minimumFractionDigits:decimalLength, maximumFractionDigits:decimalLength});
52 |
53 | }
54 |
55 | function CustomFormatNumberRawInteger(value,decimalLength) {
56 | return value.toLocaleString('en-US', {minimumFractionDigits:decimalLength, maximumFractionDigits:decimalLength});
57 | }
58 |
59 | return (
60 | 77 | 78 | {title} 79 | 80 | 81 |
61 |
62 | {counterValue}
63 |
64 |
65 | 66 | {title} 67 | 68 | 69 |
70 | )
71 | });
72 |
73 | export default Metric
74 |
--------------------------------------------------------------------------------
/frontend/src/components/Metric03.js:
--------------------------------------------------------------------------------
1 | import {memo} from 'react'
2 |
3 | const Metric = memo(({ value, title, precision, format=1, fontSizeTitle = "11px", fontSizeValue = "22px", fontColorTitle = "#2ea597", fontColorValue = "orange" }) => {
4 |
5 | var counterValue = 0;
6 |
7 | try {
8 | switch (format) {
9 | case 1:
10 | counterValue = CustomFormatNumberRaw(value,precision);
11 | break;
12 |
13 | case 2:
14 | counterValue = CustomFormatNumberData(value,precision);
15 | break;
16 |
17 | case 3:
18 | counterValue = CustomFormatNumberRawInteger(value,0);
19 | break;
20 |
21 | }
22 |
23 | }
24 | catch{
25 | console.log('error');
26 | }
27 |
28 |
29 | function CustomFormatNumberData(value,decimalLength) {
30 | if(value == 0) return '0';
31 | if(value < 1024) return parseFloat(value).toFixed(decimalLength);
32 |
33 | var k = 1024,
34 | sizes = ['', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZT', 'YB'],
35 | i = Math.floor(Math.log(value) / Math.log(k));
36 | return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
37 | }
38 |
39 |
40 | function CustomFormatNumberRaw(value,decimalLength) {
41 | if (value < 100 && decimalLength == 0 )
42 | decimalLength=2;
43 |
44 | if (value==0)
45 | decimalLength=0;
46 |
47 | return value.toLocaleString('en-US', {minimumFractionDigits:decimalLength, maximumFractionDigits:decimalLength});
48 |
49 | }
50 |
51 | function CustomFormatNumberRawInteger(value,decimalLength) {
52 | return value.toLocaleString('en-US', {minimumFractionDigits:decimalLength, maximumFractionDigits:decimalLength});
53 | }
54 |
55 | return (
56 | 65 | 66 | {title} 67 | 68 | 69 |
57 |
58 | {counterValue}
59 |
60 |
61 | 62 | {title} 63 | 64 | 65 |
66 | )
67 | });
68 |
69 | export default Metric
70 |
--------------------------------------------------------------------------------
/frontend/src/components/Metric04.js:
--------------------------------------------------------------------------------
1 | import {useState,useEffect,useRef} from 'react'
2 | import Chart from 'react-apexcharts';
3 |
4 | function Metric({ value, title, precision, format=1, history = 20, height, width = "100%",type = "bar", fontSizeTitle = "11px", fontSizeValue = "22px", fontColorTitle = "#2ea597", fontColorValue = "orange", chartColorLine = "#F6CE55" }) {
5 |
6 | const dataChart = useRef(Array(history).fill(null));
7 | const [dataset,setDataset] = useState({
8 | value : 0,
9 | chart : [{ data : Array(0).fill(null) }]
10 | });
11 |
12 | var options = {
13 | chart: {
14 | type: 'bar',
15 | sparkline: {
16 | enabled: true
17 | },
18 | animations: {
19 | enabled: false,
20 | },
21 | },
22 | colors: [chartColorLine],
23 | stroke: {
24 | width: 2,
25 | },
26 | plotOptions: {
27 | bar: {
28 | columnWidth: '80%'
29 | }
30 | },
31 | markers: {
32 | size: 0,
33 | strokeColors: '#29313e',
34 | },
35 | xaxis: {
36 | crosshairs: {
37 | width: 1
38 | },
39 | },
40 | grid: {
41 | padding: {
42 | top: 0,
43 | left: 0,
44 | right: 0,
45 | bottom: 0
46 | }
47 | },
48 | tooltip: {
49 | theme: "dark",
50 | fixed: {
51 | enabled: false
52 | },
53 | x: {
54 | show: false
55 | },
56 | y: {
57 | title: {
58 | formatter: function (seriesName) {
59 | return ''
60 | }
61 | }
62 | },
63 | marker: {
64 | show: false
65 | }
66 | }
67 | };
68 |
69 |
70 | function updateMetrics(){
71 | try {
72 |
73 | dataChart.current.push(value);
74 | dataChart.current = dataChart.current.slice(dataChart.current.length-history);
75 |
76 |
77 | switch (format) {
78 | case 1:
79 | setDataset({ value : CustomFormatNumberRaw(value,precision), chart : [{ data : dataChart.current }] });
80 | break;
81 |
82 | case 2:
83 | setDataset({ value : CustomFormatNumberData(value,precision), chart : [{ data : dataChart.current }] });
84 | break;
85 |
86 | case 3:
87 | setDataset({ value : CustomFormatNumberRawInteger(value,0), chart : [{ data : dataChart.current }] });
88 | break;
89 |
90 | }
91 |
92 | }
93 | catch{
94 | console.log('error');
95 | }
96 |
97 |
98 | }
99 |
100 | // eslint-disable-next-line
101 | useEffect(() => {
102 | updateMetrics();
103 | // eslint-disable-next-line react-hooks/exhaustive-deps
104 | }, [value]);
105 |
106 |
107 |
108 | function CustomFormatNumberData(value,decimalLength) {
109 | if(value == 0) return '0';
110 | if(value < 1024) return parseFloat(value).toFixed(decimalLength);
111 |
112 | var k = 1024,
113 | sizes = ['', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZT', 'YB'],
114 | i = Math.floor(Math.log(value) / Math.log(k));
115 | return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
116 | }
117 |
118 |
119 | function CustomFormatNumberRaw(value,decimalLength) {
120 | if (value < 100 && decimalLength == 0 )
121 | decimalLength=2;
122 |
123 | if (value==0)
124 | decimalLength=0;
125 |
126 | return value.toLocaleString('en-US', {minimumFractionDigits:decimalLength, maximumFractionDigits:decimalLength});
127 |
128 | }
129 |
130 | function CustomFormatNumberRawInteger(value,decimalLength) {
131 | return value.toLocaleString('en-US', {minimumFractionDigits:decimalLength, maximumFractionDigits:decimalLength});
132 | }
133 |
134 | return (
135 | 61 | 62 | {title} 63 | 64 | 65 |
136 |
137 |
138 |
149 |
150 |
151 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 | )
169 | }
170 |
171 | export default Metric
172 |
--------------------------------------------------------------------------------
/frontend/src/components/ProtectedApp.js:
--------------------------------------------------------------------------------
1 | import { useAuthenticator } from "@aws-amplify/ui-react";
2 | import { Navigate,useLocation } from "react-router-dom";
3 |
4 | export default function Protected({ children }) {
5 | const { user } = useAuthenticator();
6 | const location = useLocation();
7 |
8 | if (!(user)) {
9 | return |
140 |
141 | {dataset.value}
142 |
143 |
144 | {title}
145 |
146 | |
147 |
|
153 |
154 |
156 | |
157 |
59 |
68 | {title}
69 |
70 | }
71 | columnDefinitions={columnsTable}
72 | visibleColumns={preferences.visibleContent}
73 | items={items}
74 | pagination={
11 |