Merge pull request #56 from tuanle03/develop

Release v01.01.2024

Author: tuanle03

Gemfile

@@ -72,6 +72,10 @@ gem 'jquery-rails'
 
 gem 'rubocop'
 
+gem 'chartkick'
+
+gem 'groupdate'
+
 # Use Sass to process CSS
 # gem "sassc-rails"
 

Gemfile.lock

@@ -154,6 +154,8 @@ GEM
     grape_logging (1.8.4)
       grape
       rack
+    groupdate (6.4.0)
+      activesupport (>= 6.1)
     haml (6.3.0)
       temple (>= 0.8.2)
       thor
@@ -381,6 +383,7 @@ DEPENDENCIES
   bootsnap
   byebug
   capybara
+  chartkick
   debug
   devise
   devise-jwt
@@ -390,6 +393,7 @@ DEPENDENCIES
   grape
   grape-swagger
   grape_logging
+  groupdate
   haml-rails
   html2haml
   importmap-rails

app/javascript/application.js

@@ -1,6 +1,8 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import "chartkick"
+import "Chart.bundle"
 //= require jquery3
 //= require popper
 //= require bootstrap

app/views/posts/index.html.haml

@@ -1,5 +1,7 @@
 .container.mt-5
   %h1 Posts
+  = pie_chart Post.group(:status).count, library: { title: { text: 'Posts by status' } }
+  = line_chart Post.group(:id).sum(:total_view), library: { title: { text: 'Posts by total view' } }
   = link_to 'New Post', new_post_path, class: 'btn btn-primary col-md-1 offset-md-11 mb-3'
 
   %form.form-inline.mb-3.justify-content-end.offset-md-9

config/importmap.rb

@@ -5,3 +5,5 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "chartkick", to: "chartkick.js"
+pin "Chart.bundle", to: "Chart.bundle.js"

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "chart.js": "^4.4.1",
+    "chartkick": "^5.0.1"
+  }
+}

yarn.lock

@@ -0,0 +1,34 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
+chart.js@4, chart.js@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.1.tgz#ac5dc0e69a7758909158a96fe80ce43b3bb96a9f"
+  integrity sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
+chartjs-adapter-date-fns@>=3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5"
+  integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==
+
+chartkick@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/chartkick/-/chartkick-5.0.1.tgz#f557ff8560f974343dc65c7fc34ce1e8326d8ee7"
+  integrity sha512-4F3tWI3eBQgnjCYZIZ+fHOaJuNyxeyhDE2Tm+voOWB19hDjSJceys/spzN52DOn8bWepNESGXvPVTGU1jeFsbA==
+  optionalDependencies:
+    chart.js "4"
+    chartjs-adapter-date-fns ">=3"
+    date-fns ">=2"
+
+date-fns@>=2:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.0.6.tgz#fe3aeb7592d359f075ffc41cb16139828810ca83"
+  integrity sha512-W+G99rycpKMMF2/YD064b2lE7jJGUe+EjOES7Q8BIGY8sbNdbgcs9XFTZwvzc9Jx1f3k7LB7gZaZa7f8Agzljg==