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

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

@ -1,8 +1,13 @@
{ {
"@microsoft/generator-sharepoint": { "@microsoft/generator-sharepoint": {
"libraryName": "modern-charts", "libraryName": "modern-charts",
"framework": "react", "framework": "",
"version": "1.0.0", "version": "1.10.0",
"componentType": "webpart",
"isDomainIsolated": false,
"isCreatingSolution": true,
"environment": "spo",
"packageManager": "npm",
"libraryId": "f8a78a9a-a93e-4843-89e5-7b871d9b9fa2" "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 ## 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 ## Applies to
@ -66,6 +66,7 @@ react-modern-charts|Jeremy Coleman (MCP, PC Professional, Inc.)
Version|Date|Comments 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.1|April 25, 2018|Update to SPFx 1.4.1
1.0.0.0|February 11, 2017|Initial release 1.0.0.0|February 11, 2017|Initial release

4
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", "version": "2.0",
"bundles": { "bundles": {
"modern-charts-bundle": { "modern-charts-bundle": {
@ -15,4 +15,4 @@
"modernChartsStrings": "lib/webparts/modernCharts/loc/{locale}.js" "modernChartsStrings": "lib/webparts/modernCharts/loc/{locale}.js"
}, },
"externals": {} "externals": {}
} }

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" "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/", "workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->", "account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "modern-charts", "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": { "solution": {
"name": "modern-charts-client-side-solution", "name": "modern-charts-client-side-solution",
"id": "f8a78a9a-a93e-4843-89e5-7b871d9b9fa2", "id": "f8a78a9a-a93e-4843-89e5-7b871d9b9fa2",
"version": "1.0.0.1" "version": "1.0.0.2",
"isDomainIsolated": false,
"includeClientSideAssets": true
}, },
"paths": { "paths": {
"zippedPackage": "solution/modern-charts.sppkg" "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, "port": 4321,
"initialPage": "https://localhost:5432/workbench", "initialPage": "https://localhost:5432/workbench",
"https": true, "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 -->" "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", "name": "modern-charts",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"main": "lib/index.js",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
}, },
"dependencies": { "dependencies": {
"@microsoft/sp-core-library": "~1.4.1", "@microsoft/sp-core-library": "1.10.0",
"@microsoft/sp-webpart-base": "~1.4.1", "@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-office-ui-fabric-core": "~1.4.1", "@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "1.10.0",
"@types/chart.js": "0.0.14", "@types/chart.js": "0.0.14",
"@types/react": "0.14.46", "@types/es6-promise": "0.0.33",
"@types/react-addons-shallow-compare": "0.14.17", "@types/react": "16.8.8",
"@types/react-addons-test-utils": "0.14.15", "@types/react-dom": "16.8.3",
"@types/react-addons-update": "0.14.14", "@types/webpack-env": "1.13.1",
"@types/react-dom": "0.14.18", "chart.js": "^2.9.3",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"chart.js": "^2.5.0",
"color-scheme": "0.0.5", "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-chartjs-2": "^2.0.5",
"react-dom": "15.4.2" "react-dom": "16.8.5"
},
"resolutions": {
"@types/react": "16.8.8"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/sp-build-web": "~1.4.1", "@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-module-interfaces": "~1.4.1", "@microsoft/sp-build-web": "1.10.0",
"@microsoft/sp-webpart-workbench": "~1.4.1", "@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", "gulp": "~3.9.1",
"@types/chai": ">=3.4.34 <3.6.0", "tslint-microsoft-contrib": "5.0.0"
"@types/mocha": ">=2.2.33 <2.6.0"
}, },
"scripts": { "scripts": {
"build": "gulp bundle", "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", "id": "50dbeca0-48ed-4459-800f-b75b13159b21",
"alias": "ModernChartsWebPart", "alias": "ModernChartsWebPart",
"componentType": "WebPart", "componentType": "WebPart",
"version": "0.0.1", "version": "*",
"manifestVersion": 2, "manifestVersion": 2,
"safeWithCustomScriptDisabled": false,
"preconfiguredEntries": [{ "supportedHosts": [
"groupId": "50dbeca0-48ed-4459-800f-b75b13159b21", "SharePointWebPart"
"group": { "default": "Modern Web Parts" }, ],
"title": { "default": "ModernCharts" }, "preconfiguredEntries": [
"description": { "default": "Modern Charts Sample" }, {
"officeFabricIconFontName": "Chart", "groupId": "50dbeca0-48ed-4459-800f-b75b13159b21",
"properties": { "group": {
"description": "ModernCharts", "default": "Modern Web Parts"
"numCharts": 1, },
"state": false, "title": {
"maxResults": 25, "default": "ModernCharts"
"listOptions": [] },
"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 React from 'react';
import * as ReactDom from 'react-dom'; import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library'; import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart, IWebPartContext } from "@microsoft/sp-webpart-base";
import { import {
BaseClientSideWebPart,
IPropertyPaneConfiguration, IPropertyPaneConfiguration,
PropertyPaneTextField, PropertyPaneButton,
IWebPartContext,
PropertyPaneSlider,
PropertyPaneDropdown,
IPropertyPaneDropdownOption, IPropertyPaneDropdownOption,
PropertyPaneButton PropertyPaneDropdown,
} from '@microsoft/sp-webpart-base'; PropertyPaneSlider,
PropertyPaneTextField
} from "@microsoft/sp-property-pane";
import * as strings from 'modernChartsStrings'; import * as strings from 'modernChartsStrings';
import ModernCharts from './components/ModernCharts'; import ModernCharts from './components/ModernCharts';
import { IModernChartsProps } from './IModernChartsWebPartProps'; import { IModernChartsProps } from './IModernChartsWebPartProps';
@ -48,24 +47,24 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
private _columnOptions: IPropertyPaneDropdownOption[] = []; private _columnOptions: IPropertyPaneDropdownOption[] = [];
private _ListColumnOptions: Array<IPropertyPaneDropdownOption> = []; private _ListColumnOptions: Array<IPropertyPaneDropdownOption> = [];
private _chartSizeOptions: IPropertyPaneDropdownOption[] = [ private _chartSizeOptions: IPropertyPaneDropdownOption[] = [
{key: 3, text:'Small'}, { key: 3, text: 'Small' },
{key: 6, text:'Medium'}, { key: 6, text: 'Medium' },
{key: 9, text: 'Medium-Large'}, { key: 9, text: 'Medium-Large' },
{key: 12, text: 'Large'} { key: 12, text: 'Large' }
]; ];
private _chartTypeOptions: IPropertyPaneDropdownOption[] = [ private _chartTypeOptions: IPropertyPaneDropdownOption[] = [
{key: 'bar', text:'Bar'}, { key: 'bar', text: 'Bar' },
{key: 'horizontalbar', text:'Horizontal Bar'}, { key: 'horizontalbar', text: 'Horizontal Bar' },
{key: 'doughnut', text: 'Doughnut'}, { key: 'doughnut', text: 'Doughnut' },
{key: 'line', text: 'Line'}, { key: 'line', text: 'Line' },
{key: 'pie', text: 'Pie'}, { key: 'pie', text: 'Pie' },
{key: 'polar', text:'Polar'}, { key: 'polar', text: 'Polar' },
{key: 'radar', text:'Radar'} { key: 'radar', text: 'Radar' }
]; ];
private _chartColActions: IPropertyPaneDropdownOption[] = [ private _chartColActions: IPropertyPaneDropdownOption[] = [
{key: 'average', text: 'Average'}, { key: 'average', text: 'Average' },
{key: 'count', text: 'Count'}, { key: 'count', text: 'Count' },
{key: 'sum', text: 'Sum'} { key: 'sum', text: 'Sum' }
]; ];
public constructor(context: IWebPartContext) { public constructor(context: IWebPartContext) {
@ -74,16 +73,16 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
private ChartThemes: ChartOptions; private ChartThemes: ChartOptions;
private defaultOptions: Object = { private defaultOptions: Object = {
legend: { legend: {
display: false, display: false,
layout: { layout: {
padding: 10 padding: 10
}, },
position: 'bottom', position: 'bottom',
labels: { labels: {
fontColor: 'rgba(100, 100, 100, 1.0)' fontColor: 'rgba(100, 100, 100, 1.0)'
}
} }
}
}; };
public defaultChartConfig(chartDesc: string): ChartConfiguration { public defaultChartConfig(chartDesc: string): ChartConfiguration {
@ -116,13 +115,13 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
public render(): void { public render(): void {
//Initialize first demo chart //Initialize first demo chart
if (!this.properties.state){ if (!this.properties.state) {
this.properties.state = true; this.properties.state = true;
this.properties.firstLoad = true; this.properties.firstLoad = true;
this.properties.numCharts = 1; this.properties.numCharts = 1;
this.properties.chartConfig = []; this.properties.chartConfig = [];
const firstChartConfig = this.defaultChartConfig; const firstChartConfig = this.defaultChartConfig;
this.properties.chartConfig.push(this.defaultChartConfig('Demo Chart, Edit Web Part to Customize')); this.properties.chartConfig.push(this.defaultChartConfig('Demo Chart, Edit Web Part to Customize'));
} }
this.getChartData(); this.getChartData();
} }
@ -131,57 +130,58 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
return Version.parse('1.0'); return Version.parse('1.0');
} }
private getChartData(): void{ private getChartData(): void {
const _chartData: Array<MChart> = []; const _chartData: Array<MChart> = [];
var _count = 0; var _count = 0;
this.properties.chartConfig.forEach((cfg,i) => { this.properties.chartConfig.forEach((cfg, i) => {
if (cfg.list != null){ if (cfg.list != null) {
this.getData(cfg).then((response) => { this.getData(cfg).then((response) => {
const chart = this.calculateData(response.value, cfg); const chart = this.calculateData(response.value, cfg);
const _chart: MChart = {data:chart['data'],labels:chart['labels'],config:cfg,key: i}; 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; _chartData[i] = _chart;
if (++_count == this.properties.chartConfig.length){ this.getCharts(_chartData); } 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); }
} }
}); });
} }
private getCharts(charts: Array<MChart>): void{ private getCharts(charts: Array<MChart>): void {
const chartArea: React.ReactElement<IModernChartsProps> = React.createElement(ModernCharts,{ const chartArea: React.ReactElement<IModernChartsProps> = React.createElement(
description: this.properties.description, ModernCharts, {
title: this.properties.description, description: this.properties.description,
state: this.properties.state, title: this.properties.description,
config: {}, state: this.properties.state,
context: this.context, config: {},
data: {}, context: this.context,
charts: charts 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 values: Array<number> = [];
var labels: Object = this.getUnique(data, config); 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': case 'sum':
dataVal.forEach((vals,i) => { dataVal.forEach((vals, i) => {
values[i] = 0; values[i] = 0;
vals.forEach((val) => { vals.forEach((val) => {
values[i]+=parseFloat(val); values[i] += parseFloat(val);
}); });
}); });
break; break;
case 'average': case 'average':
dataVal.forEach((vals,i) => { dataVal.forEach((vals, i) => {
values[i] = 0; values[i] = 0;
vals.forEach((val) => { vals.forEach((val) => {
values[i]+=parseFloat(val); values[i] += parseFloat(val);
}); });
if (values[i] != 0) { if (values[i] != 0) {
values[i] = values[i] / vals.length; values[i] = values[i] / vals.length;
@ -194,32 +194,32 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
}); });
break; break;
default: default:
values = [100,250,90,300]; values = [100, 250, 90, 300];
break; break;
} }
return { data:values, labels:labels['labels'] }; return { data: values, labels: labels['labels'] };
} }
private getUnique(data: Array<Object>,config:ChartConfiguration): Object { private getUnique(data: Array<Object>, config: ChartConfiguration): Object {
const chLabels: Object = { unique:[], labels:[] }; const chLabels: Object = { unique: [], labels: [] };
data.forEach((item) => { data.forEach((item) => {
if (chLabels['unique'].indexOf(item[config.unique]) == -1 && item[config.unique] != null && item[config.unique] != ""){ if (chLabels['unique'].indexOf(item[config.unique]) == -1 && item[config.unique] != null && item[config.unique] != "") {
chLabels['unique'].push(item[config.unique]); chLabels['unique'].push(item[config.unique]);
chLabels['labels'].push(item[config.col1]); chLabels['labels'].push(item[config.col1]);
} }
}); });
return chLabels; 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 values: Object = {};
const vals: Array<Array<any>> = [[]]; const vals: Array<Array<any>> = [[]];
unique.forEach((col,i) => { unique.forEach((col, i) => {
values[col] = []; values[col] = [];
vals[i] = []; vals[i] = [];
data.forEach((item, _i) => { data.forEach((item, _i) => {
if (item[config.unique] == col){ if (item[config.unique] == col) {
vals[i].push(item[config.col2]); vals[i].push(item[config.col2]);
} }
}); });
@ -232,40 +232,40 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
var pPathInd = propertyPath[12]; var pPathInd = propertyPath[12];
if (pPath === 'numCharts' && oldValue != newValue) { if (pPath === 'numCharts' && oldValue != newValue) {
if (this.properties.chartConfig.length < newValue){ if (this.properties.chartConfig.length < newValue) {
while (this.properties.chartConfig.length < newValue) { while (this.properties.chartConfig.length < newValue) {
this.properties.chartConfig.push(this.defaultChartConfig('Chart Description')); this.properties.chartConfig.push(this.defaultChartConfig('Chart Description'));
} }
} else if (this.properties.chartConfig.length > newValue) { } else if (this.properties.chartConfig.length > newValue) {
while (newValue < this.properties.chartConfig.length) { while (newValue < this.properties.chartConfig.length) {
this.properties.chartConfig.pop(); this.properties.chartConfig.pop();
}
} }
}
} }
if (propertyPath.indexOf('[') != -1) { 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.urlTextDisabled = false;
this.properties.chartConfig[pPathInd].dataUrlDisabled = false; this.properties.chartConfig[pPathInd].dataUrlDisabled = false;
this.properties.chartConfig[pPathInd].dataurl = oldValue; 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].dataurl = newValue;
this.properties.chartConfig[pPathInd].dataUrlDisabled = true; this.properties.chartConfig[pPathInd].dataUrlDisabled = true;
} }
if ( (pPath === 'url' && (newValue != oldValue)) || (pPath === 'dataurl' && (newValue != oldValue)) ){ if ((pPath === 'url' && (newValue != oldValue)) || (pPath === 'dataurl' && (newValue != oldValue))) {
this._updateListTitles(newValue,this.properties.chartConfig[pPathInd]); this._updateListTitles(newValue, this.properties.chartConfig[pPathInd]);
this.properties.chartConfig[pPathInd]['other'] = true; this.properties.chartConfig[pPathInd]['other'] = true;
this.properties.state = true; this.properties.state = true;
} }
if (pPath === 'list' && (newValue != oldValue)){ if (pPath === 'list' && (newValue != oldValue)) {
var siteUrl = this.properties.chartConfig[pPathInd]['dataurl']; 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; this.properties.chartConfig[pPathInd].colsDisabled = false;
} }
if (pPath === 'theme' && (newValue != oldValue)){ if (pPath === 'theme' && (newValue != oldValue)) {
const newTheme = ChartOptions.RandomColors(); const newTheme = ChartOptions.RandomColors();
this.properties.chartConfig[pPathInd].bgColors = newTheme['bgColors']; this.properties.chartConfig[pPathInd].bgColors = newTheme['bgColors'];
this.properties.chartConfig[pPathInd].hoverColors = newTheme['hoverColors']; this.properties.chartConfig[pPathInd].hoverColors = newTheme['hoverColors'];
@ -276,140 +276,140 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
protected onPropertyPaneConfigurationStart(): void { protected onPropertyPaneConfigurationStart(): void {
if (this.properties.firstLoad || this.properties.chartConfig[0].columns.length <= 0 || this.properties.chartConfig[0].list.length <= 0){ 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.context.statusRenderer.displayLoadingIndicator(this.domElement, 'First Time Configuration');
this.properties.firstLoad = false; this.properties.firstLoad = false;
this._getSiteRootWeb() this._getSiteRootWeb()
.then((response0) => { .then((response0) => {
this._getSites(response0['Url']) this._getSites(response0['Url'])
.then((response) => { .then((response) => {
var sites: IPropertyPaneDropdownOption[] = []; var sites: IPropertyPaneDropdownOption[] = [];
sites.push({key:this.context.pageContext.web.absoluteUrl, text:'This Site'}); sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({key:'other', text:'Other Site (Specify Url)'}); sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response.value) { for (var _key in response.value) {
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']){ if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']) {
sites.push({key: response.value[_key]['Url'], text: response.value[_key]['Title']}); 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']});
} }
this._columnOptions = col; }
this.colsDisabled = false; this._siteOptions = sites;
this.listDisabled = false; this.properties.siteOptions = sites;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement); this._getListTitles(this.properties.chartConfig[0].dataurl)
this.render(); .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 { protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
let columnPropertyOptions: any; let columnPropertyOptions: any;
columnPropertyOptions = [ columnPropertyOptions = [
{ {
groupName: 'General Options', groupName: 'General Options',
groupFields: [ groupFields: [
PropertyPaneTextField('description', { PropertyPaneTextField('description', {
label: 'Web Part Title' label: 'Web Part Title'
}), }),
PropertyPaneSlider('numCharts', { PropertyPaneSlider('numCharts', {
label: 'Number of Charts', label: 'Number of Charts',
min: 1, min: 1,
max: 10 max: 10
}), }),
PropertyPaneSlider('maxResults', { PropertyPaneSlider('maxResults', {
label: 'Max # of list items', label: 'Max # of list items',
min: 1, min: 1,
max: 1000 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
})
]
});
} }
];
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 { return {
pages: [ pages: [
@ -423,23 +423,23 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
}; };
} }
protected onPropertyPaneConfigurationComplete(){ protected onPropertyPaneConfigurationComplete() {
this.render(); this.render();
} }
private _getSiteRootWeb(): Promise<string[]> { private _getSiteRootWeb(): Promise<string[]> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Site/RootWeb?$select=Title,Url`, SPHttpClient.configurations.v1) return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Site/RootWeb?$select=Title,Url`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => { .then((response: SPHttpClientResponse) => {
return response.json(); return response.json();
}); });
} }
private _getSites(rootWebUrl: string): Promise<ISPLists> { private _getSites(rootWebUrl: string): Promise<ISPLists> {
return this.context.spHttpClient.get(rootWebUrl + `/_api/web/webs?$select=Title,Url`, SPHttpClient.configurations.v1) return this.context.spHttpClient.get(rootWebUrl + `/_api/web/webs?$select=Title,Url`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => { .then((response: SPHttpClientResponse) => {
return response.json(); return response.json();
}); });
} }
private _getListTitles(site: string): Promise<ISPLists> { 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) 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) => { .then((response: SPHttpClientResponse) => {
return response.json(); 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) 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) => { .then((response: SPHttpClientResponse) => {
return response.json(); 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 { private _updateListColumns(siteUrl: string, listName: string, _chartConfig: ChartConfiguration): void {
this._getListColumns(listName,siteUrl).then((response) => { this._getListColumns(listName, siteUrl).then((response) => {
var respLists: IPropertyPaneDropdownOption[] = []; var respLists: IPropertyPaneDropdownOption[] = [];
console.log(response.value); console.log(response.value);
for (var _key in response.value) { for (var _key in response.value) {
respLists.push({key: response.value[_key]['InternalName'], text: response.value[_key]['Title']}); respLists.push({ key: response.value[_key]['InternalName'], text: response.value[_key]['Title'] });
} }
this._columnOptions = respLists; this._columnOptions = respLists;
_chartConfig.columns = respLists; _chartConfig.columns = respLists;
this.context.propertyPane.refresh(); this.context.propertyPane.refresh();
}).catch((err) => { }).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement); 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.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.");
}); });
} }
} }

6
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 { .charts {
.container { .container {
max-width: 700px; max-width: 700px;
@ -113,5 +115,5 @@
margin-top:5px; margin-top:5px;
margin-bottom:5px; margin-bottom:5px;
} }
} }
} }

32
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 { Polar } from 'react-chartjs-2';
import ChartOptions from '../ChartOptions'; import ChartOptions from '../ChartOptions';
import { import {
DocumentCard, DocumentCard,
DocumentCardTitle, DocumentCardTitle,
DocumentCardLocation, DocumentCardLocation,
DocumentCardPreview, DocumentCardPreview,
IDocumentCardPreviewProps IDocumentCardPreviewProps
} from 'office-ui-fabric-react/lib/DocumentCard'; } 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 { public render(): JSX.Element {
const charts: JSX.Element[] = this.props.charts.map((chart: MChart, i: number) => { const charts: JSX.Element[] = this.props.charts.map((chart: MChart, i: number) => {
return ( return (
<DocumentCard onClickHref='#' className={styles.docContainer + ' ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg' + chart.config.size} key={chart.key}> <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}> <div className={styles.chartCard}>
{this.chart(ChartOptions.Data(chart),ChartOptions.Options(),chart.config.type)} {this.chart(ChartOptions.Data(chart), ChartOptions.Options(), chart.config.type)}
</div> </div>
<DocumentCardLocation location={chart.config.description}/> <DocumentCardLocation location={chart.config.description} />
<DocumentCardTitle title={chart.config.title}/> <DocumentCardTitle title={chart.config.title} />
</DocumentCard> </DocumentCard>
); );
}); });
return ( return (
<div className={styles.chartjs + ' ms-Grid'}> <div className={styles.chartjs + ' ms-Grid'}>
<div className={'ms-Grid-row'}> <div className={'ms-Grid-row'}>
{charts} {charts}
</div> </div>
<div style={{clear: 'both'}}/> <div style={{ clear: 'both' }} />
</div> </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": { "compilerOptions": {
"target": "es5", "target": "es5",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"module": "commonjs", "module": "esnext",
"moduleResolution": "node",
"jsx": "react", "jsx": "react",
"declaration": true, "declaration": true,
"sourceMap": true, "sourceMap": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"skipLibCheck": true, "skipLibCheck": true,
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"outDir": "lib",
"typeRoots": [ "typeRoots": [
"./node_modules/@types", "./node_modules/@types",
"./node_modules/@microsoft" "./node_modules/@microsoft"
@ -21,5 +27,12 @@
"dom", "dom",
"es2015.collection" "es2015.collection"
] ]
} },
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]
} }

32
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
}
}