Skip to content

Commit 33d6401

Browse files
wilsongewilsonge
committed
First part of migration to chart.js for the user activity chart
1 parent 8b4937d commit 33d6401

File tree

7 files changed

+11551
-48
lines changed

7 files changed

+11551
-48
lines changed

‎package-lock.json

+17
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"blueimp-tmpl": "^3.0.0",
2222
"bootstrap": "^5.3.2",
2323
"bootstrap-select": "1.14.0-beta3",
24+
"chart.js": "^4.4.1",
2425
"d3": "^3.5.17",
2526
"jquery": "^3.7.1",
2627
"jquery-simple-color": "github:recurser/jquery-simple-color",

‎templates/activity/useractivity.index.twig

+70-46
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
{{ parent() }}
1010

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

1614
{% block content %}
@@ -19,35 +17,36 @@
1917
</div>
2018

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

2322
<br />
2423
<h2>Chart Options</h2>
2524
<div class="form-inline">
2625
<fieldset>
27-
<label>Period</label>
28-
<select id="period" name="period" class="input" size="1">
26+
<label for="period">Period</label>
27+
<select id="period" name="period" class="form-control form-control-sm d-inline-block w-auto" size="1">
2928
<option value="1" selected="selected">7 Days</option>
3029
<option value="2">30 Days</option>
3130
<option value="3">90 Days</option>
3231
<option value="4">1 Year</option>
3332
<option value="5">Custom Period</option>
3433
</select>
3534

36-
<label>Type</label>
37-
<select id="type" name="type" class="input-small" size="1">
35+
<label for="type">Type</label>
36+
<select id="type" name="type" class="form-control form-control-sm d-inline-block w-auto" size="1">
3837
<option value="0" selected="selected">All</option>
3938
<option value="1">Tracker</option>
4039
<option value="2">Test</option>
4140
<option value="3">Code</option>
4241
</select>
4342

44-
<button class="btn btn-primary" id="dataUpdate">Update Chart</button>
43+
<button type="button" class="btn btn-primary btn-sm" id="dataUpdate">Update Chart</button>
4544
<br />
4645
<br />
4746
<div id="hidedates" class="form-inline">
48-
<label>Start Date</label>
47+
<label for="start_date">Start Date</label>
4948
<input id="start_date" class="datepicker-input input-small" type="text" />
50-
<label>End Date</label>
49+
<label for="end_date">End Date</label>
5150
<input id="end_date" class="datepicker-input input-small" type="text" />
5251
</div>
5352

@@ -60,49 +59,74 @@
6059

6160
<script src="{{ asset('js/vendor/datepicker.js') }}"></script>
6261
<script src="{{ asset('js/vendor/datepicker/locales/en-GB.js') }}"></script>
63-
<script src="{{ asset('js/jqplot/jquery.jqplot.min.js', 'debug') }}"></script>
64-
<script src="{{ asset('js/jqplot/jqplot.barRenderer.js', 'debug') }}"></script>
65-
<script src="{{ asset('js/jqplot/jqplot.categoryAxisRenderer.js', 'debug') }}"></script>
66-
<script src="{{ asset('js/jqplot/jqplot.pointLabels.js', 'debug') }}"></script>
67-
<script src="{{ asset('js/jqplot/jqplot.highlighter.js', 'debug') }}"></script>
68-
<script src="{{ asset('js/jqplot/barchart.js', 'debug') }}"></script>
69-
<script src="{{ asset('js/jquery-ui/jquery-ui.min.js', 'debug') }}"></script>
62+
<script src="{{ asset('js/vendor/chart.js') }}"></script>
7063

7164
<script type="text/javascript">
72-
(function ($) {
73-
$(document).ready(function () {
74-
var barchart = new $.JQPLOTBarchart('barchart', 'barchart', 'horizontal', true, '10');
75-
76-
$('#dataUpdate').click(function () {
77-
// add the form variables to the URL
78-
var chartContainer = $('#barchart'),
79-
period = $('#period').val(),
80-
type = $('#type').val(),
81-
startdate = $('#start_date').val(),
82-
enddate = $('#end_date').val(),
83-
href = '{{ uri.base.path }}activity/user/{{ project.alias }}/query?period=' + period + '&activity_type=' + type;
84-
85-
if (period == 5) {
86-
href += '&startdate=' + startdate + '&enddate=' + enddate;
87-
}
88-
89-
chartContainer.empty();
90-
chartContainer.attr('data-href', href);
91-
92-
barchart = new $.JQPLOTBarchart('barchart', 'barchart', 'horizontal', true, '10');
93-
});
65+
document.getElementById('hidedates').style.display = 'none';
66+
67+
document.getElementById('period').addEventListener('change', (event) => {
68+
if (event.target.value === '5') {
69+
document.getElementById('hidedates').style.removeProperty('display');
70+
} else {
71+
document.getElementById('hidedates').style.display = 'none';
72+
}
73+
});
9474
95-
$('#hidedates').hide();
75+
const ctx = document.getElementById('new-barchart');
9676
97-
$('#period').change(function () {
98-
if ($(this).val() == 5) {
99-
$('#hidedates').show();
100-
} else {
101-
$('#hidedates').hide();
77+
const myChart = new Chart(ctx, {
78+
type: 'bar',
79+
data: {},
80+
options: {
81+
indexAxis: 'y',
82+
scales: {
83+
x: {
84+
beginAtZero: true
10285
}
86+
},
87+
plugins: {
88+
title: {
89+
display: true,
90+
text: 'Custom Chart Title'
91+
}
92+
}
93+
}
94+
});
95+
96+
function updateChart(){
97+
const period = document.getElementById('period').value;
98+
const type = document.getElementById('type').value;
99+
const start_date = document.getElementById('start_date').value;
100+
const end_date = document.getElementById('end_date').value;
101+
102+
// add the form variables to the URL
103+
let href = '{{ uri.base.path }}activity/user/{{ project.alias }}/query?period=' + period + '&activity_type=' + type;
104+
105+
if (period === '5') {
106+
href += '&startdate=' + start_date + '&enddate=' + end_date;
107+
}
108+
109+
fetch(href)
110+
.then((response) => response.json())
111+
.then((json) => {
112+
console.log(json);
113+
myChart.data = {
114+
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
115+
datasets: [
116+
{
117+
label: '# of Votes',
118+
data: [12, 19, 3, 5, 2, 3],
119+
borderWidth: 1
120+
}
121+
]
122+
};
123+
myChart.update();
103124
});
104-
});
105-
})(jQuery);
125+
}
126+
127+
// Populate the chart with initial data and set up the click event for any modifications
128+
document.getElementById('dataUpdate').addEventListener('click', updateChart);
129+
updateChart();
106130
107131
const datepickerElements = document.querySelectorAll('.datepicker-input');
108132

‎webpack.mix.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ mix.override((config) => {
1818
// jQuery
1919
mix.copy('node_modules/jquery/dist/jquery.min.js', 'www/media/js/vendor/jquery.js');
2020

21-
// 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
22-
// TODO - Just pull the modified version from the CMS?
21+
// Bootstrap
2322
mix.copy('node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', 'www/media/js/vendor/bootstrap.min.js');
2423
mix.copy('node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map', 'www/media/js/vendor/bootstrap.min.js.map');
2524

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

86+
// Chart.js
87+
mix.copy('node_modules/chart.js/dist/chart.js', 'www/media/js/vendor/chart.js');
88+
mix.copy('node_modules/chart.js/dist/chart.js.map', 'www/media/js/vendor/chart.js.map');
89+
8790
// d3
8891
mix.copy('node_modules/d3/d3.min.js', 'www/media/js/vendor/d3.js');
8992

0 commit comments

Comments
 (0)