rails_analytics 1.0.4 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20ebdf5f4a45c3f8cad6c9e607be2d5eeaccb7669311c6f86b619aa2f76992dd
-  data.tar.gz: 36b3978273cb8d054fec49443cc5f7ea5e3cb83c18a2c63f3a60a706dd402616
+  metadata.gz: c6a607ecb6f634b056bce7db997068d29e41ecc29c20d1fe38fb352a2e81b70d
+  data.tar.gz: 9ce65316e5f58c2c644df424315d29597d129560ead62e530c2499a1cbd2c26f
 SHA512:
-  metadata.gz: 15d271dfdeae4344ed730fcc9bf467f962180e6093d219152d2d863f4556e6f1df113b9a91b0bab7b61e0011823a3b3a39890fd953905e7ecccf2e1a761758dc
-  data.tar.gz: 9347e3775bec41f15af5a827ee148da0fd2fbbf91c3429b0cbf6807fc5da4f3208e1fed835a78ba79e9fabc44b66042aec0963d296a62ff6f5a1fec881a37c66
+  metadata.gz: 48c2a3920a2ffab6d0d59093608dd61607c6a3fabf1f1cb998b0acd368781473bdcd672e9a4d384b439123a9029912d9e519ef08e0e6624cd87721b5f4115541
+  data.tar.gz: c19d0b161aeeb89208cac8c59e975e21be96539cb7ac1adbd8a6e693fcd0461decce6a65338a04262fac527119438671e66f3e6d1eedb06c688450463765850f

data/README.md

@@ -5,6 +5,10 @@ third-party analytics dependencies — it collects traffic **server-side**, stor
 your own database, and renders an aggregated dashboard with zero client-side JS
 dependencies.
 
+The dashboard's chart shows CSS-only tooltips: hover (or keyboard-focus) any
+data point to see its date and visit count — labels on the x-axis mark first,
+last and month boundaries. No JavaScript anywhere.
+
 ## Screenshots
 
 | Dashboard — aggregated overview | Dashboard — events & visits |

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

@@ -66,6 +66,33 @@ body {
 .ra-chart rect { fill: var(--ra-accent); opacity: 0.85; }
 .ra-chart rect:hover { opacity: 1; }
 
+/* Chart nodes: CSS-only tooltip (no JS). The tooltip is an SVG group
+   revealed on :hover/:focus-within of its parent .ra-dot group. */
+.ra-chart .ra-dot { cursor: pointer; outline: none; }
+.ra-chart .ra-dot-hit { pointer-events: all; }
+.ra-chart .ra-dot:focus-visible .ra-dot-circle,
+.ra-chart .ra-dot:focus .ra-dot-circle { stroke: var(--ra-text); stroke-width: 2; }
+
+.ra-chart .ra-tooltip { opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
+.ra-chart .ra-dot:hover .ra-tooltip,
+.ra-chart .ra-dot:focus .ra-tooltip,
+.ra-chart .ra-dot:focus-within .ra-tooltip { opacity: 1; }
+
+.ra-chart .ra-tooltip rect { fill: var(--ra-text); opacity: 1; stroke: none; }
+.ra-chart .ra-tooltip text {
+  fill: var(--ra-card);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* X-axis date labels */
+.ra-chart .ra-axis-label {
+  fill: var(--ra-muted);
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+}
+
 .ra-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

data/app/models/rails_analytics/chart_builder.rb

@@ -2,11 +2,29 @@
 
 module RailsAnalytics
   # SVG line chart. Server-rendered, zero JS.
+  #
+  # Each data point renders as a focusable group containing the visible dot,
+  # a larger invisible hit area and a CSS-only tooltip (shown on :hover and
+  # :focus). X-axis labels mark the first and last point plus month boundaries.
   class ChartBuilder
     WIDTH = 800
     HEIGHT = 220
     PAD = 8
     RIGHT_PAD = 40
+    DOT_RADIUS = 3
+    HIT_RADIUS = 12
+
+    # Tooltip geometry. The tooltip is part of the SVG (server-computed),
+    # revealed purely with CSS on :hover/:focus — no JavaScript involved.
+    TOOLTIP_WIDTH = 130
+    TOOLTIP_HEIGHT = 30
+    TOOLTIP_OFFSET = 10
+
+    # Plot area keeps HEIGHT; the viewBox gains a strip for x-axis labels.
+    AXIS_PAD = 20
+
+    # Minimum horizontal gap (px) between x-axis labels.
+    AXIS_MIN_GAP = 70
 
     def initialize(series)
       @series = series # Array<Hash> with :date and :count
@@ -16,31 +34,96 @@ module RailsAnalytics
       return empty_chart if @series.empty?
 
       max = [@series.map { |s| s[:count] }.max.to_f, 1].max
-      points = @series.map.with_index do |s, i|
-        x = pad(i)
-        y = HEIGHT - PAD - ((s[:count] / max) * (HEIGHT - PAD * 2)).round
-        "#{x.round(2)},#{y.round(2)}"
-      end.join(" ")
+      nodes = @series.map.with_index { |s, i| dot_node(s, i, max) }.join("\n")
 
       <<~SVG
-        <svg viewBox="0 0 #{WIDTH + RIGHT_PAD} #{HEIGHT}" role="img" aria-label="#{I18n.t('rails_analytics.chart.visits_per_day')}" xmlns="http://www.w3.org/2000/svg">
-          <polyline points="#{points}" fill="none" stroke="var(--ra-accent, #3b82f6)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
-          #{dots(points)}
+        <svg viewBox="0 0 #{WIDTH + RIGHT_PAD} #{HEIGHT + AXIS_PAD}" role="img" aria-label="#{I18n.t('rails_analytics.chart.visits_per_day')}" xmlns="http://www.w3.org/2000/svg">
+          <polyline points="#{points(max)}" fill="none" stroke="var(--ra-accent, #3b82f6)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
+          #{axis_labels}
+          #{nodes}
         </svg>
       SVG
     end
 
     private
 
-    def pad(index)
+    def points(max)
+      @series.each_with_index.map do |s, i|
+        "#{x(i).round(2)},#{y(s[:count], max).round(2)}"
+      end.join(" ")
+    end
+
+    def dot_node(series, index, max)
+      cx = x(index).round(2)
+      cy = y(series[:count], max).round(2)
+      label = tooltip_text(series)
+
+      <<~NODE.strip
+        <g class="ra-dot" tabindex="0" role="img" aria-label="#{label}">
+          <circle cx="#{cx}" cy="#{cy}" r="#{HIT_RADIUS}" fill="transparent" pointer-events="all" />
+          <circle cx="#{cx}" cy="#{cy}" r="#{DOT_RADIUS}" class="ra-dot-circle" />
+          #{tooltip(cx, cy, label)}
+        </g>
+      NODE
+    end
+
+    def tooltip(cx, cy, label)
+      # Above the dot; flips to the far side when it would clip the top edge.
+      tx = (cx - TOOLTIP_WIDTH / 2).clamp(0, WIDTH + RIGHT_PAD - TOOLTIP_WIDTH)
+      ty = cy - DOT_RADIUS - TOOLTIP_OFFSET - TOOLTIP_HEIGHT
+      ty = cy + DOT_RADIUS + TOOLTIP_OFFSET if ty < 0
+
+      <<~TOOLTIP.strip
+        <g class="ra-tooltip">
+          <rect x="#{tx}" y="#{ty}" width="#{TOOLTIP_WIDTH}" height="#{TOOLTIP_HEIGHT}" rx="6" />
+          <text x="#{tx + TOOLTIP_WIDTH / 2}" y="#{ty + TOOLTIP_HEIGHT / 2 + 4}" text-anchor="middle">#{label}</text>
+        </g>
+      TOOLTIP
+    end
+
+    def tooltip_text(series)
+      I18n.t("rails_analytics.chart.tooltip", count: series[:count],
+             date: series[:date].strftime(I18n.t("rails_analytics.chart.date_format")),
+             formatted_count: ActiveSupport::NumberHelper.number_to_delimited(series[:count]))
+    end
+
+    def x(index)
       PAD + index * ((WIDTH - PAD) / [@series.length - 1, 1].max.to_f)
     end
 
-    def dots(points_str)
-      points_str.split(" ").map do |pt|
-        x, y = pt.split(",")
-        %(<circle cx="#{x}" cy="#{y}" r="3" fill="var(--ra-accent, #3b82f6)" />)
-      end.join
+    def y(count, max)
+      HEIGHT - PAD - ((count / max) * (HEIGHT - PAD * 2))
+    end
+
+    # X-axis labels: first and last point always; month boundaries in between
+    # only when far enough from the neighbouring label to avoid collision.
+    def axis_labels
+      return "" if @series.length < 2
+
+      axis_indices.map do |i|
+        anchor = "start" if i.zero?
+        anchor = "end" if i == @series.length - 1
+        anchor ||= "middle"
+        %(<text x="#{x(i).round(2)}" y="#{HEIGHT + 13}" class="ra-axis-label" text-anchor="#{anchor}">#{write_date(@series[i][:date])}</text>)
+      end.join("\n")
+    end
+
+    def axis_indices
+      last = @series.length - 1
+      kept = [0]
+      (1...last).each do |i|
+        next unless @series[i][:date].day == 1 # month boundary
+
+        left_gap = x(i) - x(kept.last)
+        right_gap = x(last) - x(i)
+        kept << i if left_gap >= AXIS_MIN_GAP && right_gap >= AXIS_MIN_GAP
+      end
+      kept << last
+      kept.uniq
+    end
+
+    def write_date(date)
+      date.strftime(I18n.t("rails_analytics.chart.date_format"))
     end
 
     def empty_chart
@@ -51,4 +134,4 @@ module RailsAnalytics
       SVG
     end
   end
-end
+end

data/config/locales/rails_analytics.en.yml

@@ -14,6 +14,10 @@ en:
     chart:
       visits_per_day: "Visits per day"
       no_data: "No data"
+      date_format: "%m/%d"
+      tooltip:
+        one: "%{date} — 1 visit"
+        other: "%{date} — %{formatted_count} visits"
     tables:
       top_sources: "Traffic sources"
       top_events: "Top events"

data/config/locales/rails_analytics.pt-BR.yml

@@ -14,6 +14,10 @@ pt-BR:
     chart:
       visits_per_day: "Visitas por dia"
       no_data: "Sem dados"
+      date_format: "%d/%m"
+      tooltip:
+        one: "%{date} — 1 visita"
+        other: "%{date} — %{formatted_count} visitas"
     tables:
       top_sources: "Origem do tráfego"
       top_events: "Clics por botão"

data/lib/rails_analytics/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsAnalytics
-  VERSION = "1.0.4"
+  VERSION = "1.1.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_analytics
 version: !ruby/object:Gem::Version
-  version: 1.0.4
+  version: 1.1.1
 platform: ruby
 authors:
 - br4zz4
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-09-07 00:00:00.000000000 Z
+date: 2026-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails