Merge pull request #18 from RonnieRen/feature/line_label

add a PointLabelDecorator to render a label for a point

community_charts_common/lib/community_charts_common.dart

@@ -253,6 +253,7 @@ export 'src/chart/scatter_plot/point_renderer_config.dart'
  show PointRendererConfig;
 export 'src/chart/scatter_plot/point_renderer_decorator.dart'
  show PointRendererDecorator;
+export 'src/chart/scatter_plot/point_label_decorator.dart';
 export 'src/chart/scatter_plot/scatter_plot_chart.dart' show ScatterPlotChart;
 export 'src/chart/scatter_plot/symbol_annotation_renderer.dart'
  show SymbolAnnotationRenderer;

community_charts_common/lib/src/chart/line/line_renderer.dart

@@ -76,7 +76,7 @@ class LineRenderer<D> extends BaseCartesianRenderer<D> {
 
  LineRenderer._internal({required String rendererId, required this.config})
  : _pointRenderer = PointRenderer<D>(
- config: PointRendererConfig<D>(radiusPx: config.radiusPx)),
+ config: PointRendererConfig<D>(radiusPx: config.radiusPx, symbolRenderer: config.symbolRenderer, pointRendererDecorators: config.pointRendererDecorators,)),
  super(
  rendererId: rendererId,
  layoutPaintOrder: config.layoutPaintOrder,

community_charts_common/lib/src/chart/line/line_renderer_config.dart

@@ -17,6 +17,7 @@ import '../../common/symbol_renderer.dart';
 import '../common/series_renderer_config.dart'
  show RendererAttributes, SeriesRendererConfig;
 import '../layout/layout_view.dart' show LayoutViewConfig, LayoutViewPaintOrder;
+import '../scatter_plot/point_renderer_decorator.dart';
 import 'line_renderer.dart' show LineRenderer;
 
 /// Configuration for a line renderer.
@@ -73,6 +74,8 @@ class LineRendererConfig<D> extends LayoutViewConfig
  /// Whether lines should have round end caps, or square if false.
  final bool roundEndCaps;
 
+ final List<PointRendererDecorator<D>> pointRendererDecorators;
+
  LineRendererConfig(
  {this.customRendererId,
  this.radiusPx = 3.5,
@@ -85,6 +88,7 @@ class LineRendererConfig<D> extends LayoutViewConfig
  this.layoutPaintOrder = LayoutViewPaintOrder.line,
  this.areaOpacity = 0.1,
  this.roundEndCaps = false,
+ this.pointRendererDecorators = const [],
  SymbolRenderer? symbolRenderer})
  : symbolRenderer = symbolRenderer ?? LineSymbolRenderer();
 

community_charts_common/lib/src/chart/scatter_plot/point_label_decorator.dart

@@ -0,0 +1,100 @@
+// Copyright 2018 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:math' show Rectangle;
+
+import '../../common/color.dart';
+import '../../common/graphics_factory.dart';
+import '../../common/text_style.dart';
+import '../cartesian/axis/spec/axis_spec.dart';
+import '../common/chart_canvas.dart';
+import 'point_renderer.dart';
+import 'point_renderer_decorator.dart';
+
+
+class PointLabelSpec {
+ final String label;
+ final bool selected;
+ PointLabelSpec({required this.label, this.selected = false,});
+}
+
+typedef LabelCallback = PointLabelSpec Function(Object? datum);
+
+class PointLabelDecorator<D> extends PointRendererDecorator<D> {
+ final int horizontalPadding;
+ final int verticalPadding;
+
+ final TextStyleSpec? labelStyleSpec;
+ final TextStyleSpec? selectedLabelStyleSpec;
+ final LabelCallback labelCallback;
+ TextStyle? _labelStyle;
+ TextStyle? _selectedLabelStyle;
+
+
+ PointLabelDecorator({
+ this.labelStyleSpec,
+ this.selectedLabelStyleSpec,
+ required this.labelCallback,
+ this.horizontalPadding = 0,
+ this.verticalPadding = 0
+ });
+
+ @override
+ bool get renderAbove => true;
+
+ @override
+ void decorate(PointRendererElement<D> pointElement, ChartCanvas canvas,
+ GraphicsFactory graphicsFactory,
+ {required Rectangle drawBounds,
+ required double animationPercent,
+ bool rtl = false}) {
+ // Only decorate the bars when animation is at 100%.
+ if (animationPercent != 1.0) {
+ return;
+ }
+
+
+ if (_labelStyle == null) {
+ _initLabelStyle(graphicsFactory);
+ }
+
+ final labelInfo = labelCallback(pointElement.point?.datum);
+ final labelElement = graphicsFactory.createTextElement(labelInfo.label)
+ ..textStyle = labelInfo.selected ? _selectedLabelStyle : _labelStyle;
+ final point = pointElement.point;
+ if (point == null || point.x == null || point.y == null) return;
+
+ final labelX = point.x!.toInt() - horizontalPadding;
+ final labelY = point.y!.toInt() - verticalPadding;
+
+ canvas.drawText(labelElement, labelX, labelY);
+
+ }
+
+ void _initLabelStyle(GraphicsFactory graphicsFactory) {
+ _labelStyle = _textStyleFromSpec(graphicsFactory, labelStyleSpec);
+ _selectedLabelStyle =
+ selectedLabelStyleSpec != null ? _textStyleFromSpec(graphicsFactory, selectedLabelStyleSpec) : _labelStyle;
+ }
+
+ TextStyle? _textStyleFromSpec(GraphicsFactory graphicsFactory, TextStyleSpec? spec) {
+ return graphicsFactory.createTextPaint()
+ ..color = spec?.color ?? const Color(r: 0, g: 0, b: 0)
+ ..fontFamily = spec?.fontFamily
+ ..fontSize = spec?.fontSize ?? 12
+ ..fontWeight = spec?.fontWeight ?? '400';
+ }
+
+}

community_charts_flutter/example/lib/combo_chart/scatter_plot_line.dart

@@ -25,8 +25,31 @@ import 'package:flutter/material.dart';
 class ScatterPlotComboLineChart extends StatelessWidget {
  final List<charts.Series<dynamic, num>> seriesList;
  final bool animate;
-
- ScatterPlotComboLineChart(this.seriesList, {this.animate = false});
+ List<LinearSales> selectedDomains = [];
+ late charts.PointRendererDecorator<num> pointCustomDecorator;
+
+ ScatterPlotComboLineChart(this.seriesList, {this.animate = false}): pointCustomDecorator = charts.PointLabelDecorator(
+ horizontalPadding: 6,
+ verticalPadding: 20,
+ selectedLabelStyleSpec: charts.TextStyleSpec(
+ color: charts.Color.fromHex(code: '#FF9560'),
+ fontWeight: '500',
+ fontSize: 14,
+ ),
+ labelCallback: (domain) {
+ if (domain is LinearSales?) {
+ // final selected = selectedDomains.contains(domain);
+ return charts.PointLabelSpec(
+ label: domain?.sales.toString() ?? '',
+ selected: false,
+ );
+ }
+ return charts.PointLabelSpec(
+ label: '',
+ selected: false,
+ );
+ });
+
 
  /// Creates a [ScatterPlotChart] with sample data and no transition.
  factory ScatterPlotComboLineChart.withSampleData() {
@@ -108,6 +131,8 @@ class ScatterPlotComboLineChart extends StatelessWidget {
  }
  // EXCLUDE_FROM_GALLERY_DOCS_END
 
+
+
  @override
  Widget build(BuildContext context) {
  return new charts.ScatterPlotChart(seriesList,
@@ -117,7 +142,11 @@ class ScatterPlotComboLineChart extends StatelessWidget {
  //
  // This is the default configuration, but is shown here for
  // illustration.
- defaultRenderer: new charts.PointRendererConfig(),
+ defaultRenderer: new charts.PointRendererConfig(
+ pointRendererDecorators: [
+ pointCustomDecorator,
+ ]
+ ),
  // Custom renderer configuration for the line series.
  customSeriesRenderers: [
  new charts.LineRendererConfig(
@@ -127,7 +156,7 @@ class ScatterPlotComboLineChart extends StatelessWidget {
  //
  // By default, series drawn by the point renderer are painted on
  // top of those drawn by a line renderer.
- layoutPaintOrder: charts.LayoutViewPaintOrder.point + 1)
+ layoutPaintOrder: charts.LayoutViewPaintOrder.point + 1),
  ]);
  }
 

community_charts_flutter/lib/community_charts_flutter.dart

@@ -119,6 +119,8 @@ export 'package:community_charts_common/community_charts_common.dart'
  PointRenderer,
  PointRendererConfig,
  PointRendererDecorator,
+ PointLabelSpec,
+ PointLabelDecorator,
  PointRendererElement,
  PointSymbolRenderer,
  RangeAnnotationAxisType,