glimmer-libui-cc-graphs_and_charts 0.2.3 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c3b89df50fd8dd9d1670fd4e54568fdf90538dfb8a1566bbb7431826c8578f2e
-  data.tar.gz: 52820e7aaef7a1edbead1748cc33fc50408d7dd8a7763a93db53154cf4232752
+  metadata.gz: '01195bf257b2d2c5d68720d762b2787e56824304a1524ddee62bd6107cd4ce87'
+  data.tar.gz: 55118796cfc077ee9265f35f5126ef51b3a4ec9661eca624f098194c13136bca
 SHA512:
-  metadata.gz: 5d5ab5c841bd63fc6154b326cd8ff7cb175dd727292a6bfbd95082274f42127f850a321de30224099904064c8809228d5a063cf353cb0296eb31e675b4e227e9
-  data.tar.gz: b690434592d74c43929567d856771528e4e31792d575682983838a4fe619fd319f0935e594f8413f2ad7904b59b4ac13ff345e665de570edcdbeb9ef354b7248
+  metadata.gz: cb736fcd7e72aba035fa0709c74d68fe5d4ac5fceb4baca02541aa8a6e65b62f4383af211457886413bac2f38852b4f31a81f99b2e70e8ae99a8abe4537ea53b
+  data.tar.gz: 605148fa95182c42c31c31eb7932e452ebdbc54806b1b8cbb51fbdb5f5fe1b4dd1a6021efad71623ded0eeb5a9481d4065b120bc25c7c209efd2df29cc377e57

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 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
+- New `examples/graphs_and_charts/basic_bubble_chart.rb`
+- Ensure that dynamically setting `lines` option in `line_graph` normalizes `lines` into `Array` if value is a `Hash`
+
 ## 0.2.3
 
 - Automatically scale number of `bar_chart` horizontal grid markers so that if the chart width gets small enough for them to run into each other, less of them are displayed

data/README.md

@@ -1,20 +1,22 @@
-# Graphs and Charts 0.2.3 (Alpha)
+# Graphs and Charts 0.4.0 (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)
 
 ## Setup
 
 Add this line to Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-libui-cc-graphs_and_charts', '~> 0.2.3'
+gem 'glimmer-libui-cc-graphs_and_charts', '~> 0.4.0'
 ```
 
 Run:
@@ -174,12 +176,53 @@ line_graph(
 
 ![basic line graph](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-line-graph.png)
 
-**Relative Mode:**
+**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 (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,
@@ -205,7 +248,7 @@ line_graph(
 )
 ```
 
-![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)
 
 Look into [lib/glimmer/view/line_graph.rb](/lib/glimmer/view/line_graph.rb) to learn about all supported options.
 
@@ -264,7 +307,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:**
 
@@ -312,7 +355,203 @@ 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
+
+To load the `bubble_chart` custom control, add this line to your Ruby file:
+
+```ruby
+require 'glimmer/view/bubble_chart'
+```
+
+This makes the `bubble_chart` [Glimmer DSL for LibUI Custom Control](https://github.com/AndyObtiva/glimmer-dsl-libui#custom-components) available in the Glimmer GUI DSL.
+You can then nest `bubble_chart` under `window` or some container like `vertical_box`. By the way, `bubble_chart` is implemented on top of the [`area` Glimmer DSL for LibUI control](https://github.com/AndyObtiva/glimmer-dsl-libui#area-api).
+
+`values` are a `Hash` map of `Time` x-axis values to `Hash` map of `Numeric` y-axis values to `Numeric` z-axis values.
+
+```ruby
+bubble_chart(
+  width: 900,
+  height: 300,
+  chart_color_bubble: [239, 9, 9],
+  values: {
+    Time.new(2030, 12, 1, 13, 0, 0) => {
+      1 => 4,
+      2 => 8,
+      8 => 3,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 2) => {
+      1 => 1,
+      2 => 5,
+      7 => 2,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 4) => {
+      1 => 2,
+      2 => 3,
+      4 => 4,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 6) => {
+      1 => 7,
+      2 => 2,
+      7 => 5,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 8) => {
+      1 => 6,
+      2 => 8,
+      8 => 1,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 10) => {
+      1 => 1,
+      2 => 2,
+      3 => 9,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 12) => {
+      1 => 5,
+      2 => 12,
+      5 => 17,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 14) => {
+      1 => 9,
+      2 => 2,
+      6 => 10,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 16) => {
+      1 => 0,
+      2 => 5,
+      7 => 8,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 18) => {
+      1 => 9,
+      3 => 3,
+      5 => 6,
+      10 => 0
+    },
+    Time.new(2030, 12, 1, 13, 0, 20) => {
+      2 => 2,
+      4 => 4,
+      7 => 7,
+      10 => 0
+    },
+  },
+  x_value_format: -> (time) {time.strftime('%M:%S')},
+)
+```
+
+![basic bubble chart](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-bubble-chart.png)
+
+Look into [lib/glimmer/view/bar_chart.rb](/lib/glimmer/view/bar_chart.rb) to learn about all supported options.
+
+**Basic Bubble Chart Example:**
+
+[examples/graphs_and_charts/basic_bar_chart.rb](/examples/graphs_and_charts/basic_bar_chart.rb)
+
+```ruby
+require 'glimmer-dsl-libui'
+require 'glimmer/view/bubble_chart'
+
+class BasicBubbleChart
+  include Glimmer::LibUI::Application
+  
+  body {
+    window('Basic Line Graph', 900, 300) { |main_window|
+      @bubble_chart = bubble_chart(
+        width: 900,
+        height: 300,
+        chart_color_bubble: [239, 9, 9],
+        values: {
+          Time.new(2030, 12, 1, 13, 0, 0) => {
+            1 => 4,
+            2 => 8,
+            8 => 3,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 2) => {
+            1 => 1,
+            2 => 5,
+            7 => 2,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 4) => {
+            1 => 2,
+            2 => 3,
+            4 => 4,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 6) => {
+            1 => 7,
+            2 => 2,
+            7 => 5,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 8) => {
+            1 => 6,
+            2 => 8,
+            8 => 1,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 10) => {
+            1 => 1,
+            2 => 2,
+            3 => 9,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 12) => {
+            1 => 5,
+            2 => 12,
+            5 => 17,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 14) => {
+            1 => 9,
+            2 => 2,
+            6 => 10,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 16) => {
+            1 => 0,
+            2 => 5,
+            7 => 8,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 18) => {
+            1 => 9,
+            3 => 3,
+            5 => 6,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 20) => {
+            2 => 2,
+            4 => 4,
+            7 => 7,
+            10 => 0
+          },
+        },
+        x_value_format: -> (time) {time.strftime('%M:%S')},
+      )
+      
+      on_content_size_changed do
+        @bubble_chart.width = main_window.content_size[0]
+        @bubble_chart.height = main_window.content_size[1]
+      end
+    }
+  }
+end
+
+BasicBubbleChart.launch
+```
+
+![basic bubble chart](/screenshots/glimmer-libui-cc-graphs_and_charts-mac-basic-bubble-chart.png)
+
 
 Contributing to glimmer-libui-cc-graphs_and_charts
 ------------------------------------------

data/VERSION

@@ -1 +1 @@
-0.2.3
+0.4.0

data/examples/graphs_and_charts/basic_bubble_chart.rb

@@ -0,0 +1,95 @@
+# 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/bubble_chart'
+
+class BasicBubbleChart
+  include Glimmer::LibUI::Application
+  
+  body {
+    window('Basic Bubble Chart', 900, 300) { |main_window|
+      @bubble_chart = bubble_chart(
+        width: 900,
+        height: 300,
+        chart_color_bubble: [239, 9, 9],
+        values: {
+          Time.new(2030, 12, 1, 13, 0, 0) => {
+            1 => 4,
+            2 => 8,
+            8 => 3,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 2) => {
+            1 => 1,
+            2 => 5,
+            7 => 2,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 4) => {
+            1 => 2,
+            2 => 3,
+            4 => 4,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 6) => {
+            1 => 7,
+            2 => 2,
+            7 => 5,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 8) => {
+            1 => 6,
+            2 => 8,
+            8 => 1,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 10) => {
+            1 => 1,
+            2 => 2,
+            3 => 9,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 12) => {
+            1 => 5,
+            2 => 12,
+            5 => 17,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 14) => {
+            1 => 9,
+            2 => 2,
+            6 => 10,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 16) => {
+            1 => 0,
+            2 => 5,
+            7 => 8,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 18) => {
+            1 => 9,
+            3 => 3,
+            5 => 6,
+            10 => 0
+          },
+          Time.new(2030, 12, 1, 13, 0, 20) => {
+            2 => 2,
+            4 => 4,
+            7 => 7,
+            10 => 0
+          },
+        },
+        x_value_format: -> (time) {time.strftime('%M:%S')},
+      )
+      
+      on_content_size_changed do
+        @bubble_chart.width = main_window.content_size[0]
+        @bubble_chart.height = main_window.content_size[1]
+      end
+    }
+  }
+end
+
+BasicBubbleChart.launch

data/examples/graphs_and_charts/{basic_line_graph_relative.rb → basic_line_graph_relative_reverse_x.rb}

@@ -14,6 +14,7 @@ class BasicLineGraphRelative
   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,

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,17 +2,17 @@
 # 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.2.3 ruby lib
+# stub: glimmer-libui-cc-graphs_and_charts 0.4.0 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-libui-cc-graphs_and_charts".freeze
-  s.version = "0.2.3".freeze
+  s.version = "0.4.0".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-01-03"
-  s.description = "Graphs and Charts (Custom Controls) for Glimmer DSL for LibUI, like Line Graph.".freeze
+  s.date = "2025-01-27"
+  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 = [
     "CHANGELOG.md",
@@ -25,17 +25,20 @@ Gem::Specification.new do |s|
     "README.md",
     "VERSION",
     "examples/graphs_and_charts/basic_bar_chart.rb",
+    "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",
+    "lib/glimmer/view/bubble_chart.rb",
     "lib/glimmer/view/line_graph.rb"
   ]
   s.homepage = "http://github.com/AndyObtiva/glimmer-libui-cc-graphs_and_charts".freeze
   s.licenses = ["MIT".freeze]
   s.rubygems_version = "3.5.3".freeze
-  s.summary = "Graphs and Charts - Glimmer DSL for LibUI Custom Controls".freeze
+  s.summary = "Graphs and Charts (Glimmer DSL for LibUI Custom Controls)".freeze
 
   s.specification_version = 4
 

data/lib/glimmer/view/bubble_chart.rb

@@ -0,0 +1,579 @@
+require 'glimmer-dsl-libui'
+
+module Glimmer
+  module View
+    # General-Purpose Bubble Chart Custom Control
+    class BubbleChart
+      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_CHART_PADDING_WIDTH = 5.0
+      DEFAULT_CHART_PADDING_HEIGHT = 5.0
+      DEFAULT_CHART_GRID_MARKER_PADDING_WIDTH = 37.0
+      DEFAULT_CHART_POINT_DISTANCE = 15.0
+      DEFAULT_CHART_POINT_RADIUS = 1.0
+      DEFAULT_CHART_SELECTED_POINT_RADIUS = 3.0
+      
+      DEFAULT_CHART_STROKE_GRID = [185, 184, 185]
+      DEFAULT_CHART_STROKE_MARKER = [185, 184, 185]
+      DEFAULT_CHART_STROKE_MARKER_LINE = [217, 217, 217, thickness: 1, dashes: [1, 1]]
+      DEFAULT_CHART_STROKE_PERIODIC_LINE = [121, 121, 121, thickness: 1, dashes: [1, 1]]
+      DEFAULT_CHART_STROKE_HOVER_LINE = [133, 133, 133]
+      
+      DEFAULT_CHART_FILL_SELECTED_POINT = :white
+      
+      DEFAULT_CHART_COLOR_BUBBLE = [92, 122, 190]
+      DEFAULT_CHART_COLOR_MARKER_TEXT = [96, 96, 96]
+      DEFAULT_CHART_COLOR_PERIOD_TEXT = [163, 40, 39]
+      
+      DEFAULT_CHART_FONT_MARKER_TEXT = {family: "Arial", size: 14}
+      
+      DEFAULT_CHART_STATUS_HEIGHT = 30.0
+      
+      DAY_IN_SECONDS = 60*60*24
+  
+      option :width, default: 600
+      option :height, default: 200
+      
+      option :lines, default: [] # TODO remove this once conversion of code to bubble chart is complete
+      option :values, default: []
+      
+      option :chart_padding_width, default: DEFAULT_CHART_PADDING_WIDTH
+      option :chart_padding_height, default: DEFAULT_CHART_PADDING_HEIGHT
+      option :chart_grid_marker_padding_width, default: DEFAULT_CHART_GRID_MARKER_PADDING_WIDTH
+      option :chart_point_distance, default: DEFAULT_CHART_POINT_DISTANCE
+      option :chart_point_radius, default: DEFAULT_CHART_POINT_RADIUS
+      option :chart_selected_point_radius, default: DEFAULT_CHART_SELECTED_POINT_RADIUS
+      
+      option :chart_stroke_grid, default: DEFAULT_CHART_STROKE_GRID
+      option :chart_stroke_marker, default: DEFAULT_CHART_STROKE_MARKER
+      option :chart_stroke_marker_line, default: DEFAULT_CHART_STROKE_MARKER_LINE
+      option :chart_stroke_periodic_line, default: DEFAULT_CHART_STROKE_PERIODIC_LINE
+      option :chart_stroke_hover_line, default: DEFAULT_CHART_STROKE_HOVER_LINE
+      
+      option :chart_fill_selected_point, default: DEFAULT_CHART_FILL_SELECTED_POINT
+      
+      option :chart_color_bubble, default: DEFAULT_CHART_COLOR_BUBBLE
+      option :chart_color_marker_text, default: DEFAULT_CHART_COLOR_MARKER_TEXT
+      option :chart_color_period_text, default: DEFAULT_CHART_COLOR_PERIOD_TEXT
+      
+      option :chart_font_marker_text, default: DEFAULT_CHART_FONT_MARKER_TEXT
+      
+      option :chart_status_height, default: DEFAULT_CHART_STATUS_HEIGHT
+      
+      option :display_attributes_on_hover, default: false
+      
+      before_body do
+        generate_lines
+      end
+      
+      after_body do
+        observe(self, :values) do
+          generate_lines
+          clear_drawing_cache
+          body_root.queue_redraw_all
+        end
+        observe(self, :width) do
+          clear_drawing_cache
+        end
+        observe(self, :height) do
+          clear_drawing_cache
+        end
+      end
+  
+      body {
+        area { |chart_area|
+          on_draw do
+            calculate_dynamic_options
+            chart_background
+            grid_lines
+            all_bubble_charts
+            periodic_lines
+            hover_stats
+          end
+
+          on_mouse_moved do |event|
+            @hover_point = {x: event[:x], y: event[:y]}
+        
+            if @hover_point && lines && lines[0] && @points && @points[lines[0]] && !@points[lines[0]].empty?
+              x = @hover_point[:x]
+              closest_point_index = ((width - chart_padding_width - x) / chart_point_distance_for_line(lines[0])).round
+              if closest_point_index != @closest_point_index
+                @closest_point_index = closest_point_index
+                chart_area.queue_redraw_all
+              end
+            end
+          end
+
+          on_mouse_exited do |outside|
+            if !@hover_point.nil?
+              @hover_point = nil
+              @closest_point_index = nil
+              chart_area.queue_redraw_all
+            end
+          end
+        }
+      }
+      
+      private
+      
+      def generate_lines
+        normalized_values = []
+        values.each do |x_value, y_z_hash|
+          y_z_hash.each do |y_value, z_value|
+            normalized_values << {x_value: x_value, y_value: y_value, z_value: z_value}
+          end
+        end
+        normalized_lines_values = []
+        normalized_values.each do |normalized_value|
+          normalized_line_values = normalized_lines_values.detect do |line|
+            !line.include?(normalized_value[:x_value])
+          end
+          if normalized_line_values.nil?
+            normalized_line_values = {}
+            normalized_lines_values << normalized_line_values
+          end
+          normalized_line_values[normalized_value[:x_value]] = normalized_value[:y_value]
+        end
+        self.lines = normalized_lines_values.map do |normalized_line_values|
+          # TODO take name from component options/constants
+          {name: 'Bubble Chart', values: normalized_line_values}
+        end
+      end
+      
+      def clear_drawing_cache
+        @chart_point_distance_per_line = nil
+        @y_value_max_for_all_lines = nil
+        @x_resolution = nil
+        @y_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
+        @chart_stroke_marker_values = nil
+        @mod_values = nil
+      end
+      
+      def calculate_dynamic_options
+        calculate_chart_point_distance_per_line
+      end
+      
+      def calculate_chart_point_distance_per_line
+        return unless lines[0]&.[](:y_values) && chart_point_distance == :width_divided_by_point_count
+        
+        @chart_point_distance_per_line ||= lines.inject({}) do |hash, line|
+          value = (width - 2.0*chart_padding_width - chart_grid_marker_padding_width) / (line[:y_values].size - 1).to_f
+          value = [value, width_drawable].min
+          hash.merge(line => value)
+        end
+      end
+      
+      def width_drawable
+        width - 2.0*chart_padding_width - chart_grid_marker_padding_width
+      end
+      
+      def height_drawable
+        height - 2.0*chart_padding_height
+      end
+      
+      def chart_point_distance_for_line(line)
+        @chart_point_distance_per_line&.[](line) || chart_point_distance
+      end
+      
+      def chart_background
+        rectangle(0, 0, width, height + (display_attributes_on_hover ? chart_status_height : 0)) {
+          fill 255, 255, 255
+        }
+      end
+  
+      def grid_lines
+        line(chart_padding_width, chart_padding_height, chart_padding_width, height - chart_padding_height) {
+          stroke chart_stroke_grid
+        }
+        line(chart_padding_width, height - chart_padding_height, width - chart_padding_width, height - chart_padding_height) {
+          stroke chart_stroke_grid
+        }
+        grid_marker_number_font = chart_font_marker_text.merge(size: 11)
+        @grid_marker_number_values ||= []
+        @grid_marker_numbers ||= []
+        @chart_stroke_marker_values ||= []
+        @mod_values ||= []
+        grid_marker_points.each_with_index do |marker_point, index|
+          @grid_marker_number_values[index] ||= begin
+            value = (grid_marker_points.size - index).to_i
+            value = y_value_max_for_all_lines if !y_value_max_for_all_lines.nil? && y_value_max_for_all_lines.to_i != y_value_max_for_all_lines && index == 0
+            value
+          end
+          grid_marker_number_value = @grid_marker_number_values[index]
+          # TODO consider not caching the following line as that might save memory and run faster without caching
+          @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]
+          @chart_stroke_marker_values[index] ||= BubbleChart.interpret_color(chart_stroke_marker).tap do |color_hash|
+            color_hash[:thickness] = (index != grid_marker_points.size - 1 ? 2 : 1) if color_hash[:thickness].nil?
+          end
+          chart_stroke_marker_value = @chart_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
+              line(marker_point[:x], marker_point[:y], marker_point[:x] + 4, marker_point[:y]) {
+                stroke chart_stroke_marker_value
+              }
+            end
+          else
+            line(marker_point[:x], marker_point[:y], marker_point[:x] + 4, marker_point[:y]) {
+              stroke chart_stroke_marker_value
+            }
+          end
+          if grid_marker_number_value % mod_value == comparison_value && grid_marker_number_value != grid_marker_points.size
+            line(marker_point[:x], marker_point[:y], marker_point[:x] + width - chart_padding_width, marker_point[:y]) {
+              stroke chart_stroke_marker_line
+            }
+          end
+          if grid_marker_number_value % mod_value == comparison_value || grid_marker_number_value != grid_marker_number_value.to_i
+            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) {
+                font grid_marker_number_font
+                color chart_color_marker_text
+              }
+            }
+          end
+        end
+      end
+      
+      def grid_marker_points
+        if @grid_marker_points.nil?
+          if lines[0]&.[](:y_values)
+            chart_y_max = [y_value_max_for_all_lines, 1].max
+            current_chart_height = (height - chart_padding_height * 2)
+            division_height = current_chart_height / chart_y_max
+            @grid_marker_points = chart_y_max.to_i.times.map do |marker_index|
+              x = chart_padding_width
+              y = chart_padding_height + marker_index * division_height
+              {x: x, y: y}
+            end
+          else
+            chart_y_max = y_value_max_for_all_lines
+            y_value_count = chart_y_max.ceil
+            @grid_marker_points = y_value_count.times.map do |marker_index|
+              x = chart_padding_width
+              y_value = y_value_count - marker_index
+              if marker_index == 0 && chart_y_max.ceil != chart_y_max.to_i
+                y_value = chart_y_max
+              end
+              scaled_y_value = y_value.to_f * y_resolution.to_f
+              y = height - chart_padding_height - scaled_y_value
+              {x: x, y: y}
+            end
+          end
+        end
+
+        @grid_marker_points
+      end
+      
+      def max_marker_count
+        [(0.15*height).to_i, 1].max
+      end
+      
+      def all_bubble_charts
+        lines.each { |chart_line| single_bubble_chart(chart_line) }
+      end
+
+      def single_bubble_chart(chart_line)
+        points = calculate_points(chart_line)
+        points.to_a.each do |point|
+#           circle(point[:x], point[:y], chart_point_radius) {
+          circle(point[:x], point[:y], point[:z]) {
+            fill chart_color_bubble
+          }
+        end
+      end
+      
+      def calculate_points(chart_line)
+        if lines[0]&.[](:y_values)
+          calculate_points_relative(chart_line)
+        else
+          calculate_points_absolute(chart_line)
+        end
+      end
+      
+      def calculate_points_relative(chart_line)
+        @points ||= {}
+        if @points[chart_line].nil?
+          y_values = chart_line[:y_values] || []
+          y_values = y_values[0, max_visible_point_count(chart_line)]
+          chart_y_max = [y_value_max_for_all_lines, 1].max
+          points = y_values.each_with_index.map do |y_value, index|
+            x = width - chart_padding_width - (index * chart_point_distance_for_line(chart_line))
+            y = ((height - chart_padding_height) - y_value * ((height - chart_padding_height * 2) / chart_y_max))
+            {x: x, y: y, index: index, y_value: y_value}
+          end
+          @points[chart_line] = translate_points(chart_line, points)
+        end
+        @points[chart_line]
+      end
+      
+      def calculate_points_absolute(chart_line)
+        @points ||= {}
+        # and then use them to produce a :z key in the hash below
+        if @points[chart_line].nil?
+          values = chart_line[:values] || []
+          # all points are visible when :values is supplied because we stretch the chart to show them all
+          chart_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|
+            z_value = self.values[x_value][y_value]
+            relative_x_value = x_value - x_value_min_for_all_lines
+            scaled_x_value = x_value_range_for_all_lines == 0 ? 0 : relative_x_value.to_f * x_resolution.to_f
+            scaled_y_value = y_value_max_for_all_lines == 0 ? 0 : y_value.to_f * y_resolution.to_f
+            x = width - chart_padding_width - scaled_x_value
+            y = height - chart_padding_height - scaled_y_value
+#             z = z_value == 0 ? z_value : z_value + 1 # TODO change 1 with magnification factor or something
+            z = z_value
+            {x: x, y: y, z: z, index: index, x_value: x_value, y_value: y_value}
+          end
+          # Translation is not supported today
+          # TODO consider supporting in the future
+#           @points[chart_line] = translate_points(chart_line, points)
+          @points[chart_line] = points
+        end
+        @points[chart_line]
+      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
+      end
+      
+      # this is the multiplier that we must multiply by the relative y value
+      def y_resolution
+        # TODO in the future, we will use the y range, but today, we assume it starts at 0
+        @y_resolution ||= height_drawable.to_f / y_value_max_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?
+          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 chart 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
+        @y_value_max_for_all_lines
+      end
+      
+      def translate_points(chart_line, points)
+        max_job_count_before_translation = ((width / chart_point_distance_for_line(chart_line)).to_i + 1)
+        x_translation = [(points.size - max_job_count_before_translation) * chart_point_distance_for_line(chart_line), 0].max
+        if x_translation > 0
+          points.each do |point|
+            # need to check if point[:x] is present because if the user shrinks the window, we drop points
+            point[:x] = point[:x] - x_translation if point[:x]
+          end
+        end
+        points
+      end
+      
+      def max_visible_point_count(chart_line) = ((width - chart_grid_marker_padding_width) / chart_point_distance_for_line(chart_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_with_index do |point, index|
+            next if index == 0
+            
+            line(point[:x], chart_padding_height, point[:x], height - chart_padding_height) {
+              stroke chart_stroke_periodic_line
+            }
+            day = calculated_x_value(point[:index]).strftime("%e")
+            font_size = chart_font_marker_text[:size]
+            text(point[:x], height - chart_padding_height - font_size*1.4, font_size*2) {
+              string(day) {
+                font chart_font_marker_text
+                color chart_color_period_text
+              }
+            }
+          end
+        when ..30
+          @points[lines[0]].each_with_index do |point, index|
+            day_number = index + 1
+            if day_number % 7 == 0
+              line(point[:x], chart_padding_height, point[:x], height - chart_padding_height) {
+                stroke chart_stroke_periodic_line
+              }
+              date = calculated_x_value(point[:index]).strftime("%b %e")
+              font_size = chart_font_marker_text[:size]
+              text(point[:x] + 4, height - chart_padding_height - font_size*1.4, font_size*6) {
+                string(date) {
+                  font chart_font_marker_text
+                  color chart_color_period_text
+                }
+              }
+            end
+          end
+        else
+          @points[lines[0]].each do |point|
+            if calculated_x_value(point[:index]).strftime("%d") == "01"
+              line(point[:x], chart_padding_height, point[:x], height - chart_padding_height) {
+                stroke chart_stroke_periodic_line
+              }
+              date = calculated_x_value(point[:index]).strftime("%b")
+              font_size = chart_font_marker_text[:size]
+              text(point[:x] + 4, height - chart_padding_height - font_size*1.4, font_size*6) {
+                string(date) {
+                  font chart_font_marker_text
+                  color chart_color_period_text
+                }
+              }
+            end
+          end
+        end
+      end
+      
+      def hover_stats
+        return unless display_attributes_on_hover && @closest_point_index
+        
+        require "bigdecimal"
+        require "perfect_shape/point"
+        
+        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] }
+          closest_x = closest_points[0]&.[](:x)
+          line(closest_x, chart_padding_height, closest_x, height - chart_padding_height) {
+            stroke chart_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], chart_selected_point_radius) {
+              fill chart_fill_selected_point == :line_stroke ? chart_color_bubble : chart_fill_selected_point
+              stroke_value = chart_color_bubble.dup
+              stroke_value << {} unless stroke_value.last.is_a?(Hash)
+              stroke_value.last[:thickness] = 2
+              stroke stroke_value
+            }
+          end
+          text_label = formatted_x_value(@closest_point_index)
+          text_label_width = estimate_width_of_text(text_label, DEFAULT_CHART_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, chart_font_marker_text)
+          end
+          square_size = 12.0
+          square_to_label_padding = 10.0
+          label_padding = 10.0
+          text_label_x = width - chart_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 + chart_padding_height
+
+          text(text_label_x, text_label_y, text_label_width) {
+            string(text_label) {
+              font DEFAULT_CHART_FONT_MARKER_TEXT
+              color chart_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
+
+            square(square_x, text_label_y + 2, square_size) {
+              fill chart_color_bubble
+            }
+
+            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 chart_font_marker_text
+                color chart_color_marker_text
+              }
+            }
+          end
+        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
+        chart_line = lines[0]
+        x_value_format = chart_line[:x_value_format] || :to_s
+        x_value = calculated_x_value(x_value_index)
+        if (x_value_format.is_a?(Symbol) || x_value_format.is_a?(String))
+          x_value.send(x_value_format)
+        else
+          x_value_format.call(x_value)
+        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
+        chart_line = lines[0]
+        chart_line[:x_value_start] - (chart_line[:x_interval_in_seconds] * x_value_index)
+      end
+      
+      def estimate_width_of_text(text_string, font_properties)
+        return 0 if text_string.to_s.empty?
+        font_size = font_properties[:size] || 16
+        estimated_font_width = 0.63 * font_size
+        text_string.chars.size * estimated_font_width
+      end
+      
+    end
+  end
+end

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)
@@ -81,8 +82,12 @@ module Glimmer
       
       after_body do
         observe(self, :lines) do
-          clear_drawing_cache
-          body_root.queue_redraw_all
+          if lines.is_a?(Hash)
+            self.lines = [lines]
+          else
+            clear_drawing_cache
+            body_root.queue_redraw_all
+          end
         end
         observe(self, :width) do
           clear_drawing_cache
@@ -108,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
@@ -271,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]) {
@@ -339,6 +351,22 @@ 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]}
+        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
@@ -468,7 +496,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
@@ -484,14 +524,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
@@ -532,12 +579,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
@@ -545,11 +590,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.2.3
+  version: 0.4.0
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-03 00:00:00.000000000 Z
+date: 2025-01-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer-dsl-libui
@@ -72,8 +72,8 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description: Graphs and Charts (Custom Controls) for Glimmer DSL for LibUI, like Line
-  Graph.
+description: Graphs and Charts (Glimmer DSL for LibUI Custom Controls), like Line
+  Graph, Bar Chart, and Bubble Chart.
 email: andy.am@gmail.com
 executables: []
 extensions: []
@@ -87,11 +87,14 @@ files:
 - README.md
 - VERSION
 - examples/graphs_and_charts/basic_bar_chart.rb
+- 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
+- lib/glimmer/view/bubble_chart.rb
 - lib/glimmer/view/line_graph.rb
 homepage: http://github.com/AndyObtiva/glimmer-libui-cc-graphs_and_charts
 licenses:
@@ -115,5 +118,5 @@ requirements: []
 rubygems_version: 3.5.3
 signing_key:
 specification_version: 4
-summary: Graphs and Charts - Glimmer DSL for LibUI Custom Controls
+summary: Graphs and Charts (Glimmer DSL for LibUI Custom Controls)
 test_files: []