Merge pull request #1413 from petkir/petkir-react-modern-charts-1252

samples/react-modern-charts/README.md

@@ -61,11 +61,13 @@ Built with SharePoint Framework GA, Office Graph, React and Chart.JS
 Solution|Author(s)
 --------|---------
 react-modern-charts|Jeremy Coleman (MCP, PC Professional, Inc.)
+react-modern-charts|Peter Paul Kirschner ([@petkir_at](https://twitter.com/petkir_at))
 
 ## Version history
 
 Version|Date|Comments
 -------|----|--------
+1.0.0.3|July 30, 2020| Support for Managed Metadata Field(Single) as Label
 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

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

@@ -3,7 +3,7 @@
   "solution": {
     "name": "modern-charts-client-side-solution",
     "id": "f8a78a9a-a93e-4843-89e5-7b871d9b9fa2",
-    "version": "1.0.0.2",
+    "version": "1.0.0.3",
     "isDomainIsolated": false,
     "includeClientSideAssets": true
   },

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

@@ -1,45 +0,0 @@
-{
-  "$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
-  // before this config file is read (for example lint rules from the tslint-microsoft-contrib
-  // project). If true, this flag will deactivate any of these rules.
-  "removeExistingRules": true,
-  // When true, the TSLint task is configured with some default TSLint "rules.":
-  "useDefaultConfigAsBase": false,
-  // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
-  // which are active, other than the list of rules below.
-  "lintConfig": {
-    // Opt-in to Lint rules which help to eliminate bugs in JavaScript
-    "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-case": true,
-      "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,
-      "valid-typeof": true,
-      "variable-name": false,
-      "whitespace": false
-    }
-  }
-}

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

@@ -20,6 +20,7 @@ export interface ChartConfiguration {
   theme: string;
   bgColors: Array<string>;
   hoverColors: Array<string>;
+  hasTaxField?: boolean;
 }
 
 export interface IModernChartsWebPartProps {
@@ -50,4 +51,4 @@ export interface MChart {
   labels: Array<string>;
   config: ChartConfiguration;
   key: number;
-}
+}

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

@@ -31,6 +31,11 @@ export interface ISPList {
   Id: string;
 }
 
+export interface IFieldProperty extends IPropertyPaneDropdownOption {
+  fieldtype: string;
+}
+
+
 export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernChartsWebPartProps> {
 
   private reactCharts: React.ReactElement<IModernChartsProps>;
@@ -205,12 +210,29 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
     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]);
+        //if term use VAlue
+        chLabels['labels'].push(this.getLabel(item, config.col1));
       }
     });
     return chLabels;
   }
 
+  private getLabel(item: Object, col: string) {
+    if (!!item[col] && !!item[col]['WssId'] && !!item["TaxCatchAll"] && item["TaxCatchAll"].length > 0) {
+      //Filter because you can have more Fields from this type to select the right value
+      const wssid: number = item[col]['WssId'];
+      const terms = (item["TaxCatchAll"]).filter((x) => x.ID === wssid);
+      if (!!terms && terms.length > 0) {
+        return terms[0].Term;
+      }
+      return 'TermLabel not Found';
+    }
+    //TODO HyperLink
+    //lookup user
+
+    return item[col];
+  }
+
   private getValues(data: Array<Object>, unique: Array<string>, config: ChartConfiguration): Array<Array<any>> {
 
     const values: Object = {};
@@ -270,6 +292,21 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
       this.properties.chartConfig[pPathInd].bgColors = newTheme['bgColors'];
       this.properties.chartConfig[pPathInd].hoverColors = newTheme['hoverColors'];
     }
+    if (pPath === 'col1' && (newValue != oldValue)) {
+      this.properties.chartConfig[pPathInd].hasTaxField = false;
+      if (!!newValue
+        && !!this.properties.chartConfig[pPathInd].columns
+        && this.properties.chartConfig[pPathInd].columns.length > 0
+      ) {
+        const selects = this.properties.chartConfig[pPathInd].columns.filter(f => f.key === newValue);
+        if (selects.length > 0) {
+          const selected = selects[0];
+
+          this.properties.chartConfig[pPathInd].hasTaxField = selected.fieldtype === 'TaxonomyFieldType';
+        }
+      }
+    }
+    //col1
     this.context.propertyPane.refresh();
     this.render();
   }
@@ -457,7 +494,14 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
   }
 
   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)
+    const urlparttax = '&$select=*,TaxCatchAll/Term,TaxCatchAll/ID&$expand=TaxCatchAll';
+    const resturl = `/_api/web/lists/GetByTitle(\'${chartConfig['list']}\')/items?$orderby=Id desc&$limit=10&$top=${this.properties.maxResults}`;
+    let requesturl = chartConfig['dataurl'] + resturl;
+
+    if (!!chartConfig['hasTaxField']) {
+      requesturl = requesturl + urlparttax;
+    }
+    return this.context.spHttpClient.get(requesturl, SPHttpClient.configurations.v1)
       .then((response: SPHttpClientResponse) => {
         return response.json();
       });
@@ -480,10 +524,14 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
 
   private _updateListColumns(siteUrl: string, listName: string, _chartConfig: ChartConfiguration): void {
     this._getListColumns(listName, siteUrl).then((response) => {
-      var respLists: IPropertyPaneDropdownOption[] = [];
+      var respLists: IFieldProperty[] = [];
       console.log(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'],
+          fieldtype: response.value[_key]['TypeAsString']
+        });
       }
       this._columnOptions = respLists;
       _chartConfig.columns = respLists;

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

@@ -52,19 +52,19 @@ export default class ModernCharts extends React.Component<IModernChartsProps, {}
         tChart = <Doughnut data={data} options={options} />;
         return tChart;
       case 'line':
-        tChart = <Line data={data} options={options} />;
+        debugger;
-        return tChart;
+        return  <Line data={data} options={options} legend={{ display: false }} />;
       case 'pie':
         tChart = <Pie data={data} options={options} />;
         return tChart;
       case 'bar':
-        tChart = <Bar data={data} options={options} />;
+        tChart = <Bar data={data} options={options} legend={{ display: false }} />;
         return tChart;
       case 'horizontalbar':
-        tChart = <HorizontalBar data={data} options={options} />;
+        tChart = <HorizontalBar data={data} options={options} legend={{ display: false }} />;
         return tChart;
       case 'radar':
-        tChart = <Radar data={data} options={options} />;
+        tChart = <Radar data={data} options={options} legend={{ display: false }} />;
         return tChart;
       case 'polar':
         tChart = <Polar data={data} options={options} />;