Added ChartControl sample

spfx-pnp-controls/config/config.json

@@ -65,6 +65,22 @@
           "manifest": "./src/webparts/playWithDragDropFiles/PlayWithDragDropFilesWebPart.manifest.json"
         }
       ]
+    },
+    "play-with-monaco-editor-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/playWithMonacoEditor/PlayWithMonacoEditorWebPart.js",
+          "manifest": "./src/webparts/playWithMonacoEditor/PlayWithMonacoEditorWebPart.manifest.json"
+        }
+      ]
+    },
+    "play-with-chart-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/playWithChart/PlayWithChartWebPart.js",
+          "manifest": "./src/webparts/playWithChart/PlayWithChartWebPart.manifest.json"
+        }
+      ]
     }
   },
   "externals": {},
@@ -77,6 +93,8 @@
     "PlayWithPaginationWebPartStrings": "lib/webparts/playWithPagination/loc/{locale}.js",
     "PlayWithPlaceholderWebPartStrings": "lib/webparts/playWithPlaceholder/loc/{locale}.js",
     "PlayWithSecurityTrimmedControlWebPartStrings": "lib/webparts/playWithSecurityTrimmedControl/loc/{locale}.js",
-    "PlayWithDragDropFilesWebPartStrings": "lib/webparts/playWithDragDropFiles/loc/{locale}.js"
+    "PlayWithDragDropFilesWebPartStrings": "lib/webparts/playWithDragDropFiles/loc/{locale}.js",
+    "PlayWithMonacoEditorWebPartStrings": "lib/webparts/playWithMonacoEditor/loc/{locale}.js",
+    "PlayWithChartWebPartStrings": "lib/webparts/playWithChart/loc/{locale}.js"
   }
 }

spfx-pnp-controls/package.json

@@ -19,7 +19,7 @@
     "@pnp/graph": "^3.3.2",
     "@pnp/logging": "^3.3.2",
     "@pnp/sp": "^3.3.2",
-    "@pnp/spfx-controls-react": "3.7.2",
+    "@pnp/spfx-controls-react": "^3.8.0",
     "office-ui-fabric-react": "7.174.1",
     "react": "16.13.1",
     "react-dom": "16.13.1"

spfx-pnp-controls/src/webparts/playWithChart/PlayWithChartWebPart.manifest.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "f0f0c856-3e9d-4ed6-a59b-524e90343256",
+  "alias": "PlayWithChartWebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
+  "supportsThemeVariants": true,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "PlayWithChart" },
+    "description": { "default": "PlayWithChart description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "PlayWithChart"
+    }
+  }]
+}

spfx-pnp-controls/src/webparts/playWithChart/PlayWithChartWebPart.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { Version } from '@microsoft/sp-core-library';
+import {
+  IPropertyPaneConfiguration,
+  PropertyPaneTextField
+} from '@microsoft/sp-property-pane';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+
+import * as strings from 'PlayWithChartWebPartStrings';
+import PlayWithChart from './components/PlayWithChart';
+import { IPlayWithChartProps } from './components/IPlayWithChartProps';
+
+export interface IPlayWithChartWebPartProps {
+  description: string;
+}
+
+export default class PlayWithChartWebPart extends BaseClientSideWebPart<IPlayWithChartWebPartProps> {
+
+  private _isDarkTheme: boolean = false;
+  private _environmentMessage: string = '';
+
+  protected onInit(): Promise<void> {
+    this._environmentMessage = this._getEnvironmentMessage();
+
+    return super.onInit();
+  }
+
+  public render(): void {
+    const element: React.ReactElement<IPlayWithChartProps> = React.createElement(
+      PlayWithChart,
+      {
+        description: this.properties.description,
+        isDarkTheme: this._isDarkTheme,
+        environmentMessage: this._environmentMessage,
+        hasTeamsContext: !!this.context.sdks.microsoftTeams,
+        userDisplayName: this.context.pageContext.user.displayName
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  private _getEnvironmentMessage(): string {
+    if (!!this.context.sdks.microsoftTeams) { // running in Teams
+      return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
+    }
+
+    return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
+  }
+
+  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
+    if (!currentTheme) {
+      return;
+    }
+
+    this._isDarkTheme = !!currentTheme.isInverted;
+    const {
+      semanticColors
+    } = currentTheme;
+    this.domElement.style.setProperty('--bodyText', semanticColors.bodyText);
+    this.domElement.style.setProperty('--link', semanticColors.link);
+    this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered);
+
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneTextField('description', {
+                  label: strings.DescriptionFieldLabel
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}

spfx-pnp-controls/src/webparts/playWithChart/components/IPlayWithChartProps.ts

@@ -0,0 +1,7 @@
+export interface IPlayWithChartProps {
+  description: string;
+  isDarkTheme: boolean;
+  environmentMessage: string;
+  hasTeamsContext: boolean;
+  userDisplayName: string;
+}

spfx-pnp-controls/src/webparts/playWithChart/components/PlayWithChart.module.scss

@@ -0,0 +1,34 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
+.playWithChart {
+  overflow: hidden;
+  padding: 1em;
+  color: "[theme:bodyText, default: #323130]";
+  color: var(--bodyText);
+  &.teams {
+    font-family: $ms-font-family-fallbacks;
+  }
+}
+
+.welcome {
+  text-align: center;
+}
+
+.welcomeImage {
+  width: 100%;
+  max-width: 420px;
+}
+
+.links {
+  a {
+    text-decoration: none;
+    color: "[theme:link, default:#03787c]";
+    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
+
+    &:hover {
+      text-decoration: underline;
+      color: "[theme:linkHovered, default: #014446]";
+      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
+    }
+  }
+}

spfx-pnp-controls/src/webparts/playWithChart/components/PlayWithChart.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import styles from './PlayWithChart.module.scss';
+import { IPlayWithChartProps } from './IPlayWithChartProps';
+import { escape } from '@microsoft/sp-lodash-subset';
+
+import { ChartControl, ChartPalette, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartData } from 'chart.js';
+
+const data: ChartData = {
+  labels: ['Italy', 'USA', 'France', 'Germany', 'UK', 'Spain'],
+  datasets: [
+    {
+      label: 'Sells',
+      data: [1250, 1450, 1200, 1400, 200, 680]
+    },
+    {
+      label: 'Customers',
+      data: [120, 150, 90, 50, 4, 15]
+    }
+  ]
+};
+
+export default class PlayWithChart extends React.Component<IPlayWithChartProps, {}> {
+  public render(): React.ReactElement<IPlayWithChartProps> {
+    const {
+      description,
+      isDarkTheme,
+      environmentMessage,
+      hasTeamsContext,
+      userDisplayName
+    } = this.props;
+
+    return (
+      <section className={`${styles.playWithChart} ${hasTeamsContext ? styles.teams : ''}`}>
+        <div className={styles.welcome}>
+          <h2>Here is a demo of the ChartControl PnP Reusable Control</h2>
+          <ChartControl 
+            type={ChartType.Pie}
+            palette={ChartPalette.OfficeColorful1}
+            datapromise={this._loadData()} 
+            />
+        </div>
+      </section>
+    );
+  }
+
+  private _loadData = async (): Promise<ChartData> => {
+    return new Promise<ChartData>((resolve, reject) => {
+      resolve(data);
+    });
+  }
+}

spfx-pnp-controls/src/webparts/playWithChart/loc/en-us.js

@@ -0,0 +1,11 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Description",
+    "BasicGroupName": "Group Name",
+    "DescriptionFieldLabel": "Description Field",
+    "AppLocalEnvironmentSharePoint": "The app is running on your local environment as SharePoint web part",
+    "AppLocalEnvironmentTeams": "The app is running on your local environment as Microsoft Teams app",
+    "AppSharePointEnvironment": "The app is running on SharePoint page",
+    "AppTeamsTabEnvironment": "The app is running in Microsoft Teams"
+  }
+});

spfx-pnp-controls/src/webparts/playWithChart/loc/mystrings.d.ts

@@ -0,0 +1,14 @@
+declare interface IPlayWithChartWebPartStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  DescriptionFieldLabel: string;
+  AppLocalEnvironmentSharePoint: string;
+  AppLocalEnvironmentTeams: string;
+  AppSharePointEnvironment: string;
+  AppTeamsTabEnvironment: string;
+}
+
+declare module 'PlayWithChartWebPartStrings' {
+  const strings: IPlayWithChartWebPartStrings;
+  export = strings;
+}

spfx-pnp-controls/src/webparts/playWithMonacoEditor/PlayWithMonacoEditorWebPart.manifest.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "ad390a2d-6f5a-4e65-be51-467eda28b18c",
+  "alias": "PlayWithMonacoEditorWebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
+  "supportsThemeVariants": true,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "PlayWithMonacoEditor" },
+    "description": { "default": "PlayWithMonacoEditor description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "PlayWithMonacoEditor"
+    }
+  }]
+}