/
Custom Components

Custom Components

Owned by Radu Nicoara (Unlicensed)
Feb 13, 2018

Custom components may be used with JSON configurations via the "custom" component type. Here is an example JSON configuration:

{
	"columns": [
		{
			"customComponent1": {
				"componentType": "custom",
				"componentOptions": {
					"placeholderId": "salesRepChart"
				}
			}
		}
	]
}

 

TypeScript:

import { Component, OnInit, Input } from "@angular/core";
import { SmartDataSource, DataSourceRegistry, SmartCustomComponent } from "@consultingwerk/smartcomponent-library";

@SmartCustomComponent('salesRepChart')
@Component({
    selector: 'chart-template',
    template: `
        <kendo-chart [categoryAxis]="{ categories: categories }">
        <kendo-chart-title [text]="title"></kendo-chart-title>
        <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
        <kendo-chart-tooltip format="{0}US$"></kendo-chart-tooltip>
        <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let item of series"
                type="line" style="smooth" [data]="item.data" [name]="item.name">
            </kendo-chart-series-item>
        </kendo-chart-series>
        </kendo-chart>
    `

})
export class ChartTemplateComponent implements OnInit {


    series: any[] = [];
    categories: string[] = ['Jan', "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    @Input()
    title: string;
    
    @Input()
    smartDataSource: string;

    constructor(private dsReg: DataSourceRegistry) {

    }

    ngOnInit() {
        this.dsReg.dataSourceAdded.first(ev => ev.dataSourceName === this.smartDataSource)
            .subscribe(ev => {
                let dataSource = ev.dataSource;
                dataSource.fetch()
                    .then(result => {
                        this.series = result.data.map(salesrep => {
                            const serie = {
                                name: salesrep.RepName,
                                data: Object.keys(salesrep).filter(key => key.startsWith('MonthQuota')).map(month => salesrep[month])
                            };

                            return serie;
                        });
                    });
            });
    }

}

 

To register any component with the SmartComponent Library and use render it in placeholders defined via JSON, one only needs to add the @SmartCustomComponent(placeholderId) annotation, and include the component in the entryComponents of an imported module.

Related content