From 1d31b3a7dc321a13281b899ed121502f59e7ad7b Mon Sep 17 00:00:00 2001 From: Jorge <63685920+JFerrerBeired@users.noreply.github.com> Date: Thu, 25 Mar 2021 03:06:55 +0100 Subject: [PATCH] Add some style representation customization Width of the grid and function lines. Made drawing points for LineChart optional (especially useful when using a huge number of points to avoid overclustering). For this I had to rewrite the draw_lines function to work similar to draw_points using point_positions instead of information of the point nodes. The string position of the labels is correctly calculated now. It uses a new variable: label_displacement so it don't look too close to the axis and the border. Set some default values that make more sense to the instanciable scenes. --- addons/easy_charts/LineChart/line_chart.gd | 68 ++++++++++++++++--- addons/easy_charts/LineChart/line_chart.tscn | 22 +++--- .../ScatterChart/scatter_chart.tscn | 25 ++++--- addons/easy_charts/Utilities/Scripts/chart.gd | 18 ++++- .../Utilities/Scripts/scatter_chart_base.gd | 38 +++++------ 5 files changed, 121 insertions(+), 50 deletions(-) diff --git a/addons/easy_charts/LineChart/line_chart.gd b/addons/easy_charts/LineChart/line_chart.gd index c9bd286..6622bfe 100644 --- a/addons/easy_charts/LineChart/line_chart.gd +++ b/addons/easy_charts/LineChart/line_chart.gd @@ -14,29 +14,77 @@ class_name LineChart # In these cases they are known as run charts. # Source: Wikipedia +var show_points := true +var function_line_width : int = 2 + + +func build_property_list(): + .build_property_list() + + property_list.append( + { + "hint": PROPERTY_HINT_NONE, + "usage": PROPERTY_USAGE_DEFAULT | PROPERTY_USAGE_SCRIPT_VARIABLE, + "name": "Chart_Display/show_points", + "type": TYPE_BOOL + }) + + #Find first element of Chart Display + var position + for i in property_list.size(): + if property_list[i]["name"].find("Chart_Style") != -1: #Found + position = i + break + + property_list.insert(position + 2, #I want it to be below point shape and function colors + { + "hint": PROPERTY_HINT_RANGE, + "hint_string": "1, 100, 1", + "usage": PROPERTY_USAGE_DEFAULT | PROPERTY_USAGE_SCRIPT_VARIABLE, + "name": "Chart_Style/function_line_width", + "type": TYPE_INT + }) + func _get_property_list(): property_list[0].name = "LineChart" return property_list +func _get(property): + match property: + "Chart_Display/show_points": + return show_points + "Chart_Style/function_line_width": + return function_line_width + + +func _set(property, value): + match property: + "Chart_Display/show_points": + show_points = value + return true + "Chart_Style/function_line_width": + function_line_width = value + return true + + func _draw(): clear_points() draw_grid() draw_chart_outlines() - draw_points() + if show_points: + draw_points() draw_lines() draw_treshold() func draw_lines(): - var _function = 0 - for PointContainer in Points.get_children(): #Each function is stored in a different PointContainer - for function_point in range(1, PointContainer.get_children().size()): + for function in point_values.size(): + for function_point in range(1, point_values[function].size()): draw_line( - point_positions[_function][function_point - 1], - point_positions[_function][function_point], - function_colors[_function], - 2, - false) - _function += 1 + point_positions[function][function_point - 1], + point_positions[function][function_point], + function_colors[function], + function_line_width, + false) diff --git a/addons/easy_charts/LineChart/line_chart.tscn b/addons/easy_charts/LineChart/line_chart.tscn index 7dacb9e..340aee8 100644 --- a/addons/easy_charts/LineChart/line_chart.tscn +++ b/addons/easy_charts/LineChart/line_chart.tscn @@ -3,7 +3,6 @@ [ext_resource path="res://addons/easy_charts/Utilities/Point/point_data.tscn" type="PackedScene" id=1] [ext_resource path="res://addons/easy_charts/LineChart/line_chart.gd" type="Script" id=4] - [sub_resource type="Theme" id=1] [node name="LineChart" type="Control"] @@ -27,12 +26,16 @@ In these cases they are known as run charts." } Chart_Properties/are_values_columns = false Chart_Properties/labels_index = 0 -Chart_Properties/show_x_values_as_labels = true -Chart_Display/x_decim = 5.0 +Chart_Properties/show_x_values_as_labels = false +Chart_Display/autoscale_x = true +Chart_Display/x_decim = 1.0 +Chart_Display/autoscale_y = true Chart_Display/y_decim = 1.0 -Chart_Style/points_shape = [ 0 ] -Chart_Style/function_colors = [ Color( 0.117647, 0.117647, 0.117647, 1 ) ] +Chart_Style/points_shape = [ ] +Chart_Style/function_colors = PoolColorArray( 0.117647, 0.117647, 0.117647, 1, 0.117647, 0.117647, 0.117647, 1, 0.117647, 0.117647, 0.117647, 1, 0.117647, 0.117647, 0.117647, 1 ) +Chart_Style/function_line_width = 2 Chart_Style/box_color = Color( 0.117647, 0.117647, 0.117647, 1 ) +Chart_Style/grid_lines_width = 1 Chart_Style/v_lines_color = Color( 0.792157, 0.792157, 0.792157, 1 ) Chart_Style/h_lines_color = Color( 0.792157, 0.792157, 0.792157, 1 ) Chart_Style/font = null @@ -43,6 +46,7 @@ Chart_Style/template = 0 Chart_Modifiers/treshold = Vector2( 0, 0 ) Chart_Modifiers/only_disp_values = Vector2( 0, 0 ) Chart_Modifiers/invert_chart = false +Chart_Display/show_points = true [node name="Background" type="ColorRect" parent="."] visible = false @@ -82,10 +86,10 @@ __meta__ = { [node name="PointData" parent="." instance=ExtResource( 1 )] [node name="PointData" parent="PointData" index="0"] -margin_left = -257.531 -margin_top = -244.08 -margin_right = -257.667 -margin_bottom = -243.28 +margin_left = -458.75 +margin_top = -164.504 +margin_right = -458.886 +margin_bottom = -163.704 theme = SubResource( 1 ) [editable path="PointData"] diff --git a/addons/easy_charts/ScatterChart/scatter_chart.tscn b/addons/easy_charts/ScatterChart/scatter_chart.tscn index f7cd4e3..e108418 100644 --- a/addons/easy_charts/ScatterChart/scatter_chart.tscn +++ b/addons/easy_charts/ScatterChart/scatter_chart.tscn @@ -3,7 +3,6 @@ [ext_resource path="res://addons/easy_charts/Utilities/Point/point_data.tscn" type="PackedScene" id=1] [ext_resource path="res://addons/easy_charts/ScatterChart/scatter_chart.gd" type="Script" id=2] - [sub_resource type="Theme" id=1] [node name="ScatterChart" type="Control"] @@ -24,18 +23,24 @@ the horizontal axis and the value of the other variable determining the position } Chart_Properties/are_values_columns = false Chart_Properties/labels_index = 0 -Chart_Properties/show_x_values_as_labels = true -Chart_Display/x_decim = 5.0 -Chart_Display/y_decim = 5.0 -Chart_Style/points_shape = [ 0 ] -Chart_Style/function_colors = PoolColorArray( 0.117647, 0.117647, 0.117647, 1, 0.117647, 0.117647, 0.117647, 1, 0.117647, 0.117647, 0.117647, 1, 0.117647, 0.117647, 0.117647, 1 ) +Chart_Properties/show_x_values_as_labels = false +Chart_Display/autoscale_x = true +Chart_Display/x_decim = 1.0 +Chart_Display/autoscale_y = true +Chart_Display/y_decim = 1.0 +Chart_Style/points_shape = [ ] +Chart_Style/function_colors = PoolColorArray( ) Chart_Style/box_color = Color( 0.117647, 0.117647, 0.117647, 1 ) +Chart_Style/grid_lines_width = 1 Chart_Style/v_lines_color = Color( 0.792157, 0.792157, 0.792157, 1 ) Chart_Style/h_lines_color = Color( 0.792157, 0.792157, 0.792157, 1 ) Chart_Style/font = null Chart_Style/bold_font = null Chart_Style/font_color = Color( 0.117647, 0.117647, 0.117647, 1 ) +Chart_Style/use_template = true Chart_Style/template = 0 +Chart_Modifiers/treshold = Vector2( 0, 0 ) +Chart_Modifiers/only_disp_values = Vector2( 0, 0 ) Chart_Modifiers/invert_chart = false [node name="Background" type="ColorRect" parent="."] @@ -76,10 +81,10 @@ __meta__ = { [node name="PointData" parent="." instance=ExtResource( 1 )] [node name="PointData" parent="PointData" index="0"] -margin_left = -311.73 -margin_top = -167.672 -margin_right = -311.866 -margin_bottom = -166.872 +margin_left = -510.384 +margin_top = -148.79 +margin_right = -510.52 +margin_bottom = -147.99 theme = SubResource( 1 ) [editable path="PointData"] diff --git a/addons/easy_charts/Utilities/Scripts/chart.gd b/addons/easy_charts/Utilities/Scripts/chart.gd index 70e3b44..88f66cc 100644 --- a/addons/easy_charts/Utilities/Scripts/chart.gd +++ b/addons/easy_charts/Utilities/Scripts/chart.gd @@ -101,6 +101,7 @@ var points_shape : Array = [PointShapes.Dot] setget set_points_shape var function_colors = [Color("#1e1e1e")] setget set_function_colors var outline_color : Color = Color("#1e1e1e") setget set_outline_color var box_color : Color = Color("#1e1e1e") setget set_box_color +var grid_lines_width : int = 1 setget set_grid_lines_width var v_lines_color : Color = Color("#cacaca") setget set_v_lines_color var h_lines_color : Color = Color("#cacaca") setget set_h_lines_color var grid_color : Color = Color("#1e1e1e") setget set_grid_color @@ -131,7 +132,9 @@ var treshold : Vector2 setget set_treshold # only used to draw treshold values var treshold_draw : Vector2 -var tic_length : int = 5 setget set_tic_length +# Custom parameters for plot display +var tic_length : int = 5 setget set_tic_length # Length of the bar indicating a tic +var label_displacement : int = 4 setget set_label_displacement # Separation between the label and both the axis and the edge border # !! API v2 static func instance(chart_type : int): @@ -182,6 +185,8 @@ func _get(property): return grid_color "Chart_Style/box_color": return box_color + "Chart_Style/grid_lines_width": + return grid_lines_width "Chart_Style/v_lines_color": return v_lines_color "Chart_Style/h_lines_color": @@ -264,6 +269,9 @@ func _set(property, value): "Chart_Style/box_color": box_color = value return true + "Chart_Style/grid_lines_width": + grid_lines_width = value + return true "Chart_Style/v_lines_color": v_lines_color = value return true @@ -635,10 +643,18 @@ func set_box_color(c : Color): func set_tic_length(i: int): tic_length = i +# ! API +func set_label_displacement(i:int): + label_displacement = i + # ! API func set_grid_color(c : Color): grid_color = c +# ! API +func set_grid_lines_width(i : int): + grid_lines_width = i + # ! API func set_v_lines_color(c : Color): v_lines_color = c diff --git a/addons/easy_charts/Utilities/Scripts/scatter_chart_base.gd b/addons/easy_charts/Utilities/Scripts/scatter_chart_base.gd index 7ab760a..a03d6a1 100644 --- a/addons/easy_charts/Utilities/Scripts/scatter_chart_base.gd +++ b/addons/easy_charts/Utilities/Scripts/scatter_chart_base.gd @@ -145,6 +145,14 @@ func build_property_list(): "type": TYPE_COLOR }) property_list.append( + { + "hint": PROPERTY_HINT_RANGE, + "hint_string": "1, 100, 1", + "usage": PROPERTY_USAGE_DEFAULT | PROPERTY_USAGE_SCRIPT_VARIABLE, + "name": "Chart_Style/grid_lines_width", + "type": TYPE_INT + }) + property_list.append( { "hint": PROPERTY_HINT_NONE, "usage": PROPERTY_USAGE_DEFAULT | PROPERTY_USAGE_SCRIPT_VARIABLE, @@ -501,6 +509,7 @@ func calculate_tics(): x_labels[i] = String(x_labels[i]) x_chors = x_labels else: + #TODO: h_dist = ? for function in y_labels.size(): for value in x_datas[function]: if not x_chors.has(value as String): #Don't append repeated values @@ -514,8 +523,8 @@ func build_chart(): if length > longest_y_tic: longest_y_tic = length - OFFSET.x = longest_y_tic + tic_length - OFFSET.y = font_size * 2 #TODO: Change when get_string_size.y is correctly understood + OFFSET.x = longest_y_tic + tic_length + 2 * label_displacement + OFFSET.y = font.get_height() + tic_length + label_displacement SIZE = get_size() - Vector2(OFFSET.x, 0) origin = Vector2(OFFSET.x, SIZE.y - OFFSET.y) @@ -554,30 +563,23 @@ func draw_grid(): var point : Vector2 = origin + Vector2(p * x_pass, 0) var size_text : Vector2 = font.get_string_size(x_chors[p]) # v grid - draw_line(point, point - Vector2(0, SIZE.y - OFFSET.y), v_lines_color, 0.2, true) + draw_line(point, point - Vector2(0, SIZE.y - OFFSET.y), v_lines_color, grid_lines_width, true) # ascisse - draw_line(point + Vector2(0, tic_length), point, v_lines_color, 1, true) + draw_line(point + Vector2(0, tic_length), point, v_lines_color, grid_lines_width, true) draw_string(font, point + Vector2(-size_text.x / 2, size_text.y + tic_length), x_chors[p], font_color) # ordinate for p in y_chors.size(): var point : Vector2 = origin - Vector2(0, p * y_pass) - var size_text : Vector2 = font.get_string_size(y_chors[p]) #TODO: Investigate into size_text.y being the same for all chars - # Apparently numbers are drawn on the upper side of the space, but the size - # return all ascent + descent, meaning that it doesn't get correctly centered - # vertically. Is this behaviour common to all fonts (i think it can't be - # asumed)? Can be taken into account from godot? - - #TEMPORARY FIX: Substract the descent that is not used to represent numbers (at least in the default font) - size_text.y -= font.get_descent() + var size_text := Vector2(font.get_string_size(y_chors[p]).x, font.get_ascent()) #The y should be ascent instead full height to get correctly centered # h grid - draw_line(point, point + Vector2(SIZE.x - OFFSET.x, 0), h_lines_color, 0.2, true) + draw_line(point, point + Vector2(SIZE.x - OFFSET.x, 0), h_lines_color, grid_lines_width, true) # ordinate - draw_line(point, point + Vector2(-tic_length, 0), h_lines_color, 1, true) - draw_string(font, point + Vector2(-size_text.x - tic_length, size_text.y / 2), - y_chors[p], font_color) + draw_line(point, point + Vector2(-tic_length, 0), h_lines_color, grid_lines_width, true) + draw_string(font, point + Vector2(-size_text.x - tic_length - label_displacement, + size_text.y / 2), y_chors[p], font_color) func draw_chart_outlines(): @@ -588,10 +590,6 @@ func draw_chart_outlines(): func draw_points(): - var defined_colors : bool = false - if function_colors.size(): - defined_colors = true - for function in point_values.size(): var PointContainer : Control = Control.new() Points.add_child(PointContainer)