glimmer-libui-cc-graphs_and_charts 0.3.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 05df9fa97ed359a26f750b606fabd320c0c114ab6f0f9a68806f144b0782f4c0
-  data.tar.gz: ca02e1bcd1c9c0997f9241a8f16718eb6e5ca72ddc0f539b052f144d92aedb8f
+  metadata.gz: 948c4d8554c7e5fb57b91c76595312f215a6de6b28bf47b90589049cefcd13e0
+  data.tar.gz: e80fa96b958cf4adfbb956daff54da211840811198c2a97f37b336873ff8c406
 SHA512:
-  metadata.gz: 8066883e70794b6c6d4d6ebab139d97bf1c9fe01d3b7b8ed9b94fc61f8a69b5c7a82a2b89c9e2c7eaa7dab326cf40f3da2f348e7a1f2945c16604850b9bab0b9
-  data.tar.gz: 3dd5b11b42f701d3f30064060c6c08bb01bcb1391316ec307725b9b8a668c8052d22fffafa794555423ed15b38155924fdaf48019437177114415331488fed84
+  metadata.gz: 2bae6ff11171d38a2cb7369af7b042972390786087754fd1e2a73fcd280b05b174c76c0766ce61ab31b8204ee77af6fecb7f3d3161784df3a49ae5b3eb5540f8
+  data.tar.gz: d95518f90db54705575b50b8beea6e9875f7f613ae8f26052aec65c6100c8274ddd0220795fc2d735e02a2f7a53a6dfc6561170945bfed288354c1e4495ddd7b

data/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 0.4.1
+
+- Support `reverse_x` as `false` when rendering a line graph in relative mode (without `display_attributes_on_hover: true` for now).
+- Add new `examples/graphs_and_charts/basic_line_graph_relative.rb` example that renders line graphs naturally from left to right (with reverse_x not specified, meaning having value `false`).
+
+## 0.4.0
+
+- Support `reverse_x` option; when `false`, line graphs are drawn naturally from left to right, and when `true`, line graphs are drawn like before from right to left.
+- Rename previous line graph examples to indicate that they have reverse_x as `true`
+- Add new `examples/graphs_and_charts/basic_line_graph.rb` example that renders line graphs naturally from left to right.
+
 ## 0.3.0
 
 - Initial implementation of `bubble_chart` custom control

data/README.md

@@ -1,13 +1,13 @@
-# Graphs and Charts 0.3.0 (Alpha)
+# Graphs and Charts 0.4.1 (Alpha)
 ## [Glimmer DSL for LibUI](https://github.com/AndyObtiva/glimmer-dsl-libui) Custom Controls
 [![Gem Version](https://badge.fury.io/rb/glimmer-libui-cc-graphs_and_charts.svg)](http://badge.fury.io/rb/glimmer-libui-cc-graphs_and_charts)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-Graphs and Charts (Custom Controls for [Glimmer DSL for LibUI](https://github.com/AndyObtiva/glimmer-dsl-libui))
+Graphs and Charts (Custom Controls for [Glimmer DSL for LibUI](https://github.com/AndyObtiva/glimmer-dsl-libui)). It is used in [Kuiq (Sidekiq UI)](https://github.com/mperham/kuiq).
 
 ![bar chart](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-bar-chart.png)
 
-![line graph](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph-relative.png)
+![line graph](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph.png)
 
 ![bubble chart](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-bubble-chart.png)
 
@@ -16,7 +16,7 @@ Graphs and Charts (Custom Controls for [Glimmer DSL for LibUI](https://github.co
 Add this line to Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-libui-cc-graphs_and_charts', '~> 0.3.0'
+gem 'glimmer-libui-cc-graphs_and_charts', '~> 0.4.1'
 ```
 
 Run:
@@ -137,6 +137,8 @@ Note that you can use in absolute mode or relative mode for determining x-axis v
 - Absolute Mode: pass `values` which maps x-axis values to y-axis values
 - Relative Mode: pass `y_values`, `x_value_start`, and `x_interval_in_seconds` (x-axis values are calculated automatically in a uniform way from `x_value_start` deducting `x_interval_in_seconds`)
 
+Look into [lib/glimmer/view/line_graph.rb](/lib/glimmer/view/line_graph.rb) to learn about all supported options.
+
 **Absolute Mode:**
 
 It supports any `Numeric` y-axis values in addition to `Time` x-axis values.
@@ -176,12 +178,85 @@ line_graph(
 
 ![basic line graph](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph.png)
 
+**Absolute Mode (reverse x):**
+
+It supports any `Numeric` y-axis values in addition to `Time` x-axis values.
+
+```ruby
+line_graph(
+  reverse_x: true,
+  width: 900,
+  height: 300,
+  lines: [
+    {
+      name: 'Stock 1',
+      stroke: [163, 40, 39, thickness: 2],
+      values: {
+        Time.new(2030, 12, 1) => 80,
+        Time.new(2030, 12, 2) => 36,
+        Time.new(2030, 12, 4) => 10,
+        Time.new(2030, 12, 5) => 60,
+        Time.new(2030, 12, 6) => 20,
+      },
+      x_value_format: -> (time) {time.strftime("%a %d %b %Y %T GMT")},
+    },
+    {
+      name: 'Stock 2',
+      stroke: [47, 109, 104, thickness: 2],
+      values: {
+        Time.new(2030, 12, 1) => 62,
+        Time.new(2030, 12, 2) => 0,
+        Time.new(2030, 12, 3) => 90,
+        Time.new(2030, 12, 5) => 0,
+        Time.new(2030, 12, 7) => 17,
+      },
+      x_value_format: -> (time) {time.strftime("%a %d %b %Y %T GMT")},
+    },
+  ],
+)
+```
+
+![basic line graph](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph-reverse-x.png)
+
 **Relative Mode:**
 
 Currently, it only supports `Integer` y-axis values in addition to `Time` x-axis values.
 
 ```ruby
 line_graph(
+  width: 900,
+  height: 300,
+  graph_point_distance: :width_divided_by_point_count,
+  lines: [
+    {
+      name: 'Feature A',
+      stroke: [163, 40, 39, thickness: 2],
+      x_value_start: @start_time,
+      x_interval_in_seconds: 8,
+      x_value_format: -> (time) {time.strftime("%a %d %b %Y %T GMT")},
+      y_values: [80, 36, 10, 60, 20, 110, 16, 5, 36, 1, 77, 15, 3, 34, 8, 63, 12, 17, 90, 28, 70]
+    },
+    {
+      name: 'Feature B',
+      stroke: [47, 109, 104, thickness: 2],
+      x_value_start: @start_time,
+      x_interval_in_seconds: 8,
+      x_value_format: -> (time) {time.strftime("%a %d %b %Y %T GMT")},
+      y_values: [62, 0, 90, 0, 0, 27, 0, 56, 0, 0, 24, 0, 60, 0, 30, 0, 47, 0, 38, 90, 0]
+    },
+  ],
+)
+```
+
+![basic line graph relative](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph-relative.png)
+
+**Relative Mode (reverse x):**
+
+Currently, it only supports `Integer` y-axis values in addition to `Time` x-axis values.
+
+```ruby
+line_graph(
+  reverse_x: true,
   width: 900,
   height: 300,
   graph_point_distance: :width_divided_by_point_count,
@@ -207,9 +282,7 @@ line_graph(
 )
 ```
 
-![basic line graph relative](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph-relative.png)
-
-Look into [lib/glimmer/view/line_graph.rb](/lib/glimmer/view/line_graph.rb) to learn about all supported options.
+![basic line graph relative](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph-relative-reverse-x.png)
 
 **Basic Line Graph Example:**
 
@@ -266,7 +339,7 @@ end
 BasicLineGraph.launch
 ```
 
-![basic line graph](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph.png)
+![basic line graph](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph-reverse-x.png)
 
 **Basic Line Graph Relative Example:**
 
@@ -314,7 +387,7 @@ end
 BasicLineGraphRelative.launch
 ```
 
-![basic line graph relative](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph-relative.png)
+![basic line graph relative](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph-relative-reverse-x.png)
 
 ### Bubble Chart
 

data/VERSION

@@ -1 +1 @@
-0.3.0
+0.4.1

data/examples/graphs_and_charts/basic_line_graph_relative.rb

@@ -35,7 +35,6 @@ class BasicLineGraphRelative
             y_values: [62, 0, 90, 0, 0, 27, 0, 56, 0, 0, 24, 0, 60, 0, 30, 0, 47, 0, 38, 90, 0]
           },
         ],
-        display_attributes_on_hover: true,
       )
       
       on_content_size_changed do

data/examples/graphs_and_charts/basic_line_graph_relative_reverse_x.rb

@@ -0,0 +1,50 @@
+# This line is only needed when running the example from inside the project directory
+$LOAD_PATH.prepend(File.expand_path(File.join(__dir__, '..', '..', 'lib'))) if File.exist?(File.join(__dir__, '..', '..', 'lib'))
+
+require 'glimmer-dsl-libui'
+require 'glimmer/view/line_graph'
+
+class BasicLineGraphRelative
+  include Glimmer::LibUI::Application
+  
+  before_body do
+    @start_time = Time.now
+  end
+  
+  body {
+    window('Basic Line Graph Relative', 900, 330) { |main_window|
+      @line_graph = line_graph(
+        reverse_x: true,
+        width: 900,
+        height: 300,
+        graph_point_distance: :width_divided_by_point_count,
+        lines: [
+          {
+            name: 'Feature A',
+            stroke: [163, 40, 39, thickness: 2],
+            x_value_start: @start_time,
+            x_interval_in_seconds: 8,
+            x_value_format: -> (time) {time.strftime("%a %d %b %Y %T GMT")},
+            y_values: [80, 36, 10, 60, 20, 110, 16, 5, 36, 1, 77, 15, 3, 34, 8, 63, 12, 17, 90, 28, 70]
+          },
+          {
+            name: 'Feature B',
+            stroke: [47, 109, 104, thickness: 2],
+            x_value_start: @start_time,
+            x_interval_in_seconds: 8,
+            x_value_format: -> (time) {time.strftime("%a %d %b %Y %T GMT")},
+            y_values: [62, 0, 90, 0, 0, 27, 0, 56, 0, 0, 24, 0, 60, 0, 30, 0, 47, 0, 38, 90, 0]
+          },
+        ],
+        display_attributes_on_hover: true,
+      )
+      
+      on_content_size_changed do
+        @line_graph.width = main_window.content_size[0]
+        @line_graph.height = main_window.content_size[1] - 30
+      end
+    }
+  }
+end
+
+BasicLineGraphRelative.launch

data/examples/graphs_and_charts/basic_line_graph_reverse_x.rb

@@ -0,0 +1,52 @@
+# This line is only needed when running the example from inside the project directory
+$LOAD_PATH.prepend(File.expand_path(File.join(__dir__, '..', '..', 'lib'))) if File.exist?(File.join(__dir__, '..', '..', 'lib'))
+
+require 'glimmer-dsl-libui'
+require 'glimmer/view/line_graph'
+
+class BasicLineGraph
+  include Glimmer::LibUI::Application
+  
+  body {
+    window('Basic Line Graph', 900, 300) { |main_window|
+      @line_graph = line_graph(
+        reverse_x: true,
+        width: 900,
+        height: 300,
+        lines: [
+          {
+            name: 'Stock 1',
+            stroke: [163, 40, 39, thickness: 2],
+            values: {
+              Time.new(2030, 12, 1) => 2,
+              Time.new(2030, 12, 2) => 2.5,
+              Time.new(2030, 12, 4) => 1,
+              Time.new(2030, 12, 5) => 0,
+              Time.new(2030, 12, 6) => 2,
+            },
+            x_value_format: -> (time) {time.strftime("%a %d %b %Y %T GMT")},
+          },
+          {
+            name: 'Stock 2',
+            stroke: [47, 109, 104, thickness: 2],
+            values: {
+              Time.new(2030, 12, 1) => 2,
+              Time.new(2030, 12, 2) => 0,
+              Time.new(2030, 12, 3) => 2.5,
+              Time.new(2030, 12, 5) => 1,
+              Time.new(2030, 12, 7) => 2,
+            },
+            x_value_format: -> (time) {time.strftime("%a %d %b %Y %T GMT")},
+          },
+        ],
+      )
+      
+      on_content_size_changed do
+        @line_graph.width = main_window.content_size[0]
+        @line_graph.height = main_window.content_size[1]
+      end
+    }
+  }
+end
+
+BasicLineGraph.launch

data/glimmer-libui-cc-graphs_and_charts.gemspec

@@ -2,16 +2,16 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Juwelier::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-libui-cc-graphs_and_charts 0.3.0 ruby lib
+# stub: glimmer-libui-cc-graphs_and_charts 0.4.1 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-libui-cc-graphs_and_charts".freeze
-  s.version = "0.3.0".freeze
+  s.version = "0.4.1".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
   s.authors = ["Andy Maleh".freeze]
-  s.date = "2024-02-17"
+  s.date = "2025-02-01"
   s.description = "Graphs and Charts (Glimmer DSL for LibUI Custom Controls), like Line Graph, Bar Chart, and Bubble Chart.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
@@ -28,6 +28,8 @@ Gem::Specification.new do |s|
     "examples/graphs_and_charts/basic_bubble_chart.rb",
     "examples/graphs_and_charts/basic_line_graph.rb",
     "examples/graphs_and_charts/basic_line_graph_relative.rb",
+    "examples/graphs_and_charts/basic_line_graph_relative_reverse_x.rb",
+    "examples/graphs_and_charts/basic_line_graph_reverse_x.rb",
     "glimmer-libui-cc-graphs_and_charts.gemspec",
     "lib/glimmer-libui-cc-graphs_and_charts.rb",
     "lib/glimmer/view/bar_chart.rb",

data/lib/glimmer/view/line_graph.rb

@@ -74,6 +74,7 @@ module Glimmer
       option :graph_status_height, default: DEFAULT_GRAPH_STATUS_HEIGHT
       
       option :display_attributes_on_hover, default: false
+      option :reverse_x, default: false
       
       before_body do
         self.lines = [lines] if lines.is_a?(Hash)
@@ -112,8 +113,13 @@ module Glimmer
         
             if @hover_point && lines && lines[0] && @points && @points[lines[0]] && !@points[lines[0]].empty?
               x = @hover_point[:x]
-              closest_point_index = ((width - graph_padding_width - x) / graph_point_distance_for_line(lines[0])).round
-              if closest_point_index != @closest_point_index
+              if lines[0][:x_interval_in_seconds]
+                closest_point_index = ((width - graph_padding_width - x) / graph_point_distance_for_line(lines[0])).round
+              else
+                closest_point_index = :absolute
+              end
+              if closest_point_index == :absolute || closest_point_index != @closest_point_index
+                # TODO look into optimizing this for absolute mode
                 @closest_point_index = closest_point_index
                 graph_area.queue_redraw_all
               end
@@ -275,12 +281,14 @@ module Glimmer
       end
       
       def all_line_graphs
-        lines.each { |graph_line| single_line_graph(graph_line) }
+        lines.each(&method(:single_line_graph))
       end
 
       def single_line_graph(graph_line)
         last_point = nil
         points = calculate_points(graph_line)
+        # points are already calculated as reversed before here, so here we reverse again if needed
+        points = reverse_x_in_points(points) if !reverse_x
         points.to_a.each do |point|
           if last_point
             line(last_point[:x], last_point[:y], point[:x], point[:y]) {
@@ -343,6 +351,23 @@ module Glimmer
         @points[graph_line]
       end
       
+      def reverse_x_in_points(points)
+        # TODO look into optimizing operations below by not iterating 3 times (perhaps one iteration could do everything)
+        points = points.map do |point|
+          point.merge(x: width_drawable.to_f - point[:x])
+        end
+        min_point = points.min_by {|point| point[:x]}
+        min_point_x = min_point[:x]
+        if min_point_x < 0
+          points.each do |point|
+            point[:x] = point[:x] - min_point_x
+          end
+        end
+        points.each do |point|
+          point[:x] = point[:x] + graph_padding_width.to_f
+        end
+      end
+      
       # this is the multiplier that we must multiply by the relative x value
       def x_resolution
         @x_resolution ||= width_drawable.to_f / x_value_range_for_all_lines.to_f
@@ -472,7 +497,19 @@ module Glimmer
         
         if @hover_point && lines && lines[0] && @points && @points[lines[0]] && !@points[lines[0]].empty?
           x = @hover_point[:x]
-          closest_points = lines.map { |line| @points[line][@closest_point_index] }
+          if @closest_point_index == :absolute # used in absolute mode
+            # TODO this is making a wrong assumption that there will be a point for every line
+            # some lines might end up with no points, so we need to filter them out
+            # we should start with the point across all lines that is closest to the mouse hover point
+            # and then pick up points that match its X value
+            closest_points = lines.map do |line|
+              line_points = @points[line]
+              point_distances_from_hover_point = line_points.map { |point| [point, PerfectShape::Point.point_distance(point[:x], point[:y], @hover_point[:x], @hover_point[:y])] }
+              closest_point = point_distances_from_hover_point.min_by(&:last).first
+            end
+          else
+            closest_points = lines.map { |line| @points[line][@closest_point_index] }
+          end
           closest_x = closest_points[0]&.[](:x)
           line(closest_x, graph_padding_height, closest_x, height - graph_padding_height) {
             stroke graph_stroke_hover_line
@@ -488,14 +525,21 @@ module Glimmer
               stroke stroke_value
             }
           end
-          text_label = formatted_x_value(@closest_point_index)
+          text_label = formatted_x_value(@closest_point_index, closest_points)
           text_label_width = estimate_width_of_text(text_label, DEFAULT_GRAPH_FONT_MARKER_TEXT)
           lines_with_closest_points = lines.each_with_index.map do |line, index|
             next if closest_points[index].nil?
             
             line
           end.compact
-          closest_point_texts = lines_with_closest_points.map { |line| "#{line[:name]}: #{line[:y_values][@closest_point_index]}" }
+          closest_point_texts = lines_with_closest_points.each_with_index.map do |line, index|
+            if @closest_point_index == :absolute
+              line_point = closest_points[index]
+              "#{line[:name]}: #{line_point[:y_value]}"
+            else
+              "#{line[:name]}: #{line[:y_values][@closest_point_index]}"
+            end
+          end
           closest_point_text_widths = closest_point_texts.map do |text|
             estimate_width_of_text(text, graph_font_marker_text)
           end
@@ -536,12 +580,10 @@ module Glimmer
         end
       end
       
-      def formatted_x_value(x_value_index)
-        # Today, we make the assumption that all lines have points along the same x-axis values
-        # TODO In the future, we can support different x values along different lines
+      def formatted_x_value(x_value_index, closest_points)
         graph_line = lines[0]
         x_value_format = graph_line[:x_value_format] || :to_s
-        x_value = calculated_x_value(x_value_index)
+        x_value = calculated_x_value(x_value_index, closest_points)
         if (x_value_format.is_a?(Symbol) || x_value_format.is_a?(String))
           x_value.send(x_value_format)
         else
@@ -549,11 +591,13 @@ module Glimmer
         end
       end
       
-      def calculated_x_value(x_value_index)
-        # Today, we make the assumption that all lines have points along the same x-axis values
-        # TODO In the future, we can support different x values along different lines
-        graph_line = lines[0]
-        graph_line[:x_value_start] - (graph_line[:x_interval_in_seconds] * x_value_index)
+      def calculated_x_value(x_value_index, closest_points = nil)
+        if x_value_index == :absolute # absolute mode
+          closest_points.first[:x_value]
+        else # relative mode
+          graph_line = lines[0]
+          graph_line[:x_value_start] - (graph_line[:x_interval_in_seconds] * x_value_index)
+        end
       end
       
       def estimate_width_of_text(text_string, font_properties)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-libui-cc-graphs_and_charts
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.1
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-17 00:00:00.000000000 Z
+date: 2025-02-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer-dsl-libui
@@ -90,6 +90,8 @@ files:
 - examples/graphs_and_charts/basic_bubble_chart.rb
 - examples/graphs_and_charts/basic_line_graph.rb
 - examples/graphs_and_charts/basic_line_graph_relative.rb
+- examples/graphs_and_charts/basic_line_graph_relative_reverse_x.rb
+- examples/graphs_and_charts/basic_line_graph_reverse_x.rb
 - glimmer-libui-cc-graphs_and_charts.gemspec
 - lib/glimmer-libui-cc-graphs_and_charts.rb
 - lib/glimmer/view/bar_chart.rb