Glimmer DSL for LibUI Custom Controls
Graphs and Charts (Custom Controls for Glimmer DSL for LibUI)
Add this line to Bundler Gemfile:
gem 'glimmer-libui-cc-graphs_and_charts', '~> 0.3.0'Run:
bundle
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'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,
}
)
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
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: pass
valueswhich maps x-axis values to y-axis values - Relative Mode: pass
y_values,x_value_start, andx_interval_in_seconds(x-axis values are calculated automatically in a uniform way fromx_value_startdeductingx_interval_in_seconds)
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")},
},
],
)
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,
)
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 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
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')},
)
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
- Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
- Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
- Fork the project.
- Start a feature/bugfix branch.
- Commit and push until you are happy with your contribution.
- Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
- Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
Copyright (c) 2023-2024 Andy Maleh. See LICENSE.txt for further details.