diff --git a/src/charting/animation/ChartAnimator.ts b/src/charting/animation/ChartAnimator.ts index 14bfc99c..b4aafe73 100644 --- a/src/charting/animation/ChartAnimator.ts +++ b/src/charting/animation/ChartAnimator.ts @@ -1,15 +1,24 @@ -import TWEEN from '@nativescript-community/tween'; -const Easing = TWEEN.Easing; -export type EasingFunction = (k: number) => number; -export { Easing }; -/** - * Object responsible for all animations in the Chart. Animations require API level 11. - * +import { time } from '@nativescript/core/profiling'; +import { AdditiveTweening, EasingFunction } from 'additween'; +export { EasingFunction }; +if (!global.window) { + window = global.window = { + requestAnimationFrame, + cancelAnimationFrame, + performance: { + now: time + } + } as any; +} - */ +function clamp(value) { + return Math.min(1, Math.max(0, value)); +} + +class Tween> extends AdditiveTweening {} export class ChartAnimator { /** object that is updated upon animation update */ - private mListener: () => void; + private mListener: (state) => void; /** The phase of drawn values on the y-axis. 0 - 1 */ protected mPhaseY = 1; @@ -17,32 +26,33 @@ export class ChartAnimator { /** The phase of drawn values on the x-axis. 0 - 1 */ protected mPhaseX = 1; - constructor(listener?: () => void) { + constructor(listener?: (state) => void) { this.mListener = listener; } - private xAnimator(duration, easing: EasingFunction = Easing.Linear.None, listener?: () => void) { - return new TWEEN.Tween({ value: 0 }) - .to({ value: 1 }, duration) - .easing(easing) - .onUpdate((obj) => { - this.setPhaseX(obj.value); + private startAnim(duration, easing?: EasingFunction, listener?: (state) => void) { + const anim = new Tween({ + onRender: (state) => { if (listener) { - listener(); + listener(state); } - }); + } + }); + anim.tween({ value: 0 }, { value: 1 }, duration); + return anim; + } + private startXAnim(duration, easing?: EasingFunction, listener?: (state) => void) { + return this.startAnim(duration, easing, (state) => { + this.setPhaseX(state.value); + listener?.(state); + }); } - private yAnimator(duration, easing: EasingFunction = Easing.Linear.None, listener?: () => void) { - return new TWEEN.Tween({ value: 0 }) - .to({ value: 1 }, duration) - .easing(easing) - .onUpdate((obj) => { - this.setPhaseY(obj.value); - if (listener) { - listener(); - } - }); + private startYAnim(duration, easing?: EasingFunction, listener?: (state) => void) { + return this.startAnim(duration, easing, (state) => { + this.setPhaseY(state.value); + listener?.(state); + }); } /** @@ -51,9 +61,8 @@ export class ChartAnimator { * @param durationMillis animation duration * @param easing EasingFunction */ - public animateX(durationMillis, easing: EasingFunction = Easing.Linear.None) { - const animatorX = this.xAnimator(durationMillis, easing, this.mListener); - animatorX.start(0); + public animateX(durationMillis, easing?: EasingFunction) { + this.startXAnim(durationMillis, easing, this.mListener); } /** @@ -64,11 +73,9 @@ export class ChartAnimator { * @param easingX EasingFunction for the X axis * @param easingY EasingFunction for the Y axis */ - public animateXY(durationMillisX, durationMillisY, easingX: EasingFunction = Easing.Linear.None, easingY: EasingFunction = Easing.Linear.None) { - const xAnimator = this.xAnimator(durationMillisX, easingX, durationMillisX > durationMillisY ? this.mListener : undefined); - const yAnimator = this.yAnimator(durationMillisY, easingY || easingX, durationMillisX > durationMillisY ? undefined : this.mListener); - xAnimator.start(0); - yAnimator.start(0); + public animateXY(durationMillisX, durationMillisY, easingX?: EasingFunction, easingY?: EasingFunction) { + this.startXAnim(durationMillisX, easingX, durationMillisX > durationMillisY ? this.mListener : undefined); + this.startYAnim(durationMillisY, easingY || easingX, durationMillisX > durationMillisY ? undefined : this.mListener); } /** @@ -77,9 +84,8 @@ export class ChartAnimator { * @param durationMillis animation duration * @param easing EasingFunction */ - public animateY(durationMillis, easing: EasingFunction = Easing.Linear.None) { - const animatorY = this.yAnimator(durationMillis, easing, this.mListener); - animatorY.start(0); + public animateY(durationMillis, easing?: EasingFunction) { + this.startYAnim(durationMillis, easing, this.mListener); } /** @@ -97,12 +103,7 @@ export class ChartAnimator { * @param phase let value between 0 - 1 */ public setPhaseY(phase) { - if (phase > 1) { - phase = 1; - } else if (phase < 0) { - phase = 0; - } - this.mPhaseY = phase; + this.mPhaseY = clamp(phase); } /** @@ -120,11 +121,6 @@ export class ChartAnimator { * @param phase let value between 0 - 1 */ public setPhaseX(phase) { - if (phase > 1) { - phase = 1; - } else if (phase < 0) { - phase = 0; - } - this.mPhaseX = phase; + this.mPhaseX = clamp(phase); } } diff --git a/src/charting/charts/Chart.ts b/src/charting/charts/Chart.ts index 59f91894..5ea4c5c3 100644 --- a/src/charting/charts/Chart.ts +++ b/src/charting/charts/Chart.ts @@ -1,29 +1,25 @@ -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'; +import { PanGestureHandlerOptions, PinchGestureHandlerOptions, TapGestureHandlerOptions } from '@nativescript-community/gesturehandler'; import { Align, Canvas, CanvasView, Paint } from '@nativescript-community/ui-canvas'; -import { DefaultValueFormatter } from '../formatter/DefaultValueFormatter'; -import { CLog, CLogTypes, Utils } from '../utils/Utils'; -import { Color } from '@nativescript/core/color'; -import { Highlight } from '../highlight/Highlight'; -import { Legend } from '../components/Legend'; -import { ViewPortHandler } from '../utils/ViewPortHandler'; -import { XAxis } from '../components/XAxis'; +import { EventData, Trace } from '@nativescript/core'; +import { layout } from '@nativescript/core/utils/utils'; +import { ChartAnimator, EasingFunction } from '../animation/ChartAnimator'; import { Description } from '../components/Description'; -import { DataRenderer } from '../renderer/DataRenderer'; import { IMarker } from '../components/IMarker'; -import { LegendRenderer } from '../renderer/LegendRenderer'; +import { Legend } from '../components/Legend'; +import { XAxis } from '../components/XAxis'; +import { ChartData } from '../data/ChartData'; +import { Entry } from '../data/Entry'; +import { DefaultValueFormatter } from '../formatter/DefaultValueFormatter'; +import { Highlight } from '../highlight/Highlight'; import { IHighlighter } from '../highlight/IHighlighter'; -import { profile } from '@nativescript/core/profiling'; -import { ChartAnimator, EasingFunction } from '../animation/ChartAnimator'; +import { ChartInterface } from '../interfaces/dataprovider/ChartInterface'; +import { IDataSet } from '../interfaces/datasets/IDataSet'; import { ViewPortJob } from '../jobs/ViewPortJob'; import { ChartTouchListener } from '../listener/ChartTouchListener'; -import { layout } from '@nativescript/core/utils/utils'; -import { EventData, Trace } from '@nativescript/core'; -import { addWeakEventListener, removeWeakEventListener } from '@nativescript/core/ui/core/weak-event-listener'; -import { PanGestureHandlerOptions, PinchGestureHandlerOptions, TapGestureHandlerOptions } from '@nativescript-community/gesturehandler'; +import { DataRenderer } from '../renderer/DataRenderer'; +import { LegendRenderer } from '../renderer/LegendRenderer'; +import { CLog, CLogTypes, Utils } from '../utils/Utils'; +import { ViewPortHandler } from '../utils/ViewPortHandler'; const LOG_TAG = 'NSChart'; @@ -47,11 +43,6 @@ export abstract class Chart, T extends Ch abstract getYChartMax(); abstract getMaxVisibleCount(); - /** - * flag that indicates if logging is enabled or not - */ - protected mLogEnabled; - /** * object that holds all data that was originally set for the chart, before * it was modified or any filtering algorithms had been applied @@ -176,7 +167,7 @@ export abstract class Chart, T extends Ch /** * tasks to be done after the view is setup */ - protected mJobs = []; + protected mJobs = []; /** * default constructor for initialization in code @@ -199,7 +190,7 @@ export abstract class Chart, T extends Ch * initialize all paints and stuff */ protected init() { - this.mAnimator = new ChartAnimator(() => { + this.mAnimator = new ChartAnimator((state) => { // during animations we dont need to compute axis things this.noComputeOnNextDraw = true; this.invalidate(); @@ -918,27 +909,6 @@ export abstract class Chart, T extends Ch return this.mExtraLeftOffset; } - /** - * Set this to true to enable logcat outputs for the chart. Beware that - * logcat output decreases rendering performance. Default: disabled. - * - * @deprecated use Nativescript Trace with ChartTraceCategory - * @param enabled - */ - public setLogEnabled(enabled) { - this.mLogEnabled = enabled; - } - - /** - * Returns true if log-output is enabled for the chart, fals if not. - * - * @deprecated use Nativescript Trace with ChartTraceCategory - * @return - */ - public isLogEnabled() { - return this.mLogEnabled; - } - /** * Sets the text that informs the user that there is no data available with * which to draw the chart. @@ -1304,7 +1274,6 @@ export abstract class Chart, T extends Ch // return saveToGallery(fileName, "", "MPAndroidChart-Library Save", Bitmap.CompressFormat.PNG, 40); // } - public removeViewportJob(job) { const index = this.mJobs.indexOf(job); if (index >= 0) {