Skip to content

Commit

Permalink
First part of migration to chart.js for the user activity chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@wilsonge
wilsonge committed Jan 11, 2024
1 parent 8b4937d commit 33d6401
Show file tree
Hide file tree
Showing 7 changed files with 11,551 additions and 48 deletions.
17 changes: 17 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"blueimp-tmpl": "^3.0.0",
"bootstrap": "^5.3.2",
"bootstrap-select": "1.14.0-beta3",
"chart.js": "^4.4.1",
"d3": "^3.5.17",
"jquery": "^3.7.1",
"jquery-simple-color": "github:recurser/jquery-simple-color",
Expand Down
116 changes: 70 additions & 46 deletions templates/activity/useractivity.index.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
{{ parent() }}

<link rel="stylesheet" href="{{ asset('css/vendor/datepicker.css') }}" />
<link rel="stylesheet" href="{{ asset('css/jqplot/jquery.jqplot.min.css', 'debug') }}" />
<link rel="stylesheet" href="{{ asset('css/jquery-ui/jquery-ui.min.css', 'debug') }}" />
{% endblock %}

{% block content %}
Expand All @@ -19,35 +17,36 @@
</div>

<div id="barchart" style="width:700px; height:600px;" data-href="{{ uri.base.path }}activity/user/{{ project.alias }}/query"></div>
<div id="new-barchart"></div>

<br />
<h2>Chart Options</h2>
<div class="form-inline">
<fieldset>
<label>Period</label>
<select id="period" name="period" class="input" size="1">
<label for="period">Period</label>
<select id="period" name="period" class="form-control form-control-sm d-inline-block w-auto" size="1">
<option value="1" selected="selected">7 Days</option>
<option value="2">30 Days</option>
<option value="3">90 Days</option>
<option value="4">1 Year</option>
<option value="5">Custom Period</option>
</select>

<label>Type</label>
<select id="type" name="type" class="input-small" size="1">
<label for="type">Type</label>
<select id="type" name="type" class="form-control form-control-sm d-inline-block w-auto" size="1">
<option value="0" selected="selected">All</option>
<option value="1">Tracker</option>
<option value="2">Test</option>
<option value="3">Code</option>
</select>

<button class="btn btn-primary" id="dataUpdate">Update Chart</button>
<button type="button" class="btn btn-primary btn-sm" id="dataUpdate">Update Chart</button>
<br />
<br />
<div id="hidedates" class="form-inline">
<label>Start Date</label>
<label for="start_date">Start Date</label>
<input id="start_date" class="datepicker-input input-small" type="text" />
<label>End Date</label>
<label for="end_date">End Date</label>
<input id="end_date" class="datepicker-input input-small" type="text" />
</div>

Expand All @@ -60,49 +59,74 @@

<script src="{{ asset('js/vendor/datepicker.js') }}"></script>
<script src="{{ asset('js/vendor/datepicker/locales/en-GB.js') }}"></script>
<script src="{{ asset('js/jqplot/jquery.jqplot.min.js', 'debug') }}"></script>
<script src="{{ asset('js/jqplot/jqplot.barRenderer.js', 'debug') }}"></script>
<script src="{{ asset('js/jqplot/jqplot.categoryAxisRenderer.js', 'debug') }}"></script>
<script src="{{ asset('js/jqplot/jqplot.pointLabels.js', 'debug') }}"></script>
<script src="{{ asset('js/jqplot/jqplot.highlighter.js', 'debug') }}"></script>
<script src="{{ asset('js/jqplot/barchart.js', 'debug') }}"></script>
<script src="{{ asset('js/jquery-ui/jquery-ui.min.js', 'debug') }}"></script>
<script src="{{ asset('js/vendor/chart.js') }}"></script>

<script type="text/javascript">
(function ($) {
$(document).ready(function () {
var barchart = new $.JQPLOTBarchart('barchart', 'barchart', 'horizontal', true, '10');
$('#dataUpdate').click(function () {
// add the form variables to the URL
var chartContainer = $('#barchart'),
period = $('#period').val(),
type = $('#type').val(),
startdate = $('#start_date').val(),
enddate = $('#end_date').val(),
href = '{{ uri.base.path }}activity/user/{{ project.alias }}/query?period=' + period + '&activity_type=' + type;
if (period == 5) {
href += '&startdate=' + startdate + '&enddate=' + enddate;
}
chartContainer.empty();
chartContainer.attr('data-href', href);
barchart = new $.JQPLOTBarchart('barchart', 'barchart', 'horizontal', true, '10');
});
document.getElementById('hidedates').style.display = 'none';
document.getElementById('period').addEventListener('change', (event) => {
if (event.target.value === '5') {
document.getElementById('hidedates').style.removeProperty('display');
} else {
document.getElementById('hidedates').style.display = 'none';
}
});
$('#hidedates').hide();
const ctx = document.getElementById('new-barchart');
$('#period').change(function () {
if ($(this).val() == 5) {
$('#hidedates').show();
} else {
$('#hidedates').hide();
const myChart = new Chart(ctx, {
type: 'bar',
data: {},
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
}
},
plugins: {
title: {
display: true,
text: 'Custom Chart Title'
}
}
}
});
function updateChart(){
const period = document.getElementById('period').value;
const type = document.getElementById('type').value;
const start_date = document.getElementById('start_date').value;
const end_date = document.getElementById('end_date').value;
// add the form variables to the URL
let href = '{{ uri.base.path }}activity/user/{{ project.alias }}/query?period=' + period + '&activity_type=' + type;
if (period === '5') {
href += '&startdate=' + start_date + '&enddate=' + end_date;
}
fetch(href)
.then((response) => response.json())
.then((json) => {
console.log(json);
myChart.data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}
]
};
myChart.update();
});
});
})(jQuery);
}
// Populate the chart with initial data and set up the click event for any modifications
document.getElementById('dataUpdate').addEventListener('click', updateChart);
updateChart();
const datepickerElements = document.querySelectorAll('.datepicker-input');
Expand Down
7 changes: 5 additions & 2 deletions webpack.mix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ mix.override((config) => {
// jQuery
mix.copy('node_modules/jquery/dist/jquery.min.js', 'www/media/js/vendor/jquery.js');

// Bootstrap v2.3.2 release order: bootstrap-transition.js, bootstrap-alert.js, bootstrap-button.js, bootstrap-carousel.js, bootstrap-collapse.js, bootstrap-dropdown.js, bootstrap-modal.js, bootstrap-tooltip.js, bootstrap-popover.js, bootstrap-scrollspy.js, bootstrap-tab.js, bootstrap-typeahead.js, bootstrap-affix.js
// TODO - Just pull the modified version from the CMS?
// Bootstrap
mix.copy('node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', 'www/media/js/vendor/bootstrap.min.js');
mix.copy('node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map', 'www/media/js/vendor/bootstrap.min.js.map');

Expand Down Expand Up @@ -84,6 +83,10 @@ mix.copy('node_modules/vanillajs-datepicker/dist/css/datepicker-bs5.min.css', 'w
mix.copy('node_modules/vanillajs-datepicker/dist/js/datepicker.min.js', 'www/media/js/vendor/datepicker.js');
mix.copy('node_modules/vanillajs-datepicker/dist/js/locales/en-GB.js', 'www/media/js/vendor/datepicker/locales/en-GB.js');

// Chart.js
mix.copy('node_modules/chart.js/dist/chart.js', 'www/media/js/vendor/chart.js');
mix.copy('node_modules/chart.js/dist/chart.js.map', 'www/media/js/vendor/chart.js.map');

// d3
mix.copy('node_modules/d3/d3.min.js', 'www/media/js/vendor/d3.js');

Expand Down
Loading

0 comments on commit 33d6401

Please sign in to comment.