zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-25 01:32:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

update to latest chartjs

Browse source
This commit is contained in:
Kyle Drake 2024-01-06 13:27:48 -06:00
parent 837b0ea2d0
commit f9852d04fd
5 changed files with 86 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app.rb
View file

@ -92,7 +92,7 @@ after do
end end
after do after do
response.headers['Content-Security-Policy'] = %{default-src 'self' data: blob: 'unsafe-inline'; script-src 'self' blob: 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com https://js.stripe.com; style-src 'self' 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com; connect-src 'self' https://hcaptcha.com https://*.hcaptcha.com https://api.stripe.com; frame-src 'self' https://hcaptcha.com https://*.hcaptcha.com https://js.stripe.com} response.headers['Content-Security-Policy'] = %{default-src 'self' data: blob: 'unsafe-inline'; script-src 'self' blob: 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com https://js.stripe.com; style-src 'self' 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com; connect-src 'self' https://hcaptcha.com https://*.hcaptcha.com https://api.stripe.com; frame-src 'self' https://hcaptcha.com https://*.hcaptcha.com https://js.stripe.com} unless self.class.development?
end end
not_found do not_found do

11
public/js/Chart.min.js vendored
View file

File diff suppressed because one or more lines are too long

20
public/js/chart.js Normal file
View file

File diff suppressed because one or more lines are too long

92
views/site/stats.erb
View file

@ -276,7 +276,7 @@
</div> </div>
<!-- <script src="//www.webglearth.com/v2/api.js"></script> --> <!-- <script src="//www.webglearth.com/v2/api.js"></script> -->
<script src="/js/Chart.min.js"></script> <script src="/js/chart.js"></script>
<script> <script>
//OpenGL globe //OpenGL globe
$(document).ready(function() { $(document).ready(function() {
@ -324,39 +324,75 @@
}); });
*/ */
//chart.js const data = {
var data = {
labels: <%== @stats[:stat_days].collect {|s| s.created_at.strftime("%b %-d, %Y")}.to_json %>, labels: <%== @stats[:stat_days].collect {|s| s.created_at.strftime("%b %-d, %Y")}.to_json %>,
datasets: [ datasets: [
{ {
label: "Hits", label: 'Hits',
fillColor: "rgba(220,220,220,0.2)", backgroundColor: 'rgba(220,220,220,0.2)',
strokeColor: "rgba(220,220,220,1)", fill: true,
pointColor: "rgba(220,220,220,1)", borderColor: 'rgba(220,220,220,1)',
pointStrokeColor: "#fff", pointBackgroundColor: 'rgba(220,220,220,1)',
pointHighlightFill: "#fff", pointBorderColor: '#fff',
pointHighlightStroke: "rgba(220,220,220,1)", pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(220,220,220,1)',
data: <%== @stats[:stat_days].collect {|s| s.hits}.to_json %> data: <%== @stats[:stat_days].collect {|s| s.hits}.to_json %>
}, },
{ {
label: "Unique Visits", label: 'Visits',
fillColor: "rgba(151,187,205,0.2)", backgroundColor: 'rgba(151,187,205,0.2)',
strokeColor: "rgba(151,187,205,1)", fill: true,
pointColor: "rgba(151,187,205,1)", borderColor: 'rgba(151,187,205,1)',
pointStrokeColor: "#fff", pointBackgroundColor: 'rgba(151,187,205,1)',
pointHighlightFill: "#fff", pointBorderColor: '#fff',
pointHighlightStroke: "rgba(151,187,205,1)", pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)',
data: <%== @stats[:stat_days].collect {|s| s.views}.to_json %> data: <%== @stats[:stat_days].collect {|s| s.views}.to_json %>
} }
] ]
} };
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d") const ctx = $("#myChart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
//var myNewChart = new Chart(ctx); const config = {
var myLineChart = new Chart(ctx).Line(data, { type: 'line',
bezierCurve: false, data: data,
multiTooltipTemplate: "<%== @multi_tooltip_template %>" options: {
}) responsive: true,
}) scales: {
</script> x: {
beginAtZero: true
},
y: {
beginAtZero: true
}
},
plugins: {
tooltip: {
mode: "index",
intersect: false,
bodyFont: {
size: 14,
},
bodyAlign: 'right',
titleFont: {
size: 14,
},
callbacks: {
afterTitle: function(context) {
let tooltipData = [];
if (context.length > 0) {
const index = context[0].dataIndex;
}
return tooltipData;
}
}
}
}
}
};
const myLineChart = new Chart(ctx, config);
});
</script>