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 }, 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..bf92524ce 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,29 @@ 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) { + 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, unique: Array, config: ChartConfiguration): Array> { const values: Object = {}; @@ -270,6 +292,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(); } @@ -457,7 +494,14 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart { return response.json(); }); @@ -480,10 +524,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; 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 = ;