glimmer-libui-cc-graphs_and_charts
Advanced tools
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:
values which maps x-axis values to y-axis valuesy_values, x_value_start, and x_interval_in_seconds (x-axis values are calculated automatically in a uniform way from x_value_start deducting x_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
Copyright (c) 2023-2024 Andy Maleh. See LICENSE.txt for further details.
FAQs
Unknown package
We found that glimmer-libui-cc-graphs_and_charts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.