Skip to content

Commit

Permalink
added activity chart below the main account chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@Miodec
Miodec committed Sep 9, 2020
1 parent 65c4214 commit cbb9032
Show file tree
Hide file tree
Showing 2 changed files with 174 additions and 2 deletions.
5 changes: 5 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2503,6 +2503,11 @@ <h1>key tips</h1>
</div>
<div class="below"></div>
</div>
<div class="group dailyActivityChart">
<div class="chart" style="height: 200px;">
<canvas id="activityChart"></canvas>
</div>
</div>
<div class="triplegroup stats">
<div class="group highestWpm">
<div class="title">highest wpm</div>
Expand Down
171 changes: 169 additions & 2 deletions public/js/account.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -453,7 +453,7 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
distribution: "series",
display: false,
scaleLabel: {
display: true,
display: false,
labelString: "Date",
},
},
Expand Down Expand Up @@ -496,6 +496,85 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
},
});

let activityChart = new Chart($(".pageAccount #activityChart"), {
animationSteps: 60,
type: "bar",
data: {
datasets: [
{
yAxisID: "count",
label: "Tests Completed",
data: [],
trendlineLinear: {
style: "rgba(255,105,180, .8)",
lineStyle: "dotted",
width: 4,
},
},
],
},
options: {
animation: {
duration: 250,
},
legend: {
display: false,
labels: {
fontFamily: "Roboto Mono",
fontColor: "#ffffff",
},
},
responsive: true,
maintainAspectRatio: false,
hover: {
mode: "nearest",
intersect: true,
},
scales: {
xAxes: [
{
ticks: {
fontFamily: "Roboto Mono",
autoSkip: true,
autoSkipPadding: 40,
},
type: "time",
time: {
unit: 'day'
},
bounds: "ticks",
distribution: "series",
display: true,
scaleLabel: {
display: false,
labelString: "Date",
},
offset: true
},
],
yAxes: [
{
id: "count",
ticks: {
fontFamily: "Roboto Mono",
beginAtZero: true,
min: 0,
autoSkip: true,
stepSize: 1,
autoSkipPadding: 40,
},
display: true,
scaleLabel: {
display: true,
labelString: "Tests Completed",
fontFamily: "Roboto Mono",
},
},
],
},
},
});

let hoverChart = new Chart($(".pageAccount #hoverChart"), {
type: "line",
data: {
Expand Down Expand Up @@ -1077,7 +1156,10 @@ function showActiveFilters() {
chartString += aboveChartDisplay.tags.array
.map((id) => {
if (id == "none") return id;
return dbSnapshot.tags.filter((t) => t.id == id)[0].name;
let name = dbSnapshot.tags.filter((t) => t.id == id)[0];
if (name !== undefined) {
return dbSnapshot.tags.filter((t) => t.id == id)[0].name;
}
})
.join(", ");
} else {
Expand Down Expand Up @@ -1454,6 +1536,9 @@ function refreshAccountPage() {
let totalCons10 = 0;
let consCount = 0;

let dailyActivityDays = [];
let activityChartData = [];

filteredResults = [];
$(".pageAccount .history table tbody").empty();
dbSnapshot.results.forEach((result) => {
Expand Down Expand Up @@ -1594,6 +1679,19 @@ function refreshAccountPage() {
//filters done
//=======================================

let resultDate = new Date(result.timestamp);
resultDate.setSeconds(0);
resultDate.setMinutes(0);
resultDate.setHours(0);
resultDate.setMilliseconds(0);
resultDate = resultDate.getTime();

if (Object.keys(activityChartData).includes(String(resultDate))) {
activityChartData[resultDate] = activityChartData[resultDate] + 1;
} else {
activityChartData[resultDate] = 1;
}

tt = 0;
if (result.testDuration == undefined) {
//test finished before testDuration field was introduced - estimate
Expand Down Expand Up @@ -1678,6 +1776,71 @@ function refreshAccountPage() {
loadMoreLines();
////////


let thisDate = new Date(Date.now());
thisDate.setSeconds(0);
thisDate.setMinutes(0);
thisDate.setHours(0);
thisDate.setMilliseconds(0);
thisDate = thisDate.getTime();

let tempChartData = [];
let lastTimestamp = 0;
Object.keys(activityChartData).forEach(date => {

let datecheck;
if (lastTimestamp > 0) {
datecheck = lastTimestamp;
} else {
datecheck = thisDate
}

let numDaysBetweenTheDays = (datecheck - date) / 86400000;

if (numDaysBetweenTheDays > 1) {

if (datecheck === thisDate) {
tempChartData.push({
x: new Date(parseInt(thisDate)),
y: 0
})
}

for (let i = 0; i < numDaysBetweenTheDays - 1; i++){

tempChartData.push({
x: new Date(parseInt(datecheck) - (86400000 * (i+1))),
y: 0
})

}
}


tempChartData.push({
x: new Date(parseInt(date)),
y: activityChartData[date]
})
lastTimestamp = date;
})

// console.log(activityChartData);

activityChart.options.scales.xAxes[0].ticks.minor.fontColor =
themeColors.sub;
activityChart.options.scales.yAxes[0].ticks.minor.fontColor =
themeColors.sub;
activityChart.options.scales.yAxes[0].scaleLabel.fontColor =
themeColors.sub;
activityChart.data.datasets[0].borderColor = themeColors.main;
activityChart.data.datasets[0].backgroundColor = themeColors.main;


activityChart.options.legend.labels.fontColor = themeColors.sub;
activityChart.data.datasets[0].trendlineLinear.style = themeColors.sub;

activityChart.data.datasets[0].data = tempChartData;

resultHistoryChart.options.scales.xAxes[0].ticks.minor.fontColor =
themeColors.sub;
resultHistoryChart.options.scales.yAxes[0].ticks.minor.fontColor =
Expand Down Expand Up @@ -1708,11 +1871,13 @@ function refreshAccountPage() {
if (chartData == [] || chartData.length == 0) {
$(".pageAccount .group.noDataError").removeClass("hidden");
$(".pageAccount .group.chart").addClass("hidden");
$(".pageAccount .group.dailyActivityChart").addClass("hidden");
$(".pageAccount .group.history").addClass("hidden");
$(".pageAccount .triplegroup.stats").addClass("hidden");
} else {
$(".pageAccount .group.noDataError").addClass("hidden");
$(".pageAccount .group.chart").removeClass("hidden");
$(".pageAccount .group.dailyActivityChart").removeClass("hidden");
$(".pageAccount .group.history").removeClass("hidden");
$(".pageAccount .triplegroup.stats").removeClass("hidden");
}
Expand Down Expand Up @@ -1840,6 +2005,8 @@ function refreshAccountPage() {
);

resultHistoryChart.update({ duration: 0 });
activityChart.update({ duration: 0 });


swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
}
Expand Down

0 comments on commit cbb9032

Please sign in to comment.