zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +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
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
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

2
views/layout.erb
View file

@ -61,7 +61,7 @@
<script src="/js/nav.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/typeahead.bundle.js"></script>
<script>
$("a#like").tooltip({html: true})
$("a.comment_like").tooltip({html: true})

92
views/site/stats.erb
View file

@ -276,7 +276,7 @@
</div>
<!-- <script src="//www.webglearth.com/v2/api.js"></script> -->
<script src="/js/Chart.min.js"></script>
<script src="/js/chart.js"></script>
<script>
//OpenGL globe
$(document).ready(function() {
@ -324,39 +324,75 @@
});
*/
//chart.js
var data = {
const data = {
labels: <%== @stats[:stat_days].collect {|s| s.created_at.strftime("%b %-d, %Y")}.to_json %>,
datasets: [
{
label: "Hits",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
label: 'Hits',
backgroundColor: 'rgba(220,220,220,0.2)',
fill: true,
borderColor: 'rgba(220,220,220,1)',
pointBackgroundColor: 'rgba(220,220,220,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(220,220,220,1)',
data: <%== @stats[:stat_days].collect {|s| s.hits}.to_json %>
},
{
label: "Unique Visits",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
label: 'Visits',
backgroundColor: 'rgba(151,187,205,0.2)',
fill: true,
borderColor: 'rgba(151,187,205,1)',
pointBackgroundColor: 'rgba(151,187,205,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)',
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")
// This will get the first returned node in the jQuery collection.
//var myNewChart = new Chart(ctx);
var myLineChart = new Chart(ctx).Line(data, {
bezierCurve: false,
multiTooltipTemplate: "<%== @multi_tooltip_template %>"
})
})
</script>
};
const ctx = $("#myChart").get(0).getContext("2d");
const config = {
type: 'line',
data: data,
options: {
responsive: true,
scales: {
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>