[Ruby on Rails] Implement a pie chart that specifies the percentage of colors

I personally create something like a "closet app" that allows me to manage my own clothes, because I want it and it will be interesting to make it. Therefore, I thought it would be great if I could display the color ratio of my clothes in a pie chart in an easy-to-understand manner, so I implemented it this time.

Development environment

Ruby 2.5.1p57 Rails 5.2.4.4 Use gem ・ Active_hash ・ Chartkick ・ Chartable

I will actually make it

I was very worried about where to store the actual color data this time, but I decided to use active_hash, have the model have the data in hash format, and store the ID in a database called "colors".

First, write the following in the Gemfile.

Gemfile

#~abridgement~
gem 'active_hash'
gem "chartkick"
gem 'chartable'
#~abridgement~

Describe the following in application.js.

application.js

//= require Chart.bundle
//= require chartkick

And here is a model with actual color data using Active_hash.

color_data.rb

class ColorData < ActiveHash::Base
  self.data = [
    { id: 1, name: 'white', backcolor: "#fff" },
    { id: 2, name: 'black', backcolor: "#000" },
    { id: 3, name: 'gray', backcolor: "#808080" },
    { id: 4, name: 'Brown', backcolor: "#660000" },
    { id: 5, name: 'beige', backcolor: "#FFE4C4" },
    { id: 6, name: 'green', backcolor: "#006400" },
    { id: 7, name: 'blue', backcolor: "#0000CD" },
    { id: 8, name: 'purple', backcolor: "#8B008B" },
    { id: 9, name: 'yellow', backcolor: "#FFFF00" },
    { id: 10, name: 'pink', backcolor: "#FF82B2" },
    { id: 11, name: 'Red', backcolor: "#FF0000" },
    { id: 12, name: 'Silver', backcolor: "#C0C0C0" },
    { id: 13, name: 'gold', backcolor: "#DAA520" }
  ]
end

I wrote it like this. The key "backcolor" is the data to pass the specified color to each item of the pie chart.

And model. I wanted to pass the graph data to the controller in hash format and the background color data as an array, so it's a lot of help and it's a redundant code that repeats the same thing ... I'm looking for a better way here.

color.rb

class Color < ApplicationRecord
  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to_active_hash :color_data
  class << self
    #Methods that form the hash data to pass to the graph
    def color_data_acquisition_for_graphs
      colors = all
      color_graph_data = {}
      colors.each_with_index do |color, index|
        color_graph_data = { color.color_data.name => 1 } if index.zero?
        #Turn the data acquired from DB in each and check if it already exists as a key
        #If it already exists, add 1 to the value that is the standard of the ratio.
        if color_graph_data.key?(color.color_data.name)
          color_graph_data[color.color_data.name] += 1
        else
          color_graph_data[color.color_data.name] = 1
        end
      end
      color_graph_data
    end

    def background_color_data_acquisition_for_graphs
      colors = all
      color_graph_data = {}
      background_colors = []
      colors.each_with_index do |color, index|
        if index.zero?
          color_graph_data = { color.color_data.name => 1 }
          #Add background color data (backcolor data)
          background_colors << color.color_data.backcolor
        end
        if color_graph_data.key?(color.color_data.name)
          color_graph_data[color.color_data.name] += 1
        else
          color_graph_data[color.color_data.name] = 1
          #The order is kept to add backcolor when a key that has not been imported yet comes
          background_colors << color.color_data.backcolor
        end
      end
      background_colors
    end
  end
end

Please do not refer to this here lol (someone if there is a good way to write ...)

Then pass the data created here to the controller.

closet_controller.rb

class ClosetController < ApplicationController
  def index
    @color_graph_data = Color.color_data_acquisition_for_graphs
    @background_colors = Color.background_color_data_acquisition_for_graphs
  end
end

Then pass the aggregated data for the graph and the data for coloring the graph to the view.

All you have to do is display it.

ruby:index.html.slim

= pie_chart @color_graph_data, colors: @background_colors

With this alone ...

It can be displayed like this.

By the way, if you don't need the menu items, you can hide it by creating a file called "chartkick.rb" under config / initializers / and writing options.

chartkick.rb

Chartkick.options = {
  legend: false
}

By doing this,,,

At first, I wondered if I had to conditionally branch the color specified for the background depending on the color, but at the time of Active_hash in the first place, I came up with the idea of having each background color value. It was good.

It will be a development with 28 tables, which is the largest number in history for personal apps, so I will do my best while having fun.