honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-03-02 01:39:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2082 from Abderahman88/patch-2077

Browse Source 
[react-modern-charts] Fix for managed metadata labels and values
This commit is contained in:
Hugo Bernier 2021-10-31 14:11:32 -04:00 committed by GitHub
commit 0d42363edb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 108 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
samples/react-modern-charts/README.md
View File

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

2
samples/react-modern-charts/assets/sample.json
View File

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

2
samples/react-modern-charts/config/package-solution.json
View File

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

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

@ -208,8 +208,11 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
private getUnique(data: Array<Object>, 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<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) => {
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]);
}
});

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

@ -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<IModernChartsProps, {}> {
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 (
<DocumentCard onClickHref='#' className={styles.docContainer + ' ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg' + chart.config.size} key={chart.key}>
<div className={styles.chartCard}>
{this.chart(ChartOptions.Data(chart), ChartOptions.Options(), chart.config.type)}
</div>
<DocumentCardLocation location={chart.config.description} />
<DocumentCardTitle title={chart.config.title} />
</DocumentCard>
);
});
return (
<div className={styles.chartjs + ' ms-Grid'}>
<div className={'ms-Grid-row'}>
{charts}
</div>
<div style={{ clear: 'both' }} />
</div>
const charts: JSX.Element[] = this.props.charts.map(
(chart: MChart, i: number) => {
return (
<DocumentCard
onClickHref="#"
className={
styles.docContainer +
" ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg" +
chart.config.size
}
key={chart.key}
>
<div className={styles.chartCard}>
{this.chart(
ChartOptions.Data(chart),
ChartOptions.Options(),
chart.config.type
)}
</div>
<DocumentCardLocation location={chart.config.description} />
<DocumentCardTitle title={chart.config.title} />
</DocumentCard>
);
}
);
return (
<div className={styles.chartjs + " ms-Grid"}>
<div className={"ms-Grid-row"}>{charts}</div>
<div style={{ clear: "both" }} />
</div>
);
}
public chart(data: Object, options: Object, type: string) {
var tChart: any;
switch (type) {
case 'doughnut':
case "doughnut":
tChart = <Doughnut data={data} options={options} />;
return tChart;
case 'line':
debugger;
return <Line data={data} options={options} legend={{ display: false }} />;
case 'pie':
case "line":
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} legend={{ display: false }} />;
case "bar":
tChart = (
<Bar data={data} options={options} legend={{ display: false }} />
);
return tChart;
case 'horizontalbar':
tChart = <HorizontalBar data={data} options={options} legend={{ display: false }} />;
case "horizontalbar":
tChart = (
<HorizontalBar
data={data}
options={options}
legend={{ display: false }}
/>
);
return tChart;
case 'radar':
tChart = <Radar data={data} options={options} legend={{ display: false }} />;
case "radar":
tChart = (
<Radar data={data} options={options} legend={{ display: false }} />
);
return tChart;
case 'polar':
case "polar":
tChart = <Polar data={data} options={options} />;
return tChart;
default: