Issue with Extention control

[Girish_KR]

I came across a scenario where I have to implement a donut chart and a pie chart on the same screen as displayed in screenshot. For Donut chart I followed the tutorial and successfully implemented it. I am facing challenge when trying to put the Donut chart in a Control.Type.SectionedTable, leaving donut chart all other controls are visible (Chart_Implementation_Demo.txt).

Note: When I added Donut chart in Control.Type.Extension it is working fine.

[mingkho · Accepted solution]

Hello @Girish_KR , can you describe in details what are the challenges or issues you are facing here? I am afraid I can't quite understand what issues you are seeing here.

From the screenshot I see the left side of your donut chart is cut off, is that the issue?

[Girish_KR · Accepted solution]

Hi mingkho,
The issue I am facing is when I tried placing Donut Chart (extension control IndentConfirmationControl.txt ) inside Control.Type.SectionedTable (as shown in Chart_Implementation_Demo.txt) the donut chart is not getting visible as a whole, while other controls are visible. 

The Donut chart is getting visible only when I am using it with Control.Type.Extension.

Please guide me how to use the Donut Chart(IndentConfirmationControl.txt ) extension control with other controls added in the same page.

[mingkho · Accepted solution]

Thanks for the explanation. Can you give me a working sample of data that is returned by getPieData function? I'd like to try it out locally

[mingkho · Accepted solution]

Hi @Girish_KR , I managed to get the working sample for the data, so don't worry about it. I noticed a few things:

1. Padding: To fix the cut off on the left side, you need to add some left padding to your StackLayout e.g. this._StackLayout.paddingLeft = 16 (or 24 if it's Tablet)
2. Height: You need to set Height property to your Control.Type.FormCell.Extension in the Chart_Implementation_Demo.txt e.g. "Height": 250
3. viewIsNative: You need to return false in your viewIsNative() function because you are using NativeScript layout views (In your attached sample it's returning true). You should only return true if you are creating and returning native iOS or Android views. Although, you must have returned false in your screenshot because if you are returning true, it shouldn't rendering anything at all.

Here's before I applied anything (except return false for viewIsNative):

Here's after I applied paddingLeft of the StackLayout and also set the "Height" property in the metadata:

[mingkho · Accepted solution]

Here's the sample codes.

Take note of the "Height" Property:

{
  "_Type": "Control.Type.FormCell.Extension",
  "_Name": "FormCellExtension1",
  "Module": "MDKExtension",
  "Control": "IndentConfirmationControl",
  "Class": "IndentConfirmationClass",
  "Height": 250,
  "IsVisible": true,
  "Separator": true,
  "ExtensionProperties":{
    "MinValue": 0,
    "MaxValue": 100,
    "Title": "Counter"
  }
},

 Take note of the paddingLeft and also viewIsNative:

import { IControl } from 'mdk-core/controls/IControl';
import { Label } from '@nativescript/core/ui/label';
import { Color } from '@nativescript/core/color';
import { BaseObservable } from 'mdk-core/observables/BaseObservable';
import { RadPieChart, DonutSeries, ChartSeriesSelectionMode,RadLegendView,Palette,PaletteEntry } from 'nativescript-ui-chart';
import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout';
import { ObservableArray, Device } from "@nativescript/core";
import { Observable } from '@nativescript/core';
import { getPieData } from './DataService';

function getPadding() {
    // Return left & right padding in dp
    // For tablet we want 24dp, for other type we use 16dp
    return Device.deviceType === 'Tablet' ? 24 : 16;
}

export class IndentConfirmationClass extends IControl {
	private _observable: BaseObservable;
	private _targetLabel: any;
	private _StackLayout: any;
	private oRadPieChart: any;
	private oDonutSeries: any;
	private Selectionmode: any;
	private seriesArray: any;
	private _model: any;
	private service: any;
	private radLegendView:any;
	private palette:any;
	private paletteEntries:any;


	public initialize(props: any): any {
		super.initialize(props);

		// if (!this._model) {
		// 	this._model = new oModel();
		// };
		this._StackLayout = new StackLayout();
		this._StackLayout.backgroundColor = "#f2efe8";
		this._StackLayout.height = 250
                this._StackLayout.paddingLeft = getPadding();

		// Create Label
		this._targetLabel = new Label();
		this._targetLabel.text = "No Sales Data";
		this._StackLayout.addChild(this._targetLabel);

		// Create Pie Chart using External plugin
		this.oRadPieChart = new RadPieChart();
		this.oRadPieChart.allowAnimations = true;
		this.oRadPieChart.row = 0;
		this.oDonutSeries = new DonutSeries();
		this.oDonutSeries.seriesName = "myDonutSeries";
		this.Selectionmode = <ChartSeriesSelectionMode>'DataPoint';
		this.oDonutSeries.selectionMode = this.Selectionmode;
		this.oDonutSeries.expandRadius = 0.4;
		this.oDonutSeries.outerRadiusFactor = 0.7;
		this.oDonutSeries.innerRadiusFactor = 0.4;
		this.oDonutSeries.valueProperty = "Count";
		this.oDonutSeries.legendLabel = "Status";
		this.oDonutSeries.showLabels = true;
		this.seriesArray = new ObservableArray();
		this.seriesArray.push(this.oDonutSeries);

		this.radLegendView = new RadLegendView();
		this.radLegendView.position = "Floating";
		this.radLegendView.title = "Status";
		this.radLegendView.offsetOrigin = "TopLeft";
		this.radLegendView.enableSelection = true;
		this.radLegendView.height = 150;
		this.radLegendView.width = 200;

		this.palette = new Palette();
		this.palette.seriesName = "myDonutSeries";
		this.paletteEntries = new ObservableArray();
		var paletteEntry = new PaletteEntry();

		paletteEntry.fillColor = new Color('#FF0000');
		paletteEntry.strokeColor = new Color('#FF0000');
		paletteEntry.strokeWidth = 5;
		this.paletteEntries.push(paletteEntry);

		paletteEntry = new PaletteEntry();
		paletteEntry.fillColor = new Color('#006600');
		paletteEntry.strokeColor = new Color('#006600');
		paletteEntry.strokeWidth = 5;
		this.paletteEntries.push(paletteEntry);	

		this.palette.entries = this.paletteEntries;

		this.oRadPieChart.palettes = this.palette;
		this.oRadPieChart.legend = this.radLegendView;
		this.oRadPieChart.allowAnimations = true;
		this.oRadPieChart.series = this.seriesArray;
		this._StackLayout.addChild(this.oRadPieChart);

		// Extension Properties
		let extProps = this.definition().data.ExtensionProperties;
		// let tempData = new ObservableArray([
		// 	{ Brand: 'Audi', Amount: 10 },
		// 	{ Brand: 'Mercedes', Amount: 76 },
		// 	{ Brand: 'Fiat', Amount: 60 },
		// 	{ Brand: 'BMW', Amount: 24 },
		// 	{ Brand: 'Crysler', Amount: 40 }
		// ]);
		// try{
		// 	this.oDonutSeries.items=tempData;
		// }catch(ex){
		// 	console.log(ex);
		// }

		if (extProps) {
			this.valueResolver().resolveValue(extProps.Title, this.context, true).then(function (Title) {
				this._targetLabel.text = "Indent Confirmation";
				this._targetLabel.textAlignment = "center";
				this._targetLabel.fontWeight = "bold";
				// SalesData.forEach(result => {
				// 	this._model.setSalesOrderHeader(result.SalesOrderId, result.Amount);
				// });
				// this.oDonutSeries.items = this._model.getSalesOrderHeader();

				this.oDonutSeries.items = getPieData();
			}.bind(this));
		}
		//return this._StackLayout;
	}

	public view() {
		return this._StackLayout; // Return View
	}

	public viewIsNative() {
		return false;
	}

	// Abstract Method
	public observable() {
		if (!this._observable) {
			this._observable = new BaseObservable(this, this.definition(), this.page());
		}
		return this._observable;

	}

	// Abstract Method
	public setValue(value: any, notify: boolean): Promise<any> {
		return Promise.resolve();
	}

	public setContainer(container: IControl) {
		// do nothing
	}
}

[Girish_KR · Accepted solution]

Thank you so much. It is working perfectly.