Chartkick for Glimmer DSL for LibUI

[AndyObtiva]

Hi,

I was wondering if a Chartkick flavor could be built for Glimmer DSL for LibUI (Fukuoka Ruby 2022 Award Winning Ruby Desktop Development Cross-Platform Native GUI Library).

I actually recently started a a graphing/charting library effort for it here (it could be used as inspiration or guide to build a better library): https://github.com/AndyObtiva/glimmer-libui-cc-graphs_and_charts

It is used by Kuiq, a Sidekiq UI desktop app that instantly brings up Sidekiq activity in a cross-platform native GUI desktop app without having to visit a link in a browser or open yet another tab in a browser full of tabs: https://github.com/mperham/kuiq

Examples of supported graphs/charts in my graphing/charting library:

Bar Chart:

require 'glimmer-dsl-libui'
require 'glimmer/view/bar_chart'

class BasicBarChart
  include Glimmer::LibUI::Application

  body {
    window('Basic Bar Chart', 900, 300) { |main_window|
      @bar_chart = bar_chart(
        width: 900,
        height: 300,
        x_axis_label: 'Month',
        y_axis_label: 'New Customer Accounts',
        values: {
          'Jan' => 30,
          'Feb' => 49,
          'Mar' => 58,
          'Apr' => 63,
          'May' => 72,
          'Jun' => 86,
          'Jul' => 95,
          'Aug' => 100,
          'Sep' => 84,
          'Oct' => 68,
          'Nov' => 52,
          'Dec' => 36,
        }
      )

      on_content_size_changed do
        @bar_chart.width = main_window.content_size[0]
        @bar_chart.height = main_window.content_size[1]
      end
    }
  }
end

BasicBarChart.launch

Line Graph:

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) {
      line_graph(
        width: 900,
        height: 300,
        graph_point_distance: :width_divided_by_point_count,
        series: [
          {
            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,
      )
    }
  }
end

BasicLineGraphRelative.launch

Bubble Chart:

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

Still, my library above is still very new (alpha) and not nearly as programmer-friendly or feature-complete as Chartkick. I wouldn't consider myself an expert on building graphs and charts, but I appreciate Chartkick's super simple API (I have used it at work in a Rails web application in the past).

That's why I was wondering if you would be interested in building a Chartkick flavor for Glimmer DSL for LibUI to use in Ruby-based cross-platform native GUI desktop applications. Anyways, there is no urgent need for it. It could just be an idea to ponder over the next year or later.

[ankane]

Hi @AndyObtiva, looks cool. I think it'd be better as a separate library (like you have it now).