honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-03-02 09:49:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1631 from pnp:hb-chartcontrol-spfx11

Browse Source 
Thanks me!
This commit is contained in:
Hugo Bernier 2020-12-04 11:09:56 -05:00 committed by GitHub
commit eb5869e045
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 1427 additions and 8656 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
samples/react-chartcontrol/.yo-rc.json
View File

@ -2,7 +2,7 @@
"@microsoft/generator-sharepoint": {
"isCreatingSolution": false,
"environment": "spo",
"version": "1.10.0",
"version": "1.11.0",
"libraryName": "react-chartcontrol",
"libraryId": "fb9665fb-4455-4b7f-99ab-2195920871fd",
"packageManager": "npm",

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

@ -170,7 +170,7 @@ This sample shows how to use X and Y coordinate data elements in a scatter chart
## Used SharePoint Framework Version
![SPFx v1.10.0](https://img.shields.io/badge/SPFx-1.10.1-green.svg)
![SPFx v1.11.0](https://img.shields.io/badge/SPFx-1.11.1-green.svg)
## Applies to
@ -193,6 +193,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
## Disclaimer

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

@ -3,8 +3,15 @@
"solution": {
"name": "react-chartcontrol-client-side-solution",
"id": "fb9665fb-4455-4b7f-99ab-2195920871fd",
"version": "1.1.0.0",
"includeClientSideAssets": true
"version": "1.2.0.0",
"includeClientSideAssets": true,
"developer": {
"name": "Contoso",
"privacyUrl": "https://contoso.com/privacy",
"termsOfUseUrl": "https://contoso.com/terms-of-use",
"websiteUrl": "https://contoso.com/my-app",
"mpnId": "000000"
}
},
"paths": {
"zippedPackage": "solution/react-chartcontrol.sppkg"

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

File diff suppressed because it is too large Load Diff

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

@ -1,7 +1,7 @@
{
"main": "lib/index.js",
"name": "react-chartcontrol",
"version": "1.1.0",
"version": "1.2.0",
"private": true,
"engines": {
"node": ">=0.10.0"
@ -12,25 +12,21 @@
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.10.0",
"@microsoft/sp-lodash-subset": "1.10.0",
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "1.10.0",
"@fluentui/react": "^7.153.4",
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-lodash-subset": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@pnp/common": "^1.2.8",
"@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",
"@types/es6-promise": "0.0.33",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"chartjs-plugin-streaming": "^1.7.1",
"color": "^3.1.0",
"moment": "^2.23.0",
"office-ui-fabric-react": "6.189.2",
"patternomaly": "^1.3.2",
"react": "16.8.5",
"react-dom": "16.8.5"
@ -40,12 +36,16 @@
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.10.0",
"@microsoft/sp-module-interfaces": "1.10.0",
"@microsoft/sp-tslint-rules": "1.10.0",
"@microsoft/sp-webpart-workbench": "1.10.0",
"@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": "3.4.34",
"@types/es6-promise": "0.0.33",
"@types/mocha": "2.2.38",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"ajv": "~5.2.2",
"gulp": "~3.9.1"
}

4
samples/react-chartcontrol/src/webparts/accessibleTable/components/AccessibleTable.tsx
View File

@ -3,8 +3,8 @@ import styles from './AccessibleTable.module.scss';
import { IAccessibleTableProps } from './IAccessibleTable.types';
import * as strings from 'AccessibleTableWebPartStrings';
import { escape } from '@microsoft/sp-lodash-subset';
import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
import { MessageBar } from '@fluentui/react/lib/MessageBar';
import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
import { ChartControl, ChartType, OFFICE_COLORFUL1, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';

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

@ -14,7 +14,7 @@ import {
CommandBar,
IContextualMenuItem,
DirectionalHint
} from 'office-ui-fabric-react';
} from '@fluentui/react';
/**
In chart.js, there are really no "area" chart types; They're just line charts with a 'fill'

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

@ -4,7 +4,7 @@ import * as strings from 'BarChartDemoWebPartStrings';
import { IBarChartDemoProps, IBarChartDemoState } from './IBarChartDemo.types';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';

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

@ -14,7 +14,7 @@ import MockChartDataProvider from '../../../services/ChartDataProvider/MockChart
// used to render the toolbar above the chart
import {
CommandBar
} from 'office-ui-fabric-react';
} from '@fluentui/react';
/**
* Define the chart colors:

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

@ -11,7 +11,7 @@ import { IPropertyPaneConfiguration, PropertyPaneChoiceGroup, PropertyPaneLabel,
// Needed to create drop down choices
import {
IDropdownOption
} from 'office-ui-fabric-react/lib/components/Dropdown';
} from '@fluentui/react/lib/Dropdown';
// Needed for charts
import { ChartPalette, PaletteGenerator, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';

4
samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { TextField } from '@fluentui/react/lib/TextField';
import * as strings from 'ChartinatorWebPartStrings';
import { INumberTextFieldProps, INumberTextFieldState } from './NumberTextField.types';
@ -24,7 +24,7 @@ export class NumberTextField extends React.Component<INumberTextFieldProps, INum
label={this.props.label}
value={this.state.value}
placeholder={this.props.placeholder}
onChanged={(newValue: string) => this._handleChange(newValue)}
onChange={(_event: React.FormEvent<HTMLInputElement|HTMLTextAreaElement>, newValue: string) => this._handleChange(newValue)}
onGetErrorMessage={(value: string) => this._validateNumber(value)}
/>
);

12
samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingDataHost.tsx
View File

@ -1,9 +1,9 @@
import * as React from 'react';
import { IPropertyFieldRepeatingDataHostProps, IPropertyFieldRepeatingDataState } from './PropertyFieldRepeatingData.types';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { ActionButton } from 'office-ui-fabric-react/lib/Button';
import { IconButton } from '@fluentui/react/lib/Button';
import { ActionButton } from '@fluentui/react/lib/Button';
import styles from './PropertyFieldRepeatingData.module.scss';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { TextField } from '@fluentui/react/lib/TextField';
import { NumberTextField } from '../NumberTextField/NumberTextField';
import * as strings from 'ChartinatorWebPartStrings';
import { Guid } from '@microsoft/sp-core-library';
@ -64,7 +64,7 @@ export default class IPropertyFieldRepeatingDataHost extends React.Component<IPr
label={strings.DataLabelFieldLabel}
placeholder={strings.DataLabelFieldPlaceholder}
value={dataRow.name}
onChanged={(newValue: string) => this._handleRowChange(dataRow.id, 'name', newValue)}
onChange={((event: React.FormEvent<HTMLInputElement|HTMLTextAreaElement>, newValue: string) => this._handleRowChange(dataRow.id, 'name', newValue))}
/>
<NumberTextField
label={strings.DataValueFieldLabel}
@ -94,7 +94,7 @@ export default class IPropertyFieldRepeatingDataHost extends React.Component<IPr
label={strings.DataLabelFieldLabel}
placeholder={strings.DataLabelFieldPlaceholder}
value={dataRow.name}
onChanged={(newValue: string) => this._handleRowChange(dataRow.key, 'name', newValue)}
onChange={((_event: React.FormEvent<HTMLInputElement|HTMLTextAreaElement>, newValue: string) => this._handleRowChange(dataRow.key, 'name', newValue))}
/>
<NumberTextField
label={strings.DataValueXFieldLabel}
@ -135,7 +135,7 @@ export default class IPropertyFieldRepeatingDataHost extends React.Component<IPr
label={strings.DataLabelFieldLabel}
placeholder={strings.DataLabelFieldPlaceholder}
value={dataRow.name}
onChanged={(newValue: string) => this._handleRowChange(dataRow.id, 'name', newValue)}
onChange={((_event: React.FormEvent<HTMLInputElement|HTMLTextAreaElement>, newValue: string) => this._handleRowChange(dataRow.id, 'name', newValue))}
/>
<NumberTextField
label={strings.DataValueXFieldLabel}

2
samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/IPropertyPaneChartPaletteSelectorProps.ts
View File

@ -1,4 +1,4 @@
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
export interface IPropertyPaneChartPaletteSelectorProps {
disabled: boolean;

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

@ -2,7 +2,7 @@ import * as React from 'react';
import * as ReactDom from 'react-dom';
import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
import { IChartPaletteSelectorProps } from './components/ChartPaletteSelector.types';
import ChartPaletteSelector from './components/ChartPaletteSelector';

4
samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx
View File

@ -2,8 +2,8 @@ import * as React from 'react';
import {
Dropdown,
IDropdownOption
} from 'office-ui-fabric-react/lib/components/Dropdown';
import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
} from '@fluentui/react/lib/Dropdown';
import { TooltipHost, DirectionalHint } from '@fluentui/react/lib/Tooltip';
import styles from './ChartPaletteSelector.module.scss';
import { IChartPaletteSelectorProps, IChartPaletteSelectorState } from './ChartPaletteSelector.types';

2
samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.types.ts
View File

@ -1,4 +1,4 @@
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
/**
* Properties for the chart palette select

2
samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorProps.ts
View File

@ -1,4 +1,4 @@
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
export interface IPropertyPaneDashSelectorProps {
disabled: boolean;

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

@ -2,7 +2,7 @@ import * as React from 'react';
import * as ReactDom from 'react-dom';
import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
import { IDashSelectorProps } from './components/DashSelector.types';
import DashSelector from './components/DashSelector';

6
samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx
View File

@ -2,11 +2,11 @@ import * as React from 'react';
import {
Dropdown,
IDropdownOption
} from 'office-ui-fabric-react/lib/components/Dropdown';
import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
} from '@fluentui/react/lib/Dropdown';
import { TooltipHost, DirectionalHint } from '@fluentui/react/lib/Tooltip';
import styles from './DashSelector.module.scss';
import { IDashSelectorProps, IDashSelectorState, DashType, DashStrokes } from './DashSelector.types';
import { IDashSelectorProps, IDashSelectorState } from './DashSelector.types';
/**
* Displays a list of dash options.

2
samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.types.ts
View File

@ -1,4 +1,4 @@
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
/**
* Properties for the dash selector

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

@ -4,7 +4,7 @@ import { IDonutPatternsDemoProps, IDonutPatternsDemoState } from './IDonutPatter
import * as strings from 'DonutPatternsDemoWebPartStrings';
import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Checkbox } from '@fluentui/react/lib/Checkbox';
// Patternomaly is used to render patterns
import * as pattern from 'patternomaly';

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

@ -3,8 +3,8 @@ import styles from './DynamicDataCallable.module.scss';
import { IDynamicDataCallableProps } from './IDynamicDataCallableProps';
import * as strings from 'DynamicDataCallableWebPartStrings';
import { Placeholder } from '@pnp/spfx-controls-react/lib/Placeholder';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
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';

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

@ -29,7 +29,7 @@ import { PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
// Used to render placeholders and error messages
import { Placeholder, IPlaceholderProps } from '@pnp/spfx-controls-react/lib/Placeholder';
import { MessageBar, MessageBarType, IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
import { MessageBar, MessageBarType, IMessageBarProps } from '@fluentui/react/lib/MessageBar';
//Orange color
const CHARTCOLOR: string = "#ffa500";

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

@ -8,7 +8,7 @@ import * as Color from 'color';
import {
CommandBar
} from 'office-ui-fabric-react';
} from '@fluentui/react';
import { ChartControl, ChartType,OFFICE_COLORFUL1, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';

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

@ -14,7 +14,7 @@ import MockChartDataProvider from '../../../services/ChartDataProvider/MockChart
// used to render the toolbar above the chart
import {
CommandBar
} from 'office-ui-fabric-react';
} from '@fluentui/react';
/**
* Define the chart colors:

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

@ -14,7 +14,7 @@ import MockChartDataProvider from '../../../services/ChartDataProvider/MockChart
// used to render the toolbar above the chart
import {
CommandBar
} from 'office-ui-fabric-react';
} from '@fluentui/react';
/**
* Define the chart colors:

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

@ -13,7 +13,7 @@ import * as realTime from 'chartjs-plugin-streaming';
// used to render the toolbar above the chart
import {
CommandBar
} from 'office-ui-fabric-react';
} from '@fluentui/react';
const chartColors = {
red: styles.red,

3
samples/react-chartcontrol/tsconfig.json
View File

@ -29,7 +29,8 @@
]
},
"include": [
"src/**/*.ts"
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules",