From be5cb61aef6ce448b19ea88fb3f8a7e924fa89cb Mon Sep 17 00:00:00 2001 From: a1mery <7100077+a1mery@users.noreply.github.com> Date: Thu, 3 Oct 2024 21:54:58 +0200 Subject: [PATCH 1/2] Code improvements --- .../src/adaptiveCardExtensions/FileService.ts | 94 +++++++++---------- ...FilesByContentTypeAdaptiveCardExtension.ts | 20 ++-- .../filesByContentType/cardView/CardView.ts | 27 ++++-- .../src/adaptiveCardExtensions/types.ts | 31 +++--- 4 files changed, 90 insertions(+), 82 deletions(-) diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/FileService.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/FileService.ts index d0b224e..62b82f8 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/FileService.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/FileService.ts @@ -1,48 +1,48 @@ -import { MSGraphClientV3 } from "@microsoft/sp-http"; -import { AdaptiveCardExtensionContext } from '@microsoft/sp-adaptive-card-extension-base'; -import { GraphFiles } from './types'; - - -export interface IFileService { - _getFiles(siteAddress: string, listTitle: string): Promise; -} - -export class FileService implements IFileService { - public context: AdaptiveCardExtensionContext; - private MSGraphClient: MSGraphClientV3; - - constructor(context: AdaptiveCardExtensionContext) { - this.context = context; - } - - public async _getFiles(siteAddress: string, listTitle: string): Promise { - let files: GraphFiles; - try{ - const client = await this._getClient(); - const siteId = await this._getSiteId(client, siteAddress); - const listId = await this._getListId(client, siteId, listTitle); - files = await client.api("sites/"+siteId+"/lists/"+listId+"/items").select("contentType").version('beta').get(); - } catch{ - files = {value:[]}; - } - return files; - } - - private async _getSiteId (client:MSGraphClientV3, siteAddress: string): Promise { - const hostname = siteAddress.split('/')[2]; - const serverRelativeUrl = siteAddress.split(hostname)[1]; - const siteId = await client.api("sites/"+hostname+":"+serverRelativeUrl).version('beta').get(); - return siteId.id; - } - - private async _getListId (client:MSGraphClientV3, siteId: string, listTitle: string): Promise { - const list = await client.api("sites/"+siteId+"/lists").version('beta').filter("displayName eq '"+listTitle+"'").get(); - return list.value[0].id; - } - - private async _getClient(): Promise { - if (this.MSGraphClient === undefined) - this.MSGraphClient = await this.context.msGraphClientFactory.getClient("3"); - return this.MSGraphClient; - } +import { MSGraphClientV3 } from "@microsoft/sp-http"; +import { AdaptiveCardExtensionContext } from '@microsoft/sp-adaptive-card-extension-base'; +import { GraphFiles } from './types'; + + +export interface IFileService { + _getFiles(siteAddress: string, listTitle: string): Promise; +} + +export class FileService implements IFileService { + public context: AdaptiveCardExtensionContext; + private MSGraphClient: MSGraphClientV3; + + constructor(context: AdaptiveCardExtensionContext) { + this.context = context; + } + + public async _getFiles(siteAddress: string, listTitle: string): Promise { + let files: GraphFiles; + try{ + const client = await this._getClient(); + const siteId = await this._getSiteId(client, siteAddress); + const listId = await this._getListId(client, siteId, listTitle); + files = await client.api("sites/"+siteId+"/lists/"+listId+"/items").select("contentType").version('beta').get(); + } catch{ + files = {value:[]}; + } + return files; + } + + private async _getSiteId (client:MSGraphClientV3, siteAddress: string): Promise { + const hostname = siteAddress.split('/')[2]; + const serverRelativeUrl = siteAddress.split(hostname)[1]; + const siteId = await client.api("sites/"+hostname+":"+serverRelativeUrl).version('beta').get(); + return siteId.id; + } + + private async _getListId (client:MSGraphClientV3, siteId: string, listTitle: string): Promise { + const list = await client.api("sites/"+siteId+"/lists").version('beta').filter("displayName eq '"+listTitle+"'").get(); + return list.value[0].id; + } + + private async _getClient(): Promise { + if (this.MSGraphClient === undefined) + this.MSGraphClient = await this.context.msGraphClientFactory.getClient("3"); + return this.MSGraphClient; + } } \ No newline at end of file diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/FilesByContentTypeAdaptiveCardExtension.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/FilesByContentTypeAdaptiveCardExtension.ts index 2ffb84e..6061edd 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/FilesByContentTypeAdaptiveCardExtension.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/FilesByContentTypeAdaptiveCardExtension.ts @@ -1,19 +1,19 @@ import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane'; -import { BaseAdaptiveCardExtension } from '@microsoft/sp-adaptive-card-extension-base'; +import { BaseAdaptiveCardExtension, IPieDataPoint } from '@microsoft/sp-adaptive-card-extension-base'; import { CardView } from './cardView/CardView'; import { FilesByContentTypePropertyPane } from './FilesByContentTypePropertyPane'; import { QuickView } from './quickView/QuickView'; import { FileService, IFileService } from '../FileService'; -import { GraphFiles, PieFileData } from '../types'; +import { GraphFiles } from '../types'; export interface IFilesByContentTypeAdaptiveCardExtensionProps { title: string; siteAddress: string; listTitle: string; - filesNumberByCtP: PieFileData[] } export interface IFilesByContentTypeAdaptiveCardExtensionState { + filesNumberByCtP: IPieDataPoint[]; } const CARD_VIEW_REGISTRY_ID: string = 'FilesByContentType_CARD_VIEW'; @@ -27,7 +27,9 @@ export default class FilesByContentTypeAdaptiveCardExtension extends BaseAdaptiv private _deferredPropertyPane: FilesByContentTypePropertyPane; public async onInit(): Promise { - this.state = {}; + this.state = { + filesNumberByCtP: [] + }; // registers the card view to be shown in a dashboard this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView()); // registers the quick view to open via QuickView action @@ -37,16 +39,20 @@ export default class FilesByContentTypeAdaptiveCardExtension extends BaseAdaptiv } private async retrieveFiles(): Promise { - let filesData: PieFileData[] = []; + const service: IFileService = new FileService(this.context); const allFiles: GraphFiles = await service._getFiles(this.properties.siteAddress, this.properties.listTitle); const ctNames: string[] = allFiles.value.map((file) => file.contentType.name); + + let filesData: IPieDataPoint[] = []; let uniqueNames = [...new Set(ctNames)]; uniqueNames.forEach(ctName => { let currentCtCount = allFiles.value.filter(file => file.contentType.name === ctName); - filesData.push({ name: ctName, total: currentCtCount.length }); + filesData.push({ x: ctName, y: currentCtCount.length }); + }) + this.setState({ + filesNumberByCtP: filesData }) - this.properties.filesNumberByCtP = filesData; } diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts index ced4318..dd55dce 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts @@ -3,7 +3,6 @@ import { IDataVisualizationCardViewParameters, IExternalLinkCardAction, IQuickViewCardAction, - IPieDataPoint, PieChartCardView, } from '@microsoft/sp-adaptive-card-extension-base'; import { @@ -12,31 +11,39 @@ import { QUICK_VIEW_REGISTRY_ID, } from '../FilesByContentTypeAdaptiveCardExtension'; -let fileSeries: IPieDataPoint[]= []; - export class CardView extends BaseComponentsCardView< IFilesByContentTypeAdaptiveCardExtensionProps, IFilesByContentTypeAdaptiveCardExtensionState, IDataVisualizationCardViewParameters > { + public get cardViewParameters(): IDataVisualizationCardViewParameters { - fileSeries = []; - this.properties.filesNumberByCtP.forEach(contentType =>{ - fileSeries.push({x: contentType.name, y: contentType.total}); - }); - this.properties.filesNumberByCtP = []; return PieChartCardView({ cardBar: { componentName: 'cardBar', title: this.properties.title }, + header: { + componentName: 'text', + text: this.properties.listTitle + }, body: { componentName: 'dataVisualization', dataVisualizationKind: 'pie', - isDonut: false, + isDonut: true, series: [{ - data: fileSeries, + data: this.state.filesNumberByCtP }] + }, + footer: { + componentName: 'cardButton', + title: 'View Details', + action: { + type: 'QuickView', + parameters: { + view: QUICK_VIEW_REGISTRY_ID + } + } } }); } diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/types.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/types.ts index 50fdd72..00437e3 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/types.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/types.ts @@ -1,18 +1,13 @@ -export type File = { - "@odata.etag"?: string; - contentType: { - id: string; - name: string; - } -}; - - -export type GraphFiles = { - "@odata.context"?: string; - value: File[]; -}; - -export type PieFileData ={ - name: string; - total: number; -} \ No newline at end of file +export type File = { + "@odata.etag"?: string; + contentType: { + id: string; + name: string; + } +}; + + +export type GraphFiles = { + "@odata.context"?: string; + value: File[]; +}; \ No newline at end of file From d02729c93a0030abc3d4a8c30f6fe38c8de6cc74 Mon Sep 17 00:00:00 2001 From: a1mery <7100077+a1mery@users.noreply.github.com> Date: Thu, 3 Oct 2024 21:57:30 +0200 Subject: [PATCH 2/2] set isDonut value --- .../filesByContentType/cardView/CardView.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts index dd55dce..bf88cf5 100644 --- a/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts +++ b/samples/ChartCard-FilesByContentType/src/adaptiveCardExtensions/filesByContentType/cardView/CardView.ts @@ -30,7 +30,7 @@ export class CardView extends BaseComponentsCardView< body: { componentName: 'dataVisualization', dataVisualizationKind: 'pie', - isDonut: true, + isDonut: false, series: [{ data: this.state.filesNumberByCtP }]