Skip to content

Commit

Permalink
Merge pull request #20 from aws-samples/aurora/limitless
Browse files Browse the repository at this point in the history 
improve gui for aurora limitless
  • Loading branch information
@snmatus
snmatus authored Jan 6, 2025
2 parents 0e53652 + 29e4a2c commit 5ed4ab7
Show file tree
Hide file tree
Showing 15 changed files with 1,943 additions and 689 deletions.
5 changes: 5 additions & 0 deletions conf/update.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ git clone https://github.com/GitHubRepository/db-top-monitoring.git
cd db-top-monitoring
sudo cp -r server frontend /aws/apps

#Copy aws-exports.json
cp /aws/apps/conf/aws-exports.json /aws/apps/frontend/public/
cp /aws/apps/conf/aws-exports.json /aws/apps/server/


#React Application Installation
cd /aws/apps/frontend/; npm install; npm run build;

Expand Down
4 changes: 2 additions & 2 deletions frontend/public/version.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"release": "0.1.1",
"date":"2023-09-01"
"release": "0.1.5",
"date":"2025-01-06"
}
141 changes: 141 additions & 0 deletions frontend/src/components/ChartArea03.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import {memo} from 'react';
import Chart from 'react-apexcharts';

const ChartLine = memo(({series, categories,history, height, width="100%", title, border=2, stacked=false }) => {

var options = {
chart: {
height: height,
type: 'area',
foreColor: '#9e9b9a',
stacked : stacked,
zoom: {
enabled: false
},
animations: {
enabled: true,
},
dynamicAnimation :
{
enabled: true,
},
toolbar: {
show: false,
},
dropShadow: {
enabled: false,
top: 2,
left: 2,
blur: 4,
opacity: 1,
}

},
markers: {
size: 5,
radius: 0,
strokeWidth: 2,
fillOpacity: 1,
shape: "circle",
},
dataLabels: {
enabled: false
},
legend: {
show: true,
showForSingleSeries: true,
fontSize: '11px',
fontFamily: 'Lato',
},
theme: {
palette : "palette2",
monochrome: {
enabled: true
}
},
stroke: {
curve: 'straight',
width: border
},
title: {
text : title,
align: "center",
show: false,
style: {
fontSize: '14px',
fontWeight: 'bold',
fontFamily: 'Lato',
}

},
grid: {
show: false,
yaxis: {
lines: {
show: false
}
},
xaxis: {
lines: {
show: false
}
}
},
tooltip: {
theme: "dark",
x : {
format: 'HH:mm',
}
},
xaxis: {
type: 'datetime',
labels: {
format: 'HH:mm',
style: {
fontSize: '11px',
fontFamily: 'Lato',
},
}
},
yaxis: {
tickAmount: 5,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#78909C',
offsetX: 0,
offsetY: 0
},
min : 0,
labels : {
formatter: function(val, index) {

if(val === 0) return '0';
if(val < 1000) return parseFloat(val).toFixed(1);

var k = 1000,
sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
i = Math.floor(Math.log(val) / Math.log(k));
return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];

},
style: {
fontSize: '11px',
fontFamily: 'Lato',
},
},

}
};


return (
<div>
<Chart options={options} series={JSON.parse(series)} type="area" width={width} height={height} />
</div>
);
});

export default ChartLine;
6 changes: 5 additions & 1 deletion frontend/src/components/ChartBar01.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import {memo} from 'react';
import Chart from 'react-apexcharts';


const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp }) => {
const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp, stacked=false }) => {

var options = {
chart: {
height: height,
type: 'bar',
stacked : stacked,
foreColor: '#2ea597',
zoom: {
enabled: false
Expand All @@ -33,6 +34,9 @@ const ChartBar = memo(({series,history, height, width="100%", title, colors=[],
curve: 'smooth',
width: 1
},
theme: {
palette : "palette2"
},
markers: {
size: 3,
strokeWidth: 0,
Expand Down
150 changes: 150 additions & 0 deletions frontend/src/components/ChartBar05.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import {memo} from 'react';
import Chart from 'react-apexcharts';


const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp, maximum=100 }) => {

var options = {
chart: {
height: height,
type: 'bar',
foreColor: '#2ea597',
zoom: {
enabled: false
},
animations: {
enabled: true,
easing: 'easeinout',
},
dynamicAnimation :
{
enabled: true,
},
toolbar: {
show: false,
}

},
dataLabels: {
enabled: false
},
colors : colors,
stroke: {
curve: 'smooth',
width: 1
},
markers: {
size: 3,
strokeWidth: 0,
hover: {
size: 9
}
},
plotOptions: {
bar: {
borderRadius: 2,

}
},
tooltip: {
theme: "dark",
x : {
format: 'HH:mm',
}
},
title: {
text : title,
align: "center",
show: false,
style: {
fontSize: '14px',
fontWeight: 'bold',
fontFamily: "Lato",
color : "#2ea597"
}

},
grid: {
show: false,
yaxis: {
lines: {
show: false
}
},
xaxis: {
lines: {
show: false
}
}
},
xaxis: {
type: 'datetime',
labels: {
format: 'HH:mm',
style: {
fontSize: '11px',
fontFamily: 'Lato',
},
}
},
yaxis: {
tickAmount: 5,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#78909C',
offsetX: 0,
offsetY: 0
},
min : 0,
max : maximum,
labels : {
formatter: function(val, index) {

if(val === 0) return '0';
if(val < 1000) return parseFloat(val).toFixed(0);

var k = 1000,
sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
i = Math.floor(Math.log(val) / Math.log(k));
return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];

},
style: {
fontSize: '11px',
fontFamily: 'Lato',
},
},

},
annotations: {
yaxis: [
{
y: maximum,
strokeDashArray: 10,
borderColor: 'gray'
},
],
},
};

function CustomFormatNumberData(value,decimalLength) {
if(value == 0) return '0';
if(value < 1024) return parseFloat(value).toFixed(decimalLength);

var k = 1024,
sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
i = Math.floor(Math.log(value) / Math.log(k));
return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
}

return (
<div>
<Chart options={options} series={JSON.parse(series)} type="bar" width={width} height={height} />
</div>
);
});

export default ChartBar;
5 changes: 3 additions & 2 deletions frontend/src/components/ChartLine04.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import {memo} from 'react';
import Chart from 'react-apexcharts';

const ChartLine = memo(({series, categories,history, height, width="100%", title, border=2 }) => {
const ChartLine = memo(({series, categories,history, height, width="100%", title, border=2, stacked = false }) => {

var options = {
chart: {
height: height,
type: 'line',
foreColor: '#9e9b9a',
foreColor: '#9e9b9a',
stacked : stacked,
zoom: {
enabled: false
},
Expand Down
Loading

0 comments on commit 5ed4ab7

Please sign in to comment.