diff --git a/samples/react-modern-charts/README.md b/samples/react-modern-charts/README.md index b2c09a433..8ff3e983d 100644 --- a/samples/react-modern-charts/README.md +++ b/samples/react-modern-charts/README.md @@ -47,9 +47,17 @@ Current Data Functions: Built with SharePoint Framework GA, Office Graph, React and Chart.JS -## Used SharePoint Framework Version -![version](https://img.shields.io/badge/version-1.10.0-green.svg) +## Compatibility + +![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) +![Node.js LSTS 8 | LTS 10](https://img.shields.io/badge/Node.js-LTS%208%20%7C%20LTS%20v10-green.svg) +![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) +![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower") +![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") +![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) +![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) + ## Applies to @@ -60,24 +68,20 @@ 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)) +react-modern-charts|[Jeremy Coleman](https://github.com/jcoleman-pcprofessional) (MCP, PC Professional, Inc.) +react-modern-charts|[Peter Paul Kirschner](https://github.com/petkir) ([@petkir_at](https://twitter.com/petkir_at)) +react-modern-charts|[Abderahman Moujahid](https://github.com/Abderahman88) ## Version history Version|Date|Comments -------|----|-------- +1.0.0.4|October 19, 2021| Fix values of managed metadata fields 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 -## 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.** - ---- - ## Prerequisites - SharePoint Online tenant with Office Graph content-enabled @@ -99,4 +103,18 @@ Sample Web Parts in this solution illustrate the following concepts on top of th - passing Web Part properties to React components - building dynamic web part properties +## 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.** + +## Help + +We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues. + +If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-modern-charts&authors=@jcoleman-pcprofessional%20@petkir%20@Abderahman88&title=react-modern-charts%20-%20). + +For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-modern-charts&authors=@jcoleman-pcprofessional%20@petkir%20@Abderahman88&title=react-modern-charts%20-%20). + +Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-modern-charts&authors=@jcoleman-pcprofessional%20@petkir%20@Abderahman88&title=react-modern-charts%20-%20). + ![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-modern-charts) diff --git a/samples/react-modern-charts/assets/sample.json b/samples/react-modern-charts/assets/sample.json index 281b4476f..2a755fdef 100644 --- a/samples/react-modern-charts/assets/sample.json +++ b/samples/react-modern-charts/assets/sample.json @@ -9,7 +9,7 @@ "This web part uses the Chart.js library to visualize SharePoint list data." ], "creationDateTime": "2020-07-30", - "updateDateTime": "2020-07-30", + "updateDateTime": "2021-10-19", "products": [ "SharePoint", "Office" diff --git a/samples/react-modern-charts/config/package-solution.json b/samples/react-modern-charts/config/package-solution.json index 614187a2b..2f1980bf1 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.3", + "version": "1.0.0.4", "isDomainIsolated": false, "includeClientSideAssets": true }, diff --git a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts b/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts index bf92524ce..bff8e8cc2 100644 --- a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts +++ b/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts @@ -208,8 +208,11 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart, config: ChartConfiguration): Object { const chLabels: Object = { unique: [], labels: [] }; data.forEach((item) => { - if (chLabels['unique'].indexOf(item[config.unique]) == -1 && item[config.unique] != null && item[config.unique] != "") { - chLabels['unique'].push(item[config.unique]); + var uniqueItem = item[config.unique]; + var isTaxonomyField = item[config.unique].hasOwnProperty('TermGuid'); + + if ((isTaxonomyField ? !chLabels['unique'].some(field => field['TermGuid'] === uniqueItem['TermGuid']) : chLabels['unique'].indexOf(uniqueItem) == -1) && uniqueItem != null && uniqueItem != "") { + chLabels['unique'].push(uniqueItem); //if term use VAlue chLabels['labels'].push(this.getLabel(item, config.col1)); } @@ -234,14 +237,13 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart, unique: Array, config: ChartConfiguration): Array> { - const values: Object = {}; const vals: Array> = [[]]; unique.forEach((col, i) => { values[col] = []; vals[i] = []; data.forEach((item, _i) => { - if (item[config.unique] == col) { + if (item[config.unique].hasOwnProperty('TermGuid') ? item[config.unique]["TermGuid"] == col["TermGuid"] : item[config.unique] == col) { vals[i].push(item[config.col2]); } }); 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 ca7aece32..bf12c447b 100644 --- a/samples/react-modern-charts/src/webparts/modernCharts/components/ModernCharts.tsx +++ b/samples/react-modern-charts/src/webparts/modernCharts/components/ModernCharts.tsx @@ -1,72 +1,96 @@ -import * as React from 'react'; -import styles from './ModernCharts.module.scss'; -import { IModernChartsProps } from '../IModernChartsWebPartProps'; -import { MChart } from '../IModernChartsWebPartProps'; -import 'chart.js'; -import { Doughnut } from 'react-chartjs-2'; -import { Line } from 'react-chartjs-2'; -import { Pie } from 'react-chartjs-2'; -import { Bar } from 'react-chartjs-2'; -import { HorizontalBar } from 'react-chartjs-2'; -import { Radar } from 'react-chartjs-2'; -import { Polar } from 'react-chartjs-2'; -import ChartOptions from '../ChartOptions'; +import * as React from "react"; +import styles from "./ModernCharts.module.scss"; +import { IModernChartsProps } from "../IModernChartsWebPartProps"; +import { MChart } from "../IModernChartsWebPartProps"; +import "chart.js"; +import { Doughnut } from "react-chartjs-2"; +import { Line } from "react-chartjs-2"; +import { Pie } from "react-chartjs-2"; +import { Bar } from "react-chartjs-2"; +import { HorizontalBar } from "react-chartjs-2"; +import { Radar } from "react-chartjs-2"; +import { Polar } from "react-chartjs-2"; +import ChartOptions from "../ChartOptions"; import { DocumentCard, DocumentCardTitle, DocumentCardLocation, DocumentCardPreview, - IDocumentCardPreviewProps -} from 'office-ui-fabric-react/lib/DocumentCard'; - -export default class ModernCharts extends React.Component { + IDocumentCardPreviewProps, +} from "office-ui-fabric-react/lib/DocumentCard"; +export default class ModernCharts extends React.Component< + IModernChartsProps, + {} +> { public render(): JSX.Element { - const charts: JSX.Element[] = this.props.charts.map((chart: MChart, i: number) => { - return ( - -
- {this.chart(ChartOptions.Data(chart), ChartOptions.Options(), chart.config.type)} -
- - - - ); - }); - - return ( -
-
- {charts} -
-
-
+ const charts: JSX.Element[] = this.props.charts.map( + (chart: MChart, i: number) => { + return ( + +
+ {this.chart( + ChartOptions.Data(chart), + ChartOptions.Options(), + chart.config.type + )} +
+ + + + ); + } ); + return ( +
+
{charts}
+
+
+ ); } public chart(data: Object, options: Object, type: string) { var tChart: any; switch (type) { - case 'doughnut': + case "doughnut": tChart = ; return tChart; - case 'line': - debugger; - return ; - case 'pie': + case "line": + return ( + + ); + case "pie": tChart = ; return tChart; - case 'bar': - tChart = ; + case "bar": + tChart = ( + + ); return tChart; - case 'horizontalbar': - tChart = ; + case "horizontalbar": + tChart = ( + + ); return tChart; - case 'radar': - tChart = ; + case "radar": + tChart = ( + + ); return tChart; - case 'polar': + case "polar": tChart = ; return tChart; default: