ChartCard-FilesByContentType improvements

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<GraphFiles>;
-}
-
-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<GraphFiles> {
-    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<string> {
-    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<string> {
-    const list = await client.api("sites/"+siteId+"/lists").version('beta').filter("displayName eq '"+listTitle+"'").get();
-    return list.value[0].id;
-  }
-
-  private async _getClient(): Promise<MSGraphClientV3> {
-    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<GraphFiles>;
+}
+
+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<GraphFiles> {
+    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<string> {
+    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<string> {
+    const list = await client.api("sites/"+siteId+"/lists").version('beta').filter("displayName eq '"+listTitle+"'").get();
+    return list.value[0].id;
+  }
+
+  private async _getClient(): Promise<MSGraphClientV3> {
+    if (this.MSGraphClient === undefined)
+      this.MSGraphClient = await this.context.msGraphClientFactory.getClient("3");
+    return this.MSGraphClient;
+  }
 }

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<void> {
-    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<void> {
-    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;
   }
 
 

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,
         series: [{
-            data: fileSeries,
+            data: this.state.filesNumberByCtP
         }]
+      },
+      footer: {
+        componentName: 'cardButton',
+        title: 'View Details',
+        action: {
+          type: 'QuickView',
+          parameters: {
+            view: QUICK_VIEW_REGISTRY_ID
+          }
+        }
       }
     });
   }

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;
-}
+export type File = {
+    "@odata.etag"?: string;
+    contentType: {
+        id: string;
+        name: string;
+    }
+};
+
+
+export type GraphFiles = {
+    "@odata.context"?: string;
+    value: File[];
+};