Merge pull request #1650 from pnp/hb-chartcontrols-upgrade

Upgraded packages

samples/react-chartcontrol/README.md

@@ -168,9 +168,18 @@ This sample also demonstrates how to use time series for the X axis.
 
 This sample shows how to use X and Y coordinate data elements in a scatter chart.
 
-## Used SharePoint Framework Version
+## Compatibility
+
+![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11-green.svg)
+
+![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
+
+![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-red.svg)
+
+![Teams Incompatible](https://img.shields.io/badge/Teams-Incompatible-lightgrey.svg)
+
+![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg)
 
-![SPFx v1.11.0](https://img.shields.io/badge/SPFx-1.11.1-green.svg)
 
 ## Applies to
 
@@ -194,6 +203,7 @@ Version|Date|Comments
 1.0|January, 2019|Initial release
 1.1|July 02, 2020|Upgraded to SPFx 1.10.0
 1.2|December 04, 2020|Upgraded to SPFx 1.11.0 and Fluent UI 7.x
+1.3|December 13, 2020|Upgraded dependencies
 
 ## Disclaimer
 

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

@@ -3,7 +3,7 @@
   "solution": {
     "name": "react-chartcontrol-client-side-solution",
     "id": "fb9665fb-4455-4b7f-99ab-2195920871fd",
-    "version": "1.2.0.0",
+    "version": "1.3.0.0",
     "includeClientSideAssets": true,
     "developer": {
       "name": "Contoso",

samples/react-chartcontrol/package.json

@@ -1,7 +1,7 @@
 {
   "main": "lib/index.js",
   "name": "react-chartcontrol",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
@@ -22,11 +22,11 @@
     "@pnp/logging": "^1.2.8",
     "@pnp/odata": "^1.2.8",
     "@pnp/sp": "^1.2.8",
-    "@pnp/spfx-controls-react": "1.11.0",
+    "@pnp/spfx-controls-react": "^2.2.0",
-    "@pnp/spfx-property-controls": "^1.13.1",
+    "@pnp/spfx-property-controls": "^2.2.0",
-    "chartjs-plugin-streaming": "^1.7.1",
+    "chartjs-plugin-streaming": "^1.8.0",
-    "color": "^3.1.0",
+    "color": "^3.1.3",
-    "moment": "^2.23.0",
+    "moment": "^2.29.1",
     "patternomaly": "^1.3.2",
     "react": "16.8.5",
     "react-dom": "16.8.5"

samples/react-chartcontrol/src/services/ChartDataProvider/IChartDataProvider.ts

@@ -1,12 +1,14 @@
+import { ChartPoint } from 'chart.js';
+
 /**
  * Provides sample chart data. All returned results are randomized.
  * Any resemblance to winning lottery numbers is purely coincidental.
  */
 export default interface IChartDataProvider {
-  getMultiBubbleArrays(numDatasets: number, length: number): Promise<Array<Chart.ChartPoint[]>>;
+  getMultiBubbleArrays(numDatasets: number, length: number): Promise<Array<ChartPoint[]>>;
   getMultiDataset(numDatasets: number, length: number): Promise<Array<number[]>>;
   getNumberArray(length: number, waitduration?: number): Promise<number[]>;
-  getPointArray(length: number): Promise<Chart.ChartPoint[]>;
+  getPointArray(length: number): Promise<ChartPoint[]>;
-  getScatterArray(length: number): Promise<Chart.ChartPoint[]>;
+  getScatterArray(length: number): Promise<ChartPoint[]>;
   getSignedNumberArray(length: number): Promise<number[]>;
 }

samples/react-chartcontrol/src/services/ChartDataProvider/MockChartDataProvider.ts

@@ -1,4 +1,5 @@
 import IChartDataProvider from "./IChartDataProvider";
+import { ChartPoint } from 'chart.js';
 
 const FAKE_DELAY: number = 500;
 /**
@@ -20,16 +21,16 @@ export default class MockChartDataProvider implements IChartDataProvider {
 
   /**
    * Returns a multi-dataset array of points for a bubble chart
-   * @param numDatasets How many datesets to generate
+   * @param numDatasets How many datasets to generate
    * @param length How long should each dataset be?
    */
-  public getMultiBubbleArrays(numDatasets: number, length: number): Promise<Array<Chart.ChartPoint[]>> {
+  public getMultiBubbleArrays(numDatasets: number, length: number): Promise<Array<ChartPoint[]>> {
-    return new Promise<Array<Chart.ChartPoint[]>>((resolve) => {
+    return new Promise<Array<ChartPoint[]>>((resolve) => {
       // pretend we're getting the data from a service
       setTimeout(() => {
-        let dataSetArray: Array<Chart.ChartPoint[]> = [];
+        let dataSetArray: Array<ChartPoint[]> = [];
         for (let dsIndex = 0; dsIndex < numDatasets; dsIndex++) {
-          let bubbleArray: Chart.ChartPoint[] = [];
+          let bubbleArray: ChartPoint[] = [];
           for (let index = 0; index < length; index++) {
             bubbleArray.push({
               x: MockChartDataProvider.getRandomNumber(),
@@ -72,11 +73,11 @@ export default class MockChartDataProvider implements IChartDataProvider {
    * Gets an array of points to render on a chart requiring X, Y coordinates
    * @param length Length of the dataset to generate
    */
-  public getPointArray(length: number): Promise<Chart.ChartPoint[]> {
+  public getPointArray(length: number): Promise<ChartPoint[]> {
-    return new Promise<Chart.ChartPoint[]>((resolve) => {
+    return new Promise<ChartPoint[]>((resolve) => {
       // pretend we're getting the data from a service
       setTimeout(() => {
-        let numArray: Chart.ChartPoint[] = [];
+        let numArray: ChartPoint[] = [];
         for (let index = 0; index < length; index++) {
           numArray.push(
             {
@@ -94,11 +95,11 @@ export default class MockChartDataProvider implements IChartDataProvider {
    * Gets an array of points for a scatter chart
    * @param length Length of the dataset to generate
    */
-  public getScatterArray(length: number): Promise<Chart.ChartPoint[]> {
+  public getScatterArray(length: number): Promise<ChartPoint[]> {
-    return new Promise<Chart.ChartPoint[]>((resolve) => {
+    return new Promise<ChartPoint[]>((resolve) => {
       // pretend we're getting the data from a service
       setTimeout(() => {
-        let numArray: Chart.ChartPoint[] = [];
+        let numArray: ChartPoint[] = [];
         for (let index = 0; index < length; index++) {
           numArray.push(
             {

samples/react-chartcontrol/src/services/ListService/MockListService.ts

@@ -4,6 +4,7 @@ import { IListItem } from "./IListItem";
 import { ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
 import MockChartDataProvider from "../ChartDataProvider/MockChartDataProvider";
 import IChartDataProvider from "../ChartDataProvider/IChartDataProvider";
+import { ChartPoint } from 'chart.js';
 
 const DATA_COUNT: number = 7;
 
@@ -57,8 +58,8 @@ export class MockListService implements IListService {
     return new Promise<Array<IListItem>>((resolve, _reject) => {
       // we're using a mock service that returns random numbers.
       const dataProvider: IChartDataProvider = new MockChartDataProvider();
-      dataProvider.getMultiBubbleArrays(1, DATA_COUNT).then((dataSet: Array<Chart.ChartPoint[]>) => {
+      dataProvider.getMultiBubbleArrays(1, DATA_COUNT).then((dataSet: Array<ChartPoint[]>) => {
-        const listRows: Array<IListItem> = dataSet[0].map((value: Chart.ChartPoint, index: number) => {
+        const listRows: Array<IListItem> = dataSet[0].map((value: ChartPoint, index: number) => {
           const listRow: IListItem = {
             Id: `row_${index}`,
             Label: this._labels[index],
@@ -78,8 +79,8 @@ export class MockListService implements IListService {
     return new Promise<Array<IListItem>>((resolve, _reject) => {
       // we're using a mock service that returns random numbers.
       const dataProvider: IChartDataProvider = new MockChartDataProvider();
-      dataProvider.getScatterArray(DATA_COUNT).then((dataSet: Chart.ChartPoint[]) => {
+      dataProvider.getScatterArray(DATA_COUNT).then((dataSet: ChartPoint[]) => {
-        const listRows: Array<IListItem> = dataSet.map((value: Chart.ChartPoint, index: number) => {
+        const listRows: Array<IListItem> = dataSet.map((value: ChartPoint, index: number) => {
           const listRow: IListItem = {
             Id: `row_${index}`,
             Label: this._labels[index],

samples/react-chartcontrol/src/webparts/areaChartDemo/components/AreaChartDemo.tsx

@@ -5,6 +5,7 @@ import * as strings from 'AreaChartDemoWebPartStrings';
 
 // used to add a chart control
 import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartDataSets, ChartData, ChartOptions } from 'chart.js';
 
 // used to retrieve (fake) data from a (fake) service
 import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
@@ -65,7 +66,7 @@ export default class AreaChartDemo extends React.Component<IAreaChartDemoProps,
     } = this.state;
 
 
-    const data: Chart.ChartData = {
+    const data: ChartData = {
       labels:
         [
           'January', 'February', 'March', 'April', 'May', 'June', 'July'
@@ -84,7 +85,7 @@ export default class AreaChartDemo extends React.Component<IAreaChartDemoProps,
     };
 
     // set the options
-    const options: Chart.ChartOptions = {
+    const options: ChartOptions = {
       legend: {
         display: false,
       },
@@ -286,7 +287,7 @@ export default class AreaChartDemo extends React.Component<IAreaChartDemoProps,
     gradientFill.addColorStop(0, 'rgba(255, 99, 132, 0.5)');
     gradientFill.addColorStop(1, 'rgba(255, 255, 255, 0)');
 
-    let data: Chart.ChartDataSets = this._chartElem.getChart().data.datasets[0];
+    let data: ChartDataSets = this._chartElem.getChart().data.datasets[0];
     data.backgroundColor = gradientFill;
     this._chartElem.update();
   }

samples/react-chartcontrol/src/webparts/barChartDemo/components/BarChartDemo.tsx

@@ -7,6 +7,7 @@ import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataPr
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 
 import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartData } from 'chart.js';
 
 const DATA_LENGTH: number = 7;
 
@@ -52,12 +53,12 @@ export default class BarChartDemo extends React.Component<IBarChartDemoProps, IB
   * Loads data from a service.
   * This is where you would replace for your own code
   */
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
-    return new Promise<Chart.ChartData>((resolve, reject) => {
+    return new Promise<ChartData>((resolve, reject) => {
       // we're using a mock service that returns random numbers.
       const dataProvider: IChartDataProvider = new MockChartDataProvider();
       dataProvider.getNumberArray(DATA_LENGTH, 2000).then((dataSet: number[]) => {
-        const data: Chart.ChartData =
+        const data: ChartData =
         {
           labels: strings.ChartLabels,
           datasets: [

samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/BubbleChartDemo.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import styles from './BubbleChartDemo.module.scss';
 import { IBubbleChartDemoProps } from './IBubbleChartDemo.types';
 import * as strings from 'BubbleChartDemoWebPartStrings';
-import * as Color from 'color';
 
 // used to add a chart control
 import { ChartControl, ChartType, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartPoint, ChartData } from 'chart.js';
 
 // used to retrieve (fake) data from a (fake) service
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
@@ -153,13 +153,13 @@ export default class BubbleChartDemo extends React.Component<IBubbleChartDemoPro
    * Loads data from a service.
    * This is where you would replace for your own code
    */
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
-    return new Promise<Chart.ChartData>((resolve, reject) => {
+    return new Promise<ChartData>((resolve, reject) => {
       const dataProvider: IChartDataProvider = new MockChartDataProvider();
       dataProvider
         .getMultiBubbleArrays(DATSET_LENGTH, DATA_COUNT)  // we only need 5 data elements for this demo
-        .then((bubbleArrays: Array<Chart.ChartPoint[]>) => {
+        .then((bubbleArrays: Array<ChartPoint[]>) => {
-          const data: Chart.ChartData = {
+          const data: ChartData = {
             datasets: [{
               label: strings.DataSet1Label,
               backgroundColor: chartBackgroundColors[0],
@@ -226,8 +226,8 @@ export default class BubbleChartDemo extends React.Component<IBubbleChartDemoPro
     this._chartElem.update();
   }
 
-  private _generateData(): Chart.ChartPoint[] {
+  private _generateData(): ChartPoint[] {
-    const data: Chart.ChartPoint[] = [];
+    const data: ChartPoint[] = [];
 
     for (let i = 0; i < DATA_COUNT; ++i) {
       data.push({

samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.types.ts

@@ -2,6 +2,7 @@ import { INumberChartData, IBubbleChartData, IScatterChartData } from './control
 import { ChartType, ChartPalette } from '@pnp/spfx-controls-react/lib/ChartControl';
 import { DashType } from './controls/PropertyPaneDashSelector/components/DashSelector.types';
 import { DataSourceType, EasingType, CapType, JoinType } from './components/Chartinator.types';
+import { InteractionMode, PositionType, PointStyle } from 'chart.js';
 
 /**
  * There are a LOT of options to store with this web part.
@@ -33,7 +34,7 @@ export interface IChartinatorWebPartProps {
   dataValueField: string;
   dataYValueField: string;
   leftPadding: number;
-  legendPosition: Chart.PositionType | 'none';
+  legendPosition: PositionType | 'none';
   legendReversed: boolean;
   lineCurved: boolean;
   lineFill: string;
@@ -42,12 +43,12 @@ export interface IChartinatorWebPartProps {
   offsetGridLines: boolean;
   pointRadius: number;
   pointRotation: number;
-  pointStyle: Chart.PointStyle;
+  pointStyle: PointStyle;
   rightPadding: number;
   title: string;
   tooltipEnabled: boolean;
   tooltipIntersect: boolean;
-  tooltipMode: Chart.InteractionMode;
+  tooltipMode: InteractionMode;
   tooltipPosition: string;
   topPadding: number;
   xAxisLabelEnabled: boolean;

samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.module.scss

@@ -3,22 +3,8 @@
 
 .chartinator {
   color: inherit;
+
+  .webparttitle {
+    text-align: center;
+  }
 }
-
-
-// .propertyPaneAddButtonWithText {
-//   display: -webkit-box;
-//   display: -ms-flexbox;
-//   display: flex;
-//   -webkit-box-pack: justify;
-//   -ms-flex-pack: justify;
-//   justify-content: space-between;
-//   -webkit-box-align: center;
-//   -ms-flex-align: center;
-//   align-items: center;
-//   width: 100%;
-// }
-
-// .propertyPaneAddButton {
-//   text-align: left;
-// }

samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.tsx

@@ -4,11 +4,19 @@ import { IChartinatorProps } from './Chartinator.types';
 import * as strings from 'ChartinatorWebPartStrings';
 
 // used to add a chart control
-import { ChartControl, ChartType, ChartPalette, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import {
-import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
+  ChartScales,
+  PositionType,
+  ChartOptions,
+  InteractionMode,
+  ChartData,
+  ChartPoint,
+  ChartDataSets } from 'chart.js';
+
 import { IBubbleChartData, IScatterChartData, INumberChartData } from '../controls/PropertyFieldRepeatingData';
-import { ChartTitle } from '../controls/ChartTitle';
+import { WebPartTitle } from '@pnp/spfx-controls-react';
+
 import { DashStrokes } from '../controls/PropertyPaneDashSelector/components/DashSelector.types';
 
 // List methods to retrieve data
@@ -39,7 +47,7 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
     const { radialChart } = this.props;
 
     // Scales should not be defined for radial charts.
-    const chartScales: Chart.ChartScales = radialChart ? undefined : {
+    const chartScales: ChartScales = radialChart ? undefined : {
       yAxes: [{
         gridLines: {
           display: this.props.yAxisShowGridlines
@@ -94,10 +102,10 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
     }
 
     // set the legend position
-    const legendPosition: Chart.PositionType = this.props.legendPosition === 'none' ? 'top' : this.props.legendPosition as Chart.PositionType;
+    const legendPosition: PositionType = this.props.legendPosition === 'none' ? 'top' : this.props.legendPosition as PositionType;
 
     // set the options
-    const options: Chart.ChartOptions = {
+    const options: ChartOptions = {
       title: {
         display: false
       },
@@ -121,7 +129,7 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
       tooltips: {
         enabled: this.props.tooltipEnabled,
         intersect: this.props.tooltipIntersect,
-        mode: this.props.tooltipMode as Chart.InteractionMode,
+        mode: this.props.tooltipMode as InteractionMode,
         position: this.props.tooltipPosition
       },
       scales: chartScales
@@ -149,10 +157,16 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
 
     return (
       <div className={styles.chartinator}>
-        <ChartTitle displayMode={this.props.displayMode}
+        {/* <ChartTitle displayMode={this.props.displayMode}
           title={this.props.title}
           updateTitle={this.props.updateTitle}
           placeholder={strings.ChartTitlePlaceholder}
+        /> */}
+        <WebPartTitle displayMode={this.props.displayMode}
+          title={this.props.title}
+          updateProperty={this.props.updateTitle}
+          placeholder={strings.ChartTitlePlaceholder}
+          className={styles.webparttitle}
         />
         <ChartControl
           type={chartType}
@@ -177,7 +191,7 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
    * Loads data from a service.
    * This is where you would replace for your own code
    */
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
 
     const { data } = this.props;
 
@@ -194,9 +208,9 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
    * Loads data from a list or, if no data is provided,
    * from a mock list.
    */
-  private _loadListData = (): Promise<Chart.ChartData> => {
+  private _loadListData = (): Promise<ChartData> => {
     const { chartType } = this.props;
-    return new Promise<Chart.ChartData>((resolve, _reject) => {
+    return new Promise<ChartData>((resolve, _reject) => {
       let service: IListService;
 
       // If the data source is configured, get the data from the list
@@ -217,7 +231,7 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
         let dataItems = [];
         if (chartType === ChartType.Bubble) {
           dataItems = listItems.map((listItem: IListItem) => {
-            const dataItem: Chart.ChartPoint = {
+            const dataItem: ChartPoint = {
               x: listItem.Value,
               y: listItem.YValue,
               r: listItem.RValue
@@ -226,7 +240,7 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
           });
         } else if (chartType === ChartType.Scatter) {
           dataItems = listItems.map((listItem: IListItem) => {
-            const dataItem: Chart.ChartPoint = {
+            const dataItem: ChartPoint = {
               x: listItem.Value,
               y: listItem.YValue
             };
@@ -238,7 +252,7 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
           });
         }
 
-        const data: Chart.ChartData =
+        const data: ChartData =
         {
           labels: listItems.map((listItem: IListItem) => {
             return listItem.Label;
@@ -258,14 +272,14 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
     });
   }
 
-  private _loadManualData = (): Promise<Chart.ChartData> => {
+  private _loadManualData = (): Promise<ChartData> => {
     const { chartType } = this.props;
-    return new Promise<Chart.ChartData>((resolve, _reject) => {
+    return new Promise<ChartData>((resolve, _reject) => {
       const labels: string[] = this.props.data.map(dataRow => {
         return dataRow.name;
       });
 
-      let dataItems: Array<number | null | undefined> | Chart.ChartPoint[];
+      let dataItems: Array<number | null | undefined> | ChartPoint[];
 
       if (chartType === ChartType.Bubble) {
         dataItems = this.props.data.map((dataRow: IBubbleChartData) => {
@@ -289,7 +303,7 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
       }
 
 
-      const data: Chart.ChartData =
+      const data: ChartData =
       {
         labels: labels,
         datasets: [
@@ -306,9 +320,9 @@ export default class Chartinator extends React.Component<IChartinatorProps, {}>
     });
   }
 
-  private _addDataOptions = (data: Chart.ChartData): void => {
+  private _addDataOptions = (data: ChartData): void => {
     const { chartType } = this.props;
-    const primaryDataSet: Chart.ChartDataSets = data.datasets[0];
+    const primaryDataSet: ChartDataSets = data.datasets[0];
 
     if (primaryDataSet === undefined) {
       return;

samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.types.ts

@@ -3,7 +3,7 @@ import { DisplayMode } from '@microsoft/sp-core-library';
 import { ChartType, ChartPalette } from '@pnp/spfx-controls-react/lib/ChartControl';
 import { DashType } from "../controls/PropertyPaneDashSelector/components/DashSelector.types";
 import { WebPartContext } from "@microsoft/sp-webpart-base";
-
+import { PositionType, PointStyle, InteractionMode } from 'chart.js';
 export interface IChartinatorProps {
   animateRotate: boolean;
   animateScale: boolean;
@@ -31,7 +31,7 @@ export interface IChartinatorProps {
   dataYValueField: string;
   displayMode: DisplayMode;
   leftPadding: number;
-  legendPosition: Chart.PositionType | 'none';
+  legendPosition: PositionType | 'none';
   legendReversed: boolean;
   lineCurved: boolean;
   lineFill: string;
@@ -40,13 +40,13 @@ export interface IChartinatorProps {
   offsetGridLines: boolean;
   pointRadius: number;
   pointRotation: number;
-  pointStyle: Chart.PointStyle;
+  pointStyle: PointStyle;
   radialChart: boolean;
   rightPadding: number;
   title: string;
   tooltipEnabled: boolean;
   tooltipIntersect: boolean;
-  tooltipMode: Chart.InteractionMode;
+  tooltipMode: InteractionMode;
   tooltipPosition: string;
   topPadding: number;
   xAxisLabelEnabled: boolean;

samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.module.scss

@@ -1,63 +0,0 @@
-//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
-@import '~office-ui-fabric-react/dist/sass/References.scss';
-
-.chartTitle {
-  font-size: 14px;
-  font-weight: 100;
-  // margin-bottom: 0;
-  color: $ms-color-neutralPrimary;
-  text-align: center;
-
-  @media (min-width: 320px) {
-    font-size: 21px;
-  }
-
-  @media (min-width: 480px) {
-    font-size: 24px;
-  }
-
-  // Edit mode
-  textarea {
-    background-color: transparent;
-    border: none;
-    box-sizing: border-box;
-    color: inherit;
-    display: block;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    height: 36px;
-    line-height: inherit;
-    margin: 0;
-    outline: 0;
-    overflow: hidden;
-    resize: none;
-    text-align: inherit;
-    white-space: pre;
-    width: 100%;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-  }
-
-  textarea::-webkit-input-placeholder {
-    color:$ms-color-neutralTertiaryAlt;
-    }
-
-    textarea:-moz-placeholder { /* Firefox 18- */
-    color:$ms-color-neutralTertiaryAlt;
-    }
-
-    textarea::-moz-placeholder {  /* Firefox 19+ */
-    color:$ms-color-neutralTertiaryAlt;
-    }
-
-    textarea:-ms-input-placeholder {
-    color:$ms-color-neutralTertiaryAlt;
-    }
-
-  // View mode
-  span {
-    color: inherit;
-  }
-}

samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { DisplayMode } from '@microsoft/sp-core-library';
-import styles from './ChartTitle.module.scss';
-import { IChartTitleProps } from './ChartTitle.types';
-import { css } from "office-ui-fabric-react/lib/Utilities";
-
-/**
- * Chart Title component -- designed to mimic the Quick Chart title component.
- * Unfortunately, the PnP WebParttitle control doesn't allow you to specify a placeholder.
- * PR is coming up!
- */
-export class ChartTitle extends React.Component<IChartTitleProps, {}> {
-  /**
-   * Process the text area change
-   */
-  private _onChange = (event) => {
-    this.props.updateTitle(event.target.value);
-  }
-
-  /**
-   * Default React component render method
-   */
-  public render(): React.ReactElement<IChartTitleProps> {
-    if (this.props.title || this.props.displayMode === DisplayMode.Edit) {
-      return (
-        <div className={css(styles.chartTitle, this.props.className) }>
-          {
-            this.props.displayMode === DisplayMode.Edit && <textarea placeholder={this.props.placeholder} onChange={this._onChange} defaultValue={this.props.title}></textarea>
-          }
-          {
-            this.props.displayMode !== DisplayMode.Edit && this.props.title && <span role="heading" aria-level={2}>{this.props.title}</span>
-          }
-        </div>
-      );
-    }
-
-    return null;
-  }
-}

samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.types.ts

@@ -1,9 +0,0 @@
-import { DisplayMode } from '@microsoft/sp-core-library';
-
-export interface IChartTitleProps {
-  className?: string;
-  displayMode: DisplayMode;
-  placeholder?: string;
-  title: string;
-  updateTitle: (value: string) => void;
-}

samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/index.ts

@@ -1,2 +0,0 @@
-export * from './ChartTitle';
-export * from './ChartTitle.types';

samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import styles from './ComboChartDemo.module.scss';
 import { IComboChartDemoProps } from './IComboChartDemo.types';
 import * as strings from 'ComboChartDemoWebPartStrings';
+
 import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartData } from 'chart.js';
 
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
 import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
@@ -42,14 +44,14 @@ export default class ComboChartDemo extends React.Component<IComboChartDemoProps
  * Loads data from a service.
  * This is where you would replace for your own code
  */
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
-    return new Promise<Chart.ChartData>((resolve, reject) => {
+    return new Promise<ChartData>((resolve, reject) => {
       // we're using a mock service that returns random numbers.
       const dataProvider: IChartDataProvider = new MockChartDataProvider();
       dataProvider.getMultiDataset(DATASET_LENGTH, DATA_LENGTH)  // we only need 5 data elements for this demo
         .then((numberArrays: Array<number[]>) => {
 
-          const data: Chart.ChartData =
+          const data: ChartData =
           {
             labels: strings.ChartLabels,
             datasets: [{

samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx

@@ -10,6 +10,7 @@ import { Checkbox } from '@fluentui/react/lib/Checkbox';
 import * as pattern from 'patternomaly';
 
 import { ChartControl, ChartType, PaletteGenerator, ChartPalette } from "@pnp/spfx-controls-react/lib/ChartControl";
+import { ChartData } from 'chart.js';
 
 // There are 21 different patterns
 const NUM_PATTERNS: number = 21;
@@ -118,12 +119,12 @@ export default class DonutPatternsDemo extends React.Component<IDonutPatternsDem
 * Loads data from a service.
 * This is where you would replace for your own code
 */
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
-    return new Promise<Chart.ChartData>((resolve, _reject) => {
+    return new Promise<ChartData>((resolve, _reject) => {
       // we're using a mock service that returns random numbers.
       const dataProvider: IChartDataProvider = new MockChartDataProvider();
       dataProvider.getNumberArray(NUM_PATTERNS).then((dataSet: number[]) => {
-        const data: Chart.ChartData =
+        const data: ChartData =
         {
           labels: strings.ChartLabels,
           datasets: [

samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx

@@ -8,6 +8,7 @@ import { MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar';
 
 // used to add a chart control
 import { ChartControl, ChartType, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartData } from 'chart.js';
 
 // used to call GitHub
 import GitHubService from '../../../services/GitHubService/GitHubService';
@@ -192,8 +193,8 @@ private _contributionsLegendElem: HTMLElement = undefined;
    * Loads data from a service.
    * This is where you would replace for your own code
    */
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
-    return new Promise<Chart.ChartData>((resolve, reject) => {
+    return new Promise<ChartData>((resolve, reject) => {
       const { httpClient,
         repoOwner,
         repo } = this.props;

samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts

@@ -26,6 +26,7 @@ import * as moment from 'moment';
 
 // used to add a chart control
 import { PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartData } from 'chart.js';
 
 // Used to render placeholders and error messages
 import { Placeholder, IPlaceholderProps } from '@pnp/spfx-controls-react/lib/Placeholder';
@@ -169,7 +170,7 @@ export default class DynamicDataConsumerWebPart extends BaseClientSideWebPart<ID
       return undefined;
     }
 
-    this._loadAsyncData(contributorData).then((data: Chart.ChartData) => {
+    this._loadAsyncData(contributorData).then((data: ChartData) => {
       const element: React.ReactElement<IDynamicDataConsumerProps> = React.createElement(
         DynamicDataConsumer,
         {
@@ -231,14 +232,14 @@ export default class DynamicDataConsumerWebPart extends BaseClientSideWebPart<ID
    * Loads data from a service.
    * This is where you would replace for your own code
    */
-  private _loadAsyncData = (contributorData: IContributor): Promise<Chart.ChartData> => {
+  private _loadAsyncData = (contributorData: IContributor): Promise<ChartData> => {
     const {
       repoOwner,
       repo,
       alias
     } = contributorData;
 
-    return new Promise<Chart.ChartData>((resolve, reject) => {
+    return new Promise<ChartData>((resolve, reject) => {
       // Get the GitHub data provider
       const dataProvider: IGitHubService = new GitHubService();
 
@@ -272,7 +273,7 @@ export default class DynamicDataConsumerWebPart extends BaseClientSideWebPart<ID
           // Generate an orange semi transparent color
           const backgroundColor = PaletteGenerator.alpha(CHARTCOLOR, CHARTALPHA);
 
-          const data: Chart.ChartData = {
+          const data: ChartData = {
             datasets: [{
               label: strings.SeriesLabel,
               data: uniqueDateList,

samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.tsx

@@ -7,6 +7,7 @@ import * as strings from 'DynamicDataConsumerWebPartStrings';
 
 // used to add a chart control
 import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartOptions } from 'chart.js';
 
 // used to format date
 import * as moment from 'moment';
@@ -21,7 +22,7 @@ export default class DynamicDataConsumer extends React.Component<IDynamicDataCon
 
   public render(): React.ReactElement<IDynamicDataConsumerProps> {
     const { alias, data } = this.props;
-    const options: Chart.ChartOptions = {
+    const options: ChartOptions = {
       legend: {
         display: false // don't display a legend -- there's only one data point
       },

samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/IDynamicDataConsumerProps.ts

@@ -1,4 +1,6 @@
+import { ChartData } from 'chart.js';
+
 export interface IDynamicDataConsumerProps {
   alias: string;
-  data: Chart.ChartData;
+  data: ChartData;
 }

samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx

@@ -11,6 +11,7 @@ import {
 } from '@fluentui/react';
 
 import { ChartControl, ChartType,OFFICE_COLORFUL1, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartData } from 'chart.js';
 
 
 /**
@@ -127,11 +128,11 @@ export default class HorizontalBarDemo extends React.Component<IHorizontalBarDem
   * Loads data from a service.
   * This is where you would replace for your own code
   */
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
-    return new Promise<Chart.ChartData>((resolve, reject) => {
+    return new Promise<ChartData>((resolve, reject) => {
       const dataProvider: IChartDataProvider = new MockChartDataProvider();
       dataProvider.getMultiDataset(1, 7).then((dataSets: Array<number[]>) => {
-        const data: Chart.ChartData =
+        const data: ChartData =
         {
           labels: strings.ChartLabels,
           datasets: [
@@ -154,7 +155,7 @@ export default class HorizontalBarDemo extends React.Component<IHorizontalBarDem
    */
   private _removeData = (): void => {
     // Get a reference to the chart's data
-    const data: Chart.ChartData = this._chartElem.getChart().data;
+    const data: ChartData = this._chartElem.getChart().data;
 
     // Don't allow people to remove the last data
     if (data.datasets.length > 0) {

samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.tsx

@@ -6,6 +6,7 @@ import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataPr
 import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
 
 import { ChartControl, ChartType } from "@pnp/spfx-controls-react/lib/ChartControl";
+import { ChartData } from 'chart.js';
 
 
 /**
@@ -71,12 +72,12 @@ export default class LineChartDemo extends React.Component<ILineChartDemoProps,
   * Loads data from a service.
   * This is where you would replace for your own code
   */
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
-    return new Promise<Chart.ChartData>((resolve, reject) => {
+    return new Promise<ChartData>((resolve, reject) => {
       // we're using a mock service that returns random numbers.
       const dataProvider: IChartDataProvider = new MockChartDataProvider();
       dataProvider.getMultiDataset(2, 7).then((dataSets: Array<number[]>) => {
-        const data: Chart.ChartData =
+        const data: ChartData =
         {
           labels: strings.ChartLabels,
           datasets: [{

samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx

@@ -5,6 +5,7 @@ import * as strings from 'PieChartDemoWebPartStrings';
 
 // used to add a chart control
 import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartData } from 'chart.js';
 
 
 // used to retrieve (fake) data from a (fake) service
@@ -205,7 +206,7 @@ export default class PieChartDemo extends React.Component<IPieChartDemoProps, {}
    */
   private _handleAddDataset = () => {
     // get the chart's data
-    const data: Chart.ChartData = this._chartElem.getChart().data;
+    const data: ChartData = this._chartElem.getChart().data;
 
     // create a new dataset
     var newDataset = {
@@ -237,7 +238,7 @@ export default class PieChartDemo extends React.Component<IPieChartDemoProps, {}
    */
   private _handleRemoveDataset = () => {
     // get the data from the chart
-    const data: Chart.ChartData = this._chartElem.getChart().data;
+    const data: ChartData = this._chartElem.getChart().data;
 
     // splice the array and remove a dataset
     data.datasets.splice(0, 1);

samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx

@@ -5,7 +5,7 @@ import * as strings from 'PolarAreaDemoWebPartStrings';
 
 // used to add a chart control
 import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
-
+import { ChartData } from 'chart.js';
 
 // used to retrieve (fake) data from a (fake) service
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
@@ -132,8 +132,8 @@ export default class PolarAreaDemo extends React.Component<IPolarAreaDemoProps,
    * Loads data from a service.
    * This is where you would replace for your own code
    */
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
-    return new Promise<Chart.ChartData>((resolve, reject) => {
+    return new Promise<ChartData>((resolve, reject) => {
       // Get the mock data provider
       const dataProvider: IChartDataProvider = new MockChartDataProvider();
 
@@ -142,7 +142,7 @@ export default class PolarAreaDemo extends React.Component<IPolarAreaDemoProps,
         .getNumberArray(DATA_LENGTH)  // we only need 5 data elements for this demo
         .then((numbers: number[]) => {
           // get the chart's data
-          const data: Chart.ChartData = {
+          const data: ChartData = {
             labels: strings.ChartLabels,
             datasets: [
               {
@@ -181,7 +181,7 @@ export default class PolarAreaDemo extends React.Component<IPolarAreaDemoProps,
    */
   private _handleAddData = () => {
     // get the chart's data
-    const data: Chart.ChartData = this._chartElem.getChart().data;
+    const data: ChartData = this._chartElem.getChart().data;
 
     const dataSet = data.datasets[0];
 
@@ -206,7 +206,7 @@ export default class PolarAreaDemo extends React.Component<IPolarAreaDemoProps,
    * Removes the oldset dataset
    */
   private _handleRemoveData = () => {
-    const data: Chart.ChartData = this._chartElem.getChart().data;
+    const data: ChartData = this._chartElem.getChart().data;
 
     data.labels.pop();
 

samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.tsx

@@ -6,7 +6,7 @@ import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataPr
 import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
 
 import { ChartControl, ChartType } from "@pnp/spfx-controls-react/lib/ChartControl";
-
+import { ChartData } from 'chart.js';
 
 const DATASET_LENGTH: number = 2;
 const DATA_LENGTH: number = 7;
@@ -29,8 +29,8 @@ export default class RadarDemo extends React.Component<IRadarDemoProps, IRadarDe
     );
   }
 
-  private _loadAsyncData(): Promise<Chart.ChartData> {
+  private _loadAsyncData(): Promise<ChartData> {
-    return new Promise<Chart.ChartData>((resolve, reject) => {
+    return new Promise<ChartData>((resolve, reject) => {
         // Get the mock data provider
         const dataProvider: IChartDataProvider = new MockChartDataProvider();
 
@@ -39,7 +39,7 @@ export default class RadarDemo extends React.Component<IRadarDemoProps, IRadarDe
           .getMultiDataset(DATASET_LENGTH, DATA_LENGTH)
           .then((numbersArrays: Array<number[]>) => {
 
-            const data: Chart.ChartData =  {
+            const data: ChartData =  {
               labels: strings.ChartLabels,
               datasets: [{
                 label: strings.DataSet1Label,

samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx

@@ -5,10 +5,11 @@ import * as Color from 'color';
 import * as strings from 'RealtimePluginDemoWebPartStrings';
 
 // used to add a chart control
-import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { ChartControl } from '@pnp/spfx-controls-react/lib/ChartControl';
 
 // used to import the real-time plugin
 import * as realTime from 'chartjs-plugin-streaming';
+import { ChartData } from 'chart.js';
 
 // used to render the toolbar above the chart
 import {
@@ -185,7 +186,7 @@ export default class RealtimePluginDemo extends React.Component<IRealtimePluginD
      */
   private _handleAddDataset = () => {
     // get the chart's data
-    const data: Chart.ChartData = this._chartElem.getChart().data;
+    const data: ChartData = this._chartElem.getChart().data;
 
     var colorNames = Object.keys(chartColors);
     var colorName = colorNames[data.datasets.length % colorNames.length];
@@ -209,7 +210,7 @@ export default class RealtimePluginDemo extends React.Component<IRealtimePluginD
    * Removes the oldset dataset
    */
   private _handleRemoveDataset = () => {
-    const data: Chart.ChartData = this._chartElem.getChart().data;
+    const data: ChartData = this._chartElem.getChart().data;
 
     data.datasets.pop();