Updated classes to remove default classes

This commit is contained in:
Hugo Bernier 2021-02-24 22:24:44 -05:00
parent 1a7a8baa2f
commit af91bdb626
43 changed files with 75 additions and 121 deletions

View File

@ -5,7 +5,7 @@ const FAKE_DELAY: number = 500;
/**
* Returns an array of chart points (x,y)
*/
export default class MockChartDataProvider implements IChartDataProvider {
export class MockChartDataProvider implements IChartDataProvider {
public getSignedNumberArray(length: number): Promise<number[]> {
return new Promise<number[]>((resolve) => {
// pretend we're getting the data from a service

View File

@ -1,7 +1,7 @@
import { IGitHubService, IGitHubContributor, IAuthorCommit } from "./IGitHubService.types";
import { HttpClient, HttpClientResponse } from '@microsoft/sp-http';
export default class GitHubService implements IGitHubService {
export class GitHubService implements IGitHubService {
/**
* Gets a list of github commits in a repo for a single contributor
* @param client the HttpClient object that will make the call

View File

@ -2,7 +2,7 @@ import { IListService } from "./IListService";
import { IListField } from "./IListField";
import { IListItem } from "./IListItem";
import { ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
import MockChartDataProvider from "../ChartDataProvider/MockChartDataProvider";
import { MockChartDataProvider } from "../ChartDataProvider/MockChartDataProvider";
import IChartDataProvider from "../ChartDataProvider/IChartDataProvider";
import { ChartPoint } from 'chart.js';

View File

@ -5,7 +5,7 @@ import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
import * as strings from 'AccessibleTableWebPartStrings';
import AccessibleTable from './components/AccessibleTable';
import { AccessibleTable } from './components/AccessibleTable';
import { IAccessibleTableProps } from './components/IAccessibleTable.types';
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
@ -18,7 +18,7 @@ export interface IAccessibleTableWebPartProps {
datasetlabel: string;
}
export default class AccessibleTableWebPart extends BaseClientSideWebPart<IAccessibleTableWebPartProps> {
export class AccessibleTableWebPart extends BaseClientSideWebPart<IAccessibleTableWebPartProps> {
public render(): void {
const element: React.ReactElement<IAccessibleTableProps> = React.createElement(
AccessibleTable,
@ -37,10 +37,6 @@ export default class AccessibleTableWebPart extends BaseClientSideWebPart<IAcces
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [

View File

@ -8,9 +8,9 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
import { ChartControl, ChartType, OFFICE_COLORFUL1, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
export default class AccessibleTable extends React.Component<IAccessibleTableProps, {}> {
export class AccessibleTable extends React.Component<IAccessibleTableProps, {}> {
public render(): React.ReactElement<IAccessibleTableProps> {
return (

View File

@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'AreaChartDemoWebPartStrings';
import AreaChartDemo from './components/AreaChartDemo';
import { AreaChartDemo } from './components/AreaChartDemo';
import { IAreaChartDemoProps } from './components/IAreaChartDemo.types';
export interface IAreaChartDemoWebPartProps {
description: string;
}
export default class AreaChartDemoWebPart extends BaseClientSideWebPart<IAreaChartDemoWebPartProps> {
export class AreaChartDemoWebPart extends BaseClientSideWebPart<IAreaChartDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IAreaChartDemoProps > = React.createElement(
@ -29,10 +29,6 @@ export default class AreaChartDemoWebPart extends BaseClientSideWebPart<IAreaCha
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [

View File

@ -8,7 +8,7 @@ import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartContr
import { ChartDataSets, ChartData, ChartOptions } from 'chart.js';
// used to retrieve (fake) data from a (fake) service
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
// used to render the toolbar above the chart
import {
@ -26,7 +26,7 @@ This demo shows the following:
- Generate a gradient for a background color
- Change the fill value
*/
export default class AreaChartDemo extends React.Component<IAreaChartDemoProps, IAreaChartDemoState> {
export class AreaChartDemo extends React.Component<IAreaChartDemoProps, IAreaChartDemoState> {
/**
* The chart element
*/

View File

@ -5,7 +5,7 @@ import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import BarChartDemo from './components/BarChartDemo';
import { BarChartDemo } from './components/BarChartDemo';
import { IBarChartDemoProps } from './components/IBarChartDemo.types';
export interface IBarChartDemoWebPartProps {
@ -17,7 +17,7 @@ export interface IBarChartDemoWebPartProps {
* and rendering the chart once the data has been retrieved.
* To keep the demo simple, we don't specify custom colors.
*/
export default class BarChartDemoWebPart extends BaseClientSideWebPart<IBarChartDemoWebPartProps> {
export class BarChartDemoWebPart extends BaseClientSideWebPart<IBarChartDemoWebPartProps> {
public render(): void {
@ -35,10 +35,6 @@ export default class BarChartDemoWebPart extends BaseClientSideWebPart<IBarChart
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [

View File

@ -2,7 +2,7 @@ import * as React from 'react';
import styles from './BarChartDemo.module.scss';
import * as strings from 'BarChartDemoWebPartStrings';
import { IBarChartDemoProps, IBarChartDemoState } from './IBarChartDemo.types';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
@ -16,7 +16,7 @@ const DATA_LENGTH: number = 7;
* and display the results, rendering a "please wait" message while
* data is loading.
*/
export default class BarChartDemo extends React.Component<IBarChartDemoProps, IBarChartDemoState> {
export class BarChartDemo extends React.Component<IBarChartDemoProps, IBarChartDemoState> {
/**
* Renders the "Loading" spinner if the state is currently loading,
* or the chart once data is loladed

View File

@ -5,14 +5,14 @@ import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'BarChartStaticWebPartStrings';
import BarChartStatic from './components/BarChartStatic';
import { BarChartStatic } from './components/BarChartStatic';
import { IBarChartStaticProps } from './components/IBarChartStaticProps';
export interface IBarChartStaticWebPartProps {
description: string;
}
export default class BarChartStaticWebPart extends BaseClientSideWebPart<IBarChartStaticWebPartProps> {
export class BarChartStaticWebPart extends BaseClientSideWebPart<IBarChartStaticWebPartProps> {
public render(): void {
const element: React.ReactElement<IBarChartStaticProps > = React.createElement(
@ -29,10 +29,6 @@ export default class BarChartStaticWebPart extends BaseClientSideWebPart<IBarCha
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [

View File

@ -12,7 +12,7 @@ import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartContr
* this sample as simple as possible.
* @see https://www.chartjs.org/docs/latest/ for the original sample code.
*/
export default class BarChartStatic extends React.Component<IBarChartStaticProps, {}> {
export class BarChartStatic extends React.Component<IBarChartStaticProps, {}> {
public render(): React.ReactElement<IBarChartStaticProps> {
return (
<div className={styles.barChartStatic}>

View File

@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'BubbleChartDemoWebPartStrings';
import BubbleChartDemo from './components/BubbleChartDemo';
import { BubbleChartDemo } from './components/BubbleChartDemo';
import { IBubbleChartDemoProps } from './components/IBubbleChartDemo.types';
export interface IBubbleChartDemoWebPartProps {
description: string;
}
export default class BubbleChartDemoWebPart extends BaseClientSideWebPart<IBubbleChartDemoWebPartProps> {
export class BubbleChartDemoWebPart extends BaseClientSideWebPart<IBubbleChartDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IBubbleChartDemoProps > = React.createElement(
@ -29,10 +29,6 @@ export default class BubbleChartDemoWebPart extends BaseClientSideWebPart<IBubbl
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [

View File

@ -9,7 +9,7 @@ import { ChartPoint, ChartData } from 'chart.js';
// used to retrieve (fake) data from a (fake) service
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
// used to render the toolbar above the chart
import {
@ -37,7 +37,7 @@ const DATA_COUNT: number = 16;
const DATSET_LENGTH: number = 2;
const MAX_BORDERWIDTH: number = 8;
export default class BubbleChartDemo extends React.Component<IBubbleChartDemoProps, {}> {
export class BubbleChartDemo extends React.Component<IBubbleChartDemoProps, {}> {
/**
* The chart element
*/

View File

@ -25,7 +25,7 @@ import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHe
import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
// Component that actually renders the web part content
import Chartinator from './components/Chartinator';
import { Chartinator } from './components/Chartinator';
import { IChartinatorProps, DataSourceType } from './components/Chartinator.types';
// Needed to generate unique data row ids
@ -68,7 +68,7 @@ const DEFAULT_CIRCUMFERENCE: number = 100;
const DEFAULT_CHARTROTATION: number = -180;
const DEFAULT_POINTRADIUS = 3;
export default class ChartinatorWebPart extends BaseClientSideWebPart<IChartinatorWebPartProps> {
export class ChartinatorWebPart extends BaseClientSideWebPart<IChartinatorWebPartProps> {
private _fields: IListField[];
/**
@ -138,13 +138,6 @@ export default class ChartinatorWebPart extends BaseClientSideWebPart<IChartinat
ReactDom.unmountComponentAtNode(this.domElement);
}
/**
* Returns the data version
*/
protected get dataVersion(): Version {
return Version.parse('1.0');
}
/**
* Initializes properties for the web part.
* You could absolutely replace this function with

View File

@ -22,7 +22,7 @@ import { DashStrokes } from '../controls/PropertyPaneDashSelector/components/Das
// List methods to retrieve data
import { IListService, ListService, IListItem, MockListService } from '../../../services/ListService';
export default class Chartinator extends React.Component<IChartinatorProps, {}> {
export class Chartinator extends React.Component<IChartinatorProps, {}> {
/**
* The chart element
*/

View File

@ -5,7 +5,7 @@ import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-propert
import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
import { IChartPaletteSelectorProps } from './components/ChartPaletteSelector.types';
import ChartPaletteSelector from './components/ChartPaletteSelector';
import { ChartPaletteSelector } from './components/ChartPaletteSelector';
import {
IPropertyPaneChartPaletteSelectorProps,
IPropertyPaneChartPaletteSelectorInternalProps,

View File

@ -11,7 +11,7 @@ import { IChartPaletteSelectorProps, IChartPaletteSelectorState } from './ChartP
/**
* Displays a list of palette colours
*/
export default class ChartPaletteSelector extends React.Component<IChartPaletteSelectorProps, IChartPaletteSelectorState> {
export class ChartPaletteSelector extends React.Component<IChartPaletteSelectorProps, IChartPaletteSelectorState> {
constructor(props: IChartPaletteSelectorProps) {
super(props);
this.state = {

View File

@ -5,7 +5,7 @@ import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-propert
import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
import { IDashSelectorProps } from './components/DashSelector.types';
import DashSelector from './components/DashSelector';
import { DashSelector } from './components/DashSelector';
import {
IPropertyPaneDashSelectorProps,
IPropertyPaneDashSelectorInternalProps,

View File

@ -12,7 +12,7 @@ import { IDashSelectorProps, IDashSelectorState } from './DashSelector.types';
* Displays a list of dash options.
*
*/
export default class DashSelector extends React.Component<IDashSelectorProps, IDashSelectorState> {
export class DashSelector extends React.Component<IDashSelectorProps, IDashSelectorState> {
/**
*
*/

View File

@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'ComboChartDemoWebPartStrings';
import ComboChartDemo from './components/ComboChartDemo';
import { ComboChartDemo } from './components/ComboChartDemo';
import { IComboChartDemoProps } from './components/IComboChartDemo.types';
export interface IComboChartDemoWebPartProps {
description: string;
}
export default class ComboChartDemoWebPart extends BaseClientSideWebPart<IComboChartDemoWebPartProps> {
export class ComboChartDemoWebPart extends BaseClientSideWebPart<IComboChartDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IComboChartDemoProps > = React.createElement(
@ -29,10 +29,6 @@ export default class ComboChartDemoWebPart extends BaseClientSideWebPart<IComboC
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [

View File

@ -7,12 +7,12 @@ import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartContr
import { ChartData } from 'chart.js';
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
const DATA_LENGTH: number = 7;
const DATASET_LENGTH: number = 3;
export default class ComboChartDemo extends React.Component<IComboChartDemoProps, {}> {
export class ComboChartDemo extends React.Component<IComboChartDemoProps, {}> {
/**
* Renders the command bar and the chart

View File

@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'CustomPluginDemoWebPartStrings';
import CustomPluginDemo from './components/CustomPluginDemo';
import { CustomPluginDemo } from './components/CustomPluginDemo';
import { ICustomPluginDemoProps } from './components/ICustomPluginDemo,types';
export interface ICustomPluginDemoWebPartProps {
description: string;
}
export default class CustomPluginDemoWebPart extends BaseClientSideWebPart<ICustomPluginDemoWebPartProps> {
export class CustomPluginDemoWebPart extends BaseClientSideWebPart<ICustomPluginDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<ICustomPluginDemoProps > = React.createElement(
@ -30,10 +30,6 @@ export default class CustomPluginDemoWebPart extends BaseClientSideWebPart<ICust
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [

View File

@ -145,7 +145,7 @@ const chartOptions: any = {
}
};
export default class CustomPluginDemo extends React.Component<ICustomPluginDemoProps, {}> {
export class CustomPluginDemo extends React.Component<ICustomPluginDemoProps, {}> {
/**
* Renders the (static) donut chart with the plugins passed in

View File

@ -7,14 +7,14 @@ import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import DonutPatternsDemo from './components/DonutPatternsDemo';
import { DonutPatternsDemo } from './components/DonutPatternsDemo';
import { IDonutPatternsDemoProps } from './components/IDonutPatternsDemo.types';
export interface IDonutPatternsDemoWebPartProps {
description: string;
}
export default class DonutPatternsDemoWebPart extends BaseClientSideWebPart<IDonutPatternsDemoWebPartProps> {
export class DonutPatternsDemoWebPart extends BaseClientSideWebPart<IDonutPatternsDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IDonutPatternsDemoProps > = React.createElement(
@ -30,10 +30,6 @@ export default class DonutPatternsDemoWebPart extends BaseClientSideWebPart<IDon
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [

View File

@ -3,7 +3,7 @@ import styles from './DonutPatternsDemo.module.scss';
import { IDonutPatternsDemoProps, IDonutPatternsDemoState } from './IDonutPatternsDemo.types';
import * as strings from 'DonutPatternsDemoWebPartStrings';
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
import { Checkbox } from '@fluentui/react/lib/Checkbox';
// Patternomaly is used to render patterns
@ -57,7 +57,7 @@ const patterns: CanvasPattern[] = [
* call the update methods to get access to and modified the data without
* refreshing the entire web part
*/
export default class DonutPatternsDemo extends React.Component<IDonutPatternsDemoProps, IDonutPatternsDemoState> {
export class DonutPatternsDemo extends React.Component<IDonutPatternsDemoProps, IDonutPatternsDemoState> {
private _chartElem: ChartControl = undefined;
/**

View File

@ -5,7 +5,7 @@ import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
import * as strings from 'DynamicDataCallableWebPartStrings';
import DynamicDataCallable from './components/DynamicDataCallable';
import { DynamicDataCallable } from './components/DynamicDataCallable';
import { IDynamicDataCallableProps } from './components/IDynamicDataCallableProps';
import { IDynamicDataPropertyDefinition, IDynamicDataCallables } from '@microsoft/sp-dynamic-data';
import { IContributor } from '../../services/GitHubService';
@ -20,7 +20,7 @@ export interface IDynamicDataCallableWebPartProps {
repo: string;
}
export default class DynamicDataCallableWebPart extends BaseClientSideWebPart<IDynamicDataCallableWebPartProps> implements IDynamicDataCallables {
export class DynamicDataCallableWebPart extends BaseClientSideWebPart<IDynamicDataCallableWebPartProps> implements IDynamicDataCallables {
/** the last selected contributor */
private _selectedContributor: IContributor;
@ -52,10 +52,6 @@ export default class DynamicDataCallableWebPart extends BaseClientSideWebPart<ID
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
/**
* We're disabling reactive property panes here because we don't want the web part to try to fetch
* statistics until both the repo owner and repo name have been filled it

View File

@ -11,10 +11,10 @@ import { ChartControl, ChartType, PaletteGenerator } from '@pnp/spfx-controls-re
import { ChartData } from 'chart.js';
// used to call GitHub
import GitHubService from '../../../services/GitHubService/GitHubService';
import { GitHubService } from '../../../services/GitHubService/GitHubService';
import { IGitHubService, IGitHubContributor } from '../../../services/GitHubService';
export default class DynamicDataCallable extends React.Component<IDynamicDataCallableProps, {}> {
export class DynamicDataCallable extends React.Component<IDynamicDataCallableProps, {}> {
/**
* The chart element
*/

View File

@ -13,12 +13,12 @@ import { DynamicProperty } from '@microsoft/sp-component-base';
import * as strings from 'DynamicDataConsumerWebPartStrings';
// component rendering
import DynamicDataConsumer from './components/DynamicDataConsumer';
import { DynamicDataConsumer } from './components/DynamicDataConsumer';
import { IDynamicDataConsumerProps } from './components/IDynamicDataConsumerProps';
import { IContributor, IGitHubService, IAuthorCommit } from '../../services/GitHubService';
// Needed to retrieve GitHub data
import GitHubService from '../../services/GitHubService/GitHubService';
import { GitHubService } from '../../services/GitHubService/GitHubService';
// used to group GitHub results by date
import { groupBy, toPairs } from '@microsoft/sp-lodash-subset';
@ -43,7 +43,7 @@ export interface IDynamicDataConsumerWebPartProps {
repoOwner: string;
}
export default class DynamicDataConsumerWebPart extends BaseClientSideWebPart<IDynamicDataConsumerWebPartProps> {
export class DynamicDataConsumerWebPart extends BaseClientSideWebPart<IDynamicDataConsumerWebPartProps> {
public render(): void {
const { repo,

View File

@ -18,7 +18,7 @@ import * as moment from 'moment';
* Unlike most samples in this solution, most of the business logic/data retrieval isn't here, but
* in the web part.
*/
export default class DynamicDataConsumer extends React.Component<IDynamicDataConsumerProps, {}> {
export class DynamicDataConsumer extends React.Component<IDynamicDataConsumerProps, {}> {
public render(): React.ReactElement<IDynamicDataConsumerProps> {
const { alias, data } = this.props;

View File

@ -5,14 +5,14 @@ import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'HorizontalBarDemoWebPartStrings';
import HorizontalBarDemo from './components/HorizontalBarDemo';
import { HorizontalBarDemo } from './components/HorizontalBarDemo';
import { IHorizontalBarDemoProps } from './components/IHorizontalBarDemo.types';
export interface IHorizontalBarDemoWebPartProps {
description: string;
}
export default class HorizontalBarDemoWebPart extends BaseClientSideWebPart<IHorizontalBarDemoWebPartProps> {
export class HorizontalBarDemoWebPart extends BaseClientSideWebPart<IHorizontalBarDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IHorizontalBarDemoProps > = React.createElement(

View File

@ -2,7 +2,7 @@ import * as React from 'react';
import styles from './HorizontalBarDemo.module.scss';
import { IHorizontalBarDemoProps } from './IHorizontalBarDemo.types';
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import {MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
import * as strings from 'HorizontalBarDemoWebPartStrings';
import * as Color from 'color';
@ -19,13 +19,14 @@ import { ChartData } from 'chart.js';
*/
const chartColors: string[] = OFFICE_COLORFUL1;
const backgroundColors: string[] = PaletteGenerator.alpha(OFFICE_COLORFUL1, 0.2) as string[];
/**
* Demonstrates how to use a horizontal bar chart.
* Also shows how to use an Office Fabric CommandBar to change
* data and settings.
* This sample uses the state to store the entire chart's
*/
export default class HorizontalBarDemo extends React.Component<IHorizontalBarDemoProps, {}> {
export class HorizontalBarDemo extends React.Component<IHorizontalBarDemoProps, {}> {
private _chartElem: ChartControl = undefined;
public render(): React.ReactElement<IHorizontalBarDemoProps> {

View File

@ -5,14 +5,14 @@ import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import LineChartDemo from './components/LineChartDemo';
import { LineChartDemo } from './components/LineChartDemo';
import { ILineChartDemoProps } from './components/ILineChartDemo.types';
export interface ILineChartDemoWebPartProps {
description: string;
}
export default class LineChartDemoWebPart extends BaseClientSideWebPart<ILineChartDemoWebPartProps> {
export class LineChartDemoWebPart extends BaseClientSideWebPart<ILineChartDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<ILineChartDemoProps > = React.createElement(

View File

@ -3,7 +3,7 @@ import styles from './LineChartDemo.module.scss';
import { ILineChartDemoProps, ILineChartDemoState } from './ILineChartDemo.types';
import * as strings from 'LineChartDemoWebPartStrings';
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
import { ChartControl, ChartType } from "@pnp/spfx-controls-react/lib/ChartControl";
import { ChartData } from 'chart.js';
@ -14,7 +14,7 @@ import { ChartData } from 'chart.js';
* Also demonstrates customizing axis labels and
* custom tooltip providers.
*/
export default class LineChartDemo extends React.Component<ILineChartDemoProps, ILineChartDemoState> {
export class LineChartDemo extends React.Component<ILineChartDemoProps, ILineChartDemoState> {
public render(): React.ReactElement<ILineChartDemoProps> {
return (

View File

@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'PieChartDemoWebPartStrings';
import PieChartDemo from './components/PieChartDemo';
import { PieChartDemo } from './components/PieChartDemo';
import { IPieChartDemoProps } from './components/IPieChartDemo.types';
export interface IPieChartDemoWebPartProps {
description: string;
}
export default class PieChartDemoWebPart extends BaseClientSideWebPart<IPieChartDemoWebPartProps> {
export class PieChartDemoWebPart extends BaseClientSideWebPart<IPieChartDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IPieChartDemoProps > = React.createElement(
@ -27,10 +27,6 @@ export default class PieChartDemoWebPart extends BaseClientSideWebPart<IPieChart
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [

View File

@ -10,7 +10,7 @@ import { ChartData } from 'chart.js';
// used to retrieve (fake) data from a (fake) service
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
// used to render the toolbar above the chart
import {
@ -37,7 +37,7 @@ const DATA_LENGTH: number = 5;
/**
* This sample demonstrates add and modifying the data in a pie chart
*/
export default class PieChartDemo extends React.Component<IPieChartDemoProps, {}> {
export class PieChartDemo extends React.Component<IPieChartDemoProps, {}> {
/**
* The chart element
*/

View File

@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'PolarAreaDemoWebPartStrings';
import PolarAreaDemo from './components/PolarAreaDemo';
import { PolarAreaDemo } from './components/PolarAreaDemo';
import { IPolarAreaDemoProps } from './components/IPolarAreaDemo.types';
export interface IPolarAreaDemoWebPartProps {
description: string;
}
export default class PolarAreaDemoWebPart extends BaseClientSideWebPart<IPolarAreaDemoWebPartProps> {
export class PolarAreaDemoWebPart extends BaseClientSideWebPart<IPolarAreaDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IPolarAreaDemoProps > = React.createElement(

View File

@ -9,7 +9,7 @@ import { ChartData } from 'chart.js';
// used to retrieve (fake) data from a (fake) service
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
// used to render the toolbar above the chart
import {
@ -42,7 +42,7 @@ const borderColors: string[] = [
const DATA_LENGTH: number = 5;
export default class PolarAreaDemo extends React.Component<IPolarAreaDemoProps, {}> {
export class PolarAreaDemo extends React.Component<IPolarAreaDemoProps, {}> {
/**
* The chart element
*/

View File

@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'RadarDemoWebPartStrings';
import RadarDemo from './components/RadarDemo';
import { RadarDemo } from './components/RadarDemo';
import { IRadarDemoProps } from './components/IRadarDemo.types';
export interface IRadarDemoWebPartProps {
description: string;
}
export default class RadarDemoWebPart extends BaseClientSideWebPart<IRadarDemoWebPartProps> {
export class RadarDemoWebPart extends BaseClientSideWebPart<IRadarDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IRadarDemoProps > = React.createElement(

View File

@ -3,14 +3,14 @@ import * as strings from 'RadarDemoWebPartStrings';
import styles from './RadarDemo.module.scss';
import { IRadarDemoProps, IRadarDemoState } from './IRadarDemo.types';
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
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;
export default class RadarDemo extends React.Component<IRadarDemoProps, IRadarDemoState> {
export class RadarDemo extends React.Component<IRadarDemoProps, IRadarDemoState> {
public render(): React.ReactElement<IRadarDemoProps> {

View File

@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
import * as strings from 'RealtimePluginDemoWebPartStrings';
import RealtimePluginDemo from './components/RealtimePluginDemo';
import { RealtimePluginDemo } from './components/RealtimePluginDemo';
import { IRealtimePluginDemoProps } from './components/IRealtimePluginDemo.types';
export interface IRealtimePluginDemoWebPartProps {
description: string;
}
export default class RealtimePluginDemoWebPart extends BaseClientSideWebPart<IRealtimePluginDemoWebPartProps> {
export class RealtimePluginDemoWebPart extends BaseClientSideWebPart<IRealtimePluginDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IRealtimePluginDemoProps > = React.createElement(

View File

@ -27,7 +27,7 @@ const chartColors = {
};
export default class RealtimePluginDemo extends React.Component<IRealtimePluginDemoProps, {}> {
export class RealtimePluginDemo extends React.Component<IRealtimePluginDemoProps, {}> {
/**
* The chart element
*/

View File

@ -7,14 +7,14 @@ import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/
import * as strings from 'ScatterChartDemoWebPartStrings';
import ScatterChartDemo from './components/ScatterChartDemo';
import { ScatterChartDemo } from './components/ScatterChartDemo';
import { IScatterChartDemoProps } from './components/IScatterChartDemo.types';
export interface IScatterChartDemoWebPartProps {
description: string;
}
export default class ScatterChartDemoWebPart extends BaseClientSideWebPart<IScatterChartDemoWebPartProps> {
export class ScatterChartDemoWebPart extends BaseClientSideWebPart<IScatterChartDemoWebPartProps> {
public render(): void {
const element: React.ReactElement<IScatterChartDemoProps > = React.createElement(

View File

@ -8,7 +8,7 @@ import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartContr
import * as strings from 'ScatterChartDemoWebPartStrings';
export default class ScatterChartDemo extends React.Component<IScatterChartDemoProps, {}> {
export class ScatterChartDemo extends React.Component<IScatterChartDemoProps, {}> {
public render(): React.ReactElement<IScatterChartDemoProps> {
return (
<div className={styles.scatterChartDemo}>