Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 22:09:06 +00:00
Code Issues Releases Wiki Activity

web/chart: fix sample (#909)

Browse Source
This commit is contained in:
Brett Morgan
2021-10-07 08:10:34 +11:00
committed by GitHub
parent 0fe216a1cf
commit 2d9ba2f9eb
118 changed files with 3655 additions and 3511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/charts/analysis_options.yaml Normal file
View File

@@ -0,0 +1,29 @@
# This file configures the analyzer, which statically analyzes Dart code to
# check for errors, warnings, and lints.
#
# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
# invoked from the command line by running `flutter analyze`.
# The following line activates a set of recommended lints for Flutter apps,
# packages, and plugins designed to encourage good coding practices.
include: package:flutter_lints/flutter.yaml
linter:
# The lint rules applied to this project can be customized in the
# section below to disable rules from the `package:flutter_lints/flutter.yaml`
# included above or to enable additional rules. A list of all available lints
# and their documentation is published at
# https://dart-lang.github.io/linter/lints/index.html.
#
# Instead of disabling a lint rule for the entire project in the
# section below, it can also be suppressed for a single line of code
# or a specific dart file by using the `// ignore: name_of_lint` and
# `// ignore_for_file: name_of_lint` syntax on the line or in the file
# producing the lint.
rules:
avoid_print: false
prefer_single_quotes: true
# Additional information about this file can be found at
# https://dart.dev/guides/language/analysis-options

6
web/charts/lib/a11y/a11y_gallery.dart
View File

@@ -18,12 +18,12 @@ import 'domain_a11y_explore_bar_chart.dart';
List<GalleryScaffold> buildGallery() { List<GalleryScaffold> buildGallery() {
return [ return [
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.accessibility), listTileIcon: const Icon(Icons.accessibility),
title: 'Screen reader enabled bar chart', title: 'Screen reader enabled bar chart',
subtitle: 'Requires TalkBack or Voiceover turned on to work. ' subtitle: 'Requires TalkBack or Voiceover turned on to work. '
'Bar chart with domain selection explore mode behavior.', 'Bar chart with domain selection explore mode behavior.',
childBuilder: () => new DomainA11yExploreBarChart.withRandomData(), childBuilder: () => DomainA11yExploreBarChart.withRandomData(),
), ),
]; ];
} }

51
web/charts/lib/a11y/domain_a11y_explore_bar_chart.dart
View File

@@ -41,11 +41,12 @@ class DomainA11yExploreBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
DomainA11yExploreBarChart(this.seriesList, {this.animate}); const DomainA11yExploreBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory DomainA11yExploreBarChart.withSampleData() { factory DomainA11yExploreBarChart.withSampleData() {
return new DomainA11yExploreBarChart( return DomainA11yExploreBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -57,36 +58,36 @@ class DomainA11yExploreBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory DomainA11yExploreBarChart.withRandomData() { factory DomainA11yExploreBarChart.withRandomData() {
return new DomainA11yExploreBarChart(_createRandomData()); return DomainA11yExploreBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final mobileData = [ final mobileData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tabletData = [ final tabletData = [
// Purposely missing data to show that only measures that are available // Purposely missing data to show that only measures that are available
// are vocalized. // are vocalized.
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile Sales', id: 'Mobile Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileData, data: mobileData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet Sales', id: 'Tablet Sales',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -106,7 +107,7 @@ class DomainA11yExploreBarChart extends StatelessWidget {
/// domain, it vocalizes the series display name and the measure and a /// domain, it vocalizes the series display name and the measure and a
/// description of that measure. /// description of that measure.
String vocalizeDomainAndMeasures(List<charts.SeriesDatum> seriesDatums) { String vocalizeDomainAndMeasures(List<charts.SeriesDatum> seriesDatums) {
final buffer = new StringBuffer(); final buffer = StringBuffer();
// The datum's type in this case is [OrdinalSales]. // The datum's type in this case is [OrdinalSales].
// So we can access year and sales information here. // So we can access year and sales information here.
@@ -125,13 +126,13 @@ class DomainA11yExploreBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Semantics( return Semantics(
// Describe your chart // Describe your chart
label: 'Yearly sales bar chart', label: 'Yearly sales bar chart',
// Optionally provide a hint for the user to know how to trigger // Optionally provide a hint for the user to know how to trigger
// explore mode. // explore mode.
hint: 'Press and hold to enable explore', hint: 'Press and hold to enable explore',
child: new charts.BarChart( child: charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
// To prevent conflict with the select nearest behavior that uses the // To prevent conflict with the select nearest behavior that uses the
@@ -140,7 +141,7 @@ class DomainA11yExploreBarChart extends StatelessWidget {
// with the application. // with the application.
defaultInteractions: !MediaQuery.of(context).accessibleNavigation, defaultInteractions: !MediaQuery.of(context).accessibleNavigation,
behaviors: [ behaviors: [
new charts.DomainA11yExploreBehavior( charts.DomainA11yExploreBehavior(
// Callback for generating the message that is vocalized. // Callback for generating the message that is vocalized.
// An example of how to use is in [vocalizeDomainAndMeasures]. // An example of how to use is in [vocalizeDomainAndMeasures].
// If none is set, the default only vocalizes the domain value. // If none is set, the default only vocalizes the domain value.
@@ -166,7 +167,7 @@ class DomainA11yExploreBarChart extends StatelessWidget {
// This behavior is included in this example to show that when an // This behavior is included in this example to show that when an
// a11y node has focus, the chart's internal selection model is // a11y node has focus, the chart's internal selection model is
// also updated. // also updated.
new charts.DomainHighlighter(charts.SelectionModelType.info), charts.DomainHighlighter(charts.SelectionModelType.info),
], ],
)); ));
} }
@@ -174,28 +175,28 @@ class DomainA11yExploreBarChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final mobileData = [ final mobileData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tabletData = [ final tabletData = [
// Purposely missing data to show that only measures that are available // Purposely missing data to show that only measures that are available
// are vocalized. // are vocalized.
new OrdinalSales('2016', 25), OrdinalSales('2016', 25),
new OrdinalSales('2017', 50), OrdinalSales('2017', 50),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile Sales', id: 'Mobile Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileData, data: mobileData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet Sales', id: 'Tablet Sales',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

4
web/charts/lib/app_config.dart
View File

@@ -28,10 +28,10 @@ class AppConfig {
/// The default configuration of the app. /// The default configuration of the app.
AppConfig get defaultConfig { AppConfig get defaultConfig {
return new AppConfig( return AppConfig(
appName: 'Charts Gallery', appName: 'Charts Gallery',
appLink: '', appLink: '',
theme: new ThemeData( theme: ThemeData(
brightness: Brightness.light, brightness: Brightness.light,
primarySwatch: Colors.lightBlue, primarySwatch: Colors.lightBlue,
), ),

99
web/charts/lib/axes/axes_gallery.dart
View File

@@ -34,104 +34,103 @@ import 'statically_provided_ticks.dart';
List<GalleryScaffold> buildGallery() { List<GalleryScaffold> buildGallery() {
return [ return [
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Bar chart with Secondary Measure Axis', title: 'Bar chart with Secondary Measure Axis',
subtitle: 'Bar chart with a series using a secondary measure axis', subtitle: 'Bar chart with a series using a secondary measure axis',
childBuilder: () => new BarChartWithSecondaryAxis.withRandomData(), childBuilder: () => BarChartWithSecondaryAxis.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Bar chart with Secondary Measure Axis only', title: 'Bar chart with Secondary Measure Axis only',
subtitle: 'Bar chart with both series using secondary measure axis', subtitle: 'Bar chart with both series using secondary measure axis',
childBuilder: () => new BarChartWithSecondaryAxisOnly.withRandomData(), childBuilder: () => BarChartWithSecondaryAxisOnly.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Transform.rotate( listTileIcon: Transform.rotate(
angle: 1.5708, child: new Icon(Icons.insert_chart)), angle: 1.5708, child: const Icon(Icons.insert_chart)),
title: 'Horizontal bar chart with Secondary Measure Axis', title: 'Horizontal bar chart with Secondary Measure Axis',
subtitle: subtitle:
'Horizontal Bar chart with a series using secondary measure axis', 'Horizontal Bar chart with a series using secondary measure axis',
childBuilder: () => childBuilder: () => HorizontalBarChartWithSecondaryAxis.withRandomData(),
new HorizontalBarChartWithSecondaryAxis.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Short Ticks Axis', title: 'Short Ticks Axis',
subtitle: 'Bar chart with the primary measure axis having short ticks', subtitle: 'Bar chart with the primary measure axis having short ticks',
childBuilder: () => new ShortTickLengthAxis.withRandomData(), childBuilder: () => ShortTickLengthAxis.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Custom Axis Fonts', title: 'Custom Axis Fonts',
subtitle: 'Bar chart with custom axis font size and color', subtitle: 'Bar chart with custom axis font size and color',
childBuilder: () => new CustomFontSizeAndColor.withRandomData(), childBuilder: () => CustomFontSizeAndColor.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Label Alignment Axis', title: 'Label Alignment Axis',
subtitle: 'Bar chart with custom measure axis label alignments', subtitle: 'Bar chart with custom measure axis label alignments',
childBuilder: () => new MeasureAxisLabelAlignment.withRandomData(), childBuilder: () => MeasureAxisLabelAlignment.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'No Axis', title: 'No Axis',
subtitle: 'Bar chart with only the axis line drawn', subtitle: 'Bar chart with only the axis line drawn',
childBuilder: () => new HiddenTicksAndLabelsAxis.withRandomData(), childBuilder: () => HiddenTicksAndLabelsAxis.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Statically Provided Ticks', title: 'Statically Provided Ticks',
subtitle: 'Bar chart with statically provided ticks', subtitle: 'Bar chart with statically provided ticks',
childBuilder: () => new StaticallyProvidedTicks.withRandomData(), childBuilder: () => StaticallyProvidedTicks.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Custom Formatter', title: 'Custom Formatter',
subtitle: 'Timeseries with custom domain and measure tick formatters', subtitle: 'Timeseries with custom domain and measure tick formatters',
childBuilder: () => new CustomAxisTickFormatters.withRandomData(), childBuilder: () => CustomAxisTickFormatters.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Custom Tick Count', title: 'Custom Tick Count',
subtitle: 'Timeseries with custom measure axis tick count', subtitle: 'Timeseries with custom measure axis tick count',
childBuilder: () => new CustomMeasureTickCount.withRandomData(), childBuilder: () => CustomMeasureTickCount.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Integer Measure Ticks', title: 'Integer Measure Ticks',
subtitle: 'Timeseries with only whole number measure axis ticks', subtitle: 'Timeseries with only whole number measure axis ticks',
childBuilder: () => new IntegerOnlyMeasureAxis.withRandomData(), childBuilder: () => IntegerOnlyMeasureAxis.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Non-zero bound Axis', title: 'Non-zero bound Axis',
subtitle: 'Timeseries with measure axis that does not include zero', subtitle: 'Timeseries with measure axis that does not include zero',
childBuilder: () => new NonzeroBoundMeasureAxis.withRandomData(), childBuilder: () => NonzeroBoundMeasureAxis.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Ordinal axis with initial viewport', title: 'Ordinal axis with initial viewport',
subtitle: 'Single series with initial viewport', subtitle: 'Single series with initial viewport',
childBuilder: () => new OrdinalInitialViewport.withRandomData(), childBuilder: () => OrdinalInitialViewport.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Numeric axis with initial viewport', title: 'Numeric axis with initial viewport',
subtitle: 'Initial viewport is set to a subset of the data', subtitle: 'Initial viewport is set to a subset of the data',
childBuilder: () => new NumericInitialViewport.withRandomData(), childBuilder: () => NumericInitialViewport.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Gridline dash pattern', title: 'Gridline dash pattern',
subtitle: 'Timeseries with measure gridlines that have a dash pattern', subtitle: 'Timeseries with measure gridlines that have a dash pattern',
childBuilder: () => new GridlineDashPattern.withRandomData(), childBuilder: () => GridlineDashPattern.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Disjoint Measure Axes', title: 'Disjoint Measure Axes',
subtitle: 'Line chart with disjoint measure axes', subtitle: 'Line chart with disjoint measure axes',
childBuilder: () => new DisjointMeasureAxisLineChart.withRandomData(), childBuilder: () => DisjointMeasureAxisLineChart.withRandomData(),
), ),
]; ];
} }

59
web/charts/lib/axes/bar_secondary_axis.dart
View File

@@ -39,10 +39,11 @@ class BarChartWithSecondaryAxis extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
BarChartWithSecondaryAxis(this.seriesList, {this.animate}); const BarChartWithSecondaryAxis(this.seriesList, {this.animate, Key key})
: super(key: key);
factory BarChartWithSecondaryAxis.withSampleData() { factory BarChartWithSecondaryAxis.withSampleData() {
return new BarChartWithSecondaryAxis( return BarChartWithSecondaryAxis(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -54,35 +55,35 @@ class BarChartWithSecondaryAxis extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory BarChartWithSecondaryAxis.withRandomData() { factory BarChartWithSecondaryAxis.withRandomData() {
return new BarChartWithSecondaryAxis(_createRandomData()); return BarChartWithSecondaryAxis(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100), OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100), OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100), OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100), OrdinalSales('2017', random.nextInt(100) * 100),
]; ];
final losAngelesSalesData = [ final losAngelesSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData, data: globalSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Los Angeles Revenue', id: 'Los Angeles Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -97,46 +98,46 @@ class BarChartWithSecondaryAxis extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
// It is important when using both primary and secondary axes to choose // It is important when using both primary and secondary axes to choose
// the same number of ticks for both sides to get the gridlines to line // the same number of ticks for both sides to get the gridlines to line
// up. // up.
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
tickProviderSpec: tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 3)), charts.BasicNumericTickProviderSpec(desiredTickCount: 3)),
secondaryMeasureAxis: new charts.NumericAxisSpec( secondaryMeasureAxis: const charts.NumericAxisSpec(
tickProviderSpec: tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 3)), charts.BasicNumericTickProviderSpec(desiredTickCount: 3)),
); );
} }
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', 5000), OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000), OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000), OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000), OrdinalSales('2017', 750000),
]; ];
final losAngelesSalesData = [ final losAngelesSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData, data: globalSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Los Angeles Revenue', id: 'Los Angeles Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

31
web/charts/lib/axes/bar_secondary_axis_only.dart
View File

@@ -33,10 +33,11 @@ class BarChartWithSecondaryAxisOnly extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
BarChartWithSecondaryAxisOnly(this.seriesList, {this.animate}); const BarChartWithSecondaryAxisOnly(this.seriesList, {this.animate, Key key})
: super(key: key);
factory BarChartWithSecondaryAxisOnly.withSampleData() { factory BarChartWithSecondaryAxisOnly.withSampleData() {
return new BarChartWithSecondaryAxisOnly( return BarChartWithSecondaryAxisOnly(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -48,22 +49,22 @@ class BarChartWithSecondaryAxisOnly extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory BarChartWithSecondaryAxisOnly.withRandomData() { factory BarChartWithSecondaryAxisOnly.withRandomData() {
return new BarChartWithSecondaryAxisOnly(_createRandomData()); return BarChartWithSecondaryAxisOnly(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100), OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100), OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100), OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100), OrdinalSales('2017', random.nextInt(100) * 100),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -77,7 +78,7 @@ class BarChartWithSecondaryAxisOnly extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
); );
@@ -86,14 +87,14 @@ class BarChartWithSecondaryAxisOnly extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', 500), OrdinalSales('2014', 500),
new OrdinalSales('2015', 2500), OrdinalSales('2015', 2500),
new OrdinalSales('2016', 1000), OrdinalSales('2016', 1000),
new OrdinalSales('2017', 7500), OrdinalSales('2017', 7500),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

73
web/charts/lib/axes/custom_axis_tick_formatters.dart
View File

@@ -25,11 +25,12 @@ class CustomAxisTickFormatters extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
CustomAxisTickFormatters(this.seriesList, {this.animate}); const CustomAxisTickFormatters(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [TimeSeriesChart] with sample data and no transition. /// Creates a [TimeSeriesChart] with sample data and no transition.
factory CustomAxisTickFormatters.withSampleData() { factory CustomAxisTickFormatters.withSampleData() {
return new CustomAxisTickFormatters( return CustomAxisTickFormatters(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,29 +42,29 @@ class CustomAxisTickFormatters extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory CustomAxisTickFormatters.withRandomData() { factory CustomAxisTickFormatters.withRandomData() {
return new CustomAxisTickFormatters(_createRandomData()); return CustomAxisTickFormatters(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() { static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextInt(100)), MyRow(DateTime(2017, 9, 25), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 26), random.nextInt(100)), MyRow(DateTime(2017, 9, 26), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 27), random.nextInt(100)), MyRow(DateTime(2017, 9, 27), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 28), random.nextInt(100)), MyRow(DateTime(2017, 9, 28), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 29), random.nextInt(100)), MyRow(DateTime(2017, 9, 29), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 30), random.nextInt(100)), MyRow(DateTime(2017, 9, 30), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 01), random.nextInt(100)), MyRow(DateTime(2017, 10, 01), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 02), random.nextInt(100)), MyRow(DateTime(2017, 10, 02), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 03), random.nextInt(100)), MyRow(DateTime(2017, 10, 03), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 04), random.nextInt(100)), MyRow(DateTime(2017, 10, 04), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 05), random.nextInt(100)), MyRow(DateTime(2017, 10, 05), random.nextInt(100)),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Cost', id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost, measureFn: (MyRow row, _) => row.cost,
@@ -79,8 +80,8 @@ class CustomAxisTickFormatters extends StatelessWidget {
/// ///
/// This is what is used in the [NumericAxisSpec] below. /// This is what is used in the [NumericAxisSpec] below.
final simpleCurrencyFormatter = final simpleCurrencyFormatter =
new charts.BasicNumericTickFormatterSpec.fromNumberFormat( charts.BasicNumericTickFormatterSpec.fromNumberFormat(
new NumberFormat.compactSimpleCurrency()); NumberFormat.compactSimpleCurrency());
/// Formatter for numeric ticks that uses the callback provided. /// Formatter for numeric ticks that uses the callback provided.
/// ///
@@ -91,11 +92,11 @@ class CustomAxisTickFormatters extends StatelessWidget {
// final customTickFormatter = // final customTickFormatter =
// charts.BasicNumericTickFormatterSpec((num value) => 'MyValue: $value'); // charts.BasicNumericTickFormatterSpec((num value) => 'MyValue: $value');
return new charts.TimeSeriesChart(seriesList, return charts.TimeSeriesChart(seriesList,
animate: animate, animate: animate,
// Sets up a currency formatter for the measure axis. // Sets up a currency formatter for the measure axis.
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis:
tickFormatterSpec: simpleCurrencyFormatter), charts.NumericAxisSpec(tickFormatterSpec: simpleCurrencyFormatter),
/// Customizes the date tick formatter. It will print the day of month /// Customizes the date tick formatter. It will print the day of month
/// as the default format, but include the month and year if it /// as the default format, but include the month and year if it
@@ -103,30 +104,30 @@ class CustomAxisTickFormatters extends StatelessWidget {
/// ///
/// minute, hour, day, month, and year are all provided by default and /// minute, hour, day, month, and year are all provided by default and
/// you can override them following this pattern. /// you can override them following this pattern.
domainAxis: new charts.DateTimeAxisSpec( domainAxis: const charts.DateTimeAxisSpec(
tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec( tickFormatterSpec: charts.AutoDateTimeTickFormatterSpec(
day: new charts.TimeFormatterSpec( day: charts.TimeFormatterSpec(
format: 'd', transitionFormat: 'MM/dd/yyyy')))); format: 'd', transitionFormat: 'MM/dd/yyyy'))));
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() { static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), 6), MyRow(DateTime(2017, 9, 25), 6),
new MyRow(new DateTime(2017, 9, 26), 8), MyRow(DateTime(2017, 9, 26), 8),
new MyRow(new DateTime(2017, 9, 27), 6), MyRow(DateTime(2017, 9, 27), 6),
new MyRow(new DateTime(2017, 9, 28), 9), MyRow(DateTime(2017, 9, 28), 9),
new MyRow(new DateTime(2017, 9, 29), 11), MyRow(DateTime(2017, 9, 29), 11),
new MyRow(new DateTime(2017, 9, 30), 15), MyRow(DateTime(2017, 9, 30), 15),
new MyRow(new DateTime(2017, 10, 01), 25), MyRow(DateTime(2017, 10, 01), 25),
new MyRow(new DateTime(2017, 10, 02), 33), MyRow(DateTime(2017, 10, 02), 33),
new MyRow(new DateTime(2017, 10, 03), 27), MyRow(DateTime(2017, 10, 03), 27),
new MyRow(new DateTime(2017, 10, 04), 31), MyRow(DateTime(2017, 10, 04), 31),
new MyRow(new DateTime(2017, 10, 05), 23), MyRow(DateTime(2017, 10, 05), 23),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Cost', id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost, measureFn: (MyRow row, _) => row.cost,

51
web/charts/lib/axes/custom_font_size_and_color.dart
View File

@@ -29,10 +29,11 @@ class CustomFontSizeAndColor extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
CustomFontSizeAndColor(this.seriesList, {this.animate}); const CustomFontSizeAndColor(this.seriesList, {this.animate, Key key})
: super(key: key);
factory CustomFontSizeAndColor.withSampleData() { factory CustomFontSizeAndColor.withSampleData() {
return new CustomFontSizeAndColor( return CustomFontSizeAndColor(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -44,22 +45,22 @@ class CustomFontSizeAndColor extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory CustomFontSizeAndColor.withRandomData() { factory CustomFontSizeAndColor.withRandomData() {
return new CustomFontSizeAndColor(_createRandomData()); return CustomFontSizeAndColor(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100), OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100), OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100), OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100), OrdinalSales('2017', random.nextInt(100) * 100),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -71,7 +72,7 @@ class CustomFontSizeAndColor extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
@@ -80,44 +81,44 @@ class CustomFontSizeAndColor extends StatelessWidget {
/// This is an OrdinalAxisSpec to match up with BarChart's default /// This is an OrdinalAxisSpec to match up with BarChart's default
/// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for /// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
/// other charts). /// other charts).
domainAxis: new charts.OrdinalAxisSpec( domainAxis: const charts.OrdinalAxisSpec(
renderSpec: new charts.SmallTickRendererSpec( renderSpec: charts.SmallTickRendererSpec(
// Tick and Label styling here. // Tick and Label styling here.
labelStyle: new charts.TextStyleSpec( labelStyle: charts.TextStyleSpec(
fontSize: 18, // size in Pts. fontSize: 18, // size in Pts.
color: charts.MaterialPalette.black), color: charts.MaterialPalette.black),
// Change the line colors to match text color. // Change the line colors to match text color.
lineStyle: new charts.LineStyleSpec( lineStyle:
color: charts.MaterialPalette.black))), charts.LineStyleSpec(color: charts.MaterialPalette.black))),
/// Assign a custom style for the measure axis. /// Assign a custom style for the measure axis.
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
renderSpec: new charts.GridlineRendererSpec( renderSpec: charts.GridlineRendererSpec(
// Tick and Label styling here. // Tick and Label styling here.
labelStyle: new charts.TextStyleSpec( labelStyle: charts.TextStyleSpec(
fontSize: 18, // size in Pts. fontSize: 18, // size in Pts.
color: charts.MaterialPalette.black), color: charts.MaterialPalette.black),
// Change the line colors to match text color. // Change the line colors to match text color.
lineStyle: new charts.LineStyleSpec( lineStyle:
color: charts.MaterialPalette.black))), charts.LineStyleSpec(color: charts.MaterialPalette.black))),
); );
} }
/// Create series list with single series /// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', 5000), OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000), OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000), OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000), OrdinalSales('2017', 750000),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

63
web/charts/lib/axes/custom_measure_tick_count.dart
View File

@@ -28,11 +28,12 @@ class CustomMeasureTickCount extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
CustomMeasureTickCount(this.seriesList, {this.animate}); const CustomMeasureTickCount(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [TimeSeriesChart] with sample data and no transition. /// Creates a [TimeSeriesChart] with sample data and no transition.
factory CustomMeasureTickCount.withSampleData() { factory CustomMeasureTickCount.withSampleData() {
return new CustomMeasureTickCount( return CustomMeasureTickCount(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -44,29 +45,29 @@ class CustomMeasureTickCount extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory CustomMeasureTickCount.withRandomData() { factory CustomMeasureTickCount.withRandomData() {
return new CustomMeasureTickCount(_createRandomData()); return CustomMeasureTickCount(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() { static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextInt(100)), MyRow(DateTime(2017, 9, 25), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 26), random.nextInt(100)), MyRow(DateTime(2017, 9, 26), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 27), random.nextInt(100)), MyRow(DateTime(2017, 9, 27), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 28), random.nextInt(100)), MyRow(DateTime(2017, 9, 28), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 29), random.nextInt(100)), MyRow(DateTime(2017, 9, 29), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 30), random.nextInt(100)), MyRow(DateTime(2017, 9, 30), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 01), random.nextInt(100)), MyRow(DateTime(2017, 10, 01), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 02), random.nextInt(100)), MyRow(DateTime(2017, 10, 02), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 03), random.nextInt(100)), MyRow(DateTime(2017, 10, 03), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 04), random.nextInt(100)), MyRow(DateTime(2017, 10, 04), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 05), random.nextInt(100)), MyRow(DateTime(2017, 10, 05), random.nextInt(100)),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Cost', id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost, measureFn: (MyRow row, _) => row.cost,
@@ -78,33 +79,33 @@ class CustomMeasureTickCount extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.TimeSeriesChart(seriesList, return charts.TimeSeriesChart(seriesList,
animate: animate, animate: animate,
/// Customize the measure axis to have 2 ticks, /// Customize the measure axis to have 2 ticks,
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
tickProviderSpec: tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 2))); charts.BasicNumericTickProviderSpec(desiredTickCount: 2)));
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() { static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), 6), MyRow(DateTime(2017, 9, 25), 6),
new MyRow(new DateTime(2017, 9, 26), 8), MyRow(DateTime(2017, 9, 26), 8),
new MyRow(new DateTime(2017, 9, 27), 6), MyRow(DateTime(2017, 9, 27), 6),
new MyRow(new DateTime(2017, 9, 28), 9), MyRow(DateTime(2017, 9, 28), 9),
new MyRow(new DateTime(2017, 9, 29), 11), MyRow(DateTime(2017, 9, 29), 11),
new MyRow(new DateTime(2017, 9, 30), 15), MyRow(DateTime(2017, 9, 30), 15),
new MyRow(new DateTime(2017, 10, 01), 25), MyRow(DateTime(2017, 10, 01), 25),
new MyRow(new DateTime(2017, 10, 02), 33), MyRow(DateTime(2017, 10, 02), 33),
new MyRow(new DateTime(2017, 10, 03), 27), MyRow(DateTime(2017, 10, 03), 27),
new MyRow(new DateTime(2017, 10, 04), 31), MyRow(DateTime(2017, 10, 04), 31),
new MyRow(new DateTime(2017, 10, 05), 23), MyRow(DateTime(2017, 10, 05), 23),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Cost', id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost, measureFn: (MyRow row, _) => row.cost,

31
web/charts/lib/axes/flipped_vertical_axis.dart
View File

@@ -32,10 +32,11 @@ class FlippedVerticalAxis extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
FlippedVerticalAxis(this.seriesList, {this.animate}); const FlippedVerticalAxis(this.seriesList, {this.animate, Key key})
: super(key: key);
factory FlippedVerticalAxis.withSampleData() { factory FlippedVerticalAxis.withSampleData() {
return new FlippedVerticalAxis( return FlippedVerticalAxis(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -47,25 +48,25 @@ class FlippedVerticalAxis extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory FlippedVerticalAxis.withRandomData() { factory FlippedVerticalAxis.withRandomData() {
return new FlippedVerticalAxis(_createRandomData()); return FlippedVerticalAxis(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<RunnerRank, String>> _createRandomData() { static List<charts.Series<RunnerRank, String>> _createRandomData() {
final random = new Random(); final random = Random();
const runners = ['Smith', 'Jones', 'Brown', 'Doe']; const runners = ['Smith', 'Jones', 'Brown', 'Doe'];
// Randomly assign runners, but leave the order of the places. // Randomly assign runners, but leave the order of the places.
final raceData = [ final raceData = [
new RunnerRank(runners.removeAt(random.nextInt(runners.length)), 1), RunnerRank(runners.removeAt(random.nextInt(runners.length)), 1),
new RunnerRank(runners.removeAt(random.nextInt(runners.length)), 2), RunnerRank(runners.removeAt(random.nextInt(runners.length)), 2),
new RunnerRank(runners.removeAt(random.nextInt(runners.length)), 3), RunnerRank(runners.removeAt(random.nextInt(runners.length)), 3),
new RunnerRank(runners.removeAt(random.nextInt(runners.length)), 4), RunnerRank(runners.removeAt(random.nextInt(runners.length)), 4),
]; ];
return [ return [
new charts.Series<RunnerRank, String>( charts.Series<RunnerRank, String>(
id: 'Race Results', id: 'Race Results',
domainFn: (RunnerRank row, _) => row.name, domainFn: (RunnerRank row, _) => row.name,
measureFn: (RunnerRank row, _) => row.place, measureFn: (RunnerRank row, _) => row.place,
@@ -80,7 +81,7 @@ class FlippedVerticalAxis extends StatelessWidget {
// TODO: Remove this comment // TODO: Remove this comment
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
flipVerticalAxis: true, flipVerticalAxis: true,
@@ -90,14 +91,14 @@ class FlippedVerticalAxis extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<RunnerRank, String>> _createSampleData() { static List<charts.Series<RunnerRank, String>> _createSampleData() {
final raceData = [ final raceData = [
new RunnerRank('Smith', 1), RunnerRank('Smith', 1),
new RunnerRank('Jones', 2), RunnerRank('Jones', 2),
new RunnerRank('Brown', 3), RunnerRank('Brown', 3),
new RunnerRank('Doe', 4), RunnerRank('Doe', 4),
]; ];
return [ return [
new charts.Series<RunnerRank, String>( charts.Series<RunnerRank, String>(
id: 'Race Results', id: 'Race Results',
domainFn: (RunnerRank row, _) => row.name, domainFn: (RunnerRank row, _) => row.name,
measureFn: (RunnerRank row, _) => row.place, measureFn: (RunnerRank row, _) => row.place,

61
web/charts/lib/axes/gridline_dash_pattern.dart
View File

@@ -24,11 +24,12 @@ class GridlineDashPattern extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
GridlineDashPattern(this.seriesList, {this.animate}); const GridlineDashPattern(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [TimeSeriesChart] with sample data and no transition. /// Creates a [TimeSeriesChart] with sample data and no transition.
factory GridlineDashPattern.withSampleData() { factory GridlineDashPattern.withSampleData() {
return new GridlineDashPattern( return GridlineDashPattern(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,29 +41,29 @@ class GridlineDashPattern extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory GridlineDashPattern.withRandomData() { factory GridlineDashPattern.withRandomData() {
return new GridlineDashPattern(_createRandomData()); return GridlineDashPattern(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() { static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextInt(100)), MyRow(DateTime(2017, 9, 25), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 26), random.nextInt(100)), MyRow(DateTime(2017, 9, 26), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 27), random.nextInt(100)), MyRow(DateTime(2017, 9, 27), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 28), random.nextInt(100)), MyRow(DateTime(2017, 9, 28), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 29), random.nextInt(100)), MyRow(DateTime(2017, 9, 29), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 30), random.nextInt(100)), MyRow(DateTime(2017, 9, 30), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 01), random.nextInt(100)), MyRow(DateTime(2017, 10, 01), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 02), random.nextInt(100)), MyRow(DateTime(2017, 10, 02), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 03), random.nextInt(100)), MyRow(DateTime(2017, 10, 03), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 04), random.nextInt(100)), MyRow(DateTime(2017, 10, 04), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 05), random.nextInt(100)), MyRow(DateTime(2017, 10, 05), random.nextInt(100)),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Cost', id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost, measureFn: (MyRow row, _) => row.cost,
@@ -74,11 +75,11 @@ class GridlineDashPattern extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.TimeSeriesChart(seriesList, return charts.TimeSeriesChart(seriesList,
animate: animate, animate: animate,
/// Customize the gridlines to use a dash pattern. /// Customize the gridlines to use a dash pattern.
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec( renderSpec: charts.GridlineRendererSpec(
lineStyle: charts.LineStyleSpec( lineStyle: charts.LineStyleSpec(
dashPattern: [4, 4], dashPattern: [4, 4],
@@ -88,21 +89,21 @@ class GridlineDashPattern extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() { static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), 6), MyRow(DateTime(2017, 9, 25), 6),
new MyRow(new DateTime(2017, 9, 26), 8), MyRow(DateTime(2017, 9, 26), 8),
new MyRow(new DateTime(2017, 9, 27), 6), MyRow(DateTime(2017, 9, 27), 6),
new MyRow(new DateTime(2017, 9, 28), 9), MyRow(DateTime(2017, 9, 28), 9),
new MyRow(new DateTime(2017, 9, 29), 11), MyRow(DateTime(2017, 9, 29), 11),
new MyRow(new DateTime(2017, 9, 30), 15), MyRow(DateTime(2017, 9, 30), 15),
new MyRow(new DateTime(2017, 10, 01), 25), MyRow(DateTime(2017, 10, 01), 25),
new MyRow(new DateTime(2017, 10, 02), 33), MyRow(DateTime(2017, 10, 02), 33),
new MyRow(new DateTime(2017, 10, 03), 27), MyRow(DateTime(2017, 10, 03), 27),
new MyRow(new DateTime(2017, 10, 04), 31), MyRow(DateTime(2017, 10, 04), 31),
new MyRow(new DateTime(2017, 10, 05), 23), MyRow(DateTime(2017, 10, 05), 23),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Cost', id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost, measureFn: (MyRow row, _) => row.cost,

37
web/charts/lib/axes/hidden_ticks_and_labels_axis.dart
View File

@@ -25,10 +25,11 @@ class HiddenTicksAndLabelsAxis extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
HiddenTicksAndLabelsAxis(this.seriesList, {this.animate}); const HiddenTicksAndLabelsAxis(this.seriesList, {this.animate, Key key})
: super(key: key);
factory HiddenTicksAndLabelsAxis.withSampleData() { factory HiddenTicksAndLabelsAxis.withSampleData() {
return new HiddenTicksAndLabelsAxis( return HiddenTicksAndLabelsAxis(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class HiddenTicksAndLabelsAxis extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory HiddenTicksAndLabelsAxis.withRandomData() { factory HiddenTicksAndLabelsAxis.withRandomData() {
return new HiddenTicksAndLabelsAxis(_createRandomData()); return HiddenTicksAndLabelsAxis(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100), OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100), OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100), OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100), OrdinalSales('2017', random.nextInt(100) * 100),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -67,7 +68,7 @@ class HiddenTicksAndLabelsAxis extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
@@ -76,30 +77,30 @@ class HiddenTicksAndLabelsAxis extends StatelessWidget {
/// The NoneRenderSpec can still draw an axis line with /// The NoneRenderSpec can still draw an axis line with
/// showAxisLine=true. /// showAxisLine=true.
primaryMeasureAxis: primaryMeasureAxis:
new charts.NumericAxisSpec(renderSpec: new charts.NoneRenderSpec()), const charts.NumericAxisSpec(renderSpec: charts.NoneRenderSpec()),
/// This is an OrdinalAxisSpec to match up with BarChart's default /// This is an OrdinalAxisSpec to match up with BarChart's default
/// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for /// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
/// other charts). /// other charts).
domainAxis: new charts.OrdinalAxisSpec( domainAxis: const charts.OrdinalAxisSpec(
// Make sure that we draw the domain axis line. // Make sure that we draw the domain axis line.
showAxisLine: true, showAxisLine: true,
// But don't draw anything else. // But don't draw anything else.
renderSpec: new charts.NoneRenderSpec()), renderSpec: charts.NoneRenderSpec()),
); );
} }
/// Create series list with single series /// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', 5000), OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000), OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000), OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000), OrdinalSales('2017', 750000),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

60
web/charts/lib/axes/horizontal_bar_secondary_axis.dart
View File

@@ -39,10 +39,12 @@ class HorizontalBarChartWithSecondaryAxis extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
HorizontalBarChartWithSecondaryAxis(this.seriesList, {this.animate}); const HorizontalBarChartWithSecondaryAxis(this.seriesList,
{this.animate, Key key})
: super(key: key);
factory HorizontalBarChartWithSecondaryAxis.withSampleData() { factory HorizontalBarChartWithSecondaryAxis.withSampleData() {
return new HorizontalBarChartWithSecondaryAxis( return HorizontalBarChartWithSecondaryAxis(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -54,35 +56,35 @@ class HorizontalBarChartWithSecondaryAxis extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory HorizontalBarChartWithSecondaryAxis.withRandomData() { factory HorizontalBarChartWithSecondaryAxis.withRandomData() {
return new HorizontalBarChartWithSecondaryAxis(_createRandomData()); return HorizontalBarChartWithSecondaryAxis(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100), OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100), OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100), OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100), OrdinalSales('2017', random.nextInt(100) * 100),
]; ];
final losAngelesSalesData = [ final losAngelesSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData, data: globalSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Los Angeles Revenue', id: 'Los Angeles Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -98,7 +100,7 @@ class HorizontalBarChartWithSecondaryAxis extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// For horizontal bar charts, set the [vertical] flag to false. // For horizontal bar charts, set the [vertical] flag to false.
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
@@ -106,39 +108,39 @@ class HorizontalBarChartWithSecondaryAxis extends StatelessWidget {
// It is important when using both primary and secondary axes to choose // It is important when using both primary and secondary axes to choose
// the same number of ticks for both sides to get the gridlines to line // the same number of ticks for both sides to get the gridlines to line
// up. // up.
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
tickProviderSpec: tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 3)), charts.BasicNumericTickProviderSpec(desiredTickCount: 3)),
secondaryMeasureAxis: new charts.NumericAxisSpec( secondaryMeasureAxis: const charts.NumericAxisSpec(
tickProviderSpec: tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 3)), charts.BasicNumericTickProviderSpec(desiredTickCount: 3)),
); );
} }
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', 5000), OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000), OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000), OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000), OrdinalSales('2017', 750000),
]; ];
final losAngelesSalesData = [ final losAngelesSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData, data: globalSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Los Angeles Revenue', id: 'Los Angeles Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

63
web/charts/lib/axes/integer_only_measure_axis.dart
View File

@@ -29,11 +29,12 @@ class IntegerOnlyMeasureAxis extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
IntegerOnlyMeasureAxis(this.seriesList, {this.animate}); const IntegerOnlyMeasureAxis(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [TimeSeriesChart] with sample data and no transition. /// Creates a [TimeSeriesChart] with sample data and no transition.
factory IntegerOnlyMeasureAxis.withSampleData() { factory IntegerOnlyMeasureAxis.withSampleData() {
return new IntegerOnlyMeasureAxis( return IntegerOnlyMeasureAxis(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -45,29 +46,29 @@ class IntegerOnlyMeasureAxis extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory IntegerOnlyMeasureAxis.withRandomData() { factory IntegerOnlyMeasureAxis.withRandomData() {
return new IntegerOnlyMeasureAxis(_createRandomData()); return IntegerOnlyMeasureAxis(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() { static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextDouble().round()), MyRow(DateTime(2017, 9, 25), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 26), random.nextDouble().round()), MyRow(DateTime(2017, 9, 26), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 27), random.nextDouble().round()), MyRow(DateTime(2017, 9, 27), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 28), random.nextDouble().round()), MyRow(DateTime(2017, 9, 28), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 29), random.nextDouble().round()), MyRow(DateTime(2017, 9, 29), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 30), random.nextDouble().round()), MyRow(DateTime(2017, 9, 30), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 01), random.nextDouble().round()), MyRow(DateTime(2017, 10, 01), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 02), random.nextDouble().round()), MyRow(DateTime(2017, 10, 02), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 03), random.nextDouble().round()), MyRow(DateTime(2017, 10, 03), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 04), random.nextDouble().round()), MyRow(DateTime(2017, 10, 04), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 05), random.nextDouble().round()), MyRow(DateTime(2017, 10, 05), random.nextDouble().round()),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Headcount', id: 'Headcount',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.headcount, measureFn: (MyRow row, _) => row.headcount,
@@ -79,12 +80,12 @@ class IntegerOnlyMeasureAxis extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.TimeSeriesChart( return charts.TimeSeriesChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Provides a custom axis ensuring that the ticks are in whole numbers. // Provides a custom axis ensuring that the ticks are in whole numbers.
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
tickProviderSpec: new charts.BasicNumericTickProviderSpec( tickProviderSpec: charts.BasicNumericTickProviderSpec(
// Make sure we don't have values less than 1 as ticks // Make sure we don't have values less than 1 as ticks
// (ie: counts). // (ie: counts).
dataIsInWholeNumbers: true, dataIsInWholeNumbers: true,
@@ -97,21 +98,21 @@ class IntegerOnlyMeasureAxis extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() { static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), 0), MyRow(DateTime(2017, 9, 25), 0),
new MyRow(new DateTime(2017, 9, 26), 0), MyRow(DateTime(2017, 9, 26), 0),
new MyRow(new DateTime(2017, 9, 27), 0), MyRow(DateTime(2017, 9, 27), 0),
new MyRow(new DateTime(2017, 9, 28), 0), MyRow(DateTime(2017, 9, 28), 0),
new MyRow(new DateTime(2017, 9, 29), 0), MyRow(DateTime(2017, 9, 29), 0),
new MyRow(new DateTime(2017, 9, 30), 0), MyRow(DateTime(2017, 9, 30), 0),
new MyRow(new DateTime(2017, 10, 01), 1), MyRow(DateTime(2017, 10, 01), 1),
new MyRow(new DateTime(2017, 10, 02), 1), MyRow(DateTime(2017, 10, 02), 1),
new MyRow(new DateTime(2017, 10, 03), 1), MyRow(DateTime(2017, 10, 03), 1),
new MyRow(new DateTime(2017, 10, 04), 1), MyRow(DateTime(2017, 10, 04), 1),
new MyRow(new DateTime(2017, 10, 05), 1), MyRow(DateTime(2017, 10, 05), 1),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Headcount', id: 'Headcount',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.headcount, measureFn: (MyRow row, _) => row.headcount,

119
web/charts/lib/axes/line_disjoint_axis.dart
View File

@@ -31,11 +31,12 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
DisjointMeasureAxisLineChart(this.seriesList, {this.animate}); const DisjointMeasureAxisLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory DisjointMeasureAxisLineChart.withSampleData() { factory DisjointMeasureAxisLineChart.withSampleData() {
return new DisjointMeasureAxisLineChart( return DisjointMeasureAxisLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -47,58 +48,58 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory DisjointMeasureAxisLineChart.withRandomData() { factory DisjointMeasureAxisLineChart.withRandomData() {
return new DisjointMeasureAxisLineChart(_createRandomData()); return DisjointMeasureAxisLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearClicks, num>> _createRandomData() { static List<charts.Series<LinearClicks, num>> _createRandomData() {
final random = new Random(); final random = Random();
// The first three series contain similar data with different magnitudes. // The first three series contain similar data with different magnitudes.
// This demonstrates the ability to graph the trends in each series relative // This demonstrates the ability to graph the trends in each series relative
// to each other, without the largest magnitude series compressing the // to each other, without the largest magnitude series compressing the
// smallest. // smallest.
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearClicks(0, clickCount: random.nextInt(100)), LinearClicks(0, clickCount: random.nextInt(100)),
new LinearClicks(1, clickCount: random.nextInt(100)), LinearClicks(1, clickCount: random.nextInt(100)),
new LinearClicks(2, clickCount: random.nextInt(100)), LinearClicks(2, clickCount: random.nextInt(100)),
new LinearClicks(3, clickCount: random.nextInt(100)), LinearClicks(3, clickCount: random.nextInt(100)),
]; ];
final myFakeTabletData = [ final myFakeTabletData = [
new LinearClicks(0, clickCount: random.nextInt(100) * 100), LinearClicks(0, clickCount: random.nextInt(100) * 100),
new LinearClicks(1, clickCount: random.nextInt(100) * 100), LinearClicks(1, clickCount: random.nextInt(100) * 100),
new LinearClicks(2, clickCount: random.nextInt(100) * 100), LinearClicks(2, clickCount: random.nextInt(100) * 100),
new LinearClicks(3, clickCount: random.nextInt(100) * 100), LinearClicks(3, clickCount: random.nextInt(100) * 100),
]; ];
final myFakeMobileData = [ final myFakeMobileData = [
new LinearClicks(0, clickCount: random.nextInt(100) * 1000), LinearClicks(0, clickCount: random.nextInt(100) * 1000),
new LinearClicks(1, clickCount: random.nextInt(100) * 1000), LinearClicks(1, clickCount: random.nextInt(100) * 1000),
new LinearClicks(2, clickCount: random.nextInt(100) * 1000), LinearClicks(2, clickCount: random.nextInt(100) * 1000),
new LinearClicks(3, clickCount: random.nextInt(100) * 1000), LinearClicks(3, clickCount: random.nextInt(100) * 1000),
]; ];
// The fourth series renders with decimal values, representing a very // The fourth series renders with decimal values, representing a very
// different sort ratio-based data. If this was on the same axis as any of // different sort ratio-based data. If this was on the same axis as any of
// the other series, it would be squashed near zero. // the other series, it would be squashed near zero.
final myFakeClickRateData = [ final myFakeClickRateData = [
new LinearClicks(0, clickRate: .25), LinearClicks(0, clickRate: .25),
new LinearClicks(1, clickRate: .65), LinearClicks(1, clickRate: .65),
new LinearClicks(2, clickRate: .50), LinearClicks(2, clickRate: .50),
new LinearClicks(3, clickRate: .30), LinearClicks(3, clickRate: .30),
]; ];
return [ return [
// We render an empty series on the primary measure axis to ensure that // We render an empty series on the primary measure axis to ensure that
// the axis itself gets rendered. This helps us draw the gridlines on the // the axis itself gets rendered. This helps us draw the gridlines on the
// chart. // chart.
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Fake Series', id: 'Fake Series',
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount, measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: []), data: []),
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,
@@ -107,7 +108,7 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
) )
// Set the 'Desktop' series to use a disjoint axis. // Set the 'Desktop' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 1'), ..setAttribute(charts.measureAxisIdKey, 'axis 1'),
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,
@@ -116,7 +117,7 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
) )
// Set the 'Tablet' series to use a disjoint axis. // Set the 'Tablet' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 2'), ..setAttribute(charts.measureAxisIdKey, 'axis 2'),
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,
@@ -125,7 +126,7 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
) )
// Set the 'Mobile' series to use a disjoint axis. // Set the 'Mobile' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 3'), ..setAttribute(charts.measureAxisIdKey, 'axis 3'),
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Click Rate', id: 'Click Rate',
colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,
@@ -141,7 +142,7 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, return charts.LineChart(seriesList,
animate: animate, animate: animate,
// Configure a primary measure axis that will render gridlines across // Configure a primary measure axis that will render gridlines across
// the chart. This axis uses fake ticks with no labels to ensure that we // the chart. This axis uses fake ticks with no labels to ensure that we
@@ -149,15 +150,15 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
// //
// We do this because disjoint measure axes do not draw any tick // We do this because disjoint measure axes do not draw any tick
// elements on the chart. // elements on the chart.
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
tickProviderSpec: new charts.StaticNumericTickProviderSpec( tickProviderSpec: charts.StaticNumericTickProviderSpec(
// Create the ticks to be used the domain axis. // Create the ticks to be used the domain axis.
<charts.TickSpec<num>>[ <charts.TickSpec<num>>[
new charts.TickSpec(0, label: ''), charts.TickSpec(0, label: ''),
new charts.TickSpec(1, label: ''), charts.TickSpec(1, label: ''),
new charts.TickSpec(2, label: ''), charts.TickSpec(2, label: ''),
new charts.TickSpec(3, label: ''), charts.TickSpec(3, label: ''),
new charts.TickSpec(4, label: ''), charts.TickSpec(4, label: ''),
], ],
)), )),
// Create one disjoint measure axis per series on the chart. // Create one disjoint measure axis per series on the chart.
@@ -165,11 +166,11 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
// Disjoint measure axes will be used to scale the rendered data, // Disjoint measure axes will be used to scale the rendered data,
// without drawing any tick elements on either side of the chart. // without drawing any tick elements on either side of the chart.
disjointMeasureAxes: disjointMeasureAxes:
new LinkedHashMap<String, charts.NumericAxisSpec>.from({ LinkedHashMap<String, charts.NumericAxisSpec>.from({
'axis 1': new charts.NumericAxisSpec(), 'axis 1': const charts.NumericAxisSpec(),
'axis 2': new charts.NumericAxisSpec(), 'axis 2': const charts.NumericAxisSpec(),
'axis 3': new charts.NumericAxisSpec(), 'axis 3': const charts.NumericAxisSpec(),
'axis 4': new charts.NumericAxisSpec(), 'axis 4': const charts.NumericAxisSpec(),
})); }));
} }
@@ -180,46 +181,46 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
// to each other, without the largest magnitude series compressing the // to each other, without the largest magnitude series compressing the
// smallest. // smallest.
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearClicks(0, clickCount: 25), LinearClicks(0, clickCount: 25),
new LinearClicks(1, clickCount: 125), LinearClicks(1, clickCount: 125),
new LinearClicks(2, clickCount: 920), LinearClicks(2, clickCount: 920),
new LinearClicks(3, clickCount: 375), LinearClicks(3, clickCount: 375),
]; ];
final myFakeTabletData = [ final myFakeTabletData = [
new LinearClicks(0, clickCount: 375), LinearClicks(0, clickCount: 375),
new LinearClicks(1, clickCount: 1850), LinearClicks(1, clickCount: 1850),
new LinearClicks(2, clickCount: 9700), LinearClicks(2, clickCount: 9700),
new LinearClicks(3, clickCount: 5000), LinearClicks(3, clickCount: 5000),
]; ];
final myFakeMobileData = [ final myFakeMobileData = [
new LinearClicks(0, clickCount: 5000), LinearClicks(0, clickCount: 5000),
new LinearClicks(1, clickCount: 25000), LinearClicks(1, clickCount: 25000),
new LinearClicks(2, clickCount: 100000), LinearClicks(2, clickCount: 100000),
new LinearClicks(3, clickCount: 75000), LinearClicks(3, clickCount: 75000),
]; ];
// The fourth series renders with decimal values, representing a very // The fourth series renders with decimal values, representing a very
// different sort ratio-based data. If this was on the same axis as any of // different sort ratio-based data. If this was on the same axis as any of
// the other series, it would be squashed near zero. // the other series, it would be squashed near zero.
final myFakeClickRateData = [ final myFakeClickRateData = [
new LinearClicks(0, clickRate: .25), LinearClicks(0, clickRate: .25),
new LinearClicks(1, clickRate: .65), LinearClicks(1, clickRate: .65),
new LinearClicks(2, clickRate: .50), LinearClicks(2, clickRate: .50),
new LinearClicks(3, clickRate: .30), LinearClicks(3, clickRate: .30),
]; ];
return [ return [
// We render an empty series on the primary measure axis to ensure that // We render an empty series on the primary measure axis to ensure that
// the axis itself gets rendered. This helps us draw the gridlines on the // the axis itself gets rendered. This helps us draw the gridlines on the
// chart. // chart.
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Fake Series', id: 'Fake Series',
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount, measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: []), data: []),
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,
@@ -228,7 +229,7 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
) )
// Set the 'Desktop' series to use a disjoint axis. // Set the 'Desktop' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 1'), ..setAttribute(charts.measureAxisIdKey, 'axis 1'),
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,
@@ -237,7 +238,7 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
) )
// Set the 'Tablet' series to use a disjoint axis. // Set the 'Tablet' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 2'), ..setAttribute(charts.measureAxisIdKey, 'axis 2'),
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,
@@ -246,7 +247,7 @@ class DisjointMeasureAxisLineChart extends StatelessWidget {
) )
// Set the 'Mobile' series to use a disjoint axis. // Set the 'Mobile' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 3'), ..setAttribute(charts.measureAxisIdKey, 'axis 3'),
new charts.Series<LinearClicks, int>( charts.Series<LinearClicks, int>(
id: 'Click Rate', id: 'Click Rate',
colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year, domainFn: (LinearClicks clickCount, _) => clickCount.year,

35
web/charts/lib/axes/measure_axis_label_alignment.dart
View File

@@ -26,10 +26,11 @@ class MeasureAxisLabelAlignment extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
MeasureAxisLabelAlignment(this.seriesList, {this.animate}); const MeasureAxisLabelAlignment(this.seriesList, {this.animate, Key key})
: super(key: key);
factory MeasureAxisLabelAlignment.withSampleData() { factory MeasureAxisLabelAlignment.withSampleData() {
return new MeasureAxisLabelAlignment( return MeasureAxisLabelAlignment(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,22 +42,22 @@ class MeasureAxisLabelAlignment extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory MeasureAxisLabelAlignment.withRandomData() { factory MeasureAxisLabelAlignment.withRandomData() {
return new MeasureAxisLabelAlignment(_createRandomData()); return MeasureAxisLabelAlignment(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100), OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100), OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100), OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100), OrdinalSales('2017', random.nextInt(100) * 100),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -68,15 +69,15 @@ class MeasureAxisLabelAlignment extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
/// Customize the primary measure axis using a small tick renderer. /// Customize the primary measure axis using a small tick renderer.
/// Use String instead of num for ordinal domain axis /// Use String instead of num for ordinal domain axis
/// (typically bar charts). /// (typically bar charts).
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
renderSpec: new charts.GridlineRendererSpec( renderSpec: charts.GridlineRendererSpec(
// Display the measure axis labels below the gridline. // Display the measure axis labels below the gridline.
// //
// 'Before' & 'after' follow the axis value direction. // 'Before' & 'after' follow the axis value direction.
@@ -96,14 +97,14 @@ class MeasureAxisLabelAlignment extends StatelessWidget {
/// Create series list with single series /// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', 5000), OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000), OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000), OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000), OrdinalSales('2017', 750000),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

63
web/charts/lib/axes/nonzero_bound_measure_axis.dart
View File

@@ -25,11 +25,12 @@ class NonzeroBoundMeasureAxis extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
NonzeroBoundMeasureAxis(this.seriesList, {this.animate}); const NonzeroBoundMeasureAxis(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [TimeSeriesChart] with sample data and no transition. /// Creates a [TimeSeriesChart] with sample data and no transition.
factory NonzeroBoundMeasureAxis.withSampleData() { factory NonzeroBoundMeasureAxis.withSampleData() {
return new NonzeroBoundMeasureAxis( return NonzeroBoundMeasureAxis(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,29 +42,29 @@ class NonzeroBoundMeasureAxis extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory NonzeroBoundMeasureAxis.withRandomData() { factory NonzeroBoundMeasureAxis.withRandomData() {
return new NonzeroBoundMeasureAxis(_createRandomData()); return NonzeroBoundMeasureAxis(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() { static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextInt(100) + 100), MyRow(DateTime(2017, 9, 25), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 26), random.nextInt(100) + 100), MyRow(DateTime(2017, 9, 26), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 27), random.nextInt(100) + 100), MyRow(DateTime(2017, 9, 27), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 28), random.nextInt(100) + 100), MyRow(DateTime(2017, 9, 28), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 29), random.nextInt(100) + 100), MyRow(DateTime(2017, 9, 29), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 30), random.nextInt(100) + 100), MyRow(DateTime(2017, 9, 30), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 01), random.nextInt(100) + 100), MyRow(DateTime(2017, 10, 01), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 02), random.nextInt(100) + 100), MyRow(DateTime(2017, 10, 02), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 03), random.nextInt(100) + 100), MyRow(DateTime(2017, 10, 03), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 04), random.nextInt(100) + 100), MyRow(DateTime(2017, 10, 04), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 05), random.nextInt(100) + 100), MyRow(DateTime(2017, 10, 05), random.nextInt(100) + 100),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Headcount', id: 'Headcount',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.headcount, measureFn: (MyRow row, _) => row.headcount,
@@ -75,33 +76,33 @@ class NonzeroBoundMeasureAxis extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.TimeSeriesChart(seriesList, return charts.TimeSeriesChart(seriesList,
animate: animate, animate: animate,
// Provide a tickProviderSpec which does NOT require that zero is // Provide a tickProviderSpec which does NOT require that zero is
// included. // included.
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
tickProviderSpec: tickProviderSpec:
new charts.BasicNumericTickProviderSpec(zeroBound: false))); charts.BasicNumericTickProviderSpec(zeroBound: false)));
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() { static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [ final data = [
new MyRow(new DateTime(2017, 9, 25), 106), MyRow(DateTime(2017, 9, 25), 106),
new MyRow(new DateTime(2017, 9, 26), 108), MyRow(DateTime(2017, 9, 26), 108),
new MyRow(new DateTime(2017, 9, 27), 106), MyRow(DateTime(2017, 9, 27), 106),
new MyRow(new DateTime(2017, 9, 28), 109), MyRow(DateTime(2017, 9, 28), 109),
new MyRow(new DateTime(2017, 9, 29), 111), MyRow(DateTime(2017, 9, 29), 111),
new MyRow(new DateTime(2017, 9, 30), 115), MyRow(DateTime(2017, 9, 30), 115),
new MyRow(new DateTime(2017, 10, 01), 125), MyRow(DateTime(2017, 10, 01), 125),
new MyRow(new DateTime(2017, 10, 02), 133), MyRow(DateTime(2017, 10, 02), 133),
new MyRow(new DateTime(2017, 10, 03), 127), MyRow(DateTime(2017, 10, 03), 127),
new MyRow(new DateTime(2017, 10, 04), 131), MyRow(DateTime(2017, 10, 04), 131),
new MyRow(new DateTime(2017, 10, 05), 123), MyRow(DateTime(2017, 10, 05), 123),
]; ];
return [ return [
new charts.Series<MyRow, DateTime>( charts.Series<MyRow, DateTime>(
id: 'Headcount', id: 'Headcount',
domainFn: (MyRow row, _) => row.timeStamp, domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.headcount, measureFn: (MyRow row, _) => row.headcount,

65
web/charts/lib/axes/numeric_initial_viewport.dart
View File

@@ -32,11 +32,12 @@ class NumericInitialViewport extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
NumericInitialViewport(this.seriesList, {this.animate}); const NumericInitialViewport(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory NumericInitialViewport.withSampleData() { factory NumericInitialViewport.withSampleData() {
return new NumericInitialViewport( return NumericInitialViewport(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -48,29 +49,29 @@ class NumericInitialViewport extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory NumericInitialViewport.withRandomData() { factory NumericInitialViewport.withRandomData() {
return new NumericInitialViewport(_createRandomData()); return NumericInitialViewport(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
new LinearSales(4, random.nextInt(100)), LinearSales(4, random.nextInt(100)),
new LinearSales(5, random.nextInt(100)), LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)), LinearSales(6, random.nextInt(100)),
new LinearSales(7, random.nextInt(100)), LinearSales(7, random.nextInt(100)),
new LinearSales(8, random.nextInt(100)), LinearSales(8, random.nextInt(100)),
new LinearSales(9, random.nextInt(100)), LinearSales(9, random.nextInt(100)),
new LinearSales(10, random.nextInt(100)), LinearSales(10, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -83,37 +84,37 @@ class NumericInitialViewport extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart( return charts.LineChart(
seriesList, seriesList,
animate: animate, animate: animate,
domainAxis: new charts.NumericAxisSpec( domainAxis: const charts.NumericAxisSpec(
// Set the initial viewport by providing a new AxisSpec with the // Set the initial viewport by providing a new AxisSpec with the
// desired viewport, in NumericExtents. // desired viewport, in NumericExtents.
viewport: new charts.NumericExtents(3.0, 7.0)), viewport: charts.NumericExtents(3.0, 7.0)),
// Optionally add a pan or pan and zoom behavior. // Optionally add a pan or pan and zoom behavior.
// If pan/zoom is not added, the viewport specified remains the viewport. // If pan/zoom is not added, the viewport specified remains the viewport.
behaviors: [new charts.PanAndZoomBehavior()], behaviors: [charts.PanAndZoomBehavior()],
); );
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
new LinearSales(4, 55), LinearSales(4, 55),
new LinearSales(5, 66), LinearSales(5, 66),
new LinearSales(6, 110), LinearSales(6, 110),
new LinearSales(7, 70), LinearSales(7, 70),
new LinearSales(8, 20), LinearSales(8, 20),
new LinearSales(9, 25), LinearSales(9, 25),
new LinearSales(10, 45), LinearSales(10, 45),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

89
web/charts/lib/axes/ordinal_initial_viewport.dart
View File

@@ -32,11 +32,12 @@ class OrdinalInitialViewport extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
OrdinalInitialViewport(this.seriesList, {this.animate}); const OrdinalInitialViewport(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory OrdinalInitialViewport.withSampleData() { factory OrdinalInitialViewport.withSampleData() {
return new OrdinalInitialViewport( return OrdinalInitialViewport(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -48,35 +49,35 @@ class OrdinalInitialViewport extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory OrdinalInitialViewport.withRandomData() { factory OrdinalInitialViewport.withRandomData() {
return new OrdinalInitialViewport(_createRandomData()); return OrdinalInitialViewport(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
new OrdinalSales('2018', random.nextInt(100)), OrdinalSales('2018', random.nextInt(100)),
new OrdinalSales('2019', random.nextInt(100)), OrdinalSales('2019', random.nextInt(100)),
new OrdinalSales('2020', random.nextInt(100)), OrdinalSales('2020', random.nextInt(100)),
new OrdinalSales('2021', random.nextInt(100)), OrdinalSales('2021', random.nextInt(100)),
new OrdinalSales('2022', random.nextInt(100)), OrdinalSales('2022', random.nextInt(100)),
new OrdinalSales('2023', random.nextInt(100)), OrdinalSales('2023', random.nextInt(100)),
new OrdinalSales('2024', random.nextInt(100)), OrdinalSales('2024', random.nextInt(100)),
new OrdinalSales('2025', random.nextInt(100)), OrdinalSales('2025', random.nextInt(100)),
new OrdinalSales('2026', random.nextInt(100)), OrdinalSales('2026', random.nextInt(100)),
new OrdinalSales('2027', random.nextInt(100)), OrdinalSales('2027', random.nextInt(100)),
new OrdinalSales('2028', random.nextInt(100)), OrdinalSales('2028', random.nextInt(100)),
new OrdinalSales('2029', random.nextInt(100)), OrdinalSales('2029', random.nextInt(100)),
new OrdinalSales('2030', random.nextInt(100)), OrdinalSales('2030', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -89,43 +90,43 @@ class OrdinalInitialViewport extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Set the initial viewport by providing a new AxisSpec with the // Set the initial viewport by providing a new AxisSpec with the
// desired viewport: a starting domain and the data size. // desired viewport: a starting domain and the data size.
domainAxis: new charts.OrdinalAxisSpec( domainAxis:
viewport: new charts.OrdinalViewport('2018', 4)), charts.OrdinalAxisSpec(viewport: charts.OrdinalViewport('2018', 4)),
// Optionally add a pan or pan and zoom behavior. // Optionally add a pan or pan and zoom behavior.
// If pan/zoom is not added, the viewport specified remains the viewport. // If pan/zoom is not added, the viewport specified remains the viewport.
behaviors: [new charts.PanAndZoomBehavior()], behaviors: [charts.PanAndZoomBehavior()],
); );
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
new OrdinalSales('2018', 33), OrdinalSales('2018', 33),
new OrdinalSales('2019', 80), OrdinalSales('2019', 80),
new OrdinalSales('2020', 21), OrdinalSales('2020', 21),
new OrdinalSales('2021', 77), OrdinalSales('2021', 77),
new OrdinalSales('2022', 8), OrdinalSales('2022', 8),
new OrdinalSales('2023', 12), OrdinalSales('2023', 12),
new OrdinalSales('2024', 42), OrdinalSales('2024', 42),
new OrdinalSales('2025', 70), OrdinalSales('2025', 70),
new OrdinalSales('2026', 77), OrdinalSales('2026', 77),
new OrdinalSales('2027', 55), OrdinalSales('2027', 55),
new OrdinalSales('2028', 19), OrdinalSales('2028', 19),
new OrdinalSales('2029', 66), OrdinalSales('2029', 66),
new OrdinalSales('2030', 27), OrdinalSales('2030', 27),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

35
web/charts/lib/axes/short_tick_length_axis.dart
View File

@@ -30,10 +30,11 @@ class ShortTickLengthAxis extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
ShortTickLengthAxis(this.seriesList, {this.animate}); const ShortTickLengthAxis(this.seriesList, {this.animate, Key key})
: super(key: key);
factory ShortTickLengthAxis.withSampleData() { factory ShortTickLengthAxis.withSampleData() {
return new ShortTickLengthAxis( return ShortTickLengthAxis(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -45,22 +46,22 @@ class ShortTickLengthAxis extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory ShortTickLengthAxis.withRandomData() { factory ShortTickLengthAxis.withRandomData() {
return new ShortTickLengthAxis(_createRandomData()); return ShortTickLengthAxis(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100), OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100), OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100), OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100), OrdinalSales('2017', random.nextInt(100) * 100),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -72,15 +73,15 @@ class ShortTickLengthAxis extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
/// Customize the primary measure axis using a small tick renderer. /// Customize the primary measure axis using a small tick renderer.
/// Note: use String instead of num for ordinal domain axis /// Note: use String instead of num for ordinal domain axis
/// (typically bar charts). /// (typically bar charts).
primaryMeasureAxis: new charts.NumericAxisSpec( primaryMeasureAxis: const charts.NumericAxisSpec(
renderSpec: new charts.SmallTickRendererSpec( renderSpec: charts.SmallTickRendererSpec(
// Tick and Label styling here. // Tick and Label styling here.
)), )),
); );
@@ -89,14 +90,14 @@ class ShortTickLengthAxis extends StatelessWidget {
/// Create series list with single series /// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', 5000), OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000), OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000), OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000), OrdinalSales('2017', 750000),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

48
web/charts/lib/axes/statically_provided_ticks.dart
View File

@@ -37,10 +37,11 @@ class StaticallyProvidedTicks extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
StaticallyProvidedTicks(this.seriesList, {this.animate}); const StaticallyProvidedTicks(this.seriesList, {this.animate, Key key})
: super(key: key);
factory StaticallyProvidedTicks.withSampleData() { factory StaticallyProvidedTicks.withSampleData() {
return new StaticallyProvidedTicks( return StaticallyProvidedTicks(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -52,22 +53,22 @@ class StaticallyProvidedTicks extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory StaticallyProvidedTicks.withRandomData() { factory StaticallyProvidedTicks.withRandomData() {
return new StaticallyProvidedTicks(_createRandomData()); return StaticallyProvidedTicks(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100), OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100), OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100), OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100), OrdinalSales('2017', random.nextInt(100) * 100),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -81,41 +82,40 @@ class StaticallyProvidedTicks extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Create the ticks to be used the domain axis. // Create the ticks to be used the domain axis.
final staticTicks = <charts.TickSpec<String>>[ final staticTicks = <charts.TickSpec<String>>[
new charts.TickSpec( const charts.TickSpec(
// Value must match the domain value. // Value must match the domain value.
'2014', '2014',
// Optional label for this tick, defaults to domain value if not set. // Optional label for this tick, defaults to domain value if not set.
label: 'Year 2014', label: 'Year 2014',
// The styling for this tick. // The styling for this tick.
style: new charts.TextStyleSpec( style: charts.TextStyleSpec(
color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))), color: charts.Color(r: 0x4C, g: 0xAF, b: 0x50))),
// If no text style is specified - the style from renderSpec will be used // If no text style is specified - the style from renderSpec will be used
// if one is specified. // if one is specified.
new charts.TickSpec('2015'), const charts.TickSpec('2015'),
new charts.TickSpec('2016'), const charts.TickSpec('2016'),
new charts.TickSpec('2017'), const charts.TickSpec('2017'),
]; ];
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
domainAxis: new charts.OrdinalAxisSpec( domainAxis: charts.OrdinalAxisSpec(
tickProviderSpec: tickProviderSpec: charts.StaticOrdinalTickProviderSpec(staticTicks)),
new charts.StaticOrdinalTickProviderSpec(staticTicks)),
); );
} }
/// Create series list with single series /// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2014', 5000), OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000), OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000), OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000), OrdinalSales('2017', 750000),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

119
web/charts/lib/bar_chart/bar_gallery.dart
View File

@@ -36,121 +36,120 @@ import 'spark_bar.dart';
List<GalleryScaffold> buildGallery() { List<GalleryScaffold> buildGallery() {
return [ return [
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Simple Bar Chart', title: 'Simple Bar Chart',
subtitle: 'Simple bar chart with a single series', subtitle: 'Simple bar chart with a single series',
childBuilder: () => new SimpleBarChart.withRandomData(), childBuilder: () => SimpleBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Stacked Bar Chart', title: 'Stacked Bar Chart',
subtitle: 'Stacked bar chart with multiple series', subtitle: 'Stacked bar chart with multiple series',
childBuilder: () => new StackedBarChart.withRandomData(), childBuilder: () => StackedBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Grouped Bar Chart', title: 'Grouped Bar Chart',
subtitle: 'Grouped bar chart with multiple series', subtitle: 'Grouped bar chart with multiple series',
childBuilder: () => new GroupedBarChart.withRandomData(), childBuilder: () => GroupedBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Grouped Stacked Bar Chart', title: 'Grouped Stacked Bar Chart',
subtitle: 'Grouped and stacked bar chart with multiple series', subtitle: 'Grouped and stacked bar chart with multiple series',
childBuilder: () => new GroupedStackedBarChart.withRandomData(), childBuilder: () => GroupedStackedBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Grouped Bar Target Line Chart', title: 'Grouped Bar Target Line Chart',
subtitle: 'Grouped bar target line chart with multiple series', subtitle: 'Grouped bar target line chart with multiple series',
childBuilder: () => new GroupedBarTargetLineChart.withRandomData(), childBuilder: () => GroupedBarTargetLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Grouped Bar Single Target Line Chart', title: 'Grouped Bar Single Target Line Chart',
subtitle: subtitle:
'Grouped bar target line chart with multiple series and a single target', 'Grouped bar target line chart with multiple series and a single target',
childBuilder: () => new GroupedBarSingleTargetLineChart.withRandomData(), childBuilder: () => GroupedBarSingleTargetLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Stacked Bar Target Line Chart', title: 'Stacked Bar Target Line Chart',
subtitle: 'Stacked bar target line chart with multiple series', subtitle: 'Stacked bar target line chart with multiple series',
childBuilder: () => new StackedBarTargetLineChart.withRandomData(), childBuilder: () => StackedBarTargetLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Transform.rotate( listTileIcon: Transform.rotate(
angle: 1.5708, child: new Icon(Icons.insert_chart)), angle: 1.5708, child: const Icon(Icons.insert_chart)),
title: 'Horizontal Bar Chart', title: 'Horizontal Bar Chart',
subtitle: 'Horizontal bar chart with a single series', subtitle: 'Horizontal bar chart with a single series',
childBuilder: () => new HorizontalBarChart.withRandomData(), childBuilder: () => HorizontalBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Transform.rotate( listTileIcon: Transform.rotate(
angle: 1.5708, child: new Icon(Icons.insert_chart)), angle: 1.5708, child: const Icon(Icons.insert_chart)),
title: 'Stacked Horizontal Bar Chart', title: 'Stacked Horizontal Bar Chart',
subtitle: 'Stacked horizontal bar chart with multiple series', subtitle: 'Stacked horizontal bar chart with multiple series',
childBuilder: () => new StackedHorizontalBarChart.withRandomData(), childBuilder: () => StackedHorizontalBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Transform.rotate( listTileIcon: Transform.rotate(
angle: 1.5708, child: new Icon(Icons.insert_chart)), angle: 1.5708, child: const Icon(Icons.insert_chart)),
title: 'Horizontal Bar Chart with Bar Labels', title: 'Horizontal Bar Chart with Bar Labels',
subtitle: 'Horizontal bar chart with a single series and bar labels', subtitle: 'Horizontal bar chart with a single series and bar labels',
childBuilder: () => new HorizontalBarLabelChart.withRandomData(), childBuilder: () => HorizontalBarLabelChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Transform.rotate( listTileIcon: Transform.rotate(
angle: 1.5708, child: new Icon(Icons.insert_chart)), angle: 1.5708, child: const Icon(Icons.insert_chart)),
title: 'Horizontal Bar Chart with Custom Bar Labels', title: 'Horizontal Bar Chart with Custom Bar Labels',
subtitle: 'Bar labels with customized styling', subtitle: 'Bar labels with customized styling',
childBuilder: () => new HorizontalBarLabelCustomChart.withRandomData(), childBuilder: () => HorizontalBarLabelCustomChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Spark Bar Chart', title: 'Spark Bar Chart',
subtitle: 'Spark Bar Chart', subtitle: 'Spark Bar Chart',
childBuilder: () => new SparkBar.withRandomData(), childBuilder: () => SparkBar.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Grouped Fill Color Bar Chart', title: 'Grouped Fill Color Bar Chart',
subtitle: 'Grouped bar chart with fill colors', subtitle: 'Grouped bar chart with fill colors',
childBuilder: () => new GroupedFillColorBarChart.withRandomData(), childBuilder: () => GroupedFillColorBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Stacked Fill Color Bar Chart', title: 'Stacked Fill Color Bar Chart',
subtitle: 'Stacked bar chart with fill colors', subtitle: 'Stacked bar chart with fill colors',
childBuilder: () => new StackedFillColorBarChart.withRandomData(), childBuilder: () => StackedFillColorBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Pattern Forward Hatch Bar Chart', title: 'Pattern Forward Hatch Bar Chart',
subtitle: 'Pattern Forward Hatch Bar Chart', subtitle: 'Pattern Forward Hatch Bar Chart',
childBuilder: () => new PatternForwardHatchBarChart.withRandomData(), childBuilder: () => PatternForwardHatchBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Transform.rotate( listTileIcon: Transform.rotate(
angle: 1.5708, child: new Icon(Icons.insert_chart)), angle: 1.5708, child: const Icon(Icons.insert_chart)),
title: 'Horizontal Pattern Forward Hatch Bar Chart', title: 'Horizontal Pattern Forward Hatch Bar Chart',
subtitle: 'Horizontal Pattern Forward Hatch Bar Chart', subtitle: 'Horizontal Pattern Forward Hatch Bar Chart',
childBuilder: () => childBuilder: () =>
new HorizontalPatternForwardHatchBarChart.withRandomData(), HorizontalPatternForwardHatchBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Weight Pattern Bar Chart', title: 'Weight Pattern Bar Chart',
subtitle: 'Grouped and stacked bar chart with a weight pattern', subtitle: 'Grouped and stacked bar chart with a weight pattern',
childBuilder: () => childBuilder: () => GroupedStackedWeightPatternBarChart.withRandomData(),
new GroupedStackedWeightPatternBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Bar Chart with custom bar radius', title: 'Bar Chart with custom bar radius',
subtitle: 'Custom rounded bar corners', subtitle: 'Custom rounded bar corners',
childBuilder: () => new CustomRoundedBars.withRandomData(), childBuilder: () => CustomRoundedBars.withRandomData(),
), ),
]; ];
} }

33
web/charts/lib/bar_chart/custom_rounded_bars.dart
View File

@@ -24,11 +24,12 @@ class CustomRoundedBars extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
CustomRoundedBars(this.seriesList, {this.animate}); const CustomRoundedBars(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with custom rounded bars. /// Creates a [BarChart] with custom rounded bars.
factory CustomRoundedBars.withSampleData() { factory CustomRoundedBars.withSampleData() {
return new CustomRoundedBars( return CustomRoundedBars(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class CustomRoundedBars extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory CustomRoundedBars.withRandomData() { factory CustomRoundedBars.withRandomData() {
return new CustomRoundedBars(_createRandomData()); return CustomRoundedBars(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -68,10 +69,10 @@ class CustomRoundedBars extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
defaultRenderer: new charts.BarRendererConfig( defaultRenderer: charts.BarRendererConfig(
// By default, bar renderer will draw rounded bars with a constant // By default, bar renderer will draw rounded bars with a constant
// radius of 30. // radius of 30.
// To not have any rounded corners, use [NoCornerStrategy] // To not have any rounded corners, use [NoCornerStrategy]
@@ -83,14 +84,14 @@ class CustomRoundedBars extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

71
web/charts/lib/bar_chart/grouped.dart
View File

@@ -24,10 +24,11 @@ class GroupedBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
GroupedBarChart(this.seriesList, {this.animate}); const GroupedBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
factory GroupedBarChart.withSampleData() { factory GroupedBarChart.withSampleData() {
return new GroupedBarChart( return GroupedBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -39,48 +40,48 @@ class GroupedBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory GroupedBarChart.withRandomData() { factory GroupedBarChart.withRandomData() {
return new GroupedBarChart(_createRandomData()); return GroupedBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -92,7 +93,7 @@ class GroupedBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
@@ -102,40 +103,40 @@ class GroupedBarChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

73
web/charts/lib/bar_chart/grouped_fill_color.dart
View File

@@ -26,10 +26,11 @@ class GroupedFillColorBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
GroupedFillColorBarChart(this.seriesList, {this.animate}); const GroupedFillColorBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
factory GroupedFillColorBarChart.withSampleData() { factory GroupedFillColorBarChart.withSampleData() {
return new GroupedFillColorBarChart( return GroupedFillColorBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,37 +42,37 @@ class GroupedFillColorBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory GroupedFillColorBarChart.withRandomData() { factory GroupedFillColorBarChart.withRandomData() {
return new GroupedFillColorBarChart(_createRandomData()); return GroupedFillColorBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
// Blue bars with a lighter center color. // Blue bars with a lighter center color.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -82,7 +83,7 @@ class GroupedFillColorBarChart extends StatelessWidget {
), ),
// Solid red bars. Fill color will default to the series color if no // Solid red bars. Fill color will default to the series color if no
// fillColorFn is configured. // fillColorFn is configured.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -90,7 +91,7 @@ class GroupedFillColorBarChart extends StatelessWidget {
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
), ),
// Hollow green bars. // Hollow green bars.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -104,11 +105,11 @@ class GroupedFillColorBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Configure a stroke width to enable borders on the bars. // Configure a stroke width to enable borders on the bars.
defaultRenderer: new charts.BarRendererConfig( defaultRenderer: charts.BarRendererConfig(
groupingType: charts.BarGroupingType.grouped, strokeWidthPx: 2.0), groupingType: charts.BarGroupingType.grouped, strokeWidthPx: 2.0),
); );
} }
@@ -116,29 +117,29 @@ class GroupedFillColorBarChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
// Blue bars with a lighter center color. // Blue bars with a lighter center color.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -149,7 +150,7 @@ class GroupedFillColorBarChart extends StatelessWidget {
), ),
// Solid red bars. Fill color will default to the series color if no // Solid red bars. Fill color will default to the series color if no
// fillColorFn is configured. // fillColorFn is configured.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
@@ -157,7 +158,7 @@ class GroupedFillColorBarChart extends StatelessWidget {
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
), ),
// Hollow green bars. // Hollow green bars.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

94
web/charts/lib/bar_chart/grouped_single_target_line.dart
View File

@@ -24,10 +24,12 @@ class GroupedBarSingleTargetLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
GroupedBarSingleTargetLineChart(this.seriesList, {this.animate}); const GroupedBarSingleTargetLineChart(this.seriesList,
{this.animate, Key key})
: super(key: key);
factory GroupedBarSingleTargetLineChart.withSampleData() { factory GroupedBarSingleTargetLineChart.withSampleData() {
return new GroupedBarSingleTargetLineChart( return GroupedBarSingleTargetLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -39,58 +41,58 @@ class GroupedBarSingleTargetLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory GroupedBarSingleTargetLineChart.withRandomData() { factory GroupedBarSingleTargetLineChart.withRandomData() {
return new GroupedBarSingleTargetLineChart(_createRandomData()); return GroupedBarSingleTargetLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final targetLineData = [ final targetLineData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData), data: desktopSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData), data: tableSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData), data: mobileSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop Target Line', id: 'Desktop Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -103,11 +105,11 @@ class GroupedBarSingleTargetLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart(seriesList, return charts.BarChart(seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
customSeriesRenderers: [ customSeriesRenderers: [
new charts.BarTargetLineRendererConfig( charts.BarTargetLineRendererConfig(
// ID used to link series to this renderer. // ID used to link series to this renderer.
customRendererId: 'customTargetLine', customRendererId: 'customTargetLine',
groupingType: charts.BarGroupingType.grouped) groupingType: charts.BarGroupingType.grouped)
@@ -117,50 +119,50 @@ class GroupedBarSingleTargetLineChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final targetLineData = [ final targetLineData = [
new OrdinalSales('2014', 30), OrdinalSales('2014', 30),
new OrdinalSales('2015', 55), OrdinalSales('2015', 55),
new OrdinalSales('2016', 15), OrdinalSales('2016', 15),
new OrdinalSales('2017', 25), OrdinalSales('2017', 25),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData), data: desktopSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData), data: tableSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData), data: mobileSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop Target Line', id: 'Desktop Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

131
web/charts/lib/bar_chart/grouped_stacked.dart
View File

@@ -24,10 +24,11 @@ class GroupedStackedBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
GroupedStackedBarChart(this.seriesList, {this.animate}); const GroupedStackedBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
factory GroupedStackedBarChart.withSampleData() { factory GroupedStackedBarChart.withSampleData() {
return new GroupedStackedBarChart( return GroupedStackedBarChart(
createSampleData(), createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -39,92 +40,92 @@ class GroupedStackedBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory GroupedStackedBarChart.withRandomData() { factory GroupedStackedBarChart.withRandomData() {
return new GroupedStackedBarChart(_createRandomData()); return GroupedStackedBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesDataA = [ final desktopSalesDataA = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesDataA = [ final tableSalesDataA = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesDataA = [ final mobileSalesDataA = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final desktopSalesDataB = [ final desktopSalesDataB = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesDataB = [ final tableSalesDataB = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesDataB = [ final mobileSalesDataB = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop A', id: 'Desktop A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataA, data: desktopSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet A', id: 'Tablet A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataA, data: tableSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile A', id: 'Mobile A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesDataA, data: mobileSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop B', id: 'Desktop B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataB, data: desktopSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet B', id: 'Tablet B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataB, data: tableSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile B', id: 'Mobile B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -137,7 +138,7 @@ class GroupedStackedBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.groupedStacked, barGroupingType: charts.BarGroupingType.groupedStacked,
@@ -147,84 +148,84 @@ class GroupedStackedBarChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> createSampleData() { static List<charts.Series<OrdinalSales, String>> createSampleData() {
final desktopSalesDataA = [ final desktopSalesDataA = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesDataA = [ final tableSalesDataA = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesDataA = [ final mobileSalesDataA = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final desktopSalesDataB = [ final desktopSalesDataB = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesDataB = [ final tableSalesDataB = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesDataB = [ final mobileSalesDataB = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop A', id: 'Desktop A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataA, data: desktopSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet A', id: 'Tablet A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataA, data: tableSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile A', id: 'Mobile A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesDataA, data: mobileSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop B', id: 'Desktop B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataB, data: desktopSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet B', id: 'Tablet B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataB, data: tableSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile B', id: 'Mobile B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

134
web/charts/lib/bar_chart/grouped_stacked_weight_pattern.dart
View File

@@ -28,10 +28,12 @@ class GroupedStackedWeightPatternBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
GroupedStackedWeightPatternBarChart(this.seriesList, {this.animate}); const GroupedStackedWeightPatternBarChart(this.seriesList,
{this.animate, Key key})
: super(key: key);
factory GroupedStackedWeightPatternBarChart.withSampleData() { factory GroupedStackedWeightPatternBarChart.withSampleData() {
return new GroupedStackedWeightPatternBarChart( return GroupedStackedWeightPatternBarChart(
createSampleData(), createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -43,92 +45,92 @@ class GroupedStackedWeightPatternBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory GroupedStackedWeightPatternBarChart.withRandomData() { factory GroupedStackedWeightPatternBarChart.withRandomData() {
return new GroupedStackedWeightPatternBarChart(_createRandomData()); return GroupedStackedWeightPatternBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesDataA = [ final desktopSalesDataA = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesDataA = [ final tableSalesDataA = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesDataA = [ final mobileSalesDataA = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final desktopSalesDataB = [ final desktopSalesDataB = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesDataB = [ final tableSalesDataB = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesDataB = [ final mobileSalesDataB = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop A', id: 'Desktop A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataA, data: desktopSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet A', id: 'Tablet A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataA, data: tableSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile A', id: 'Mobile A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesDataA, data: mobileSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop B', id: 'Desktop B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataB, data: desktopSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet B', id: 'Tablet B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataB, data: tableSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile B', id: 'Mobile B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -141,7 +143,7 @@ class GroupedStackedWeightPatternBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Configure the bar renderer in grouped stacked rendering mode with a // Configure the bar renderer in grouped stacked rendering mode with a
@@ -149,7 +151,7 @@ class GroupedStackedWeightPatternBarChart extends StatelessWidget {
// //
// The first stack of bars in each group is configured to be twice as wide // The first stack of bars in each group is configured to be twice as wide
// as the second stack of bars in each group. // as the second stack of bars in each group.
defaultRenderer: new charts.BarRendererConfig( defaultRenderer: charts.BarRendererConfig(
groupingType: charts.BarGroupingType.groupedStacked, groupingType: charts.BarGroupingType.groupedStacked,
weightPattern: [2, 1], weightPattern: [2, 1],
), ),
@@ -159,84 +161,84 @@ class GroupedStackedWeightPatternBarChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> createSampleData() { static List<charts.Series<OrdinalSales, String>> createSampleData() {
final desktopSalesDataA = [ final desktopSalesDataA = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesDataA = [ final tableSalesDataA = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesDataA = [ final mobileSalesDataA = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final desktopSalesDataB = [ final desktopSalesDataB = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesDataB = [ final tableSalesDataB = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesDataB = [ final mobileSalesDataB = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop A', id: 'Desktop A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataA, data: desktopSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet A', id: 'Tablet A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataA, data: tableSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile A', id: 'Mobile A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesDataA, data: mobileSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop B', id: 'Desktop B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataB, data: desktopSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet B', id: 'Tablet B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataB, data: tableSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile B', id: 'Mobile B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

133
web/charts/lib/bar_chart/grouped_target_line.dart
View File

@@ -24,10 +24,11 @@ class GroupedBarTargetLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
GroupedBarTargetLineChart(this.seriesList, {this.animate}); const GroupedBarTargetLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
factory GroupedBarTargetLineChart.withSampleData() { factory GroupedBarTargetLineChart.withSampleData() {
return new GroupedBarTargetLineChart( return GroupedBarTargetLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -39,75 +40,75 @@ class GroupedBarTargetLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory GroupedBarTargetLineChart.withRandomData() { factory GroupedBarTargetLineChart.withRandomData() {
return new GroupedBarTargetLineChart(_createRandomData()); return GroupedBarTargetLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final desktopTargetLineData = [ final desktopTargetLineData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableTargetLineData = [ final tableTargetLineData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileTargetLineData = [ final mobileTargetLineData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop Target Line', id: 'Desktop Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -115,7 +116,7 @@ class GroupedBarTargetLineChart extends StatelessWidget {
) )
// Configure our custom bar target renderer for this series. // Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customTargetLine'), ..setAttribute(charts.rendererIdKey, 'customTargetLine'),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet Target Line', id: 'Tablet Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -123,7 +124,7 @@ class GroupedBarTargetLineChart extends StatelessWidget {
) )
// Configure our custom bar target renderer for this series. // Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customTargetLine'), ..setAttribute(charts.rendererIdKey, 'customTargetLine'),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile Target Line', id: 'Mobile Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -137,11 +138,11 @@ class GroupedBarTargetLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart(seriesList, return charts.BarChart(seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
customSeriesRenderers: [ customSeriesRenderers: [
new charts.BarTargetLineRendererConfig<String>( charts.BarTargetLineRendererConfig<String>(
// ID used to link series to this renderer. // ID used to link series to this renderer.
customRendererId: 'customTargetLine', customRendererId: 'customTargetLine',
groupingType: charts.BarGroupingType.grouped) groupingType: charts.BarGroupingType.grouped)
@@ -151,67 +152,67 @@ class GroupedBarTargetLineChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final desktopTargetLineData = [ final desktopTargetLineData = [
new OrdinalSales('2014', 4), OrdinalSales('2014', 4),
new OrdinalSales('2015', 20), OrdinalSales('2015', 20),
new OrdinalSales('2016', 80), OrdinalSales('2016', 80),
new OrdinalSales('2017', 65), OrdinalSales('2017', 65),
]; ];
final tableTargetLineData = [ final tableTargetLineData = [
new OrdinalSales('2014', 30), OrdinalSales('2014', 30),
new OrdinalSales('2015', 55), OrdinalSales('2015', 55),
new OrdinalSales('2016', 15), OrdinalSales('2016', 15),
new OrdinalSales('2017', 25), OrdinalSales('2017', 25),
]; ];
final mobileTargetLineData = [ final mobileTargetLineData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 5), OrdinalSales('2015', 5),
new OrdinalSales('2016', 45), OrdinalSales('2016', 45),
new OrdinalSales('2017', 35), OrdinalSales('2017', 35),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop Target Line', id: 'Desktop Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -219,7 +220,7 @@ class GroupedBarTargetLineChart extends StatelessWidget {
) )
// Configure our custom bar target renderer for this series. // Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customTargetLine'), ..setAttribute(charts.rendererIdKey, 'customTargetLine'),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet Target Line', id: 'Tablet Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -227,7 +228,7 @@ class GroupedBarTargetLineChart extends StatelessWidget {
) )
// Configure our custom bar target renderer for this series. // Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customTargetLine'), ..setAttribute(charts.rendererIdKey, 'customTargetLine'),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile Target Line', id: 'Mobile Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

31
web/charts/lib/bar_chart/horizontal.dart
View File

@@ -24,11 +24,12 @@ class HorizontalBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
HorizontalBarChart(this.seriesList, {this.animate}); const HorizontalBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory HorizontalBarChart.withSampleData() { factory HorizontalBarChart.withSampleData() {
return new HorizontalBarChart( return HorizontalBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class HorizontalBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory HorizontalBarChart.withRandomData() { factory HorizontalBarChart.withRandomData() {
return new HorizontalBarChart(_createRandomData()); return HorizontalBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -68,7 +69,7 @@ class HorizontalBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// For horizontal bar charts, set the [vertical] flag to false. // For horizontal bar charts, set the [vertical] flag to false.
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
vertical: false, vertical: false,
@@ -78,14 +79,14 @@ class HorizontalBarChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

35
web/charts/lib/bar_chart/horizontal_bar_label.dart
View File

@@ -24,11 +24,12 @@ class HorizontalBarLabelChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
HorizontalBarLabelChart(this.seriesList, {this.animate}); const HorizontalBarLabelChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory HorizontalBarLabelChart.withSampleData() { factory HorizontalBarLabelChart.withSampleData() {
return new HorizontalBarLabelChart( return HorizontalBarLabelChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class HorizontalBarLabelChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory HorizontalBarLabelChart.withRandomData() { factory HorizontalBarLabelChart.withRandomData() {
return new HorizontalBarLabelChart(_createRandomData()); return HorizontalBarLabelChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -76,7 +77,7 @@ class HorizontalBarLabelChart extends StatelessWidget {
// [insideLabelStyleSpec] and [outsideLabelStyleSpec]. // [insideLabelStyleSpec] and [outsideLabelStyleSpec].
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
vertical: false, vertical: false,
@@ -85,24 +86,24 @@ class HorizontalBarLabelChart extends StatelessWidget {
// barRendererDecorator: new charts.BarLabelDecorator( // barRendererDecorator: new charts.BarLabelDecorator(
// insideLabelStyleSpec: new charts.TextStyleSpec(...), // insideLabelStyleSpec: new charts.TextStyleSpec(...),
// outsideLabelStyleSpec: new charts.TextStyleSpec(...)), // outsideLabelStyleSpec: new charts.TextStyleSpec(...)),
barRendererDecorator: new charts.BarLabelDecorator<String>(), barRendererDecorator: charts.BarLabelDecorator<String>(),
// Hide domain axis. // Hide domain axis.
domainAxis: domainAxis:
new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()), const charts.OrdinalAxisSpec(renderSpec: charts.NoneRenderSpec()),
); );
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

43
web/charts/lib/bar_chart/horizontal_bar_label_custom.dart
View File

@@ -24,11 +24,12 @@ class HorizontalBarLabelCustomChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
HorizontalBarLabelCustomChart(this.seriesList, {this.animate}); const HorizontalBarLabelCustomChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
static HorizontalBarLabelCustomChart createWithSampleData() { static HorizontalBarLabelCustomChart createWithSampleData() {
return new HorizontalBarLabelCustomChart( return HorizontalBarLabelCustomChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class HorizontalBarLabelCustomChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory HorizontalBarLabelCustomChart.withRandomData() { factory HorizontalBarLabelCustomChart.withRandomData() {
return new HorizontalBarLabelCustomChart(_createRandomData()); return HorizontalBarLabelCustomChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -67,13 +68,13 @@ class HorizontalBarLabelCustomChart extends StatelessWidget {
final color = (sales.year == '2014') final color = (sales.year == '2014')
? charts.MaterialPalette.red.shadeDefault ? charts.MaterialPalette.red.shadeDefault
: charts.MaterialPalette.yellow.shadeDefault.darker; : charts.MaterialPalette.yellow.shadeDefault.darker;
return new charts.TextStyleSpec(color: color); return charts.TextStyleSpec(color: color);
}, },
outsideLabelStyleAccessorFn: (OrdinalSales sales, _) { outsideLabelStyleAccessorFn: (OrdinalSales sales, _) {
final color = (sales.year == '2014') final color = (sales.year == '2014')
? charts.MaterialPalette.red.shadeDefault ? charts.MaterialPalette.red.shadeDefault
: charts.MaterialPalette.yellow.shadeDefault.darker; : charts.MaterialPalette.yellow.shadeDefault.darker;
return new charts.TextStyleSpec(color: color); return charts.TextStyleSpec(color: color);
}, },
), ),
]; ];
@@ -85,28 +86,28 @@ class HorizontalBarLabelCustomChart extends StatelessWidget {
// style, set the style accessor functions on the series. // style, set the style accessor functions on the series.
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
vertical: false, vertical: false,
barRendererDecorator: new charts.BarLabelDecorator<String>(), barRendererDecorator: charts.BarLabelDecorator<String>(),
// Hide domain axis. // Hide domain axis.
domainAxis: domainAxis:
new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()), const charts.OrdinalAxisSpec(renderSpec: charts.NoneRenderSpec()),
); );
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -118,13 +119,13 @@ class HorizontalBarLabelCustomChart extends StatelessWidget {
final color = (sales.year == '2014') final color = (sales.year == '2014')
? charts.MaterialPalette.red.shadeDefault ? charts.MaterialPalette.red.shadeDefault
: charts.MaterialPalette.yellow.shadeDefault.darker; : charts.MaterialPalette.yellow.shadeDefault.darker;
return new charts.TextStyleSpec(color: color); return charts.TextStyleSpec(color: color);
}, },
outsideLabelStyleAccessorFn: (OrdinalSales sales, _) { outsideLabelStyleAccessorFn: (OrdinalSales sales, _) {
final color = (sales.year == '2014') final color = (sales.year == '2014')
? charts.MaterialPalette.red.shadeDefault ? charts.MaterialPalette.red.shadeDefault
: charts.MaterialPalette.yellow.shadeDefault.darker; : charts.MaterialPalette.yellow.shadeDefault.darker;
return new charts.TextStyleSpec(color: color); return charts.TextStyleSpec(color: color);
}, },
), ),
]; ];

72
web/charts/lib/bar_chart/horizontal_pattern_forward_hatch.dart
View File

@@ -28,10 +28,12 @@ class HorizontalPatternForwardHatchBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
HorizontalPatternForwardHatchBarChart(this.seriesList, {this.animate}); const HorizontalPatternForwardHatchBarChart(this.seriesList,
{this.animate, Key key})
: super(key: key);
factory HorizontalPatternForwardHatchBarChart.withSampleData() { factory HorizontalPatternForwardHatchBarChart.withSampleData() {
return new HorizontalPatternForwardHatchBarChart( return HorizontalPatternForwardHatchBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -43,42 +45,42 @@ class HorizontalPatternForwardHatchBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory HorizontalPatternForwardHatchBarChart.withRandomData() { factory HorizontalPatternForwardHatchBarChart.withRandomData() {
return new HorizontalPatternForwardHatchBarChart(_createRandomData()); return HorizontalPatternForwardHatchBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -86,7 +88,7 @@ class HorizontalPatternForwardHatchBarChart extends StatelessWidget {
fillPatternFn: (OrdinalSales sales, _) => fillPatternFn: (OrdinalSales sales, _) =>
charts.FillPatternType.forwardHatch, charts.FillPatternType.forwardHatch,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -98,7 +100,7 @@ class HorizontalPatternForwardHatchBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
@@ -109,34 +111,34 @@ class HorizontalPatternForwardHatchBarChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -144,7 +146,7 @@ class HorizontalPatternForwardHatchBarChart extends StatelessWidget {
fillPatternFn: (OrdinalSales sales, _) => fillPatternFn: (OrdinalSales sales, _) =>
charts.FillPatternType.forwardHatch, charts.FillPatternType.forwardHatch,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

71
web/charts/lib/bar_chart/pattern_forward_hatch.dart
View File

@@ -27,10 +27,11 @@ class PatternForwardHatchBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
PatternForwardHatchBarChart(this.seriesList, {this.animate}); const PatternForwardHatchBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
factory PatternForwardHatchBarChart.withSampleData() { factory PatternForwardHatchBarChart.withSampleData() {
return new PatternForwardHatchBarChart( return PatternForwardHatchBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -42,42 +43,42 @@ class PatternForwardHatchBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory PatternForwardHatchBarChart.withRandomData() { factory PatternForwardHatchBarChart.withRandomData() {
return new PatternForwardHatchBarChart(_createRandomData()); return PatternForwardHatchBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -85,7 +86,7 @@ class PatternForwardHatchBarChart extends StatelessWidget {
fillPatternFn: (OrdinalSales sales, _) => fillPatternFn: (OrdinalSales sales, _) =>
charts.FillPatternType.forwardHatch, charts.FillPatternType.forwardHatch,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -97,7 +98,7 @@ class PatternForwardHatchBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
@@ -107,34 +108,34 @@ class PatternForwardHatchBarChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -142,7 +143,7 @@ class PatternForwardHatchBarChart extends StatelessWidget {
fillPatternFn: (OrdinalSales sales, _) => fillPatternFn: (OrdinalSales sales, _) =>
charts.FillPatternType.forwardHatch, charts.FillPatternType.forwardHatch,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

31
web/charts/lib/bar_chart/simple.dart
View File

@@ -24,11 +24,12 @@ class SimpleBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SimpleBarChart(this.seriesList, {this.animate}); const SimpleBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory SimpleBarChart.withSampleData() { factory SimpleBarChart.withSampleData() {
return new SimpleBarChart( return SimpleBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class SimpleBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SimpleBarChart.withRandomData() { factory SimpleBarChart.withRandomData() {
return new SimpleBarChart(_createRandomData()); return SimpleBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -68,7 +69,7 @@ class SimpleBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
); );
@@ -77,14 +78,14 @@ class SimpleBarChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

74
web/charts/lib/bar_chart/spark_bar.dart
View File

@@ -25,10 +25,10 @@ class SparkBar extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SparkBar(this.seriesList, {this.animate}); const SparkBar(this.seriesList, {this.animate, Key key}) : super(key: key);
factory SparkBar.withSampleData() { factory SparkBar.withSampleData() {
return new SparkBar( return SparkBar(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,29 +40,29 @@ class SparkBar extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SparkBar.withRandomData() { factory SparkBar.withRandomData() {
return new SparkBar(_createRandomData()); return SparkBar(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2007', random.nextInt(100)), OrdinalSales('2007', random.nextInt(100)),
new OrdinalSales('2008', random.nextInt(100)), OrdinalSales('2008', random.nextInt(100)),
new OrdinalSales('2009', random.nextInt(100)), OrdinalSales('2009', random.nextInt(100)),
new OrdinalSales('2010', random.nextInt(100)), OrdinalSales('2010', random.nextInt(100)),
new OrdinalSales('2011', random.nextInt(100)), OrdinalSales('2011', random.nextInt(100)),
new OrdinalSales('2012', random.nextInt(100)), OrdinalSales('2012', random.nextInt(100)),
new OrdinalSales('2013', random.nextInt(100)), OrdinalSales('2013', random.nextInt(100)),
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -74,7 +74,7 @@ class SparkBar extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
@@ -83,45 +83,45 @@ class SparkBar extends StatelessWidget {
/// The NoneRenderSpec only draws an axis line (and even that can be hidden /// The NoneRenderSpec only draws an axis line (and even that can be hidden
/// with showAxisLine=false). /// with showAxisLine=false).
primaryMeasureAxis: primaryMeasureAxis:
new charts.NumericAxisSpec(renderSpec: new charts.NoneRenderSpec()), const charts.NumericAxisSpec(renderSpec: charts.NoneRenderSpec()),
/// This is an OrdinalAxisSpec to match up with BarChart's default /// This is an OrdinalAxisSpec to match up with BarChart's default
/// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for /// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
/// other charts). /// other charts).
domainAxis: new charts.OrdinalAxisSpec( domainAxis: const charts.OrdinalAxisSpec(
// Make sure that we draw the domain axis line. // Make sure that we draw the domain axis line.
showAxisLine: true, showAxisLine: true,
// But don't draw anything else. // But don't draw anything else.
renderSpec: new charts.NoneRenderSpec()), renderSpec: charts.NoneRenderSpec()),
// With a spark chart we likely don't want large chart margins. // With a spark chart we likely don't want large chart margins.
// 1px is the smallest we can make each margin. // 1px is the smallest we can make each margin.
layoutConfig: new charts.LayoutConfig( layoutConfig: charts.LayoutConfig(
leftMarginSpec: new charts.MarginSpec.fixedPixel(0), leftMarginSpec: charts.MarginSpec.fixedPixel(0),
topMarginSpec: new charts.MarginSpec.fixedPixel(0), topMarginSpec: charts.MarginSpec.fixedPixel(0),
rightMarginSpec: new charts.MarginSpec.fixedPixel(0), rightMarginSpec: charts.MarginSpec.fixedPixel(0),
bottomMarginSpec: new charts.MarginSpec.fixedPixel(0)), bottomMarginSpec: charts.MarginSpec.fixedPixel(0)),
); );
} }
/// Create series list with single series /// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [ final globalSalesData = [
new OrdinalSales('2007', 3100), OrdinalSales('2007', 3100),
new OrdinalSales('2008', 3500), OrdinalSales('2008', 3500),
new OrdinalSales('2009', 5000), OrdinalSales('2009', 5000),
new OrdinalSales('2010', 2500), OrdinalSales('2010', 2500),
new OrdinalSales('2011', 3200), OrdinalSales('2011', 3200),
new OrdinalSales('2012', 4500), OrdinalSales('2012', 4500),
new OrdinalSales('2013', 4400), OrdinalSales('2013', 4400),
new OrdinalSales('2014', 5000), OrdinalSales('2014', 5000),
new OrdinalSales('2015', 5000), OrdinalSales('2015', 5000),
new OrdinalSales('2016', 4500), OrdinalSales('2016', 4500),
new OrdinalSales('2017', 4300), OrdinalSales('2017', 4300),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Global Revenue', id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

71
web/charts/lib/bar_chart/stacked.dart
View File

@@ -24,11 +24,12 @@ class StackedBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
StackedBarChart(this.seriesList, {this.animate}); const StackedBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a stacked [BarChart] with sample data and no transition. /// Creates a stacked [BarChart] with sample data and no transition.
factory StackedBarChart.withSampleData() { factory StackedBarChart.withSampleData() {
return new StackedBarChart( return StackedBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,48 +41,48 @@ class StackedBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory StackedBarChart.withRandomData() { factory StackedBarChart.withRandomData() {
return new StackedBarChart(_createRandomData()); return StackedBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -93,7 +94,7 @@ class StackedBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.stacked, barGroupingType: charts.BarGroupingType.stacked,
@@ -103,40 +104,40 @@ class StackedBarChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

73
web/charts/lib/bar_chart/stacked_fill_color.dart
View File

@@ -26,10 +26,11 @@ class StackedFillColorBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
StackedFillColorBarChart(this.seriesList, {this.animate}); const StackedFillColorBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
factory StackedFillColorBarChart.withSampleData() { factory StackedFillColorBarChart.withSampleData() {
return new StackedFillColorBarChart( return StackedFillColorBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,37 +42,37 @@ class StackedFillColorBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory StackedFillColorBarChart.withRandomData() { factory StackedFillColorBarChart.withRandomData() {
return new StackedFillColorBarChart(_createRandomData()); return StackedFillColorBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
// Blue bars with a lighter center color. // Blue bars with a lighter center color.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -82,7 +83,7 @@ class StackedFillColorBarChart extends StatelessWidget {
), ),
// Solid red bars. Fill color will default to the series color if no // Solid red bars. Fill color will default to the series color if no
// fillColorFn is configured. // fillColorFn is configured.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -90,7 +91,7 @@ class StackedFillColorBarChart extends StatelessWidget {
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
), ),
// Hollow green bars. // Hollow green bars.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -104,11 +105,11 @@ class StackedFillColorBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Configure a stroke width to enable borders on the bars. // Configure a stroke width to enable borders on the bars.
defaultRenderer: new charts.BarRendererConfig( defaultRenderer: charts.BarRendererConfig(
groupingType: charts.BarGroupingType.stacked, strokeWidthPx: 2.0), groupingType: charts.BarGroupingType.stacked, strokeWidthPx: 2.0),
); );
} }
@@ -116,29 +117,29 @@ class StackedFillColorBarChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
// Blue bars with a lighter center color. // Blue bars with a lighter center color.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -149,7 +150,7 @@ class StackedFillColorBarChart extends StatelessWidget {
), ),
// Solid red bars. Fill color will default to the series color if no // Solid red bars. Fill color will default to the series color if no
// fillColorFn is configured. // fillColorFn is configured.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
@@ -157,7 +158,7 @@ class StackedFillColorBarChart extends StatelessWidget {
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
), ),
// Hollow green bars. // Hollow green bars.
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

71
web/charts/lib/bar_chart/stacked_horizontal.dart
View File

@@ -24,11 +24,12 @@ class StackedHorizontalBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
StackedHorizontalBarChart(this.seriesList, {this.animate}); const StackedHorizontalBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a stacked [BarChart] with sample data and no transition. /// Creates a stacked [BarChart] with sample data and no transition.
factory StackedHorizontalBarChart.withSampleData() { factory StackedHorizontalBarChart.withSampleData() {
return new StackedHorizontalBarChart( return StackedHorizontalBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,48 +41,48 @@ class StackedHorizontalBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory StackedHorizontalBarChart.withRandomData() { factory StackedHorizontalBarChart.withRandomData() {
return new StackedHorizontalBarChart(_createRandomData()); return StackedHorizontalBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -94,7 +95,7 @@ class StackedHorizontalBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// For horizontal bar charts, set the [vertical] flag to false. // For horizontal bar charts, set the [vertical] flag to false.
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.stacked, barGroupingType: charts.BarGroupingType.stacked,
@@ -105,40 +106,40 @@ class StackedHorizontalBarChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

133
web/charts/lib/bar_chart/stacked_target_line.dart
View File

@@ -24,11 +24,12 @@ class StackedBarTargetLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
StackedBarTargetLineChart(this.seriesList, {this.animate}); const StackedBarTargetLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a stacked [BarChart] with sample data and no transition. /// Creates a stacked [BarChart] with sample data and no transition.
factory StackedBarTargetLineChart.withSampleData() { factory StackedBarTargetLineChart.withSampleData() {
return new StackedBarTargetLineChart( return StackedBarTargetLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,75 +41,75 @@ class StackedBarTargetLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory StackedBarTargetLineChart.withRandomData() { factory StackedBarTargetLineChart.withRandomData() {
return new StackedBarTargetLineChart(_createRandomData()); return StackedBarTargetLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final desktopTargetLineData = [ final desktopTargetLineData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableTargetLineData = [ final tableTargetLineData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileTargetLineData = [ final mobileTargetLineData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop Target Line', id: 'Desktop Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -116,7 +117,7 @@ class StackedBarTargetLineChart extends StatelessWidget {
) )
// Configure our custom bar target renderer for this series. // Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customTargetLine'), ..setAttribute(charts.rendererIdKey, 'customTargetLine'),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet Target Line', id: 'Tablet Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -124,7 +125,7 @@ class StackedBarTargetLineChart extends StatelessWidget {
) )
// Configure our custom bar target renderer for this series. // Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customTargetLine'), ..setAttribute(charts.rendererIdKey, 'customTargetLine'),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile Target Line', id: 'Mobile Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -138,11 +139,11 @@ class StackedBarTargetLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart(seriesList, return charts.BarChart(seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.stacked, barGroupingType: charts.BarGroupingType.stacked,
customSeriesRenderers: [ customSeriesRenderers: [
new charts.BarTargetLineRendererConfig<String>( charts.BarTargetLineRendererConfig<String>(
// ID used to link series to this renderer. // ID used to link series to this renderer.
customRendererId: 'customTargetLine', customRendererId: 'customTargetLine',
groupingType: charts.BarGroupingType.stacked) groupingType: charts.BarGroupingType.stacked)
@@ -152,67 +153,67 @@ class StackedBarTargetLineChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final desktopTargetLineData = [ final desktopTargetLineData = [
new OrdinalSales('2014', 4), OrdinalSales('2014', 4),
new OrdinalSales('2015', 20), OrdinalSales('2015', 20),
new OrdinalSales('2016', 80), OrdinalSales('2016', 80),
new OrdinalSales('2017', 65), OrdinalSales('2017', 65),
]; ];
final tableTargetLineData = [ final tableTargetLineData = [
new OrdinalSales('2014', 30), OrdinalSales('2014', 30),
new OrdinalSales('2015', 55), OrdinalSales('2015', 55),
new OrdinalSales('2016', 15), OrdinalSales('2016', 15),
new OrdinalSales('2017', 25), OrdinalSales('2017', 25),
]; ];
final mobileTargetLineData = [ final mobileTargetLineData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 5), OrdinalSales('2015', 5),
new OrdinalSales('2016', 45), OrdinalSales('2016', 45),
new OrdinalSales('2017', 35), OrdinalSales('2017', 35),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop Target Line', id: 'Desktop Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -220,7 +221,7 @@ class StackedBarTargetLineChart extends StatelessWidget {
) )
// Configure our custom bar target renderer for this series. // Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customTargetLine'), ..setAttribute(charts.rendererIdKey, 'customTargetLine'),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet Target Line', id: 'Tablet Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -228,7 +229,7 @@ class StackedBarTargetLineChart extends StatelessWidget {
) )
// Configure our custom bar target renderer for this series. // Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customTargetLine'), ..setAttribute(charts.rendererIdKey, 'customTargetLine'),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile Target Line', id: 'Mobile Target Line',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

94
web/charts/lib/behaviors/behaviors_gallery.dart
View File

@@ -32,95 +32,93 @@ import 'sliding_viewport_on_selection.dart';
List<GalleryScaffold> buildGallery() { List<GalleryScaffold> buildGallery() {
return [ return [
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'Selection Bar Highlight', title: 'Selection Bar Highlight',
subtitle: 'Simple bar chart with tap activation', subtitle: 'Simple bar chart with tap activation',
childBuilder: () => new SelectionBarHighlight.withRandomData(), childBuilder: () => SelectionBarHighlight.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'Selection Line Highlight', title: 'Selection Line Highlight',
subtitle: 'Line chart with tap and drag activation', subtitle: 'Line chart with tap and drag activation',
childBuilder: () => new SelectionLineHighlight.withRandomData(), childBuilder: () => SelectionLineHighlight.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'Selection Line Highlight Custom Shape', title: 'Selection Line Highlight Custom Shape',
subtitle: 'Line chart with tap and drag activation and a custom shape', subtitle: 'Line chart with tap and drag activation and a custom shape',
childBuilder: () => childBuilder: () => SelectionLineHighlightCustomShape.withRandomData(),
new SelectionLineHighlightCustomShape.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'Selection Scatter Plot Highlight', title: 'Selection Scatter Plot Highlight',
subtitle: 'Scatter plot chart with tap and drag activation', subtitle: 'Scatter plot chart with tap and drag activation',
childBuilder: () => new SelectionScatterPlotHighlight.withRandomData(), childBuilder: () => SelectionScatterPlotHighlight.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'Selection Callback Example', title: 'Selection Callback Example',
subtitle: 'Timeseries that updates external components on selection', subtitle: 'Timeseries that updates external components on selection',
childBuilder: () => new SelectionCallbackExample.withRandomData(), childBuilder: () => SelectionCallbackExample.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'User managed selection', title: 'User managed selection',
subtitle: subtitle:
'Example where selection can be set and cleared programmatically', 'Example where selection can be set and cleared programmatically',
childBuilder: () => new SelectionUserManaged.withRandomData(), childBuilder: () => SelectionUserManaged.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Bar Chart with initial selection', title: 'Bar Chart with initial selection',
subtitle: 'Single series with initial selection', subtitle: 'Single series with initial selection',
childBuilder: () => new InitialSelection.withRandomData(), childBuilder: () => InitialSelection.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'Line Chart with Chart Titles', title: 'Line Chart with Chart Titles',
subtitle: 'Line chart with four chart titles', subtitle: 'Line chart with four chart titles',
childBuilder: () => new ChartTitleLine.withRandomData(), childBuilder: () => ChartTitleLine.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'Line Chart with Slider', title: 'Line Chart with Slider',
subtitle: 'Line chart with a slider behavior', subtitle: 'Line chart with a slider behavior',
childBuilder: () => new SliderLine.withRandomData(), childBuilder: () => SliderLine.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Percent of Domain', title: 'Percent of Domain',
subtitle: 'Stacked bar chart with measures calculated as percent of ' + subtitle:
'domain', 'Stacked bar chart with measures calculated as percent of ' 'domain',
childBuilder: () => new PercentOfDomainBarChart.withRandomData(), childBuilder: () => PercentOfDomainBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Percent of Domain by Category', title: 'Percent of Domain by Category',
subtitle: 'Grouped stacked bar chart with measures calculated as ' subtitle: 'Grouped stacked bar chart with measures calculated as '
'percent of domain and series category', 'percent of domain and series category',
childBuilder: () => childBuilder: () => PercentOfDomainByCategoryBarChart.withRandomData(),
new PercentOfDomainByCategoryBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Percent of Series', title: 'Percent of Series',
subtitle: 'Grouped bar chart with measures calculated as percent of ' + subtitle:
'series', 'Grouped bar chart with measures calculated as percent of ' 'series',
childBuilder: () => new PercentOfSeriesBarChart.withRandomData(), childBuilder: () => PercentOfSeriesBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Sliding viewport on domain selection', title: 'Sliding viewport on domain selection',
subtitle: 'Center viewport on selected domain', subtitle: 'Center viewport on selected domain',
childBuilder: () => new SlidingViewportOnSelection.withRandomData(), childBuilder: () => SlidingViewportOnSelection.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Initial hint animation ', title: 'Initial hint animation ',
subtitle: 'Animate into final viewport', subtitle: 'Animate into final viewport',
childBuilder: () => new InitialHintAnimation.withRandomData(), childBuilder: () => InitialHintAnimation.withRandomData(),
), ),
]; ];
} }

39
web/charts/lib/behaviors/chart_title.dart
View File

@@ -26,11 +26,12 @@ class ChartTitleLine extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
ChartTitleLine(this.seriesList, {this.animate}); const ChartTitleLine(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory ChartTitleLine.withSampleData() { factory ChartTitleLine.withSampleData() {
return new ChartTitleLine( return ChartTitleLine(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -42,22 +43,22 @@ class ChartTitleLine extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory ChartTitleLine.withRandomData() { factory ChartTitleLine.withRandomData() {
return new ChartTitleLine(_createRandomData()); return ChartTitleLine(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -69,7 +70,7 @@ class ChartTitleLine extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart( return charts.LineChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Configures four [ChartTitle] behaviors to render titles in each chart // Configures four [ChartTitle] behaviors to render titles in each chart
@@ -77,7 +78,7 @@ class ChartTitleLine extends StatelessWidget {
// of the chart. The other titles are aligned with the middle of the draw // of the chart. The other titles are aligned with the middle of the draw
// area. // area.
behaviors: [ behaviors: [
new charts.ChartTitle('Top title text', charts.ChartTitle('Top title text',
subTitle: 'Top sub-title text', subTitle: 'Top sub-title text',
behaviorPosition: charts.BehaviorPosition.top, behaviorPosition: charts.BehaviorPosition.top,
titleOutsideJustification: charts.OutsideJustification.start, titleOutsideJustification: charts.OutsideJustification.start,
@@ -86,15 +87,15 @@ class ChartTitleLine extends StatelessWidget {
// The top tick label may extend upwards into the top margin region // The top tick label may extend upwards into the top margin region
// if it is located at the top of the draw area. // if it is located at the top of the draw area.
innerPadding: 18), innerPadding: 18),
new charts.ChartTitle('Bottom title text', charts.ChartTitle('Bottom title text',
behaviorPosition: charts.BehaviorPosition.bottom, behaviorPosition: charts.BehaviorPosition.bottom,
titleOutsideJustification: titleOutsideJustification:
charts.OutsideJustification.middleDrawArea), charts.OutsideJustification.middleDrawArea),
new charts.ChartTitle('Start title', charts.ChartTitle('Start title',
behaviorPosition: charts.BehaviorPosition.start, behaviorPosition: charts.BehaviorPosition.start,
titleOutsideJustification: titleOutsideJustification:
charts.OutsideJustification.middleDrawArea), charts.OutsideJustification.middleDrawArea),
new charts.ChartTitle('End title', charts.ChartTitle('End title',
behaviorPosition: charts.BehaviorPosition.end, behaviorPosition: charts.BehaviorPosition.end,
titleOutsideJustification: titleOutsideJustification:
charts.OutsideJustification.middleDrawArea), charts.OutsideJustification.middleDrawArea),
@@ -105,14 +106,14 @@ class ChartTitleLine extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

91
web/charts/lib/behaviors/initial_hint_animation.dart
View File

@@ -51,11 +51,12 @@ class InitialHintAnimation extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
InitialHintAnimation(this.seriesList, {this.animate}); const InitialHintAnimation(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory InitialHintAnimation.withSampleData() { factory InitialHintAnimation.withSampleData() {
return new InitialHintAnimation( return InitialHintAnimation(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -67,35 +68,35 @@ class InitialHintAnimation extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory InitialHintAnimation.withRandomData() { factory InitialHintAnimation.withRandomData() {
return new InitialHintAnimation(_createRandomData()); return InitialHintAnimation(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
new OrdinalSales('2018', random.nextInt(100)), OrdinalSales('2018', random.nextInt(100)),
new OrdinalSales('2019', random.nextInt(100)), OrdinalSales('2019', random.nextInt(100)),
new OrdinalSales('2020', random.nextInt(100)), OrdinalSales('2020', random.nextInt(100)),
new OrdinalSales('2021', random.nextInt(100)), OrdinalSales('2021', random.nextInt(100)),
new OrdinalSales('2022', random.nextInt(100)), OrdinalSales('2022', random.nextInt(100)),
new OrdinalSales('2023', random.nextInt(100)), OrdinalSales('2023', random.nextInt(100)),
new OrdinalSales('2024', random.nextInt(100)), OrdinalSales('2024', random.nextInt(100)),
new OrdinalSales('2025', random.nextInt(100)), OrdinalSales('2025', random.nextInt(100)),
new OrdinalSales('2026', random.nextInt(100)), OrdinalSales('2026', random.nextInt(100)),
new OrdinalSales('2027', random.nextInt(100)), OrdinalSales('2027', random.nextInt(100)),
new OrdinalSales('2028', random.nextInt(100)), OrdinalSales('2028', random.nextInt(100)),
new OrdinalSales('2029', random.nextInt(100)), OrdinalSales('2029', random.nextInt(100)),
new OrdinalSales('2030', random.nextInt(100)), OrdinalSales('2030', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -108,7 +109,7 @@ class InitialHintAnimation extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Optionally turn off the animation that animates values up from the // Optionally turn off the animation that animates values up from the
@@ -117,17 +118,17 @@ class InitialHintAnimation extends StatelessWidget {
animationDuration: Duration.zero, animationDuration: Duration.zero,
// Set the initial viewport by providing a new AxisSpec with the // Set the initial viewport by providing a new AxisSpec with the
// desired viewport: a starting domain and the data size. // desired viewport: a starting domain and the data size.
domainAxis: new charts.OrdinalAxisSpec( domainAxis:
viewport: new charts.OrdinalViewport('2018', 4)), charts.OrdinalAxisSpec(viewport: charts.OrdinalViewport('2018', 4)),
behaviors: [ behaviors: [
// Add this behavior to show initial hint animation that will pan to the // Add this behavior to show initial hint animation that will pan to the
// final desired viewport. // final desired viewport.
// The duration of the animation can be adjusted by pass in // The duration of the animation can be adjusted by pass in
// [hintDuration]. By default this is 3000ms. // [hintDuration]. By default this is 3000ms.
new charts.InitialHintBehavior(maxHintTranslate: 4.0), charts.InitialHintBehavior(maxHintTranslate: 4.0),
// Optionally add a pan or pan and zoom behavior. // Optionally add a pan or pan and zoom behavior.
// If pan/zoom is not added, the viewport specified remains the viewport // If pan/zoom is not added, the viewport specified remains the viewport
new charts.PanAndZoomBehavior(), charts.PanAndZoomBehavior(),
], ],
); );
} }
@@ -135,27 +136,27 @@ class InitialHintAnimation extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
new OrdinalSales('2018', 33), OrdinalSales('2018', 33),
new OrdinalSales('2019', 80), OrdinalSales('2019', 80),
new OrdinalSales('2020', 21), OrdinalSales('2020', 21),
new OrdinalSales('2021', 77), OrdinalSales('2021', 77),
new OrdinalSales('2022', 8), OrdinalSales('2022', 8),
new OrdinalSales('2023', 12), OrdinalSales('2023', 12),
new OrdinalSales('2024', 42), OrdinalSales('2024', 42),
new OrdinalSales('2025', 70), OrdinalSales('2025', 70),
new OrdinalSales('2026', 77), OrdinalSales('2026', 77),
new OrdinalSales('2027', 55), OrdinalSales('2027', 55),
new OrdinalSales('2028', 19), OrdinalSales('2028', 19),
new OrdinalSales('2029', 66), OrdinalSales('2029', 66),
new OrdinalSales('2030', 27), OrdinalSales('2030', 27),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

35
web/charts/lib/behaviors/initial_selection.dart
View File

@@ -34,11 +34,12 @@ class InitialSelection extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
InitialSelection(this.seriesList, {this.animate}); const InitialSelection(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with initial selection behavior. /// Creates a [BarChart] with initial selection behavior.
factory InitialSelection.withSampleData() { factory InitialSelection.withSampleData() {
return new InitialSelection( return InitialSelection(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -50,22 +51,22 @@ class InitialSelection extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory InitialSelection.withRandomData() { factory InitialSelection.withRandomData() {
return new InitialSelection(_createRandomData()); return InitialSelection(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -78,7 +79,7 @@ class InitialSelection extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
behaviors: [ behaviors: [
@@ -92,8 +93,8 @@ class InitialSelection extends StatelessWidget {
// [BarChart] by default includes behaviors [SelectNearest] and // [BarChart] by default includes behaviors [SelectNearest] and
// [DomainHighlighter]. So this behavior shows the initial selection // [DomainHighlighter]. So this behavior shows the initial selection
// highlighted and when another datum is tapped, the selection changes. // highlighted and when another datum is tapped, the selection changes.
new charts.InitialSelection(selectedDataConfig: [ charts.InitialSelection(selectedDataConfig: [
new charts.SeriesDatumConfig<String>('Sales', '2016') charts.SeriesDatumConfig<String>('Sales', '2016')
]) ])
], ],
); );
@@ -102,14 +103,14 @@ class InitialSelection extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

75
web/charts/lib/behaviors/percent_of_domain.dart
View File

@@ -27,11 +27,12 @@ class PercentOfDomainBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
PercentOfDomainBarChart(this.seriesList, {this.animate}); const PercentOfDomainBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a stacked [BarChart] with sample data and no transition. /// Creates a stacked [BarChart] with sample data and no transition.
factory PercentOfDomainBarChart.withSampleData() { factory PercentOfDomainBarChart.withSampleData() {
return new PercentOfDomainBarChart( return PercentOfDomainBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -43,48 +44,48 @@ class PercentOfDomainBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory PercentOfDomainBarChart.withRandomData() { factory PercentOfDomainBarChart.withRandomData() {
return new PercentOfDomainBarChart(_createRandomData()); return PercentOfDomainBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -96,7 +97,7 @@ class PercentOfDomainBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.stacked, barGroupingType: charts.BarGroupingType.stacked,
@@ -104,51 +105,51 @@ class PercentOfDomainBarChart extends StatelessWidget {
// values as the percentage of the total of all data that shares a // values as the percentage of the total of all data that shares a
// domain value. // domain value.
behaviors: [ behaviors: [
new charts.PercentInjector( charts.PercentInjector(
totalType: charts.PercentInjectorTotalType.domain) totalType: charts.PercentInjectorTotalType.domain)
], ],
// Configure the axis spec to show percentage values. // Configure the axis spec to show percentage values.
primaryMeasureAxis: new charts.PercentAxisSpec(), primaryMeasureAxis: charts.PercentAxisSpec(),
); );
} }
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

136
web/charts/lib/behaviors/percent_of_domain_by_category.dart
View File

@@ -28,10 +28,12 @@ class PercentOfDomainByCategoryBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
PercentOfDomainByCategoryBarChart(this.seriesList, {this.animate}); const PercentOfDomainByCategoryBarChart(this.seriesList,
{this.animate, Key key})
: super(key: key);
factory PercentOfDomainByCategoryBarChart.withSampleData() { factory PercentOfDomainByCategoryBarChart.withSampleData() {
return new PercentOfDomainByCategoryBarChart( return PercentOfDomainByCategoryBarChart(
createSampleData(), createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -43,92 +45,92 @@ class PercentOfDomainByCategoryBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory PercentOfDomainByCategoryBarChart.withRandomData() { factory PercentOfDomainByCategoryBarChart.withRandomData() {
return new PercentOfDomainByCategoryBarChart(_createRandomData()); return PercentOfDomainByCategoryBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesDataA = [ final desktopSalesDataA = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesDataA = [ final tableSalesDataA = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesDataA = [ final mobileSalesDataA = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final desktopSalesDataB = [ final desktopSalesDataB = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesDataB = [ final tableSalesDataB = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesDataB = [ final mobileSalesDataB = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop A', id: 'Desktop A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataA, data: desktopSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet A', id: 'Tablet A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataA, data: tableSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile A', id: 'Mobile A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesDataA, data: mobileSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop B', id: 'Desktop B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataB, data: desktopSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet B', id: 'Tablet B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataB, data: tableSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile B', id: 'Mobile B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -141,7 +143,7 @@ class PercentOfDomainByCategoryBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.groupedStacked, barGroupingType: charts.BarGroupingType.groupedStacked,
@@ -153,95 +155,95 @@ class PercentOfDomainByCategoryBarChart extends StatelessWidget {
// total value for each bar stack is 100%. A stacked bar chart that does // total value for each bar stack is 100%. A stacked bar chart that does
// not group by series category would use the "domain" option. // not group by series category would use the "domain" option.
behaviors: [ behaviors: [
new charts.PercentInjector( charts.PercentInjector(
totalType: charts.PercentInjectorTotalType.domainBySeriesCategory) totalType: charts.PercentInjectorTotalType.domainBySeriesCategory)
], ],
// Configure the axis spec to show percentage values. // Configure the axis spec to show percentage values.
primaryMeasureAxis: new charts.PercentAxisSpec(), primaryMeasureAxis: charts.PercentAxisSpec(),
); );
} }
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> createSampleData() { static List<charts.Series<OrdinalSales, String>> createSampleData() {
final desktopSalesDataA = [ final desktopSalesDataA = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesDataA = [ final tableSalesDataA = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesDataA = [ final mobileSalesDataA = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final desktopSalesDataB = [ final desktopSalesDataB = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesDataB = [ final tableSalesDataB = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesDataB = [ final mobileSalesDataB = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop A', id: 'Desktop A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataA, data: desktopSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet A', id: 'Tablet A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataA, data: tableSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile A', id: 'Mobile A',
seriesCategory: 'A', seriesCategory: 'A',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesDataA, data: mobileSalesDataA,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop B', id: 'Desktop B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesDataB, data: desktopSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet B', id: 'Tablet B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesDataB, data: tableSalesDataB,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile B', id: 'Mobile B',
seriesCategory: 'B', seriesCategory: 'B',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

51
web/charts/lib/behaviors/percent_of_series.dart
View File

@@ -25,11 +25,12 @@ class PercentOfSeriesBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
PercentOfSeriesBarChart(this.seriesList, {this.animate}); const PercentOfSeriesBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a stacked [BarChart] with sample data and no transition. /// Creates a stacked [BarChart] with sample data and no transition.
factory PercentOfSeriesBarChart.withSampleData() { factory PercentOfSeriesBarChart.withSampleData() {
return new PercentOfSeriesBarChart( return PercentOfSeriesBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,26 +42,26 @@ class PercentOfSeriesBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory PercentOfSeriesBarChart.withRandomData() { factory PercentOfSeriesBarChart.withRandomData() {
return new PercentOfSeriesBarChart(_createRandomData()); return PercentOfSeriesBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -72,36 +73,36 @@ class PercentOfSeriesBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
// Configures a [PercentInjector] behavior that will calculate measure // Configures a [PercentInjector] behavior that will calculate measure
// values as the percentage of the total of all data in its series. // values as the percentage of the total of all data in its series.
behaviors: [ behaviors: [
new charts.PercentInjector( charts.PercentInjector(
totalType: charts.PercentInjectorTotalType.series) totalType: charts.PercentInjectorTotalType.series)
], ],
// Configure the axis spec to show percentage values. // Configure the axis spec to show percentage values.
primaryMeasureAxis: new charts.PercentAxisSpec(), primaryMeasureAxis: charts.PercentAxisSpec(),
); );
} }
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2011', 5), OrdinalSales('2011', 5),
new OrdinalSales('2012', 25), OrdinalSales('2012', 25),
new OrdinalSales('2013', 50), OrdinalSales('2013', 50),
new OrdinalSales('2014', 75), OrdinalSales('2014', 75),
new OrdinalSales('2015', 100), OrdinalSales('2015', 100),
new OrdinalSales('2016', 125), OrdinalSales('2016', 125),
new OrdinalSales('2017', 200), OrdinalSales('2017', 200),
new OrdinalSales('2018', 150), OrdinalSales('2018', 150),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

31
web/charts/lib/behaviors/selection_bar_highlight.dart
View File

@@ -22,11 +22,12 @@ class SelectionBarHighlight extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SelectionBarHighlight(this.seriesList, {this.animate}); const SelectionBarHighlight(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory SelectionBarHighlight.withSampleData() { factory SelectionBarHighlight.withSampleData() {
return new SelectionBarHighlight( return SelectionBarHighlight(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -38,22 +39,22 @@ class SelectionBarHighlight extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SelectionBarHighlight.withRandomData() { factory SelectionBarHighlight.withRandomData() {
return new SelectionBarHighlight(_createRandomData()); return SelectionBarHighlight(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -74,7 +75,7 @@ class SelectionBarHighlight extends StatelessWidget {
// //
// [defaultInteractions] can be set to false to avoid the default // [defaultInteractions] can be set to false to avoid the default
// interactions. // interactions.
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
defaultInteractions: true, defaultInteractions: true,
@@ -84,14 +85,14 @@ class SelectionBarHighlight extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

71
web/charts/lib/behaviors/selection_callback_example.dart
View File

@@ -36,11 +36,12 @@ class SelectionCallbackExample extends StatefulWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SelectionCallbackExample(this.seriesList, {this.animate}); const SelectionCallbackExample(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [charts.TimeSeriesChart] with sample data and no transition. /// Creates a [charts.TimeSeriesChart] with sample data and no transition.
factory SelectionCallbackExample.withSampleData() { factory SelectionCallbackExample.withSampleData() {
return new SelectionCallbackExample( return SelectionCallbackExample(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -52,35 +53,35 @@ class SelectionCallbackExample extends StatefulWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SelectionCallbackExample.withRandomData() { factory SelectionCallbackExample.withRandomData() {
return new SelectionCallbackExample(_createRandomData()); return SelectionCallbackExample(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() { static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
final random = new Random(); final random = Random();
final usData = [ final usData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 9, 19), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 9, 26), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 10, 3), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 10, 10), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 10, 10), random.nextInt(100)),
]; ];
final ukData = [ final ukData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 9, 19), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 9, 26), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 10, 3), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 10, 10), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 10, 10), random.nextInt(100)),
]; ];
return [ return [
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'US Sales', id: 'US Sales',
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales, measureFn: (TimeSeriesSales sales, _) => sales.sales,
data: usData, data: usData,
), ),
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'UK Sales', id: 'UK Sales',
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales, measureFn: (TimeSeriesSales sales, _) => sales.sales,
@@ -93,32 +94,32 @@ class SelectionCallbackExample extends StatefulWidget {
// We need a Stateful widget to build the selection details with the current // We need a Stateful widget to build the selection details with the current
// selection as the state. // selection as the state.
@override @override
State<StatefulWidget> createState() => new _SelectionCallbackState(); State<StatefulWidget> createState() => _SelectionCallbackState();
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() { static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
final usData = [ final usData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), 5), TimeSeriesSales(DateTime(2017, 9, 19), 5),
new TimeSeriesSales(new DateTime(2017, 9, 26), 25), TimeSeriesSales(DateTime(2017, 9, 26), 25),
new TimeSeriesSales(new DateTime(2017, 10, 3), 78), TimeSeriesSales(DateTime(2017, 10, 3), 78),
new TimeSeriesSales(new DateTime(2017, 10, 10), 54), TimeSeriesSales(DateTime(2017, 10, 10), 54),
]; ];
final ukData = [ final ukData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), 15), TimeSeriesSales(DateTime(2017, 9, 19), 15),
new TimeSeriesSales(new DateTime(2017, 9, 26), 33), TimeSeriesSales(DateTime(2017, 9, 26), 33),
new TimeSeriesSales(new DateTime(2017, 10, 3), 68), TimeSeriesSales(DateTime(2017, 10, 3), 68),
new TimeSeriesSales(new DateTime(2017, 10, 10), 48), TimeSeriesSales(DateTime(2017, 10, 10), 48),
]; ];
return [ return [
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'US Sales', id: 'US Sales',
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales, measureFn: (TimeSeriesSales sales, _) => sales.sales,
data: usData, data: usData,
), ),
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'UK Sales', id: 'UK Sales',
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales, measureFn: (TimeSeriesSales sales, _) => sales.sales,
@@ -148,9 +149,9 @@ class _SelectionCallbackState extends State<SelectionCallbackExample> {
// series name for each selection point. // series name for each selection point.
if (selectedDatum.isNotEmpty) { if (selectedDatum.isNotEmpty) {
time = selectedDatum.first.datum.time; time = selectedDatum.first.datum.time;
selectedDatum.forEach((charts.SeriesDatum datumPair) { for (var datumPair in selectedDatum) {
measures[datumPair.series.displayName] = datumPair.datum.sales; measures[datumPair.series.displayName] = datumPair.datum.sales;
}); }
} }
// Request a build. // Request a build.
@@ -164,13 +165,13 @@ class _SelectionCallbackState extends State<SelectionCallbackExample> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
// The children consist of a Chart and Text widgets below to hold the info. // The children consist of a Chart and Text widgets below to hold the info.
final children = <Widget>[ final children = <Widget>[
new SizedBox( SizedBox(
height: 150.0, height: 150.0,
child: new charts.TimeSeriesChart( child: charts.TimeSeriesChart(
widget.seriesList, widget.seriesList,
animate: widget.animate, animate: widget.animate,
selectionModels: [ selectionModels: [
new charts.SelectionModelConfig( charts.SelectionModelConfig(
type: charts.SelectionModelType.info, type: charts.SelectionModelType.info,
changedListener: _onSelectionChanged, changedListener: _onSelectionChanged,
) )
@@ -180,15 +181,15 @@ class _SelectionCallbackState extends State<SelectionCallbackExample> {
// If there is a selection, then include the details. // If there is a selection, then include the details.
if (_time != null) { if (_time != null) {
children.add(new Padding( children.add(Padding(
padding: new EdgeInsets.only(top: 5.0), padding: const EdgeInsets.only(top: 5.0),
child: new Text(_time.toString()))); child: Text(_time.toString())));
} }
_measures?.forEach((String series, num value) { _measures?.forEach((String series, num value) {
children.add(new Text('$series: $value')); children.add(Text('$series: $value'));
}); });
return new Column(children: children); return Column(children: children);
} }
} }

35
web/charts/lib/behaviors/selection_line_highlight.dart
View File

@@ -22,11 +22,12 @@ class SelectionLineHighlight extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SelectionLineHighlight(this.seriesList, {this.animate}); const SelectionLineHighlight(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory SelectionLineHighlight.withSampleData() { factory SelectionLineHighlight.withSampleData() {
return new SelectionLineHighlight( return SelectionLineHighlight(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -38,22 +39,22 @@ class SelectionLineHighlight extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SelectionLineHighlight.withRandomData() { factory SelectionLineHighlight.withRandomData() {
return new SelectionLineHighlight(_createRandomData()); return SelectionLineHighlight(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -75,7 +76,7 @@ class SelectionLineHighlight extends StatelessWidget {
// //
// As an alternative, [defaultInteractions] can be set to true to include // As an alternative, [defaultInteractions] can be set to true to include
// the default chart interactions, including a LinePointHighlighter. // the default chart interactions, including a LinePointHighlighter.
return new charts.LineChart(seriesList, animate: animate, behaviors: [ return charts.LineChart(seriesList, animate: animate, behaviors: [
// Optional - Configures a [LinePointHighlighter] behavior with a // Optional - Configures a [LinePointHighlighter] behavior with a
// vertical follow line. A vertical follow line is included by // vertical follow line. A vertical follow line is included by
// default, but is shown here as an example configuration. // default, but is shown here as an example configuration.
@@ -84,7 +85,7 @@ class SelectionLineHighlight extends StatelessWidget {
// set by providing a [dashPattern] or it can be turned off by passing in // set by providing a [dashPattern] or it can be turned off by passing in
// an empty list. An empty list is necessary because passing in a null // an empty list. An empty list is necessary because passing in a null
// value will be treated the same as not passing in a value at all. // value will be treated the same as not passing in a value at all.
new charts.LinePointHighlighter( charts.LinePointHighlighter(
showHorizontalFollowLine: showHorizontalFollowLine:
charts.LinePointHighlighterFollowLineType.none, charts.LinePointHighlighterFollowLineType.none,
showVerticalFollowLine: showVerticalFollowLine:
@@ -94,21 +95,21 @@ class SelectionLineHighlight extends StatelessWidget {
// highlighter. Changing the trigger to tap and drag allows the // highlighter. Changing the trigger to tap and drag allows the
// highlighter to follow the dragging gesture but it is not // highlighter to follow the dragging gesture but it is not
// recommended to be used when pan/zoom behavior is enabled. // recommended to be used when pan/zoom behavior is enabled.
new charts.SelectNearest(eventTrigger: charts.SelectionTrigger.tapAndDrag) charts.SelectNearest(eventTrigger: charts.SelectionTrigger.tapAndDrag)
]); ]);
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

38
web/charts/lib/behaviors/selection_line_highlight_custom_shape.dart
View File

@@ -22,11 +22,13 @@ class SelectionLineHighlightCustomShape extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SelectionLineHighlightCustomShape(this.seriesList, {this.animate}); const SelectionLineHighlightCustomShape(this.seriesList,
{this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory SelectionLineHighlightCustomShape.withSampleData() { factory SelectionLineHighlightCustomShape.withSampleData() {
return new SelectionLineHighlightCustomShape( return SelectionLineHighlightCustomShape(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -38,22 +40,22 @@ class SelectionLineHighlightCustomShape extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SelectionLineHighlightCustomShape.withRandomData() { factory SelectionLineHighlightCustomShape.withRandomData() {
return new SelectionLineHighlightCustomShape(_createRandomData()); return SelectionLineHighlightCustomShape(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -74,7 +76,7 @@ class SelectionLineHighlightCustomShape extends StatelessWidget {
// //
// As an alternative, [defaultInteractions] can be set to true to include // As an alternative, [defaultInteractions] can be set to true to include
// the default chart interactions, including a LinePointHighlighter. // the default chart interactions, including a LinePointHighlighter.
return new charts.LineChart(seriesList, animate: animate, behaviors: [ return charts.LineChart(seriesList, animate: animate, behaviors: [
// Optional - Configures a [LinePointHighlighter] behavior with a // Optional - Configures a [LinePointHighlighter] behavior with a
// vertical follow line. A vertical follow line is included by // vertical follow line. A vertical follow line is included by
// default, but is shown here as an example configuration. // default, but is shown here as an example configuration.
@@ -86,32 +88,32 @@ class SelectionLineHighlightCustomShape extends StatelessWidget {
// //
// The symbol renderer is configured to render a hollow shape, for // The symbol renderer is configured to render a hollow shape, for
// demonstration. // demonstration.
new charts.LinePointHighlighter( charts.LinePointHighlighter(
showHorizontalFollowLine: showHorizontalFollowLine:
charts.LinePointHighlighterFollowLineType.none, charts.LinePointHighlighterFollowLineType.none,
showVerticalFollowLine: showVerticalFollowLine:
charts.LinePointHighlighterFollowLineType.nearest, charts.LinePointHighlighterFollowLineType.nearest,
symbolRenderer: new charts.RectSymbolRenderer(isSolid: false)), symbolRenderer: charts.RectSymbolRenderer(isSolid: false)),
// Optional - By default, select nearest is configured to trigger // Optional - By default, select nearest is configured to trigger
// with tap so that a user can have pan/zoom behavior and line point // with tap so that a user can have pan/zoom behavior and line point
// highlighter. Changing the trigger to tap and drag allows the // highlighter. Changing the trigger to tap and drag allows the
// highlighter to follow the dragging gesture but it is not // highlighter to follow the dragging gesture but it is not
// recommended to be used when pan/zoom behavior is enabled. // recommended to be used when pan/zoom behavior is enabled.
new charts.SelectNearest(eventTrigger: charts.SelectionTrigger.tapAndDrag) charts.SelectNearest(eventTrigger: charts.SelectionTrigger.tapAndDrag)
]); ]);
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

101
web/charts/lib/behaviors/selection_scatter_plot_highlight.dart
View File

@@ -41,11 +41,12 @@ class SelectionScatterPlotHighlight extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SelectionScatterPlotHighlight(this.seriesList, {this.animate}); const SelectionScatterPlotHighlight(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [ScatterPlotChart] with sample data and no transition. /// Creates a [ScatterPlotChart] with sample data and no transition.
factory SelectionScatterPlotHighlight.withSampleData() { factory SelectionScatterPlotHighlight.withSampleData() {
return new SelectionScatterPlotHighlight( return SelectionScatterPlotHighlight(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -57,49 +58,49 @@ class SelectionScatterPlotHighlight extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SelectionScatterPlotHighlight.withRandomData() { factory SelectionScatterPlotHighlight.withRandomData() {
return new SelectionScatterPlotHighlight(_createRandomData()); return SelectionScatterPlotHighlight(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final makeRadius = (int value) => (random.nextInt(value) + 2).toDouble(); makeRadius(int value) => (random.nextInt(value) + 2).toDouble();
final data = [ final data = [
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6),
'circle', null, null), 'circle', null, null),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), null,
null, null, null), null, null),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), null,
null, null, null), null, null),
// Render a hollow circle, filled in with white. // Render a hollow circle, filled in with white.
new LinearSales(random.nextInt(100), random.nextInt(100), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(4) + 4,
makeRadius(4) + 4, 'circle', charts.MaterialPalette.white, 2.0), 'circle', charts.MaterialPalette.white, 2.0),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), null,
null, null, null), null, null),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), null,
null, null, null), null, null),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6),
'circle', null, null), 'circle', null, null),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), null,
null, null, null), null, null),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), null,
null, null, null), null, null),
// Render a hollow circle, filled in with white. // Render a hollow circle, filled in with white.
new LinearSales(random.nextInt(100), random.nextInt(100), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(4) + 4,
makeRadius(4) + 4, 'circle', charts.MaterialPalette.white, 2.0), 'circle', charts.MaterialPalette.white, 2.0),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6), null,
null, null, null), null, null),
// Render a hollow square, filled in with white. // Render a hollow square, filled in with white.
new LinearSales(random.nextInt(100), random.nextInt(100), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(4) + 4,
makeRadius(4) + 4, null, charts.MaterialPalette.white, 2.0), null, charts.MaterialPalette.white, 2.0),
]; ];
final maxMeasure = 100; const maxMeasure = 100;
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
colorFn: (LinearSales sales, _) { colorFn: (LinearSales sales, _) {
// Color bucket the measure column value into 3 distinct colors. // Color bucket the measure column value into 3 distinct colors.
@@ -131,7 +132,7 @@ class SelectionScatterPlotHighlight extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.ScatterPlotChart(seriesList, return charts.ScatterPlotChart(seriesList,
animate: animate, animate: animate,
behaviors: [ behaviors: [
// Optional - Configures a [LinePointHighlighter] behavior with // Optional - Configures a [LinePointHighlighter] behavior with
@@ -143,7 +144,7 @@ class SelectionScatterPlotHighlight extends StatelessWidget {
// in an empty list. An empty list is necessary because passing in a // in an empty list. An empty list is necessary because passing in a
// null value will be treated the same as not passing in a value at // null value will be treated the same as not passing in a value at
// all. // all.
new charts.LinePointHighlighter( charts.LinePointHighlighter(
showHorizontalFollowLine: showHorizontalFollowLine:
charts.LinePointHighlighterFollowLineType.nearest, charts.LinePointHighlighterFollowLineType.nearest,
showVerticalFollowLine: showVerticalFollowLine:
@@ -153,44 +154,42 @@ class SelectionScatterPlotHighlight extends StatelessWidget {
// highlighter. Changing the trigger to tap and drag allows the // highlighter. Changing the trigger to tap and drag allows the
// highlighter to follow the dragging gesture but it is not // highlighter to follow the dragging gesture but it is not
// recommended to be used when pan/zoom behavior is enabled. // recommended to be used when pan/zoom behavior is enabled.
new charts.SelectNearest( charts.SelectNearest(
eventTrigger: charts.SelectionTrigger.tapAndDrag), eventTrigger: charts.SelectionTrigger.tapAndDrag),
], ],
// Configure the point renderer to have a map of custom symbol // Configure the point renderer to have a map of custom symbol
// renderers. // renderers.
defaultRenderer: defaultRenderer:
new charts.PointRendererConfig<num>(customSymbolRenderers: { charts.PointRendererConfig<num>(customSymbolRenderers: {
'circle': new charts.CircleSymbolRenderer(), 'circle': charts.CircleSymbolRenderer(),
'rect': new charts.RectSymbolRenderer(), 'rect': charts.RectSymbolRenderer(),
})); }));
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5, 3.0, 'circle', null, null), LinearSales(0, 5, 3.0, 'circle', null, null),
new LinearSales(10, 25, 5.0, null, null, null), LinearSales(10, 25, 5.0, null, null, null),
new LinearSales(12, 75, 4.0, null, null, null), LinearSales(12, 75, 4.0, null, null, null),
// Render a hollow circle, filled in with white. // Render a hollow circle, filled in with white.
new LinearSales( LinearSales(13, 225, 5.0, 'circle', charts.MaterialPalette.white, 2.0),
13, 225, 5.0, 'circle', charts.MaterialPalette.white, 2.0), LinearSales(16, 50, 4.0, null, null, null),
new LinearSales(16, 50, 4.0, null, null, null), LinearSales(24, 75, 3.0, null, null, null),
new LinearSales(24, 75, 3.0, null, null, null), LinearSales(25, 100, 3.0, 'circle', null, null),
new LinearSales(25, 100, 3.0, 'circle', null, null), LinearSales(34, 150, 5.0, null, null, null),
new LinearSales(34, 150, 5.0, null, null, null), LinearSales(37, 10, 4.5, null, null, null),
new LinearSales(37, 10, 4.5, null, null, null),
// Render a hollow circle, filled in with white. // Render a hollow circle, filled in with white.
new LinearSales( LinearSales(45, 300, 8.0, 'circle', charts.MaterialPalette.white, 2.0),
45, 300, 8.0, 'circle', charts.MaterialPalette.white, 2.0), LinearSales(52, 15, 4.0, null, null, null),
new LinearSales(52, 15, 4.0, null, null, null),
// Render a hollow square, filled in with white. // Render a hollow square, filled in with white.
new LinearSales(56, 200, 7.0, null, charts.MaterialPalette.white, 2.0), LinearSales(56, 200, 7.0, null, charts.MaterialPalette.white, 2.0),
]; ];
final maxMeasure = 300; const maxMeasure = 300;
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
// Providing a color function is optional. // Providing a color function is optional.
colorFn: (LinearSales sales, _) { colorFn: (LinearSales sales, _) {

53
web/charts/lib/behaviors/selection_user_managed.dart
View File

@@ -32,11 +32,12 @@ class SelectionUserManaged extends StatefulWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SelectionUserManaged(this.seriesList, {this.animate}); const SelectionUserManaged(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory SelectionUserManaged.withSampleData() { factory SelectionUserManaged.withSampleData() {
return new SelectionUserManaged( return SelectionUserManaged(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -48,22 +49,22 @@ class SelectionUserManaged extends StatefulWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SelectionUserManaged.withRandomData() { factory SelectionUserManaged.withRandomData() {
return new SelectionUserManaged(_createRandomData()); return SelectionUserManaged(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -77,14 +78,14 @@ class SelectionUserManaged extends StatefulWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -96,20 +97,20 @@ class SelectionUserManaged extends StatefulWidget {
@override @override
SelectionUserManagedState createState() { SelectionUserManagedState createState() {
return new SelectionUserManagedState(); return SelectionUserManagedState();
} }
} }
class SelectionUserManagedState extends State<SelectionUserManaged> { class SelectionUserManagedState extends State<SelectionUserManaged> {
final _myState = new charts.UserManagedState<String>(); final _myState = charts.UserManagedState<String>();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final chart = new charts.BarChart( final chart = charts.BarChart(
widget.seriesList, widget.seriesList,
animate: false, //widget.animate, animate: false, //widget.animate,
selectionModels: [ selectionModels: [
new charts.SelectionModelConfig( charts.SelectionModelConfig(
type: charts.SelectionModelType.info, type: charts.SelectionModelType.info,
updatedListener: _infoSelectionModelUpdated) updatedListener: _infoSelectionModelUpdated)
], ],
@@ -119,17 +120,17 @@ class SelectionUserManagedState extends State<SelectionUserManaged> {
// The initial selection can still be optionally added by adding the // The initial selection can still be optionally added by adding the
// initial selection behavior. // initial selection behavior.
behaviors: [ behaviors: [
new charts.InitialSelection(selectedDataConfig: [ charts.InitialSelection(selectedDataConfig: [
new charts.SeriesDatumConfig<String>('Sales', '2016') charts.SeriesDatumConfig<String>('Sales', '2016')
]) ])
], ],
); );
final clearSelection = new MaterialButton( final clearSelection = MaterialButton(
onPressed: _handleClearSelection, child: new Text('Clear Selection')); onPressed: _handleClearSelection, child: const Text('Clear Selection'));
return new Column( return Column(
children: [new SizedBox(child: chart, height: 150.0), clearSelection]); children: [SizedBox(child: chart, height: 150.0), clearSelection]);
} }
void _infoSelectionModelUpdated(charts.SelectionModel<String> model) { void _infoSelectionModelUpdated(charts.SelectionModel<String> model) {
@@ -141,7 +142,7 @@ class SelectionUserManagedState extends State<SelectionUserManaged> {
// This also allows you to listen to the selection model update events and // This also allows you to listen to the selection model update events and
// alter the selection. // alter the selection.
_myState.selectionModels[charts.SelectionModelType.info] = _myState.selectionModels[charts.SelectionModelType.info] =
new charts.UserManagedSelectionModel(model: model); charts.UserManagedSelectionModel(model: model);
} }
void _handleClearSelection() { void _handleClearSelection() {
@@ -150,7 +151,7 @@ class SelectionUserManagedState extends State<SelectionUserManaged> {
// no selection model to clear all selection when rebuilt. // no selection model to clear all selection when rebuilt.
setState(() { setState(() {
_myState.selectionModels[charts.SelectionModelType.info] = _myState.selectionModels[charts.SelectionModelType.info] =
new charts.UserManagedSelectionModel(); charts.UserManagedSelectionModel();
}); });
} }
} }

56
web/charts/lib/behaviors/slider.dart
View File

@@ -36,11 +36,11 @@ class SliderLine extends StatefulWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SliderLine(this.seriesList, {this.animate}); const SliderLine(this.seriesList, {this.animate, Key key}) : super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory SliderLine.withSampleData() { factory SliderLine.withSampleData() {
return new SliderLine( return SliderLine(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -52,22 +52,22 @@ class SliderLine extends StatefulWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SliderLine.withRandomData() { factory SliderLine.withRandomData() {
return new SliderLine(_createRandomData()); return SliderLine(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -80,19 +80,19 @@ class SliderLine extends StatefulWidget {
// We need a Stateful widget to build the selection details with the current // We need a Stateful widget to build the selection details with the current
// selection as the state. // selection as the state.
@override @override
State<StatefulWidget> createState() => new _SliderCallbackState(); State<StatefulWidget> createState() => _SliderCallbackState();
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -126,9 +126,9 @@ class _SliderCallbackState extends State<SliderLine> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
// The children consist of a Chart and Text widgets below to hold the info. // The children consist of a Chart and Text widgets below to hold the info.
final children = <Widget>[ final children = <Widget>[
new SizedBox( SizedBox(
height: 150.0, height: 150.0,
child: new charts.LineChart( child: charts.LineChart(
widget.seriesList, widget.seriesList,
animate: widget.animate, animate: widget.animate,
// Configures a [Slider] behavior. // Configures a [Slider] behavior.
@@ -159,7 +159,7 @@ class _SliderCallbackState extends State<SliderLine> {
// [style] takes in a [SliderStyle] configuration object, and // [style] takes in a [SliderStyle] configuration object, and
// configures the color and sizing of the slider line and handle. // configures the color and sizing of the slider line and handle.
behaviors: [ behaviors: [
new charts.Slider( charts.Slider(
initialDomainValue: 1.0, onChangeCallback: _onSliderChange), initialDomainValue: 1.0, onChangeCallback: _onSliderChange),
], ],
)), )),
@@ -167,23 +167,23 @@ class _SliderCallbackState extends State<SliderLine> {
// If there is a slider change event, then include the details. // If there is a slider change event, then include the details.
if (_sliderDomainValue != null) { if (_sliderDomainValue != null) {
children.add(new Padding( children.add(Padding(
padding: new EdgeInsets.only(top: 5.0), padding: const EdgeInsets.only(top: 5.0),
child: new Text('Slider domain value: $_sliderDomainValue'))); child: Text('Slider domain value: $_sliderDomainValue')));
} }
if (_sliderPosition != null) { if (_sliderPosition != null) {
children.add(new Padding( children.add(Padding(
padding: new EdgeInsets.only(top: 5.0), padding: const EdgeInsets.only(top: 5.0),
child: new Text( child: Text(
'Slider position: ${_sliderPosition.x}, ${_sliderPosition.y}'))); 'Slider position: ${_sliderPosition.x}, ${_sliderPosition.y}')));
} }
if (_sliderDragState != null) { if (_sliderDragState != null) {
children.add(new Padding( children.add(Padding(
padding: new EdgeInsets.only(top: 5.0), padding: const EdgeInsets.only(top: 5.0),
child: new Text('Slider drag state: $_sliderDragState'))); child: Text('Slider drag state: $_sliderDragState')));
} }
return new Column(children: children); return Column(children: children);
} }
} }

91
web/charts/lib/behaviors/sliding_viewport_on_selection.dart
View File

@@ -25,11 +25,12 @@ class SlidingViewportOnSelection extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SlidingViewportOnSelection(this.seriesList, {this.animate}); const SlidingViewportOnSelection(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory SlidingViewportOnSelection.withSampleData() { factory SlidingViewportOnSelection.withSampleData() {
return new SlidingViewportOnSelection( return SlidingViewportOnSelection(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,35 +42,35 @@ class SlidingViewportOnSelection extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SlidingViewportOnSelection.withRandomData() { factory SlidingViewportOnSelection.withRandomData() {
return new SlidingViewportOnSelection(_createRandomData()); return SlidingViewportOnSelection(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
new OrdinalSales('2018', random.nextInt(100)), OrdinalSales('2018', random.nextInt(100)),
new OrdinalSales('2019', random.nextInt(100)), OrdinalSales('2019', random.nextInt(100)),
new OrdinalSales('2020', random.nextInt(100)), OrdinalSales('2020', random.nextInt(100)),
new OrdinalSales('2021', random.nextInt(100)), OrdinalSales('2021', random.nextInt(100)),
new OrdinalSales('2022', random.nextInt(100)), OrdinalSales('2022', random.nextInt(100)),
new OrdinalSales('2023', random.nextInt(100)), OrdinalSales('2023', random.nextInt(100)),
new OrdinalSales('2024', random.nextInt(100)), OrdinalSales('2024', random.nextInt(100)),
new OrdinalSales('2025', random.nextInt(100)), OrdinalSales('2025', random.nextInt(100)),
new OrdinalSales('2026', random.nextInt(100)), OrdinalSales('2026', random.nextInt(100)),
new OrdinalSales('2027', random.nextInt(100)), OrdinalSales('2027', random.nextInt(100)),
new OrdinalSales('2028', random.nextInt(100)), OrdinalSales('2028', random.nextInt(100)),
new OrdinalSales('2029', random.nextInt(100)), OrdinalSales('2029', random.nextInt(100)),
new OrdinalSales('2030', random.nextInt(100)), OrdinalSales('2030', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -82,49 +83,49 @@ class SlidingViewportOnSelection extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
behaviors: [ behaviors: [
// Add the sliding viewport behavior to have the viewport center on the // Add the sliding viewport behavior to have the viewport center on the
// domain that is currently selected. // domain that is currently selected.
new charts.SlidingViewport(), charts.SlidingViewport(),
// A pan and zoom behavior helps demonstrate the sliding viewport // A pan and zoom behavior helps demonstrate the sliding viewport
// behavior by allowing the data visible in the viewport to be adjusted // behavior by allowing the data visible in the viewport to be adjusted
// dynamically. // dynamically.
new charts.PanAndZoomBehavior(), charts.PanAndZoomBehavior(),
], ],
// Set an initial viewport to demonstrate the sliding viewport behavior on // Set an initial viewport to demonstrate the sliding viewport behavior on
// initial chart load. // initial chart load.
domainAxis: new charts.OrdinalAxisSpec( domainAxis:
viewport: new charts.OrdinalViewport('2018', 4)), charts.OrdinalAxisSpec(viewport: charts.OrdinalViewport('2018', 4)),
); );
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
new OrdinalSales('2018', 33), OrdinalSales('2018', 33),
new OrdinalSales('2019', 80), OrdinalSales('2019', 80),
new OrdinalSales('2020', 21), OrdinalSales('2020', 21),
new OrdinalSales('2021', 77), OrdinalSales('2021', 77),
new OrdinalSales('2022', 8), OrdinalSales('2022', 8),
new OrdinalSales('2023', 12), OrdinalSales('2023', 12),
new OrdinalSales('2024', 42), OrdinalSales('2024', 42),
new OrdinalSales('2025', 70), OrdinalSales('2025', 70),
new OrdinalSales('2026', 77), OrdinalSales('2026', 77),
new OrdinalSales('2027', 55), OrdinalSales('2027', 55),
new OrdinalSales('2028', 19), OrdinalSales('2028', 19),
new OrdinalSales('2029', 66), OrdinalSales('2029', 66),
new OrdinalSales('2030', 27), OrdinalSales('2030', 27),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

30
web/charts/lib/combo_chart/combo_gallery.dart
View File

@@ -23,35 +23,35 @@ import 'scatter_plot_line.dart';
List<GalleryScaffold> buildGallery() { List<GalleryScaffold> buildGallery() {
return [ return [
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Ordinal Combo Chart', title: 'Ordinal Combo Chart',
subtitle: 'Ordinal combo chart with bars and lines', subtitle: 'Ordinal combo chart with bars and lines',
childBuilder: () => new OrdinalComboBarLineChart.withRandomData(), childBuilder: () => OrdinalComboBarLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Numeric Line Bar Combo Chart', title: 'Numeric Line Bar Combo Chart',
subtitle: 'Numeric combo chart with lines and bars', subtitle: 'Numeric combo chart with lines and bars',
childBuilder: () => new NumericComboLineBarChart.withRandomData(), childBuilder: () => NumericComboLineBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Numeric Line Points Combo Chart', title: 'Numeric Line Points Combo Chart',
subtitle: 'Numeric combo chart with lines and points', subtitle: 'Numeric combo chart with lines and points',
childBuilder: () => new NumericComboLinePointChart.withRandomData(), childBuilder: () => NumericComboLinePointChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Time Series Combo Chart', title: 'Time Series Combo Chart',
subtitle: 'Time series combo chart with lines and points', subtitle: 'Time series combo chart with lines and points',
childBuilder: () => new DateTimeComboLinePointChart.withRandomData(), childBuilder: () => DateTimeComboLinePointChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.scatter_plot), listTileIcon: const Icon(Icons.scatter_plot),
title: 'Scatter Plot Combo Chart', title: 'Scatter Plot Combo Chart',
subtitle: 'Scatter plot combo chart with a line', subtitle: 'Scatter plot combo chart with a line',
childBuilder: () => new ScatterPlotComboLineChart.withRandomData(), childBuilder: () => ScatterPlotComboLineChart.withRandomData(),
), ),
]; ];
} }

75
web/charts/lib/combo_chart/date_time_line_point.dart
View File

@@ -30,11 +30,12 @@ class DateTimeComboLinePointChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
DateTimeComboLinePointChart(this.seriesList, {this.animate}); const DateTimeComboLinePointChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [TimeSeriesChart] with sample data and no transition. /// Creates a [TimeSeriesChart] with sample data and no transition.
factory DateTimeComboLinePointChart.withSampleData() { factory DateTimeComboLinePointChart.withSampleData() {
return new DateTimeComboLinePointChart( return DateTimeComboLinePointChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -46,50 +47,50 @@ class DateTimeComboLinePointChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory DateTimeComboLinePointChart.withRandomData() { factory DateTimeComboLinePointChart.withRandomData() {
return new DateTimeComboLinePointChart(_createRandomData()); return DateTimeComboLinePointChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() { static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 9, 19), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 9, 26), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 10, 3), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 10, 10), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 10, 10), random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 9, 19), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 9, 26), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 10, 3), random.nextInt(100)),
new TimeSeriesSales(new DateTime(2017, 10, 10), random.nextInt(100)), TimeSeriesSales(DateTime(2017, 10, 10), random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), tableSalesData[0].sales), TimeSeriesSales(DateTime(2017, 9, 19), tableSalesData[0].sales),
new TimeSeriesSales(new DateTime(2017, 9, 26), tableSalesData[1].sales), TimeSeriesSales(DateTime(2017, 9, 26), tableSalesData[1].sales),
new TimeSeriesSales(new DateTime(2017, 10, 3), tableSalesData[2].sales), TimeSeriesSales(DateTime(2017, 10, 3), tableSalesData[2].sales),
new TimeSeriesSales(new DateTime(2017, 10, 10), tableSalesData[3].sales), TimeSeriesSales(DateTime(2017, 10, 10), tableSalesData[3].sales),
]; ];
return [ return [
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales, measureFn: (TimeSeriesSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales, measureFn: (TimeSeriesSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,
@@ -103,17 +104,17 @@ class DateTimeComboLinePointChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.TimeSeriesChart( return charts.TimeSeriesChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Configure the default renderer as a line renderer. This will be used // Configure the default renderer as a line renderer. This will be used
// for any series that does not define a rendererIdKey. // for any series that does not define a rendererIdKey.
// //
// This is the default configuration, but is shown here for illustration. // This is the default configuration, but is shown here for illustration.
defaultRenderer: new charts.LineRendererConfig(), defaultRenderer: charts.LineRendererConfig(),
// Custom renderer configuration for the point series. // Custom renderer configuration for the point series.
customSeriesRenderers: [ customSeriesRenderers: [
new charts.PointRendererConfig( charts.PointRendererConfig(
// ID used to link series to this renderer. // ID used to link series to this renderer.
customRendererId: 'customPoint') customRendererId: 'customPoint')
], ],
@@ -127,42 +128,42 @@ class DateTimeComboLinePointChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() { static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), 5), TimeSeriesSales(DateTime(2017, 9, 19), 5),
new TimeSeriesSales(new DateTime(2017, 9, 26), 25), TimeSeriesSales(DateTime(2017, 9, 26), 25),
new TimeSeriesSales(new DateTime(2017, 10, 3), 100), TimeSeriesSales(DateTime(2017, 10, 3), 100),
new TimeSeriesSales(new DateTime(2017, 10, 10), 75), TimeSeriesSales(DateTime(2017, 10, 10), 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), 10), TimeSeriesSales(DateTime(2017, 9, 19), 10),
new TimeSeriesSales(new DateTime(2017, 9, 26), 50), TimeSeriesSales(DateTime(2017, 9, 26), 50),
new TimeSeriesSales(new DateTime(2017, 10, 3), 200), TimeSeriesSales(DateTime(2017, 10, 3), 200),
new TimeSeriesSales(new DateTime(2017, 10, 10), 150), TimeSeriesSales(DateTime(2017, 10, 10), 150),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new TimeSeriesSales(new DateTime(2017, 9, 19), 10), TimeSeriesSales(DateTime(2017, 9, 19), 10),
new TimeSeriesSales(new DateTime(2017, 9, 26), 50), TimeSeriesSales(DateTime(2017, 9, 26), 50),
new TimeSeriesSales(new DateTime(2017, 10, 3), 200), TimeSeriesSales(DateTime(2017, 10, 3), 200),
new TimeSeriesSales(new DateTime(2017, 10, 10), 150), TimeSeriesSales(DateTime(2017, 10, 10), 150),
]; ];
return [ return [
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales, measureFn: (TimeSeriesSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales, measureFn: (TimeSeriesSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<TimeSeriesSales, DateTime>( charts.Series<TimeSeriesSales, DateTime>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (TimeSeriesSales sales, _) => sales.time, domainFn: (TimeSeriesSales sales, _) => sales.time,

75
web/charts/lib/combo_chart/numeric_line_bar.dart
View File

@@ -25,11 +25,12 @@ class NumericComboLineBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
NumericComboLineBarChart(this.seriesList, {this.animate}); const NumericComboLineBarChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory NumericComboLineBarChart.withSampleData() { factory NumericComboLineBarChart.withSampleData() {
return new NumericComboLineBarChart( return NumericComboLineBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,36 +42,36 @@ class NumericComboLineBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory NumericComboLineBarChart.withRandomData() { factory NumericComboLineBarChart.withRandomData() {
return new NumericComboLineBarChart(_createRandomData()); return NumericComboLineBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new LinearSales(0, desktopSalesData[0].sales), LinearSales(0, desktopSalesData[0].sales),
new LinearSales(1, desktopSalesData[1].sales), LinearSales(1, desktopSalesData[1].sales),
new LinearSales(2, desktopSalesData[2].sales), LinearSales(2, desktopSalesData[2].sales),
new LinearSales(3, desktopSalesData[3].sales), LinearSales(3, desktopSalesData[3].sales),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new LinearSales(0, tableSalesData[0].sales * 2), LinearSales(0, tableSalesData[0].sales * 2),
new LinearSales(1, tableSalesData[1].sales * 2), LinearSales(1, tableSalesData[1].sales * 2),
new LinearSales(2, tableSalesData[2].sales * 2), LinearSales(2, tableSalesData[2].sales * 2),
new LinearSales(3, tableSalesData[3].sales * 2), LinearSales(3, tableSalesData[3].sales * 2),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -79,7 +80,7 @@ class NumericComboLineBarChart extends StatelessWidget {
) )
// Configure our custom bar renderer for this series. // Configure our custom bar renderer for this series.
..setAttribute(charts.rendererIdKey, 'customBar'), ..setAttribute(charts.rendererIdKey, 'customBar'),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -88,7 +89,7 @@ class NumericComboLineBarChart extends StatelessWidget {
) )
// Configure our custom bar renderer for this series. // Configure our custom bar renderer for this series.
..setAttribute(charts.rendererIdKey, 'customBar'), ..setAttribute(charts.rendererIdKey, 'customBar'),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -100,14 +101,14 @@ class NumericComboLineBarChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.NumericComboChart(seriesList, return charts.NumericComboChart(seriesList,
animate: animate, animate: animate,
// Configure the default renderer as a line renderer. This will be used // Configure the default renderer as a line renderer. This will be used
// for any series that does not define a rendererIdKey. // for any series that does not define a rendererIdKey.
defaultRenderer: new charts.LineRendererConfig(), defaultRenderer: charts.LineRendererConfig(),
// Custom renderer configuration for the bar series. // Custom renderer configuration for the bar series.
customSeriesRenderers: [ customSeriesRenderers: [
new charts.BarRendererConfig( charts.BarRendererConfig(
// ID used to link series to this renderer. // ID used to link series to this renderer.
customRendererId: 'customBar') customRendererId: 'customBar')
]); ]);
@@ -116,28 +117,28 @@ class NumericComboLineBarChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new LinearSales(0, 10), LinearSales(0, 10),
new LinearSales(1, 50), LinearSales(1, 50),
new LinearSales(2, 200), LinearSales(2, 200),
new LinearSales(3, 150), LinearSales(3, 150),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -146,7 +147,7 @@ class NumericComboLineBarChart extends StatelessWidget {
) )
// Configure our custom bar renderer for this series. // Configure our custom bar renderer for this series.
..setAttribute(charts.rendererIdKey, 'customBar'), ..setAttribute(charts.rendererIdKey, 'customBar'),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -155,7 +156,7 @@ class NumericComboLineBarChart extends StatelessWidget {
) )
// Configure our custom bar renderer for this series. // Configure our custom bar renderer for this series.
..setAttribute(charts.rendererIdKey, 'customBar'), ..setAttribute(charts.rendererIdKey, 'customBar'),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

75
web/charts/lib/combo_chart/numeric_line_point.dart
View File

@@ -30,11 +30,12 @@ class NumericComboLinePointChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
NumericComboLinePointChart(this.seriesList, {this.animate}); const NumericComboLinePointChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory NumericComboLinePointChart.withSampleData() { factory NumericComboLinePointChart.withSampleData() {
return new NumericComboLinePointChart( return NumericComboLinePointChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -46,50 +47,50 @@ class NumericComboLinePointChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory NumericComboLinePointChart.withRandomData() { factory NumericComboLinePointChart.withRandomData() {
return new NumericComboLinePointChart(_createRandomData()); return NumericComboLinePointChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new LinearSales(0, tableSalesData[0].sales), LinearSales(0, tableSalesData[0].sales),
new LinearSales(1, tableSalesData[1].sales), LinearSales(1, tableSalesData[1].sales),
new LinearSales(2, tableSalesData[2].sales), LinearSales(2, tableSalesData[2].sales),
new LinearSales(3, tableSalesData[3].sales), LinearSales(3, tableSalesData[3].sales),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -103,14 +104,14 @@ class NumericComboLinePointChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.NumericComboChart(seriesList, return charts.NumericComboChart(seriesList,
animate: animate, animate: animate,
// Configure the default renderer as a line renderer. This will be used // Configure the default renderer as a line renderer. This will be used
// for any series that does not define a rendererIdKey. // for any series that does not define a rendererIdKey.
defaultRenderer: new charts.LineRendererConfig(), defaultRenderer: charts.LineRendererConfig(),
// Custom renderer configuration for the point series. // Custom renderer configuration for the point series.
customSeriesRenderers: [ customSeriesRenderers: [
new charts.PointRendererConfig( charts.PointRendererConfig(
// ID used to link series to this renderer. // ID used to link series to this renderer.
customRendererId: 'customPoint') customRendererId: 'customPoint')
]); ]);
@@ -119,42 +120,42 @@ class NumericComboLinePointChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new LinearSales(0, 10), LinearSales(0, 10),
new LinearSales(1, 50), LinearSales(1, 50),
new LinearSales(2, 200), LinearSales(2, 200),
new LinearSales(3, 150), LinearSales(3, 150),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new LinearSales(0, 10), LinearSales(0, 10),
new LinearSales(1, 50), LinearSales(1, 50),
new LinearSales(2, 200), LinearSales(2, 200),
new LinearSales(3, 150), LinearSales(3, 150),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: tableSalesData, data: tableSalesData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

75
web/charts/lib/combo_chart/ordinal_bar_line.dart
View File

@@ -25,10 +25,11 @@ class OrdinalComboBarLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
OrdinalComboBarLineChart(this.seriesList, {this.animate}); const OrdinalComboBarLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
factory OrdinalComboBarLineChart.withSampleData() { factory OrdinalComboBarLineChart.withSampleData() {
return new OrdinalComboBarLineChart( return OrdinalComboBarLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,48 +41,48 @@ class OrdinalComboBarLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory OrdinalComboBarLineChart.withRandomData() { factory OrdinalComboBarLineChart.withRandomData() {
return new OrdinalComboBarLineChart(_createRandomData()); return OrdinalComboBarLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData), data: desktopSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData), data: tableSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
@@ -95,15 +96,15 @@ class OrdinalComboBarLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.OrdinalComboChart(seriesList, return charts.OrdinalComboChart(seriesList,
animate: animate, animate: animate,
// Configure the default renderer as a bar renderer. // Configure the default renderer as a bar renderer.
defaultRenderer: new charts.BarRendererConfig( defaultRenderer: charts.BarRendererConfig(
groupingType: charts.BarGroupingType.grouped), groupingType: charts.BarGroupingType.grouped),
// Custom renderer configuration for the line series. This will be used for // Custom renderer configuration for the line series. This will be used for
// any series that does not define a rendererIdKey. // any series that does not define a rendererIdKey.
customSeriesRenderers: [ customSeriesRenderers: [
new charts.LineRendererConfig( charts.LineRendererConfig(
// ID used to link series to this renderer. // ID used to link series to this renderer.
customRendererId: 'customLine') customRendererId: 'customLine')
]); ]);
@@ -112,40 +113,40 @@ class OrdinalComboBarLineChart extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tableSalesData = [ final tableSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 200), OrdinalSales('2016', 200),
new OrdinalSales('2017', 150), OrdinalSales('2017', 150),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData), data: desktopSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tableSalesData), data: tableSalesData),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile ', id: 'Mobile ',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,

85
web/charts/lib/combo_chart/scatter_plot_line.dart
View File

@@ -25,11 +25,12 @@ class ScatterPlotComboLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
ScatterPlotComboLineChart(this.seriesList, {this.animate}); const ScatterPlotComboLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [ScatterPlotChart] with sample data and no transition. /// Creates a [ScatterPlotChart] with sample data and no transition.
factory ScatterPlotComboLineChart.withSampleData() { factory ScatterPlotComboLineChart.withSampleData() {
return new ScatterPlotComboLineChart( return ScatterPlotComboLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,40 +42,40 @@ class ScatterPlotComboLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory ScatterPlotComboLineChart.withRandomData() { factory ScatterPlotComboLineChart.withRandomData() {
return new ScatterPlotComboLineChart(_createRandomData()); return ScatterPlotComboLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final makeRadius = (int value) => (random.nextInt(value) + 2).toDouble(); makeRadius(int value) => (random.nextInt(value) + 2).toDouble();
final desktopSalesData = [ final desktopSalesData = [
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
new LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)), LinearSales(random.nextInt(100), random.nextInt(100), makeRadius(6)),
]; ];
var myRegressionData = [ var myRegressionData = [
new LinearSales(0, desktopSalesData[0].sales, 3.5), LinearSales(0, desktopSalesData[0].sales, 3.5),
new LinearSales( LinearSales(
100, desktopSalesData[desktopSalesData.length - 1].sales, 7.5), 100, desktopSalesData[desktopSalesData.length - 1].sales, 7.5),
]; ];
final maxMeasure = 100; const maxMeasure = 100;
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
// Providing a color function is optional. // Providing a color function is optional.
colorFn: (LinearSales sales, _) { colorFn: (LinearSales sales, _) {
@@ -95,7 +96,7 @@ class ScatterPlotComboLineChart extends StatelessWidget {
radiusPxFn: (LinearSales sales, _) => sales.radius, radiusPxFn: (LinearSales sales, _) => sales.radius,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -109,17 +110,17 @@ class ScatterPlotComboLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.ScatterPlotChart(seriesList, return charts.ScatterPlotChart(seriesList,
animate: animate, animate: animate,
// Configure the default renderer as a point renderer. This will be used // Configure the default renderer as a point renderer. This will be used
// for any series that does not define a rendererIdKey. // for any series that does not define a rendererIdKey.
// //
// This is the default configuration, but is shown here for // This is the default configuration, but is shown here for
// illustration. // illustration.
defaultRenderer: new charts.PointRendererConfig(), defaultRenderer: charts.PointRendererConfig(),
// Custom renderer configuration for the line series. // Custom renderer configuration for the line series.
customSeriesRenderers: [ customSeriesRenderers: [
new charts.LineRendererConfig( charts.LineRendererConfig(
// ID used to link series to this renderer. // ID used to link series to this renderer.
customRendererId: 'customLine', customRendererId: 'customLine',
// Configure the regression line to be painted above the points. // Configure the regression line to be painted above the points.
@@ -133,29 +134,29 @@ class ScatterPlotComboLineChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new LinearSales(0, 5, 3.0), LinearSales(0, 5, 3.0),
new LinearSales(10, 25, 5.0), LinearSales(10, 25, 5.0),
new LinearSales(12, 75, 4.0), LinearSales(12, 75, 4.0),
new LinearSales(13, 225, 5.0), LinearSales(13, 225, 5.0),
new LinearSales(16, 50, 4.0), LinearSales(16, 50, 4.0),
new LinearSales(24, 75, 3.0), LinearSales(24, 75, 3.0),
new LinearSales(25, 100, 3.0), LinearSales(25, 100, 3.0),
new LinearSales(34, 150, 5.0), LinearSales(34, 150, 5.0),
new LinearSales(37, 10, 4.5), LinearSales(37, 10, 4.5),
new LinearSales(45, 300, 8.0), LinearSales(45, 300, 8.0),
new LinearSales(52, 15, 4.0), LinearSales(52, 15, 4.0),
new LinearSales(56, 200, 7.0), LinearSales(56, 200, 7.0),
]; ];
var myRegressionData = [ var myRegressionData = [
new LinearSales(0, 5, 3.5), LinearSales(0, 5, 3.5),
new LinearSales(56, 240, 3.5), LinearSales(56, 240, 3.5),
]; ];
final maxMeasure = 300; const maxMeasure = 300;
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
// Providing a color function is optional. // Providing a color function is optional.
colorFn: (LinearSales sales, _) { colorFn: (LinearSales sales, _) {
@@ -176,7 +177,7 @@ class ScatterPlotComboLineChart extends StatelessWidget {
radiusPxFn: (LinearSales sales, _) => sales.radius, radiusPxFn: (LinearSales sales, _) => sales.radius,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

14
web/charts/lib/drawer.dart
View File

@@ -20,7 +20,7 @@ class GalleryDrawer extends StatelessWidget {
final bool showPerformanceOverlay; final bool showPerformanceOverlay;
final ValueChanged<bool> onShowPerformanceOverlayChanged; final ValueChanged<bool> onShowPerformanceOverlayChanged;
GalleryDrawer( const GalleryDrawer(
{Key key, {Key key,
this.showPerformanceOverlay, this.showPerformanceOverlay,
this.onShowPerformanceOverlayChanged}) this.onShowPerformanceOverlayChanged})
@@ -28,17 +28,17 @@ class GalleryDrawer extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Drawer( return Drawer(
child: new ListView(children: <Widget>[ child: ListView(children: <Widget>[
// Performance overlay toggle. // Performance overlay toggle.
new ListTile( ListTile(
leading: new Icon(Icons.assessment), leading: const Icon(Icons.assessment),
title: new Text('Performance Overlay'), title: const Text('Performance Overlay'),
onTap: () { onTap: () {
onShowPerformanceOverlayChanged(!showPerformanceOverlay); onShowPerformanceOverlayChanged(!showPerformanceOverlay);
}, },
selected: showPerformanceOverlay, selected: showPerformanceOverlay,
trailing: new Checkbox( trailing: Checkbox(
value: showPerformanceOverlay, value: showPerformanceOverlay,
onChanged: (bool value) { onChanged: (bool value) {
onShowPerformanceOverlayChanged(!showPerformanceOverlay); onShowPerformanceOverlayChanged(!showPerformanceOverlay);

35
web/charts/lib/gallery_scaffold.dart
View File

@@ -15,7 +15,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
typedef Widget GalleryWidgetBuilder(); typedef GalleryWidgetBuilder = Widget Function();
/// Helper to build gallery. /// Helper to build gallery.
class GalleryScaffold extends StatefulWidget { class GalleryScaffold extends StatefulWidget {
@@ -25,20 +25,25 @@ class GalleryScaffold extends StatefulWidget {
final String subtitle; final String subtitle;
final GalleryWidgetBuilder childBuilder; final GalleryWidgetBuilder childBuilder;
GalleryScaffold( const GalleryScaffold(
{this.listTileIcon, this.title, this.subtitle, this.childBuilder}); {this.listTileIcon,
this.title,
this.subtitle,
this.childBuilder,
Key key})
: super(key: key);
/// Gets the gallery /// Gets the gallery
Widget buildGalleryListTile(BuildContext context) => new ListTile( Widget buildGalleryListTile(BuildContext context) => ListTile(
leading: listTileIcon, leading: listTileIcon,
title: new Text(title), title: Text(title),
subtitle: new Text(subtitle), subtitle: Text(subtitle),
onTap: () { onTap: () {
Navigator.push(context, new MaterialPageRoute(builder: (_) => this)); Navigator.push(context, MaterialPageRoute(builder: (_) => this));
}); });
@override @override
_GalleryScaffoldState createState() => new _GalleryScaffoldState(); _GalleryScaffoldState createState() => _GalleryScaffoldState();
} }
class _GalleryScaffoldState extends State<GalleryScaffold> { class _GalleryScaffoldState extends State<GalleryScaffold> {
@@ -48,15 +53,15 @@ class _GalleryScaffoldState extends State<GalleryScaffold> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Scaffold( return Scaffold(
appBar: new AppBar(title: new Text(widget.title)), appBar: AppBar(title: Text(widget.title)),
body: new Padding( body: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: new Column(children: <Widget>[ child: Column(children: <Widget>[
new SizedBox(height: 250.0, child: widget.childBuilder()), SizedBox(height: 250.0, child: widget.childBuilder()),
])), ])),
floatingActionButton: new FloatingActionButton( floatingActionButton: FloatingActionButton(
child: new Icon(Icons.refresh), onPressed: _handleButtonPress), child: const Icon(Icons.refresh), onPressed: _handleButtonPress),
); );
} }
} }

10
web/charts/lib/home.dart
View File

@@ -53,7 +53,7 @@ class Home extends StatelessWidget {
Home( Home(
{Key key, {Key key,
this.showPerformanceOverlay, this.showPerformanceOverlay,
this.onShowPerformanceOverlayChanged}) @required this.onShowPerformanceOverlayChanged})
: super(key: key) { : super(key: key) {
assert(onShowPerformanceOverlayChanged != null); assert(onShowPerformanceOverlayChanged != null);
} }
@@ -106,12 +106,12 @@ class Home extends StatelessWidget {
_setupPerformance(); _setupPerformance();
return new Scaffold( return Scaffold(
drawer: new GalleryDrawer( drawer: GalleryDrawer(
showPerformanceOverlay: showPerformanceOverlay, showPerformanceOverlay: showPerformanceOverlay,
onShowPerformanceOverlayChanged: onShowPerformanceOverlayChanged), onShowPerformanceOverlayChanged: onShowPerformanceOverlayChanged),
appBar: new AppBar(title: new Text(defaultConfig.appName)), appBar: AppBar(title: Text(defaultConfig.appName)),
body: new ListView(padding: kMaterialListPadding, children: galleries), body: ListView(padding: kMaterialListPadding, children: galleries),
); );
} }

24
web/charts/lib/i18n/i18n_gallery.dart
View File

@@ -22,29 +22,29 @@ import 'rtl_series_legend.dart';
List<GalleryScaffold> buildGallery() { List<GalleryScaffold> buildGallery() {
return [ return [
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'RTL Bar Chart', title: 'RTL Bar Chart',
subtitle: 'Simple bar chart in RTL', subtitle: 'Simple bar chart in RTL',
childBuilder: () => new RTLBarChart.withRandomData(), childBuilder: () => RTLBarChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'RTL Line Chart', title: 'RTL Line Chart',
subtitle: 'Simple line chart in RTL', subtitle: 'Simple line chart in RTL',
childBuilder: () => new RTLLineChart.withRandomData(), childBuilder: () => RTLLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'RTL Line Segments', title: 'RTL Line Segments',
subtitle: 'Stacked area chart with style segments in RTL', subtitle: 'Stacked area chart with style segments in RTL',
childBuilder: () => new RTLLineSegments.withRandomData(), childBuilder: () => RTLLineSegments.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.flag), listTileIcon: const Icon(Icons.flag),
title: 'RTL Series Legend', title: 'RTL Series Legend',
subtitle: 'Series legend in RTL', subtitle: 'Series legend in RTL',
childBuilder: () => new RTLSeriesLegend.withRandomData(), childBuilder: () => RTLSeriesLegend.withRandomData(),
), ),
]; ];
} }

32
web/charts/lib/i18n/rtl_bar_chart.dart
View File

@@ -24,11 +24,11 @@ class RTLBarChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
RTLBarChart(this.seriesList, {this.animate}); const RTLBarChart(this.seriesList, {this.animate, Key key}) : super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory RTLBarChart.withSampleData() { factory RTLBarChart.withSampleData() {
return new RTLBarChart( return RTLBarChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +40,22 @@ class RTLBarChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory RTLBarChart.withRandomData() { factory RTLBarChart.withRandomData() {
return new RTLBarChart(_createRandomData()); return RTLBarChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -81,9 +81,9 @@ class RTLBarChart extends StatelessWidget {
// //
// Optionally, [RTLSpec] can be passed in when creating the chart to specify // Optionally, [RTLSpec] can be passed in when creating the chart to specify
// chart display settings in RTL mode. // chart display settings in RTL mode.
return new Directionality( return Directionality(
textDirection: TextDirection.rtl, textDirection: TextDirection.rtl,
child: new charts.BarChart( child: charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
vertical: false, vertical: false,
@@ -93,14 +93,14 @@ class RTLBarChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [ final data = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Sales', id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

33
web/charts/lib/i18n/rtl_line_chart.dart
View File

@@ -24,11 +24,12 @@ class RTLLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
RTLLineChart(this.seriesList, {this.animate}); const RTLLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory RTLLineChart.withSampleData() { factory RTLLineChart.withSampleData() {
return new RTLLineChart( return RTLLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class RTLLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory RTLLineChart.withRandomData() { factory RTLLineChart.withRandomData() {
return new RTLLineChart(_createRandomData()); return RTLLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -78,9 +79,9 @@ class RTLLineChart extends StatelessWidget {
// Measure axis positions are flipped. Primary measure axis is on the right // Measure axis positions are flipped. Primary measure axis is on the right
// and the secondary measure axis is on the left (when used). // and the secondary measure axis is on the left (when used).
// Domain axis' first domain starts on the right and grows left. // Domain axis' first domain starts on the right and grows left.
return new Directionality( return Directionality(
textDirection: TextDirection.rtl, textDirection: TextDirection.rtl,
child: new charts.LineChart( child: charts.LineChart(
seriesList, seriesList,
animate: animate, animate: animate,
)); ));
@@ -89,14 +90,14 @@ class RTLLineChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

111
web/charts/lib/i18n/rtl_line_segments.dart
View File

@@ -35,11 +35,12 @@ class RTLLineSegments extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
RTLLineSegments(this.seriesList, {this.animate}); const RTLLineSegments(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory RTLLineSegments.withSampleData() { factory RTLLineSegments.withSampleData() {
return new RTLLineSegments( return RTLLineSegments(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -51,45 +52,45 @@ class RTLLineSegments extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory RTLLineSegments.withRandomData() { factory RTLLineSegments.withRandomData() {
return new RTLLineSegments(_createRandomData()); return RTLLineSegments(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
// Series of data with static dash pattern and stroke width. The colorFn // Series of data with static dash pattern and stroke width. The colorFn
// accessor will colorize each datum (for all three series). // accessor will colorize each datum (for all three series).
final colorChangeData = [ final colorChangeData = [
new LinearSales(0, random.nextInt(100), null, 2.0), LinearSales(0, random.nextInt(100), null, 2.0),
new LinearSales(1, random.nextInt(100), null, 2.0), LinearSales(1, random.nextInt(100), null, 2.0),
new LinearSales(2, random.nextInt(100), null, 2.0), LinearSales(2, random.nextInt(100), null, 2.0),
new LinearSales(3, random.nextInt(100), null, 2.0), LinearSales(3, random.nextInt(100), null, 2.0),
new LinearSales(4, random.nextInt(100), null, 2.0), LinearSales(4, random.nextInt(100), null, 2.0),
new LinearSales(5, random.nextInt(100), null, 2.0), LinearSales(5, random.nextInt(100), null, 2.0),
new LinearSales(6, random.nextInt(100), null, 2.0), LinearSales(6, random.nextInt(100), null, 2.0),
]; ];
// Series of data with changing color and dash pattern. // Series of data with changing color and dash pattern.
final dashPatternChangeData = [ final dashPatternChangeData = [
new LinearSales(0, random.nextInt(100), [2, 2], 2.0), LinearSales(0, random.nextInt(100), [2, 2], 2.0),
new LinearSales(1, random.nextInt(100), [2, 2], 2.0), LinearSales(1, random.nextInt(100), [2, 2], 2.0),
new LinearSales(2, random.nextInt(100), [4, 4], 2.0), LinearSales(2, random.nextInt(100), [4, 4], 2.0),
new LinearSales(3, random.nextInt(100), [4, 4], 2.0), LinearSales(3, random.nextInt(100), [4, 4], 2.0),
new LinearSales(4, random.nextInt(100), [4, 4], 2.0), LinearSales(4, random.nextInt(100), [4, 4], 2.0),
new LinearSales(5, random.nextInt(100), [8, 3, 2, 3], 2.0), LinearSales(5, random.nextInt(100), [8, 3, 2, 3], 2.0),
new LinearSales(6, random.nextInt(100), [8, 3, 2, 3], 2.0), LinearSales(6, random.nextInt(100), [8, 3, 2, 3], 2.0),
]; ];
// Series of data with changing color and stroke width. // Series of data with changing color and stroke width.
final strokeWidthChangeData = [ final strokeWidthChangeData = [
new LinearSales(0, random.nextInt(100), null, 2.0), LinearSales(0, random.nextInt(100), null, 2.0),
new LinearSales(1, random.nextInt(100), null, 2.0), LinearSales(1, random.nextInt(100), null, 2.0),
new LinearSales(2, random.nextInt(100), null, 4.0), LinearSales(2, random.nextInt(100), null, 4.0),
new LinearSales(3, random.nextInt(100), null, 4.0), LinearSales(3, random.nextInt(100), null, 4.0),
new LinearSales(4, random.nextInt(100), null, 4.0), LinearSales(4, random.nextInt(100), null, 4.0),
new LinearSales(5, random.nextInt(100), null, 6.0), LinearSales(5, random.nextInt(100), null, 6.0),
new LinearSales(6, random.nextInt(100), null, 6.0), LinearSales(6, random.nextInt(100), null, 6.0),
]; ];
// Generate 2 shades of each color so that we can style the line segments. // Generate 2 shades of each color so that we can style the line segments.
@@ -98,7 +99,7 @@ class RTLLineSegments extends StatelessWidget {
final green = charts.MaterialPalette.green.makeShades(2); final green = charts.MaterialPalette.green.makeShades(2);
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Color Change', id: 'Color Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -109,7 +110,7 @@ class RTLLineSegments extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: colorChangeData, data: colorChangeData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Dash Pattern Change', id: 'Dash Pattern Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -120,7 +121,7 @@ class RTLLineSegments extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: dashPatternChangeData, data: dashPatternChangeData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Stroke Width Change', id: 'Stroke Width Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -148,12 +149,12 @@ class RTLLineSegments extends StatelessWidget {
// Measure axis positions are flipped. Primary measure axis is on the right // Measure axis positions are flipped. Primary measure axis is on the right
// and the secondary measure axis is on the left (when used). // and the secondary measure axis is on the left (when used).
// Domain axis' first domain starts on the right and grows left. // Domain axis' first domain starts on the right and grows left.
return new Directionality( return Directionality(
textDirection: TextDirection.rtl, textDirection: TextDirection.rtl,
child: new charts.LineChart( child: charts.LineChart(
seriesList, seriesList,
defaultRenderer: defaultRenderer:
new charts.LineRendererConfig(includeArea: true, stacked: true), charts.LineRendererConfig(includeArea: true, stacked: true),
animate: animate, animate: animate,
)); ));
} }
@@ -163,35 +164,35 @@ class RTLLineSegments extends StatelessWidget {
// Series of data with static dash pattern and stroke width. The colorFn // Series of data with static dash pattern and stroke width. The colorFn
// accessor will colorize each datum (for all three series). // accessor will colorize each datum (for all three series).
final colorChangeData = [ final colorChangeData = [
new LinearSales(0, 5, null, 2.0), LinearSales(0, 5, null, 2.0),
new LinearSales(1, 15, null, 2.0), LinearSales(1, 15, null, 2.0),
new LinearSales(2, 25, null, 2.0), LinearSales(2, 25, null, 2.0),
new LinearSales(3, 75, null, 2.0), LinearSales(3, 75, null, 2.0),
new LinearSales(4, 100, null, 2.0), LinearSales(4, 100, null, 2.0),
new LinearSales(5, 90, null, 2.0), LinearSales(5, 90, null, 2.0),
new LinearSales(6, 75, null, 2.0), LinearSales(6, 75, null, 2.0),
]; ];
// Series of data with changing color and dash pattern. // Series of data with changing color and dash pattern.
final dashPatternChangeData = [ final dashPatternChangeData = [
new LinearSales(0, 5, [2, 2], 2.0), LinearSales(0, 5, [2, 2], 2.0),
new LinearSales(1, 15, [2, 2], 2.0), LinearSales(1, 15, [2, 2], 2.0),
new LinearSales(2, 25, [4, 4], 2.0), LinearSales(2, 25, [4, 4], 2.0),
new LinearSales(3, 75, [4, 4], 2.0), LinearSales(3, 75, [4, 4], 2.0),
new LinearSales(4, 100, [4, 4], 2.0), LinearSales(4, 100, [4, 4], 2.0),
new LinearSales(5, 90, [8, 3, 2, 3], 2.0), LinearSales(5, 90, [8, 3, 2, 3], 2.0),
new LinearSales(6, 75, [8, 3, 2, 3], 2.0), LinearSales(6, 75, [8, 3, 2, 3], 2.0),
]; ];
// Series of data with changing color and stroke width. // Series of data with changing color and stroke width.
final strokeWidthChangeData = [ final strokeWidthChangeData = [
new LinearSales(0, 5, null, 2.0), LinearSales(0, 5, null, 2.0),
new LinearSales(1, 15, null, 2.0), LinearSales(1, 15, null, 2.0),
new LinearSales(2, 25, null, 4.0), LinearSales(2, 25, null, 4.0),
new LinearSales(3, 75, null, 4.0), LinearSales(3, 75, null, 4.0),
new LinearSales(4, 100, null, 4.0), LinearSales(4, 100, null, 4.0),
new LinearSales(5, 90, null, 6.0), LinearSales(5, 90, null, 6.0),
new LinearSales(6, 75, null, 6.0), LinearSales(6, 75, null, 6.0),
]; ];
// Generate 2 shades of each color so that we can style the line segments. // Generate 2 shades of each color so that we can style the line segments.
@@ -200,7 +201,7 @@ class RTLLineSegments extends StatelessWidget {
final green = charts.MaterialPalette.green.makeShades(2); final green = charts.MaterialPalette.green.makeShades(2);
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Color Change', id: 'Color Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -211,7 +212,7 @@ class RTLLineSegments extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: colorChangeData, data: colorChangeData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Dash Pattern Change', id: 'Dash Pattern Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -222,7 +223,7 @@ class RTLLineSegments extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: dashPatternChangeData, data: dashPatternChangeData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Stroke Width Change', id: 'Stroke Width Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>

95
web/charts/lib/i18n/rtl_series_legend.dart
View File

@@ -24,11 +24,12 @@ class RTLSeriesLegend extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
RTLSeriesLegend(this.seriesList, {this.animate}); const RTLSeriesLegend(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [BarChart] with sample data and no transition. /// Creates a [BarChart] with sample data and no transition.
factory RTLSeriesLegend.withSampleData() { factory RTLSeriesLegend.withSampleData() {
return new RTLSeriesLegend( return RTLSeriesLegend(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,61 +41,61 @@ class RTLSeriesLegend extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory RTLSeriesLegend.withRandomData() { factory RTLSeriesLegend.withRandomData() {
return new RTLSeriesLegend(_createRandomData()); return RTLSeriesLegend(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -126,13 +127,13 @@ class RTLSeriesLegend extends StatelessWidget {
// The below example changes the position to 'start' and max rows of 2 in // The below example changes the position to 'start' and max rows of 2 in
// order to show these effects, but are not required for SeriesLegend to // order to show these effects, but are not required for SeriesLegend to
// work with the correct directionality. // work with the correct directionality.
return new Directionality( return Directionality(
textDirection: TextDirection.rtl, textDirection: TextDirection.rtl,
child: new charts.BarChart( child: charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
behaviors: [ behaviors: [
new charts.SeriesLegend( charts.SeriesLegend(
position: charts.BehaviorPosition.end, desiredMaxRows: 2) position: charts.BehaviorPosition.end, desiredMaxRows: 2)
], ],
)); ));
@@ -141,53 +142,53 @@ class RTLSeriesLegend extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', 20), OrdinalSales('2014', 20),
new OrdinalSales('2015', 35), OrdinalSales('2015', 35),
new OrdinalSales('2016', 15), OrdinalSales('2016', 15),
new OrdinalSales('2017', 10), OrdinalSales('2017', 10),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

35
web/charts/lib/legends/datum_legend_options.dart
View File

@@ -28,10 +28,11 @@ class DatumLegendOptions extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
DatumLegendOptions(this.seriesList, {this.animate}); const DatumLegendOptions(this.seriesList, {this.animate, Key key})
: super(key: key);
factory DatumLegendOptions.withSampleData() { factory DatumLegendOptions.withSampleData() {
return new DatumLegendOptions( return DatumLegendOptions(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -43,22 +44,22 @@ class DatumLegendOptions extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory DatumLegendOptions.withRandomData() { factory DatumLegendOptions.withRandomData() {
return new DatumLegendOptions(_createRandomData()); return DatumLegendOptions(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, int>> _createRandomData() { static List<charts.Series<LinearSales, int>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -70,14 +71,14 @@ class DatumLegendOptions extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.PieChart( return charts.PieChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Add the legend behavior to the chart to turn on legends. // Add the legend behavior to the chart to turn on legends.
// This example shows how to change the position and justification of // This example shows how to change the position and justification of
// the legend, in addition to altering the max rows and padding. // the legend, in addition to altering the max rows and padding.
behaviors: [ behaviors: [
new charts.DatumLegend( charts.DatumLegend(
// Positions for "start" and "end" will be left and right respectively // Positions for "start" and "end" will be left and right respectively
// for widgets with a build context that has directionality ltr. // for widgets with a build context that has directionality ltr.
// For rtl, "start" and "end" will be right and left respectively. // For rtl, "start" and "end" will be right and left respectively.
@@ -96,7 +97,7 @@ class DatumLegendOptions extends StatelessWidget {
// rows before adding a new column. // rows before adding a new column.
desiredMaxRows: 2, desiredMaxRows: 2,
// This defines the padding around each legend entry. // This defines the padding around each legend entry.
cellPadding: new EdgeInsets.only(right: 4.0, bottom: 4.0), cellPadding: const EdgeInsets.only(right: 4.0, bottom: 4.0),
// Render the legend entry text with custom styles. // Render the legend entry text with custom styles.
entryTextStyle: charts.TextStyleSpec( entryTextStyle: charts.TextStyleSpec(
color: charts.MaterialPalette.purple.shadeDefault, color: charts.MaterialPalette.purple.shadeDefault,
@@ -110,14 +111,14 @@ class DatumLegendOptions extends StatelessWidget {
/// Create series list with one series /// Create series list with one series
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 100), LinearSales(0, 100),
new LinearSales(1, 75), LinearSales(1, 75),
new LinearSales(2, 25), LinearSales(2, 25),
new LinearSales(3, 5), LinearSales(3, 5),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

41
web/charts/lib/legends/datum_legend_with_measures.dart
View File

@@ -28,13 +28,14 @@ import 'package:charts_flutter/flutter.dart' as charts;
/// ///
/// Also shows the option to provide a custom measure formatter. /// Also shows the option to provide a custom measure formatter.
class DatumLegendWithMeasures extends StatelessWidget { class DatumLegendWithMeasures extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series<LinearSales, int>> seriesList;
final bool animate; final bool animate;
DatumLegendWithMeasures(this.seriesList, {this.animate}); const DatumLegendWithMeasures(this.seriesList, {this.animate, Key key})
: super(key: key);
factory DatumLegendWithMeasures.withSampleData() { factory DatumLegendWithMeasures.withSampleData() {
return new DatumLegendWithMeasures( return DatumLegendWithMeasures(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -46,22 +47,22 @@ class DatumLegendWithMeasures extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory DatumLegendWithMeasures.withRandomData() { factory DatumLegendWithMeasures.withRandomData() {
return new DatumLegendWithMeasures(_createRandomData()); return DatumLegendWithMeasures(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, int>> _createRandomData() { static List<charts.Series<LinearSales, int>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(2014, random.nextInt(100)), LinearSales(2014, random.nextInt(100)),
new LinearSales(2015, random.nextInt(100)), LinearSales(2015, random.nextInt(100)),
new LinearSales(2016, random.nextInt(100)), LinearSales(2016, random.nextInt(100)),
new LinearSales(2017, random.nextInt(100)), LinearSales(2017, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -73,7 +74,7 @@ class DatumLegendWithMeasures extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.PieChart( return charts.PieChart<int>(
seriesList, seriesList,
animate: animate, animate: animate,
// Add the legend behavior to the chart to turn on legends. // Add the legend behavior to the chart to turn on legends.
@@ -84,13 +85,13 @@ class DatumLegendWithMeasures extends StatelessWidget {
// This section is excluded from being copied to the gallery. // This section is excluded from being copied to the gallery.
// This is added in order to generate the image for the gallery to show // This is added in order to generate the image for the gallery to show
// an initial selection so that measure values are shown in the gallery. // an initial selection so that measure values are shown in the gallery.
new charts.InitialSelection( charts.InitialSelection(
selectedDataConfig: [ selectedDataConfig: [
new charts.SeriesDatumConfig('Sales', 0), charts.SeriesDatumConfig('Sales', 0),
], ],
), ),
// EXCLUDE_FROM_GALLERY_DOCS_END // EXCLUDE_FROM_GALLERY_DOCS_END
new charts.DatumLegend( charts.DatumLegend(
// Positions for "start" and "end" will be left and right respectively // Positions for "start" and "end" will be left and right respectively
// for widgets with a build context that has directionality ltr. // for widgets with a build context that has directionality ltr.
// For rtl, "start" and "end" will be right and left respectively. // For rtl, "start" and "end" will be right and left respectively.
@@ -102,7 +103,7 @@ class DatumLegendWithMeasures extends StatelessWidget {
// legend entries will grow as new rows first instead of a new column. // legend entries will grow as new rows first instead of a new column.
horizontalFirst: false, horizontalFirst: false,
// This defines the padding around each legend entry. // This defines the padding around each legend entry.
cellPadding: new EdgeInsets.only(right: 4.0, bottom: 4.0), cellPadding: const EdgeInsets.only(right: 4.0, bottom: 4.0),
// Set [showMeasures] to true to display measures in series legend. // Set [showMeasures] to true to display measures in series legend.
showMeasures: true, showMeasures: true,
// Configure the measure value to be shown by default in the legend. // Configure the measure value to be shown by default in the legend.
@@ -120,14 +121,14 @@ class DatumLegendWithMeasures extends StatelessWidget {
/// Create series list with one series /// Create series list with one series
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(2014, 100), LinearSales(2014, 100),
new LinearSales(2015, 75), LinearSales(2015, 75),
new LinearSales(2016, 25), LinearSales(2016, 25),
new LinearSales(2017, 5), LinearSales(2017, 5),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

95
web/charts/lib/legends/default_hidden_series_legend.dart
View File

@@ -24,10 +24,11 @@ class DefaultHiddenSeriesLegend extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
DefaultHiddenSeriesLegend(this.seriesList, {this.animate}); const DefaultHiddenSeriesLegend(this.seriesList, {this.animate, Key key})
: super(key: key);
factory DefaultHiddenSeriesLegend.withSampleData() { factory DefaultHiddenSeriesLegend.withSampleData() {
return new DefaultHiddenSeriesLegend( return DefaultHiddenSeriesLegend(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -39,61 +40,61 @@ class DefaultHiddenSeriesLegend extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory DefaultHiddenSeriesLegend.withRandomData() { factory DefaultHiddenSeriesLegend.withRandomData() {
return new DefaultHiddenSeriesLegend(_createRandomData()); return DefaultHiddenSeriesLegend(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -105,16 +106,16 @@ class DefaultHiddenSeriesLegend extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
// Add the series legend behavior to the chart to turn on series legends. // Add the series legend behavior to the chart to turn on series legends.
// By default the legend will display above the chart. // By default the legend will display above the chart.
behaviors: [ behaviors: [
new charts.SeriesLegend( charts.SeriesLegend(
// Configures the "Other" series to be hidden on first chart draw. // Configures the "Other" series to be hidden on first chart draw.
defaultHiddenSeries: ['Other'], defaultHiddenSeries: const ['Other'],
) )
], ],
); );
@@ -123,53 +124,53 @@ class DefaultHiddenSeriesLegend extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', 20), OrdinalSales('2014', 20),
new OrdinalSales('2015', 35), OrdinalSales('2015', 35),
new OrdinalSales('2016', 15), OrdinalSales('2016', 15),
new OrdinalSales('2017', 10), OrdinalSales('2017', 10),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

104
web/charts/lib/legends/legend_custom_symbol.dart
View File

@@ -29,15 +29,16 @@ class IconRenderer extends charts.CustomSymbolRenderer {
IconRenderer(this.iconData); IconRenderer(this.iconData);
@override @override
Widget build(BuildContext context, {Size size, Color color, bool enabled}) { Widget build(BuildContext context,
{Size size, Color color, bool enabled = true}) {
// Lighten the color if the symbol is not enabled // Lighten the color if the symbol is not enabled
// Example: If user has tapped on a Series deselecting it. // Example: If user has tapped on a Series deselecting it.
if (!enabled) { if (!enabled) {
color = color.withOpacity(0.26); color = color.withOpacity(0.26);
} }
return new SizedBox.fromSize( return SizedBox.fromSize(
size: size, child: new Icon(iconData, color: color, size: 12.0)); size: size, child: Icon(iconData, color: color, size: 12.0));
} }
} }
@@ -45,10 +46,11 @@ class LegendWithCustomSymbol extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
LegendWithCustomSymbol(this.seriesList, {this.animate}); const LegendWithCustomSymbol(this.seriesList, {this.animate, Key key})
: super(key: key);
factory LegendWithCustomSymbol.withSampleData() { factory LegendWithCustomSymbol.withSampleData() {
return new LegendWithCustomSymbol( return LegendWithCustomSymbol(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -60,61 +62,61 @@ class LegendWithCustomSymbol extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory LegendWithCustomSymbol.withRandomData() { factory LegendWithCustomSymbol.withRandomData() {
return new LegendWithCustomSymbol(_createRandomData()); return LegendWithCustomSymbol(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -126,7 +128,7 @@ class LegendWithCustomSymbol extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
@@ -135,62 +137,62 @@ class LegendWithCustomSymbol extends StatelessWidget {
// //
// To change the symbol used in the legend, set the renderer attribute of // To change the symbol used in the legend, set the renderer attribute of
// symbolRendererKey to a SymbolRenderer. // symbolRendererKey to a SymbolRenderer.
behaviors: [new charts.SeriesLegend()], behaviors: [charts.SeriesLegend()],
defaultRenderer: new charts.BarRendererConfig( defaultRenderer:
symbolRenderer: new IconRenderer(Icons.cloud)), charts.BarRendererConfig(symbolRenderer: IconRenderer(Icons.cloud)),
); );
} }
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', 20), OrdinalSales('2014', 20),
new OrdinalSales('2015', 35), OrdinalSales('2015', 35),
new OrdinalSales('2016', 15), OrdinalSales('2016', 15),
new OrdinalSales('2017', 10), OrdinalSales('2017', 10),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

48
web/charts/lib/legends/legends_gallery.dart
View File

@@ -26,55 +26,55 @@ import 'simple_series_legend.dart';
List<GalleryScaffold> buildGallery() { List<GalleryScaffold> buildGallery() {
return [ return [
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Series Legend', title: 'Series Legend',
subtitle: 'A series legend for a bar chart with default settings', subtitle: 'A series legend for a bar chart with default settings',
childBuilder: () => new SimpleSeriesLegend.withRandomData(), childBuilder: () => SimpleSeriesLegend.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Series Legend Options', title: 'Series Legend Options',
subtitle: subtitle:
'A series legend with custom positioning and spacing for a bar chart', 'A series legend with custom positioning and spacing for a bar chart',
childBuilder: () => new LegendOptions.withRandomData(), childBuilder: () => LegendOptions.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Series Legend Custom Symbol', title: 'Series Legend Custom Symbol',
subtitle: 'A series legend using a custom symbol renderer', subtitle: 'A series legend using a custom symbol renderer',
childBuilder: () => new LegendWithCustomSymbol.withRandomData(), childBuilder: () => LegendWithCustomSymbol.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Default Hidden Series Legend', title: 'Default Hidden Series Legend',
subtitle: 'A series legend showing a series hidden by default', subtitle: 'A series legend showing a series hidden by default',
childBuilder: () => new DefaultHiddenSeriesLegend.withRandomData(), childBuilder: () => DefaultHiddenSeriesLegend.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart), listTileIcon: const Icon(Icons.insert_chart),
title: 'Series legend with measures', title: 'Series legend with measures',
subtitle: 'Series legend with measures and measure formatting', subtitle: 'Series legend with measures and measure formatting',
childBuilder: () => new LegendWithMeasures.withRandomData(), childBuilder: () => LegendWithMeasures.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.pie_chart), listTileIcon: const Icon(Icons.pie_chart),
title: 'Datum Legend', title: 'Datum Legend',
subtitle: 'A datum legend for a pie chart with default settings', subtitle: 'A datum legend for a pie chart with default settings',
childBuilder: () => new SimpleDatumLegend.withRandomData(), childBuilder: () => SimpleDatumLegend.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.pie_chart), listTileIcon: const Icon(Icons.pie_chart),
title: 'Datum Legend Options', title: 'Datum Legend Options',
subtitle: subtitle:
'A datum legend with custom positioning and spacing for a pie chart', 'A datum legend with custom positioning and spacing for a pie chart',
childBuilder: () => new DatumLegendOptions.withRandomData(), childBuilder: () => DatumLegendOptions.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.pie_chart), listTileIcon: const Icon(Icons.pie_chart),
title: 'Datum legend with measures', title: 'Datum legend with measures',
subtitle: 'Datum legend with measures and measure formatting', subtitle: 'Datum legend with measures and measure formatting',
childBuilder: () => new DatumLegendWithMeasures.withRandomData(), childBuilder: () => DatumLegendWithMeasures.withRandomData(),
), ),
]; ];
} }

95
web/charts/lib/legends/series_legend_options.dart
View File

@@ -28,10 +28,11 @@ class LegendOptions extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
LegendOptions(this.seriesList, {this.animate}); const LegendOptions(this.seriesList, {this.animate, Key key})
: super(key: key);
factory LegendOptions.withSampleData() { factory LegendOptions.withSampleData() {
return new LegendOptions( return LegendOptions(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -43,61 +44,61 @@ class LegendOptions extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory LegendOptions.withRandomData() { factory LegendOptions.withRandomData() {
return new LegendOptions(_createRandomData()); return LegendOptions(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -109,7 +110,7 @@ class LegendOptions extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
@@ -117,7 +118,7 @@ class LegendOptions extends StatelessWidget {
// This example shows how to change the position and justification of // This example shows how to change the position and justification of
// the legend, in addition to altering the max rows and padding. // the legend, in addition to altering the max rows and padding.
behaviors: [ behaviors: [
new charts.SeriesLegend( charts.SeriesLegend(
// Positions for "start" and "end" will be left and right respectively // Positions for "start" and "end" will be left and right respectively
// for widgets with a build context that has directionality ltr. // for widgets with a build context that has directionality ltr.
// For rtl, "start" and "end" will be right and left respectively. // For rtl, "start" and "end" will be right and left respectively.
@@ -136,7 +137,7 @@ class LegendOptions extends StatelessWidget {
// rows before adding a new column. // rows before adding a new column.
desiredMaxRows: 2, desiredMaxRows: 2,
// This defines the padding around each legend entry. // This defines the padding around each legend entry.
cellPadding: new EdgeInsets.only(right: 4.0, bottom: 4.0), cellPadding: const EdgeInsets.only(right: 4.0, bottom: 4.0),
// Render the legend entry text with custom styles. // Render the legend entry text with custom styles.
entryTextStyle: charts.TextStyleSpec( entryTextStyle: charts.TextStyleSpec(
color: charts.MaterialPalette.purple.shadeDefault, color: charts.MaterialPalette.purple.shadeDefault,
@@ -150,53 +151,53 @@ class LegendOptions extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', 20), OrdinalSales('2014', 20),
new OrdinalSales('2015', 35), OrdinalSales('2015', 35),
new OrdinalSales('2016', 15), OrdinalSales('2016', 15),
new OrdinalSales('2017', 10), OrdinalSales('2017', 10),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

103
web/charts/lib/legends/series_legend_with_measures.dart
View File

@@ -32,10 +32,11 @@ class LegendWithMeasures extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
LegendWithMeasures(this.seriesList, {this.animate}); const LegendWithMeasures(this.seriesList, {this.animate, Key key})
: super(key: key);
factory LegendWithMeasures.withSampleData() { factory LegendWithMeasures.withSampleData() {
return new LegendWithMeasures( return LegendWithMeasures(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -47,61 +48,61 @@ class LegendWithMeasures extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory LegendWithMeasures.withRandomData() { factory LegendWithMeasures.withRandomData() {
return new LegendWithMeasures(_createRandomData()); return LegendWithMeasures(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -113,7 +114,7 @@ class LegendWithMeasures extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
@@ -125,16 +126,16 @@ class LegendWithMeasures extends StatelessWidget {
// This section is excluded from being copied to the gallery. // This section is excluded from being copied to the gallery.
// This is added in order to generate the image for the gallery to show // This is added in order to generate the image for the gallery to show
// an initial selection so that measure values are shown in the gallery. // an initial selection so that measure values are shown in the gallery.
new charts.InitialSelection( charts.InitialSelection(
selectedDataConfig: [ selectedDataConfig: [
new charts.SeriesDatumConfig('Desktop', '2016'), charts.SeriesDatumConfig('Desktop', '2016'),
new charts.SeriesDatumConfig('Tablet', '2016'), charts.SeriesDatumConfig('Tablet', '2016'),
new charts.SeriesDatumConfig('Mobile', '2016'), charts.SeriesDatumConfig('Mobile', '2016'),
new charts.SeriesDatumConfig('Other', '2016'), charts.SeriesDatumConfig('Other', '2016'),
], ],
), ),
// EXCLUDE_FROM_GALLERY_DOCS_END // EXCLUDE_FROM_GALLERY_DOCS_END
new charts.SeriesLegend( charts.SeriesLegend(
// Positions for "start" and "end" will be left and right respectively // Positions for "start" and "end" will be left and right respectively
// for widgets with a build context that has directionality ltr. // for widgets with a build context that has directionality ltr.
// For rtl, "start" and "end" will be right and left respectively. // For rtl, "start" and "end" will be right and left respectively.
@@ -146,7 +147,7 @@ class LegendWithMeasures extends StatelessWidget {
// legend entries will grow as new rows first instead of a new column. // legend entries will grow as new rows first instead of a new column.
horizontalFirst: false, horizontalFirst: false,
// This defines the padding around each legend entry. // This defines the padding around each legend entry.
cellPadding: new EdgeInsets.only(right: 4.0, bottom: 4.0), cellPadding: const EdgeInsets.only(right: 4.0, bottom: 4.0),
// Set show measures to true to display measures in series legend, // Set show measures to true to display measures in series legend,
// when the datum is selected. // when the datum is selected.
showMeasures: true, showMeasures: true,
@@ -163,53 +164,53 @@ class LegendWithMeasures extends StatelessWidget {
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
// Purposely have a missing datum for 2016 to show the null measure format // Purposely have a missing datum for 2016 to show the null measure format
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', 20), OrdinalSales('2014', 20),
new OrdinalSales('2015', 35), OrdinalSales('2015', 35),
new OrdinalSales('2016', 15), OrdinalSales('2016', 15),
new OrdinalSales('2017', 10), OrdinalSales('2017', 10),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

33
web/charts/lib/legends/simple_datum_legend.dart
View File

@@ -24,10 +24,11 @@ class SimpleDatumLegend extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SimpleDatumLegend(this.seriesList, {this.animate}); const SimpleDatumLegend(this.seriesList, {this.animate, Key key})
: super(key: key);
factory SimpleDatumLegend.withSampleData() { factory SimpleDatumLegend.withSampleData() {
return new SimpleDatumLegend( return SimpleDatumLegend(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -39,22 +40,22 @@ class SimpleDatumLegend extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SimpleDatumLegend.withRandomData() { factory SimpleDatumLegend.withRandomData() {
return new SimpleDatumLegend(_createRandomData()); return SimpleDatumLegend(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, int>> _createRandomData() { static List<charts.Series<LinearSales, int>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -66,26 +67,26 @@ class SimpleDatumLegend extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.PieChart( return charts.PieChart(
seriesList, seriesList,
animate: animate, animate: animate,
// Add the series legend behavior to the chart to turn on series legends. // Add the series legend behavior to the chart to turn on series legends.
// By default the legend will display above the chart. // By default the legend will display above the chart.
behaviors: [new charts.DatumLegend()], behaviors: [charts.DatumLegend()],
); );
} }
/// Create series list with one series /// Create series list with one series
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 100), LinearSales(0, 100),
new LinearSales(1, 75), LinearSales(1, 75),
new LinearSales(2, 25), LinearSales(2, 25),
new LinearSales(3, 5), LinearSales(3, 5),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

93
web/charts/lib/legends/simple_series_legend.dart
View File

@@ -24,10 +24,11 @@ class SimpleSeriesLegend extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SimpleSeriesLegend(this.seriesList, {this.animate}); const SimpleSeriesLegend(this.seriesList, {this.animate, Key key})
: super(key: key);
factory SimpleSeriesLegend.withSampleData() { factory SimpleSeriesLegend.withSampleData() {
return new SimpleSeriesLegend( return SimpleSeriesLegend(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -39,61 +40,61 @@ class SimpleSeriesLegend extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SimpleSeriesLegend.withRandomData() { factory SimpleSeriesLegend.withRandomData() {
return new SimpleSeriesLegend(_createRandomData()); return SimpleSeriesLegend(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() { static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random(); final random = Random();
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', random.nextInt(100)), OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)), OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)), OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)), OrdinalSales('2017', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
@@ -105,66 +106,66 @@ class SimpleSeriesLegend extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.BarChart( return charts.BarChart(
seriesList, seriesList,
animate: animate, animate: animate,
barGroupingType: charts.BarGroupingType.grouped, barGroupingType: charts.BarGroupingType.grouped,
// Add the series legend behavior to the chart to turn on series legends. // Add the series legend behavior to the chart to turn on series legends.
// By default the legend will display above the chart. // By default the legend will display above the chart.
behaviors: [new charts.SeriesLegend()], behaviors: [charts.SeriesLegend()],
); );
} }
/// Create series list with multiple series /// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() { static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final desktopSalesData = [ final desktopSalesData = [
new OrdinalSales('2014', 5), OrdinalSales('2014', 5),
new OrdinalSales('2015', 25), OrdinalSales('2015', 25),
new OrdinalSales('2016', 100), OrdinalSales('2016', 100),
new OrdinalSales('2017', 75), OrdinalSales('2017', 75),
]; ];
final tabletSalesData = [ final tabletSalesData = [
new OrdinalSales('2014', 25), OrdinalSales('2014', 25),
new OrdinalSales('2015', 50), OrdinalSales('2015', 50),
new OrdinalSales('2016', 10), OrdinalSales('2016', 10),
new OrdinalSales('2017', 20), OrdinalSales('2017', 20),
]; ];
final mobileSalesData = [ final mobileSalesData = [
new OrdinalSales('2014', 10), OrdinalSales('2014', 10),
new OrdinalSales('2015', 15), OrdinalSales('2015', 15),
new OrdinalSales('2016', 50), OrdinalSales('2016', 50),
new OrdinalSales('2017', 45), OrdinalSales('2017', 45),
]; ];
final otherSalesData = [ final otherSalesData = [
new OrdinalSales('2014', 20), OrdinalSales('2014', 20),
new OrdinalSales('2015', 35), OrdinalSales('2015', 35),
new OrdinalSales('2016', 15), OrdinalSales('2016', 15),
new OrdinalSales('2017', 10), OrdinalSales('2017', 10),
]; ];
return [ return [
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Desktop', id: 'Desktop',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: desktopSalesData, data: desktopSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Tablet', id: 'Tablet',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: tabletSalesData, data: tabletSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Mobile', id: 'Mobile',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,
data: mobileSalesData, data: mobileSalesData,
), ),
new charts.Series<OrdinalSales, String>( charts.Series<OrdinalSales, String>(
id: 'Other', id: 'Other',
domainFn: (OrdinalSales sales, _) => sales.year, domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales, measureFn: (OrdinalSales sales, _) => sales.sales,

27
web/charts/lib/line_chart/animation_zoom.dart
View File

@@ -25,11 +25,12 @@ class LineAnimationZoomChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
LineAnimationZoomChart(this.seriesList, {this.animate}); const LineAnimationZoomChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory LineAnimationZoomChart.withSampleData() { factory LineAnimationZoomChart.withSampleData() {
return new LineAnimationZoomChart( return LineAnimationZoomChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,21 +42,21 @@ class LineAnimationZoomChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory LineAnimationZoomChart.withRandomData() { factory LineAnimationZoomChart.withRandomData() {
return new LineAnimationZoomChart(_createRandomData()); return LineAnimationZoomChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = <LinearSales>[]; final data = <LinearSales>[];
for (var i = 0; i < 100; i++) { for (var i = 0; i < 100; i++) {
data.add(new LinearSales(i, random.nextInt(100))); data.add(LinearSales(i, random.nextInt(100)));
} }
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -67,22 +68,22 @@ class LineAnimationZoomChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, animate: animate, behaviors: [ return charts.LineChart(seriesList, animate: animate, behaviors: [
new charts.PanAndZoomBehavior(), charts.PanAndZoomBehavior(),
]); ]);
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

53
web/charts/lib/line_chart/area_and_line.dart
View File

@@ -24,11 +24,12 @@ class AreaAndLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
AreaAndLineChart(this.seriesList, {this.animate}); const AreaAndLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory AreaAndLineChart.withSampleData() { factory AreaAndLineChart.withSampleData() {
return new AreaAndLineChart( return AreaAndLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,36 +41,36 @@ class AreaAndLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory AreaAndLineChart.withRandomData() { factory AreaAndLineChart.withRandomData() {
return new AreaAndLineChart(_createRandomData()); return AreaAndLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -84,10 +85,10 @@ class AreaAndLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, return charts.LineChart(seriesList,
animate: animate, animate: animate,
customSeriesRenderers: [ customSeriesRenderers: [
new charts.LineRendererConfig( charts.LineRendererConfig(
// ID used to link series to this renderer. // ID used to link series to this renderer.
customRendererId: 'customArea', customRendererId: 'customArea',
includeArea: true, includeArea: true,
@@ -98,21 +99,21 @@ class AreaAndLineChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, 10), LinearSales(0, 10),
new LinearSales(1, 50), LinearSales(1, 50),
new LinearSales(2, 200), LinearSales(2, 200),
new LinearSales(3, 150), LinearSales(3, 150),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -121,7 +122,7 @@ class AreaAndLineChart extends StatelessWidget {
) )
// Configure our custom bar target renderer for this series. // Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customArea'), ..setAttribute(charts.rendererIdKey, 'customArea'),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

71
web/charts/lib/line_chart/dash_pattern.dart
View File

@@ -25,11 +25,12 @@ class DashPatternLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
DashPatternLineChart(this.seriesList, {this.animate}); const DashPatternLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory DashPatternLineChart.withSampleData() { factory DashPatternLineChart.withSampleData() {
return new DashPatternLineChart( return DashPatternLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,43 +42,43 @@ class DashPatternLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory DashPatternLineChart.withRandomData() { factory DashPatternLineChart.withRandomData() {
return new DashPatternLineChart(_createRandomData()); return DashPatternLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
var myFakeMobileData = [ var myFakeMobileData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
dashPatternFn: (_, __) => [2, 2], dashPatternFn: (_, __) => [2, 2],
@@ -85,7 +86,7 @@ class DashPatternLineChart extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
dashPatternFn: (_, __) => [8, 3, 2, 3], dashPatternFn: (_, __) => [8, 3, 2, 3],
@@ -99,41 +100,41 @@ class DashPatternLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, animate: animate); return charts.LineChart(seriesList, animate: animate);
} }
/// Create three series with sample hard coded data. /// Create three series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, 10), LinearSales(0, 10),
new LinearSales(1, 50), LinearSales(1, 50),
new LinearSales(2, 200), LinearSales(2, 200),
new LinearSales(3, 150), LinearSales(3, 150),
]; ];
var myFakeMobileData = [ var myFakeMobileData = [
new LinearSales(0, 15), LinearSales(0, 15),
new LinearSales(1, 75), LinearSales(1, 75),
new LinearSales(2, 300), LinearSales(2, 300),
new LinearSales(3, 225), LinearSales(3, 225),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
dashPatternFn: (_, __) => [2, 2], dashPatternFn: (_, __) => [2, 2],
@@ -141,7 +142,7 @@ class DashPatternLineChart extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
dashPatternFn: (_, __) => [8, 3, 2, 3], dashPatternFn: (_, __) => [8, 3, 2, 3],

45
web/charts/lib/line_chart/line_annotation.dart
View File

@@ -24,7 +24,8 @@ class LineLineAnnotationChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
LineLineAnnotationChart(this.seriesList, {this.animate}); const LineLineAnnotationChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and line annotations. /// Creates a [LineChart] with sample data and line annotations.
/// ///
@@ -32,7 +33,7 @@ class LineLineAnnotationChart extends StatelessWidget {
/// demonstrating the effect of the [Charts.RangeAnnotation.extendAxis] flag. /// demonstrating the effect of the [Charts.RangeAnnotation.extendAxis] flag.
/// This can be set to false to disable range extension. /// This can be set to false to disable range extension.
factory LineLineAnnotationChart.withSampleData() { factory LineLineAnnotationChart.withSampleData() {
return new LineLineAnnotationChart( return LineLineAnnotationChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -44,24 +45,24 @@ class LineLineAnnotationChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory LineLineAnnotationChart.withRandomData() { factory LineLineAnnotationChart.withRandomData() {
return new LineLineAnnotationChart(_createRandomData()); return LineLineAnnotationChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
// Fix one of the points to 100 so that the annotations are consistently // Fix one of the points to 100 so that the annotations are consistently
// placed. // placed.
new LinearSales(3, 100), LinearSales(3, 100),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -73,21 +74,17 @@ class LineLineAnnotationChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, animate: animate, behaviors: [ return charts.LineChart(seriesList, animate: animate, behaviors: [
new charts.RangeAnnotation([ charts.RangeAnnotation([
new charts.LineAnnotationSegment( charts.LineAnnotationSegment(1.0, charts.RangeAnnotationAxisType.domain,
1.0, charts.RangeAnnotationAxisType.domain,
startLabel: 'Domain 1'), startLabel: 'Domain 1'),
new charts.LineAnnotationSegment( charts.LineAnnotationSegment(4, charts.RangeAnnotationAxisType.domain,
4, charts.RangeAnnotationAxisType.domain,
endLabel: 'Domain 2', color: charts.MaterialPalette.gray.shade200), endLabel: 'Domain 2', color: charts.MaterialPalette.gray.shade200),
new charts.LineAnnotationSegment( charts.LineAnnotationSegment(20, charts.RangeAnnotationAxisType.measure,
20, charts.RangeAnnotationAxisType.measure,
startLabel: 'Measure 1 Start', startLabel: 'Measure 1 Start',
endLabel: 'Measure 1 End', endLabel: 'Measure 1 End',
color: charts.MaterialPalette.gray.shade300), color: charts.MaterialPalette.gray.shade300),
new charts.LineAnnotationSegment( charts.LineAnnotationSegment(65, charts.RangeAnnotationAxisType.measure,
65, charts.RangeAnnotationAxisType.measure,
startLabel: 'Measure 2 Start', startLabel: 'Measure 2 Start',
endLabel: 'Measure 2 End', endLabel: 'Measure 2 End',
color: charts.MaterialPalette.gray.shade400), color: charts.MaterialPalette.gray.shade400),
@@ -98,14 +95,14 @@ class LineLineAnnotationChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

78
web/charts/lib/line_chart/line_gallery.dart
View File

@@ -31,83 +31,83 @@ import 'stacked_area_nulls.dart';
List<GalleryScaffold> buildGallery() { List<GalleryScaffold> buildGallery() {
return [ return [
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Simple Line Chart', title: 'Simple Line Chart',
subtitle: 'With a single series and default line point highlighter', subtitle: 'With a single series and default line point highlighter',
childBuilder: () => new SimpleLineChart.withRandomData(), childBuilder: () => SimpleLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Stacked Area Chart', title: 'Stacked Area Chart',
subtitle: 'Stacked area chart with three series', subtitle: 'Stacked area chart with three series',
childBuilder: () => new StackedAreaLineChart.withRandomData(), childBuilder: () => StackedAreaLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Stacked Area Custom Color Chart', title: 'Stacked Area Custom Color Chart',
subtitle: 'Stacked area chart with custom area skirt color', subtitle: 'Stacked area chart with custom area skirt color',
childBuilder: () => new StackedAreaCustomColorLineChart.withRandomData(), childBuilder: () => StackedAreaCustomColorLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Area and Line Combo Chart', title: 'Area and Line Combo Chart',
subtitle: 'Combo chart with one line series and one area series', subtitle: 'Combo chart with one line series and one area series',
childBuilder: () => new AreaAndLineChart.withRandomData(), childBuilder: () => AreaAndLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Points Line Chart', title: 'Points Line Chart',
subtitle: 'Line chart with points on a single series', subtitle: 'Line chart with points on a single series',
childBuilder: () => new PointsLineChart.withRandomData(), childBuilder: () => PointsLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Null Data Line Chart', title: 'Null Data Line Chart',
subtitle: 'With a single series and null measure values', subtitle: 'With a single series and null measure values',
childBuilder: () => new SimpleNullsLineChart.withRandomData(), childBuilder: () => SimpleNullsLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Stacked Area with Nulls Chart', title: 'Stacked Area with Nulls Chart',
subtitle: 'Stacked area chart with three series and null measure values', subtitle: 'Stacked area chart with three series and null measure values',
childBuilder: () => new StackedAreaNullsLineChart.withRandomData(), childBuilder: () => StackedAreaNullsLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Dash Pattern Line Chart', title: 'Dash Pattern Line Chart',
subtitle: 'Line chart with dash patterns', subtitle: 'Line chart with dash patterns',
childBuilder: () => new DashPatternLineChart.withRandomData(), childBuilder: () => DashPatternLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Segments Line Chart', title: 'Segments Line Chart',
subtitle: 'Line chart with changes of style for each line', subtitle: 'Line chart with changes of style for each line',
childBuilder: () => new SegmentsLineChart.withRandomData(), childBuilder: () => SegmentsLineChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Line Annotation Line Chart', title: 'Line Annotation Line Chart',
subtitle: 'Line chart with line annotations', subtitle: 'Line chart with line annotations',
childBuilder: () => new LineLineAnnotationChart.withRandomData(), childBuilder: () => LineLineAnnotationChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Range Annotation Line Chart', title: 'Range Annotation Line Chart',
subtitle: 'Line chart with range annotations', subtitle: 'Line chart with range annotations',
childBuilder: () => new LineRangeAnnotationChart.withRandomData(), childBuilder: () => LineRangeAnnotationChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Range Annotation Margin Labels Line Chart', title: 'Range Annotation Margin Labels Line Chart',
subtitle: 'Line chart with range annotations with labels in margins', subtitle: 'Line chart with range annotations with labels in margins',
childBuilder: () => new LineRangeAnnotationMarginChart.withRandomData(), childBuilder: () => LineRangeAnnotationMarginChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart), listTileIcon: const Icon(Icons.show_chart),
title: 'Pan and Zoom Line Chart', title: 'Pan and Zoom Line Chart',
subtitle: 'Simple line chart pan and zoom behaviors enabled', subtitle: 'Simple line chart pan and zoom behaviors enabled',
childBuilder: () => new LineAnimationZoomChart.withRandomData(), childBuilder: () => LineAnimationZoomChart.withRandomData(),
), ),
]; ];
} }

33
web/charts/lib/line_chart/points.dart
View File

@@ -24,11 +24,12 @@ class PointsLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
PointsLineChart(this.seriesList, {this.animate}); const PointsLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory PointsLineChart.withSampleData() { factory PointsLineChart.withSampleData() {
return new PointsLineChart( return PointsLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class PointsLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory PointsLineChart.withRandomData() { factory PointsLineChart.withRandomData() {
return new PointsLineChart(_createRandomData()); return PointsLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -68,22 +69,22 @@ class PointsLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, return charts.LineChart(seriesList,
animate: animate, animate: animate,
defaultRenderer: new charts.LineRendererConfig(includePoints: true)); defaultRenderer: charts.LineRendererConfig(includePoints: true));
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

41
web/charts/lib/line_chart/range_annotation.dart
View File

@@ -24,7 +24,8 @@ class LineRangeAnnotationChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
LineRangeAnnotationChart(this.seriesList, {this.animate}); const LineRangeAnnotationChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and range annotations. /// Creates a [LineChart] with sample data and range annotations.
/// ///
@@ -32,7 +33,7 @@ class LineRangeAnnotationChart extends StatelessWidget {
/// demonstrating the effect of the [Charts.RangeAnnotation.extendAxis] flag. /// demonstrating the effect of the [Charts.RangeAnnotation.extendAxis] flag.
/// This can be set to false to disable range extension. /// This can be set to false to disable range extension.
factory LineRangeAnnotationChart.withSampleData() { factory LineRangeAnnotationChart.withSampleData() {
return new LineRangeAnnotationChart( return LineRangeAnnotationChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -44,24 +45,24 @@ class LineRangeAnnotationChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory LineRangeAnnotationChart.withRandomData() { factory LineRangeAnnotationChart.withRandomData() {
return new LineRangeAnnotationChart(_createRandomData()); return LineRangeAnnotationChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
// Fix one of the points to 100 so that the annotations are consistently // Fix one of the points to 100 so that the annotations are consistently
// placed. // placed.
new LinearSales(3, 100), LinearSales(3, 100),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -73,20 +74,20 @@ class LineRangeAnnotationChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, animate: animate, behaviors: [ return charts.LineChart(seriesList, animate: animate, behaviors: [
new charts.RangeAnnotation([ charts.RangeAnnotation([
new charts.RangeAnnotationSegment( charts.RangeAnnotationSegment(
0.5, 1.0, charts.RangeAnnotationAxisType.domain, 0.5, 1.0, charts.RangeAnnotationAxisType.domain,
startLabel: 'Domain 1'), startLabel: 'Domain 1'),
new charts.RangeAnnotationSegment( charts.RangeAnnotationSegment(
2, 4, charts.RangeAnnotationAxisType.domain, 2, 4, charts.RangeAnnotationAxisType.domain,
endLabel: 'Domain 2', color: charts.MaterialPalette.gray.shade200), endLabel: 'Domain 2', color: charts.MaterialPalette.gray.shade200),
new charts.RangeAnnotationSegment( charts.RangeAnnotationSegment(
15, 20, charts.RangeAnnotationAxisType.measure, 15, 20, charts.RangeAnnotationAxisType.measure,
startLabel: 'Measure 1 Start', startLabel: 'Measure 1 Start',
endLabel: 'Measure 1 End', endLabel: 'Measure 1 End',
color: charts.MaterialPalette.gray.shade300), color: charts.MaterialPalette.gray.shade300),
new charts.RangeAnnotationSegment( charts.RangeAnnotationSegment(
35, 65, charts.RangeAnnotationAxisType.measure, 35, 65, charts.RangeAnnotationAxisType.measure,
startLabel: 'Measure 2 Start', startLabel: 'Measure 2 Start',
endLabel: 'Measure 2 End', endLabel: 'Measure 2 End',
@@ -98,14 +99,14 @@ class LineRangeAnnotationChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

49
web/charts/lib/line_chart/range_annotation_margin.dart
View File

@@ -25,7 +25,8 @@ class LineRangeAnnotationMarginChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
LineRangeAnnotationMarginChart(this.seriesList, {this.animate}); const LineRangeAnnotationMarginChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and range annotations. /// Creates a [LineChart] with sample data and range annotations.
/// ///
@@ -33,7 +34,7 @@ class LineRangeAnnotationMarginChart extends StatelessWidget {
/// demonstrating the effect of the [Charts.RangeAnnotation.extendAxis] flag. /// demonstrating the effect of the [Charts.RangeAnnotation.extendAxis] flag.
/// This can be set to false to disable range extension. /// This can be set to false to disable range extension.
factory LineRangeAnnotationMarginChart.withSampleData() { factory LineRangeAnnotationMarginChart.withSampleData() {
return new LineRangeAnnotationMarginChart( return LineRangeAnnotationMarginChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -45,24 +46,24 @@ class LineRangeAnnotationMarginChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory LineRangeAnnotationMarginChart.withRandomData() { factory LineRangeAnnotationMarginChart.withRandomData() {
return new LineRangeAnnotationMarginChart(_createRandomData()); return LineRangeAnnotationMarginChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
// Fix one of the points to 100 so that the annotations are consistently // Fix one of the points to 100 so that the annotations are consistently
// placed. // placed.
new LinearSales(3, 100), LinearSales(3, 100),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -74,21 +75,21 @@ class LineRangeAnnotationMarginChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, return charts.LineChart(seriesList,
animate: animate, animate: animate,
// Allow enough space in the left and right chart margins for the // Allow enough space in the left and right chart margins for the
// annotations. // annotations.
layoutConfig: new charts.LayoutConfig( layoutConfig: charts.LayoutConfig(
leftMarginSpec: new charts.MarginSpec.fixedPixel(60), leftMarginSpec: charts.MarginSpec.fixedPixel(60),
topMarginSpec: new charts.MarginSpec.fixedPixel(20), topMarginSpec: charts.MarginSpec.fixedPixel(20),
rightMarginSpec: new charts.MarginSpec.fixedPixel(60), rightMarginSpec: charts.MarginSpec.fixedPixel(60),
bottomMarginSpec: new charts.MarginSpec.fixedPixel(20)), bottomMarginSpec: charts.MarginSpec.fixedPixel(20)),
behaviors: [ behaviors: [
// Define one domain and two measure annotations configured to render // Define one domain and two measure annotations configured to render
// labels in the chart margins. // labels in the chart margins.
new charts.RangeAnnotation([ charts.RangeAnnotation([
new charts.RangeAnnotationSegment( charts.RangeAnnotationSegment(
0.5, 1.0, charts.RangeAnnotationAxisType.domain, 0.5, 1.0, charts.RangeAnnotationAxisType.domain,
startLabel: 'D1 Start', startLabel: 'D1 Start',
endLabel: 'D1 End', endLabel: 'D1 End',
@@ -96,13 +97,13 @@ class LineRangeAnnotationMarginChart extends StatelessWidget {
color: charts.MaterialPalette.gray.shade200, color: charts.MaterialPalette.gray.shade200,
// Override the default vertical direction for domain labels. // Override the default vertical direction for domain labels.
labelDirection: charts.AnnotationLabelDirection.horizontal), labelDirection: charts.AnnotationLabelDirection.horizontal),
new charts.RangeAnnotationSegment( charts.RangeAnnotationSegment(
15, 20, charts.RangeAnnotationAxisType.measure, 15, 20, charts.RangeAnnotationAxisType.measure,
startLabel: 'M1 Start', startLabel: 'M1 Start',
endLabel: 'M1 End', endLabel: 'M1 End',
labelAnchor: charts.AnnotationLabelAnchor.end, labelAnchor: charts.AnnotationLabelAnchor.end,
color: charts.MaterialPalette.gray.shade300), color: charts.MaterialPalette.gray.shade300),
new charts.RangeAnnotationSegment( charts.RangeAnnotationSegment(
35, 65, charts.RangeAnnotationAxisType.measure, 35, 65, charts.RangeAnnotationAxisType.measure,
startLabel: 'M2 Start', startLabel: 'M2 Start',
endLabel: 'M2 End', endLabel: 'M2 End',
@@ -115,14 +116,14 @@ class LineRangeAnnotationMarginChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

109
web/charts/lib/line_chart/segments.dart
View File

@@ -35,11 +35,12 @@ class SegmentsLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SegmentsLineChart(this.seriesList, {this.animate}); const SegmentsLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory SegmentsLineChart.withSampleData() { factory SegmentsLineChart.withSampleData() {
return new SegmentsLineChart( return SegmentsLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -51,45 +52,45 @@ class SegmentsLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SegmentsLineChart.withRandomData() { factory SegmentsLineChart.withRandomData() {
return new SegmentsLineChart(_createRandomData()); return SegmentsLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
// Series of data with static dash pattern and stroke width. The colorFn // Series of data with static dash pattern and stroke width. The colorFn
// accessor will colorize each datum (for all three series). // accessor will colorize each datum (for all three series).
final colorChangeData = [ final colorChangeData = [
new LinearSales(0, random.nextInt(100), null, 2.0), LinearSales(0, random.nextInt(100), null, 2.0),
new LinearSales(1, random.nextInt(100), null, 2.0), LinearSales(1, random.nextInt(100), null, 2.0),
new LinearSales(2, random.nextInt(100), null, 2.0), LinearSales(2, random.nextInt(100), null, 2.0),
new LinearSales(3, random.nextInt(100), null, 2.0), LinearSales(3, random.nextInt(100), null, 2.0),
new LinearSales(4, random.nextInt(100), null, 2.0), LinearSales(4, random.nextInt(100), null, 2.0),
new LinearSales(5, random.nextInt(100), null, 2.0), LinearSales(5, random.nextInt(100), null, 2.0),
new LinearSales(6, random.nextInt(100), null, 2.0), LinearSales(6, random.nextInt(100), null, 2.0),
]; ];
// Series of data with changing color and dash pattern. // Series of data with changing color and dash pattern.
final dashPatternChangeData = [ final dashPatternChangeData = [
new LinearSales(0, random.nextInt(100), [2, 2], 2.0), LinearSales(0, random.nextInt(100), [2, 2], 2.0),
new LinearSales(1, random.nextInt(100), [2, 2], 2.0), LinearSales(1, random.nextInt(100), [2, 2], 2.0),
new LinearSales(2, random.nextInt(100), [4, 4], 2.0), LinearSales(2, random.nextInt(100), [4, 4], 2.0),
new LinearSales(3, random.nextInt(100), [4, 4], 2.0), LinearSales(3, random.nextInt(100), [4, 4], 2.0),
new LinearSales(4, random.nextInt(100), [4, 4], 2.0), LinearSales(4, random.nextInt(100), [4, 4], 2.0),
new LinearSales(5, random.nextInt(100), [8, 3, 2, 3], 2.0), LinearSales(5, random.nextInt(100), [8, 3, 2, 3], 2.0),
new LinearSales(6, random.nextInt(100), [8, 3, 2, 3], 2.0), LinearSales(6, random.nextInt(100), [8, 3, 2, 3], 2.0),
]; ];
// Series of data with changing color and stroke width. // Series of data with changing color and stroke width.
final strokeWidthChangeData = [ final strokeWidthChangeData = [
new LinearSales(0, random.nextInt(100), null, 2.0), LinearSales(0, random.nextInt(100), null, 2.0),
new LinearSales(1, random.nextInt(100), null, 2.0), LinearSales(1, random.nextInt(100), null, 2.0),
new LinearSales(2, random.nextInt(100), null, 4.0), LinearSales(2, random.nextInt(100), null, 4.0),
new LinearSales(3, random.nextInt(100), null, 4.0), LinearSales(3, random.nextInt(100), null, 4.0),
new LinearSales(4, random.nextInt(100), null, 4.0), LinearSales(4, random.nextInt(100), null, 4.0),
new LinearSales(5, random.nextInt(100), null, 6.0), LinearSales(5, random.nextInt(100), null, 6.0),
new LinearSales(6, random.nextInt(100), null, 6.0), LinearSales(6, random.nextInt(100), null, 6.0),
]; ];
// Generate 2 shades of each color so that we can style the line segments. // Generate 2 shades of each color so that we can style the line segments.
@@ -98,7 +99,7 @@ class SegmentsLineChart extends StatelessWidget {
final green = charts.MaterialPalette.green.makeShades(2); final green = charts.MaterialPalette.green.makeShades(2);
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Color Change', id: 'Color Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -109,7 +110,7 @@ class SegmentsLineChart extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: colorChangeData, data: colorChangeData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Dash Pattern Change', id: 'Dash Pattern Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -120,7 +121,7 @@ class SegmentsLineChart extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: dashPatternChangeData, data: dashPatternChangeData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Stroke Width Change', id: 'Stroke Width Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -137,9 +138,9 @@ class SegmentsLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, return charts.LineChart(seriesList,
defaultRenderer: defaultRenderer:
new charts.LineRendererConfig(includeArea: true, stacked: true), charts.LineRendererConfig(includeArea: true, stacked: true),
animate: animate); animate: animate);
} }
@@ -148,35 +149,35 @@ class SegmentsLineChart extends StatelessWidget {
// Series of data with static dash pattern and stroke width. The colorFn // Series of data with static dash pattern and stroke width. The colorFn
// accessor will colorize each datum (for all three series). // accessor will colorize each datum (for all three series).
final colorChangeData = [ final colorChangeData = [
new LinearSales(0, 5, null, 2.0), LinearSales(0, 5, null, 2.0),
new LinearSales(1, 15, null, 2.0), LinearSales(1, 15, null, 2.0),
new LinearSales(2, 25, null, 2.0), LinearSales(2, 25, null, 2.0),
new LinearSales(3, 75, null, 2.0), LinearSales(3, 75, null, 2.0),
new LinearSales(4, 100, null, 2.0), LinearSales(4, 100, null, 2.0),
new LinearSales(5, 90, null, 2.0), LinearSales(5, 90, null, 2.0),
new LinearSales(6, 75, null, 2.0), LinearSales(6, 75, null, 2.0),
]; ];
// Series of data with changing color and dash pattern. // Series of data with changing color and dash pattern.
final dashPatternChangeData = [ final dashPatternChangeData = [
new LinearSales(0, 5, [2, 2], 2.0), LinearSales(0, 5, [2, 2], 2.0),
new LinearSales(1, 15, [2, 2], 2.0), LinearSales(1, 15, [2, 2], 2.0),
new LinearSales(2, 25, [4, 4], 2.0), LinearSales(2, 25, [4, 4], 2.0),
new LinearSales(3, 75, [4, 4], 2.0), LinearSales(3, 75, [4, 4], 2.0),
new LinearSales(4, 100, [4, 4], 2.0), LinearSales(4, 100, [4, 4], 2.0),
new LinearSales(5, 90, [8, 3, 2, 3], 2.0), LinearSales(5, 90, [8, 3, 2, 3], 2.0),
new LinearSales(6, 75, [8, 3, 2, 3], 2.0), LinearSales(6, 75, [8, 3, 2, 3], 2.0),
]; ];
// Series of data with changing color and stroke width. // Series of data with changing color and stroke width.
final strokeWidthChangeData = [ final strokeWidthChangeData = [
new LinearSales(0, 5, null, 2.0), LinearSales(0, 5, null, 2.0),
new LinearSales(1, 15, null, 2.0), LinearSales(1, 15, null, 2.0),
new LinearSales(2, 25, null, 4.0), LinearSales(2, 25, null, 4.0),
new LinearSales(3, 75, null, 4.0), LinearSales(3, 75, null, 4.0),
new LinearSales(4, 100, null, 4.0), LinearSales(4, 100, null, 4.0),
new LinearSales(5, 90, null, 6.0), LinearSales(5, 90, null, 6.0),
new LinearSales(6, 75, null, 6.0), LinearSales(6, 75, null, 6.0),
]; ];
// Generate 2 shades of each color so that we can style the line segments. // Generate 2 shades of each color so that we can style the line segments.
@@ -185,7 +186,7 @@ class SegmentsLineChart extends StatelessWidget {
final green = charts.MaterialPalette.green.makeShades(2); final green = charts.MaterialPalette.green.makeShades(2);
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Color Change', id: 'Color Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -196,7 +197,7 @@ class SegmentsLineChart extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: colorChangeData, data: colorChangeData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Dash Pattern Change', id: 'Dash Pattern Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>
@@ -207,7 +208,7 @@ class SegmentsLineChart extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: dashPatternChangeData, data: dashPatternChangeData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Stroke Width Change', id: 'Stroke Width Change',
// Light shade for even years, dark shade for odd. // Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) => colorFn: (LinearSales sales, _) =>

31
web/charts/lib/line_chart/simple.dart
View File

@@ -24,11 +24,12 @@ class SimpleLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SimpleLineChart(this.seriesList, {this.animate}); const SimpleLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory SimpleLineChart.withSampleData() { factory SimpleLineChart.withSampleData() {
return new SimpleLineChart( return SimpleLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class SimpleLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SimpleLineChart.withRandomData() { factory SimpleLineChart.withRandomData() {
return new SimpleLineChart(_createRandomData()); return SimpleLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -68,20 +69,20 @@ class SimpleLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, animate: animate); return charts.LineChart(seriesList, animate: animate);
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

107
web/charts/lib/line_chart/simple_nulls.dart
View File

@@ -28,11 +28,12 @@ class SimpleNullsLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
SimpleNullsLineChart(this.seriesList, {this.animate}); const SimpleNullsLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory SimpleNullsLineChart.withSampleData() { factory SimpleNullsLineChart.withSampleData() {
return new SimpleNullsLineChart( return SimpleNullsLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -44,59 +45,59 @@ class SimpleNullsLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory SimpleNullsLineChart.withRandomData() { factory SimpleNullsLineChart.withRandomData() {
return new SimpleNullsLineChart(_createRandomData()); return SimpleNullsLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, null), LinearSales(2, null),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
new LinearSales(4, random.nextInt(100)), LinearSales(4, random.nextInt(100)),
new LinearSales(5, random.nextInt(100)), LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)), LinearSales(6, random.nextInt(100)),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
new LinearSales(4, random.nextInt(100)), LinearSales(4, random.nextInt(100)),
new LinearSales(5, random.nextInt(100)), LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)), LinearSales(6, random.nextInt(100)),
]; ];
var myFakeMobileData = [ var myFakeMobileData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, null), LinearSales(2, null),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
new LinearSales(4, null), LinearSales(4, null),
new LinearSales(5, random.nextInt(100)), LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)), LinearSales(6, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -109,57 +110,57 @@ class SimpleNullsLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, animate: animate); return charts.LineChart(seriesList, animate: animate);
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 15), LinearSales(1, 15),
new LinearSales(2, null), LinearSales(2, null),
new LinearSales(3, 75), LinearSales(3, 75),
new LinearSales(4, 100), LinearSales(4, 100),
new LinearSales(5, 90), LinearSales(5, 90),
new LinearSales(6, 75), LinearSales(6, 75),
]; ];
final myFakeTabletData = [ final myFakeTabletData = [
new LinearSales(0, 10), LinearSales(0, 10),
new LinearSales(1, 30), LinearSales(1, 30),
new LinearSales(2, 50), LinearSales(2, 50),
new LinearSales(3, 150), LinearSales(3, 150),
new LinearSales(4, 200), LinearSales(4, 200),
new LinearSales(5, 180), LinearSales(5, 180),
new LinearSales(6, 150), LinearSales(6, 150),
]; ];
final myFakeMobileData = [ final myFakeMobileData = [
new LinearSales(0, 15), LinearSales(0, 15),
new LinearSales(1, 45), LinearSales(1, 45),
new LinearSales(2, null), LinearSales(2, null),
new LinearSales(3, 225), LinearSales(3, 225),
new LinearSales(4, null), LinearSales(4, null),
new LinearSales(5, 270), LinearSales(5, 270),
new LinearSales(6, 225), LinearSales(6, 225),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

73
web/charts/lib/line_chart/stacked_area.dart
View File

@@ -24,11 +24,12 @@ class StackedAreaLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
StackedAreaLineChart(this.seriesList, {this.animate}); const StackedAreaLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory StackedAreaLineChart.withSampleData() { factory StackedAreaLineChart.withSampleData() {
return new StackedAreaLineChart( return StackedAreaLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,50 +41,50 @@ class StackedAreaLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory StackedAreaLineChart.withRandomData() { factory StackedAreaLineChart.withRandomData() {
return new StackedAreaLineChart(_createRandomData()); return StackedAreaLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
var myFakeMobileData = [ var myFakeMobileData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -96,51 +97,51 @@ class StackedAreaLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, return charts.LineChart(seriesList,
defaultRenderer: defaultRenderer:
new charts.LineRendererConfig(includeArea: true, stacked: true), charts.LineRendererConfig(includeArea: true, stacked: true),
animate: animate); animate: animate);
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, 10), LinearSales(0, 10),
new LinearSales(1, 50), LinearSales(1, 50),
new LinearSales(2, 200), LinearSales(2, 200),
new LinearSales(3, 150), LinearSales(3, 150),
]; ];
var myFakeMobileData = [ var myFakeMobileData = [
new LinearSales(0, 15), LinearSales(0, 15),
new LinearSales(1, 75), LinearSales(1, 75),
new LinearSales(2, 300), LinearSales(2, 300),
new LinearSales(3, 225), LinearSales(3, 225),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

74
web/charts/lib/line_chart/stacked_area_custom_color.dart
View File

@@ -28,11 +28,13 @@ class StackedAreaCustomColorLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
StackedAreaCustomColorLineChart(this.seriesList, {this.animate}); const StackedAreaCustomColorLineChart(this.seriesList,
{this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory StackedAreaCustomColorLineChart.withSampleData() { factory StackedAreaCustomColorLineChart.withSampleData() {
return new StackedAreaCustomColorLineChart( return StackedAreaCustomColorLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -44,50 +46,50 @@ class StackedAreaCustomColorLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory StackedAreaCustomColorLineChart.withRandomData() { factory StackedAreaCustomColorLineChart.withRandomData() {
return new StackedAreaCustomColorLineChart(_createRandomData()); return StackedAreaCustomColorLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
var myFakeMobileData = [ var myFakeMobileData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -100,37 +102,37 @@ class StackedAreaCustomColorLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, return charts.LineChart(seriesList,
defaultRenderer: defaultRenderer:
new charts.LineRendererConfig(includeArea: true, stacked: true), charts.LineRendererConfig(includeArea: true, stacked: true),
animate: animate); animate: animate);
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 25), LinearSales(1, 25),
new LinearSales(2, 100), LinearSales(2, 100),
new LinearSales(3, 75), LinearSales(3, 75),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, 10), LinearSales(0, 10),
new LinearSales(1, 50), LinearSales(1, 50),
new LinearSales(2, 200), LinearSales(2, 200),
new LinearSales(3, 150), LinearSales(3, 150),
]; ];
var myFakeMobileData = [ var myFakeMobileData = [
new LinearSales(0, 15), LinearSales(0, 15),
new LinearSales(1, 75), LinearSales(1, 75),
new LinearSales(2, 300), LinearSales(2, 300),
new LinearSales(3, 225), LinearSales(3, 225),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
// colorFn specifies that the line will be blue. // colorFn specifies that the line will be blue.
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
@@ -141,7 +143,7 @@ class StackedAreaCustomColorLineChart extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
// colorFn specifies that the line will be red. // colorFn specifies that the line will be red.
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
@@ -151,7 +153,7 @@ class StackedAreaCustomColorLineChart extends StatelessWidget {
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
// colorFn specifies that the line will be green. // colorFn specifies that the line will be green.
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,

109
web/charts/lib/line_chart/stacked_area_nulls.dart
View File

@@ -37,11 +37,12 @@ class StackedAreaNullsLineChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
StackedAreaNullsLineChart(this.seriesList, {this.animate}); const StackedAreaNullsLineChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [LineChart] with sample data and no transition. /// Creates a [LineChart] with sample data and no transition.
factory StackedAreaNullsLineChart.withSampleData() { factory StackedAreaNullsLineChart.withSampleData() {
return new StackedAreaNullsLineChart( return StackedAreaNullsLineChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -53,59 +54,59 @@ class StackedAreaNullsLineChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory StackedAreaNullsLineChart.withRandomData() { factory StackedAreaNullsLineChart.withRandomData() {
return new StackedAreaNullsLineChart(_createRandomData()); return StackedAreaNullsLineChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() { static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random(); final random = Random();
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, null), LinearSales(2, null),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
new LinearSales(4, random.nextInt(100)), LinearSales(4, random.nextInt(100)),
new LinearSales(5, random.nextInt(100)), LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)), LinearSales(6, random.nextInt(100)),
]; ];
var myFakeTabletData = [ var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
new LinearSales(4, random.nextInt(100)), LinearSales(4, random.nextInt(100)),
new LinearSales(5, random.nextInt(100)), LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)), LinearSales(6, random.nextInt(100)),
]; ];
var myFakeMobileData = [ var myFakeMobileData = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
new LinearSales(4, null), LinearSales(4, null),
new LinearSales(5, random.nextInt(100)), LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)), LinearSales(6, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
@@ -118,60 +119,60 @@ class StackedAreaNullsLineChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.LineChart(seriesList, return charts.LineChart(seriesList,
defaultRenderer: defaultRenderer:
new charts.LineRendererConfig(includeArea: true, stacked: true), charts.LineRendererConfig(includeArea: true, stacked: true),
animate: animate); animate: animate);
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [ final myFakeDesktopData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 15), LinearSales(1, 15),
new LinearSales(2, null), LinearSales(2, null),
new LinearSales(3, 75), LinearSales(3, 75),
new LinearSales(4, 100), LinearSales(4, 100),
new LinearSales(5, 90), LinearSales(5, 90),
new LinearSales(6, 75), LinearSales(6, 75),
]; ];
final myFakeTabletData = [ final myFakeTabletData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 15), LinearSales(1, 15),
new LinearSales(2, 25), LinearSales(2, 25),
new LinearSales(3, 75), LinearSales(3, 75),
new LinearSales(4, 100), LinearSales(4, 100),
new LinearSales(5, 90), LinearSales(5, 90),
new LinearSales(6, 75), LinearSales(6, 75),
]; ];
final myFakeMobileData = [ final myFakeMobileData = [
new LinearSales(0, 5), LinearSales(0, 5),
new LinearSales(1, 15), LinearSales(1, 15),
new LinearSales(2, 25), LinearSales(2, 25),
new LinearSales(3, 75), LinearSales(3, 75),
new LinearSales(4, null), LinearSales(4, null),
new LinearSales(5, 90), LinearSales(5, 90),
new LinearSales(6, 75), LinearSales(6, 75),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Desktop', id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData, data: myFakeDesktopData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Tablet', id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData, data: myFakeTabletData,
), ),
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Mobile', id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault, colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,

10
web/charts/lib/main.dart
View File

@@ -19,10 +19,10 @@ import 'home.dart';
/// The main gallery app widget. /// The main gallery app widget.
class GalleryApp extends StatefulWidget { class GalleryApp extends StatefulWidget {
GalleryApp({Key key}) : super(key: key); const GalleryApp({Key key}) : super(key: key);
@override @override
GalleryAppState createState() => new GalleryAppState(); GalleryAppState createState() => GalleryAppState();
} }
/// The main gallery app state. /// The main gallery app state.
@@ -34,11 +34,11 @@ class GalleryAppState extends State<GalleryApp> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new MaterialApp( return MaterialApp(
title: defaultConfig.appName, title: defaultConfig.appName,
theme: defaultConfig.theme, theme: defaultConfig.theme,
showPerformanceOverlay: _showPerformanceOverlay, showPerformanceOverlay: _showPerformanceOverlay,
home: new Home( home: Home(
showPerformanceOverlay: _showPerformanceOverlay, showPerformanceOverlay: _showPerformanceOverlay,
onShowPerformanceOverlayChanged: (bool value) { onShowPerformanceOverlayChanged: (bool value) {
setState(() { setState(() {
@@ -50,5 +50,5 @@ class GalleryAppState extends State<GalleryApp> {
} }
void main() { void main() {
runApp(new GalleryApp()); runApp(const GalleryApp());
} }

36
web/charts/lib/pie_chart/auto_label.dart
View File

@@ -25,11 +25,12 @@ class DonutAutoLabelChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
DonutAutoLabelChart(this.seriesList, {this.animate}); const DonutAutoLabelChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [PieChart] with sample data and no transition. /// Creates a [PieChart] with sample data and no transition.
factory DonutAutoLabelChart.withSampleData() { factory DonutAutoLabelChart.withSampleData() {
return new DonutAutoLabelChart( return DonutAutoLabelChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,22 +42,22 @@ class DonutAutoLabelChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory DonutAutoLabelChart.withRandomData() { factory DonutAutoLabelChart.withRandomData() {
return new DonutAutoLabelChart(_createRandomData()); return DonutAutoLabelChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, int>> _createRandomData() { static List<charts.Series<LinearSales, int>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -70,7 +71,7 @@ class DonutAutoLabelChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.PieChart(seriesList, return charts.PieChart(seriesList,
animate: animate, animate: animate,
// Configure the width of the pie slices to 60px. The remaining space in // Configure the width of the pie slices to 60px. The remaining space in
// the chart will be left as a hole in the center. // the chart will be left as a hole in the center.
@@ -87,22 +88,21 @@ class DonutAutoLabelChart extends StatelessWidget {
// new charts.ArcLabelDecorator( // new charts.ArcLabelDecorator(
// insideLabelStyleSpec: new charts.TextStyleSpec(...), // insideLabelStyleSpec: new charts.TextStyleSpec(...),
// outsideLabelStyleSpec: new charts.TextStyleSpec(...)), // outsideLabelStyleSpec: new charts.TextStyleSpec(...)),
defaultRenderer: new charts.ArcRendererConfig( defaultRenderer: charts.ArcRendererConfig(
arcWidth: 60, arcWidth: 60, arcRendererDecorators: [charts.ArcLabelDecorator()]));
arcRendererDecorators: [new charts.ArcLabelDecorator()]));
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 100), LinearSales(0, 100),
new LinearSales(1, 75), LinearSales(1, 75),
new LinearSales(2, 25), LinearSales(2, 25),
new LinearSales(3, 5), LinearSales(3, 5),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

33
web/charts/lib/pie_chart/donut.dart
View File

@@ -24,11 +24,12 @@ class DonutPieChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
DonutPieChart(this.seriesList, {this.animate}); const DonutPieChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [PieChart] with sample data and no transition. /// Creates a [PieChart] with sample data and no transition.
factory DonutPieChart.withSampleData() { factory DonutPieChart.withSampleData() {
return new DonutPieChart( return DonutPieChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class DonutPieChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory DonutPieChart.withRandomData() { factory DonutPieChart.withRandomData() {
return new DonutPieChart(_createRandomData()); return DonutPieChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, int>> _createRandomData() { static List<charts.Series<LinearSales, int>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -67,24 +68,24 @@ class DonutPieChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.PieChart(seriesList, return charts.PieChart(seriesList,
animate: animate, animate: animate,
// Configure the width of the pie slices to 60px. The remaining space in // Configure the width of the pie slices to 60px. The remaining space in
// the chart will be left as a hole in the center. // the chart will be left as a hole in the center.
defaultRenderer: new charts.ArcRendererConfig(arcWidth: 60)); defaultRenderer: charts.ArcRendererConfig(arcWidth: 60));
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 100), LinearSales(0, 100),
new LinearSales(1, 75), LinearSales(1, 75),
new LinearSales(2, 25), LinearSales(2, 25),
new LinearSales(3, 5), LinearSales(3, 5),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

32
web/charts/lib/pie_chart/gauge.dart
View File

@@ -25,11 +25,11 @@ class GaugeChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
GaugeChart(this.seriesList, {this.animate}); const GaugeChart(this.seriesList, {this.animate, Key key}) : super(key: key);
/// Creates a [PieChart] with sample data and no transition. /// Creates a [PieChart] with sample data and no transition.
factory GaugeChart.withSampleData() { factory GaugeChart.withSampleData() {
return new GaugeChart( return GaugeChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,22 +41,22 @@ class GaugeChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory GaugeChart.withRandomData() { factory GaugeChart.withRandomData() {
return new GaugeChart(_createRandomData()); return GaugeChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<GaugeSegment, String>> _createRandomData() { static List<charts.Series<GaugeSegment, String>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new GaugeSegment('Low', random.nextInt(100)), GaugeSegment('Low', random.nextInt(100)),
new GaugeSegment('Acceptable', random.nextInt(100)), GaugeSegment('Acceptable', random.nextInt(100)),
new GaugeSegment('High', random.nextInt(100)), GaugeSegment('High', random.nextInt(100)),
new GaugeSegment('Highly Unusual', random.nextInt(100)), GaugeSegment('Highly Unusual', random.nextInt(100)),
]; ];
return [ return [
new charts.Series<GaugeSegment, String>( charts.Series<GaugeSegment, String>(
id: 'Segments', id: 'Segments',
domainFn: (GaugeSegment segment, _) => segment.segment, domainFn: (GaugeSegment segment, _) => segment.segment,
measureFn: (GaugeSegment segment, _) => segment.size, measureFn: (GaugeSegment segment, _) => segment.size,
@@ -68,26 +68,26 @@ class GaugeChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.PieChart(seriesList, return charts.PieChart(seriesList,
animate: animate, animate: animate,
// Configure the width of the pie slices to 30px. The remaining space in // Configure the width of the pie slices to 30px. The remaining space in
// the chart will be left as a hole in the center. Adjust the start // the chart will be left as a hole in the center. Adjust the start
// angle and the arc length of the pie so it resembles a gauge. // angle and the arc length of the pie so it resembles a gauge.
defaultRenderer: new charts.ArcRendererConfig( defaultRenderer: charts.ArcRendererConfig(
arcWidth: 30, startAngle: 4 / 5 * pi, arcLength: 7 / 5 * pi)); arcWidth: 30, startAngle: 4 / 5 * pi, arcLength: 7 / 5 * pi));
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<GaugeSegment, String>> _createSampleData() { static List<charts.Series<GaugeSegment, String>> _createSampleData() {
final data = [ final data = [
new GaugeSegment('Low', 75), GaugeSegment('Low', 75),
new GaugeSegment('Acceptable', 100), GaugeSegment('Acceptable', 100),
new GaugeSegment('High', 50), GaugeSegment('High', 50),
new GaugeSegment('Highly Unusual', 5), GaugeSegment('Highly Unusual', 5),
]; ];
return [ return [
new charts.Series<GaugeSegment, String>( charts.Series<GaugeSegment, String>(
id: 'Segments', id: 'Segments',
domainFn: (GaugeSegment segment, _) => segment.segment, domainFn: (GaugeSegment segment, _) => segment.segment,
measureFn: (GaugeSegment segment, _) => segment.size, measureFn: (GaugeSegment segment, _) => segment.size,

35
web/charts/lib/pie_chart/outside_label.dart
View File

@@ -24,11 +24,12 @@ class PieOutsideLabelChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
PieOutsideLabelChart(this.seriesList, {this.animate}); const PieOutsideLabelChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [PieChart] with sample data and no transition. /// Creates a [PieChart] with sample data and no transition.
factory PieOutsideLabelChart.withSampleData() { factory PieOutsideLabelChart.withSampleData() {
return new PieOutsideLabelChart( return PieOutsideLabelChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -40,22 +41,22 @@ class PieOutsideLabelChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory PieOutsideLabelChart.withRandomData() { factory PieOutsideLabelChart.withRandomData() {
return new PieOutsideLabelChart(_createRandomData()); return PieOutsideLabelChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, int>> _createRandomData() { static List<charts.Series<LinearSales, int>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -69,7 +70,7 @@ class PieOutsideLabelChart extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new charts.PieChart(seriesList, return charts.PieChart(seriesList,
animate: animate, animate: animate,
// Add an [ArcLabelDecorator] configured to render labels outside of the // Add an [ArcLabelDecorator] configured to render labels outside of the
// arc with a leader line. // arc with a leader line.
@@ -81,8 +82,8 @@ class PieOutsideLabelChart extends StatelessWidget {
// new charts.ArcLabelDecorator( // new charts.ArcLabelDecorator(
// insideLabelStyleSpec: new charts.TextStyleSpec(...), // insideLabelStyleSpec: new charts.TextStyleSpec(...),
// outsideLabelStyleSpec: new charts.TextStyleSpec(...)), // outsideLabelStyleSpec: new charts.TextStyleSpec(...)),
defaultRenderer: new charts.ArcRendererConfig(arcRendererDecorators: [ defaultRenderer: charts.ArcRendererConfig(arcRendererDecorators: [
new charts.ArcLabelDecorator( charts.ArcLabelDecorator(
labelPosition: charts.ArcLabelPosition.outside) labelPosition: charts.ArcLabelPosition.outside)
])); ]));
} }
@@ -90,14 +91,14 @@ class PieOutsideLabelChart extends StatelessWidget {
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 100), LinearSales(0, 100),
new LinearSales(1, 75), LinearSales(1, 75),
new LinearSales(2, 25), LinearSales(2, 25),
new LinearSales(3, 5), LinearSales(3, 5),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

33
web/charts/lib/pie_chart/partial_pie.dart
View File

@@ -25,11 +25,12 @@ class PartialPieChart extends StatelessWidget {
final List<charts.Series> seriesList; final List<charts.Series> seriesList;
final bool animate; final bool animate;
PartialPieChart(this.seriesList, {this.animate}); const PartialPieChart(this.seriesList, {this.animate, Key key})
: super(key: key);
/// Creates a [PieChart] with sample data and no transition. /// Creates a [PieChart] with sample data and no transition.
factory PartialPieChart.withSampleData() { factory PartialPieChart.withSampleData() {
return new PartialPieChart( return PartialPieChart(
_createSampleData(), _createSampleData(),
// Disable animations for image tests. // Disable animations for image tests.
animate: false, animate: false,
@@ -41,22 +42,22 @@ class PartialPieChart extends StatelessWidget {
// It is used for creating random series data to demonstrate animation in // It is used for creating random series data to demonstrate animation in
// the example app only. // the example app only.
factory PartialPieChart.withRandomData() { factory PartialPieChart.withRandomData() {
return new PartialPieChart(_createRandomData()); return PartialPieChart(_createRandomData());
} }
/// Create random data. /// Create random data.
static List<charts.Series<LinearSales, int>> _createRandomData() { static List<charts.Series<LinearSales, int>> _createRandomData() {
final random = new Random(); final random = Random();
final data = [ final data = [
new LinearSales(0, random.nextInt(100)), LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)), LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)), LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)), LinearSales(3, random.nextInt(100)),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,
@@ -70,22 +71,22 @@ class PartialPieChart extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Configure the pie to display the data across only 3/4 instead of the full // Configure the pie to display the data across only 3/4 instead of the full
// revolution. // revolution.
return new charts.PieChart(seriesList, return charts.PieChart(seriesList,
animate: animate, animate: animate,
defaultRenderer: new charts.ArcRendererConfig(arcLength: 3 / 2 * pi)); defaultRenderer: charts.ArcRendererConfig(arcLength: 3 / 2 * pi));
} }
/// Create one series with sample hard coded data. /// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() { static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [ final data = [
new LinearSales(0, 100), LinearSales(0, 100),
new LinearSales(1, 75), LinearSales(1, 75),
new LinearSales(2, 25), LinearSales(2, 25),
new LinearSales(3, 5), LinearSales(3, 5),
]; ];
return [ return [
new charts.Series<LinearSales, int>( charts.Series<LinearSales, int>(
id: 'Sales', id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year, domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales, measureFn: (LinearSales sales, _) => sales.sales,

36
web/charts/lib/pie_chart/pie_gallery.dart
View File

@@ -24,42 +24,42 @@ import 'partial_pie.dart';
List<GalleryScaffold> buildGallery() { List<GalleryScaffold> buildGallery() {
return [ return [
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.pie_chart), listTileIcon: const Icon(Icons.pie_chart),
title: 'Simple Pie Chart', title: 'Simple Pie Chart',
subtitle: 'With a single series', subtitle: 'With a single series',
childBuilder: () => new SimplePieChart.withRandomData(), childBuilder: () => SimplePieChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.pie_chart), listTileIcon: const Icon(Icons.pie_chart),
title: 'Outside Label Pie Chart', title: 'Outside Label Pie Chart',
subtitle: 'With a single series and labels outside the arcs', subtitle: 'With a single series and labels outside the arcs',
childBuilder: () => new PieOutsideLabelChart.withRandomData(), childBuilder: () => PieOutsideLabelChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.pie_chart), listTileIcon: const Icon(Icons.pie_chart),
title: 'Partial Pie Chart', title: 'Partial Pie Chart',
subtitle: 'That doesn\'t cover a full revolution', subtitle: 'That doesn\'t cover a full revolution',
childBuilder: () => new PartialPieChart.withRandomData(), childBuilder: () => PartialPieChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.pie_chart), listTileIcon: const Icon(Icons.pie_chart),
title: 'Simple Donut Chart', title: 'Simple Donut Chart',
subtitle: 'With a single series and a hole in the middle', subtitle: 'With a single series and a hole in the middle',
childBuilder: () => new DonutPieChart.withRandomData(), childBuilder: () => DonutPieChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.pie_chart), listTileIcon: const Icon(Icons.pie_chart),
title: 'Auto Label Donut Chart', title: 'Auto Label Donut Chart',
subtitle: subtitle:
'With a single series, a hole in the middle, and auto-positioned labels', 'With a single series, a hole in the middle, and auto-positioned labels',
childBuilder: () => new DonutAutoLabelChart.withRandomData(), childBuilder: () => DonutAutoLabelChart.withRandomData(),
), ),
new GalleryScaffold( GalleryScaffold(
listTileIcon: new Icon(Icons.pie_chart), listTileIcon: const Icon(Icons.pie_chart),
title: 'Gauge Chart', title: 'Gauge Chart',
subtitle: 'That doesn\'t cover a full revolution', subtitle: 'That doesn\'t cover a full revolution',
childBuilder: () => new GaugeChart.withRandomData(), childBuilder: () => GaugeChart.withRandomData(),
), ),
]; ];
} }

Some files were not shown because too many files have changed in this diff Show More