Skip to content

Commit c07575b

Browse files
farfromrefugfarfromrefug
committedOct 19, 2020
feat: you can now use shapes as icon
·
v2.0.23v1.1.0
1 parent 4ecaad7 commit c07575b

14 files changed

+63
-55
lines changed
 

‎package.json

+7-5
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@
3838
"@angular/core": "^10.1.2",
3939
"@commitlint/cli": "^11.0.0",
4040
"@commitlint/config-conventional": "^11.0.0",
41+
"@nativescript-community/gesturehandler": "^0.1.23",
42+
"@nativescript-community/tween": "0.0.12",
43+
"@nativescript-community/ui-canvas": "4.0.26",
4144
"@nativescript/core": "7.0.7",
4245
"@nativescript/types-android": "7.0.4",
4346
"@nativescript/types-ios": "7.0.4",
4447
"@nativescript/webpack": "3.0.5",
45-
"@nativescript-community/ui-canvas": "4.0.25",
46-
"@nativescript-community/gesturehandler": "^0.1.23",
47-
"@nativescript-community/tween": "0.0.12",
4848
"@tweenjs/tween.js": "18.6.0",
4949
"@types/node": "^14.6.4",
5050
"@types/tween.js": "^18.5.1",
@@ -53,10 +53,13 @@
5353
"cpy-cli": "^3.1.1",
5454
"downsample": "^1.3.0",
5555
"eslint": "7.10.0",
56+
"eslint-config-prettier": "^6.13.0",
57+
"eslint-plugin-prettier": "^3.1.4",
5658
"husky": "^4.3.0",
5759
"lerna": "^3.22.1",
5860
"npm-watch": "^0.7.0",
5961
"number-format.js": "^2.0.9",
62+
"prettier": "^2.1.2",
6063
"prompt": "^1.0.0",
6164
"rimraf": "^3.0.2",
6265
"typescript": "4.1.0-dev.20200927"
@@ -66,6 +69,5 @@
6669
"extends": [
6770
"@commitlint/config-conventional"
6871
]
69-
},
70-
"dependencies": {}
72+
}
7173
}

‎plugin/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
"dependencies": {
3131
"@nativescript-community/gesturehandler": "^0.1.23",
3232
"@nativescript-community/tween": "0.0.12",
33-
"@nativescript-community/ui-canvas": "^4.0.25",
33+
"@nativescript-community/ui-canvas": "^4.0.26",
3434
"downsample": "^1.3.0",
3535
"number-format.js": "^2.0.9"
3636
}
37-
}
37+
}

‎src/charting/charts/Chart.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
171171

172172
// initialize the utils
173173
// Utils.init(this._context);
174-
this.mMaxHighlightDistance = (500);
174+
this.mMaxHighlightDistance = 500;
175175

176176
// this.mDescription = new Description();
177177
this.mLegend = new Legend();
@@ -467,7 +467,7 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
467467
* @param distDp
468468
*/
469469
public setMaxHighlightDistance(distDp) {
470-
this.mMaxHighlightDistance = (distDp);
470+
this.mMaxHighlightDistance = distDp;
471471
}
472472

473473
/**
@@ -624,10 +624,11 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
624624
this.setLastHighlighted(this.mIndicesToHighlight);
625625

626626
if (callListener) {
627-
if (!this.valuesToHighlight()) this.notify({ eventName: 'nothingSelected', object: this });
628-
else {
627+
if (!this.valuesToHighlight()) {
628+
this.notify({ eventName: 'selected', object: this });
629+
} else {
629630
// notify the listener
630-
this.notify({ eventName: 'valueSelected', object: this, entry: e, highlight: high });
631+
this.notify({ eventName: 'selected', object: this, entry: e, highlight: high });
631632
}
632633
}
633634

‎src/charting/data/BaseEntry.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import Shape from '@nativescript-community/ui-canvas/shapes/shape';
12
import { ImageSource } from '@nativescript/core/image-source';
23

34
/**
45
* Created by Philipp Jahoda on 02/06/16.
56
*/
67
export interface BaseEntry {
7-
icon?: ImageSource;
8+
icon?: ImageSource | Shape;
89
data?: any;
910
[k: string]: any;
1011
}

‎src/charting/listener/ChartTouchListener.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export enum ChartGesture {
1212
SINGLE_TAP,
1313
DOUBLE_TAP,
1414
LONG_PRESS,
15-
FLING
15+
FLING,
1616
}
1717
/**
1818
* Created by philipp on 12/06/15.

‎src/charting/renderer/BarChartRenderer.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
180180
public drawValues(c: Canvas) {
181181
const data = this.mChart.getData();
182182
const dataSets = data.getDataSets();
183-
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some(d=>d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
183+
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some((d) => d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
184184
return;
185185
}
186186
// if values are drawn
@@ -254,7 +254,7 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
254254
px += iconsOffset.x;
255255
py += iconsOffset.y;
256256

257-
Utils.drawImage(c, icon, px, py);
257+
Utils.drawIcon(c, this.mChart, icon, px, py);
258258
}
259259
}
260260
// if we have stacks
@@ -294,7 +294,7 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
294294
);
295295
}
296296

297-
if (isDrawIconsEnabled && entry.icon != null ) {
297+
if (isDrawIconsEnabled && entry.icon != null) {
298298
const icon = entry.icon;
299299

300300
let px = x;
@@ -303,7 +303,7 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
303303
px += iconsOffset.x;
304304
py += iconsOffset.y;
305305

306-
Utils.drawImage(c, icon, px, py);
306+
Utils.drawIcon(c, this.mChart, icon, px, py);
307307
}
308308
// draw stack values
309309
} else {
@@ -351,7 +351,7 @@ export class BarChartRenderer extends BarLineScatterCandleBubbleRenderer {
351351

352352
if (entry.icon != null && dataSet.isDrawIconsEnabled()) {
353353
const icon = entry.icon;
354-
Utils.drawImage(c, icon, x + iconsOffset.x, y + iconsOffset.y);
354+
Utils.drawIcon(c, this.mChart, icon, x + iconsOffset.x, y + iconsOffset.y);
355355
}
356356
}
357357
}

‎src/charting/renderer/BubbleChartRenderer.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export class BubbleChartRenderer extends BarLineScatterCandleBubbleRenderer {
100100
public drawValues(c: Canvas) {
101101
const data = this.mChart.getBubbleData();
102102
const dataSets = data.getDataSets();
103-
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some(d=>d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
103+
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some((d) => d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
104104
return;
105105
}
106106

@@ -152,7 +152,7 @@ export class BubbleChartRenderer extends BarLineScatterCandleBubbleRenderer {
152152
}
153153

154154
if (entry.icon && isDrawIconsEnabled) {
155-
Utils.drawImage(c, entry.icon, x + iconsOffset.x, y + iconsOffset.y);
155+
Utils.drawIcon(c, this.mChart, entry.icon, x + iconsOffset.x, y + iconsOffset.y);
156156
}
157157
}
158158
}

‎src/charting/renderer/CandleStickChartRenderer.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ export class CandleStickChartRenderer extends LineScatterCandleRadarRenderer {
212212
public drawValues(c: Canvas) {
213213
const data = this.mChart.getCandleData();
214214
const dataSets = data.getDataSets();
215-
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some(d=>d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
215+
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some((d) => d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
216216
return;
217217
}
218218
// if values are drawn
@@ -252,7 +252,7 @@ export class CandleStickChartRenderer extends LineScatterCandleRadarRenderer {
252252
}
253253

254254
if (entry.icon && dataSet.isDrawIconsEnabled()) {
255-
Utils.drawImage(c, entry.icon, x + iconsOffset.x, y + iconsOffset.y);
255+
Utils.drawIcon(c, this.mChart, entry.icon, x + iconsOffset.x, y + iconsOffset.y);
256256
}
257257
}
258258
}

‎src/charting/renderer/HorizontalBarChartRenderer.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export class HorizontalBarChartRenderer extends BarChartRenderer {
125125
public drawValues(c: Canvas) {
126126
const data = this.mChart.getData();
127127
const dataSets = data.getDataSets();
128-
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some(d=>d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
128+
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some((d) => d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
129129
return;
130130
}
131131
// if values are drawn
@@ -204,7 +204,7 @@ export class HorizontalBarChartRenderer extends BarChartRenderer {
204204
px += iconsOffset.x;
205205
py += iconsOffset.y;
206206

207-
Utils.drawImage(c, icon, px, py);
207+
Utils.drawIcon(c, this.mChart, icon, px, py);
208208
}
209209
}
210210
// if each value of a potential stack should be drawn
@@ -267,7 +267,7 @@ export class HorizontalBarChartRenderer extends BarChartRenderer {
267267
px += iconsOffset.x;
268268
py += iconsOffset.y;
269269

270-
Utils.drawImage(c, icon, px, py);
270+
Utils.drawIcon(c, this.mChart, icon, px, py);
271271
}
272272
// draw stack values
273273
} else {
@@ -332,7 +332,7 @@ export class HorizontalBarChartRenderer extends BarChartRenderer {
332332

333333
if (isDrawIconsEnabled && entry.icon != null) {
334334
const icon = entry.icon;
335-
Utils.drawImage(c, icon, x + iconsOffset.x, y + iconsOffset.y);
335+
Utils.drawIcon(c, this.mChart, icon, x + iconsOffset.x, y + iconsOffset.y);
336336
}
337337
}
338338
}

‎src/charting/renderer/LineChartRenderer.ts

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
import { ImageSource, profile } from '@nativescript/core';
21
import { Canvas, Direction, FillType, Matrix, Paint, Path, Style, createImage, releaseImage } from '@nativescript-community/ui-canvas';
3-
import { LineRadarRenderer } from './LineRadarRenderer';
2+
import { ImageSource, profile } from '@nativescript/core';
43
import { ChartAnimator } from '../animation/ChartAnimator';
4+
import { LineChart } from '../charts';
55
import { getEntryXValue } from '../data/BaseEntry';
6-
import { LineDataSet, Mode } from '../data/LineDataSet';
76
import { Rounding } from '../data/DataSet';
7+
import { LineDataSet, Mode } from '../data/LineDataSet';
88
import { Highlight } from '../highlight/Highlight';
9-
import { LineDataProvider } from '../interfaces/dataprovider/LineDataProvider';
109
import { ILineDataSet } from '../interfaces/datasets/ILineDataSet';
1110
import { ColorTemplate } from '../utils/ColorTemplate';
1211
import { Transformer } from '../utils/Transformer';
1312
import { Utils } from '../utils/Utils';
1413
import { ViewPortHandler } from '../utils/ViewPortHandler';
15-
import { LineChart } from '../charts';
14+
import { LineRadarRenderer } from './LineRadarRenderer';
1615

1716
// fix drawing "too" thin paths on iOS
1817

@@ -624,15 +623,15 @@ export class LineChartRenderer extends LineRadarRenderer {
624623

625624
if (drawIcons && entry.icon != null) {
626625
const icon = entry.icon;
627-
Utils.drawImage(c, icon, x + iconsOffset.x, y + iconsOffset.y);
626+
Utils.drawIcon(c, this.mChart, icon, x + iconsOffset.x, y + iconsOffset.y);
628627
}
629628
}
630629
}
631630

632631
public drawValues(c: Canvas) {
633632
const data = this.mChart.getLineData();
634633
const dataSets = data.getDataSets();
635-
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some(d=>d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
634+
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some((d) => d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
636635
return;
637636
}
638637

‎src/charting/renderer/PieChartRenderer.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ export class PieChartRenderer extends DataRenderer {
339339
const drawEntryLabels = this.mChart.isDrawEntryLabelsEnabled();
340340
const data = this.mChart.getData();
341341
const dataSets = data.getDataSets();
342-
if (!drawEntryLabels || dataSets.some(d=>d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
342+
if (!drawEntryLabels || dataSets.some((d) => d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
343343
return;
344344
}
345345
const center = this.mChart.getCenterCircleBox();
@@ -368,10 +368,8 @@ export class PieChartRenderer extends DataRenderer {
368368

369369
const labelRadius = radius - labelRadiusOffset;
370370

371-
372371
const yValueSum = data.getYValueSum();
373372

374-
375373
let angle;
376374
let xIndex = 0;
377375

@@ -543,7 +541,7 @@ export class PieChartRenderer extends DataRenderer {
543541
let y = (labelRadius + iconsOffset.y) * sliceYBase + center.y;
544542
y += iconsOffset.x;
545543

546-
Utils.drawImage(c, icon, x, y);
544+
Utils.drawIcon(c, this.mChart, icon, x, y);
547545
}
548546

549547
xIndex++;

‎src/charting/renderer/RadarChartRenderer.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@ export class RadarChartRenderer extends LineRadarRenderer {
9595
const float32arr = this.mLineBuffer;
9696
let index = 0;
9797
for (let j = 0; j < dataSet.getEntryCount(); j++) {
98-
9998
const e = dataSet.getEntryForIndex(j);
10099
const yProperty = dataSet.yProperty;
101100

@@ -134,10 +133,9 @@ export class RadarChartRenderer extends LineRadarRenderer {
134133
}
135134
}
136135

137-
138136
// draw the line (only if filled is disabled or alpha is below 255)
139137
const lineWidth = dataSet.getLineWidth();
140-
if ((!dataSet.isDrawFilledEnabled() || dataSet.getFillAlpha() < 255)&& lineWidth> 0) {
138+
if ((!dataSet.isDrawFilledEnabled() || dataSet.getFillAlpha() < 255) && lineWidth > 0) {
141139
this.mRenderPaint.setColor(dataSet.getColor());
142140
this.mRenderPaint.setStrokeWidth(lineWidth);
143141
this.mRenderPaint.setStyle(Style.STROKE);
@@ -150,7 +148,7 @@ export class RadarChartRenderer extends LineRadarRenderer {
150148
public drawValues(c: Canvas) {
151149
const data = this.mChart.getData();
152150
const dataSets = data.getDataSets();
153-
if (dataSets.some(d=>d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
151+
if (dataSets.some((d) => d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
154152
return;
155153
}
156154
const phaseX = this.mAnimator.getPhaseX();
@@ -196,15 +194,15 @@ export class RadarChartRenderer extends LineRadarRenderer {
196194
this.drawValue(c, formatter.getRadarLabel(entry[yProperty], entry), pOut.x, pOut.y - yoffset, dataSet.getValueTextColor(j));
197195
}
198196

199-
if (drawIcons && entry.icon != null ) {
197+
if (drawIcons && entry.icon != null) {
200198
const icon = entry.icon;
201199

202200
Utils.getPosition(center, entry[yProperty] * factor * phaseY + iconsOffset.y, sliceangle * j * phaseX + this.mChart.getRotationAngle(), pIcon);
203201

204202
//noinspection SuspiciousNameCombination
205203
pIcon.y += iconsOffset.x;
206204

207-
Utils.drawImage(c, icon, pIcon.x, pIcon.y);
205+
Utils.drawIcon(c, this.mChart, icon, pIcon.x, pIcon.y);
208206
}
209207
}
210208

‎src/charting/renderer/ScatterChartRenderer.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -65,18 +65,16 @@ export class ScatterChartRenderer extends LineScatterCandleRadarRenderer {
6565
this.mRenderPaint.setColor(dataSet.getColor(i / 2));
6666
if (customRender && customRender.drawShape) {
6767
customRender.drawShape(c, e, dataSet, this.mViewPortHandler, this.mPixelBuffer[0], this.mPixelBuffer[1], this.mRenderPaint);
68-
6968
} else {
7069
renderer.renderShape(c, dataSet, this.mViewPortHandler, this.mPixelBuffer[0], this.mPixelBuffer[1], this.mRenderPaint);
71-
7270
}
7371
}
7472
}
7573

7674
public drawValues(c: Canvas) {
7775
const data = this.mChart.getScatterData();
7876
const dataSets = data.getDataSets();
79-
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some(d=>d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
77+
if (!this.isDrawingValuesAllowed(this.mChart) || dataSets.some((d) => d.isDrawValuesEnabled() || d.isDrawIconsEnabled()) === false) {
8078
return;
8179
}
8280
// if values are drawn
@@ -115,8 +113,8 @@ export class ScatterChartRenderer extends LineScatterCandleRadarRenderer {
115113
this.drawValue(c, formatter.getPointLabel(entry[yKey], entry), points[j], points[j + 1] - shapeSize, dataSet.getValueTextColor(j / 2 + this.mXBounds.min));
116114
}
117115

118-
if (drawIcons && entry.icon ) {
119-
Utils.drawImage(c, entry.icon, points[j] + iconsOffset.x, points[j + 1] + iconsOffset.y);
116+
if (drawIcons && entry.icon) {
117+
Utils.drawIcon(c, this.mChart, entry.icon, points[j] + iconsOffset.x, points[j + 1] + iconsOffset.y);
120118
}
121119
}
122120
}

‎src/charting/utils/Utils.ts

+17-6
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { Screen } from '@nativescript/core/platform';
33
import { Align, Canvas, FontMetrics, Paint, Rect, StaticLayout } from '@nativescript-community/ui-canvas';
44
import { DefaultValueFormatter } from '../formatter/DefaultValueFormatter';
55
import { ValueFormatter } from '../formatter/ValueFormatter';
6+
import Shape from '@nativescript-community/ui-canvas/shapes/shape';
7+
import { Chart } from '../charts/Chart';
68

79
export type FloatArray = Float32Array | Float64Array;
810
export let FloatConstructor: typeof Float32Array | typeof Float64Array;
@@ -12,7 +14,6 @@ if (global.isAndroid) {
1214
FloatConstructor = interop.sizeof(interop.types.id) === 4 ? Float32Array : Float64Array;
1315
}
1416

15-
1617
let SDK_INT = -1;
1718
function getSDK() {
1819
if (SDK_INT === -1) {
@@ -462,10 +463,21 @@ export namespace Utils {
462463
// canvas.restore();
463464
// }
464465

465-
export function drawImage(canvas: Canvas, icon: ImageSource, x, y) {
466-
const drawOffsetX = x - icon.width / 2;
467-
const drawOffsetY = y - icon.height / 2;
468-
canvas.drawBitmap(global.isAndroid ? icon.android : icon, drawOffsetX, drawOffsetY, null);
466+
export function drawIcon(canvas: Canvas, chart: Chart<any, any, any>, icon: ImageSource | Shape, x, y) {
467+
if (icon instanceof Shape) {
468+
const availableWidth = canvas.getWidth();
469+
const availableHeight = canvas.getHeight();
470+
const width = icon.getWidth(availableWidth, availableHeight);
471+
const height = icon.getHeight(availableWidth, availableHeight);
472+
canvas.save();
473+
canvas.translate(x - width / 2, y - height / 2);
474+
icon.drawMyShapeOnCanvas(canvas, chart, availableWidth, availableHeight);
475+
canvas.restore();
476+
} else {
477+
const drawOffsetX = x - icon.width / 2;
478+
const drawOffsetY = y - icon.height / 2;
479+
canvas.drawBitmap(global.isAndroid ? icon.android : icon, drawOffsetX, drawOffsetY, null);
480+
}
469481
}
470482

471483
export function drawXAxisValue(c: Canvas, text, x, y, paint: Paint, anchor, angleDegrees) {
@@ -624,7 +636,6 @@ export namespace Utils {
624636
};
625637
}
626638

627-
628639
export function logMethod(target, key, descriptor) {
629640
// save a reference to the original method this way we keep the values currently in the
630641
// descriptor and don't overwrite what another decorator might have done to the descriptor.

0 commit comments

Comments
 (0)
Please sign in to comment.