glimmer-libui-cc-graphs_and_charts 0.1.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa1f107626b30af5f1158617ad578b5fcd82663700f60f36d581489026c7d5c8
-  data.tar.gz: 3c38aab6b233810235a2ad87e2ce78a0bc58def745d9a72c1c9a27243b9be140
+  metadata.gz: bad5c6db427c320e3b452ee60e2b3af416604525c96e74c915b59c905d746b07
+  data.tar.gz: 3659c73cd8a91a9da31c5cf2cb896b04130a7e1a4c58d2f2e92f7b841726de58
 SHA512:
-  metadata.gz: 131eddeb423e5b7c2194cddd21c7ce828b63dd6554f05c6377cf4960057bd30a5535ae705477e95d9b72782d7d355090e75ad08acad08f84bfa48ac5eeeafe17
-  data.tar.gz: bbe9afaafbc760c80f73c59979f9354e9826129310b7122331e566dc24039ce5525b3968239c085ffc369b06a233a63d33ca0aa7f91a8c9f9560fa7f7783d248
+  metadata.gz: 9ff88818e482120a5492d7bb2a789afc89d1a40efed3411d355afcc5db7737ef5f5a5e206a3a2737ccdcaf11a8ba01592a398878b1cd005153d1d3ead08d2728
+  data.tar.gz: b487f6b49b979d6b3a72a2c174f8cd55c558037e2baf2997b6ddaf0a2b2e9ffa243d62ce48558966115a07bfaccf69802682a7d94b0af4043dad29da5e33e909

data/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 0.1.6
+
+- Support passing line `values` as a `Hash` map of x-axis values to y-axis values instead of using the combination of `y_values`, `x_value_start`, and `x_interval_in_seconds`
+- Rename `examples/graphs_and_charts/basic_line_graph.rb` to `examples/graphs_and_charts/basic_line_graph_relative.rb`
+- New `examples/graphs_and_charts/basic_line_graph.rb` (replacing older example that got renamed to `basic_line_graph_relative.rb`)
+- Add graph auto-scaling logic to both `examples/graphs_and_charts/basic_line_graph.rb` & `examples/graphs_and_charts/basic_line_graph_relative.rb`
+
+## 0.1.5
+
+- Render circles for every point in addition to the lines connecting all the points
+- Render a single point if there is only 1 value in `lines` `y_values` instead of rendering nothing until 2 values exist at least
+- Support `graph_point_radius`, `graph_selected_point_radius`, and `graph_fill_selected_point` options for customizing the circle of every rendered point and selected point.
+- Avoid rendering on top of the grid markers on the left side
+- Optimize performance of rendering grid markers and showing mouse hover selection stats of a point
+
 ## 0.1.4
 
 - Fix issue with crashing at `lib/glimmer/view/line_graph.rb:243:in y_value_max_for_all_lines': undefined method max for nil:NilClass`

data/README.md

@@ -1,4 +1,4 @@
-# Graphs and Charts 0.1.4 (Alpha)
+# Graphs and Charts 0.1.6 (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)
@@ -12,7 +12,7 @@ Graphs and Charts (Custom Controls) for [Glimmer DSL for LibUI](https://github.c
 Add this line to Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-libui-cc-graphs_and_charts', '~> 0.1.4'
+gem 'glimmer-libui-cc-graphs_and_charts', '~> 0.1.6'
 ```
 
 Run:
@@ -47,7 +47,7 @@ line_graph(
   width: 900,
   height: 300,
   graph_point_distance: :width_divided_by_point_count,
-  lines: [
+  series: [
     {
       name: 'Feature A',
       stroke: [163, 40, 39, thickness: 2],
@@ -71,6 +71,8 @@ line_graph(
 
 ![basic line graph](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph.png)
 
+Look into [lib/glimmer/view/line_graph.rb](/lib/glimmer/view/line_graph.rb) to learn about all supported options.
+
 Basic Line Graph Example:
 
 [examples/graphs_and_charts/basic_line_graph.rb](/examples/graphs_and_charts/basic_line_graph.rb)
@@ -92,7 +94,7 @@ class BasicLineGraph
         width: 900,
         height: 300,
         graph_point_distance: :width_divided_by_point_count,
-        lines: [
+        series: [
           {
             name: 'Feature A',
             stroke: [163, 40, 39, thickness: 2],

data/VERSION

@@ -1 +1 @@
-0.1.4
+0.1.6

data/examples/graphs_and_charts/basic_line_graph.rb

@@ -7,36 +7,43 @@ require 'glimmer/view/line_graph'
 class BasicLineGraph
   include Glimmer::LibUI::Application
   
-  before_body do
-    @start_time = Time.now
-  end
-  
   body {
-    window('Basic Line Graph', 900, 330) {
-      line_graph(
+    window('Basic Line Graph', 900, 300) { |main_window|
+      @line_graph = line_graph(
         width: 900,
         height: 300,
-        graph_point_distance: :width_divided_by_point_count,
         lines: [
           {
-            name: 'Feature A',
+            name: 'Stock 1',
             stroke: [163, 40, 39, thickness: 2],
-            x_value_start: @start_time,
-            x_interval_in_seconds: 8,
+            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")},
-            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',
+            name: 'Stock 2',
             stroke: [47, 109, 104, thickness: 2],
-            x_value_start: @start_time,
-            x_interval_in_seconds: 8,
+            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")},
-            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]
+      end
     }
   }
 end

data/examples/graphs_and_charts/basic_line_graph_relative.rb

@@ -0,0 +1,49 @@
+# 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
+  
+  before_body do
+    @start_time = Time.now
+  end
+  
+  body {
+    window('Basic Line Graph', 900, 330) { |main_window|
+      @line_graph = 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]
+          },
+        ],
+        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
+
+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.1.4 ruby lib
+# stub: glimmer-libui-cc-graphs_and_charts 0.1.6 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-libui-cc-graphs_and_charts".freeze
-  s.version = "0.1.4".freeze
+  s.version = "0.1.6".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 = "2023-12-19"
+  s.date = "2023-12-22"
   s.description = "Graphs and Charts (Custom Controls) for Glimmer DSL for LibUI, like Line Graph.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
@@ -25,6 +25,7 @@ Gem::Specification.new do |s|
     "README.md",
     "VERSION",
     "examples/graphs_and_charts/basic_line_graph.rb",
+    "examples/graphs_and_charts/basic_line_graph_relative.rb",
     "glimmer-libui-cc-graphs_and_charts.gemspec",
     "lib/glimmer-libui-cc-graphs_and_charts.rb",
     "lib/glimmer/view/line_graph.rb"

data/lib/glimmer/view/line_graph.rb

@@ -4,12 +4,21 @@ module Glimmer
   module View
     # General-Purpose Line Graph Custom Control
     class LineGraph
+      class << self
+        def interpret_color(color_object)
+          @color_cache ||= {}
+          @color_cache[color_object] ||= Glimmer::LibUI.interpret_color(color_object)
+        end
+      end
+    
       include Glimmer::LibUI::CustomControl
       
       DEFAULT_GRAPH_PADDING_WIDTH = 5.0
       DEFAULT_GRAPH_PADDING_HEIGHT = 5.0
-      DEFAULT_GRAPH_GRID_MARKER_PADDING_WIDTH = 30.0
+      DEFAULT_GRAPH_GRID_MARKER_PADDING_WIDTH = 37.0
       DEFAULT_GRAPH_POINT_DISTANCE = 15.0
+      DEFAULT_GRAPH_POINT_RADIUS = 1.0
+      DEFAULT_GRAPH_SELECTED_POINT_RADIUS = 3.0
       
       DEFAULT_GRAPH_STROKE_GRID = [185, 184, 185]
       DEFAULT_GRAPH_STROKE_MARKER = [185, 184, 185]
@@ -17,6 +26,8 @@ module Glimmer
       DEFAULT_GRAPH_STROKE_PERIODIC_LINE = [121, 121, 121, thickness: 1, dashes: [1, 1]]
       DEFAULT_GRAPH_STROKE_HOVER_LINE = [133, 133, 133]
       
+      DEFAULT_GRAPH_FILL_SELECTED_POINT = :white
+      
       DEFAULT_GRAPH_COLOR_MARKER_TEXT = [96, 96, 96]
       DEFAULT_GRAPH_COLOR_PERIOD_TEXT = [163, 40, 39]
       
@@ -44,6 +55,8 @@ module Glimmer
       option :graph_padding_height, default: DEFAULT_GRAPH_PADDING_HEIGHT
       option :graph_grid_marker_padding_width, default: DEFAULT_GRAPH_GRID_MARKER_PADDING_WIDTH
       option :graph_point_distance, default: DEFAULT_GRAPH_POINT_DISTANCE
+      option :graph_point_radius, default: DEFAULT_GRAPH_POINT_RADIUS
+      option :graph_selected_point_radius, default: DEFAULT_GRAPH_SELECTED_POINT_RADIUS
       
       option :graph_stroke_grid, default: DEFAULT_GRAPH_STROKE_GRID
       option :graph_stroke_marker, default: DEFAULT_GRAPH_STROKE_MARKER
@@ -51,6 +64,8 @@ module Glimmer
       option :graph_stroke_periodic_line, default: DEFAULT_GRAPH_STROKE_PERIODIC_LINE
       option :graph_stroke_hover_line, default: DEFAULT_GRAPH_STROKE_HOVER_LINE
       
+      option :graph_fill_selected_point, default: DEFAULT_GRAPH_FILL_SELECTED_POINT
+      
       option :graph_color_marker_text, default: DEFAULT_GRAPH_COLOR_MARKER_TEXT
       option :graph_color_period_text, default: DEFAULT_GRAPH_COLOR_PERIOD_TEXT
       
@@ -93,7 +108,7 @@ module Glimmer
         
             if @hover_point && lines && lines[0] && @points && @points[lines[0]] && !@points[lines[0]].empty?
               x = @hover_point[:x]
-              closest_point_index = @points[lines[0]].each_with_index.min_by { |point, index| (point[:x] - x).abs }[1]
+              closest_point_index = ((width - graph_padding_width - x) / graph_point_distance_for_line(lines[0])).round
               if closest_point_index != @closest_point_index
                 @closest_point_index = closest_point_index
                 graph_area.queue_redraw_all
@@ -116,8 +131,17 @@ module Glimmer
       def clear_drawing_cache
         @graph_point_distance_per_line = nil
         @y_value_max_for_all_lines = nil
+        @x_resolution = nil
+        @x_value_range_for_all_lines = nil
+        @x_value_min_for_all_lines = nil
+        @x_value_max_for_all_lines = nil
         @grid_marker_points = nil
         @points = nil
+        @grid_marker_number_values = nil
+        @grid_marker_numbers = nil
+        @graph_stroke_marker_values = nil
+        @mod_values = nil
+        @estimated_widths_of_text = nil
       end
       
       def calculate_dynamic_options
@@ -125,13 +149,19 @@ module Glimmer
       end
       
       def calculate_graph_point_distance_per_line
-        return unless graph_point_distance == :width_divided_by_point_count
+        return unless lines[0]&.[](:y_values) && graph_point_distance == :width_divided_by_point_count
         
-        @graph_point_distance_per_line = lines.inject({}) do |hash, line|
-          hash.merge(line => (width - 2.0*graph_padding_width - graph_grid_marker_padding_width) / (line[:y_values].size - 1).to_f)
+        @graph_point_distance_per_line ||= lines.inject({}) do |hash, line|
+          value = (width - 2.0*graph_padding_width - graph_grid_marker_padding_width) / (line[:y_values].size - 1).to_f
+          value = [value, drawable_width].min
+          hash.merge(line => value)
         end
       end
       
+      def drawable_width
+        width - 2.0*graph_padding_width - graph_grid_marker_padding_width
+      end
+      
       def graph_point_distance_for_line(line)
         @graph_point_distance_per_line&.[](line) || graph_point_distance
       end
@@ -149,12 +179,25 @@ module Glimmer
         line(graph_padding_width, height - graph_padding_height, width - graph_padding_width, height - graph_padding_height) {
           stroke graph_stroke_grid
         }
+        grid_marker_number_font = graph_font_marker_text.merge(size: 11)
+        @grid_marker_number_values ||= []
+        @grid_marker_numbers ||= []
+        @graph_stroke_marker_values ||= []
+        @mod_values ||= []
         grid_marker_points.each_with_index do |marker_point, index|
-          grid_marker_number_value = (grid_marker_points.size - index).to_i
-          grid_marker_number = (grid_marker_number_value >= 1000) ? "#{grid_marker_number_value / 1000}K" : grid_marker_number_value.to_s
-          graph_stroke_marker_value = Glimmer::LibUI.interpret_color(graph_stroke_marker)
-          graph_stroke_marker_value[:thickness] = (index != grid_marker_points.size - 1 ? 2 : 1) if graph_stroke_marker_value[:thickness].nil?
-          mod_value = (2 * ((grid_marker_points.size / max_marker_count) + 1))
+          @grid_marker_number_values[index] ||= (grid_marker_points.size - index).to_i
+          grid_marker_number_value = @grid_marker_number_values[index]
+          @grid_marker_numbers[index] ||= (grid_marker_number_value >= 1000) ? "#{grid_marker_number_value / 1000}K" : grid_marker_number_value.to_s
+          grid_marker_number = @grid_marker_numbers[index]
+          @graph_stroke_marker_values[index] ||= LineGraph.interpret_color(graph_stroke_marker).tap do |color_hash|
+            color_hash[:thickness] = (index != grid_marker_points.size - 1 ? 2 : 1) if color_hash[:thickness].nil?
+          end
+          graph_stroke_marker_value = @graph_stroke_marker_values[index]
+          @mod_values[index] ||= begin
+            mod_value_multiplier = ((grid_marker_points.size / max_marker_count) + 1)
+            [((mod_value_multiplier <= 2 ? 2 : 5) * mod_value_multiplier), 1].max
+          end
+          mod_value = @mod_values[index]
           comparison_value = (mod_value > 2) ? 0 : 1
           if mod_value > 2
             if grid_marker_number_value % mod_value == comparison_value
@@ -173,7 +216,6 @@ module Glimmer
             }
           end
           if grid_marker_number_value % mod_value == comparison_value
-            grid_marker_number_font = graph_font_marker_text.merge(size: 11)
             grid_marker_number_width = estimate_width_of_text(grid_marker_number, grid_marker_number_font)
             text(marker_point[:x] + 4 + 3, marker_point[:y] - 6, grid_marker_number_width) {
               string(grid_marker_number) {
@@ -210,17 +252,30 @@ module Glimmer
       def single_line_graph(graph_line)
         last_point = nil
         points = calculate_points(graph_line)
-        points.each do |point|
+        points.to_a.each do |point|
           if last_point
             line(last_point[:x], last_point[:y], point[:x], point[:y]) {
               stroke graph_line[:stroke]
             }
           end
+          if last_point.nil? || graph_point_radius > 1
+            circle(point[:x], point[:y], graph_point_radius) {
+              fill graph_line[:stroke]
+            }
+          end
           last_point = point
         end
       end
       
       def calculate_points(graph_line)
+        if lines[0]&.[](:y_values)
+          calculate_points_relative(graph_line)
+        else
+          calculate_points_absolute(graph_line)
+        end
+      end
+      
+      def calculate_points_relative(graph_line)
         @points ||= {}
         if @points[graph_line].nil?
           y_values = graph_line[:y_values] || []
@@ -236,9 +291,67 @@ module Glimmer
         @points[graph_line]
       end
       
+      def calculate_points_absolute(graph_line)
+        @points ||= {}
+        if @points[graph_line].nil?
+          values = graph_line[:values] || []
+          # all points are visible when :values is supplied because we stretch the graph to show them all
+          graph_y_max = [y_value_max_for_all_lines, 1].max
+          x_value_range_for_all_lines
+          points = values.each_with_index.map do |(x_value, y_value), index|
+            relative_x_value = x_value - x_value_min_for_all_lines
+            stretched_x_value = x_value_range_for_all_lines == 0 ? 0 : relative_x_value.to_f * x_resolution.to_f
+            x = width - graph_padding_width - stretched_x_value
+            y = ((height - graph_padding_height) - y_value * ((height - graph_padding_height * 2) / graph_y_max))
+            {x: x, y: y, index: index, x_value: x_value, y_value: y_value}
+          end
+          # Translation is not supported today
+          # TODO consider supporting in the future
+#           @points[graph_line] = translate_points(graph_line, points)
+          @points[graph_line] = points
+        end
+        @points[graph_line]
+      end
+      
+      # this is the multiplier that we must multiply by the relative_x_value
+      def x_resolution
+        @x_resolution ||= drawable_width.to_f / x_value_range_for_all_lines.to_f
+      end
+      
+      def x_value_range_for_all_lines
+        @x_value_range_for_all_lines ||= x_value_max_for_all_lines - x_value_min_for_all_lines
+      end
+      
+      def x_value_min_for_all_lines
+        if @x_value_min_for_all_lines.nil?
+          line_visible_x_values = lines.map { |line| line[:values].to_h.keys }
+          all_visible_x_values = line_visible_x_values.reduce(:+) || []
+          # Right now, we assume Time objects
+          # TODO support String representations of Time (w/ some auto-detection of format)
+          @x_value_min_for_all_lines = all_visible_x_values.min
+        end
+        @x_value_min_for_all_lines
+      end
+      
+      def x_value_max_for_all_lines
+        if @x_value_max_for_all_lines.nil?
+          line_visible_x_values = lines.map { |line| line[:values].to_h.keys }
+          all_visible_x_values = line_visible_x_values.reduce(:+) || []
+          # Right now, we assume Time objects
+          # TODO support String representations of Time (w/ some auto-detection of format)
+          @x_value_max_for_all_lines = all_visible_x_values.max
+        end
+        @x_value_max_for_all_lines
+      end
+      
       def y_value_max_for_all_lines
         if @y_value_max_for_all_lines.nil?
-          line_visible_y_values = lines.map { |line| line[:y_values][0, max_visible_point_count(line)] }
+          if lines[0]&.[](:y_values)
+            line_visible_y_values = lines.map { |line| line[:y_values][0, max_visible_point_count(line)] }
+          else
+            # When using :values , we always stretch the graph so that all points are visible
+            line_visible_y_values = lines.map { |line| line[:values].to_h.values }
+          end
           all_visible_y_values = line_visible_y_values.reduce(:+) || []
           @y_value_max_for_all_lines = all_visible_y_values.max.to_f
         end
@@ -257,14 +370,16 @@ module Glimmer
         points
       end
       
-      def max_visible_point_count(graph_line) = (width / graph_point_distance_for_line(graph_line)).to_i + 1
+      def max_visible_point_count(graph_line) = ((width - graph_grid_marker_padding_width) / graph_point_distance_for_line(graph_line)).to_i + 1
 
       def periodic_lines
         return unless lines && lines[0] && lines[0][:x_interval_in_seconds] && lines[0][:x_interval_in_seconds] == DAY_IN_SECONDS
         day_count = lines[0][:y_values].size
         case day_count
         when ..7
-          @points[lines[0]].each do |point|
+          @points[lines[0]].each_with_index do |point, index|
+            next if index == 0
+            
             line(point[:x], graph_padding_height, point[:x], height - graph_padding_height) {
               stroke graph_stroke_periodic_line
             }
@@ -323,68 +438,64 @@ module Glimmer
           x = @hover_point[:x]
           closest_points = lines.map { |line| @points[line][@closest_point_index] }
           closest_x = closest_points[0]&.[](:x)
-          closest_x_distance = PerfectShape::Point.point_distance(x.to_f, 0, closest_x.to_f, 0)
-          # 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
-          if closest_x_distance < graph_point_distance_for_line(lines[0])
-            line(closest_x, graph_padding_height, closest_x, height - graph_padding_height) {
-              stroke graph_stroke_hover_line
+          line(closest_x, graph_padding_height, closest_x, height - graph_padding_height) {
+            stroke graph_stroke_hover_line
+          }
+          closest_points.each_with_index do |closest_point, index|
+            next unless closest_point && closest_point[:x] && closest_point[:y]
+            
+            circle(closest_point[:x], closest_point[:y], graph_selected_point_radius) {
+              fill graph_fill_selected_point == :line_stroke ? lines[index][:stroke] : graph_fill_selected_point
+              stroke_value = lines[index][:stroke].dup
+              stroke_value << {} unless stroke_value.last.is_a?(Hash)
+              stroke_value.last[:thickness] = 2
+              stroke stroke_value
             }
-            closest_points.each_with_index do |closest_point, index|
-              next unless closest_point && closest_point[:x] && closest_point[:y]
-              
-              circle(closest_point[:x], closest_point[:y], 4) {
-                fill lines[index][:stroke]
-              }
-              circle(closest_point[:x], closest_point[:y], 2) {
-                fill :white
-              }
-            end
-            text_label = formatted_x_value(@closest_point_index)
-            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
-            closest_point_texts = lines_with_closest_points.map { |line| "#{line[:name]}: #{line[:y_values][@closest_point_index]}" }
-            closest_point_text_widths = closest_point_texts.map do |text|
-              estimate_width_of_text(text, graph_font_marker_text)
-            end
-            square_size = 12.0
-            square_to_label_padding = 10.0
-            label_padding = 10.0
-            text_label_x = width - graph_padding_width - text_label_width - label_padding -
-              (lines_with_closest_points.size*(square_size + square_to_label_padding) + (lines_with_closest_points.size - 1)*label_padding + closest_point_text_widths.sum)
-            text_label_y = height + graph_padding_height
+          end
+          text_label = formatted_x_value(@closest_point_index)
+          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_text_widths = closest_point_texts.map do |text|
+            estimate_width_of_text(text, graph_font_marker_text)
+          end
+          square_size = 12.0
+          square_to_label_padding = 10.0
+          label_padding = 10.0
+          text_label_x = width - graph_padding_width - text_label_width - label_padding -
+            (lines_with_closest_points.size*(square_size + square_to_label_padding) + (lines_with_closest_points.size - 1)*label_padding + closest_point_text_widths.sum)
+          text_label_y = height + graph_padding_height
 
-            text(text_label_x, text_label_y, text_label_width) {
-              string(text_label) {
-                font DEFAULT_GRAPH_FONT_MARKER_TEXT
-                color graph_color_marker_text
-              }
+          text(text_label_x, text_label_y, text_label_width) {
+            string(text_label) {
+              font DEFAULT_GRAPH_FONT_MARKER_TEXT
+              color graph_color_marker_text
             }
+          }
 
-            relative_x = text_label_x + text_label_width
-            lines_with_closest_points.size.times do |index|
-              square_x = relative_x + label_padding
+          relative_x = text_label_x + text_label_width
+          lines_with_closest_points.size.times do |index|
+            square_x = relative_x + label_padding
 
-              square(square_x, text_label_y + 2, square_size) {
-                fill lines_with_closest_points[index][:stroke]
-              }
+            square(square_x, text_label_y + 2, square_size) {
+              fill lines_with_closest_points[index][:stroke]
+            }
 
-              attribute_label_x = square_x + square_size + square_to_label_padding
-              attribute_text = closest_point_texts[index]
-              attribute_text_width = closest_point_text_widths[index]
-              relative_x = attribute_label_x + attribute_text_width
+            attribute_label_x = square_x + square_size + square_to_label_padding
+            attribute_text = closest_point_texts[index]
+            attribute_text_width = closest_point_text_widths[index]
+            relative_x = attribute_label_x + attribute_text_width
 
-              text(attribute_label_x, text_label_y, attribute_text_width) {
-                string(attribute_text) {
-                  font graph_font_marker_text
-                  color graph_color_marker_text
-                }
+            text(attribute_label_x, text_label_y, attribute_text_width) {
+              string(attribute_text) {
+                font graph_font_marker_text
+                color graph_color_marker_text
               }
-            end
+            }
           end
         end
       end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-libui-cc-graphs_and_charts
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.6
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-12-19 00:00:00.000000000 Z
+date: 2023-12-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer-dsl-libui
@@ -81,6 +81,7 @@ files:
 - README.md
 - VERSION
 - examples/graphs_and_charts/basic_line_graph.rb
+- examples/graphs_and_charts/basic_line_graph_relative.rb
 - glimmer-libui-cc-graphs_and_charts.gemspec
 - lib/glimmer-libui-cc-graphs_and_charts.rb
 - lib/glimmer/view/line_graph.rb