dashboards 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a8670fb127e114c56df0a9dc69c2aa2c66828d4b6f73f9b4d97b360d6381450b
+  data.tar.gz: 604825e5112690747b03341162ea63e2e2e302bc37ce87fa2acea85b6b6c1443
+SHA512:
+  metadata.gz: f29c9255b958f8d5a9ad30f7b1a8e2168f493eb6c231588843073d6d66f97c22680ed07a977f6989db530ad4e799804b284a24e0f449412388185ebd1e53e5be
+  data.tar.gz: 706a900eb7c1475d95d699ca3c9292c857265b1061d4f77a308892f5b88b939024ca3bf59212a0481000a370de660ba4c3f4b8e3046c8e98cc629523cc9e6bf8

data/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## [0.1.0] - 2024-09-28
+
+- Initial release of the `dashboards` gem
+- Basic DSL for defining dashboards, boxes, and elements
+- Rails integration via mountable engine
+- Chartkick integration for chart rendering

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Javi R
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,183 @@
+# 🍱 `dashboards` - Ruby gem to create customizable bento-style admin dashboards in your Rails app
+
+`dashboards` is a Ruby gem that allows you to create beautiful admin dashboards in your Rails application with a very simple and straightforward DSL.
+
+Creating a dashboard looks something like this:
+```ruby
+dashboard "Admin Dashboard" do
+  box "Total Users" do
+    metric value: -> { User.count }
+  end
+
+  box "Posts over time" do
+    chart type: :line, data: -> { Post.group_by_day(:created_at).count }
+  end
+end
+```
+
+Which automatically creates a beautiful bento-style dashboard like this:
+
+![Dashboard](https://via.placeholder.com/150)
+
+`dashboards` has a minimal setup so you can quickly build dashboards with metrics, charts, tables, summaries, and change-over-period indicators.
+
+It uses [Chartkick](https://github.com/ankane/chartkick) for charts, and [groupdate](https://github.com/ankane/groupdate) for time-based grouping.
+
+## Installation
+
+Add this line to your application's Gemfile:
+```ruby
+gem 'dashboards'
+```
+
+And then execute:
+```bash
+bundle install
+```
+
+## Usage
+
+1. Create a file `config/dashboards.rb` in your Rails application, and define your dashboard using the Dashboards DSL:
+```ruby
+dashboard "Admin Dashboard" do
+  box "User Statistics" do
+    metric value: -> { User.count }
+    summary data: -> { User }
+    chart "User Signups", type: :line, data: -> { User.group_by_day(:created_at).count }
+    change_over_period -> { User }
+  end
+
+  box "Post Statistics" do
+    chart "Posts by Category", type: :pie, data: -> { Post.group(:category).count }
+    table "Recent Posts", data: -> { Post.order(created_at: :desc).limit(5) }
+  end
+end
+```
+
+2. Mount the Dashboards engine in your `config/routes.rb`:
+```ruby
+mount Dashboards::Engine, at: "/admin/dashboard"
+```
+
+It's a good idea to make sure you're adding some authentication to the `dashboards` route to avoid exposing sensitive information:
+```ruby
+authenticate :user, ->(user) { user.admin? } do
+  mount Dashboards::Engine, at: "/admin/dashboard"
+end
+```
+
+3. Visit `/admin/dashboard` in your browser to see your new dashboard!
+
+## Available Components
+
+### Metrics
+
+```ruby
+metric value: -> { User.count }
+```
+
+Metrics display a single value, a big number inside the box.
+
+Metrics can be either a generic number or a currency:
+
+```ruby
+metric value: -> { Order.sum(:total) }, currency: "$"
+```
+
+You can also display a percentage:
+
+```ruby
+# This will show, for example, a percentage of users that have posted at least one time.
+metric value: -> { (Post.group(:user_id).count.uniq.count.to_f / User.count * 100).round(0) }, percentage: true
+```
+
+You can also pretty print big numbers:
+
+```ruby
+# This will display 1.2B, 1.2M, or 1.2K for 1.2 billion, million, or thousand.
+metric value: -> { 1234567890 }, format_big_numbers: true
+```
+
+### Charts
+
+```ruby
+chart type: :line, data: -> { User.group_by_day(:created_at).count }
+```
+
+Supported chart types: `:line`, `:bar`, `:column`, `:area`, `:pie`
+
+Charts can be customized with colors, height, and other options:
+
+```ruby
+chart type: :line, data: -> { Order.group_by_month(:created_at).sum(:total) }, 
+      color: "#4CAF50", height: "300px"
+```
+
+You can also add a title to the chart:
+
+```ruby
+chart "Order Totals", type: :line, data: -> { Order.group_by_month(:created_at).sum(:total) }, 
+      color: "#4CAF50", height: "300px", title: "Monthly Order Totals"
+```
+
+### Tables
+
+```ruby
+table data: -> { { "US" => 100, "UK" => 200, "CA" => 300 } }
+```
+
+Tables display data in a tabular format.
+
+Currently, only two-column tables are supported. The data input should be a hash, like this:
+
+```ruby
+# This will display a table of the 5 most recent users that have confirmed their email address.
+
+table value: -> {
+  User.order(created_at: :desc).limit(5).pluck(:email, :confirmed_at).map do |email, confirmed_at|
+    {
+      email: email,
+      confirmed_at: ActionController::Base.helpers.time_ago_in_words(confirmed_at) + " ago"
+    }
+  end
+}
+```
+
+### Summaries
+
+```ruby
+summary data: -> { User }
+```
+
+Summaries show quick statistics for the last 24 hours, 7 days, and 30 days. The periods can be customized:
+
+```ruby
+summary data: -> { User }, periods: [
+  { name: '1h', duration: 1.hour },
+  { name: '12h', duration: 12.hours },
+  { name: '24h', duration: 24.hours }
+]
+```
+
+### Change Over Period
+
+```ruby
+change_over_period -> { User }
+change_over_period -> { Post }, period: 30.days, date_column: :published_at
+```
+
+This component shows the percentage change over a specified period (default is 7 days). You can customize the period and the date column used for comparison.
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/rameerez/dashboards. Our code of conduct is: just be nice and make your mom proud of what you do and post online.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+task default: %i[]

data/app/assets/config/dashboards_manifest.js

@@ -0,0 +1 @@
+//= link dashboards/application.js

data/app/assets/javascript/dashboards/application.js

@@ -0,0 +1,3 @@
+// This file is automatically compiled by importmap-rails
+// = require chartkick
+// = require Chart.bundle

data/app/assets/stylesheets/dashboards/application.css

@@ -0,0 +1,5 @@
+/* This is the main entry point for the Dashboards styles */
+@import "layout";
+@import "dashboard";
+@import "box";
+@import "components";

data/app/assets/stylesheets/dashboards/box.css

@@ -0,0 +1,19 @@
+.box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  min-height: 100px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 1em;
+}
+
+.box > * {
+  margin: 0.25em 0;
+}
+
+.box-title {
+  font-size: 0.85em;
+  font-weight: lighter;
+}

data/app/assets/stylesheets/dashboards/components.css

@@ -0,0 +1,37 @@
+.metric-value {
+  font-size: 2em;
+  font-weight: bold;
+}
+
+.summary {
+  font-size: 0.65em;
+  margin: 0.5em 0 1.2em;
+}
+
+.change-over-period {
+  font-size: 0.65em;
+  margin: 1.2em 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.change-over-period-pill {
+  padding: 0.25em 0.5em;
+  margin-right: 0.25em;
+  border-radius: 8px;
+}
+
+.table table {
+  width: 100%;
+  font-size: 0.65em;
+}
+
+.table th,
+.table td {
+  border: none;
+}
+
+.table tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.05);
+}

data/app/assets/stylesheets/dashboards/dashboard.css

@@ -0,0 +1,41 @@
+.dashboard {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5em;
+}
+
+.dashboard-nav ul {
+  list-style-type: none;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.dashboard-nav li {
+  font-size: 0.9em;
+}
+
+.dashboard-nav li:not(:last-child)::after {
+  content: "·";
+  margin: 0 0.5em;
+}
+
+.dashboard-nav a {
+  text-decoration: none;
+}
+
+.dashboard-nav a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .dashboard {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .dashboard {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}

data/app/assets/stylesheets/dashboards/layout.css

@@ -0,0 +1,12 @@
+body {
+  /* Add any global styles here */
+}
+
+h1 {
+  /* Styles for h1 */
+}
+
+h3 {
+  font-size: 1em;
+  font-weight: bold;
+}

data/app/controllers/dashboards/base_controller.rb

@@ -0,0 +1,5 @@
+module Dashboards
+  class BaseController < ApplicationController
+    layout 'dashboards/application'
+  end
+end

data/app/controllers/dashboards/dashboards_controller.rb

@@ -0,0 +1,21 @@
+module Dashboards
+  class DashboardsController < BaseController
+    # caches_action :show, expires_in: -> { Dashboards.configuration.cache_duration }
+
+    def index
+      if Dashboards.configuration.dashboards.empty?
+        render :no_dashboards
+      else
+        first_dashboard = Dashboards.configuration.dashboards.first
+        redirect_to dashboard_path(first_dashboard.slug)
+      end
+    end
+
+    def show
+      @dashboard = Dashboards.configuration.find_dashboard(params[:dashboard])
+      if @dashboard.nil?
+        redirect_to root_path, alert: "Dashboard not found"
+      end
+    end
+  end
+end

data/app/views/dashboards/dashboards/no_dashboards.html.erb

@@ -0,0 +1,26 @@
+<h1>Welcome to 🍱 <b>dashboards</b></h1>
+
+<p>It looks like you haven't defined any dashboards yet. Let's get started!</p>
+
+<h2>How to Create Your First Dashboard</h2>
+
+<ol>
+  <li>Create a file named <code>config/dashboards.rb</code> in your Rails application.</li>
+  <li>Open the file and define your first dashboard using the Dashboards DSL. Follow the instructions in the <a href="https://github.com/rameerez/dashboards#readme" target="_blank">🍱 dashboards README</a>. Here's an example:</li>
+</ol>
+
+<pre><code>
+dashboard "My First Dashboard" do
+  box "User Statistics" do
+    metric "Total Users", value: -> { User.count }
+    chart "New Users", type: :line, data: -> { User.group_by_day(:created_at).count }
+  end
+
+  box "Post Statistics" do
+    metric "Total Posts", value: -> { Post.count }
+    chart "Posts by Category", type: :pie, data: -> { Post.group(:category).count }
+  end
+end
+</code></pre>
+
+<p>After adding your dashboard definition, restart your Rails server to see your new dashboard in action!</p>

data/app/views/dashboards/dashboards/show.html.erb

@@ -0,0 +1,22 @@
+<h1><%= @dashboard.name %></h1>
+
+<nav class="dashboard-nav">
+  <ul>
+    <% Dashboards.configuration.dashboards.each_with_index do |dashboard, index| %>
+        <li><%= (dashboard.slug == @dashboard.slug) ? "<u>#{dashboard.name}</u>".html_safe : link_to(dashboard.name, dashboard_path(dashboard.slug)) %></li>
+    <% end %>
+  </ul>
+</nav>
+
+<div class="dashboard">
+
+  <% @dashboard.boxes.each do |box| %>
+    <div class="box">
+      <h3 class="box-title"><%= box.name %></h3>
+      <% box.elements.each do |element| %>
+        <%= element.render(self).html_safe %>
+      <% end %>
+    </div>
+  <% end %>
+
+</div>

data/app/views/layouts/dashboards/application.html.erb

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dashboards</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+  <%= stylesheet_link_tag "dashboards/application", media: "all" %>
+
+  <%= javascript_importmap_tags %>
+  <%= javascript_include_tag "dashboards/application", "data-turbo-track": "reload", defer: true %>
+
+  <style>
+    body {
+      grid-template-columns: 1fr min(75rem,90%) 1fr;
+    }
+  </style>
+
+</head>
+<body>
+  <%= yield %>
+</body>
+</html>

data/config/importmap.rb

@@ -0,0 +1,2 @@
+pin "chartkick", to: "chartkick.js"
+pin "Chart.bundle", to: "Chart.bundle.js"

data/config/routes.rb

@@ -0,0 +1,4 @@
+Dashboards::Engine.routes.draw do
+  root 'dashboards#index'
+  get '/:dashboard', to: 'dashboards#show', as: :dashboard
+end

data/lib/dashboards/configuration.rb

@@ -0,0 +1,21 @@
+module Dashboards
+  class Configuration
+    attr_reader :dashboards
+    attr_accessor :chart_library, :cache_duration #, :per_page
+
+    def initialize
+      @dashboards = []
+      @chart_library = :chartkick # Default to chartkick
+      @cache_duration = 5.minutes
+      # @per_page = 20
+    end
+
+    def add_dashboard(dashboard)
+      @dashboards << dashboard
+    end
+
+    def find_dashboard(slug)
+      @dashboards.find { |d| d.slug == slug }
+    end
+  end
+end

data/lib/dashboards/dsl/box.rb

@@ -0,0 +1,34 @@
+module Dashboards
+  class Box
+    attr_reader :name, :elements
+
+    def initialize(name)
+      @name = name
+      @elements = []
+    end
+
+    def metric(name, options = {})
+      @elements << Metric.new(name, options)
+    end
+
+    def chart(name, options = {})
+      @elements << Chart.new(name, options)
+    end
+
+    def table(name, options = {})
+      @elements << Table.new(name, options)
+    end
+
+    def summary(data_or_options, options = {})
+      @elements << Summary.new(data_or_options, options)
+    end
+
+    def custom(&block)
+      @elements << CustomElement.new(block)
+    end
+
+    def change_over_period(data_or_options, options = {})
+      @elements << ChangeOverPeriod.new(data_or_options, options)
+    end
+  end
+end

data/lib/dashboards/dsl/change_over_period.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Dashboards
+  class ChangeOverPeriod
+    attr_reader :data, :options
+
+    def initialize(data_or_options, options = {})
+      if data_or_options.is_a?(Hash)
+        @data = data_or_options[:data]
+        @options = data_or_options.except(:data)
+      else
+        @data = data_or_options
+        @options = options
+      end
+      @period = @options[:period] || 7.days
+      @date_column = @options[:date_column] || :created_at
+    end
+
+    def render(context)
+      data = @data.is_a?(Proc) ? context.instance_exec(&@data) : @data
+      render_change(data, context)
+    end
+
+    private
+
+    def render_change(data, context)
+      now = Time.current
+      current_count = data.where(@date_column => @period.ago(now)..now).count
+      previous_count = data.where(@date_column => @period.ago(@period.ago(now))..@period.ago(now)).count
+
+      if previous_count.zero?
+        percentage_change = current_count.positive? ? 100 : 0
+      else
+        percentage_change = ((current_count - previous_count).to_f / previous_count * 100).round
+      end
+
+      sign = percentage_change.positive? ? '+' : ''
+      chevron = percentage_change.positive? ? '▴' : '▾'
+      color = percentage_change.positive? ? 'green' : 'red'
+      period_text = case @period
+                    when 7.days then 'last week'
+                    when 30.days then '30d ago'
+                    else "#{@period.inspect} ago"
+                    end
+
+      html = "<div class='change-over-period'>"
+      html += "<span>Since #{period_text}</span>"
+      html += "<span class='change-over-period-pill' style='color: #{color};'>"
+      html += "#{sign}#{percentage_change}% #{chevron}"
+      html += "</span>"
+      html += "</div>"
+
+      html
+    end
+  end
+end

data/lib/dashboards/dsl/chart.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+module Dashboards
+  class Chart
+    attr_reader :name, :type, :data, :options
+
+    VALID_TYPES = [:line, :pie, :column, :bar, :area, :scatter]
+
+    DEFAULT_HEIGHT = '120px'
+    DEFAULT_COLOR = '#FFFFFF'  # White
+
+    def initialize(name_or_options, options = {})
+      if name_or_options.is_a?(Hash)
+        @name = nil
+        options = name_or_options
+      else
+        @name = name_or_options
+      end
+      @type = options.delete(:type) || :line
+      @data = options.delete(:data)
+      @options = options
+      @options[:height] ||= options[:height] || DEFAULT_HEIGHT
+      @options[:color] ||= DEFAULT_COLOR
+    end
+
+    def render(context)
+      data = @data.is_a?(Proc) ? context.instance_exec(&@data) : @data
+      chartkick_method = chartkick_method(@type)
+
+      options = @options.dup
+      options[:title] = @name if @name
+
+      # Apply color to different chart types
+      case @type
+      when :pie, :donut
+        options[:colors] ||= [@options[:color]]
+      when :column, :bar
+        options[:colors] ||= [@options[:color]]
+      else
+        options[:dataset] ||= {
+          borderColor: @options[:color],
+          backgroundColor: @options[:color],
+          pointBackgroundColor: @options[:color],
+          pointBorderColor: @options[:color],
+          pointHoverBackgroundColor: @options[:color],
+          pointHoverBorderColor: @options[:color],
+          hoverBackgroundColor: @options[:color],
+          hoverBorderColor: @options[:color]
+        }
+      end
+
+      # Apply height
+      options[:height] = @options[:height]
+
+      raise ArgumentError, "Invalid chart type: #{@type}" unless VALID_TYPES.include?(@type)
+
+      if context.respond_to?(chartkick_method)
+        context.public_send(chartkick_method, data, **options)
+      else
+        render_fallback(data)
+      end
+    end
+
+    private
+
+    def chartkick_method(type)
+      case type
+      when :line then :line_chart
+      when :pie then :pie_chart
+      when :column then :column_chart
+      when :bar then :bar_chart
+      when :area then :area_chart
+      when :scatter then :scatter_chart
+      else
+        raise ArgumentError, "Unsupported chart type: #{type}"
+      end
+    end
+
+    def render_fallback(data)
+      "<div class='chart' style='height: #{@options[:height]}; color: #{@options[:color]};'>
+        <h3>#{@name}</h3>
+        <p>Chart data: #{data.inspect}</p>
+        <p>Note: Chartkick is not available. Please include it in your application for chart rendering.</p>
+      </div>"
+    end
+  end
+end

data/lib/dashboards/dsl/dashboard.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Dashboards
+  class Dashboard
+    attr_reader :name, :boxes, :slug
+
+    def initialize(name, options = {})
+      @name = name
+      @slug = options[:slug] || name.parameterize
+      @boxes = []
+    end
+
+    def box(name, &block)
+      @boxes << Box.new(name).tap { |b| b.instance_eval(&block) }
+    end
+  end
+end

data/lib/dashboards/dsl/element.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Dashboards
+  class Element
+    attr_reader :type, :name, :options
+
+    def initialize(type, name, options)
+      @type = type
+      @name = name
+      @options = options
+    end
+
+    def render(context)
+      case @type
+      when :metric
+        Metric.new(@name, @options).render(context)
+      when :chart
+        Chart.new(@name, @options).render(context)
+      when :table
+        Table.new(@name, @options).render(context)
+      else
+        raise Error, "Unsupported element type: #{@type}"
+      end
+    end
+  end
+end

data/lib/dashboards/dsl/metric.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Dashboards
+  class Metric
+    attr_reader :name, :value, :options
+
+    def initialize(name_or_options, options = {})
+      if name_or_options.is_a?(Hash)
+        @name = nil
+        options = name_or_options
+      else
+        @name = name_or_options
+      end
+      @value = options[:value]
+      @options = options.except(:value)
+      @format_big_numbers = options[:format_big_numbers] || false
+      @percentage = options[:percentage] || false
+      @currency = options[:currency]
+    end
+
+    def render(context)
+      value_content = @value.is_a?(Proc) ? context.instance_exec(&@value) : @value
+      formatted_value = value_content.nil? ? 'N/A' : format_number(value_content)
+      formatted_value = "#{@currency}#{formatted_value}" if @currency && !value_content.nil?
+      formatted_value += '%' if @percentage && !value_content.nil?
+      if @name
+        "<div class='metric'>
+          <h3>#{@name}</h3>
+          <div class='metric-value'>#{formatted_value}</div>
+        </div>"
+      else
+        "<div class='metric'>
+          <div class='metric-value'>#{formatted_value}</div>
+        </div>"
+      end
+    end
+
+    private
+
+    def format_number(number)
+      return number unless number.is_a?(Numeric)
+
+      if @format_big_numbers
+        if number >= 1_000_000
+          "#{(number / 1_000_000.0).round(1)}M"
+        elsif number >= 1_000
+          "#{(number / 1_000.0).round(1)}K"
+        else
+          number.to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse
+        end
+      else
+        number.to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse
+      end
+    end
+  end
+end

data/lib/dashboards/dsl/summary.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Dashboards
+  class Summary
+    attr_reader :data, :options
+
+    DEFAULT_PERIODS = [
+      { name: '24h', duration: 24.hours },
+      { name: '7d', duration: 7.days },
+      { name: '30d', duration: 30.days }
+    ]
+
+    def initialize(data_or_options, options = {})
+      if data_or_options.is_a?(Hash)
+        @data = data_or_options[:data]
+        @options = data_or_options.except(:data)
+      else
+        @data = data_or_options
+        @options = options
+      end
+      @periods = @options[:periods] || DEFAULT_PERIODS
+    end
+
+    def render(context)
+      data = @data.is_a?(Proc) ? context.instance_exec(&@data) : @data
+      render_summary(data, context)
+    end
+
+    private
+
+    def render_summary(data, context)
+      summary_data = calculate_summary(data)
+
+      html = "<div class='summary'><span>"
+
+      html += @periods.map.with_index do |period, index|
+        count = context.number_with_delimiter(summary_data[index], delimiter: ',')
+        "<b>last #{period[:name]}:</b> #{count}"
+      end.join(' · ')
+
+      html += "</span></div>"
+
+      html
+    end
+
+    def calculate_summary(data)
+      now = Time.now
+      @periods.map do |period|
+        data.where(created_at: period[:duration].ago..now).count
+      end
+    end
+  end
+end

data/lib/dashboards/dsl/table.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Dashboards
+  class Table
+    attr_reader :name, :data, :options
+
+    def initialize(name_or_options, options = {})
+      if name_or_options.is_a?(Hash)
+        @name = nil
+        options = name_or_options
+      else
+        @name = name_or_options
+      end
+      @data = options[:data] || options[:value]
+      @options = options.except(:data, :value)
+    end
+
+    def render(context)
+      data = @data.is_a?(Proc) ? context.instance_exec(&@data) : @data
+      render_table(data)
+    end
+
+    private
+
+    def render_table(data)
+      table_html = "<div class='table'>"
+      table_html += "<h3>#{@name}</h3>" if @name
+      table_html += "<table>"
+
+      if data.is_a?(Hash)
+        table_html += render_hash_data(data)
+      elsif data.respond_to?(:each)
+        table_html += render_array_data(data)
+      else
+        table_html += "<tr><td>No data available</td></tr>"
+      end
+
+      table_html += '</table></div>'
+      table_html
+    end
+
+    def render_hash_data(data)
+      html = ""
+      # html += "<tr><th>Key</th><th>Value</th></tr>"
+      data.each do |key, value|
+        html += "<tr><td>#{key}</td><td>#{value}</td></tr>"
+      end
+      html
+    end
+
+    def render_array_data(data)
+      html = ""
+      if data.first.is_a?(Hash)
+        keys = data.first.keys
+        html += "<tr>#{keys.map { |key| "<th>#{key}</th>" }.join}</tr>"
+        data.each do |item|
+          html += "<tr>#{keys.map { |key| "<td>#{item[key]}</td>" }.join}</tr>"
+        end
+      else
+        data.each do |item|
+          html += "<tr><td>#{item}</td></tr>"
+        end
+      end
+      html
+    end
+  end
+end

data/lib/dashboards/dsl.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require_relative "dsl/chart"
+require_relative "dsl/dashboard"
+require_relative "dsl/box"
+require_relative "dsl/element"
+require_relative "dsl/metric"
+require_relative "dsl/table"
+require_relative "dsl/summary"
+require_relative "dsl/change_over_period"
+
+module Dashboards
+  module DSL
+    def dashboard(name, &block)
+      dashboard = Dashboard.new(name)
+      dashboard.instance_eval(&block)
+      Dashboards.configuration.add_dashboard(dashboard)
+    end
+  end
+
+  class CustomElement
+    def initialize(block)
+      @block = block
+    end
+
+    def render(context)
+      context.instance_eval(&@block)
+    end
+  end
+end

data/lib/dashboards/engine.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require_relative "loader"
+
+module Dashboards
+  class Engine < ::Rails::Engine
+    isolate_namespace Dashboards
+
+    initializer "dashboards.load_configuration" do
+      config.after_initialize do
+        Dashboards::Loader.load
+      end
+    end
+
+    initializer "dashboards.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << root.join("config/importmap.rb")
+      app.config.importmap.cache_sweepers << root.join("app/assets/javascripts")
+    end
+
+    initializer "dashboards.assets" do |app|
+      app.config.assets.precompile += %w[dashboards_manifest.js dashboards/application.js dashboards/application.css]
+    end
+
+    initializer "dashboards.append_assets_path" do |app|
+      app.config.assets.paths << root.join("app/assets/javascripts")
+      app.config.assets.paths << Chartkick::Engine.root.join("vendor/assets/javascripts")
+    end
+
+    initializer "dashboards.cache" do |app|
+      app.config.dashboards_cache_store = :memory_store
+    end
+  end
+end

data/lib/dashboards/loader.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Dashboards
+  class Loader
+    def self.load
+      config_file = Rails.root.join("config", "dashboards.rb")
+      unless File.exist?(config_file)
+        Rails.logger.warn "Dashboards configuration file not found at #{config_file}"
+        return
+      end
+
+      begin
+        Class.new do
+          extend Dashboards::DSL
+          instance_eval(File.read(config_file))
+        end
+      rescue StandardError => e
+        Rails.logger.error "Error loading Dashboards configuration: #{e.message}"
+        raise Dashboards::ConfigurationError, "Failed to load Dashboards configuration: #{e.message}"
+      end
+    end
+  end
+end

data/lib/dashboards/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module Dashboards
+  VERSION = "0.1.0"
+end

data/lib/dashboards.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require_relative "dashboards/version"
+require_relative "dashboards/configuration"
+require_relative "dashboards/dsl"
+require_relative "dashboards/engine" if defined?(Rails)
+
+# Require all the dependencies
+require "importmap-rails"
+require "chartkick"
+require "groupdate"
+
+module Dashboards
+  class Error < StandardError; end
+
+  class << self
+    attr_writer :configuration
+
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield(configuration)
+    end
+
+    def reset_configuration!
+      @configuration = Configuration.new
+    end
+  end
+end
+
+# Set default configuration
+Dashboards.configure do |config|
+  config.chart_library = :chartkick
+end

data/sig/dashboards.rbs

@@ -0,0 +1,4 @@
+module Dashboards
+  VERSION: String
+  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+end

metadata

@@ -0,0 +1,178 @@
+--- !ruby/object:Gem::Specification
+name: dashboards
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- rameerez
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2024-09-28 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '7.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '7.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.0
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+- !ruby/object:Gem::Dependency
+  name: chartkick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: groupdate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '6.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '6.1'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.12'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.50'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.50'
+description: Create beautiful, customizable bento-style admin dashboards in your Rails
+  application with a very simple DSL.
+email:
+- rubygems@rameerez.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/config/dashboards_manifest.js
+- app/assets/javascript/dashboards/application.js
+- app/assets/stylesheets/dashboards/application.css
+- app/assets/stylesheets/dashboards/box.css
+- app/assets/stylesheets/dashboards/components.css
+- app/assets/stylesheets/dashboards/dashboard.css
+- app/assets/stylesheets/dashboards/layout.css
+- app/controllers/dashboards/base_controller.rb
+- app/controllers/dashboards/dashboards_controller.rb
+- app/views/dashboards/dashboards/no_dashboards.html.erb
+- app/views/dashboards/dashboards/show.html.erb
+- app/views/layouts/dashboards/application.html.erb
+- config/importmap.rb
+- config/routes.rb
+- lib/dashboards.rb
+- lib/dashboards/configuration.rb
+- lib/dashboards/dsl.rb
+- lib/dashboards/dsl/box.rb
+- lib/dashboards/dsl/change_over_period.rb
+- lib/dashboards/dsl/chart.rb
+- lib/dashboards/dsl/dashboard.rb
+- lib/dashboards/dsl/element.rb
+- lib/dashboards/dsl/metric.rb
+- lib/dashboards/dsl/summary.rb
+- lib/dashboards/dsl/table.rb
+- lib/dashboards/engine.rb
+- lib/dashboards/loader.rb
+- lib/dashboards/version.rb
+- sig/dashboards.rbs
+homepage: https://github.com/rameerez/dashboards
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/rameerez/dashboards
+  source_code_uri: https://github.com/rameerez/dashboards
+  changelog_uri: https://github.com/rameerez/dashboards/blob/main/CHANGELOG.md
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.17
+signing_key:
+specification_version: 4
+summary: A simple and powerful DSL for creating beautiful, customizable bento-style
+  admin dashboards in Rails applications.
+test_files: []