Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@imaNNeo
imaNNeo committed Mar 23, 2022
1 parent 1c76051 commit a5e5b3c
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 149 deletions.
2 changes: 1 addition & 1 deletion example/lib/line_chart/samples/line_chart_sample4.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ class LineChartSample4 extends StatelessWidget {
),
),
leftTitles: AxisTitles(
axisNameReservedSize: 20,
axisNameSize: 20,
axisName: const Padding(
padding: EdgeInsets.only(bottom: 8.0),
child: Text('Value'),
Expand Down
207 changes: 108 additions & 99 deletions lib/src/chart/base/axis_chart/axis_chart_data.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart/src/chart/base/axis_chart/axis_chart_painter.dart';
import 'package:fl_chart/src/chart/base/base_chart/base_chart_data.dart';
import 'package:fl_chart/src/utils/lerp.dart';
import 'package:fl_chart/src/utils/utils.dart';
import 'package:flutter/material.dart';

/// This is the base class for axis base charts data
Expand Down Expand Up @@ -80,30 +81,128 @@ abstract class AxisChartData extends BaseChartData with EquatableMixin {
];
}

/// Holds data for showing label values on axis numbers
class SideTitles with EquatableMixin {

/// Determines showing or hiding this side titles
final bool showTitles;

/// You can override it to pass your custom widget to show in each axis value
final GetTitleWidgetFunction getTitles;

/// It determines the maximum space that your titles need,
/// (All titles will stretch using this value)
final double reservedSize;

/// Texts are showing with provided [interval]. If you don't provide anything,
/// we try to find a suitable value to set as [interval] under the hood.
final double? interval;

/// It draws some title on an axis, per axis values,
/// [showTitles] determines showing or hiding this side,
///
/// Texts are depend on the axis value, you can override [getTitles],
/// it gives you an axis value (double value) and a [TitleMeta] which contains
/// additional information about the axis.
/// Then you should return a [Widget] to show.
/// It allows you to do anything you want, For example you can show icons
/// instead of texts, because it accepts a [Widget]
///
/// [reservedSize] determines the maximum space that your titles need,
/// (All titles will stretch using this value)
///
/// Texts are showing with provided [interval]. If you don't provide anything,
/// we try to find a suitable value to set as [interval] under the hood.
SideTitles({
bool? showTitles,
GetTitleWidgetFunction? getTitles,
double? reservedSize,
double? interval,
}) : showTitles = showTitles ?? false,
getTitles = getTitles ?? defaultGetTitle,
reservedSize = reservedSize ?? 22,
interval = interval {
if (interval == 0) {
throw ArgumentError("SideTitles.interval couldn't be zero");
}
}

/// Lerps a [SideTitles] based on [t] value, check [Tween.lerp].
static SideTitles lerp(SideTitles a, SideTitles b, double t) {
return SideTitles(
showTitles: b.showTitles,
getTitles: b.getTitles,
reservedSize: lerpDouble(a.reservedSize, b.reservedSize, t),
interval: lerpDouble(a.interval, b.interval, t),
);
}

/// Copies current [SideTitles] to a new [SideTitles],
/// and replaces provided values.
SideTitles copyWith({
bool? showTitles,
GetTitleWidgetFunction? getTitles,
double? reservedSize,
double? interval,
}) {
return SideTitles(
showTitles: showTitles ?? this.showTitles,
getTitles: getTitles ?? this.getTitles,
reservedSize: reservedSize ?? this.reservedSize,
interval: interval ?? this.interval,
);
}

/// Used for equality check, see [EquatableMixin].
@override
List<Object?> get props => [
showTitles,
getTitles,
reservedSize,
interval,
];
}

/// Holds data for showing each side titles (left, top, right, bottom)
class AxisTitles with EquatableMixin {
final double axisNameReservedSize;

/// Determines the size of [axisName]
final double axisNameSize;

/// It shows the name of axis, for example your x-axis shows year,
/// then you might want to show it using [axisName] property
final Widget? axisName;

/// It is responsible to show your axis side labels.
final SideTitles sideTitles;

bool get showAxisTitles => axisName != null && axisNameReservedSize != 0;
/// If there is something to show as axisTitles, it returns true
bool get showAxisTitles => axisName != null && axisNameSize != 0;

/// If there is something to show as sideTitles, it returns true
bool get showSideTitles =>
sideTitles.showTitles && sideTitles.reservedSize != 0;

/// you can provide [axisName] if you want to show a general
/// label on this axis,
///
/// [axisNameSize] determines the maximum size that [axisName] can use
///
/// [sideTitles] property is responsible to show your axis side labels
AxisTitles({
Widget? axisName,
double? axisNameReservedSize,
double? axisNameSize,
SideTitles? sideTitles,
}) : axisName = axisName,
axisNameReservedSize = axisNameReservedSize ?? 16,
axisNameSize = axisNameSize ?? 16,
sideTitles = sideTitles ?? SideTitles();

/// Lerps a [AxisTitles] based on [t] value, check [Tween.lerp].
static AxisTitles lerp(AxisTitles a, AxisTitles b, double t) {
return AxisTitles(
axisName: b.axisName,
axisNameReservedSize:
lerpDouble(a.axisNameReservedSize, b.axisNameReservedSize, t),
axisNameSize:
lerpDouble(a.axisNameSize, b.axisNameSize, t),
sideTitles: SideTitles.lerp(a.sideTitles, b.sideTitles, t),
);
}
Expand All @@ -117,7 +216,7 @@ class AxisTitles with EquatableMixin {
}) {
return AxisTitles(
axisName: axisName ?? this.axisName,
axisNameReservedSize: axisNameReservedSize ?? this.axisNameReservedSize,
axisNameSize: axisNameReservedSize ?? this.axisNameSize,
sideTitles: sideTitles ?? this.sideTitles,
);
}
Expand All @@ -126,12 +225,12 @@ class AxisTitles with EquatableMixin {
@override
List<Object?> get props => [
axisName,
axisNameReservedSize,
axisNameSize,
sideTitles,
];
}

/// Holds data for showing titles on each side of charts (a title per each axis value).
/// Holds data for showing titles on each side of charts.
class FlTitlesData with EquatableMixin {
final bool show;

Expand Down Expand Up @@ -216,96 +315,6 @@ class FlTitlesData with EquatableMixin {
];
}

/// Determines showing or hiding specified title.
typedef CheckToShowTitle = bool Function(double minValue, double maxValue,
SideTitles sideTitles, double appliedInterval, double value);

/// The default [SideTitles.checkToShowTitle] function (shows all titles).
///
/// It determines showing or not showing specific title.
bool defaultCheckToShowTitle(double minValue, double maxValue,
SideTitles sideTitles, double appliedInterval, double value) {
return true;
}

/// Holds data for showing each side titles (a title per each axis value).
class SideTitles with EquatableMixin {
final bool showTitles;
final GetTitleWidgetFunction getTitles;
final double reservedSize;
final double? interval;

/// It draws some title on all axis, per each axis value,
/// [showTitles] determines showing or hiding this side,
/// texts are depend on the axis value, you can override [getTitles],
/// it gives you an axis value (double value), and you should return a string.
///
/// [reservedSize] determines how much space they needed,
/// [getTextStyles] determines the text style of them,
/// It gives you an axis value (double value), and you should return a TextStyle based on it,
/// It works just like [getTitles]
///
/// [textDirection] specifies the direction of showing text.
/// it applies on all showing titles in this side.
///
/// [margin] determines margin of texts from the border line,
///
/// texts are showing with provided [interval],
/// or you can let it be null to be calculated using [getEfficientInterval],
/// also you can decide to show or not a specific title,
/// using [checkToShowTitle].
///
/// you can change rotation of drawing titles using [rotateAngle].
SideTitles({
bool? showTitles,
GetTitleWidgetFunction? getTitles,
double? reservedSize,
double? interval,
}) : showTitles = showTitles ?? false,
getTitles = getTitles ?? defaultGetTitle,
reservedSize = reservedSize ?? 22,
interval = interval {
if (interval == 0) {
throw ArgumentError("SideTitles.interval couldn't be zero");
}
}

/// Lerps a [SideTitles] based on [t] value, check [Tween.lerp].
static SideTitles lerp(SideTitles a, SideTitles b, double t) {
return SideTitles(
showTitles: b.showTitles,
getTitles: b.getTitles,
reservedSize: lerpDouble(a.reservedSize, b.reservedSize, t),
interval: lerpDouble(a.interval, b.interval, t),
);
}

/// Copies current [SideTitles] to a new [SideTitles],
/// and replaces provided values.
SideTitles copyWith({
bool? showTitles,
GetTitleWidgetFunction? getTitles,
double? reservedSize,
double? interval,
}) {
return SideTitles(
showTitles: showTitles ?? this.showTitles,
getTitles: getTitles ?? this.getTitles,
reservedSize: reservedSize ?? this.reservedSize,
interval: interval ?? this.interval,
);
}

/// Used for equality check, see [EquatableMixin].
@override
List<Object?> get props => [
showTitles,
getTitles,
reservedSize,
interval,
];
}

/// Represents a conceptual position in cartesian (axis based) space.
class FlSpot with EquatableMixin {
final double x;
Expand Down
4 changes: 2 additions & 2 deletions lib/src/chart/base/axis_chart/side_titles/side_titles_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,8 +253,8 @@ class _AxisTitleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
width: isHorizontal ? axisViewSize : axisTitles.axisNameReservedSize,
height: isHorizontal ? axisTitles.axisNameReservedSize : axisViewSize,
width: isHorizontal ? axisViewSize : axisTitles.axisNameSize,
height: isHorizontal ? axisTitles.axisNameSize : axisViewSize,
child: Center(
child: RotatedBox(
quarterTurns: axisNameQuarterTurns,
Expand Down
2 changes: 1 addition & 1 deletion lib/src/extensions/side_titles_extension.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ extension SideTitlesExtension on AxisTitles {
double get totalReservedSize {
var size = 0.0;
if (showAxisTitles) {
size += axisNameReservedSize;
size += axisNameSize;
}
if (showSideTitles) {
size += sideTitles.reservedSize;
Expand Down
59 changes: 13 additions & 46 deletions repo_files/documentations/base_chart.md
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,36 @@
# BaseChart



### FlBorderData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|show| determines to show or hide the border |true|
|border| [Border](https://api.flutter.dev/flutter/painting/Border-class.html) details that determines which border should be drawn with which color| Border.all(color: Colors.black, width: 1.0, style: BorderStyle.solid)|



### FlTitlesData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|show| determines to show or hide the titles Around the chart|true|
|leftTitles| a [SideTitles](#SideTitles) that holds data to draw left titles | SideTitles(reservedSize: 40, showTitles: true)|
|topTitles| a [SideTitles](#SideTitles) that holds data to draw top titles |SideTitles(reservedSize: 6)|
|rightTitles| a [SideTitles](#SideTitles) that holds data to draw right titles |SideTitles(reservedSize: 40,)|
|bottomTitles| a [SideTitles](#SideTitles) that holds data to draw bottom titles |SideTitles(reservedSize: 22, showTitles: true)|
|leftTitles| a [AxisTitle](#AxisTitle) that holds data to draw left titles | AxisTitles(sideTitles: SideTitles(reservedSize: 40, showTitles: true))|
|topTitles| a [AxisTitle](#AxisTitle) that holds data to draw top titles | AxisTitles(sideTitles: SideTitles(reservedSize: 6, showTitles: true))|
|rightTitles| a [AxisTitle](#AxisTitle) that holds data to draw right titles | AxisTitles(sideTitles: SideTitles(reservedSize: 40, showTitles: true))|
|bottomTitles| a [AxisTitle](#AxisTitle) that holds data to draw bottom titles | AxisTitles(sideTitles: SideTitles(reservedSize: 6, showTitles: true))|

### AxisTitle
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|axisNameSize| Determines the size of [axisName] | `16`|
|axisName| It shows the name of axis (you can pass a Widget)| `null`|
|sideTitles| It accepts a [SideTitles](#SideTitles) which is responsible to show your axis side titles| `SideTitles()`|


### SideTitles
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|showTitles| determines whether to show or hide the titles | false|
|getTitles| a function to retrieve the title with given value on the related axis, don't touch it if you want to have a number formatter by showing indicators for large numbers.|defaultGetTitle|
|reservedSize| a reserved space to show titles|22|
|textStyle| [TextStyle](https://api.flutter.dev/flutter/painting/TextStyle-class.html) the style to use for title text |TextStyle(color: Colors.black, fontSize: 11)|
|margin| margin between each title | 6|
|interval| interval to display each title on a side, left it null to be calculate automatically | null |
|rotateAngle| the clockwise angle of rotating title in degrees | 0.0 |
|textAlign| alignment of the text in each title | TextAlign.center |
|checkToShowTitle| determines show or not show titles in the provided value | show all|


# AxisChart (Line and Bar Charts)

|getTitles| A function to retrieve the title widget with given value on the related axis.|defaultGetTitle|
|reservedSize| It determines the maximum space that your titles need, |22|
|interval| Texts are showing with provided `interval`. If you don't provide anything, we try to find a suitable value to set as `interval` under the hood. | null |

### FlGridData
|PropName|Description|default value|
Expand Down Expand Up @@ -75,33 +69,6 @@
|spot|the touched [FlSpot](#FlSpot)|null|
|offset|[Offset](https://api.flutter.dev/flutter/dart-ui/Offset-class.html) of the touched spot|null|



### FlAxisTitleData

Can be used to display a title text for each axis. Titles for the vertical axes (left and right) will be rotated 90 degrees.

|PropName |Description |default value|
|:---------------|:---------------|:-------|
|show| determines to show or hide the titles for the axes|true|
|leftTitle| an [AxisTitle](#AxisTitle) that holds data to draw the title of the left axis | `AxisTitle(reservedSize: 16)`|
|topTitle| an [AxisTitle](#AxisTitle) that holds data to draw the title of the top axis | `AxisTitle(reservedSize: 16)`|
|rightTitle| an [AxisTitle](#AxisTitle) that holds data to draw the title of the right axis | `AxisTitle(reservedSize: 16)`|
|bottomTitle| an [AxisTitle](#AxisTitle) that holds data to draw the title of the bottom axis | `AxisTitle(reservedSize: 16)`|



### AxisTitle
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|showTitle| determines to show or hide the title | `false`|
|titleText| the text to draw as a description for this axis| `''`|
|reservedSize| a reserved space for the text| `14`|
|margin| margin between the axis text and inner elements ([SideTitles](#SideTitles) or the chart) | `4`|
|textStyle| [TextStyle](https://api.flutter.dev/flutter/painting/TextStyle-class.html) to determine the style of the text | `TextStyle(color: Colors.black, fontSize: 11)`|
|textAlign| [TextAlign](https://api.flutter.dev/flutter/dart-ui/TextAlign-class.html) to determine the alignment of the text | `TextAlign.center`|


### RangeAnnotations
|PropName|Description|default value|
|:-------|:----------|:------------|
Expand Down

0 comments on commit a5e5b3c

Please sign in to comment.