honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1174 from muges01/upgrade-react-modern-charts 

Upgrade react modern charts
This commit is contained in:
Hugo Bernier 2020-04-06 11:06:58 -04:00 committed by GitHub
parent 62133adfa6 001825aa2a
commit e4e1a044b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 10281 additions and 10235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
samples/react-modern-charts/.yo-rc.json
View File

@ -1,8 +1,13 @@
{
"@microsoft/generator-sharepoint": {
"libraryName": "modern-charts",
"framework": "react",
"version": "1.0.0",
"framework": "",
"version": "1.10.0",
"componentType": "webpart",
"isDomainIsolated": false,
"isCreatingSolution": true,
"environment": "spo",
"packageManager": "npm",
"libraryId": "f8a78a9a-a93e-4843-89e5-7b871d9b9fa2"
}
}

3
samples/react-modern-charts/README.md
View File

@ -49,7 +49,7 @@ Built with SharePoint Framework GA, Office Graph, React and Chart.JS
## Used SharePoint Framework Version
![version](https://img.shields.io/badge/version-1.4.1-green.svg)
![version](https://img.shields.io/badge/version-1.10.0-green.svg)
## Applies to
@ -66,6 +66,7 @@ react-modern-charts|Jeremy Coleman (MCP, PC Professional, Inc.)
Version|Date|Comments
-------|----|--------
1.0.0.2|February 09, 2020| Upgrade to SPFx 1.10.0
1.0.0.1|April 25, 2018|Update to SPFx 1.4.1
1.0.0.0|February 11, 2017|Initial release

2
samples/react-modern-charts/config/config.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"modern-charts-bundle": {

2
samples/react-modern-charts/config/copy-assets.json
View File

@ -1,4 +1,4 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

2
samples/react-modern-charts/config/deploy-azure-storage.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "modern-charts",

6
samples/react-modern-charts/config/package-solution.json
View File

@ -1,9 +1,11 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "modern-charts-client-side-solution",
"id": "f8a78a9a-a93e-4843-89e5-7b871d9b9fa2",
"version": "1.0.0.1"
"version": "1.0.0.2",
"isDomainIsolated": false,
"includeClientSideAssets": true
},
"paths": {
"zippedPackage": "solution/modern-charts.sppkg"

2
samples/react-modern-charts/config/serve.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"initialPage": "https://localhost:5432/workbench",
"https": true,

2
samples/react-modern-charts/config/write-manifests.json
View File

@ -1,4 +1,4 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

19767
samples/react-modern-charts/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

42
samples/react-modern-charts/package.json
View File

@ -2,33 +2,41 @@
"name": "modern-charts",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-core-library": "~1.4.1",
"@microsoft/sp-webpart-base": "~1.4.1",
"@microsoft/sp-office-ui-fabric-core": "~1.4.1",
"@microsoft/sp-core-library": "1.10.0",
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "1.10.0",
"@types/chart.js": "0.0.14",
"@types/react": "0.14.46",
"@types/react-addons-shallow-compare": "0.14.17",
"@types/react-addons-test-utils": "0.14.15",
"@types/react-addons-update": "0.14.14",
"@types/react-dom": "0.14.18",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"chart.js": "^2.5.0",
"@types/es6-promise": "0.0.33",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"chart.js": "^2.9.3",
"color-scheme": "0.0.5",
"react": "15.4.2",
"office-ui-fabric-react": "6.189.2",
"react": "16.8.5",
"react-chartjs-2": "^2.0.5",
"react-dom": "15.4.2"
"react-dom": "16.8.5"
},
"resolutions": {
"@types/react": "16.8.8"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.4.1",
"@microsoft/sp-module-interfaces": "~1.4.1",
"@microsoft/sp-webpart-workbench": "~1.4.1",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.10.0",
"@microsoft/sp-module-interfaces": "1.10.0",
"@microsoft/sp-tslint-rules": "1.10.0",
"@microsoft/sp-webpart-workbench": "1.10.0",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "5.2.2",
"gulp": "~3.9.1",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0"
"tslint-microsoft-contrib": "5.0.0"
},
"scripts": {
"build": "gulp bundle",

1
samples/react-modern-charts/src/index.ts Normal file
View File

@ -0,0 +1 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

44
samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.manifest.json
View File

@ -1,24 +1,34 @@
{
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "50dbeca0-48ed-4459-800f-b75b13159b21",
"alias": "ModernChartsWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"version": "*",
"manifestVersion": 2,
"preconfiguredEntries": [{
"groupId": "50dbeca0-48ed-4459-800f-b75b13159b21",
"group": { "default": "Modern Web Parts" },
"title": { "default": "ModernCharts" },
"description": { "default": "Modern Charts Sample" },
"officeFabricIconFontName": "Chart",
"properties": {
"description": "ModernCharts",
"numCharts": 1,
"state": false,
"maxResults": 25,
"listOptions": []
"safeWithCustomScriptDisabled": false,
"supportedHosts": [
"SharePointWebPart"
],
"preconfiguredEntries": [
{
"groupId": "50dbeca0-48ed-4459-800f-b75b13159b21",
"group": {
"default": "Modern Web Parts"
},
"title": {
"default": "ModernCharts"
},
"description": {
"default": "Modern Charts Sample"
},
"officeFabricIconFontName": "Chart",
"properties": {
"description": "ModernCharts",
"numCharts": 1,
"state": false,
"maxResults": 25,
"listOptions": []
}
}
}]
]
}

496
samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts
View File

@ -1,16 +1,15 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart, IWebPartContext } from "@microsoft/sp-webpart-base";
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
IWebPartContext,
PropertyPaneSlider,
PropertyPaneDropdown,
PropertyPaneButton,
IPropertyPaneDropdownOption,
PropertyPaneButton
} from '@microsoft/sp-webpart-base';
PropertyPaneDropdown,
PropertyPaneSlider,
PropertyPaneTextField
} from "@microsoft/sp-property-pane";
import * as strings from 'modernChartsStrings';
import ModernCharts from './components/ModernCharts';
import { IModernChartsProps } from './IModernChartsWebPartProps';
@ -48,24 +47,24 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
private _columnOptions: IPropertyPaneDropdownOption[] = [];
private _ListColumnOptions: Array<IPropertyPaneDropdownOption> = [];
private _chartSizeOptions: IPropertyPaneDropdownOption[] = [
{key: 3, text:'Small'},
{key: 6, text:'Medium'},
{key: 9, text: 'Medium-Large'},
{key: 12, text: 'Large'}
{ key: 3, text: 'Small' },
{ key: 6, text: 'Medium' },
{ key: 9, text: 'Medium-Large' },
{ key: 12, text: 'Large' }
];
private _chartTypeOptions: IPropertyPaneDropdownOption[] = [
{key: 'bar', text:'Bar'},
{key: 'horizontalbar', text:'Horizontal Bar'},
{key: 'doughnut', text: 'Doughnut'},
{key: 'line', text: 'Line'},
{key: 'pie', text: 'Pie'},
{key: 'polar', text:'Polar'},
{key: 'radar', text:'Radar'}
{ key: 'bar', text: 'Bar' },
{ key: 'horizontalbar', text: 'Horizontal Bar' },
{ key: 'doughnut', text: 'Doughnut' },
{ key: 'line', text: 'Line' },
{ key: 'pie', text: 'Pie' },
{ key: 'polar', text: 'Polar' },
{ key: 'radar', text: 'Radar' }
];
private _chartColActions: IPropertyPaneDropdownOption[] = [
{key: 'average', text: 'Average'},
{key: 'count', text: 'Count'},
{key: 'sum', text: 'Sum'}
{ key: 'average', text: 'Average' },
{ key: 'count', text: 'Count' },
{ key: 'sum', text: 'Sum' }
];
public constructor(context: IWebPartContext) {
@ -74,16 +73,16 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
private ChartThemes: ChartOptions;
private defaultOptions: Object = {
legend: {
display: false,
layout: {
padding: 10
},
position: 'bottom',
labels: {
fontColor: 'rgba(100, 100, 100, 1.0)'
}
legend: {
display: false,
layout: {
padding: 10
},
position: 'bottom',
labels: {
fontColor: 'rgba(100, 100, 100, 1.0)'
}
}
};
public defaultChartConfig(chartDesc: string): ChartConfiguration {
@ -116,13 +115,13 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
public render(): void {
//Initialize first demo chart
if (!this.properties.state){
this.properties.state = true;
this.properties.firstLoad = true;
this.properties.numCharts = 1;
this.properties.chartConfig = [];
const firstChartConfig = this.defaultChartConfig;
this.properties.chartConfig.push(this.defaultChartConfig('Demo Chart, Edit Web Part to Customize'));
if (!this.properties.state) {
this.properties.state = true;
this.properties.firstLoad = true;
this.properties.numCharts = 1;
this.properties.chartConfig = [];
const firstChartConfig = this.defaultChartConfig;
this.properties.chartConfig.push(this.defaultChartConfig('Demo Chart, Edit Web Part to Customize'));
}
this.getChartData();
}
@ -131,57 +130,58 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
return Version.parse('1.0');
}
private getChartData(): void{
private getChartData(): void {
const _chartData: Array<MChart> = [];
var _count = 0;
this.properties.chartConfig.forEach((cfg,i) => {
if (cfg.list != null){
this.getData(cfg).then((response) => {
const chart = this.calculateData(response.value, cfg);
const _chart: MChart = {data:chart['data'],labels:chart['labels'],config:cfg,key: i};
this.properties.chartConfig.forEach((cfg, i) => {
if (cfg.list != null) {
this.getData(cfg).then((response) => {
const chart = this.calculateData(response.value, cfg);
const _chart: MChart = { data: chart['data'], labels: chart['labels'], config: cfg, key: i };
_chartData[i] = _chart;
if (++_count == this.properties.chartConfig.length) { this.getCharts(_chartData); }
});
} else {
const _chart: MChart = { data: ChartOptions._sampleData, labels: ChartOptions._sampleCols, config: cfg, key: i };
_chartData[i] = _chart;
if (++_count == this.properties.chartConfig.length){ this.getCharts(_chartData); }
});
} else {
const _chart: MChart = {data:ChartOptions._sampleData,labels:ChartOptions._sampleCols,config:cfg,key: i};
_chartData[i] = _chart;
if (++_count == this.properties.chartConfig.length){ this.getCharts(_chartData); }
if (++_count == this.properties.chartConfig.length) { this.getCharts(_chartData); }
}
});
}
private getCharts(charts: Array<MChart>): void{
const chartArea: React.ReactElement<IModernChartsProps> = React.createElement(ModernCharts,{
description: this.properties.description,
title: this.properties.description,
state: this.properties.state,
config: {},
context: this.context,
data: {},
charts: charts
private getCharts(charts: Array<MChart>): void {
const chartArea: React.ReactElement<IModernChartsProps> = React.createElement(
ModernCharts, {
description: this.properties.description,
title: this.properties.description,
state: this.properties.state,
config: {},
context: this.context,
data: {},
charts: charts
});
ReactDom.render(chartArea,this.domElement);
ReactDom.render(chartArea, this.domElement);
}
private calculateData(data: Array<Object>,config:ChartConfiguration): Object {
private calculateData(data: Array<Object>, config: ChartConfiguration): Object {
var values: Array<number> = [];
var labels: Object = this.getUnique(data, config);
var dataVal: Array<Array<any>> = this.getValues(data,labels['unique'],config);
var dataVal: Array<Array<any>> = this.getValues(data, labels['unique'], config);
switch(config.act) {
switch (config.act) {
case 'sum':
dataVal.forEach((vals,i) => {
dataVal.forEach((vals, i) => {
values[i] = 0;
vals.forEach((val) => {
values[i]+=parseFloat(val);
values[i] += parseFloat(val);
});
});
break;
case 'average':
dataVal.forEach((vals,i) => {
dataVal.forEach((vals, i) => {
values[i] = 0;
vals.forEach((val) => {
values[i]+=parseFloat(val);
values[i] += parseFloat(val);
});
if (values[i] != 0) {
values[i] = values[i] / vals.length;
@ -194,32 +194,32 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
});
break;
default:
values = [100,250,90,300];
values = [100, 250, 90, 300];
break;
}
return { data:values, labels:labels['labels'] };
return { data: values, labels: labels['labels'] };
}
private getUnique(data: Array<Object>,config:ChartConfiguration): Object {
const chLabels: Object = { unique:[], labels:[] };
data.forEach((item) => {
if (chLabels['unique'].indexOf(item[config.unique]) == -1 && item[config.unique] != null && item[config.unique] != ""){
chLabels['unique'].push(item[config.unique]);
chLabels['labels'].push(item[config.col1]);
}
});
private getUnique(data: Array<Object>, config: ChartConfiguration): Object {
const chLabels: Object = { unique: [], labels: [] };
data.forEach((item) => {
if (chLabels['unique'].indexOf(item[config.unique]) == -1 && item[config.unique] != null && item[config.unique] != "") {
chLabels['unique'].push(item[config.unique]);
chLabels['labels'].push(item[config.col1]);
}
});
return chLabels;
}
private getValues(data: Array<Object>,unique: Array<string>, config: ChartConfiguration): Array<Array<any>>{
private getValues(data: Array<Object>, unique: Array<string>, config: ChartConfiguration): Array<Array<any>> {
const values: Object = {};
const vals: Array<Array<any>> = [[]];
unique.forEach((col,i) => {
unique.forEach((col, i) => {
values[col] = [];
vals[i] = [];
data.forEach((item, _i) => {
if (item[config.unique] == col){
if (item[config.unique] == col) {
vals[i].push(item[config.col2]);
}
});
@ -232,40 +232,40 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
var pPathInd = propertyPath[12];
if (pPath === 'numCharts' && oldValue != newValue) {
if (this.properties.chartConfig.length < newValue){
if (this.properties.chartConfig.length < newValue) {
while (this.properties.chartConfig.length < newValue) {
this.properties.chartConfig.push(this.defaultChartConfig('Chart Description'));
}
} else if (this.properties.chartConfig.length > newValue) {
while (newValue < this.properties.chartConfig.length) {
this.properties.chartConfig.pop();
}
while (newValue < this.properties.chartConfig.length) {
this.properties.chartConfig.pop();
}
}
}
if (propertyPath.indexOf('[') != -1) {
pPath = propertyPath.substring(16).replace('\"]','');
pPath = propertyPath.substring(16).replace('\"]', '');
}
if (pPath === 'url' && newValue == 'other' && (oldValue != newValue)){
if (pPath === 'url' && newValue == 'other' && (oldValue != newValue)) {
this.urlTextDisabled = false;
this.properties.chartConfig[pPathInd].dataUrlDisabled = false;
this.properties.chartConfig[pPathInd].dataurl = oldValue;
}
if (pPath === 'url' && newValue != 'other' && (oldValue != newValue)){
if (pPath === 'url' && newValue != 'other' && (oldValue != newValue)) {
this.properties.chartConfig[pPathInd].dataurl = newValue;
this.properties.chartConfig[pPathInd].dataUrlDisabled = true;
}
if ( (pPath === 'url' && (newValue != oldValue)) || (pPath === 'dataurl' && (newValue != oldValue)) ){
this._updateListTitles(newValue,this.properties.chartConfig[pPathInd]);
if ((pPath === 'url' && (newValue != oldValue)) || (pPath === 'dataurl' && (newValue != oldValue))) {
this._updateListTitles(newValue, this.properties.chartConfig[pPathInd]);
this.properties.chartConfig[pPathInd]['other'] = true;
this.properties.state = true;
}
if (pPath === 'list' && (newValue != oldValue)){
if (pPath === 'list' && (newValue != oldValue)) {
var siteUrl = this.properties.chartConfig[pPathInd]['dataurl'];
this._updateListColumns(siteUrl,newValue,this.properties.chartConfig[pPathInd]);
this._updateListColumns(siteUrl, newValue, this.properties.chartConfig[pPathInd]);
this.properties.chartConfig[pPathInd].colsDisabled = false;
}
if (pPath === 'theme' && (newValue != oldValue)){
if (pPath === 'theme' && (newValue != oldValue)) {
const newTheme = ChartOptions.RandomColors();
this.properties.chartConfig[pPathInd].bgColors = newTheme['bgColors'];
this.properties.chartConfig[pPathInd].hoverColors = newTheme['hoverColors'];
@ -276,140 +276,140 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
protected onPropertyPaneConfigurationStart(): void {
if (this.properties.firstLoad || this.properties.chartConfig[0].columns.length <= 0 || this.properties.chartConfig[0].list.length <= 0){
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'First Time Configuration');
if (this.properties.firstLoad || this.properties.chartConfig[0].columns.length <= 0 || this.properties.chartConfig[0].list.length <= 0) {
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'First Time Configuration');
this.properties.firstLoad = false;
this._getSiteRootWeb()
.then((response0) => {
this.properties.firstLoad = false;
this._getSiteRootWeb()
.then((response0) => {
this._getSites(response0['Url'])
.then((response) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({key:this.context.pageContext.web.absoluteUrl, text:'This Site'});
sites.push({key:'other', text:'Other Site (Specify Url)'});
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response.value) {
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']){
sites.push({key: response.value[_key]['Url'], text: response.value[_key]['Title']});
}
}
this._siteOptions = sites;
this.properties.siteOptions = sites;
this._getListTitles(this.properties.chartConfig[0].dataurl)
.then((response2) => {
this.properties.listOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.properties.chartConfig[0].lists = this.properties.listOptions;
this._getListColumns(this.properties.chartConfig[0].list,this.properties.chartConfig[0].url)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var __key in response3.value) {
col.push({key: response3.value[__key]['InternalName'], text: response3.value[__key]['Title']});
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']) {
sites.push({ key: response.value[_key]['Url'], text: response.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
this._siteOptions = sites;
this.properties.siteOptions = sites;
this._getListTitles(this.properties.chartConfig[0].dataurl)
.then((response2) => {
this.properties.listOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.properties.chartConfig[0].lists = this.properties.listOptions;
this._getListColumns(this.properties.chartConfig[0].list, this.properties.chartConfig[0].url)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var __key in response3.value) {
col.push({ key: response3.value[__key]['InternalName'], text: response3.value[__key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
});
});
});
});
}
}
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
let columnPropertyOptions: any;
columnPropertyOptions = [
{
columnPropertyOptions = [
{
groupName: 'General Options',
groupFields: [
PropertyPaneTextField('description', {
label: 'Web Part Title'
}),
PropertyPaneSlider('numCharts', {
label: 'Number of Charts',
min: 1,
max: 10
}),
PropertyPaneSlider('maxResults', {
label: 'Max # of list items',
min: 1,
max: 1000
})
]
}
];
for (var _i = 0; _i < this.properties.numCharts; _i++) {
columnPropertyOptions.push(
{
groupName: "Chart " + (_i + 1) + " Configuration",
groupFields:[
PropertyPaneTextField('chartConfig[' + _i + ']["title"]', {
label: "Chart Title"
}),
PropertyPaneTextField('chartConfig[' + _i + ']["description"]', {
label: "Description "
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["type"]', {
label: 'Chart Type',
options: this._chartTypeOptions
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["size"]', {
label: 'Chart Size',
options: this._chartSizeOptions
}),
PropertyPaneButton('chartConfig[' + _i + ']["theme"]', {
buttonType: 0,
text: 'Generate Theme',
icon: 'Color',
onClick: ((val) => {
return new Date().valueOf();
})
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["url"]', {
label: 'Chart Data Source',
options: this.properties.siteOptions
}),
PropertyPaneTextField('chartConfig[' + _i + ']["dataurl"]', {
label: 'Chart Site Url (i.e. https://contoso.sharepoint.com/path)',
disabled: this.properties.chartConfig[_i].dataUrlDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["list"]', {
label: 'List Data Source',
options: this.properties.chartConfig[_i].lists,
disabled: this.properties.chartConfig[_i].listsDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["col1"]', {
label: 'Label Column',
options: this.properties.chartConfig[_i].columns,
disabled: this.properties.chartConfig[_i].colsDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["col2"]', {
label: 'Data Column',
options: this.properties.chartConfig[_i].columns,
disabled: this.properties.chartConfig[_i].colsDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["unique"]', {
label: 'Unique Identifier',
options: this.properties.chartConfig[_i].columns,
disabled: this.properties.chartConfig[_i].colsDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["act"]', {
label: 'Operation',
options: this._chartColActions,
disabled: this.properties.chartConfig[_i].colsDisabled
})
]
});
PropertyPaneTextField('description', {
label: 'Web Part Title'
}),
PropertyPaneSlider('numCharts', {
label: 'Number of Charts',
min: 1,
max: 10
}),
PropertyPaneSlider('maxResults', {
label: 'Max # of list items',
min: 1,
max: 1000
})
]
}
];
for (var _i = 0; _i < this.properties.numCharts; _i++) {
columnPropertyOptions.push(
{
groupName: "Chart " + (_i + 1) + " Configuration",
groupFields: [
PropertyPaneTextField('chartConfig[' + _i + ']["title"]', {
label: "Chart Title"
}),
PropertyPaneTextField('chartConfig[' + _i + ']["description"]', {
label: "Description "
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["type"]', {
label: 'Chart Type',
options: this._chartTypeOptions
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["size"]', {
label: 'Chart Size',
options: this._chartSizeOptions
}),
PropertyPaneButton('chartConfig[' + _i + ']["theme"]', {
buttonType: 0,
text: 'Generate Theme',
icon: 'Color',
onClick: ((val) => {
return new Date().valueOf();
})
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["url"]', {
label: 'Chart Data Source',
options: this.properties.siteOptions
}),
PropertyPaneTextField('chartConfig[' + _i + ']["dataurl"]', {
label: 'Chart Site Url (i.e. https://contoso.sharepoint.com/path)',
disabled: this.properties.chartConfig[_i].dataUrlDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["list"]', {
label: 'List Data Source',
options: this.properties.chartConfig[_i].lists,
disabled: this.properties.chartConfig[_i].listsDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["col1"]', {
label: 'Label Column',
options: this.properties.chartConfig[_i].columns,
disabled: this.properties.chartConfig[_i].colsDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["col2"]', {
label: 'Data Column',
options: this.properties.chartConfig[_i].columns,
disabled: this.properties.chartConfig[_i].colsDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["unique"]', {
label: 'Unique Identifier',
options: this.properties.chartConfig[_i].columns,
disabled: this.properties.chartConfig[_i].colsDisabled
}),
PropertyPaneDropdown('chartConfig[' + _i + ']["act"]', {
label: 'Operation',
options: this._chartColActions,
disabled: this.properties.chartConfig[_i].colsDisabled
})
]
});
}
return {
pages: [
@ -423,23 +423,23 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
};
}
protected onPropertyPaneConfigurationComplete(){
protected onPropertyPaneConfigurationComplete() {
this.render();
}
private _getSiteRootWeb(): Promise<string[]> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Site/RootWeb?$select=Title,Url`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getSites(rootWebUrl: string): Promise<ISPLists> {
return this.context.spHttpClient.get(rootWebUrl + `/_api/web/webs?$select=Title,Url`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getListTitles(site: string): Promise<ISPLists> {
@ -449,49 +449,49 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
});
}
private _getListColumns(listName: string,listsite: string): Promise<any> {
private _getListColumns(listName: string, listsite: string): Promise<any> {
return this.context.spHttpClient.get(listsite + `/_api/web/lists/GetByTitle('${listName}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false and TypeAsString ne 'User' and TypeAsString ne 'Lookup'`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
public getData(chartConfig: Object){
public getData(chartConfig: Object) {
return this.context.spHttpClient.get(chartConfig['dataurl'] + `/_api/web/lists/GetByTitle(\'${chartConfig['list']}\')/items?$orderby=Id desc&$limit=10&$top=${this.properties.maxResults}`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _updateListTitles(siteUrl: string, _chartConfig: ChartConfiguration): void {
this._getListTitles(siteUrl).then((response) => {
var respLists: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
respLists.push({ key: response.value[_key]['Title'], text: response.value[_key]['Title'] });
}
this._dropdownOptions = respLists;
_chartConfig.lists = respLists;
this.context.propertyPane.refresh();
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement, "There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
}
private _updateListTitles(siteUrl: string,_chartConfig: ChartConfiguration): void {
this._getListTitles(siteUrl).then((response) => {
var respLists: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
respLists.push({key: response.value[_key]['Title'], text: response.value[_key]['Title']});
}
this._dropdownOptions = respLists;
_chartConfig.lists = respLists;
this.context.propertyPane.refresh();
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement,"There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
}
private _updateListColumns(siteUrl: string, listName: string, _chartConfig: ChartConfiguration): void {
this._getListColumns(listName,siteUrl).then((response) => {
var respLists: IPropertyPaneDropdownOption[] = [];
console.log(response.value);
for (var _key in response.value) {
respLists.push({key: response.value[_key]['InternalName'], text: response.value[_key]['Title']});
}
this._columnOptions = respLists;
_chartConfig.columns = respLists;
this.context.propertyPane.refresh();
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement,"There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
this._getListColumns(listName, siteUrl).then((response) => {
var respLists: IPropertyPaneDropdownOption[] = [];
console.log(response.value);
for (var _key in response.value) {
respLists.push({ key: response.value[_key]['InternalName'], text: response.value[_key]['Title'] });
}
this._columnOptions = respLists;
_chartConfig.columns = respLists;
this.context.propertyPane.refresh();
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement, "There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
}
}

2
samples/react-modern-charts/src/webparts/modernCharts/components/ModernCharts.module.scss
View File

@ -1,3 +1,5 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';
.charts {
.container {
max-width: 700px;

30
samples/react-modern-charts/src/webparts/modernCharts/components/ModernCharts.tsx
View File

@ -12,35 +12,35 @@ import { Radar } from 'react-chartjs-2';
import { Polar } from 'react-chartjs-2';
import ChartOptions from '../ChartOptions';
import {
DocumentCard,
DocumentCardTitle,
DocumentCard,
DocumentCardTitle,
DocumentCardLocation,
DocumentCardPreview,
IDocumentCardPreviewProps
} from 'office-ui-fabric-react/lib/DocumentCard';
export default class ModernCharts extends React.Component<IModernChartsProps, void> {
export default class ModernCharts extends React.Component<IModernChartsProps, {}> {
public render(): JSX.Element {
const charts: JSX.Element[] = this.props.charts.map((chart: MChart, i: number) => {
return (
<DocumentCard onClickHref='#' className={styles.docContainer + ' ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg' + chart.config.size} key={chart.key}>
<div className={styles.chartCard}>
{this.chart(ChartOptions.Data(chart),ChartOptions.Options(),chart.config.type)}
</div>
<DocumentCardLocation location={chart.config.description}/>
<DocumentCardTitle title={chart.config.title}/>
</DocumentCard>
);
});
return (
<DocumentCard onClickHref='#' className={styles.docContainer + ' ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg' + chart.config.size} key={chart.key}>
<div className={styles.chartCard}>
{this.chart(ChartOptions.Data(chart), ChartOptions.Options(), chart.config.type)}
</div>
<DocumentCardLocation location={chart.config.description} />
<DocumentCardTitle title={chart.config.title} />
</DocumentCard>
);
});
return (
<div className={styles.chartjs + ' ms-Grid'}>
<div className={'ms-Grid-row'}>
{charts}
</div>
<div style={{clear: 'both'}}/>
</div>
<div style={{ clear: 'both' }} />
</div>
);
}

47
samples/react-modern-charts/teams/manifest.json Normal file
View File

@ -0,0 +1,47 @@
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
"manifestVersion": "1.2",
"packageName": "ModernCharts",
"id": "50dbeca0-48ed-4459-800f-b75b13159b21",
"version": "0.1",
"developer": {
"name": "SPFx + Teams Dev",
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
"privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
"termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
},
"name": {
"short": "ModernCharts"
},
"description": {
"short": "Modern Charts Sample",
"full": "Modern Charts Sample"
},
"icons": {
"outline": "tab20x20.png",
"color": "tab96x96.png"
},
"accentColor": "#004578",
"configurableTabs": [
{
"configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=50dbeca0-48ed-4459-800f-b75b13159b21",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"*.sharepoint-df.com",
"spoppe-a.akamaihd.net",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net",
"msft.spoppe.com"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
}

17
samples/react-modern-charts/tsconfig.json
View File

@ -1,13 +1,19 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"outDir": "lib",
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
@ -21,5 +27,12 @@
"dom",
"es2015.collection"
]
}
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]
}

30
samples/react-modern-charts/tslint.json
View File

@ -1,3 +1,31 @@
{
"rulesDirectory": "./config"
"rulesDirectory": [],
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}