fix: full refactoring using latest canvas plugin. Should be faster and use less memory

Author: farfromrefug

package.json

@@ -37,23 +37,23 @@
     "readmeFilename": "README.md",
     "devDependencies": {
         "@angular/core": "^12.2.8",
-        "@commitlint/cli": "^13.2.0",
+        "@commitlint/cli": "^13.2.1",
         "@commitlint/config-conventional": "^13.2.0",
         "@nativescript-community/gesturehandler": "^0.1.47",
         "@nativescript-community/tween": "0.0.14",
-        "@nativescript-community/ui-canvas": "4.1.3",
-        "@nativescript/core": "8.1.3",
+        "@nativescript-community/ui-canvas": "4.2.11",
+        "@nativescript/core": "8.1.4",
         "@nativescript/types-android": "8.1.0",
         "@nativescript/types-ios": "8.1.1",
         "@nativescript/webpack": "5.0.0",
         "@tweenjs/tween.js": "18.6.4",
-        "@types/node": "^16.10.2",
+        "@types/node": "^16.10.3",
         "@types/tween.js": "^18.6.1",
         "@typescript-eslint/eslint-plugin": "4.33.0",
         "@typescript-eslint/parser": "4.33.0",
         "cpy-cli": "^3.1.1",
         "downsample": "^1.4.0",
-        "eslint": "7.32.0",
+        "eslint": "^7.32.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^4.0.0",
         "globby": "^12.0.2",

plugin/package.json

@@ -34,7 +34,7 @@
     "dependencies": {
         "@nativescript-community/gesturehandler": "^0.1.47",
         "@nativescript-community/tween": "^0.0.14",
-        "@nativescript-community/ui-canvas": "^4.1.3",
+        "@nativescript-community/ui-canvas": "^4.2.11",
         "downsample": "^1.4.0",
         "number-format.js": "^2.0.9"
     }

src/charting/buffer/AbstractBuffer.ts

@@ -16,7 +16,7 @@ export abstract class AbstractBuffer<T> {
      */
     constructor(size: number) {
         this.index = 0;
-        this.buffer = Utils.createNativeArray(size);
+        this.buffer = Utils.createArrayBuffer(size);
     }
 
     /** limits the drawing on the x-axis */

src/charting/charts/BarChart.ts

@@ -25,9 +25,9 @@ export class BarChart extends BarLineChartBase<Entry, BarDataSet, BarData> imple
     /**
      * flag that indicates whether the highlight should be full-bar oriented, or single-value?
      */
-    protected mHighlightFullBarEnabled = false;
+    protected mHighlightFullBarEnabled ;
 
-    protected mFitBars = false;
+    protected mFitBars;
 
     /**
      * if set to true, all values are drawn above their bars, instead of below their top
@@ -37,7 +37,7 @@ export class BarChart extends BarLineChartBase<Entry, BarDataSet, BarData> imple
     /**
      * if set to true, a grey area is drawn behind each bar that indicates the maximum value
      */
-    private mDrawBarShadow = false;
+    private mDrawBarShadow;
 
     private mCustomRenderer: CustomRenderer;
 

src/charting/charts/BarLineChartBase.ts

@@ -38,34 +38,35 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
     /**
      * flag that indicates if auto scaling on the y axis is enabled
      */
-    protected mAutoScaleMinMaxEnabled = false;
+    protected mAutoScaleMinMaxEnabled: boolean;
 
     /**
      * flag that indicates if pinch-zoom is enabled. if true, both x and y axis
      * can be scaled with 2 fingers, if false, x and y axis can be scaled
      * separately
      */
-    protected mPinchZoomEnabled = false;
+    protected mPinchZoomEnabled: boolean;
 
     /**
      * flag that indicates if double tap zoom is enabled or not
      */
-    protected mDoubleTapToZoomEnabled = false;
+    protected mDoubleTapToZoomEnabled: boolean;
 
     /**
      * flag that indicates if highlighting per dragging over a fully zoomed out
      * chart is enabled
      */
-    protected mHighlightPerDragEnabled = false;
+    protected mHighlightPerDragEnabled: boolean;
 
     /**
      * if true, dragging is enabled for the chart
      */
-    private mDragXEnabled = false;
-    private mDragYEnabled = false;
+    private mDragXEnabled: boolean;
+    private mDragYEnabled: boolean;
+    e;
 
-    private mScaleXEnabled = false;
-    private mScaleYEnabled = false;
+    private mScaleXEnabled: boolean;
+    private mScaleYEnabled: boolean;
 
     /**
      * palet object for the (by default) lightgrey background of the grid
@@ -77,9 +78,9 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
     /**
      * flag indicating if the grid background should be drawn or not
      */
-    protected mDrawGridBackground = false;
+    protected mDrawGridBackground: boolean;
 
-    protected mDrawBorders = false;
+    protected mDrawBorders: boolean;
 
     protected mClipValuesToContent = true;
 
@@ -95,7 +96,7 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
     /**
      * flag indicating if the chart should stay at the same position after a rotation. Default is false.
      */
-    protected mKeepPositionOnRotation = false;
+    protected mKeepPositionOnRotation: boolean;
 
     /**
      * the listener for user drawing on the chart
@@ -120,8 +121,6 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
 
     protected mXAxisRenderer: XAxisRenderer;
 
-    protected mOffsetsBuffer: RectF = new RectF(0, 0, 0, 0);
-
     // /** the approximator object used for data filtering */
     // private Approximator this.mApproximator;
 
@@ -141,18 +140,14 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
 
     get gridBackgroundPaint() {
         if (!this.mGridBackgroundPaint) {
-            this.mGridBackgroundPaint = new Paint();
-            this.mGridBackgroundPaint.setStyle(Style.FILL);
+            this.mGridBackgroundPaint = Utils.getTemplatePaint('black-fill');
             this.mGridBackgroundPaint.setColor('#F0F0F0'); // light
         }
         return this.mGridBackgroundPaint;
     }
     get borderPaint() {
         if (!this.mBorderPaint) {
-            this.mBorderPaint = new Paint();
-            this.mBorderPaint.setStyle(Style.STROKE);
-            this.mBorderPaint.setColor('black');
-            this.mBorderPaint.setStrokeWidth(1);
+            this.mBorderPaint = Utils.getTemplatePaint('black-stroke');
         }
         return this.mBorderPaint;
     }
@@ -442,17 +437,13 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
         }
         this.mOffsetsCalculated = true;
         if (!this.mCustomViewPortEnabled) {
-            let offsetLeft = 0,
-                offsetRight = 0,
-                offsetTop = 0,
-                offsetBottom = 0;
-
-            this.calculateLegendOffsets(this.mOffsetsBuffer);
+            const offsetBuffer = Utils.getTempRectF();
+            this.calculateLegendOffsets(offsetBuffer);
 
-            offsetLeft += this.mOffsetsBuffer.left;
-            offsetTop += this.mOffsetsBuffer.top;
-            offsetRight += this.mOffsetsBuffer.right;
-            offsetBottom += this.mOffsetsBuffer.bottom;
+            let offsetLeft = offsetBuffer.left;
+            let offsetTop = offsetBuffer.top;
+            let offsetRight = offsetBuffer.right;
+            let offsetBottom = offsetBuffer.bottom;
 
             // offsets for y-labels
             if (this.mAxisLeft && this.mAxisLeft.needsOffset()) {
@@ -465,7 +456,6 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
 
             if (this.mXAxis.isEnabled() && this.mXAxis.isDrawLabelsEnabled()) {
                 const xLabelHeight = this.mXAxis.mLabelRotatedHeight + this.mXAxis.getYOffset();
-
                 // offsets for x-labels
                 if (this.mXAxis.getPosition() === XAxisPosition.BOTTOM) {
                     offsetBottom += xLabelHeight;
@@ -483,7 +473,6 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
             offsetLeft += this.getExtraLeftOffset();
 
             const minOffset = this.mMinOffset;
-
             this.mViewPortHandler.restrainViewPort(Math.max(minOffset, offsetLeft), Math.max(minOffset, offsetTop), Math.max(minOffset, offsetRight), Math.max(minOffset, offsetBottom));
 
             if (Trace.isEnabled()) {
@@ -926,7 +915,7 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
     /**
      * flag that indicates if a custom viewport offset has been set
      */
-    private mCustomViewPortEnabled = false;
+    private mCustomViewPortEnabled: boolean;
 
     /**
      * Sets custom offsets for the current ViewPort (the offsets on the sides of
@@ -1666,7 +1655,7 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
         return this.mAutoScaleMinMaxEnabled;
     }
 
-    protected mOnSizeChangedBuffer = Utils.createNativeArray(2);
+    protected mOnSizeChangedBuffer = Utils.createArrayBuffer(2);
 
     public onSizeChanged(w: number, h: number, oldw: number, oldh: number) {
         // Saving current position of chart.

src/charting/charts/CandleStickChart.ts

@@ -1,4 +1,4 @@
-import { Canvas, Paint } from '@nativescript-community/ui-canvas';
+import { Canvas, Paint, TypedArray } from '@nativescript-community/ui-canvas';
 import { CandleData } from '../data/CandleData';
 import { CandleEntry } from '../data/CandleEntry';
 import { Highlight } from '../highlight/Highlight';
@@ -9,11 +9,11 @@ import { BaseCustomRenderer } from '../renderer/DataRenderer';
 import { BarLineChartBase } from './BarLineChartBase';
 
 export interface CustomRenderer extends BaseCustomRenderer {
-    drawShadows?: (c: Canvas, e: CandleEntry, lines: number[], paint: Paint) => void;
+    drawShadows?: (c: Canvas, e: CandleEntry, lines: number[] | TypedArray, paint: Paint) => void;
     drawOpened?: (c: Canvas, e: CandleEntry, left: number, top: number, right: number, bottom: number, paint: Paint) => void;
     drawClosed?: (c: Canvas, e: CandleEntry, left: number, top: number, right: number, bottom: number, paint: Paint) => void;
     drawEqual?: (c: Canvas, e: CandleEntry, left: number, top: number, right: number, bottom: number, paint: Paint) => void;
-    drawLines?: (c: Canvas, e: CandleEntry, range: number[], open: number[], close: number[], paint: Paint) => void;
+    drawLines?: (c: Canvas, e: CandleEntry, range: number[] | TypedArray, open: number[] | TypedArray, close: number[] | TypedArray, paint: Paint) => void;
     drawHighlight?: (c: Canvas, e: Highlight, set: ICandleDataSet, paint: Paint) => void;
 }
 /**

src/charting/charts/Chart.ts

@@ -50,7 +50,7 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
     /**
      * flag that indicates if logging is enabled or not
      */
-    protected mLogEnabled = false;
+    protected mLogEnabled;
 
     /**
      * object that holds all data that was originally set for the chart, before
@@ -61,7 +61,7 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
     /**
      * Flag that indicates if highlighting per tap (touch) is enabled
      */
-    protected mHighLightPerTapEnabled = false;
+    protected mHighLightPerTapEnabled;
 
     /**
      * If set to true, chart continues to scroll after touch up
@@ -155,13 +155,13 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
     /**
      * flag that indicates if offsets calculation has already been done or not
      */
-    protected mOffsetsCalculated = false;
+    protected mOffsetsCalculated;
 
     /**
      * let the drawer know it does not need to compute axis and legends
      * (it can used the cached ones)
      */
-    protected noComputeOnNextDraw = false;
+    protected noComputeOnNextDraw;
     /**
      * array of Highlight objects that reference the highlighted slices in the
      * chart
@@ -173,6 +173,11 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
      */
     protected mMaxHighlightDistance = 500;
 
+    /**
+     * tasks to be done after the view is setup
+     */
+     protected mJobs = [];
+
     /**
      * default constructor for initialization in code
      */
@@ -209,21 +214,12 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
 
     get infoPaint() {
         if (!this.mInfoPaint) {
-            this.mInfoPaint = new Paint();
-            this.mInfoPaint.setAntiAlias(true);
-            this.mInfoPaint.setColor('#F7BD33'); // orange
+            this.mInfoPaint = Utils.getTemplatePaint('black-fill');
             this.mInfoPaint.setTextAlign(Align.CENTER);
             this.mInfoPaint.setTextSize(12);
         }
         return this.mInfoPaint;
     }
-    get descPaint() {
-        if (!this.mDescPaint) {
-            this.mDescPaint = new Paint();
-            this.mDescPaint.setAntiAlias(true);
-        }
-        return this.mDescPaint;
-    }
 
     public panGestureOptions: PanGestureHandlerOptions & { gestureTag?: number };
     public tapGestureOptions: TapGestureHandlerOptions & { gestureTag?: number };
@@ -360,7 +356,7 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
         // check if description should be drawn
         if (this.mDescription != null && this.mDescription.isEnabled()) {
             const position = this.mDescription.getPosition();
-            const paint = this.descPaint;
+            const paint = Utils.getTempPaint();
             paint.setFont(this.mDescription.getFont());
             paint.setColor(this.mDescription.getTextColor());
             paint.setTextAlign(this.mDescription.getTextAlign());
@@ -1308,10 +1304,6 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
     //     return saveToGallery(fileName, "", "MPAndroidChart-Library Save", Bitmap.CompressFormat.PNG, 40);
     // }
 
-    /**
-     * tasks to be done after the view is setup
-     */
-    protected mJobs = [];
 
     public removeViewportJob(job) {
         const index = this.mJobs.indexOf(job);

src/charting/charts/CombinedChart.ts

@@ -43,13 +43,13 @@ export class CombinedChart extends BarLineChartBase<Entry, BarLineScatterCandleB
     /**
      * flag that indicates whether the highlight should be full-bar oriented, or single-value?
      */
-    protected mHighlightFullBarEnabled = false;
+    protected mHighlightFullBarEnabled;
 
     /**
      * if set to true, a grey area is drawn behind each bar that indicates the
      * maximum value
      */
-    protected mDrawBarShadow = false;
+    protected mDrawBarShadow;
 
     protected mDrawOrder: DrawOrder[];
 

src/charting/charts/HorizontalBarChart.ts

@@ -21,7 +21,6 @@ const LOG_TAG = 'HorizontalBarChart';
 
 export class HorizontalBarChart extends BarChart {
     mRenderer: HorizontalBarChartRenderer;
-    protected mGetPositionBuffer = Utils.createNativeArray(2);
 
     protected init() {
         this.mViewPortHandler = new HorizontalViewPortHandler();
@@ -46,17 +45,13 @@ export class HorizontalBarChart extends BarChart {
     }
 
     public calculateOffsets() {
-        let offsetLeft = 0,
-            offsetRight = 0,
-            offsetTop = 0,
-            offsetBottom = 0;
+        const offsetBuffer = Utils.getTempRectF();
+        this.calculateLegendOffsets(offsetBuffer);
 
-        this.calculateLegendOffsets(this.mOffsetsBuffer);
-
-        offsetLeft += this.mOffsetsBuffer.left;
-        offsetTop += this.mOffsetsBuffer.top;
-        offsetRight += this.mOffsetsBuffer.right;
-        offsetBottom += this.mOffsetsBuffer.bottom;
+        let offsetLeft = offsetBuffer.left;
+        let offsetTop = offsetBuffer.top;
+        let offsetRight = offsetBuffer.right;
+        let offsetBottom = offsetBuffer.bottom;
 
         // offsets for y-labels
         if (this.mAxisLeft && this.mAxisLeft.needsOffset()) {

src/charting/charts/PieChart.ts

@@ -55,17 +55,17 @@ export class PieChart extends PieRadarChartBase<Entry, PieDataSet, PieData> {
     /**
      * if true, the hole will see-through to the inner tips of the slices
      */
-    private mDrawSlicesUnderHole: boolean = false;
+    private mDrawSlicesUnderHole: boolean;
 
     /**
      * if true, the values inside the piechart are drawn as percent values
      */
-    private mUsePercentValues: boolean = false;
+    private mUsePercentValues: boolean;
 
     /**
      * if true, the slices of the piechart are rounded
      */
-    private mDrawRoundedSlices: boolean = false;
+    private mDrawRoundedSlices: boolean;
 
     /**
      * variable for the text that is drawn in the center of the pie-chart