Skip to content

Commit 95a33a5

Browse files
farfromrefugfarfromrefug
committed
fix: support latest Canvas plugin. working on multiple colors per dataset
1 parent 04e6128 commit 95a33a5

File tree

11 files changed

+62
-41
lines changed

11 files changed

+62
-41
lines changed

‎package.json

+11-11
Original file line numberDiff line numberDiff line change
@@ -33,26 +33,26 @@
3333
"readmeFilename": "README.md",
3434
"devDependencies": {
3535
"@angular/core": "^8.2.14",
36-
"@commitlint/cli": "^8.3.4",
36+
"@commitlint/cli": "^8.3.5",
3737
"@commitlint/config-conventional": "^8.3.4",
38-
"@nativescript/core": "6.3.2",
38+
"@nativescript/core": "6.5.5",
3939
"@tweenjs/tween.js": "18.5.0",
4040
"@types/node": "^13.1.6",
41-
"@types/tween.js": "^17.2.0",
42-
"cpy-cli": "^3.0.0",
43-
"husky": "^4.0.7",
44-
"lerna": "^3.20.2",
45-
"nativescript-canvas": "2.1.24",
46-
"nativescript-gesturehandler": "^0.1.6",
47-
"nativescript-tween": "0.0.5",
41+
"@types/tween.js": "^18.5.1",
42+
"cpy-cli": "^3.1.1",
43+
"husky": "^4.2.5",
44+
"lerna": "^3.22.1",
45+
"nativescript-canvas": "3.0.8",
46+
"nativescript-gesturehandler": "^0.1.16",
47+
"nativescript-tween": "0.0.10",
4848
"npm-watch": "^0.6.0",
4949
"number-format.js": "^2.0.9",
5050
"prompt": "^1.0.0",
5151
"recursive-copy": "^2.0.10",
5252
"rimraf": "^3.0.2",
5353
"through2": "^3.0.1",
54-
"tns-platform-declarations": "^6.3.2",
55-
"tslint": "^5.20.1",
54+
"tns-platform-declarations": "^6.5.5",
55+
"tslint": "^6.1.2",
5656
"tslint-config-prettier": "^1.18.0",
5757
"tslint-config-standard": "^9.0.0",
5858
"typescript": "~3.7.4"

‎plugin/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626
"homepage": "https://github.com/Akylas/nativescript-chart",
2727
"readmeFilename": "README.md",
2828
"dependencies": {
29-
"nativescript-canvas": "^2.1.27",
30-
"nativescript-gesturehandler": "^0.1.8",
31-
"nativescript-tween": "^0.0.6",
29+
"nativescript-canvas": "^3.0.8",
30+
"nativescript-gesturehandler": "^0.1.16",
31+
"nativescript-tween": "^0.0.10",
3232
"number-format.js": "^2.0.9"
3333
}
3434
}

‎src/charting/charts/Chart.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1547,7 +1547,7 @@ export abstract class Chart<U extends Entry, D extends IDataSet<U>, T extends Ch
15471547

15481548
onSetWidthHeight(w: number, h: number) {
15491549
const needsDataSetChanged = !this.mViewPortHandler.hasChartDimens();
1550-
if (this.mLogEnabled) console.log(LOG_TAG, 'OnSizeChanged', w, h, needsDataSetChanged, new Error().stack);
1550+
if (this.mLogEnabled) console.log(LOG_TAG, 'OnSizeChanged', w, h, needsDataSetChanged);
15511551

15521552
if (w > 0 && h > 0 && h < 10000 && h < 10000) {
15531553
if (this.mLogEnabled) console.log(LOG_TAG, 'Setting chart dimens, width: ' + w + ', height: ' + h);

‎src/charting/components/AxisBase.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { LimitLine } from './LimitLine';
33
import { DashPathEffect, parseDashEffect } from 'nativescript-canvas';
44
import { ValueFormatter } from '../formatter/ValueFormatter';
55
import { DefaultAxisValueFormatter } from '../formatter/DefaultAxisValueFormatter';
6+
import { IAxisValueFormatter } from 'nativescript-chart/formatter/IAxisValueFormatter';
67

78
/**
89
* Base-class of all axes (previously called labels).
@@ -13,7 +14,7 @@ export abstract class AxisBase extends ComponentBase {
1314
/**
1415
* custom formatter that is used instead of the auto-formatter if set
1516
*/
16-
protected mAxisValueFormatter: ValueFormatter;
17+
protected mAxisValueFormatter: IAxisValueFormatter;
1718

1819
private mGridColor = 'gray';
1920

@@ -492,7 +493,7 @@ export abstract class AxisBase extends ComponentBase {
492493
*
493494
* @param f
494495
*/
495-
public setValueFormatter(f: ValueFormatter) {
496+
public setValueFormatter(f: IAxisValueFormatter) {
496497
if (f == null) this.mAxisValueFormatter = new DefaultAxisValueFormatter(this.mDecimals);
497498
else this.mAxisValueFormatter = f;
498499
}

‎src/charting/components/LegendEntry.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export class LegendEntry {
1212
* @param formLineDashEffect Set to nil to use the legend's default.
1313
* @param formColor The color for drawing the form.
1414
*/
15-
constructor(label: string, form: LegendForm, formSize?, formLineWidth?, formLineDashEffect?: DashPathEffect, formColor?) {
15+
constructor(label: string, form: LegendForm, formSize?, formLineWidth?, formLineDashEffect?: DashPathEffect, formColor?:string | number | Color) {
1616
this.label = label;
1717
this.form = form;
1818
this.formSize = formSize;
@@ -60,5 +60,5 @@ export class LegendEntry {
6060
/**
6161
* The color for drawing the form
6262
*/
63-
public formColor: Color = null;
63+
public formColor: string | number | Color = null;
6464
}

‎src/charting/data/BaseDataSet.ts

+8-9
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export abstract class BaseDataSet<T extends Entry> implements IDataSet<T> {
4545
/**
4646
* List representing all colors that are used for this DataSet
4747
*/
48-
protected mColors: Array<string | Color> = null;
48+
protected mColors: Array<{color:string | Color, [k:string]:number | string | Color}> = null;
4949

5050
protected mGradientColor = null;
5151

@@ -132,7 +132,7 @@ export abstract class BaseDataSet<T extends Entry> implements IDataSet<T> {
132132
}
133133

134134
// default color
135-
this.mColors.push('#8CEAFF');
135+
this.mColors.push({color:'#8CEAFF'});
136136
this.mValueColors.push('black');
137137
this.mLabel = label;
138138
}
@@ -157,7 +157,7 @@ export abstract class BaseDataSet<T extends Entry> implements IDataSet<T> {
157157
}
158158

159159
public getColor(index = 0) {
160-
return this.mColors[index % this.mColors.length];
160+
return this.mColors[index % this.mColors.length].color;
161161
}
162162

163163
public getGradientColors() {
@@ -189,9 +189,9 @@ export abstract class BaseDataSet<T extends Entry> implements IDataSet<T> {
189189
*
190190
* @param color
191191
*/
192-
public addColor(color: string | Color) {
192+
public addColor(value:{color:string | Color, [k:string]:number | string | Color}) {
193193
if (this.mColors == null) this.mColors = [];
194-
this.mColors.push(color);
194+
this.mColors.push(value);
195195
}
196196

197197
/**
@@ -221,12 +221,11 @@ export abstract class BaseDataSet<T extends Entry> implements IDataSet<T> {
221221
*/
222222
public setColor(color: string | Color, alpha?: number) {
223223
this.resetColors();
224-
if (alpha === undefined) {
225-
this.mColors.push(color);
226-
} else {
224+
if (alpha !== undefined) {
227225
const actColor = color instanceof Color ? color: new Color(color)
228-
this.mColors.push(new Color(actColor.r, actColor.g, actColor.b, alpha));
226+
color = new Color(actColor.r, actColor.g, actColor.b, alpha);
229227
}
228+
this.mColors.push({color});
230229
}
231230

232231
/**

‎src/charting/formatter/IAxisValueFormatter.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@ export interface IAxisValueFormatter {
1919
*
2020
* Extend {@link ValueFormatter} and use {@link ValueFormatter#getAxisLabel(float, AxisBase)}
2121
*/
22-
getFormattedValue(value, axis: AxisBase): string;
22+
getAxisLabel(value, axis: AxisBase): string;
2323
}

‎src/charting/interfaces/datasets/IDataSet.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ export interface IDataSet<T extends Entry> {
255255
*
256256
* @return
257257
*/
258-
getColors(): Array<string | Color>;
258+
getColors(): Array<{color:string | Color, [k:string]:number | string | Color}>;
259259

260260
/**
261261
* Returns the first color (index 0) of the colors-array this DataSet

‎src/charting/renderer/LegendRenderer.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export class LegendRenderer extends Renderer {
8686

8787
for (let j = 0; j < clrs.length && j < bds.getStackSize(); j++) {
8888
this.computedEntries.push(
89-
new LegendEntry(sLabels[j % sLabels.length], dataSet.getForm(), dataSet.getFormSize(), dataSet.getFormLineWidth(), dataSet.getFormLineDashEffect(), clrs[j])
89+
new LegendEntry(sLabels[j % sLabels.length], dataSet.getForm(), dataSet.getFormSize(), dataSet.getFormLineWidth(), dataSet.getFormLineDashEffect(), clrs[j].color)
9090
);
9191
}
9292

@@ -99,7 +99,7 @@ export class LegendRenderer extends Renderer {
9999

100100
for (let j = 0; j < clrs.length && j < entryCount; j++) {
101101
this.computedEntries.push(
102-
new LegendEntry(pds.getEntryForIndex(j).label, dataSet.getForm(), dataSet.getFormSize(), dataSet.getFormLineWidth(), dataSet.getFormLineDashEffect(), clrs[j])
102+
new LegendEntry(pds.getEntryForIndex(j).label, dataSet.getForm(), dataSet.getFormSize(), dataSet.getFormLineWidth(), dataSet.getFormLineDashEffect(), clrs[j].color)
103103
);
104104
}
105105

@@ -130,7 +130,7 @@ export class LegendRenderer extends Renderer {
130130
label = data.getDataSetByIndex(i).getLabel();
131131
}
132132

133-
this.computedEntries.push(new LegendEntry(label, dataSet.getForm(), dataSet.getFormSize(), dataSet.getFormLineWidth(), dataSet.getFormLineDashEffect(), clrs[j]));
133+
this.computedEntries.push(new LegendEntry(label, dataSet.getForm(), dataSet.getFormSize(), dataSet.getFormLineWidth(), dataSet.getFormLineDashEffect(), clrs[j].color));
134134
}
135135
}
136136
}
@@ -369,7 +369,6 @@ export class LegendRenderer extends Renderer {
369369

370370
let form = entry.form;
371371
if (form == LegendForm.DEFAULT) form = legend.getForm();
372-
373372
this.mLegendFormPaint.setColor(entry.formColor);
374373

375374
const formSize = isNaN(entry.formSize) ? legend.getFormSize() : entry.formSize;

‎src/charting/renderer/LineChartRenderer.ts

+27-5
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,7 @@ export class LineChartRenderer extends LineRadarRenderer {
370370
const points = Utils.pointsFromBuffer(float32arr);
371371
// console.log('generateLinearPath', index, points.length);
372372
// if (isAndroid) {
373-
outputPath.setLines(points, index);
373+
outputPath.setLines(points, 0, index);
374374
// }
375375
return [points, index];
376376
} else {
@@ -439,6 +439,9 @@ export class LineChartRenderer extends LineRadarRenderer {
439439
this.mXBounds.set(this.mChart, dataSet, this.mAnimator);
440440

441441
const res = this.generateLinearPath(dataSet, this.linePath);
442+
443+
const colors = dataSet.getColors();
444+
const nbColors = colors.length;
442445
// if filled is enabled, close the path
443446
if (dataSet.isDrawFilledEnabled()) {
444447
this.fillPath.reset();
@@ -450,8 +453,23 @@ export class LineChartRenderer extends LineRadarRenderer {
450453

451454
// if (isAndroid || dataSet.isDashedLineEnabled()) {
452455
if (dataSet.getLineWidth() > 0) {
453-
trans.pathValueToPixel(this.linePath);
454-
this.drawPath(c, this.linePath, this.mRenderPaint);
456+
if (nbColors === 1) {
457+
trans.pathValueToPixel(this.linePath);
458+
this.drawPath(c, this.linePath, this.mRenderPaint);
459+
} else {
460+
const xKey = dataSet.xProperty;
461+
const points = res[0];
462+
let lastIndex = 0;
463+
trans.pointValuesToPixel(points);
464+
for (let index = 0; index < nbColors; index++) {
465+
const color = colors[index];
466+
let colorIndex = color[xKey] as number;
467+
this.mRenderPaint.setColor(color.color);
468+
this.linePath.setLines(points, lastIndex*2, (colorIndex - lastIndex + 1)*2);
469+
this.drawPath(c, this.linePath, this.mRenderPaint);
470+
lastIndex = colorIndex;
471+
}
472+
}
455473
}
456474
// } else {
457475
// const points = res[0];
@@ -463,8 +481,12 @@ export class LineChartRenderer extends LineRadarRenderer {
463481
}
464482

465483
@profile
466-
drawLines(canvas: Canvas, points: number[], offest, length, paint: Paint, matrix: Matrix) {
467-
canvas.drawLines(points, offest, length, paint, matrix);
484+
drawLines(canvas: Canvas, points: number[], offest, length, paint: Paint, matrix?: Matrix) {
485+
if (matrix) {
486+
canvas.drawLines(points, offest, length, paint, matrix);
487+
} else {
488+
canvas.drawLines(points, offest, length, paint);
489+
}
468490
}
469491

470492
protected drawFill(c: Canvas, dataSet: ILineDataSet, spline: Path, trans: Transformer, bounds: XBounds) {

‎src/charting/utils/ColorTemplate.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ export class ColorTemplate {
1111
/**
1212
* an "invalid" color that indicates that no color is set
1313
*/
14-
public static COLOR_NONE = new Color(0x00112233);
14+
public static COLOR_NONE = null as any;
1515

1616
/**
1717
* this "color" is used for the Legend creation and indicates that the next
1818
* form should be skipped
1919
*/
20-
public static COLOR_SKIP = new Color(0x00112234);
20+
public static COLOR_SKIP = 0x00112234 as any;
2121

2222
/**
2323
* THE COLOR THEMES ARE PREDEFINED (predefined color integer arrays), FEEL

0 commit comments

Comments
 (0)