BarChartComponent class
- Inheritance
-
- Object
- Component
- StringComponent
- BaseGraphComponent
- CanvasBaseGraphComponent
- BarChartComponent
Constructors
-
BarChartComponent.new(RenderComponent parent, String id, {Map<
String, List< points = const {}, LinkedHashSet<DataPoint> >String> ? labelsX, Set<String> ? graphKeys, Map<String, String> ? graphAliases, int? labelCountY, double? labelMinY, double? labelMaxY, double maxLabelWidthX = 50, double maxLabelWidthY = 20, double textMargin = 15, String labelFormatX(double)?, String labelFormatY(double)?, double aspectRatio = 1.5, double gridLineWidth = 1, String gridLineStrokeStyle = '#d7d7d7', String labelFillStyle = '#aaaaaa', String labelFontStyle = '14px sans-serif', String captionBgColor = '#2d2d2d', String captionFgColor = 'white', String captionFontFamily = 'sans-serif', bool drawGridY = false, Map<String, String> barFillStyle = const {keyAllGraph : '#aaaaaa'}, double minWidth = 500, bool minWidthOverride = false, double singleBarWidth = 15, double barMargin = 5, double barSetMargin = 45, dynamic onHover(String x, double y)?, dynamic onHoverOut()?, dynamic onClick(String x, double y)?})
Properties
- aspectRatio → double
-
The width/height ratio of this canvas. The canvas height, everytime it
is redrawn, changes based on the canvas clientWidth. The height follows
the width depending on the ratio: height = width/aspectRatio.
finalinherited
-
barFillStyle
↔ Map<
String, String> -
Dot point fill style.
getter/setter pair
- barMargin ↔ double
-
Distance between one bar to another, NOT a distance between one set of
bars to another set (distance between an X label to another).
getter/setter pair
- barSetMargin ↔ double
-
Distance between one set of bars to another, NOT a distance between one bar in a set of
bars to another bar.
getter/setter pair
- baseInnerElement → Element?
-
no setterinherited
- baseInnerHtml ↔ String
-
Unlike RenderComponent, setting the
baseInnerHtml
does not update baseInnerElement, because this component is not designed +to be rendered independently. You need to reprint the component to the parent's component (update itsbaseInnerHtml
with this component stringasString
), and re-attach it with_attachToRenderComponent
again.getter/setter pairinherited - captionBgColor → String
-
The caption background color.
finalinherited
- captionFgColor → String
-
The caption foreground color (the text color).
finalinherited
- captionFontFamily → String
-
The caption font family.
finalinherited
- ctx → CanvasRenderingContext2D
-
no setterinherited
- drawGridY → bool
-
Whether to draw Y grid lines.
finalinherited
- elem → Element
-
Returns the DOM
Element
of this component by doingquerySelector('$id')
.no setterinherited -
graphAliases
↔ Map<
String, String> -
getter/setter pair
-
graphKeys
↔ Set<
String> -
getter/setter pair
- gridLineStrokeStyle → String
-
The line stroke style for the canvas grid.
finalinherited
- gridLineWidth → double
-
The line width used to draw canvas grid.
finalinherited
- gridMaxPxX ↔ double
-
The maximum coordinate of the grid, in pixel.
The grid starts at (gridMinPxX,gridMinPxY) and ends in
(gridMaxPxX, gridMaxPxY).
getter/setter pairinherited
- gridMaxPxY ↔ double
-
The maximum coordinate of the grid, in pixel.
The grid starts at (gridMinPxX,gridMinPxY) and ends in
(gridMaxPxX, gridMaxPxY).
getter/setter pairinherited
- gridMinPxX ↔ double
-
The minimum coordinate of the grid, in pixel.
The grid starts at (gridMinPxX,gridMinPxY) and ends in
(gridMaxPxX, gridMaxPxY).
getter/setter pairinherited
- gridMinPxY ↔ double
-
The minimum coordinate of the grid, in pixel.
The grid starts at (gridMinPxX,gridMinPxY) and ends in
(gridMaxPxX, gridMaxPxY).
getter/setter pairinherited
- hashCode → int
-
The hash code for this object.
no setterinherited
- htmlElem → HTMLElement
-
no setterinherited
- id ↔ String
-
Setting the component with new ID is basically not recommended. It will
change the real HTML ID of this element rendered in DOM too, and will
throw ComponentDuplicateIdException when the new ID already exists.
getter/setter pairinherited
-
keys
→ Iterable<
String> -
no setter
- labelFillStyle → String
-
The label texts color style.
finalinherited
- labelFontStyle → String
-
The labels font style.
finalinherited
- labelFormatX → String Function(double label)
-
The formatting function used to display the labels in X axis.
If none is specified, it by default uses
NumberFormat.compact
to format label values into string. You might want to override this for example if you want the label to be a date.finalinherited - labelFormatY → String Function(double label)
-
The formatting function used to display the labels in Y axis.
If none is specified, it by default uses
NumberFormat.compact
to format label values into string. You might want to override this for example if you want the label to be a date.finalinherited -
labelsX
↔ LinkedHashSet<
String> -
A predefined sets of labels in X axis.
If left empty, labels will be generated from the data points, and will keep
on increasing if more X values are encountered. In bar chart, labels are
stored as String, not in their numerical values. This is because it might
be impossible to compare two double values for equality. And because
the bar chart does not have any kind of sorting in X axis, it uses LinkedHashSet.
Data points are also store using LinkedHashMap, therefore, you are
the one in charge with ordering them.
getter/setter pair
- mathMlElem → MathMLElement
-
no setterinherited
- maxLabelWidthX → double
-
The maximum width for label texts in X axis.
finalinherited
- maxLabelWidthY → double
-
The maximum width for label texts in Y axis.
finalinherited
- minWidth ↔ double
-
The minimum width of the graph.
The minimum width of the graph cannot be lower than
getLabelCountX * (maxLabelWidthX + 10). This is so there are no labels
that are overlapping with each other because the width of the graph is
too short. You can however override this behavior by setting minWidthOverride
to true.
getter/setter pair
- minWidthOverride ↔ bool
-
See also minWidth.
getter/setter pair
- onClick ↔ dynamic Function(String x, double y)?
-
getter/setter pair
- onHover ↔ dynamic Function(String x, double y)?
-
getter/setter pair
- onHoverOut ↔ dynamic Function()?
-
getter/setter pair
- parent → RenderComponent
-
no setterinherited
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- singleBarWidth ↔ double
-
Width of a single bar.
getter/setter pair
- svgElem → SVGElement
-
no setterinherited
- textMargin → double
-
The distance between label text to the grid.
finalinherited
Methods
-
addOnChangeTo(
Element node, void onChange(Event)) → void -
Creates an onChange event on
node
(has to be anElement
orDocument
type). Call this in loadEventHandlers.inherited -
addOnClickTo(
Element node, void onClick(Event)) → void -
Creates an onClick event on
node
(has to be anElement
orDocument
type). Call this in loadEventHandlers.inherited -
addSubscription(
StreamSubscription subs) → void -
A generic method to add an event subscription which will also get
cancelled when unloadEventHandlers is called.
inherited
-
addSubscriptions(
Iterable< StreamSubscription> subs) → void -
A generic method to add (bulk) event subscriptions which will also get
cancelled when unloadEventHandlers is called.
inherited
-
assertDuplicateId(
String id) → void -
inherited
-
assertElementAttached(
) → void -
inherited
-
calcGridMaxPxX(
) → double -
override
-
calcGridMaxPxY(
) → double -
override
-
calcGridMinPxX(
) → double -
override
-
calcGridMinPxY(
) → double -
override
-
calculateMinMaxGrid(
) → void -
inherited
-
clearDrawing(
) → void -
inherited
-
clearPoints(
) → void -
override
-
contains(
Node node) → bool -
Contains checks whether a node is contained in this component.
Can only be used by StringComponent if the component has been attached.
inherited
-
drawDataPoints(
) → void -
override
-
drawGrid(
[bool drawY = false]) → void -
override
-
drawLabels(
) → void -
override
-
getApproxTextHeight(
) → double -
The exact font height is retrieved from
TextMetrics.fontBoundingBoxAscent
. However, not all browsers support this property, and if this property returns null, the height can be approximated by getting the width of character 'M'. This is no magic, see also: https://stackoverflow.com/a/13318387/9113939.inherited -
getBarWidth(
) → double -
getCalculatedMinWidth(
) → double -
Gets the calculated minimum width of the graph.
override
-
getLabelCountX(
) → int -
Gets how many labels the graph should display in X axis.
override
-
getLabelCountY(
) → int -
Gets how many labels the graph should display in Y axis.
If
_initialLabelCountY
is not supplied, which meanslabelCountY
was not supplied in the constructor, the label counts is dynamic (depending on canvas height).override -
getLabelMaxY(
) → double -
Get the maximum (the last, the topmost) Y label value.
If
_initialLabelMaxY
is null, which means thatlabelMaxY
value from the constructor was not supplied, maximum Y label value will be retrieved from ceil(maximum Y value in data points). There is an exception to this, however. When the maximum point equals to the minimum point, which means that the data are flat, max Y label is calculated from ceil(1.2 * maximum Y value in data points). However, if the maximum data point is 0, multiplying it by 1.2 won't do anything, and so it will be set to constant 10 instead. -
getLabelMinY(
) → double -
Get the minimum (the first, the bottommost) Y label value.
If
_initialLabelMinY
is null, which means thatlabelMinY
value from the constructor was not supplied, minimum Y label value will be retrieved from floor(minimum Y value in data points). -
hideCaption(
) → void -
Hides the caption if it's already shown.
inherited
-
isRendered(
) → bool -
Check if the component is rendered at DOM or not.
inherited
-
lerp(
num x, num x1, num x2, num y1, num y2) → double -
Linear interpolate x between two points (x1, y1) and (x2, y2).
inherited
-
loadEventHandlers(
) → void -
Loads this component event handlers.
Call super to check whether this component has been attached. If it hasn't,
it will throw ComponentNotRenderedException.
override
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
onComponentAttached(
) → void -
Called when this component has been attached to a parent RenderComponent.
override
-
onPointClick(
String x, double y) → void -
onPointHover(
String dataKey, String x, double y, double coordX, double coordY, double height) → void -
x
andy
defines the x,y of the data point that is being hovered.coordX
andcoordY
defines the x,y coordinate of the dot, in canvas/SVG absolute coordinate space. It is the starting point of the bar, which is the top left corner of a bar. -
onPointHoverOut(
) → void - Called when the user is hovering over the canvas/SVG, but not above any data point.
-
queryByClass(
String elemClass) → NodeList -
Does elem.querySelectorAll(.elemClass) to select all
element that have matched class.
inherited
-
queryById(
String id) → Element? -
Does elem.querySelector(#id) to select an element under this
component.
inherited
-
redraw(
) → void -
inherited
-
setDataPoints(
String key, List< DataPoint> points) → void - Sets the data points stored in this graph, and redraw the graph. See also redraw.
-
toString(
) → String -
Returns this component representation as HTML string that you can use
inside other component's baseInnerHtml.
inherited
-
unloadEventHandlers(
) → void -
Unloads this component event handlers.
Call super to check whether this component has been attached. If it hasn't,
it will throw ComponentNotRenderedException.
override
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited
Constants
- keyAllGraph → const String