LineGraphComponent class

LineGraphComponent is a canvas and SVG elements used to draw line graph. The canvas is NOT responsive. Even if you use width 100% on this component, you have to redraw the canvas in order for the canvas to resize. This can be achieved by calling redraw under Window.onResize.

The line graph itself and the data points are drawn on the canvas. On top of that is an SVG element, used to display captions under data points dynamically. Currently, the way it displays captions cannot be changed.

Inheritance

Constructors

LineGraphComponent.new(RenderComponent parent, String id, {Map<String, List<DataPoint>> points = const {}, int? labelCountX, int? labelCountY, double? labelMinX, double? labelMinY, double? labelMaxX, double? labelMaxY, double maxLabelWidthX = 50, double maxLabelWidthY = 20, double textMargin = 15, String labelFormatX(double label) = _defaultLabelFormat, String labelFormatY(double label) = _defaultLabelFormat, double aspectRatio = 1.5, double gridLineWidth = 1, String gridLineStrokeStyle = '#d7d7d7', String labelFillStyle = '#aaaaaa', String labelFontStyle = '14px sans-serif', Map<String, double> dotRadius = const {keyAllGraph : 6}, Map<String, double> hoverDotRadiusOffset = const {keyAllGraph : 0}, Map<String, String> dotFillStyle = const {keyAllGraph : 'white'}, Map<String, String> dotStrokeStyle = const {keyAllGraph : '#2d2d2d'}, Map<String, double> dotStrokeWidth = const {keyAllGraph : 1}, Map<String, String> dataLineStrokeStyle = const {keyAllGraph : '#aaaaaa'}, Map<String, double> dataLineWidth = const {keyAllGraph : 2}, Map<String, String> shadingFillStyle = const {keyAllGraph : 'rgba(0, 0, 0, 0.2)'}, String captionBgColor = '#2d2d2d', String captionFgColor = 'white', String captionFontFamily = 'sans-serif', bool drawGridY = false, double minWidth = 500, bool minWidthOverride = false, dynamic onHover(double x, double y, double coordX, double coordY)?, dynamic onHoverOut()?})

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
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 its baseInnerHtml with this component string asString), 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
dataLineStrokeStyle ↔ Map<String, String>
Graph line stroke style.
getter/setter pair
dataLineWidth ↔ Map<String, double>
The graph line width.
getter/setter pair
dotFillStyle ↔ Map<String, String>
Dot point fill style.
getter/setter pair
dotRadius ↔ Map<String, double>
Dot point size. Just to remind you, dot point is each point in the graph that represents a data point.
getter/setter pair
dotStrokeStyle ↔ Map<String, String>
Dot point stroke style.
getter/setter pair
dotStrokeWidth ↔ Map<String, double>
Dot point stroke width.
getter/setter pair
drawGridY → bool
Whether to draw Y grid lines.
finalinherited
elem → Element
Returns the DOM Element of this component by doing querySelector('$id').
no setterinherited
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
hoverDotRadiusOffset ↔ Map<String, double>
Hover dot area radius offset. By default the hover dot area is equal to the dot point area size. Just to remind you, dot point is each point in the graph that represents a data point.
getter/setter pair
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
labelCountX ← int
no getter
labelCountY ← int
no getter
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
labelMaxX ← double
no getter
labelMaxY ← double
no getter
labelMinX ← double
no getter
labelMinY ← double
no getter
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
onHover ↔ dynamic Function(double x, double y, double coordX, double coordY)?
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
shadingFillStyle ↔ Map<String, String>
The fill style for the shading under graph line.
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 an Element or Document type). Call this in loadEventHandlers.
inherited
addOnClickTo(Element node, void onClick(Event)) → void
Creates an onClick event on node (has to be an Element or Document 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
Draws graph data points, clearing areas outside the grid. It is possible that some data points lie outside the graph grid, whether it lies outside of the X range or Y range or both. Those that are out of range will be removed, but a line will still be drawn towards the "invisible" data point.
override
drawGrid([bool drawY = false]) → void
Draw grid lines spanning left to right, lines that are parallel with the X axis. If true is supplied in drawY, Y axis lines are drawn too.
override
drawLabels() → void
Draws text labels. Labels must be drawn only after drawing the data points.
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
getCalculatedMinWidth() → double
Gets the calculated minimum width of the graph, depending on minWidthOverride and of course, minWidth.
override
getLabelCountX() → int
Gets how many labels the graph should display in X axis. If _initialLabelCountX is not supplied, which means labelCountX was not supplied in the constructor, the label counts is dynamic (depending on canvas width).
override
getLabelCountY() → int
Gets how many labels the graph should display in Y axis. If _initialLabelCountY is not supplied, which means labelCountY was not supplied in the constructor, the label counts is dynamic (depending on canvas height).
override
getLabelMaxX() → double
Get the maximum (the last, the rightmost) X label value. If _initialLabelMaxX is null, which means that labelMaxX value from the constructor was not supplied, maximum X label value will be retrieved from ceil(maximum X value in data points).
getLabelMaxY() → double
Get the maximum (the last, the topmost) Y label value. If _initialLabelMaxY is null, which means that labelMaxY 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.
getLabelMinX() → double
Get the minimum (the first, the leftmost) X label value. If _initialLabelMinX is null, which means that labelMinX value from the constructor was not supplied, minimum X label value will be retrieved from floor(minimum X value in data points).
getLabelMinY() → double
Get the minimum (the first, the bottommost) Y label value. If _initialLabelMinY is null, which means that labelMinY 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
onPointHover(String dataKey, double x, double y, double coordX, double coordY) → void
x and y defines the x,y of the data point that is being hovered. coordX and coordY defines the x,y coordinate of the dot, in canvas/SVG absolute coordinate space.
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