Add functions to draw horizontal or vertical links onto the dart charts web canvas.

PiperOrigin-RevId: 393802496

Author: Googler

charts_common/lib/common.dart

@@ -198,7 +198,7 @@ export 'src/chart/common/behavior/zoom/panning_tick_provider.dart'
 export 'src/chart/common/canvas_shapes.dart'
     show CanvasBarStack, CanvasPie, CanvasPieSlice, CanvasRect;
 export 'src/chart/common/chart_canvas.dart'
-    show ChartCanvas, FillPatternType, BlendMode;
+    show ChartCanvas, FillPatternType, BlendMode, LinkOrientation, Link;
 export 'src/chart/common/chart_context.dart' show ChartContext;
 export 'src/chart/common/datum_details.dart'
     show DatumDetails, DomainFormatter, MeasureFormatter;
@@ -267,6 +267,8 @@ export 'src/chart/treemap/treemap_label_decorator.dart'
 export 'src/chart/treemap/treemap_renderer_config.dart'
     show TreeMapRendererConfig, TreeMapTileType;
 export 'src/common/color.dart' show Color;
+export 'src/chart/link/link_chart.dart' show LinkChart;
+export 'src/chart/link/link_renderer_config.dart' show LinkRendererConfig;
 export 'src/common/date_time_factory.dart'
     show DateTimeFactory, LocalDateTimeFactory, UTCDateTimeFactory;
 export 'src/common/gesture_listener.dart' show GestureListener;

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

@@ -45,6 +45,16 @@ abstract class ChartCanvas {
       double startAngle, double endAngle,
       {Color? fill, Color? stroke, double? strokeWidthPx});
 
+  /// Draws a smooth link from source to target.
+  ///
+  /// [sourceUpper] The location of the upper link at the source node.
+  /// [sourceLower] The location of the lower link at the source node.
+  /// [targetUpper] The location of the upper link at the target node.
+  /// [targetLower] The location of the lower link at the target node.
+  /// [fill] The fill color for the link.
+  /// [orientation] Orientation enum of the link, vertical or horizontal.
+  void drawLink(Link link, LinkOrientation orientation, Color fill);
+
   /// Renders a simple line.
   ///
   /// [dashPattern] controls the pattern of dashes and gaps in a line. It is a
@@ -199,3 +209,25 @@ enum BlendMode {
   sourceOver,
   xor
 }
+
+/// Determines the orientation of a drawn link.
+///
+/// * [horizontal] Link control points are averaged across the x-axis.
+/// * [vertical] Link control points are averaged across the y-axis.
+enum LinkOrientation { horizontal, vertical }
+
+/// A link as defined by the two sets of points that determine the bezier
+/// curves of the link.
+///
+/// [sourceUpper] The location of the upper link at the source node.
+/// [sourceLower] The location of the lower link at the source node.
+/// [targetUpper] The location of the upper link at the target node.
+/// [targetLower] The location of the lower link at the target node.
+class Link {
+  final Point sourceUpper;
+  final Point sourceLower;
+  final Point targetUpper;
+  final Point targetLower;
+
+  Link(this.sourceUpper, this.sourceLower, this.targetUpper, this.targetLower);
+}

charts_common/lib/src/chart/link/link_chart.dart

@@ -0,0 +1,39 @@
+// Copyright 2021 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'package:charts_common/src/chart/common/base_chart.dart';
+import 'package:charts_common/src/chart/common/datum_details.dart';
+import 'package:charts_common/src/chart/common/selection_model/selection_model.dart';
+import 'package:charts_common/src/chart/common/series_renderer.dart';
+import 'package:charts_common/src/chart/layout/layout_config.dart';
+
+import 'package:charts_common/src/chart/link/link_renderer.dart';
+
+class LinkChart<D> extends BaseChart<D> {
+  LinkChart({LayoutConfig? layoutConfig})
+      : super(layoutConfig: layoutConfig ?? LayoutConfig());
+
+  /// Uses LinkRenderer as the default renderer.
+  @override
+  SeriesRenderer<D> makeDefaultRenderer() {
+    return LinkRenderer<D>()..rendererId = SeriesRenderer.defaultRendererId;
+  }
+
+  /// Returns a list of datum details from the selection model of [type].
+  @override
+  List<DatumDetails<D>> getDatumDetails(SelectionModelType type) {
+    return <DatumDetails<D>>[];
+  }
+}

charts_common/lib/src/chart/link/link_renderer.dart

@@ -0,0 +1,117 @@
+// Copyright 2021 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'dart:collection' show LinkedHashMap;
+import 'dart:math' show Point, Rectangle;
+
+import 'package:charts_common/src/chart/common/chart_canvas.dart';
+import 'package:charts_common/src/chart/common/datum_details.dart';
+import 'package:charts_common/src/chart/common/processed_series.dart';
+import 'package:charts_common/src/chart/common/series_datum.dart';
+import 'package:charts_common/src/chart/common/series_renderer.dart';
+import '../../data/series.dart' show AttributeKey;
+import 'package:charts_common/src/common/math.dart' show NullablePoint;
+import 'package:charts_common/common.dart' show Color, LinkOrientation, Link;
+
+import 'link_renderer_config.dart';
+
+const linkElementsKey =
+    AttributeKey<List<LinkRendererElement>>('LinkRenderer.elements');
+
+class LinkRenderer<D> extends BaseSeriesRenderer<D> {
+  /// Default renderer ID for the Sankey Chart
+  static const defaultRendererID = 'sankey';
+
+  // List of renderer elements to be drawn on the canvas
+  final _seriesLinkMap = LinkedHashMap<String, List<LinkRendererElement>>();
+
+  /// Link Renderer Config
+  final LinkRendererConfig<D> config;
+
+  factory LinkRenderer({String? rendererId, LinkRendererConfig<D>? config}) {
+    return LinkRenderer._internal(
+        rendererId: rendererId ?? defaultRendererID,
+        config: config ?? LinkRendererConfig());
+  }
+
+  LinkRenderer._internal({required String rendererId, required this.config})
+      : super(
+            rendererId: rendererId,
+            layoutPaintOrder: config.layoutPaintOrder,
+            symbolRenderer: config.symbolRenderer);
+
+  @override
+  void preprocessSeries(List<MutableSeries<D>> seriesList) {
+    seriesList.forEach((MutableSeries<D> series) {
+      var elements = <LinkRendererElement>[];
+      for (var linkIndex = 0; linkIndex < series.data.length; linkIndex++) {
+        var element = LinkRendererElement(
+            series.data[linkIndex].link,
+            series.data[linkIndex].orientation,
+            series.data[linkIndex].fillColor);
+        elements.add(element);
+      }
+      series.setAttr(linkElementsKey, elements);
+    });
+  }
+
+  @override
+  void update(List<ImmutableSeries<D>> seriesList, bool isAnimating) {
+    seriesList.forEach((ImmutableSeries<D> series) {
+      var elementsList =
+          series.getAttr(linkElementsKey) as List<LinkRendererElement>;
+      _seriesLinkMap.putIfAbsent(series.id, () => elementsList);
+    });
+  }
+
+  @override
+  void paint(ChartCanvas canvas, double animationPercent) {
+    /// Paint the renderer elements on the canvas using drawLink.
+    _seriesLinkMap.forEach((k, v) => _drawAllLinks(v, canvas));
+  }
+
+  void _drawAllLinks(List<LinkRendererElement> links, ChartCanvas canvas) {
+    links.forEach((element) =>
+        canvas.drawLink(element.link, element.orientation, element.fillColor));
+  }
+
+  @override
+  DatumDetails<D> addPositionToDetailsForSeriesDatum(
+      DatumDetails<D> details, SeriesDatum<D> seriesDatum) {
+    final chartPosition = Point<double>(0, 0);
+    return DatumDetails.from(details,
+        chartPosition: NullablePoint.from(chartPosition));
+  }
+
+  /// Datum details of nearest link.
+  @override
+  List<DatumDetails<D>> getNearestDatumDetailPerSeries(
+    Point<double> chartPoint,
+    bool byDomain,
+    Rectangle<int>? boundsOverride, {
+    bool selectOverlappingPoints = false,
+    bool selectExactEventLocation = false,
+  }) {
+    return <DatumDetails<D>>[];
+  }
+}
+
+class LinkRendererElement {
+  final Link link;
+  final LinkOrientation orientation;
+  final Color fillColor;
+
+  LinkRendererElement(this.link, this.orientation, this.fillColor);
+}

charts_common/lib/src/chart/link/link_renderer_config.dart

@@ -0,0 +1,47 @@
+// Copyright 2021 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'package:charts_common/src/chart/common/series_renderer_config.dart';
+import 'package:charts_common/src/chart/layout/layout_view.dart';
+import 'package:charts_common/src/common/symbol_renderer.dart';
+
+import 'link_renderer.dart';
+
+/// Configuration for a [SankeyRenderer].
+class LinkRendererConfig<D> extends LayoutViewConfig
+    implements SeriesRendererConfig<D> {
+  @override
+  final String? customRendererId;
+
+  @override
+  final SymbolRenderer symbolRenderer;
+
+  @override
+  final rendererAttributes = RendererAttributes();
+
+  /// The order to paint this renderer on the canvas.
+  final int layoutPaintOrder;
+
+  LinkRendererConfig(
+      {this.customRendererId,
+      this.layoutPaintOrder = LayoutViewPaintOrder.bar,
+      SymbolRenderer? symbolRenderer})
+      : symbolRenderer = symbolRenderer ?? RectSymbolRenderer();
+
+  @override
+  LinkRenderer<D> build() {
+    return LinkRenderer<D>(config: this, rendererId: customRendererId);
+  }
+}

charts_flutter/lib/src/chart_canvas.dart

@@ -24,6 +24,8 @@ import 'package:charts_common/common.dart' as common
         Color,
         FillPatternType,
         GraphicsFactory,
+        Link,
+        LinkOrientation,
         StyleFactory,
         TextElement,
         TextDirection;
@@ -61,6 +63,13 @@ class ChartCanvas implements common.ChartCanvas {
     );
   }
 
+  @override
+  void drawLink(
+      common.Link link, common.LinkOrientation orientation, common.Color fill) {
+    // TODO: Implement drawLink for flutter.
+    throw ("Flutter drawLink() has not been implemented.");
+  }
+
   @override
   void drawLine(
       {required List<Point> points,