Introduce area series

ryonakano · Mar 22, 2020 · 5afddb9 · 5afddb9
1 parent 83a7bf0
commit 5afddb9
Show file tree

Hide file tree

Showing 20 changed files with 265 additions and 28 deletions.
diff --git a/Makefile b/Makefile
@@ -4,21 +4,21 @@ run:
 	valac --pkg gtk+-3.0 --pkg gee-0.8 -X -lm \
 	examples/live-chart.vala src/drawable.vala src/chart.vala src/grid.vala src/points.vala src/background.vala src/config.vala src/point.vala \
 	src/bar.vala src/line.vala src/values.vala src/value.vala src/smooth_line.vala \
-	src/bounds.vala src/serie.vala src/drawable_serie.vala src/legend.vala src/axis.vala \
+	src/bounds.vala src/serie.vala src/drawable_serie.vala src/legend.vala src/axis.vala src/line_area.vala src/smooth_line_area.vala src/area.vala \
 	-o example
 	./example
 
 compile: 
 	valac --pkg gtk+-3.0 --pkg gee-0.8 -X -lm \
 	examples/live-chart.vala src/drawable.vala src/chart.vala src/grid.vala src/points.vala src/background.vala src/config.vala src/point.vala \
-	src/bar.vala src/line.vala src/values.vala src/value.vala src/smooth_line.vala src/axis.vala \
+	src/bar.vala src/line.vala src/values.vala src/value.vala src/smooth_line.vala src/axis.vala src/line_area.vala src/smooth_line_area.vala src/area.vala \
 	src/bounds.vala src/serie.vala src/drawable_serie.vala src/legend.vala
 
 test:
 	valac --pkg gtk+-3.0 --pkg gee-0.8 -X -lm \
 	src/config.vala src/bounds.vala src/drawable.vala src/serie.vala src/drawable_serie.vala src/chart.vala src/background.vala \
-	src/line.vala src/legend.vala src/grid.vala src/values.vala src/value.vala src/point.vala src/points.vala src/axis.vala \
-	tests/runner.vala tests/config.vala tests/bounds.vala tests/values.vala tests/chart.vala tests/points.vala tests/axis.vala \
+	src/line.vala src/legend.vala src/grid.vala src/values.vala src/value.vala src/point.vala src/points.vala src/axis.vala src/area.vala src/line_area.vala \
+	tests/runner.vala tests/config.vala tests/bounds.vala tests/values.vala tests/chart.vala tests/points.vala tests/axis.vala tests/area.vala \
 	-o test
 	./test
 
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 # Live Chart
 
-## 1.0.0-beta1 (API freezed)
+## 1.0.0-beta2 (API freezed)
 
 **Live Chart** is a real-time charting library for GTK3 and Vala, based on [Cairo](https://cairographics.org/).
 
@@ -15,7 +15,7 @@
 
 ## Screenshots
 
-![](docs/chart1.gif)  ![chart_1](docs/chart2.gif)
+![](docs/chart1.gif)  ![](docs/chart2.gif)
 
 ## API
 
@@ -77,11 +77,45 @@ chart.add_value(paris_temperature, 19.5);
 
 ### Serie renderer
 
-There's currently 3 built-in series available:
+There's currently 5 built-in series available:
 
-* Line series: [`LiveChart.Line`](https://github.com/lcallarec/live-chart/blob/master/src/line.vala)
-* SmoothLine series: [`LiveChart.Curve`](https://github.com/lcallarec/live-chart/blob/master/src/smooth_line.vala)
-* Bar series: [`LiveChart.Bar`](https://github.com/lcallarec/live-chart/blob/master/src/line.vala)
+#### Line serie: [`LiveChart.Line`](https://github.com/lcallarec/live-chart/blob/master/src/line.vala)
+![](docs/serie_line.png)
+
+Line serie connect each data point with a straight segment.
+
+#### SmoothLine serie: [`LiveChart.SmoothLine`](https://github.com/lcallarec/live-chart/blob/master/src/smooth_line.vala)
+![](docs/serie_smooth_line.png)
+
+Smooth line serie connect each data point with a bezier spline for a smoother rendering.
+
+#### Bar serie: [`LiveChart.Bar`](https://github.com/lcallarec/live-chart/blob/master/src/line.vala)
+![](docs/serie_bar.png)
+
+#### LineArea seris: [`LiveChart.LineArea`](https://github.com/lcallarec/live-chart/blob/master/src/line_area.vala)
+![](docs/serie_line_area.png)
+
+#### SmoothLineArea serie: [`LiveChart.LineArea`](https://github.com/lcallarec/live-chart/blob/master/src/smooth_line_area.vala)
+![](docs/serie_smooth_line_area.png)
+
+#### Serie renderer API
+
+For all series, you can control the line or the bar color via the `main_color: Gdk.RGBA` property:
+
+```vala
+var smooth_line = LiveChart.SmoothLine();
+smooth_line.main_color = Gdk.RGBA() {red: 0, green: 0, blue: 1, alpha: 1}; // Pure blue
+```
+
+For area series, you can control the area color via the `area_alpha: double` property (default : 0.1):
+
+```vala
+var smooth_line = LiveChart.SmoothLineArea();
+smooth_line.main_color = Gdk.RGBA() {red: 0, green: 0, blue: 1, alpha: 1};
+smooth_line.area_alpha = 0.5;
+```
+
+The area color is always the same as `main_color` value.
 
 #### Configure a renderer
 

diff --git a/docs/serie_bar.png b/docs/serie_bar.png
diff --git a/docs/serie_line.png b/docs/serie_line.png
diff --git a/docs/serie_line_area.png b/docs/serie_line_area.png
diff --git a/docs/serie_smooth_line.png b/docs/serie_smooth_line.png
diff --git a/docs/serie_smooth_line_area.png b/docs/serie_smooth_line_area.png
diff --git a/examples/live-chart.vala b/examples/live-chart.vala
@@ -6,10 +6,10 @@ public class Example : Gtk.Window {
         this.set_default_size(800, 350);
 
 
-        var heat = new LiveChart.Serie("HEAT", new LiveChart.SmoothLine());
+        var heat = new LiveChart.Serie("HEAT", new LiveChart.SmoothLineArea());
         heat.set_main_color({ 0.3, 0.8, 0.1, 1.0});
 
-        var rss = new LiveChart.Serie("RSS");
+        var rss = new LiveChart.Serie("RSS",  new LiveChart.Line());
         rss.set_main_color({ 0.8, 0.1, 0.1, 1.0});
 
         var heap = new LiveChart.Serie("HEAP", new LiveChart.Bar());
@@ -29,7 +29,7 @@ public class Example : Gtk.Window {
         chart.add_value(rss, rss_value);
         Timeout.add(1000, () => {
             if (Random.double_range(0.0, 1.0) > 0.3) {
-                var new_value = Random.double_range(-10, 10.0);
+                var new_value = Random.double_range(-50, 50.0);
                 if (rss_value + new_value > 0) rss_value += new_value;
             }
             chart.add_value(rss, rss_value);

diff --git a/src/area.vala b/src/area.vala
@@ -0,0 +1,46 @@
+   using Cairo;
+
+   namespace LiveChart {
+     public class Area : Drawable, Object {
+        private Points points;
+        private BoundingBox bounding_box = BoundingBox() {
+            x=0, 
+            y=0, 
+            width=0,
+            height=0
+        };
+        private double alpha = 0.3;
+        public Gdk.RGBA main_color { 
+            get; set; default = Gdk.RGBA() {
+                red = 1.0,
+                green = 1.0,
+                blue = 1.0,
+                alpha = 0.5
+            };
+        }
+
+        public Area(Points points, Gdk.RGBA main_color, double alpha) {
+            this.points = points;
+            this.main_color = main_color;
+            this.alpha = alpha;
+        }
+
+        public void draw(Context ctx, Config config) {
+            var boundaries = config.boundaries();
+            var first_point = points.first();
+            var last_point = points.last();
+
+            ctx.set_source_rgba(this.main_color.red, this.main_color.green, this.main_color.blue, alpha);
+            ctx.line_to(last_point.x, last_point.y);
+            ctx.line_to(last_point.x, boundaries.y.max);
+            ctx.line_to(first_point.x, boundaries.y.max);
+            ctx.line_to(first_point.x, first_point.y);
+            ctx.close_path();
+            ctx.fill_preserve();
+        }
+        public BoundingBox get_bounding_box() {
+            return bounding_box;
+        }
+    }
+}
+
diff --git a/src/background.vala b/src/background.vala
@@ -8,7 +8,7 @@ namespace LiveChart {
             width=0,
             height=0
         };
-        public Gdk.RGBA color { 
+        public Gdk.RGBA main_color { 
             get; set; default= Gdk.RGBA() {
                 red = 0.1,
                 green = 0.1,
@@ -20,7 +20,7 @@ namespace LiveChart {
         public void draw(Context ctx, Config config) {
             this.update_bounding_box(config);
             ctx.rectangle(0, 0, config.width, config.height);
-            ctx.set_source_rgba(color.red, color.green, color.blue, color.alpha);
+            ctx.set_source_rgba(main_color.red, main_color.green, main_color.blue, main_color.alpha);
             ctx.fill();
         }
 

diff --git a/src/drawable.vala b/src/drawable.vala
@@ -8,6 +8,7 @@ namespace LiveChart {
         double height;
     }
     public interface Drawable : Object {
+        public abstract Gdk.RGBA main_color { get; set; }
         public abstract void draw(Context ctx, Config config);
         public abstract BoundingBox get_bounding_box();
     }

diff --git a/src/grid.vala b/src/grid.vala
@@ -4,15 +4,25 @@ namespace LiveChart {
 
     public abstract class Grid : Drawable, Object {
         private const int ABSCISSA_TIME_PADDING = 14;
-        public string unit {
-            get; set construct;
-        }
         protected BoundingBox bounding_box = BoundingBox() {
             x=0, 
             y=0, 
             width=0,
             height=0
         };
+
+        public Gdk.RGBA main_color { 
+            get; set; default= Gdk.RGBA() {
+                red = 0.5,
+                green = 0.5,
+                blue = 0.5,
+                alpha = 1.0
+            };
+        }
+
+        public string unit {
+            get; set construct;
+        }
 
         public void draw(Context ctx, Config config) {
             this.render_abscissa(ctx, config);
@@ -27,7 +37,7 @@ namespace LiveChart {
         }
 
         protected virtual void render_abscissa(Context ctx, Config config) {
-            ctx.set_source_rgba(0.5, 0.5, 0.5, 1.0);
+            ctx.set_source_rgba(this.main_color.red, this.main_color.green, this.main_color.blue, this.main_color.alpha);
             ctx.set_line_width(0.5);
 
             ctx.move_to(config.padding.left + 0.5, config.height - config.padding.bottom + 0.5);

diff --git a/src/legend.vala b/src/legend.vala
@@ -15,6 +15,14 @@ namespace LiveChart {
             width=0,
             height=0
         };
+        public Gdk.RGBA main_color { 
+            get; set; default= Gdk.RGBA() {
+                red = 1.0,
+                green = 1.0,
+                blue = 1.0,
+                alpha = 1.0
+            };
+        }
         public void add_legend(Serie serie) {
             series.add(serie);
         }

diff --git a/src/line.vala b/src/line.vala
@@ -8,11 +8,15 @@ namespace LiveChart {
         }
 
         public override void draw(Context ctx, Config config) {
-
+            var points = Points.create(values, config);
+            this.draw_line(points, ctx, config);
+            ctx.stroke();
+        }
+
+        protected Points draw_line(Points points, Context ctx, Config config) {
             ctx.set_source_rgba(this.main_color.red, this.main_color.green, this.main_color.blue, this.main_color.alpha);
             ctx.set_line_width(this.outline_width);
 
-            var points = Points.create(values, config);
             var first_point = points.first();
 
             this.update_bounding_box(points, config);
@@ -26,12 +30,12 @@ namespace LiveChart {
                     ctx.move_to(current_point.x, current_point.y);
                     continue;
                 }
+
                 ctx.line_to(next_point.x, next_point.y);
             }
-
-            ctx.stroke();
-        }
 
+            return points;
+        }
 
         private void update_bounding_box(Points points, Config config) {
             this.bounding_box = BoundingBox() {

diff --git a/src/line_area.vala b/src/line_area.vala
@@ -0,0 +1,22 @@
+using Cairo;
+
+namespace LiveChart { 
+    public class LineArea : Line {
+
+        public double area_alpha {get; set; default = 0.1;}
+
+        public LineArea(Values values = new Values()) {
+            base(values);
+        }
+
+        public override void draw(Context ctx, Config config) {
+            var points = Points.create(values, config);
+
+            this.draw_line(points, ctx, config);
+            ctx.stroke_preserve();   
+
+            var area = new Area(points, this.main_color, this.area_alpha);
+            area.draw(ctx, config);
+        }
+    }
+}
diff --git a/src/smooth_line.vala b/src/smooth_line.vala
@@ -8,10 +8,15 @@ namespace LiveChart {
         }
 
         public override void draw(Context ctx, Config config) {
+            var points = Points.create(values, config);
+            this.draw_smooth_line(points, ctx, config);
+            ctx.stroke();
+        }
+
+        public void draw_smooth_line(Points points, Context ctx, Config config) {
             ctx.set_source_rgba(this.main_color.red, this.main_color.green, this.main_color.blue, this.main_color.alpha);
             ctx.set_line_width(this.outline_width);
 
-            var points = Points.create(values, config);
             var first_point = points.first();
 
             this.update_bounding_box(points, config);
@@ -33,8 +38,6 @@ namespace LiveChart {
                     target_point.x, target_point.y
                 );
             }
-
-            ctx.stroke();
         }
 
         private void update_bounding_box(Points points, Config config) {

diff --git a/src/smooth_line_area.vala b/src/smooth_line_area.vala
@@ -0,0 +1,18 @@
+using Cairo;
+
+namespace LiveChart {
+     public class SmoothLineArea : SmoothLine {
+
+        public double area_alpha {get; set; default = 0.1;}
+
+        public override void draw(Context ctx, Config config) {
+            var points = Points.create(values, config);
+
+            this.draw_smooth_line(points, ctx, config);
+            ctx.stroke_preserve();
+
+            var area = new Area(points, this.main_color, this.area_alpha);
+            area.draw(ctx, config);
+        }
+    }
+}