Home

Awesome

Graphs and Charts 0.3.0 (Alpha)

Glimmer DSL for LibUI Custom Controls

Gem Version Join the chat at https://gitter.im/AndyObtiva/glimmer

Graphs and Charts (Custom Controls for Glimmer DSL for LibUI). It is used in Kuiq (Sidekiq UI).

bar chart

line graph

bubble chart

Setup

Add this line to Bundler Gemfile:

gem 'glimmer-libui-cc-graphs_and_charts', '~> 0.3.0'

Run:

bundle

Usage

It is preferred that you only load the graphs/charts that you need to use as per the instructions in the sub-sections below to conserve memory and startup time.

However, if you prefer to load all graphs and charts, add this line to your Ruby file:

require 'glimmer-libui-cc-graphs_and_charts'

Bar Chart

To load the bar_chart custom control, add this line to your Ruby file:

require 'glimmer/view/bar_chart'

This makes the bar_chart Glimmer DSL for LibUI Custom Control available in the Glimmer GUI DSL. You can then nest bar_chart under window or some container like vertical_box. By the way, bar_chart is implemented on top of the area Glimmer DSL for LibUI control.

values are a Hash map of String x-axis values to Numeric y-axis values.

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,
  }
)

basic bar chart

Look into lib/glimmer/view/bar_chart.rb to learn about all supported options.

Basic Bar Chart Example:

examples/graphs_and_charts/basic_bar_chart.rb

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

basic bar chart

Line Graph

To load the line_graph custom control, add this line to your Ruby file:

require 'glimmer/view/line_graph'

This makes the line_graph Glimmer DSL for LibUI Custom Control available in the Glimmer GUI DSL. You can then nest line_graph under window or some container like vertical_box. By the way, line_graph is implemented on top of the area Glimmer DSL for LibUI control.

Note that you can use in absolute mode or relative mode for determining x-axis values starting from newest point to oldest point along the time x-axis:

Absolute Mode:

It supports any Numeric y-axis values in addition to Time x-axis values.

line_graph(
  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

Relative Mode:

Currently, it only supports Integer y-axis values in addition to Time x-axis values.

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: Time.now,
      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: Time.now,
      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,
)

basic line graph relative

Look into lib/glimmer/view/line_graph.rb to learn about all supported options.

Basic Line Graph Example:

examples/graphs_and_charts/basic_line_graph.rb

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(
        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")},
          },
        ],
      )
      
      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

basic line graph

Basic Line Graph Relative Example:

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

basic line graph relative

Bubble Chart

To load the bubble_chart custom control, add this line to your Ruby file:

require 'glimmer/view/bubble_chart'

This makes the bubble_chart Glimmer DSL for LibUI Custom Control 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.

values are a Hash map of Time x-axis values to Hash map of Numeric y-axis values to Numeric z-axis values.

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

Look into lib/glimmer/view/bar_chart.rb to learn about all supported options.

Basic Bubble Chart Example:

examples/graphs_and_charts/basic_bar_chart.rb

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

Contributing to glimmer-libui-cc-graphs_and_charts

Copyright

MIT

Copyright (c) 2023-2024 Andy Maleh. See LICENSE.txt for further details.