@nativescript-community/ui-chart
Version:
A powerful chart / graph plugin, supporting line, bar, pie, radar, bubble, and candlestick charts as well as scaling, panning and animations.
352 lines (351 loc) • 11.6 kB
JavaScript
import { Align, DashPathEffect } from '@nativescript-community/ui-canvas';
import { DefaultAxisValueFormatter } from '../formatter/DefaultAxisValueFormatter';
import { ComponentBase } from './ComponentBase';
/**
* Base-class of all axes (previously called labels).
*
*/
export class AxisBase extends ComponentBase {
/**
* default constructor
*/
constructor(chart) {
super();
/**
* the color of the grid lines for this axis (the horizontal lines
* coming from each label).
*/
this.gridColor = 'gray';
/**
* the width of the grid lines that are drawn away from each axis
* label.
*/
this.gridLineWidth = 1;
/**
* the color of the border surrounding the chart.
*/
this.axisLineColor = 'gray';
/**
* the width of the border surrounding the chart in dp.
*/
this.axisLineWidth = 1;
/**
* the actual array of entries
*/
this.mEntries = [];
this.mLabels = [];
/**
* axis label entries only used for centered labels
*/
this.mCenteredEntries = [];
/**
* the number of label entries the axis should have, default 6
*/
this.labelCount = 6;
/**
* the labels text alignment of the axis labels.
*/
this.labelTextAlign = Align.LEFT;
/**
* if true, the set number of y-labels will be forced
*/
this.forceLabelsEnabled = false;
/**
* flag indicating if the grid lines for this axis should be drawn
*/
this.drawGridLines = true;
/**
* flag that indicates if the line alongside the axis is drawn or not
*/
this.drawAxisLine = true;
/**
* flag that indicates of the labels of this axis should be drawn or not
*/
this.drawLabels = true;
/**
* Centers the axis labels instead of drawing them at their original position.
* This is useful especially for grouped BarChart.
*/
this.centerAxisLabels = false;
this.ensureLastLabel = false;
this.allowLastLabelAboveMax = false;
/**
* the path effect of the axis line that makes dashed lines possible
*/
this.axisLineDashPathEffect = null;
/**
* the path effect of the grid lines that makes dashed lines possible
*/
this.gridDashPathEffect = null;
/**
* array of limit lines that can be set for the axis
*/
this.mLimitLines = [];
/**
* flag indicating if the limit lines are drawn
*/
this.drawLimitLines = true;
/**
* When enabled the LimitLines are drawn behind the actual data,
* otherwise on top. Default: false
*
* @param enabled
*/
this.drawLimitLinesBehindData = false;
/**
* When enabled the limitlines will be clipped to contentRect,
* otherwise they can bleed outside the content rect.
*/
this.clipLimitLinesToContent = true;
/**
* When enabled the labels are drawn behind the actual data,
* otherwise on top. Default: false
*/
this.drawLabelsBehindData = false;
/**
* When enabled the grid lines are draw on top of the actual data,
* otherwise behind. Default: true
*/
this.drawGridLinesBehindData = true;
/**
* flag indicating the mark ticks should be drawn
*/
this.drawMarkTicks = false;
/**
* Extra spacing for `axisMinimum` to be added to automatically calculated `axisMinimum`
*/
this.spaceMin = 0;
/**
* Extra spacing for `axisMaximum` to be added to automatically calculated `axisMaximum`
*/
this.spaceMax = 0;
/**
* flag indicating that the axis-min value has been customized
*/
this.mCustomAxisMin = false;
/**
* flag indicating that the axis-max value has been customized
*/
this.mCustomAxisMax = false;
/**
* don't touch this direclty, use setter
*/
this.mAxisMaximum = 0;
/**
* don't touch this directly, use setter
*/
this.mAxisMinimum = 0;
/**
* the total range of values this axis covers
*/
this.axisRange = 0;
/**
* the total range of values this axis covers
*/
this.ignoreOffsets = false;
this.chart = chart;
}
/**
* Adds a new LimitLine to this axis.
*
* @param l
*/
addLimitLine(l) {
this.mLimitLines.push(l);
}
/**
* Removes the specified LimitLine from the axis.
*
* @param l
*/
removeLimitLine(l) {
const index = this.mLimitLines.indexOf(l);
if (index >= 0) {
this.mLimitLines.splice(index, 1);
}
}
/**
* Removes all LimitLines from the axis.
*/
removeAllLimitLines() {
this.mLimitLines = [];
}
/**
* Returns the LimitLines of this axis.
*/
get limitLines() {
return this.mLimitLines;
}
/**
* Returns the longest formatted label (in terms of characters), this axis
* contains.
*/
get longestLabel() {
let longest = '';
const labels = this.mLabels;
for (let i = 0; i < this.mEntries.length; i++) {
const text = labels[i];
if (text && longest.length < text.length) {
longest = text;
}
}
return longest;
}
getFormattedLabel(index) {
// let label = this.mLabels[index];
// if (!label) {
// label = this.mLabels[index] = this.valueFormatter.getAxisLabel()
// }
return this.mLabels[index];
}
/**
* Sets the formatter to be used for formatting the axis labels. If no formatter is set, the
* chart will
* automatically determine a reasonable formatting (concerning decimals) for all the values
* that are drawn inside
* the chart. Use chart.defaultValueFormatter to use the formatter calculated by the chart.
*
* @param f
*/
set valueFormatter(f) {
if (!f)
this.mAxisValueFormatter = new DefaultAxisValueFormatter(this.mDecimals);
else
this.mAxisValueFormatter = f;
}
/**
* Returns the formatter used for formatting the axis labels.
*/
get valueFormatter() {
if (!this.mAxisValueFormatter || (this.mAxisValueFormatter instanceof DefaultAxisValueFormatter && this.mAxisValueFormatter.decimalDigits !== this.mDecimals)) {
this.mAxisValueFormatter = new DefaultAxisValueFormatter(this.mDecimals);
}
return this.mAxisValueFormatter;
}
/**
* Enables the grid line to be drawn in dashed mode, e.g. like this
* "- - - - - -". THIS ONLY WORKS IF HARDWARE-ACCELERATION IS TURNED OFF.
* Keep in mind that hardware acceleration boosts performance.
*
* @param lineLength the length of the line pieces
* @param spaceLength the length of space in between the pieces
* @param phase offset, in degrees (normally, use 0)
*/
enableGridDashedLine(lineLength, spaceLength, phase) {
this.gridDashPathEffect = new DashPathEffect([lineLength, spaceLength], phase);
}
/**
* Enables the axis line to be drawn in dashed mode, e.g. like this
* "- - - - - -". THIS ONLY WORKS IF HARDWARE-ACCELERATION IS TURNED OFF.
* Keep in mind that hardware acceleration boosts performance.
*
* @param lineLength the length of the line pieces
* @param spaceLength the length of space in between the pieces
* @param phase offset, in degrees (normally, use 0)
*/
enableAxisLineDashedLine(lineLength, spaceLength, phase) {
this.axisLineDashPathEffect = new DashPathEffect([lineLength, spaceLength], phase);
// this.axisLineDashPathEffect = parseDashEffect(`${lineLength} ${spaceLength} ${phase}`);
}
/**
* ###### BELOW CODE RELATED TO CUSTOM AXIS VALUES ######
*/
/**
* By calling this method, any custom maximum value that has been previously set is reseted,
* and the calculation is
* done automatically.
*/
resetAxisMaximum() {
this.mCustomAxisMax = false;
}
/**
* Returns true if the axis max value has been customized (and is not calculated automatically)
*/
isAxisMaxCustom() {
return this.mCustomAxisMax;
}
/**
* By calling this method, any custom minimum value that has been previously set is reseted,
* and the calculation is
* done automatically.
*/
resetAxisMinimum() {
this.mCustomAxisMin = false;
}
/**
* Returns true if the axis min value has been customized (and is not calculated automatically)
*/
isAxisMinCustom() {
return this.mCustomAxisMin;
}
/**
* Set a custom minimum value for this axis. If set, this value will not be calculated
* automatically depending on
* the provided data. Use resetAxisMinValue() to undo this. Do not forget to call
* setStartAtZero(false) if you use
* this method. Otherwise, the axis-minimum value will still be forced to 0.
*
* @param min
*/
set axisMinimum(min) {
this.mCustomAxisMin = true;
this.mAxisMinimum = min;
this.axisRange = Math.abs(this.mAxisMaximum - min);
}
get axisMinimum() {
return this.mAxisMinimum;
}
get axisMaximum() {
return this.mAxisMaximum;
}
/**
* Set a custom maximum value for this axis. If set, this value will not be calculated
* automatically depending on
* the provided data. Use resetAxisMaxValue() to undo this.
*
* @param max
*/
set axisMaximum(max) {
this.mCustomAxisMax = true;
this.mAxisMaximum = max;
this.axisRange = Math.abs(max - this.mAxisMinimum);
}
/**
* Calculates the minimum / maximum and range values of the axis with the given
* minimum and maximum values from the chart data.
*
* @param dataMin the min value according to chart data
* @param dataMax the max value according to chart data
*/
calculate(dataMin, dataMax) {
// if custom, use value as is, else use data value
let min = this.mCustomAxisMin ? this.mAxisMinimum : dataMin - this.spaceMin;
let max = this.mCustomAxisMax ? this.mAxisMaximum : dataMax + this.spaceMax;
if (this.axisSuggestedMinimum !== undefined) {
min = Math.min(min, this.axisSuggestedMinimum);
}
if (this.axisSuggestedMaximum !== undefined) {
max = Math.max(max, this.axisSuggestedMaximum);
}
// temporary range (before calculations)
let range = Math.abs(max - min);
// in case all values are equal
if (range === 0) {
max = max + 1;
min = min - 1;
}
if (!Number.isFinite(min)) {
min = 0;
}
if (!Number.isFinite(max)) {
max = 0;
}
// recalculate
range = Math.abs(max - min);
this.mAxisMinimum = min;
this.mAxisMaximum = max;
// actual range
this.axisRange = range;
}
}
//# sourceMappingURL=AxisBase.js.map