From 7552b7157511c794607f3f08c4519bc1a77d3003 Mon Sep 17 00:00:00 2001
From: Alexis Caldwell <46656008+acaldwell1997@users.noreply.github.com>
Date: Wed, 9 Nov 2022 00:49:47 -0600
Subject: [PATCH 01/11] Update script.js
---
CityWebServer/wwwroot/script.js | 40 ++++++++++++++++++++++++++++-----
1 file changed, 35 insertions(+), 5 deletions(-)
diff --git a/CityWebServer/wwwroot/script.js b/CityWebServer/wwwroot/script.js
index 2c4bf98..121b68b 100644
--- a/CityWebServer/wwwroot/script.js
+++ b/CityWebServer/wwwroot/script.js
@@ -1,4 +1,4 @@
-function initializeChart() {
+function initializeSplineChart() {
var c = new Highcharts.Chart({
chart: {
renderTo: 'chart',
@@ -24,6 +24,32 @@ function initializeChart() {
return c;
}
+function initializePieChart() {
+ var c = new Highcharts.Chart({
+ chart: {
+ renderTo: 'chart2',
+ defaultSeriesType: 'pie',
+ events: { }
+ },
+ title: {
+ text: 'Statistics'
+ },
+ xAxis: {
+ type: 'datetime',
+ tickPixelInterval: 150
+ },
+ yAxis: {
+ minPadding: 0.2,
+ maxPadding: 0.2,
+ title: {
+ text: 'Value',
+ margin: 80
+ }
+ }
+ });
+ return c;
+}
+
function deleteUnusedSeries(chart, seriesArray)
{
// seriesArray is an array that contains only the NAMES of the series that were updated this tick.
@@ -89,12 +115,16 @@ function updateChart(vm, chart)
{
var district = districts[i];
var districtName = district.DistrictName();
-
+
var seriesName = districtName + " - Population";
+ var seriesName2 = districtName + " - Jobs";
+ var seriesName3 = districtName + " - Density";
var population = district.TotalPopulationCount();
- addOrUpdateSeries(chart, seriesName, population, vm.Time());
- updatedSeries.push(seriesName);
+ var jobs = district.CurrentJobs();
+ addOrUpdateSeries(chart, seriesName, population, vm.Time());
+ addOrUpdateSeries(chart, seriesName2, jobs, vm.Time());
+ updatedSeries.push(seriesName);
deleteUnusedSeries(chart, updatedSeries);
}
chart.redraw();
-}
\ No newline at end of file
+}
From dedf771b5f27d73ce9ebe9bbb8c46bc051090dd7 Mon Sep 17 00:00:00 2001
From: Alexis Caldwell <46656008+acaldwell1997@users.noreply.github.com>
Date: Wed, 9 Nov 2022 00:54:31 -0600
Subject: [PATCH 02/11] Update script.js
---
CityWebServer/wwwroot/script.js | 111 ++++++++++++++++++++++++++++++++
1 file changed, 111 insertions(+)
diff --git a/CityWebServer/wwwroot/script.js b/CityWebServer/wwwroot/script.js
index 121b68b..01d67c0 100644
--- a/CityWebServer/wwwroot/script.js
+++ b/CityWebServer/wwwroot/script.js
@@ -128,3 +128,114 @@ function updateChart(vm, chart)
}
chart.redraw();
}
+
+function filterTable() {
+ // Declare variables
+ var input, filter, table, tr, td, i, txtValue;
+ input = document.getElementById("searchInput");
+ filter = input.value.toUpperCase();
+ table = document.getElementById("mainDataTable");
+ tr = table.getElementsByTagName("tr");
+
+ // Loop through all table rows, and hide those who don't match the search query
+ for (i = 0; i < tr.length; i++) {
+ td = tr[i].getElementsByTagName("td")[0];
+ if (td) {
+ txtValue = td.textContent || td.innerText;
+ if (txtValue.toUpperCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } else {
+ tr[i].style.display = "none";
+ }
+ }
+ }
+}
+
+function sortTable(n) {
+ var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+ table = document.getElementById("mainDataTable");
+ switching = true;
+ //Set the sorting direction to ascending:
+ dir = "asc";
+ /*Make a loop that will continue until
+ no switching has been done:*/
+ while (switching) {
+ //start by saying: no switching is done:
+ switching = false;
+ rows = table.rows;
+ /*Loop through all table rows (except the
+ first, which contains table headers):*/
+ for (i = 1; i < (rows.length - 1); i++) {
+ //start by saying there should be no switching:
+ shouldSwitch = false;
+ /*Get the two elements you want to compare,
+ one from current row and one from the next:*/
+ x = rows[i].getElementsByTagName("TD")[n];
+ y = rows[i + 1].getElementsByTagName("TD")[n];
+ /*check if the two rows should switch place,
+ based on the direction, asc or desc:*/
+ if (dir == "asc") {
+ if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+ //if so, mark as a switch and break the loop:
+ shouldSwitch= true;
+ break;
+ }
+ } else if (dir == "desc") {
+ if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+ //if so, mark as a switch and break the loop:
+ shouldSwitch = true;
+ break;
+ }
+ }
+ }
+ if (shouldSwitch) {
+ /*If a switch has been marked, make the switch
+ and mark that a switch has been done:*/
+ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+ switching = true;
+ //Each time a switch is done, increase this count by 1:
+ switchcount ++;
+ } else {
+ /*If no switching has been done AND the direction is "asc",
+ set the direction to "desc" and run the while loop again.*/
+ if (switchcount == 0 && dir == "asc") {
+ dir = "desc";
+ switching = true;
+ }
+ }
+ }
+}
+
+ var endpoint = "./CityInfo";
+ var viewModel;
+ var chart;
+ var chart2;
+ var initialized = false;
+ var lastDate;
+ let history = [];
+
+
+ // Update the data once every second.
+ window.setInterval(function ()
+ {
+ $.getJSON(endpoint, function(data) {
+ if (initialized) {
+ ko.mapping.fromJS(data, viewModel);
+ if (lastDate !== viewModel.Time()) {
+ updateChart(viewModel, chart);
+ lastDate = viewModel.Time();
+ } else {
+ console.log("Same Date: " + lastDate);
+ }
+ } else {
+ initialized = true;
+ viewModel = ko.mapping.fromJS(data);
+ ko.applyBindings(viewModel);
+ chart = initializeSplineChart(viewModel);
+ }
+ });
+ }, 2000); // Every two seconds.
+
+ function appendHistoryTable(){
+ console.log(history)
+ }
From 94225baa548eafeb561be922edcb7b55485dfc7c Mon Sep 17 00:00:00 2001
From: Alexis Caldwell <46656008+acaldwell1997@users.noreply.github.com>
Date: Sat, 12 Nov 2022 11:20:32 -0600
Subject: [PATCH 03/11] Update script.js
---
CityWebServer/wwwroot/script.js | 173 ++++++++++++++++++--------------
1 file changed, 99 insertions(+), 74 deletions(-)
diff --git a/CityWebServer/wwwroot/script.js b/CityWebServer/wwwroot/script.js
index 01d67c0..09562b0 100644
--- a/CityWebServer/wwwroot/script.js
+++ b/CityWebServer/wwwroot/script.js
@@ -1,4 +1,30 @@
+var graphChoice = 'Default';
+var querySelect = document.querySelectorAll('#graphOptions div');
+var endpoint = "./CityInfo";
+var viewModel;
+var chart;
+var initialized = false;
+var lastDate;
+let history = [];
+
+for(var i = 0; i < querySelect.length; i++){
+ querySelect[i].addEventListener("click", updateGraphChoice);
+}
+
+function updateGraphChoice(e){
+ graphChoice = e.currentTarget.innerHTML;
+ //console.log('before delete', chart.series)
+ chart.destroy();
+ chart = initializeSplineChart(viewModel);
+ updateChart(viewModel, chart);
+ //console.log('after delete', chart.series)
+}
+
function initializeSplineChart() {
+var t = graphChoice;
+if(graphChoice == "Default"){
+t = "Statistics"
+}
var c = new Highcharts.Chart({
chart: {
renderTo: 'chart',
@@ -6,77 +32,30 @@ function initializeSplineChart() {
events: { }
},
title: {
- text: 'Statistics'
- },
- xAxis: {
- type: 'datetime',
- tickPixelInterval: 150
- },
- yAxis: {
- minPadding: 0.2,
- maxPadding: 0.2,
- title: {
- text: 'Value',
- margin: 80
- }
- }
- });
- return c;
-}
-
-function initializePieChart() {
- var c = new Highcharts.Chart({
- chart: {
- renderTo: 'chart2',
- defaultSeriesType: 'pie',
- events: { }
- },
- title: {
- text: 'Statistics'
+ text: t
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
- minPadding: 0.2,
- maxPadding: 0.2,
+ minPadding: .02,
+ maxPadding: .02,
title: {
- text: 'Value',
- margin: 80
+ text: 'Values',
+ margin: 5
}
}
});
return c;
}
-function deleteUnusedSeries(chart, seriesArray)
-{
- // seriesArray is an array that contains only the NAMES of the series that were updated this tick.
-
- //for (var j = 0; j < chart.series.length; j++) {
- // var series = chart.series[j];
- // var isUsed = false;
- // for (var i = 0; i < seriesArray.length; i++) {
- // var usedSeriesName = seriesArray[i];
- // if (series.name == usedSeriesName) {
- // isUsed = true;
- // }
- // }
-
- // if (!isUsed) {
- // //console.log("Removing: " + chart.series[j].name);
- // chart.series[j].remove();
- // j = -1;
- // }
-
- //}
-}
function addOrUpdateSeries(theChart, seriesName, value, valueName)
{
var series;
var matchFound = false;
+
if(theChart.series.length > 0)
{
for(var s = 0; s < theChart.series.length; s++)
@@ -85,14 +64,13 @@ function addOrUpdateSeries(theChart, seriesName, value, valueName)
{
series = theChart.series[s];
matchFound = true;
- s = theChart.series.length; // Stop looping
+ s = theChart.series.length;
}
}
}
if(!matchFound)
{
- //console.log("Adding series: " + seriesName);
var seriesOptions = {
id: seriesName,
name: seriesName,
@@ -111,24 +89,78 @@ function updateChart(vm, chart)
{
var updatedSeries = [];
var districts = vm.Districts();
+
+ var time = formatDate(vm.Time());
+ console.log(time);
+ var seriesName;
+ var dataPoint;
+
for(var i = 0; i < districts.length; i++)
{
var district = districts[i];
- var districtName = district.DistrictName();
+ seriesName = district.DistrictName();
+
+ if(graphChoice == "Population"){
+ dataPoint = district.TotalPopulationCount();
+ }
+ if(graphChoice == "Tourists"){
+ dataPoint = district.WeeklyTouristVisits();
+ }
+ if(graphChoice == "Households"){
+ dataPoint = district.CurrentHouseholds();
+ }
+ if(graphChoice == "Jobs Occupied"){
+ dataPoint = district.CurrentJobs();
+ }
+ if(graphChoice == "Household Vacancies"){
+ dataPoint = district.AvailableHouseholds()-district.CurrentHouseholds();
+ }
+ if(graphChoice == "Job Vacancies"){
+ dataPoint = district.AvailableJobs()-district.CurrentJobs();
+ }
+ if(graphChoice == "Household Fullness"){
+ dataPoint = doMath(district.CurrentHouseholds(), district.AvailableHouseholds());
+ }
+ if(graphChoice == "Job Fullness"){
+ dataPoint = doMath(district.CurrentJobs(), district.AvailableJobs());
+ }
+ if(graphChoice == "Tourist Saturation"){
+ dataPoint = doMath(district.WeeklyTouristVisits(), district.TotalPopulationCount());
+ }
+ if(graphChoice == "Default"){
+ graphChoice = 'Population';
+ dataPoint = district.TotalPopulationCount();
+ }
+
+
+ //console.log(dataPoint);
+ seriesName = seriesName + " - " + graphChoice;
+ addOrUpdateSeries(chart, seriesName, dataPoint, time);
+
+
- var seriesName = districtName + " - Population";
- var seriesName2 = districtName + " - Jobs";
- var seriesName3 = districtName + " - Density";
- var population = district.TotalPopulationCount();
- var jobs = district.CurrentJobs();
- addOrUpdateSeries(chart, seriesName, population, vm.Time());
- addOrUpdateSeries(chart, seriesName2, jobs, vm.Time());
updatedSeries.push(seriesName);
- deleteUnusedSeries(chart, updatedSeries);
}
chart.redraw();
}
+function formatDate(t){
+ t = Date.parse(t);
+ return t;
+}
+
+function doMath(v1,v2){
+ var r = 0;
+
+ if(!isFinite((v1 / v2)*100) || isNaN((v1 / v2)*100)){
+ r = 0;
+ } else {
+ r = ((v1 / v2)*100).toFixed(0);
+ r = parseInt(r);
+}
+ return r;
+}
+
function filterTable() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
@@ -206,14 +238,7 @@ function sortTable(n) {
}
}
- var endpoint = "./CityInfo";
- var viewModel;
- var chart;
- var chart2;
- var initialized = false;
- var lastDate;
- let history = [];
-
+
// Update the data once every second.
window.setInterval(function ()
@@ -225,13 +250,13 @@ function sortTable(n) {
updateChart(viewModel, chart);
lastDate = viewModel.Time();
} else {
- console.log("Same Date: " + lastDate);
+ //console.log("Same Date: " + lastDate);
}
} else {
initialized = true;
viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
- chart = initializeSplineChart(viewModel);
+ chart = initializeSplineChart(viewModel);
}
});
}, 2000); // Every two seconds.
From 40595e6b7198ca80bed56d2e921b54245b734451 Mon Sep 17 00:00:00 2001
From: Alexis Caldwell <46656008+acaldwell1997@users.noreply.github.com>
Date: Sat, 12 Nov 2022 11:21:43 -0600
Subject: [PATCH 04/11] Update index.html
---
CityWebServer/wwwroot/index.html | 130 +++++++++++++++----------------
1 file changed, 63 insertions(+), 67 deletions(-)
diff --git a/CityWebServer/wwwroot/index.html b/CityWebServer/wwwroot/index.html
index ebe0dd3..5511320 100644
--- a/CityWebServer/wwwroot/index.html
+++ b/CityWebServer/wwwroot/index.html
@@ -1,11 +1,10 @@
-
- Cities: Skylines - Test
+ City Statistics