[Ruby on Rails] Implémentez un graphique circulaire qui spécifie le pourcentage de couleurs

Personnellement, je crée quelque chose comme une "application de placard" qui me permet de gérer mes propres vêtements, en pensant que je le veux et que ce serait intéressant de le faire. Par conséquent, j'ai pensé que ce serait génial si je pouvais afficher le rapport de couleur de mes vêtements dans un graphique circulaire facile à comprendre, alors je l'ai implémenté cette fois.

Environnement de développement

Ruby 2.5.1p57 Rails 5.2.4.4 Utiliser la gemme ・ Active_hash ・ Chartkick ・ Cartographiable

Je vais vraiment le faire

J'étais très inquiet de savoir où stocker les données de couleur réelles cette fois, mais j'ai décidé d'utiliser active_hash, de stocker les données au format de hachage dans le modèle et de stocker l'ID dans une base de données appelée "couleurs".

Tout d'abord, écrivez ce qui suit dans le Gemfile.

Gemfile

#~réduction~
gem 'active_hash'
gem "chartkick"
gem 'chartable'
#~réduction~

Décrivez ce qui suit dans application.js.

application.js

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

Et voici un modèle avec des données de couleur réelles utilisant Active_hash.

color_data.rb

class ColorData < ActiveHash::Base
  self.data = [
    { id: 1, name: 'blanc', backcolor: "#fff" },
    { id: 2, name: 'noir', backcolor: "#000" },
    { id: 3, name: 'gris', backcolor: "#808080" },
    { id: 4, name: 'marron', backcolor: "#660000" },
    { id: 5, name: 'beige', backcolor: "#FFE4C4" },
    { id: 6, name: 'vert', backcolor: "#006400" },
    { id: 7, name: 'bleu', backcolor: "#0000CD" },
    { id: 8, name: 'violet', backcolor: "#8B008B" },
    { id: 9, name: 'Jaune', backcolor: "#FFFF00" },
    { id: 10, name: 'rose', backcolor: "#FF82B2" },
    { id: 11, name: 'rouge', backcolor: "#FF0000" },
    { id: 12, name: 'argent', backcolor: "#C0C0C0" },
    { id: 13, name: 'or', backcolor: "#DAA520" }
  ]
end

Je l'ai écrit comme ça. La clé "backcolor" correspond aux données permettant de transmettre la couleur spécifiée à chaque élément du graphique circulaire.

Et modèle. Je voulais transmettre les données du graphique au contrôleur au format de hachage et les données de couleur d'arrière-plan sous forme de tableau, ce qui est très utile et est un code redondant qui répète la même chose. Je cherche un meilleur moyen ici.

color.rb

class Color < ApplicationRecord
  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to_active_hash :color_data
  class << self
    #Méthode pour former des données de hachage à passer au graphique
    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?
        #Tournez les données acquises de la base de données avec chacune et vérifiez si elle existe déjà en tant que clé
        #S'il existe déjà, ajoutez 1 à la valeur qui est la norme du 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 }
          #Ajouter des données de couleur d'arrière-plan (données de couleur d'arrière-plan)
          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
          #L'ordre est conservé pour ajouter une couleur de fond lorsqu'une clé qui n'a pas encore été importée arrive
          background_colors << color.color_data.backcolor
        end
      end
      background_colors
    end
  end
end

S'il vous plaît ne vous référez pas à cela ici lol (Quelqu'un s'il y a une bonne façon d'écrire ...)

Ensuite, transmettez les données créées ici au contrôleur.

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

Passez ensuite les données agrégées pour le graphique et les données pour colorer le graphique à la vue.

Tout ce que vous avez à faire est de l'afficher.

ruby:index.html.slim

= pie_chart @color_graph_data, colors: @background_colors

Avec ça seul ...

Il peut être affiché comme ceci.

Au fait, si vous n'avez pas besoin des éléments de menu, vous pouvez les masquer en créant un fichier appelé "chartkick.rb" sous config / initializers / et en écrivant des options.

chartkick.rb

Chartkick.options = {
  legend: false
}

En faisant cela,,,

Au début, je pensais que je devais conditionner la couleur spécifiée pour l'arrière-plan en fonction de la couleur, mais au moment d'Active_hash en premier lieu, j'ai eu l'idée d'avoir chaque valeur de couleur d'arrière-plan. C'était bon.

Ce sera un développement avec 28 tables, ce qui est le plus grand nombre de l'histoire pour les applications personnelles, donc je ferai de mon mieux tout en m'amusant.