Skip to content
Permalink
Browse files

Fixes #80: Fixes behavior chart on /statistics on mobile devices

The chart is no longer squished and hard to read on small screens.

Also includes some little styling tweaks for visual improvement.
  • Loading branch information...
CorWatts committed May 19, 2019
1 parent 2d250be commit 01e79ef36f9d3ac633e7db8f5dcbb19d5261342b
Showing with 82 additions and 43 deletions.
  1. +22 −0 site/assets/css/app.scss
  2. +48 −42 site/views/checkin/report.php
  3. +12 −1 site/web/js/checkin/report.js
@@ -52,6 +52,20 @@ p {
}
}

.checkin-report {
.date-period-switcher {
margin-top: 10px;
display: inline;
float: right;
}
.pie-chart-container {
height: 175px;
}
.line-chart-container {
height: 375px;
}
}

#checkin-form {
.btn {
white-space: normal;
@@ -267,3 +281,11 @@ $navbar-default-toggle-border-color: #ddd !default;
}
}
}

@media(max-width: 575px) {
.checkin-report {
.line-chart-container {
height: 275px;
}
}
}
@@ -9,49 +9,55 @@
?>
<h1>Report</h1>

<div class='row'>
<div class='col-md-4'>
<h3>Behaviors by Category</h3>
<canvas id='category-pie-chart'></canvas>
</div>
<div class='col-md-8'>
<h3>Most Frequently Selected Behaviors</h3>
<table class='table table-striped'>
<tr>
<th>Count</th>
<th>Behavior</th>
<th>Category</th>
</tr>
<?php foreach($top_behaviors as $key => $row) {
$num = $key + 1;
print "<tr>".
"<td>{$row['count']}</td>".
"<td>{$row['behavior']['name']}</td>".
"<td>{$row['behavior']['category']['name']}</td>".
"</tr>";
}
?>
</table>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<div>
<h3 style="display: inline;">Your Check-in History</h3>
<div style="display: inline; float: right;" class="btn-group date-period-switcher" data-toggle="buttons">
<label class="btn btn-default active" data-period="30">
<input type="radio" name="options" checked> 30 Days
</label>
<label class="btn btn-default" data-period="90">
<input type="radio" name="options"> 90 Days
</label>
<label class="btn btn-default" data-period="180">
<input type="radio" name="options"> 180 Days
</label>
<div class="checkin-report">
<div class='row'>
<div class='col-sm-4'>
<h3>Behaviors by Category</h3>
<div class='pie-chart-container'>
<canvas id='category-pie-chart'></canvas>
</div>
</div>
<div class='col-sm-8'>
<h3>Most Frequently Selected Behaviors</h3>
<table class='table table-striped'>
<tr>
<th>Count</th>
<th>Behavior</th>
<th>Category</th>
</tr>
<?php foreach($top_behaviors as $key => $row) {
$num = $key + 1;
print "<tr>".
"<td>{$row['count']}</td>".
"<td>{$row['behavior']['name']}</td>".
"<td>{$row['behavior']['category']['name']}</td>".
"</tr>";
}
?>
</table>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<div>
<span class='h3'>Your Check-in History</span>
<div class="btn-group date-period-switcher" data-toggle="buttons">
<label class="btn btn-default active" data-period="30">
<input type="radio" name="options" checked> 30 Days
</label>
<label class="btn btn-default" data-period="90">
<input type="radio" name="options"> 90 Days
</label>
<label class="btn btn-default" data-period="180">
<input type="radio" name="options"> 180 Days
</label>
</div>
</div>
<div class='line-chart-container'>
<canvas id='checkins-line-chart'></canvas>
</div>
</div>
<canvas id='checkins-line-chart'></canvas>
</div>
</div>
</div>
</div>
<?php
$this->registerJson($pie_data, "pie_data");
@@ -14,7 +14,9 @@
options: {
legend: {
display: false
}
},
responsive: true,
maintainAspectRatio: false
}
});

@@ -47,6 +49,15 @@
options: {
tooltips: { mode: 'index', intersect: false },
responsive: true,
maintainAspectRatio: false,
legend: {
labels: {
filter: function(legendItem, chartData) {
// if no data for this dataset, do not show the legend item.
return chartData.datasets[legendItem.datasetIndex].data.filter(Number.isInteger).length
}
}
},
scales: {
xAxes: [{ stacked: true, }],
yAxes: [{

0 comments on commit 01e79ef

Please sign in to comment.
You can’t perform that action at this time.