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

Update react modern charts (#488) 

* Upgrade to SPFx 1.4.1

* remove unnecessary semicolon

* Update version and readme file
This commit is contained in:
Joel Rodrigues 2018-04-27 16:26:24 +01:00 committed by Vesa Juvonen
parent fd4cbe0804
commit 92072988ac
15 changed files with 17489 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated Normal file
View File

@ -0,0 +1,3 @@
{
"lockfileVersion": 1
}

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

@ -2,7 +2,7 @@
## Summary
This webpart uses the Chart.js library to visualize SharePoint list data.
This webpart uses the Chart.js library to visualize SharePoint list data.
Built in Chart Types:
-Bar
@ -23,6 +23,7 @@ Current Data Functions:
-Sum
## Media
![](https://raw.githubusercontent.com/jcoleman-pcprofessional/Modern-Charts/master/assets/modern-chart2.png)
![](https://raw.githubusercontent.com/jcoleman-pcprofessional/Modern-Charts/master/assets/modern-charts.png)
![](https://raw.githubusercontent.com/jcoleman-pcprofessional/Modern-Charts/master/assets/Modern-Charts.gif)
@ -31,8 +32,9 @@ Current Data Functions:
Built with SharePoint Framework GA, Office Graph, React and Chart.JS
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
## Used SharePoint Framework Version
![version](https://img.shields.io/badge/version-1.4.1-green.svg)
## Applies to
@ -49,9 +51,11 @@ react-modern-charts|Jeremy Coleman (MCP, PC Professional, Inc.)
Version|Date|Comments
-------|----|--------
1.0.0.1|April 25, 2018|Update to SPFx 1.4.1
1.0.0.0|February 11, 2017|Initial release
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---

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

@ -1,13 +1,18 @@
{
"entries": [
{
"entry": "./lib/webparts/modernCharts/ModernChartsWebPart.js",
"manifest": "./src/webparts/modernCharts/ModernChartsWebPart.manifest.json",
"outputPath": "./dist/modern-charts.bundle.js"
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"modern-charts-bundle": {
"components": [
{
"entrypoint": "./lib/webparts/modernCharts/ModernChartsWebPart.js",
"manifest": "./src/webparts/modernCharts/ModernChartsWebPart.manifest.json"
}
]
}
],
"externals": {},
},
"localizedResources": {
"modernChartsStrings": "webparts/modernCharts/loc/{locale}.js"
}
}
"modernChartsStrings": "lib/webparts/modernCharts/loc/{locale}.js"
},
"externals": {}
}

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

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

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

@ -1,6 +1,7 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "modern-charts",
"accessKey": "<!-- ACCESS KEY -->"
}
}

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

@ -1,8 +1,9 @@
{
"$schema": "https://dev.office.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.0"
"version": "1.0.0.1"
},
"paths": {
"zippedPackage": "solution/modern-charts.sppkg"

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

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

7
samples/react-modern-charts/config/tslint.json
View File

@ -1,4 +1,5 @@
{
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
// Display errors as warnings
"displayAsWarning": true,
// The TSLint task may have been configured with several custom lint rules
@ -29,7 +30,6 @@
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-unused-imports": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
@ -39,8 +39,7 @@
"use-named-parameter": true,
"valid-typeof": true,
"variable-name": false,
"whitespace": false,
"prefer-const": true
"whitespace": false
}
}
}
}

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

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

1
samples/react-modern-charts/gulpfile.js vendored
View File

@ -2,5 +2,6 @@
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.initialize(gulp);

17417
samples/react-modern-charts/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -6,9 +6,9 @@
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-client-base": "~1.0.0",
"@microsoft/sp-core-library": "~1.0.0",
"@microsoft/sp-webpart-base": "~1.0.0",
"@microsoft/sp-core-library": "~1.4.1",
"@microsoft/sp-webpart-base": "~1.4.1",
"@microsoft/sp-office-ui-fabric-core": "~1.4.1",
"@types/chart.js": "0.0.14",
"@types/react": "0.14.46",
"@types/react-addons-shallow-compare": "0.14.17",
@ -23,9 +23,9 @@
"react-dom": "15.4.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.0.0",
"@microsoft/sp-module-interfaces": "~1.0.0",
"@microsoft/sp-webpart-workbench": "~1.0.0",
"@microsoft/sp-build-web": "~1.4.1",
"@microsoft/sp-module-interfaces": "~1.4.1",
"@microsoft/sp-webpart-workbench": "~1.4.1",
"gulp": "~3.9.1",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0"

8
samples/react-modern-charts/src/webparts/modernCharts/ChartOptions.ts
View File

@ -8,7 +8,7 @@ import * as cs from 'color-scheme/lib/color-scheme';
import { MChart } from './IModernChartsWebPartProps';
export default class ChartOptions {
public static _sampleData: Array<number> = [100, 50, 275, 100];
public static _sampleCols: Array<string> = ['UPS','FedEx','USPS','OnTrac'];
@ -29,10 +29,10 @@ export default class ChartOptions {
beginAtZero: true
}
}]
}
}
}
};
};
}
public static Data(chart: MChart) {
return {
@ -86,4 +86,4 @@ export default class ChartOptions {
return array;
}
}
}

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

@ -36,7 +36,7 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
private reactCharts: React.ReactElement<IModernChartsProps>;
// Columns Enable / Disable
// Columns Enable / Disable
private colsDisabled: boolean = true;
private listDisabled: boolean = true;
private urlTextDisabled: boolean = true;
@ -52,7 +52,7 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
{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'},
@ -110,7 +110,7 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
bgColors: ChartOptions.RandomColors()['bgColors'],
hoverColors: ChartOptions.RandomColors()['bgColors']
};
return defConfig;
}
@ -145,7 +145,7 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
} 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); }
}
});
}
@ -212,7 +212,7 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
}
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) => {
@ -235,16 +235,16 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
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('\"]','');
if (propertyPath.indexOf('[') != -1) {
pPath = propertyPath.substring(16).replace('\"]','');
}
if (pPath === 'url' && newValue == 'other' && (oldValue != newValue)){
this.urlTextDisabled = false;
@ -321,7 +321,7 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
});
});
}
};
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
let columnPropertyOptions: any;
@ -342,7 +342,7 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
label: 'Max # of list items',
min: 1,
max: 1000
})
})
]
}
];
@ -365,7 +365,7 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
PropertyPaneDropdown('chartConfig[' + _i + ']["size"]', {
label: 'Chart Size',
options: this._chartSizeOptions
}),
}),
PropertyPaneButton('chartConfig[' + _i + ']["theme"]', {
buttonType: 0,
text: 'Generate Theme',
@ -461,7 +461,7 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
}
private _updateListTitles(siteUrl: string,_chartConfig: ChartConfiguration): void {
this._getListTitles(siteUrl).then((response) => {

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

@ -6,10 +6,20 @@
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"es6-collections",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
]
}
}