honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Upgraded packages
This commit is contained in:
Hugo Bernier 2020-12-13 02:16:42 -05:00 committed by GitHub
parent c20ac2cf59 6fae513c1c
commit 1b413fddab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 772 additions and 458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
samples/react-chartcontrol/README.md
View File

@ -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

2
samples/react-chartcontrol/config/package-solution.json
View File

@ -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",

844
samples/react-chartcontrol/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
samples/react-chartcontrol/package.json
View File

@ -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-property-controls": "^1.13.1",
"chartjs-plugin-streaming": "^1.7.1",
"color": "^3.1.0",
"moment": "^2.23.0",
"@pnp/spfx-controls-react": "^2.2.0",
"@pnp/spfx-property-controls": "^2.2.0",
"chartjs-plugin-streaming": "^1.8.0",
"color": "^3.1.3",
"moment": "^2.29.1",
"patternomaly": "^1.3.2",
"react": "16.8.5",
"react-dom": "16.8.5"

8
samples/react-chartcontrol/src/services/ChartDataProvider/IChartDataProvider.ts
View File

@ -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[]>;
getScatterArray(length: number): Promise<Chart.ChartPoint[]>;
getPointArray(length: number): Promise<ChartPoint[]>;
getScatterArray(length: number): Promise<ChartPoint[]>;
getSignedNumberArray(length: number): Promise<number[]>;
}

23
samples/react-chartcontrol/src/services/ChartDataProvider/MockChartDataProvider.ts
View File

@ -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[]>> {
return new Promise<Array<Chart.ChartPoint[]>>((resolve) => {
public getMultiBubbleArrays(numDatasets: number, length: number): Promise<Array<ChartPoint[]>> {
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[]> {
return new Promise<Chart.ChartPoint[]>((resolve) => {
public getPointArray(length: number): Promise<ChartPoint[]> {
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[]> {
return new Promise<Chart.ChartPoint[]>((resolve) => {
public getScatterArray(length: number): Promise<ChartPoint[]> {
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(
{

9
samples/react-chartcontrol/src/services/ListService/MockListService.ts
View File

@ -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[]>) => {
const listRows: Array<IListItem> = dataSet[0].map((value: Chart.ChartPoint, index: number) => {
dataProvider.getMultiBubbleArrays(1, DATA_COUNT).then((dataSet: Array<ChartPoint[]>) => {
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[]) => {
const listRows: Array<IListItem> = dataSet.map((value: Chart.ChartPoint, index: number) => {
dataProvider.getScatterArray(DATA_COUNT).then((dataSet: ChartPoint[]) => {
const listRows: Array<IListItem> = dataSet.map((value: ChartPoint, index: number) => {
const listRow: IListItem = {
Id: `row_${index}`,
Label: this._labels[index],

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

@ -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();
}

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

@ -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> {
return new Promise<Chart.ChartData>((resolve, reject) => {
private _loadAsyncData(): Promise<ChartData> {
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: [

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

@ -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> {
return new Promise<Chart.ChartData>((resolve, reject) => {
private _loadAsyncData(): Promise<ChartData> {
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[]>) => {
const data: Chart.ChartData = {
.then((bubbleArrays: Array<ChartPoint[]>) => {
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[] {
const data: Chart.ChartPoint[] = [];
private _generateData(): ChartPoint[] {
const data: ChartPoint[] = [];
for (let i = 0; i < DATA_COUNT; ++i) {
data.push({

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

@ -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;

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

@ -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;
// }

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

@ -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 MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
import {
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;

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

@ -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;

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

@ -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;
}
}

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

@ -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;
}
}

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

@ -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;
}

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

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

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

@ -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> {
return new Promise<Chart.ChartData>((resolve, reject) => {
private _loadAsyncData(): Promise<ChartData> {
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: [{

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

@ -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> {
return new Promise<Chart.ChartData>((resolve, _reject) => {
private _loadAsyncData(): Promise<ChartData> {
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: [

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

@ -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> {
return new Promise<Chart.ChartData>((resolve, reject) => {
private _loadAsyncData(): Promise<ChartData> {
return new Promise<ChartData>((resolve, reject) => {
const { httpClient,
repoOwner,
repo } = this.props;

9
samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
View File

@ -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,

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

@ -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
},

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

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

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

@ -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> {
return new Promise<Chart.ChartData>((resolve, reject) => {
private _loadAsyncData(): Promise<ChartData> {
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) {

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

@ -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> {
return new Promise<Chart.ChartData>((resolve, reject) => {
private _loadAsyncData(): Promise<ChartData> {
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: [{

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

@ -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);

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

@ -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> {
return new Promise<Chart.ChartData>((resolve, reject) => {
private _loadAsyncData(): Promise<ChartData> {
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();

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

@ -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> {
return new Promise<Chart.ChartData>((resolve, reject) => {
private _loadAsyncData(): Promise<ChartData> {
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,

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

@ -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();