From e02c3d111a6de7e2b2f469fd90cc1ffcbb2c6c62 Mon Sep 17 00:00:00 2001 From: Peter Paul Kirschner Date: Mon, 27 Jul 2020 23:04:03 +0200 Subject: [PATCH 1/4] added tax support --- .../react-modern-charts/config/tslint.json | 45 -------------- .../modernCharts/IModernChartsWebPartProps.ts | 3 +- .../modernCharts/ModernChartsWebPart.ts | 61 +++++++++++++++++-- 3 files changed, 58 insertions(+), 51 deletions(-) delete mode 100644 samples/react-modern-charts/config/tslint.json diff --git a/samples/react-modern-charts/config/tslint.json b/samples/react-modern-charts/config/tslint.json deleted file mode 100644 index e5b8e388c..000000000 --- a/samples/react-modern-charts/config/tslint.json +++ /dev/null @@ -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 - } - } -} diff --git a/samples/react-modern-charts/src/webparts/modernCharts/IModernChartsWebPartProps.ts b/samples/react-modern-charts/src/webparts/modernCharts/IModernChartsWebPartProps.ts index edb1fc318..e877f589a 100644 --- a/samples/react-modern-charts/src/webparts/modernCharts/IModernChartsWebPartProps.ts +++ b/samples/react-modern-charts/src/webparts/modernCharts/IModernChartsWebPartProps.ts @@ -20,6 +20,7 @@ export interface ChartConfiguration { theme: string; bgColors: Array; hoverColors: Array; + hasTaxField?: boolean; } export interface IModernChartsWebPartProps { @@ -50,4 +51,4 @@ export interface MChart { labels: Array; config: ChartConfiguration; key: number; -} \ No newline at end of file +} diff --git a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts b/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts index 347c711c7..ce8610ed7 100644 --- a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts +++ b/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 { private reactCharts: React.ReactElement; @@ -205,12 +210,30 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart { 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) { + debugger; + if(item[col]!== null && item[col]['WssId']!==null && item["TaxCatchAll"].length > 0) { + //Filter because zou 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 !== null && terms.lenght >0) { + return terms[0].Term; + } + return 'TermLabel not Found'; + } + //TODO HyperLink + //lookup user + + return item[col]; + } + private getValues(data: Array, unique: Array, config: ChartConfiguration): Array> { const values: Object = {}; @@ -270,6 +293,21 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart 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(); } @@ -450,14 +488,23 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart { - 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`, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { return response.json(); }); } 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; + debugger; + + + if(!!chartConfig['hasTaxField']) { + requesturl = requesturl + urlparttax; + } + return this.context.spHttpClient.get( requesturl, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { return response.json(); }); @@ -480,10 +527,14 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart { - 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; From 85f92362f5d3215d17a91aa27ef5f63004fe6817 Mon Sep 17 00:00:00 2001 From: Peter Paul Kirschner Date: Thu, 30 Jul 2020 11:53:25 +0200 Subject: [PATCH 2/4] termsupport --- .../src/webparts/modernCharts/ModernChartsWebPart.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts b/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts index ce8610ed7..bccdfcfa0 100644 --- a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts +++ b/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts @@ -218,12 +218,11 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart 0) { - //Filter because zou can have more Fields from this type to select the right value + 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 !== null && terms.lenght >0) { + if(!!terms && terms.length >0) { return terms[0].Term; } return 'TermLabel not Found'; @@ -488,7 +487,7 @@ const selected=selects[0]; } private _getListColumns(listName: string, listsite: string): Promise { - return this.context.spHttpClient.get(listsite + `/_api/web/lists/GetByTitle('${listName}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false`, 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) => { return response.json(); }); @@ -498,8 +497,6 @@ const selected=selects[0]; 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; - debugger; - if(!!chartConfig['hasTaxField']) { requesturl = requesturl + urlparttax; From f1315df546de3074592fd6a28b8243323bca0da4 Mon Sep 17 00:00:00 2001 From: Peter Paul Kirschner Date: Thu, 30 Jul 2020 12:08:43 +0200 Subject: [PATCH 3/4] Version and Readme --- samples/react-modern-charts/README.md | 2 ++ samples/react-modern-charts/config/package-solution.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/samples/react-modern-charts/README.md b/samples/react-modern-charts/README.md index f85d935a7..8cfc4919b 100644 --- a/samples/react-modern-charts/README.md +++ b/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 diff --git a/samples/react-modern-charts/config/package-solution.json b/samples/react-modern-charts/config/package-solution.json index 716db138f..614187a2b 100644 --- a/samples/react-modern-charts/config/package-solution.json +++ b/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 }, From d8adc003ae9350a1a76cd5a43c266023018a41e3 Mon Sep 17 00:00:00 2001 From: Peter Paul Kirschner Date: Thu, 30 Jul 2020 14:12:53 +0200 Subject: [PATCH 4/4] legend options --- .../modernCharts/ModernChartsWebPart.ts | 44 +++++++++---------- .../modernCharts/components/ModernCharts.tsx | 10 ++--- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts b/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts index bccdfcfa0..bf92524ce 100644 --- a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts +++ b/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts @@ -31,7 +31,7 @@ export interface ISPList { Id: string; } -export interface IFieldProperty extends IPropertyPaneDropdownOption{ +export interface IFieldProperty extends IPropertyPaneDropdownOption { fieldtype: string; } @@ -211,18 +211,18 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart 0) { + 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) { + 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'; @@ -292,20 +292,20 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart 0 - ) { - const selects=this.properties.chartConfig[pPathInd].columns.filter(f=> f.key === newValue); - if(selects.length >0) { -const selected=selects[0]; + 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'; + this.properties.chartConfig[pPathInd].hasTaxField = selected.fieldtype === 'TaxonomyFieldType'; + } + } } - }} //col1 this.context.propertyPane.refresh(); this.render(); @@ -498,10 +498,10 @@ const selected=selects[0]; 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']) { + if (!!chartConfig['hasTaxField']) { requesturl = requesturl + urlparttax; } - return this.context.spHttpClient.get( requesturl, SPHttpClient.configurations.v1) + return this.context.spHttpClient.get(requesturl, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { return response.json(); }); @@ -529,7 +529,7 @@ const selected=selects[0]; for (var _key in response.value) { respLists.push({ key: response.value[_key]['InternalName'], - text: response.value[_key]['Title'] , + text: response.value[_key]['Title'], fieldtype: response.value[_key]['TypeAsString'] }); } diff --git a/samples/react-modern-charts/src/webparts/modernCharts/components/ModernCharts.tsx b/samples/react-modern-charts/src/webparts/modernCharts/components/ModernCharts.tsx index 9a18f2d3f..ca7aece32 100644 --- a/samples/react-modern-charts/src/webparts/modernCharts/components/ModernCharts.tsx +++ b/samples/react-modern-charts/src/webparts/modernCharts/components/ModernCharts.tsx @@ -52,19 +52,19 @@ export default class ModernCharts extends React.Component; return tChart; case 'line': - tChart = ; - return tChart; + debugger; + return ; case 'pie': tChart = ; return tChart; case 'bar': - tChart = ; + tChart = ; return tChart; case 'horizontalbar': - tChart = ; + tChart = ; return tChart; case 'radar': - tChart = ; + tChart = ; return tChart; case 'polar': tChart = ;