import {
Version,
Guid,
Environment,
EnvironmentType
} from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneDropdown
} from '@microsoft/sp-webpart-base';
import {
SPHttpClient,
SPHttpClientResponse
} from '@microsoft/sp-http';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './NampaPieChartWebPart.module.scss';
import * as strings from 'NampaPieChartWebPartStrings';
import * as google from 'google';
export interface INampaPieChartWebPartProps {
list: string;
field: string;
caption: string;
width: string;
height: string;
piehole: string;
}
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Id: string;
}
export default class NampaPieChartWebPart extends BaseClientSideWebPart<INampaPieChartWebPartProps> {
private guid = Guid.newGuid().toString();
private listLists = [];
private listFields = [];
protected onInit(): Promise<void> {
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(this._drawChart.bind(this));
return super.onInit();
}
private _getListData(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.nampaPieChart }" id="${ this.guid }" style="background-color: inherit;">
</div>`;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: 'A simple pie chart that will summarize a single column of a list.'
},
groups: [
{
groupName: 'Source Data',
groupFields: [
PropertyPaneDropdown('list', {
label: 'List',
options: this.listLists,
disabled: false
}),
PropertyPaneDropdown('field', {
label: 'Field',
options: this.listFields,
disabled: true
})
]
},
{
groupName: 'Appearance',
groupFields: [
PropertyPaneTextField('caption', {
label: 'Caption'
}),
PropertyPaneTextField('width', {
label: 'Width'
}),
PropertyPaneTextField('height', {
label: 'Height'
}),
PropertyPaneTextField('piehole', {
label: 'Piehole'
})
]
}
]
}
]
};
}
private _drawChart() {
const data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
const options = {
title: this.properties.caption,
pieHole: this.properties.piehole,
width: this.properties.width,
height: this.properties.height
};
const chart = new google.visualization.PieChart(document.getElementById(this.guid));
chart.draw(data, options);
}
}
