Feature/hatched pattern background

charts_common/lib/src/chart/bar/bar_renderer.dart

@@ -137,6 +137,7 @@ class BarRenderer<D>
       ImmutableAxis<num> measureAxis,
       double measureAxisPosition,
       Color fillColor,
+      Color fillBackgroundColorPattern,
       FillPatternType fillPattern,
       double strokeWidthPx,
       int barGroupIndex,
@@ -160,6 +161,7 @@ class BarRenderer<D>
           measureAxis: measureAxis,
           fillColor: fillColor,
           fillPattern: fillPattern,
+          fillBackgroundColorPattern: fillBackgroundColorPattern,
           strokeWidthPx: strokeWidthPx,
           barGroupIndex: barGroupIndex,
           previousBarGroupWeight: previousBarGroupWeight,
@@ -185,6 +187,7 @@ class BarRenderer<D>
       double measureAxisPosition,
       Color fillColor,
       FillPatternType fillPattern,
+      Color fillBackgroundColorPattern,
       double strokeWidthPx,
       int barGroupIndex,
       double previousBarGroupWeight,
@@ -197,6 +200,7 @@ class BarRenderer<D>
       ..dashPattern = dashPattern
       ..fillColor = fillColor
       ..fillPattern = fillPattern
+      ..fillBackgroundColorPattern = fillBackgroundColorPattern
       ..measureAxisPosition = measureAxisPosition
       ..roundPx = details.roundPx
       ..strokeWidthPx = strokeWidthPx
@@ -261,6 +265,7 @@ class BarRenderer<D>
       bars.add(CanvasRect(bounds,
           dashPattern: bar.dashPattern,
           fill: bar.fillColor,
+          fillBackgroundColorPattern: bar.fillBackgroundColorPattern,
           pattern: bar.fillPattern,
           stroke: bar.color,
           strokeWidthPx: bar.strokeWidthPx));

charts_common/lib/src/chart/bar/bar_target_line_renderer.dart

@@ -67,6 +67,7 @@ class BarTargetLineRenderer<D> extends BaseBarRenderer<D,
     seriesList.forEach((MutableSeries<D> series) {
       series.colorFn ??= (_) => _color;
       series.fillColorFn ??= (_) => _color;
+      series.fillBackgroundColorPatternFn ??= (_) => Color.white;
 
       // Fill in missing seriesColor values with the color of the first datum in
       // the series. Note that [Series.colorFn] should always return a color.
@@ -143,6 +144,7 @@ class BarTargetLineRenderer<D> extends BaseBarRenderer<D,
       ImmutableAxis<num> measureAxis,
       double measureAxisPosition,
       Color fillColor,
+      Color fillBackgroundColorPattern,
       FillPatternType fillPattern,
       int barGroupIndex,
       double previousBarGroupWeight,
@@ -166,6 +168,7 @@ class BarTargetLineRenderer<D> extends BaseBarRenderer<D,
           measureAxis: measureAxis,
           fillColor: fillColor,
           fillPattern: fillPattern,
+          fillBackgroundColorPattern: fillBackgroundColorPattern,
           strokeWidthPx: strokeWidthPx,
           barGroupIndex: barGroupIndex,
           previousBarGroupWeight: previousBarGroupWeight,
@@ -190,6 +193,7 @@ class BarTargetLineRenderer<D> extends BaseBarRenderer<D,
       ImmutableAxis<num> measureAxis,
       double measureAxisPosition,
       Color fillColor,
+      Color fillBackgroundColorPattern,
       FillPatternType fillPattern,
       double strokeWidthPx,
       int barGroupIndex,
@@ -203,6 +207,7 @@ class BarTargetLineRenderer<D> extends BaseBarRenderer<D,
       ..dashPattern = dashPattern
       ..fillColor = fillColor
       ..fillPattern = fillPattern
+      ..fillBackgroundColorPattern = fillBackgroundColorPattern
       ..measureAxisPosition = measureAxisPosition
       ..roundEndCaps = details.roundEndCaps
       ..strokeWidthPx = strokeWidthPx

charts_common/lib/src/chart/bar/base_bar_renderer.dart

@@ -347,6 +347,7 @@ abstract class BaseBarRenderer<D, R extends BaseBarRendererElement,
       final colorFn = series.colorFn;
       final dashPatternFn = series.dashPatternFn;
       final fillColorFn = series.fillColorFn;
+      final fillBackgroundPatternColorFn = series.fillBackgroundColorPatternFn;
       final seriesStackKey = series.getAttr(stackKeyKey);
       final barGroupCount = series.getAttr(barGroupCountKey);
       final barGroupIndex = series.getAttr(barGroupIndexKey);
@@ -411,6 +412,7 @@ abstract class BaseBarRenderer<D, R extends BaseBarRendererElement,
                 domainAxis: domainAxis,
                 domainWidth: domainAxis.rangeBand.round(),
                 fillColor: fillColorFn(barIndex),
+                fillBackgroundColorPattern: fillBackgroundPatternColorFn(barIndex),
                 fillPattern: details.fillPattern,
                 measureValue: 0.0,
                 measureOffsetValue: 0.0,
@@ -456,6 +458,7 @@ abstract class BaseBarRenderer<D, R extends BaseBarRendererElement,
             domainAxis: domainAxis,
             domainWidth: domainAxis.rangeBand.round(),
             fillColor: fillColorFn(barIndex),
+            fillBackgroundColorPattern: fillBackgroundPatternColorFn(barIndex),
             fillPattern: details.fillPattern,
             measureValue: measureValue,
             measureOffsetValue: details.measureOffset,
@@ -502,6 +505,7 @@ abstract class BaseBarRenderer<D, R extends BaseBarRendererElement,
       double measureAxisPosition,
       int numBarGroups,
       Color fillColor,
+      Color fillBackgroundColorPattern,
       FillPatternType fillPattern,
       double strokeWidthPx,
       bool measureIsNull,
@@ -525,6 +529,7 @@ abstract class BaseBarRenderer<D, R extends BaseBarRendererElement,
       double measureAxisPosition,
       int numBarGroups,
       Color fillColor,
+      Color fillBackgroundColorPattern,
       FillPatternType fillPattern,
       double strokeWidthPx,
       bool measureIsNull,

charts_common/lib/src/chart/bar/base_bar_renderer_element.dart

@@ -23,6 +23,7 @@ abstract class BaseBarRendererElement {
   num cumulativeTotal;
   List<int> dashPattern;
   Color fillColor;
+  Color fillBackgroundColorPattern;
   FillPatternType fillPattern;
   double measureAxisPosition;
   num measureOffset;
@@ -41,6 +42,9 @@ abstract class BaseBarRendererElement {
     fillColor = other.fillColor != null
         ? Color.fromOther(color: other.fillColor)
         : null;
+    fillBackgroundColorPattern = other.fillBackgroundColorPattern != null
+        ? Color.fromOther(color: other.fillBackgroundColorPattern)
+        : null;
     fillPattern = other.fillPattern;
     measureAxisPosition = other.measureAxisPosition;
     measureOffset = other.measureOffset;
@@ -55,6 +59,8 @@ abstract class BaseBarRendererElement {
     color = getAnimatedColor(previous.color, target.color, animationPercent);
     fillColor = getAnimatedColor(
         previous.fillColor, target.fillColor, animationPercent);
+    fillBackgroundColorPattern = getAnimatedColor(
+        previous.fillBackgroundColorPattern, target.fillBackgroundColorPattern, animationPercent);
     measureIsNull = target.measureIsNull;
     measureIsNegative = target.measureIsNegative;
   }

charts_common/lib/src/chart/common/canvas_shapes.dart

@@ -23,13 +23,15 @@ class CanvasRect {
   final Rectangle<int> bounds;
   final List<int> dashPattern;
   final Color fill;
+  final Color fillBackgroundColorPattern;
   final FillPatternType pattern;
   final Color stroke;
   final double strokeWidthPx;
 
   CanvasRect(this.bounds,
       {this.dashPattern,
       this.fill,
+      this.fillBackgroundColorPattern,
       this.pattern,
       this.stroke,
       this.strokeWidthPx});

charts_common/lib/src/chart/common/processed_series.dart

@@ -53,6 +53,7 @@ class MutableSeries<D> extends ImmutableSeries<D> {
   AccessorFn<Color> colorFn;
   AccessorFn<List<int>> dashPatternFn;
   AccessorFn<Color> fillColorFn;
+  AccessorFn<Color> fillBackgroundColorPatternFn;
   AccessorFn<FillPatternType> fillPatternFn;
   AccessorFn<Color> patternColorFn;
   AccessorFn<num> radiusPxFn;
@@ -104,6 +105,7 @@ class MutableSeries<D> extends ImmutableSeries<D> {
     colorFn = series.colorFn;
     dashPatternFn = series.dashPatternFn;
     fillColorFn = series.fillColorFn;
+    fillBackgroundColorPatternFn = series.fillBackgroundColorPatternFn;
     fillPatternFn = series.fillPatternFn;
     patternColorFn = series.patternColorFn;
     labelAccessorFn = series.labelAccessorFn ?? (i) => domainFn(i).toString();
@@ -147,6 +149,7 @@ class MutableSeries<D> extends ImmutableSeries<D> {
     colorFn = other.colorFn;
     dashPatternFn = other.dashPatternFn;
     fillColorFn = other.fillColorFn;
+    fillBackgroundColorPatternFn = other.fillBackgroundColorPatternFn;
     fillPatternFn = other.fillPatternFn;
     patternColorFn = other.patternColorFn;
     labelAccessorFn = other.labelAccessorFn;
@@ -247,6 +250,8 @@ abstract class ImmutableSeries<D> {
 
   AccessorFn<Color> get fillColorFn;
 
+  AccessorFn<Color> get fillBackgroundColorPatternFn;
+
   AccessorFn<Color> get patternColorFn;
 
   AccessorFn<FillPatternType> get fillPatternFn;

charts_common/lib/src/chart/common/series_renderer.dart

@@ -270,11 +270,13 @@ abstract class BaseSeriesRenderer<D> implements SeriesRenderer<D> {
 
         // Fill color defaults to the series color if no accessor is provided.
         series.fillColorFn ??= (int index) => series.colorFn(index);
+        series.fillBackgroundColorPatternFn ??= (int index) => Color.white;
       });
     } else {
       seriesList.forEach((MutableSeries series) {
         // Fill color defaults to the series color if no accessor is provided.
         series.fillColorFn ??= (int index) => series.colorFn(index);
+        series.fillBackgroundColorPatternFn ??= (int index) => Color.white;
       });
     }
 

charts_common/lib/src/data/series.dart

@@ -93,6 +93,7 @@ class Series<T, D> {
   /// [FillPatternType] beside `solid` is used. If not provided, then
   /// background color is used.
   final AccessorFn<Color> patternColorFn;
+  final AccessorFn<Color> fillBackgroundColorPatternFn;
 
   final AccessorFn<FillPatternType> fillPatternFn;
   final AccessorFn<num> radiusPxFn;
@@ -120,6 +121,7 @@ class Series<T, D> {
       TypedAccessorFn<T, D> domainUpperBoundFn,
       TypedAccessorFn<T, Color> fillColorFn,
       TypedAccessorFn<T, Color> patternColorFn,
+      TypedAccessorFn<T, Color> fillBackgroundColorPatternFn,
       TypedAccessorFn<T, FillPatternType> fillPatternFn,
       TypedAccessorFn<T, String> keyFn,
       TypedAccessorFn<T, String> labelAccessorFn,
@@ -159,6 +161,9 @@ class Series<T, D> {
     final _patternColorFn = patternColorFn == null
         ? null
         : (int index) => patternColorFn(data[index], index);
+    final _fillBackgroundColorPatternFn = fillBackgroundColorPatternFn == null
+        ? null
+        : (int index) => fillBackgroundColorPatternFn(data[index], index);
     final _fillPatternFn = fillPatternFn == null
         ? null
         : (int index) => fillPatternFn(data[index], index);
@@ -208,6 +213,7 @@ class Series<T, D> {
       fillPatternFn: _fillPatternFn,
       keyFn: _keyFn,
       patternColorFn: _patternColorFn,
+      fillBackgroundColorPatternFn: _fillBackgroundColorPatternFn,
       labelAccessorFn: _labelAccessorFn,
       insideLabelStyleAccessorFn: _insideLabelStyleAccessorFn,
       outsideLabelStyleAccessorFn: _outsideLabelStyleAccessorFn,
@@ -238,6 +244,7 @@ class Series<T, D> {
     this.fillColorFn,
     this.fillPatternFn,
     this.patternColorFn,
+    this.fillBackgroundColorPatternFn,
     this.keyFn,
     this.labelAccessorFn,
     this.insideLabelStyleAccessorFn,

charts_flutter/example/lib/bar_chart/pattern_forward_hatch.dart

@@ -76,12 +76,15 @@ class PatternForwardHatchBarChart extends StatelessWidget {
         domainFn: (OrdinalSales sales, _) => sales.year,
         measureFn: (OrdinalSales sales, _) => sales.sales,
         data: desktopSalesData,
+        fillPatternFn: (OrdinalSales sales, _) =>
+        charts.FillPatternType.forwardHatch
       ),
       new charts.Series<OrdinalSales, String>(
         id: 'Tablet',
         domainFn: (OrdinalSales sales, _) => sales.year,
         measureFn: (OrdinalSales sales, _) => sales.sales,
         data: tableSalesData,
+        fillBackgroundColorPatternFn: (OrdinalSales sales, _) => charts.Color.transparent,
         fillPatternFn: (OrdinalSales sales, _) =>
             charts.FillPatternType.forwardHatch,
       ),
@@ -90,6 +93,9 @@ class PatternForwardHatchBarChart extends StatelessWidget {
         domainFn: (OrdinalSales sales, _) => sales.year,
         measureFn: (OrdinalSales sales, _) => sales.sales,
         data: mobileSalesData,
+        fillBackgroundColorPatternFn: (OrdinalSales sales, _) => charts.Color.black,
+        fillPatternFn: (OrdinalSales sales, _) =>
+        charts.FillPatternType.forwardHatch
       ),
     ];
   }
@@ -139,6 +145,7 @@ class PatternForwardHatchBarChart extends StatelessWidget {
         domainFn: (OrdinalSales sales, _) => sales.year,
         measureFn: (OrdinalSales sales, _) => sales.sales,
         data: tableSalesData,
+        fillBackgroundColorPatternFn: (OrdinalSales sales, _) => charts.Color.black,
         fillPatternFn: (OrdinalSales sales, _) =>
             charts.FillPatternType.forwardHatch,
       ),

charts_flutter/example/pubspec.yaml

@@ -12,3 +12,7 @@ dependencies:
   intl: ^0.15.2
 flutter:
   uses-material-design: true
+
+dependency_overrides:
+  charts_common:
+    path: ../../charts_common

charts_flutter/lib/src/chart_canvas.dart

@@ -33,6 +33,7 @@ import 'canvas/line_painter.dart' show LinePainter;
 import 'canvas/pie_painter.dart' show PiePainter;
 import 'canvas/point_painter.dart' show PointPainter;
 import 'canvas/polygon_painter.dart' show PolygonPainter;
+import 'dart:math' as math;
 
 class ChartCanvas implements common.ChartCanvas {
   /// Pixels to allow to overdraw above the draw area that fades to transparent.
@@ -148,6 +149,7 @@ class ChartCanvas implements common.ChartCanvas {
   void drawRect(Rectangle<num> bounds,
       {common.Color fill,
       common.FillPatternType pattern,
+      common.Color fillPatternBackground,
       common.Color stroke,
       double strokeWidthPx,
       Rectangle<num> drawAreaBounds}) {
@@ -166,7 +168,7 @@ class ChartCanvas implements common.ChartCanvas {
     switch (pattern) {
       case common.FillPatternType.forwardHatch:
         _drawForwardHatchPattern(fillRectBounds, canvas,
-            fill: fill, drawAreaBounds: drawAreaBounds);
+            fill: fill, drawAreaBounds: drawAreaBounds, background: fillPatternBackground);
         break;
 
       case common.FillPatternType.solid:
@@ -262,6 +264,7 @@ class ChartCanvas implements common.ChartCanvas {
       final segment = barStack.segments[barIndex];
       drawRect(segment.bounds,
           fill: segment.fill,
+          fillPatternBackground: segment.fillBackgroundColorPattern,
           pattern: segment.pattern,
           stroke: segment.stroke,
           strokeWidthPx: segment.strokeWidthPx,
@@ -386,20 +389,22 @@ class ChartCanvas implements common.ChartCanvas {
           drawAreaBounds.top.toDouble(), background);
     }
 
+    canvas.clipRect(_getRect(bounds), doAntiAlias: true);
     canvas.drawRect(_getRect(bounds), _paint);
 
     // As a simplification, we will treat the bounds as a large square and fill
     // it up with lines from the bottom-left corner to the top-right corner.
     // Get the longer side of the bounds here for the size of this square.
     final size = max(bounds.width, bounds.height);
 
+    final isVertical = bounds.height >= bounds.width;
+
     final x0 = bounds.left + size + fillWidthPx;
     final x1 = bounds.left - fillWidthPx;
-    final y0 = bounds.bottom - size - fillWidthPx;
-    final y1 = bounds.bottom + fillWidthPx;
-    final offset = 8;
+    final y0 = bounds.top + size + fillWidthPx;
+    final y1 = bounds.top - fillWidthPx;
 
-    final isVertical = bounds.height >= bounds.width;
+    final offset = 8;
 
     _linePainter ??= new LinePainter();
 

charts_flutter/pubspec.yaml

@@ -14,18 +14,16 @@ dependencies:
   # The pub version of charts_flutter will point to the pub version of charts_common.
   # The latest pub version is commented out and shown below as an example.
   # charts_common: 0.9.0
-  charts_common:
-    path: ../charts_common/
+  charts_common: ^0.9.0
   collection: ^1.14.5
   flutter:
     sdk: flutter
   intl: '>=0.15.2 < 0.17.0'
   logging: any
   meta: ^1.1.1
 
-
 dev_dependencies:
   mockito:
   flutter_test:
     sdk: flutter
-  test: ^1.3.0
+  test: ^1.3.0