honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

legend options

This commit is contained in:
Peter Paul Kirschner 2020-07-30 14:12:53 +02:00
parent f1315df546
commit d8adc003ae
2 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,7 @@ export interface ISPList {
Id: string; Id: string;
} }
export interface IFieldProperty extends IPropertyPaneDropdownOption{ export interface IFieldProperty extends IPropertyPaneDropdownOption {
fieldtype: string; fieldtype: string;
} }
@ -211,18 +211,18 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
if (chLabels['unique'].indexOf(item[config.unique]) == -1 && item[config.unique] != null && item[config.unique] != "") { if (chLabels['unique'].indexOf(item[config.unique]) == -1 && item[config.unique] != null && item[config.unique] != "") {
chLabels['unique'].push(item[config.unique]); chLabels['unique'].push(item[config.unique]);
//if term use VAlue //if term use VAlue
chLabels['labels'].push(this.getLabel(item,config.col1)); chLabels['labels'].push(this.getLabel(item, config.col1));
} }
}); });
return chLabels; return chLabels;
} }
private getLabel(item: Object,col:string) { private getLabel(item: Object, col: string) {
if(!!item[col] && !!item[col]['WssId'] && !!item["TaxCatchAll"] && item["TaxCatchAll"].length > 0) { 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 //Filter because you can have more Fields from this type to select the right value
const wssid:number = item[col]['WssId']; const wssid: number = item[col]['WssId'];
const terms = (item["TaxCatchAll"]).filter((x) => x.ID === wssid ); const terms = (item["TaxCatchAll"]).filter((x) => x.ID === wssid);
if(!!terms && terms.length >0) { if (!!terms && terms.length > 0) {
return terms[0].Term; return terms[0].Term;
} }
return 'TermLabel not Found'; return 'TermLabel not Found';
@ -292,20 +292,20 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart<IModernCh
this.properties.chartConfig[pPathInd].bgColors = newTheme['bgColors']; this.properties.chartConfig[pPathInd].bgColors = newTheme['bgColors'];
this.properties.chartConfig[pPathInd].hoverColors = newTheme['hoverColors']; this.properties.chartConfig[pPathInd].hoverColors = newTheme['hoverColors'];
} }
if (pPath === 'col1' && (newValue != oldValue) ) if (pPath === 'col1' && (newValue != oldValue)) {
{
this.properties.chartConfig[pPathInd].hasTaxField = false; this.properties.chartConfig[pPathInd].hasTaxField = false;
if( !!newValue if (!!newValue
&& !!this.properties.chartConfig[pPathInd].columns && !!this.properties.chartConfig[pPathInd].columns
&& this.properties.chartConfig[pPathInd].columns.length > 0 && this.properties.chartConfig[pPathInd].columns.length > 0
) { ) {
const selects=this.properties.chartConfig[pPathInd].columns.filter(f=> f.key === newValue); const selects = this.properties.chartConfig[pPathInd].columns.filter(f => f.key === newValue);
if(selects.length >0) { if (selects.length > 0) {
const selected=selects[0]; const selected = selects[0];
this.properties.chartConfig[pPathInd].hasTaxField = selected.fieldtype ==='TaxonomyFieldType'; this.properties.chartConfig[pPathInd].hasTaxField = selected.fieldtype === 'TaxonomyFieldType';
}
}
} }
}}
//col1 //col1
this.context.propertyPane.refresh(); this.context.propertyPane.refresh();
this.render(); 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}`; const resturl = `/_api/web/lists/GetByTitle(\'${chartConfig['list']}\')/items?$orderby=Id desc&$limit=10&$top=${this.properties.maxResults}`;
let requesturl = chartConfig['dataurl'] + resturl; let requesturl = chartConfig['dataurl'] + resturl;
if(!!chartConfig['hasTaxField']) { if (!!chartConfig['hasTaxField']) {
requesturl = requesturl + urlparttax; requesturl = requesturl + urlparttax;
} }
return this.context.spHttpClient.get( requesturl, SPHttpClient.configurations.v1) return this.context.spHttpClient.get(requesturl, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => { .then((response: SPHttpClientResponse) => {
return response.json(); return response.json();
}); });
@ -529,7 +529,7 @@ const selected=selects[0];
for (var _key in response.value) { for (var _key in response.value) {
respLists.push({ respLists.push({
key: response.value[_key]['InternalName'], key: response.value[_key]['InternalName'],
text: response.value[_key]['Title'] , text: response.value[_key]['Title'],
fieldtype: response.value[_key]['TypeAsString'] fieldtype: response.value[_key]['TypeAsString']
}); });
} }

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

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