fix: valuesOffset support for all charts

custom renderer support for drawValue for all charts
nativescript-community · Mar 18, 2021 · 8fb538f · 8fb538f
1 parent 4e6e46b
commit 8fb538f
Show file tree

Hide file tree

Showing 21 changed files with 98 additions and 88 deletions.
diff --git a/src/charting/charts/BarChart.ts b/src/charting/charts/BarChart.ts
@@ -11,10 +11,12 @@ import { BarChartRenderer } from '../renderer/BarChartRenderer';
 import { Canvas, Paint, RectF } from '@nativescript-community/ui-canvas';
 import { getEntryXValue } from '../data/BaseEntry';
 import { IBarDataSet } from '../interfaces/datasets/IBarDataSet';
+import { Color } from '@nativescript/core';
+import { BaseCustomRenderer } from '../renderer/DataRenderer';
 
 const LOG_TAG = 'BarChart';
 
-export interface CustomRenderer {
+export interface CustomRenderer extends BaseCustomRenderer {
     drawBar: (c: Canvas, e: BarEntry, dataSet: IBarDataSet, left: number, top: number, right: number, bottom: number, paint: Paint) => void;
     drawHighlight: (c: Canvas, e: Highlight, left: number, top: number, right: number, bottom: number, paint: Paint) => void;
 }
@@ -62,7 +64,7 @@ export class BarChart extends BarLineChartBase<Entry, BarDataSet, BarData> imple
         if (this.mAxisLeft.isEnabled()) {
             this.mAxisLeft.calculate(this.mData.getYMin(AxisDependency.LEFT), this.mData.getYMax(AxisDependency.LEFT));
         }
-        if (this.mAxisRight.isEnabled()) {
+        if (this.mAxisRight && this.mAxisRight.isEnabled()) {
             this.mAxisRight.calculate(this.mData.getYMin(AxisDependency.RIGHT), this.mData.getYMax(AxisDependency.RIGHT));
         }
     }

diff --git a/src/charting/charts/BarLineChartBase.ts b/src/charting/charts/BarLineChartBase.ts
@@ -1609,7 +1609,7 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
         if (this.mAxisLeft.isEnabled()) {
             max = Math.max(this.mAxisLeft.mAxisMaximum, max);
         }
-        if (this.mAxisRight.isEnabled()) {
+        if (this.mAxisRight && this.mAxisRight.isEnabled()) {
             max = Math.max(this.mAxisRight.mAxisMaximum, max);
         }
         return max;
@@ -1620,7 +1620,7 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
         if (this.mAxisLeft.isEnabled()) {
             min = Math.min(this.mAxisLeft.mAxisMinimum, min);
         }
-        if (this.mAxisRight.isEnabled()) {
+        if (this.mAxisRight && this.mAxisRight.isEnabled()) {
             min = Math.min(this.mAxisRight.mAxisMinimum, min);
         }
         return min;
@@ -1633,7 +1633,7 @@ export abstract class BarLineChartBase<U extends Entry, D extends IBarLineScatte
      */
     public isAnyAxisInverted() {
         if (this.mAxisLeft.isEnabled() && this.mAxisLeft.isInverted()) return true;
-        if (this.mAxisRight.isEnabled() && this.mAxisRight.isInverted()) return true;
+        if (this.mAxisRight && this.mAxisRight.isEnabled() && this.mAxisRight.isInverted()) return true;
         return false;
     }
 

diff --git a/src/charting/charts/BubbleChart.ts b/src/charting/charts/BubbleChart.ts
@@ -5,9 +5,10 @@ import { Highlight } from '../highlight/Highlight';
 import { BubbleDataProvider } from '../interfaces/dataprovider/BubbleDataProvider';
 import { IBubbleDataSet } from '../interfaces/datasets/IBubbleDataSet';
 import { BubbleChartRenderer } from '../renderer/BubbleChartRenderer';
+import { BaseCustomRenderer } from '../renderer/DataRenderer';
 import { BarLineChartBase } from './BarLineChartBase';
 
-export interface CustomRenderer {
+export interface CustomRenderer extends BaseCustomRenderer {
     drawBubble: (c: Canvas, e: BubbleEntry, cx: number, cy: number, radius: number, paint: Paint) => void;
     drawHighlight: (c: Canvas, e: Highlight, cx: number, cy: number, radius: number, paint: Paint) => void;
 }

diff --git a/src/charting/charts/CandleStickChart.ts b/src/charting/charts/CandleStickChart.ts
@@ -5,9 +5,10 @@ import { Highlight } from '../highlight/Highlight';
 import { CandleDataProvider } from '../interfaces/dataprovider/CandleDataProvider';
 import { ICandleDataSet } from '../interfaces/datasets/ICandleDataSet';
 import { CandleStickChartRenderer } from '../renderer/CandleStickChartRenderer';
+import { BaseCustomRenderer } from '../renderer/DataRenderer';
 import { BarLineChartBase } from './BarLineChartBase';
 
-export interface CustomRenderer {
+export interface CustomRenderer extends BaseCustomRenderer {
     drawShadows: (c: Canvas, e: CandleEntry, lines: number[], 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;

diff --git a/src/charting/charts/HorizontalBarChart.ts b/src/charting/charts/HorizontalBarChart.ts
@@ -101,7 +101,7 @@ export class HorizontalBarChart extends BarChart {
     }
 
     protected prepareValuePxMatrix() {
-        if (this.mAxisRight.isEnabled()) {
+        if (this.mAxisRight && this.mAxisRight.isEnabled()) {
             this.mRightAxisTransformer.prepareMatrixValuePx(this.mAxisRight.mAxisMinimum, this.mAxisRight.mAxisRange, this.mXAxis.mAxisRange, this.mXAxis.mAxisMinimum);
         }
         if (this.mAxisLeft.isEnabled()) {

diff --git a/src/charting/charts/LineChart.ts b/src/charting/charts/LineChart.ts
@@ -6,8 +6,10 @@ import { LineDataSet } from '../data/LineDataSet';
 import { LineChartRenderer } from '../renderer/LineChartRenderer';
 import { Highlight } from '../highlight/Highlight';
 import { Canvas, Paint, Path } from '@nativescript-community/ui-canvas';
+import { Color } from '@nativescript/core';
+import { BaseCustomRenderer } from '../renderer/DataRenderer';
 
-export interface CustomRenderer {
+export interface CustomRenderer extends BaseCustomRenderer {
     drawLine?: (c: Canvas, line: Path, paint: Paint) => void;
     drawHighlight?: (c: Canvas, e: Highlight, set: LineDataSet, paint: Paint) => void;
 }

diff --git a/src/charting/charts/PieChart.ts b/src/charting/charts/PieChart.ts
@@ -11,10 +11,11 @@ import { CLog, CLogTypes, Utils } from '../utils/Utils';
 import { Font } from '@nativescript/core/ui/styling/font';
 import { Canvas, Paint, Path, RectF } from '@nativescript-community/ui-canvas';
 import { Trace } from '@nativescript/core';
+import { BaseCustomRenderer } from '../renderer/DataRenderer';
 
 const LOG_TAG = 'PieChart';
 
-export interface CustomRenderer {
+export interface CustomRenderer extends BaseCustomRenderer {
     drawSlice: (c: Canvas, e: Entry, slice: Path, paint: Paint) => void;
     drawHighlight: (c: Canvas, e: Highlight, slice: Path, paint: Paint) => void;
 }

diff --git a/src/charting/charts/RadarChart.ts b/src/charting/charts/RadarChart.ts
@@ -11,9 +11,10 @@ import { XAxisRendererRadarChart } from '../renderer/XAxisRendererRadarChart';
 import { YAxisRendererRadarChart } from '../renderer/YAxisRendererRadarChart';
 import { CLog, CLogTypes, Utils } from '../utils/Utils';
 import { Highlight } from '../highlight/Highlight';
+import { BaseCustomRenderer } from '../renderer/DataRenderer';
 
 const LOG_TAG = 'RadarChart';
-export interface CustomRenderer {
+export interface CustomRenderer extends BaseCustomRenderer {
     drawRadar: (c: Canvas, e: Entry, left: number, top: number, right: number, bottom: number, paint: Paint) => void;
     drawHighlight: (c: Canvas, e: Highlight, left: number, top: number, right: number, bottom: number, paint: Paint) => void;
 }

diff --git a/src/charting/charts/ScatterChart.ts b/src/charting/charts/ScatterChart.ts
@@ -8,8 +8,9 @@ import { ScatterChartRenderer } from '../renderer/ScatterChartRenderer';
 import { Canvas, Paint } from '@nativescript-community/ui-canvas';
 import { Highlight } from '../highlight/Highlight';
 import { ViewPortHandler } from '../utils/ViewPortHandler';
+import { BaseCustomRenderer } from '../renderer/DataRenderer';
 
-export interface CustomRenderer {
+export interface CustomRenderer extends BaseCustomRenderer {
     drawShape: (c: Canvas, e: Entry, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, x: number, y: number, paint: Paint) => void;
     drawHighlight: (c: Canvas, e: Highlight, set: IScatterDataSet, paint: Paint) => void;
 }
@@ -21,7 +22,7 @@ export enum ScatterShape {
     CROSS = 'CROSS',
     X = 'X',
     CHEVRON_UP = 'CHEVRON_UP',
-    CHEVRON_DOWN = 'CHEVRON_DOWN',
+    CHEVRON_DOWN = 'CHEVRON_DOWN'
 }
 /**
  * The ScatterChart. Draws dots, triangles, squares and custom shapes into the

diff --git a/src/charting/renderer/AxisRenderer.ts b/src/charting/renderer/AxisRenderer.ts
@@ -4,9 +4,10 @@ import { Align, Canvas, Paint, Path, RectF, Style } from '@nativescript-communit
 import { ViewPortHandler } from '../utils/ViewPortHandler';
 import { Transformer } from '../utils/Transformer';
 import { Utils } from '../utils/Utils';
+import { BaseCustomRenderer } from './DataRenderer';
 
 export type CustomRendererGridLineFunction = (c: Canvas, renderer: AxisRenderer, rect: RectF, x, y, axisValue, paint: Paint) => void;
-export interface CustomRenderer {
+export interface CustomRenderer extends BaseCustomRenderer {
     drawGridLine?: CustomRendererGridLineFunction;
 }
 

diff --git a/src/charting/renderer/BarChartRenderer.ts b/src/charting/renderer/BarChartRenderer.ts
@@ -1,7 +1,7 @@
 import { BarLineScatterCandleBubbleRenderer } from './BarLineScatterCandleBubbleRenderer';
 import { ChartAnimator } from '../animation/ChartAnimator';
 import { BarBuffer } from '../buffer/BarBuffer';
-import { BarChart } from '../charts/BarChart';
+import { BarChart, CustomRenderer } from '../charts/BarChart';
 import { Highlight } from '../highlight/Highlight';
 import { IBarDataSet } from '../interfaces/datasets/IBarDataSet';
 import { Transformer } from '../utils/Transformer';
@@ -220,6 +220,7 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
         let negOffset = 0;
         const drawValueAboveBar = this.mChart.isDrawValueAboveBarEnabled();
         const paint = this.valuePaint;
+        const customRender = this.mChart.getCustomRenderer();
         for (let i = 0; i < this.mChart.getBarData().getDataSetCount(); i++) {
             const dataSet = dataSets[i];
             if (!this.shouldDrawValues(dataSet)) {
@@ -238,7 +239,7 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
             const valueTextHeight = Utils.calcTextHeight(paint, '8');
             const valuesOffset = dataSet.getValuesOffset();
             posOffset = drawValueAboveBar ? -(valueOffsetPlus + valuesOffset.y) : valueTextHeight + (valueOffsetPlus + valuesOffset.y);
-            negOffset = drawValueAboveBar ? valueTextHeight + valueOffsetPlus : -valueOffsetPlus;
+            negOffset = drawValueAboveBar ? valueTextHeight + (valueOffsetPlus + valuesOffset.y) : -(valueOffsetPlus + valuesOffset.y);
 
             if (isInverted) {
                 posOffset = -posOffset - valueTextHeight;
@@ -276,10 +277,11 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
                         this.drawValue(
                             c,
                             formatter.getBarLabel(val, entry),
-                            x,
+                            x + valuesOffset.x,
                             val >= 0 ? buffer.buffer[j + 1] + posOffset : buffer.buffer[j + 3] + negOffset,
                             dataSet.getValueTextColor(j / 4),
-                            paint
+                            paint,
+                            customRender
                         );
                     }
 
@@ -329,7 +331,8 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
                                 x,
                                 entry[yKey] >= 0 ? buffer.buffer[bufferIndex + 1] + posOffset : buffer.buffer[bufferIndex + 3] + negOffset,
                                 color,
-                                paint
+                                paint,
+                                customRender
                             );
                         }
 
@@ -385,7 +388,7 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
                             }
 
                             if (dataSet.isDrawValuesEnabled()) {
-                                this.drawValue(c, formatter.getBarStackedLabel(val, entry), x, y, color, paint);
+                                this.drawValue(c, formatter.getBarStackedLabel(val, entry), x, y, color, paint, customRender);
                             }
 
                             if (entry.icon != null && dataSet.isDrawIconsEnabled()) {
@@ -402,13 +405,6 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
         }
     }
 
-    public drawValue(c: Canvas, valueText, x, y, color, paint: Paint) {
-        if (valueText) {
-            paint.setColor(color);
-            c.drawText(valueText, x, y, paint);
-        }
-    }
-
     public drawHighlighted(c: Canvas, indices: Highlight[]) {
         const barData = this.mChart.getBarData();
         let entry: Entry, index: number;

diff --git a/src/charting/renderer/BarLineScatterCandleBubbleRenderer.ts b/src/charting/renderer/BarLineScatterCandleBubbleRenderer.ts
@@ -7,6 +7,8 @@ import { ViewPortHandler } from '../utils/ViewPortHandler';
 import { IDataSet } from '../interfaces/datasets/IDataSet';
 import { Entry } from '../data/Entry';
 import { BarLineScatterCandleBubbleDataSet } from '../data/BarLineScatterCandleBubbleDataSet';
+import { Canvas, Paint } from '@nativescript-community/ui-canvas';
+import { Color } from '@nativescript/core';
 
 /**
  * Class representing the bounds of the current viewport in terms of indices in the values array of a DataSet.

diff --git a/src/charting/renderer/BubbleChartRenderer.ts b/src/charting/renderer/BubbleChartRenderer.ts
@@ -118,6 +118,7 @@ export class BubbleChartRenderer extends BarLineScatterCandleBubbleRenderer {
         const paint = this.valuePaint;
         const lineHeight = Utils.calcTextHeight(paint, '1');
 
+        const customRender = this.mChart.getCustomRenderer();
         for (let i = 0; i < dataSets.length; i++) {
             const dataSet = dataSets[i];
             if (!this.shouldDrawValues(dataSet) || dataSet.getEntryCount() < 1) continue;
@@ -137,6 +138,7 @@ export class BubbleChartRenderer extends BarLineScatterCandleBubbleRenderer {
             const formatter = dataSet.getValueFormatter();
 
             const iconsOffset = dataSet.getIconsOffset();
+            const valuesOffset = dataSet.getValuesOffset();
             const isDrawValuesEnabled = dataSet.isDrawValuesEnabled();
             const isDrawIconsEnabled = dataSet.isDrawIconsEnabled();
             for (let j = 0; j < count; j += 2) {
@@ -158,7 +160,7 @@ export class BubbleChartRenderer extends BarLineScatterCandleBubbleRenderer {
                 const entry = dataSet.getEntryForIndex(j / 2 + this.mXBounds.min);
 
                 if (isDrawValuesEnabled) {
-                    this.drawValue(c, formatter.getBubbleLabel(entry[dataSet.sizeProperty], entry), x, y + 0.5 * lineHeight, valueTextColor, paint);
+                    this.drawValue(c, formatter.getBubbleLabel(entry[dataSet.sizeProperty], entry), x + valuesOffset.x, y + valuesOffset.y + 0.5 * lineHeight, valueTextColor, paint, customRender);
                 }
 
                 if (entry.icon && isDrawIconsEnabled) {
@@ -168,11 +170,6 @@ export class BubbleChartRenderer extends BarLineScatterCandleBubbleRenderer {
         }
     }
 
-    public drawValue(c: Canvas, valueText, x, y, color, paint: Paint) {
-        paint.setColor(color);
-        c.drawText(valueText, x, y, paint);
-    }
-
     public drawExtras(c: Canvas) {}
 
     public drawHighlighted(c: Canvas, indices: Highlight[]) {

diff --git a/src/charting/renderer/CandleStickChartRenderer.ts b/src/charting/renderer/CandleStickChartRenderer.ts
@@ -218,6 +218,7 @@ export class CandleStickChartRenderer extends LineScatterCandleRadarRenderer {
         }
         // if values are drawn
 
+        const customRender = this.mChart.getCustomRenderer();
         for (let i = 0; i < dataSets.length; i++) {
             const dataSet = dataSets[i];
 
@@ -237,6 +238,7 @@ export class CandleStickChartRenderer extends LineScatterCandleRadarRenderer {
             const formatter = dataSet.getValueFormatter();
 
             const iconsOffset = dataSet.getIconsOffset();
+            const valuesOffset = dataSet.getValuesOffset();
 
             const paint = this.valuePaint;
             for (let j = 0; j < count; j += 2) {
@@ -250,7 +252,7 @@ export class CandleStickChartRenderer extends LineScatterCandleRadarRenderer {
                 const entry = dataSet.getEntryForIndex(j / 2 + this.mXBounds.min);
 
                 if (dataSet.isDrawValuesEnabled()) {
-                    this.drawValue(c, formatter.getCandleLabel(entry.high, entry), x, y - yOffset, dataSet.getValueTextColor(j / 2), paint);
+                    this.drawValue(c, formatter.getCandleLabel(entry.high, entry), x + valuesOffset.x, y - yOffset + valuesOffset.y, dataSet.getValueTextColor(j / 2), paint, customRender);
                 }
 
                 if (entry.icon && dataSet.isDrawIconsEnabled()) {
@@ -260,11 +262,6 @@ export class CandleStickChartRenderer extends LineScatterCandleRadarRenderer {
         }
     }
 
-    public drawValue(c: Canvas, valueText, x, y, color, paint: Paint) {
-        paint.setColor(color);
-        c.drawText(valueText, x, y, paint);
-    }
-
     public drawExtras(c: Canvas) {}
 
     public drawHighlighted(c: Canvas, indices: Highlight[]) {

diff --git a/src/charting/renderer/CombinedChartRenderer.ts b/src/charting/renderer/CombinedChartRenderer.ts
@@ -71,10 +71,6 @@ export class CombinedChartRenderer extends DataRenderer {
         for (const renderer of this.mRenderers) renderer.drawData(c);
     }
 
-    public drawValue(c: Canvas, valueText, x, y, color) {
-        console.error('MPAndroidChart', 'Erroneous call to drawValue() in CombinedChartRenderer!');
-    }
-
     public drawValues(c: Canvas) {
         for (const renderer of this.mRenderers) renderer.drawValues(c);
     }

diff --git a/src/charting/renderer/DataRenderer.ts b/src/charting/renderer/DataRenderer.ts
@@ -1,11 +1,16 @@
 import { Align, Canvas, Paint, Style } from '@nativescript-community/ui-canvas';
+import { Color } from '@nativescript/core';
 import { ChartAnimator } from '../animation/ChartAnimator';
 import { Highlight } from '../highlight/Highlight';
 import { ChartInterface } from '../interfaces/dataprovider/ChartInterface';
 import { IDataSet } from '../interfaces/datasets/IDataSet';
 import { ViewPortHandler } from '../utils/ViewPortHandler';
 import { Renderer } from './Renderer';
 
+export interface BaseCustomRenderer {
+    drawValue: (c: Canvas, valueText: string, x: number, y: number, color: Color, paint: Paint) => void;
+}
+
 /**
  * Superclass of all render classes for the different data types (line, bar, ...).
  *
@@ -117,7 +122,16 @@ export abstract class DataRenderer extends Renderer {
      * @param color
      * @param paint
      */
-    public abstract drawValue(c: Canvas, valueText, x, y, color, paint: Paint);
+    public drawValue(c: Canvas, valueText, x, y, color, paint: Paint, customRender?: BaseCustomRenderer) {
+        if (valueText) {
+            if (customRender && customRender.drawValue) {
+                customRender.drawValue(c, valueText, x, y, color, paint);
+            } else {
+                paint.setColor(color);
+                c.drawText(valueText, x, y, paint);
+            }
+        }
+    }
 
     /**
      * Draws any kind of additional information (e.g. line-circles).