additional spacing added for teams client

samples/react-dashboards/README.md

@@ -198,6 +198,11 @@ All permissions are granted to the whole tenant and not to a specific applicatio
 - `f5c26e74-f226-4ae8-85f0-b4af0080ac9e` Application Insights API
 - `797f4846-ba00-4fd7-ba43-dac1f8f63013` Windows Azure Service Management API
 
+#### Developer resources
+
+- [Build your first app with SPFx (Teams)](https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode)
+- [Microsoft 365 Developer Proxy](https://github.com/microsoft/m365-developer-proxy)
+
 ## 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.**

samples/react-dashboards/config/package-solution.json

@@ -2,8 +2,9 @@
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
     "name": "Application Insights and Cost Management dashboards",
+    "iconPath": "assets/appLogo.png",
     "id": "09af0554-67db-4a65-baa6-872dee7117a8",
-    "version": "1.0.0.0",
+    "version": "1.0.1.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
@@ -16,14 +17,6 @@
         "resource": "Application Insights API",
         "scope": "user_impersonation"
       }
-      // {
-      //   "resource": "Microsoft Graph", //Microsoft Graph
-      //   "scope": "user_impersonation"
-      // },
-      // {
-      //   "resource": "Office 365 SharePoint Online", //Office 365 SharePoint Online
-      //   "scope": "user_impersonation"
-      // }
     ],
     "developer": {
       "name": "Kinga Kazala (ETHZ)",

samples/react-dashboards/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spfx-applicationinsights",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "engines": {
     "node": ">=16.13.0 <17.0.0"

samples/react-dashboards/src/common/ChartHelper.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { cloneDeep, merge, uniq } from "@microsoft/sp-lodash-subset";
 import { ChartType, PaletteGenerator } from "@pnp/spfx-controls-react";
-import { ChartData, ChartDataSets, ChartOptions, TimeUnit } from "chart.js";
 import stringsCommon from "CommonDasboardWebPartStrings";
+import { ChartData, ChartDataSets, ChartOptions, TimeUnit } from "chart.js";
 import moment from "moment";
 import { ColumnsInfo, DataTypesInfo } from "../components/InsightsChart/IInsightsChartProps";
 import ApiHelper from "./ApiHelper";
@@ -214,7 +214,6 @@ export default class ChartHelper {
                     }
                     dataSets.push(dataSet);
                 });
-                console.log(dataSets);
                 return {
                     datasets: dataSets
                 }

samples/react-dashboards/src/common/ComponentStyles.ts

@@ -7,8 +7,12 @@ const theme = (process.env.NODE_ENV !== 'production')
     })
     : getTheme();
 
-const padding4px = theme.spacing.s2;
+const spacing4px = theme.spacing.s2;
-const padding8px = theme.spacing.s1;
+const spacing8px = theme.spacing.s1;
+const spacing16px = theme.spacing.m;
+const spacing20px = theme.spacing.l1;
+// const spacing32px = theme.spacing.l2;
+
 const fontSmall = theme.fonts.small.fontSize;
 const minWidth=280;
 
@@ -21,7 +25,9 @@ const getColorRGBA = (color: string, opacity: string | number): string => {
     return `rgba(${col.r},${col.g},${col.b},${opacity})`;
 }
 
-const stackTokens: IStackTokens = { childrenGap: `${padding8px} ${padding8px}` }; //rowGap columnGap 8px 4px
+const teamsPadding = `0px ${spacing16px} 0px ${spacing20px}`
+
+const stackTokens: IStackTokens = { childrenGap: `${spacing8px} ${spacing8px}` }; //rowGap columnGap 8px 4px
 const stackStylesMain: Partial<IStackStyles> = {
     root: {
         backgroundColor: 'inherit'
@@ -40,8 +46,8 @@ const stackStylesDatePicker: Partial<IStackStyles> = {
         backgroundColor: theme.palette.neutralQuaternary,
         paddingTop: 1,
         paddingBottom: 1,
-        paddingLeft: padding8px,
+        paddingLeft: spacing8px,
-        paddingRight: padding8px
+        paddingRight: spacing8px
     },
 }
 
@@ -62,17 +68,17 @@ const stackItemStyles100: Partial<IStackItemStyles> = {
 }
 const stackItemStyles50: Partial<IStackItemStyles> = {
     root: {
-        width: `calc(50% - ${padding8px})`,
+        width: `calc(50% - ${spacing8px})`,
     }
 }
 const stackItemStyles66: Partial<IStackItemStyles> = {
     root: {
-        width: `calc(60% - ${padding4px})`,
+        width: `calc(60% - ${spacing4px})`,
     }
 }
 const stackItemStyles33: Partial<IStackItemStyles> = {
     root: {
-        width: `calc(30% - ${padding4px})`,
+        width: `calc(30% - ${spacing4px})`,
     }
 }
 
@@ -95,7 +101,7 @@ const pivotStylesDashboard: Partial<IPivotStyles> = {
         flexFlow:'wrap'
     },
     itemContainer: {
-        padding: padding8px,
+        padding: spacing8px,
         paddingTop:0,
         backgroundColor: theme.palette.neutralTertiaryAlt
     }
@@ -184,20 +190,8 @@ const colorPickerStyles: Partial<IChoiceGroupStyles> = {
 }
 
 export {
-    theme,
+    chartTheme, colorPickerStyles, dashboardStyles, datePickerStyles, disabledPickerStyle, getColorRGB,
-    stackTokens,
+    getColorRGBA, heatmapStyles, linkStyles, shimmerStyleChart, stackStyles,
-    heatmapStyles,
+    stackStylesMain, stackTokens, teamsPadding, theme, transparentTheme
-    datePickerStyles,
-    dashboardStyles,
-    stackStyles,
-    stackStylesMain,
-    shimmerStyleChart,
-    transparentTheme,
-    chartTheme,
-    disabledPickerStyle,
-    colorPickerStyles,
-    linkStyles,
-    getColorRGB,
-    getColorRGBA,
 };
 

samples/react-dashboards/src/webparts/applicationInsightsLogs/ApplicationInsightsLogsWebPart.ts

@@ -11,6 +11,7 @@ import { AppInsights, setLogger } from 'pnp-appinsights-listener';
 import * as React from 'react';
 import { ThemedPalette } from '../../common/ColorsHelper';
 import { CacheExpiration, IAppInsightsQuery, IAppInsightsWebPartProps } from '../../common/CommonProps';
+import { teamsPadding } from '../../common/ComponentStyles';
 import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper';
 import ApplicationInsightsLogs from './components/ApplicationInsightsLogs';
 import { IApplicationInsightsLogsProps } from './components/IApplicationInsightsLogsProps';
@@ -39,6 +40,7 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar
   }
 
   public render(): void {
+    let dashboard: React.ReactElement;
 
     const element: React.ReactElement<IApplicationInsightsLogsProps> = React.createElement(ApplicationInsightsLogs, {
       ...this.properties,
@@ -56,7 +58,14 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar
       onConfigureTimePicker: this._onConfigureTimePicker,
       onConfigureLayoutSettings: this._onConfigureLayoutSettings,
     });
-    ReactDom.render(element, this.domElement);
+
+    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
+      dashboard = React.createElement('div', { style: { padding: teamsPadding }}, element);
+    }
+    else{
+      dashboard=element
+    }
+    ReactDom.render(dashboard, this.domElement);
   }
   //#region WebPart Properties
   public _onPivotItemChange = (key: string): void => {
@@ -104,7 +113,6 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar
         text: CacheExpiration[value as keyof typeof CacheExpiration]
       };
     });
-    console.log(this.properties.cacheDuration)
 
     return {
       pages: [

samples/react-dashboards/src/webparts/costInsightsDashboard/CostInsightsDashboardWebPart.ts

@@ -8,6 +8,7 @@ import React from 'react';
 import * as ReactDom from 'react-dom';
 import { ThemedPalette } from '../../common/ColorsHelper';
 import { ICostManagementConfig, ICostManagementQuery, ICostManagementWebPartProps } from '../../common/CommonProps';
+import { teamsPadding } from '../../common/ComponentStyles';
 import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper';
 import CostInsightsDashboard from './components/CostInsightsDashboard';
 import { ICostInsightsDashboardProps } from './components/ICostInsightsDashboardProps';
@@ -36,6 +37,8 @@ export default class CostInsightsWebPart extends BaseClientSideWebPart<ICostMana
   }
 
   public render(): void {
+    let dashboard: React.ReactElement;
+
     const element: React.ReactElement<ICostInsightsDashboardProps> = React.createElement(
       CostInsightsDashboard,
       {
@@ -55,7 +58,13 @@ export default class CostInsightsWebPart extends BaseClientSideWebPart<ICostMana
         onConfigureLayoutSettings: this._onConfigureLayoutSettings,
       }
     );
-    ReactDom.render(element, this.domElement);
+    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
+      dashboard = React.createElement('div', { style: { padding: teamsPadding } }, element);
+    }
+    else {
+      dashboard = element
+    }
+    ReactDom.render(dashboard, this.domElement);
   }
   public _onPivotItemChange = (key: string): void => {
     this.properties.pivotKey = key