update to latest chartjs

app.rb

@@ -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

views/layout.erb

@@ -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})

views/site/stats.erb

@@ -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
+    const data = {
-    var data = {
       labels: <%== @stats[:stat_days].collect {|s| s.created_at.strftime("%b %-d, %Y")}.to_json %>,
       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 %>
         },
         {
-          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 %>
         }
       ]
-    }
+    };
-    // 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>