feat: Added support for Nativescript ObservableArray.

CatchABus · CatchABus · commit eeb52e76779a · 2020-11-04T16:39:16.000+02:00
diff --git a/demo/app/examples/BarChart.ts b/demo/app/examples/BarChart.ts
@@ -1,4 +1,4 @@
-import { Color } from '@nativescript/core';
+import { Color, ObservableArray } from '@nativescript/core';
 import { BarChart } from '@nativescript-community/ui-chart/charts';
 import { BarData } from '@nativescript-community/ui-chart/data/BarData';
 import { BarDataSet } from '@nativescript-community/ui-chart/data/BarDataSet';
@@ -39,9 +39,7 @@ export function onChartLoaded(args) {
 
     //const icon = ImageSource.fromFileOrResourceSync('~/assets/star.png');
 
-    const data = new Array(5).fill(0).map(function (v, i) {
-        return { index: i, value: Math.random() * 1 };
-    });
+    const data = new ObservableArray();
 
     const sets = [];
     const set = new BarDataSet(data, 'Dataset Label', 'index', 'value');
@@ -57,6 +55,12 @@ export function onChartLoaded(args) {
 
     // Set data
     chart.setData(bd);
+
+    // Add data anytime later
+    const temp = new Array(5).fill(0).map(function (v, i) {
+        return { index: i, value: Math.random() * 1 };
+    });
+    data.push(temp);
 }
 
 export function redraw(args) {
diff --git a/src/charting/charts/Chart.ts b/src/charting/charts/Chart.ts
@@ -1,4 +1,5 @@
 import { IDataSet } from '../interfaces/datasets/IDataSet';
+import { DataSet } from '../data/DataSet';
 import { Entry } from '../data/Entry';
 import { ChartData } from '../data/ChartData';
 import { ChartInterface } from '../interfaces/dataprovider/ChartInterface';
@@ -20,7 +21,8 @@ import { ChartAnimator, EasingFunction } from '../animation/ChartAnimator';
 import { ViewPortJob } from '../jobs/ViewPortJob';
 import { ChartTouchListener } from '../listener/ChartTouchListener';
 import { layout } from '@nativescript/core/utils/utils';
-import { EventData } from '@nativescript/core';
+import { ChangedData, EventData, ObservableArray } from '@nativescript/core';
+import { addWeakEventListener, removeWeakEventListener } from '@nativescript/core/ui/core/weak-event-listener';
 
 const LOG_TAG = 'NSChart';
 
@@ -225,29 +227,54 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
      * @param data
      */
     public setData(data: T) {
+        const oldData = this.mData;
         this.mData = data;
         this.mOffsetsCalculated = false;
 
+        // If data was replaced, clear old listeners
+        if (oldData && oldData !== data) {
+            this.clearObservableListeners(oldData);
+        }
+
         if (data == null) {
             return;
         }
 
-        // calculate how many digits are needed
+        // Calculate how many digits are needed
         this.setupDefaultFormatter(data.getYMin(), data.getYMax());
 
         for (const set of this.mData.getDataSets()) {
-            if (set.needsFormatter() || set.getValueFormatter() === this.mDefaultValueFormatter) set.setValueFormatter(this.mDefaultValueFormatter);
+            const values = set.getValues();
+            if (values instanceof ObservableArray) {
+                removeWeakEventListener(values, ObservableArray.changeEvent, this.onObservableDataSetChanged, this);
+                addWeakEventListener(values, ObservableArray.changeEvent, this.onObservableDataSetChanged, this);
+            }
+
+            if (set.needsFormatter() || set.getValueFormatter() === this.mDefaultValueFormatter) {
+                set.setValueFormatter(this.mDefaultValueFormatter);
+            }
         }
 
         // let the chart know there is new data
         this.notifyDataSetChanged();
     }
 
+    protected clearObservableListeners(data: T) {
+        for (const set of data.getDataSets()) {
+            const values = set.getValues();
+            if (values instanceof ObservableArray) {
+                removeWeakEventListener(values, ObservableArray.changeEvent, this.onObservableDataSetChanged, this);
+            }
+        }
+    }
+
     /**
      * Clears the chart from all data (sets it to null) and refreshes it (by
      * calling invalidate()).
      */
     public clear() {
+        this.clearObservableListeners(this.mData);
+
         this.mData = null;
         this.mOffsetsCalculated = false;
         this.mIndicesToHighlight = null;
@@ -260,6 +287,7 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
      * chart by calling invalidate().
      */
     public clearValues() {
+        this.clearObservableListeners(this.mData);
         this.mData.clearValues();
         this.invalidate();
     }
@@ -278,6 +306,40 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
         }
     }
 
+    protected onObservableDataSetChanged(args: ChangedData<any>) {
+        const observable = args.object;
+        const data = this.mData;
+
+        if (data) {
+            let changed = false;
+            // Observable may be used by multiple datasets
+            for (const set of data.getDataSets()) {
+                if (set.getValues() === observable) {
+                    if (!changed) {
+                        changed = true;
+                    }
+                    set.init();
+                }
+            }
+
+            // If datasets actually had changes, notify chart
+            if (changed) {
+                data.notifyDataChanged();
+                // Recalculate how many digits are needed
+                this.setupDefaultFormatter(data.getYMin(), data.getYMax());
+
+                // Update chart
+                this.notifyDataSetChanged();
+            } else {
+                // Observable is no longer used by any dataset of this chart, so remove listener
+                removeWeakEventListener(observable, ObservableArray.changeEvent, this.onObservableDataSetChanged, this);
+            }
+        } else {
+            // Observable is no longer used by any dataset of this chart, so remove listener
+            removeWeakEventListener(observable, ObservableArray.changeEvent, this.onObservableDataSetChanged, this);
+        }
+    }
+
     /**
      * Lets the chart know its underlying data has changed and performs all
      * necessary recalculations. It is crucial that this method is called
diff --git a/src/charting/data/BaseDataSet.ts b/src/charting/data/BaseDataSet.ts
@@ -1,3 +1,4 @@
+import { ObservableArray } from '@nativescript/core';
 import { Entry } from './Entry';
 import { IDataSet } from '../interfaces/datasets/IDataSet';
 import { LegendForm } from '../components/Legend';
@@ -14,19 +15,21 @@ import { Rounding } from './DataSet';
  * provided by the IDataSet interface.
  */
 export abstract class BaseDataSet<T extends Entry> implements IDataSet<T> {
+    abstract init();
     abstract getYMin(): number;
     abstract getYMax(): number;
     abstract getXMin(): number;
     abstract getXMax(): number;
     abstract calcMinMaxYRange(fromX: number, toX: number);
-    abstract getEntriesForXValue(xValue: number): T[];
+    abstract getEntriesForXValue(xValue: number): T[] | ObservableArray<T>;
     abstract getEntriesAndIndexesForXValue(xValue: number): { entry: T; index: number }[];
     abstract getEntryIndexForXValue(xValue: number, closestToY: number, rounding?: Rounding): number;
     abstract getEntryIndex(e: T): number;
     abstract addEntry(e: T): boolean;
     abstract addEntryOrdered(e: T);
     abstract clear();
     abstract getEntryCount(): number;
+    abstract getValues(): T[] | ObservableArray<T>;
     abstract getEntryForIndex(index: number): T;
     abstract getEntryForXValue(xValue: number, closestToY: number, rounding?: Rounding): T;
     abstract getEntryAndIndexForXValue(xValue: number, closestToY: number, rounding?: Rounding): { entry: T; index: number };
diff --git a/src/charting/data/DataSet.ts b/src/charting/data/DataSet.ts
@@ -1,6 +1,8 @@
+import { ObservableArray } from '@nativescript/core';
 import { Entry } from './Entry';
 import { BaseDataSet } from './BaseDataSet';
 import { getEntryXValue } from './BaseEntry';
+import { Utils } from '../utils/Utils';
 
 /**
  * Determines how to round DataSet index values for
@@ -24,7 +26,7 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
     /**
      * the entries that this DataSet represents / holds together
      */
-    protected mValues: T[] = null;
+    protected mValues: T[] | ObservableArray<T> = null;
 
     /**
      * maximum y-value in the value array
@@ -68,7 +70,7 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
 
         if (this.mValues.length > 0) {
             for (let index = 0, e: T; index < this.mValues.length; index++) {
-                e = this.mValues[index];
+                e = this.getEntryForIndex(index);
                 this.initEntryData(e);
                 this.calcMinMaxForEntry(e, index);
             }
@@ -83,7 +85,7 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
         if (this.mValues == null || this.mValues.length === 0) return;
 
         for (let index = 0, e: T; index < this.mValues.length; index++) {
-            e = this.mValues[index];
+            e = this.getEntryForIndex(index);
             this.calcMinMaxForEntry(e, index);
         }
     }
@@ -99,7 +101,7 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
 
         for (let i = indexFrom; i <= indexTo; i++) {
             // only recalculate y
-            this.calcMinMaxY(this.mValues[i]);
+            this.calcMinMaxY(this.getEntryForIndex(i));
         }
     }
 
@@ -125,7 +127,7 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
             this.mXMin = Infinity;
 
             for (let index = 0, e: T; index < this.mValues.length; index++) {
-                e = this.mValues[index];
+                e = this.getEntryForIndex(index);
                 this.calcMinMaxForEntry(e, index);
             }
         } else {
@@ -194,7 +196,7 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
         }
 
         let addedIndex = this.mValues.length;
-        if (this.mValues.length > 0 && this.xProperty && this.mValues[this.mValues.length - 1] > e[this.xProperty]) {
+        if (this.mValues.length > 0 && this.xProperty && this.getEntryForIndex(this.mValues.length - 1) > e[this.xProperty]) {
             addedIndex = this.getEntryIndexForXValue(e[this.xProperty], e[this.yProperty], Rounding.UP);
             this.mValues.splice(addedIndex, 0, e);
         } else {
@@ -245,17 +247,17 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
 
     public getEntryForXValue(xValue, closestToY, rounding = Rounding.CLOSEST): T {
         const index = this.getEntryIndexForXValue(xValue, closestToY, rounding);
-        if (index > -1) return this.getInternalValues()[index];
+        if (index > -1) return this.getEntryForIndex(index);
         return null;
     }
     public getEntryAndIndexForXValue(xValue, closestToY, rounding = Rounding.CLOSEST): { entry: T; index: number } {
         const index = this.getEntryIndexForXValue(xValue, closestToY, rounding);
-        if (index > -1) return { entry: this.getInternalValues()[index], index };
+        if (index > -1) return { entry: this.getEntryForIndex(index), index };
         return null;
     }
 
     public getEntryForIndex(index) {
-        return this.getInternalValues()[index];
+        return this.getInternalValues() instanceof ObservableArray ? (this.getInternalValues() as ObservableArray<T>).getItem(index) : this.getInternalValues()[index];
     }
 
     public getEntryIndexForXValue(xValue, closestToY, rounding) {
@@ -270,8 +272,8 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
         let m: number, e: T, e1: T;
         while (low < high) {
             m = Math.floor((low + high) / 2);
-            e = values[m];
-            e1 = values[m + 1];
+            e = Utils.getArrayItem(values, m);
+            e1 = Utils.getArrayItem(values, m + 1);
             const d1 = getEntryXValue(e, xKey, m) - xValue,
                 d2 = getEntryXValue(e1, xKey, m + 1) - xValue,
                 ad1 = Math.abs(d1),
@@ -301,7 +303,7 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
         }
 
         if (closest !== -1) {
-            let e = values[closest];
+            let e = Utils.getArrayItem(values, closest);
             const closestXValue = getEntryXValue(e, xKey, closest);
             if (rounding === Rounding.UP) {
                 // If rounding up, and found x-value is lower than specified x, and we can go upper...
@@ -317,19 +319,19 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
 
             // Search by closest to y-value
             if (!isNaN(closestToY)) {
-                e = values[closest - 1];
+                e = Utils.getArrayItem(values, closest - 1);
                 xValue = getEntryXValue(e, xKey, closest - 1);
                 while (closest > 0 && xValue === closestXValue) closest -= 1;
 
-                let closestYValue = values[closest][yKey];
+                let closestYValue = Utils.getArrayItem(values, closest)[yKey];
                 let closestYIndex = closest;
 
                 // eslint-disable-next-line no-constant-condition
                 while (true) {
                     closest += 1;
                     if (closest >= values.length) break;
 
-                    e = values[closest];
+                    e = Utils.getArrayItem(values, closest);
                     xValue = getEntryXValue(e, xKey, closest);
 
                     if (xValue !== closestXValue) break;
@@ -358,17 +360,17 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
         let m: number, e: T, e1: T, mXValue;
         while (low <= high) {
             m = Math.floor((high + low) / 2);
-            e = values[m];
+            e = Utils.getArrayItem(values, m);
             mXValue = getEntryXValue(e, xKey, m);
             // if we have a match
             if (xValue === mXValue) {
-                while (m > 0 && getEntryXValue(values[m - 1], xKey, m - 1) === xValue) m--;
+                while (m > 0 && getEntryXValue(Utils.getArrayItem(values, m - 1), xKey, m - 1) === xValue) m--;
 
                 high = values.length;
 
                 // loop over all "equal" entries
                 for (; m < high; m++) {
-                    e = values[m];
+                    e = Utils.getArrayItem(values, m);
                     mXValue = getEntryXValue(e, xKey, m);
                     if (mXValue === xValue) {
                         entries.push(e);
@@ -397,17 +399,17 @@ export abstract class DataSet<T extends Entry> extends BaseDataSet<T> {
         let entry: T, mXValue;
         while (low <= high) {
             let m = Math.floor((high + low) / 2);
-            entry = values[m];
+            entry = Utils.getArrayItem(values, m);
             mXValue = getEntryXValue(entry, xKey, m);
             // if we have a match
             if (xValue === mXValue) {
-                while (m > 0 && getEntryXValue(values[m - 1], xKey, m - 1) === xValue) m--;
+                while (m > 0 && getEntryXValue(Utils.getArrayItem(values, m - 1), xKey, m - 1) === xValue) m--;
 
                 high = values.length;
 
                 // loop over all "equal" entries
                 for (; m < high; m++) {
-                    entry = values[m];
+                    entry = Utils.getArrayItem(values, m);
                     mXValue = getEntryXValue(entry, xKey, m);
                     if (mXValue === xValue) {
                         entries.push({ entry, index: m });
diff --git a/src/charting/data/RadarDataSet.ts b/src/charting/data/RadarDataSet.ts
@@ -19,9 +19,8 @@ export class RadarDataSet extends LineRadarDataSet<RadarEntry> implements IRadar
     protected mHighlightCircleOuterRadius = 4.0;
     protected mHighlightCircleStrokeWidth = 2.0;
 
-
     constructor(yVals: RadarEntry, label: string, yProperty?) {
-        super(yVals, label,null,  yProperty);
+        super(yVals, label, null, yProperty);
         this.init();
     }
 
diff --git a/src/charting/interfaces/datasets/IDataSet.d.ts b/src/charting/interfaces/datasets/IDataSet.d.ts
diff --git a/src/charting/utils/Utils.ts b/src/charting/utils/Utils.ts

Original file line number	Diff line number	Diff line change
`@@ -19,9 +19,8 @@ export class RadarDataSet extends LineRadarDataSet<RadarEntry> implements IRadar`
`19`	`19`	`protected mHighlightCircleOuterRadius = 4.0;`
`20`	`20`	`protected mHighlightCircleStrokeWidth = 2.0;`
`21`	`21`
`22`		`-`
`23`	`22`	`constructor(yVals: RadarEntry, label: string, yProperty?) {`
`24`		`- super(yVals, label,null, yProperty);`
	`23`	`+ super(yVals, label, null, yProperty);`
`25`	`24`	`this.init();`
`26`	`25`	`}`
`27`	`26`