Update react modern charts (#488)

* Upgrade to SPFx 1.4.1

* remove unnecessary semicolon

* Update version and readme file

package-lock.json

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

samples/react-modern-charts/README.md

@@ -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 
+## Used SharePoint Framework Version
-![drop](https://img.shields.io/badge/version-GA-green.svg)
+
+![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.**
 
 ---

samples/react-modern-charts/config/config.json

@@ -1,13 +1,18 @@
 {
-  "entries": [
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
-    {
+  "version": "2.0",
-      "entry": "./lib/webparts/modernCharts/ModernChartsWebPart.js",
+  "bundles": {
-      "manifest": "./src/webparts/modernCharts/ModernChartsWebPart.manifest.json",
+    "modern-charts-bundle": {
-      "outputPath": "./dist/modern-charts.bundle.js"
+      "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": {}
+}

samples/react-modern-charts/config/copy-assets.json

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

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

@@ -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 -->"
-}
+}

samples/react-modern-charts/config/package-solution.json

@@ -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"

samples/react-modern-charts/config/serve.json

@@ -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,

samples/react-modern-charts/config/tslint.json

@@ -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,
+      "whitespace": false
-      "prefer-const": true
     }
   }
-}
+}

samples/react-modern-charts/config/write-manifests.json

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

samples/react-modern-charts/gulpfile.js

@@ -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);

samples/react-modern-charts/package.json

@@ -6,9 +6,9 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-client-base": "~1.0.0",
+    "@microsoft/sp-core-library": "~1.4.1",
-    "@microsoft/sp-core-library": "~1.0.0",
+    "@microsoft/sp-webpart-base": "~1.4.1",
-    "@microsoft/sp-webpart-base": "~1.0.0",
+    "@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-build-web": "~1.4.1",
-    "@microsoft/sp-module-interfaces": "~1.0.0",
+    "@microsoft/sp-module-interfaces": "~1.4.1",
-    "@microsoft/sp-webpart-workbench": "~1.0.0",
+    "@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"

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

@@ -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;
     }
-}
+}

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

@@ -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) { 
+          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)){
       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) => {

samples/react-modern-charts/tsconfig.json

@@ -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"
     ]
   }
 }