commit
9cfbdaf142
|
@ -7,7 +7,7 @@ export class BaseService {
|
|||
public baseUrl: string;
|
||||
|
||||
constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
|
||||
|
||||
|
||||
this.baseUrl = (<any>window)._spPageContextInfo.webAbsoluteUrl;
|
||||
|
||||
}
|
||||
|
@ -178,4 +178,4 @@ export class BaseService {
|
|||
|
||||
return deferred.promise;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,160 @@
|
|||
{
|
||||
"title": "solution-overview",
|
||||
"steps": [
|
||||
{
|
||||
"file": "src/webparts/appInsightsDashboard/AppInsightsDashboardWebPart.ts",
|
||||
"description": "Webpart properties declared to capture the below information\n1. **_AppId_** - Application ID of the Azure App Insights\n2. **_AppKey_** - Application key of the Azure App Insights",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 14,
|
||||
"character": 1
|
||||
},
|
||||
"end": {
|
||||
"line": 17,
|
||||
"character": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/webparts/appInsightsDashboard/components/AppInsightsDashboard.tsx",
|
||||
"line": 22,
|
||||
"description": "Upated the default class component to **React Functional component**.",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 22,
|
||||
"character": 1
|
||||
},
|
||||
"end": {
|
||||
"line": 22,
|
||||
"character": 95
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/webparts/appInsightsDashboard/components/AppInsightsDashboard.tsx",
|
||||
"line": 31,
|
||||
"description": "Using **React Context API** feature to pass the properties using context instead of passing the properties to each component.",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 31,
|
||||
"character": 3
|
||||
},
|
||||
"end": {
|
||||
"line": 31,
|
||||
"character": 44
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/webparts/appInsightsDashboard/components/AppInsightsDashboard.tsx",
|
||||
"line": 52,
|
||||
"description": "Child components for different statistics\n1. **_Page Views_**\n2. **_User statistics_**\n3. **_Performance statistics_**",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 44,
|
||||
"character": 9
|
||||
},
|
||||
"end": {
|
||||
"line": 52,
|
||||
"character": 15
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/common/components/CustomPivot.tsx",
|
||||
"line": 29,
|
||||
"description": "Created a **custom Pivot component** using **Office UI Fabric Pivot control** to match the **Azure style**. All the statistics child components will use this custom pivot component for interval and timespan selection.",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 16,
|
||||
"character": 9
|
||||
},
|
||||
"end": {
|
||||
"line": 29,
|
||||
"character": 15
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/common/components/DataList.tsx",
|
||||
"line": 80,
|
||||
"description": "Common **Details List** component using **Office UI Fabric Details list** control to display the data as a list for some of the statistics along with the graphical representation.",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 51,
|
||||
"character": 9
|
||||
},
|
||||
"end": {
|
||||
"line": 80,
|
||||
"character": 15
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/common/enumHelper.ts",
|
||||
"line": 28,
|
||||
"description": "Enum collections for user selection\n1. **_Time Interval_**\n2. **_Time Span_**\n3. **_Segments_**",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 1,
|
||||
"character": 1
|
||||
},
|
||||
"end": {
|
||||
"line": 28,
|
||||
"character": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/common/Helper.ts",
|
||||
"line": 7,
|
||||
"description": "Common Helper class to define all the communications to **Azure App Insights API**."
|
||||
},
|
||||
{
|
||||
"file": "src/common/components/PerformanceStatistics.tsx",
|
||||
"line": 61,
|
||||
"description": "Using **Kusto query** to read the information from **Azure App Insights** and then to populate the data in a **Details List** or **Chart**.",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 49,
|
||||
"character": 13
|
||||
},
|
||||
"end": {
|
||||
"line": 61,
|
||||
"character": 87
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/common/Helper.ts",
|
||||
"line": 78,
|
||||
"description": "Passing the **Kusto query** to the helper method along with some key parameters.",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 69,
|
||||
"character": 5
|
||||
},
|
||||
"end": {
|
||||
"line": 78,
|
||||
"character": 6
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/common/Helper.ts",
|
||||
"line": 116,
|
||||
"description": "Sending the final consolidated URL with query and dynamic values to another helper method to get the actual response from **Azure App Insights**.\nBelow is the post url used\n\n**https://api.applicationinsights.io/v1/app**",
|
||||
"selection": {
|
||||
"start": {
|
||||
"line": 113,
|
||||
"character": 5
|
||||
},
|
||||
"end": {
|
||||
"line": 116,
|
||||
"character": 6
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"ref": "master"
|
||||
}
|
|
@ -1,6 +1,3 @@
|
|||
:global{
|
||||
@import 'node_modules/office-ui-fabric-react/dist/css/fabric.css';
|
||||
}
|
||||
.dataLabel {
|
||||
padding-right: 3px;
|
||||
font-size: 14px;
|
||||
|
@ -78,6 +75,7 @@
|
|||
}
|
||||
.chartContainer {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
}
|
||||
.chart {
|
||||
height: 358px !important;
|
||||
|
|
|
@ -2,10 +2,10 @@
|
|||
"@microsoft/generator-sharepoint": {
|
||||
"isCreatingSolution": false,
|
||||
"environment": "spo",
|
||||
"version": "1.7.1",
|
||||
"version": "1.10.0",
|
||||
"libraryName": "react-chartcontrol",
|
||||
"libraryId": "fb9665fb-4455-4b7f-99ab-2195920871fd",
|
||||
"packageManager": "npm",
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@ This sample contains several web parts that demonstrate how to use the ChartCont
|
|||
|
||||
The web parts in this sample are not intended to be used in production -- they simply demonstrate how you would use all the capabilities of the ChartControl.
|
||||
|
||||
> **NOTE:** If you are looking for a ready-to-use web part, please look into [joelfmrodrigues' cool react-modern-charts sample](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-modern-charts), which was built without the ChartControl.
|
||||
> **NOTE:** If you are looking for a ready-to-use web part, please look into [joelfmrodrigues' cool react-modern-charts sample](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-modern-charts), which was built without the `ChartControl`.
|
||||
|
||||
## About the samples
|
||||
|
||||
|
@ -16,7 +16,7 @@ We created the ChartControl by popular request of [@pnp/spfx-controls-react](htt
|
|||
|
||||
To keep things as easy as possible, the ChartControl supports (most) of the Chart.js functionality (yes, even the use of plugins!).
|
||||
|
||||
The samples in this solution mostly use code found from the Chart.js code samples -- with little or no conversion. Whereever possible, we localized strings, moved colors and styles to the web part's SCSS, and used Office Fabric UI components instead of regular buttons.
|
||||
The samples in this solution mostly use code found from the Chart.js code samples -- with little or no conversion. Wherever possible, we localized strings, moved colors and styles to the web part's SCSS, and used Office Fabric UI components instead of regular buttons.
|
||||
|
||||
Each sample retrieves data and passes it to the ChartControl using one of the 3 methods:
|
||||
|
||||
|
@ -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.7.1](https://img.shields.io/badge/SPFx-1.7.1-green.svg)
|
||||
![SPFx v1.10.0](https://img.shields.io/badge/SPFx-1.10.1-green.svg)
|
||||
|
||||
## Applies to
|
||||
|
||||
|
@ -192,6 +192,7 @@ react-chart-control | Hugo Bernier ([Tahoe Ninjas](http://tahoeninjas.blog), @be
|
|||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|January, 2019|Initial release
|
||||
1.1|July 02, 2020|Upgraded to SPFx 1.10.0
|
||||
|
||||
## Disclaimer
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "react-chartcontrol-client-side-solution",
|
||||
"id": "fb9665fb-4455-4b7f-99ab-2195920871fd",
|
||||
"version": "1.0.0.0",
|
||||
"version": "1.1.0.0",
|
||||
"includeClientSideAssets": true
|
||||
},
|
||||
"paths": {
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"main": "lib/index.js",
|
||||
"name": "react-chartcontrol",
|
||||
"version": "0.0.1",
|
||||
"version": "1.1.0",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
@ -11,10 +12,11 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.7.1",
|
||||
"@microsoft/sp-lodash-subset": "1.7.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.7.1",
|
||||
"@microsoft/sp-webpart-base": "1.7.1",
|
||||
"@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",
|
||||
"@pnp/common": "^1.2.8",
|
||||
"@pnp/logging": "^1.2.8",
|
||||
"@pnp/odata": "^1.2.8",
|
||||
|
@ -22,27 +24,29 @@
|
|||
"@pnp/spfx-controls-react": "1.11.0",
|
||||
"@pnp/spfx-property-controls": "^1.13.1",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.4.2",
|
||||
"@types/react-dom": "16.0.5",
|
||||
"@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.3.2",
|
||||
"react-dom": "16.3.2"
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.4.2"
|
||||
"@types/react": "16.8.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "1.7.1",
|
||||
"@microsoft/sp-tslint-rules": "1.7.1",
|
||||
"@microsoft/sp-module-interfaces": "1.7.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.7.1",
|
||||
"gulp": "~3.9.1",
|
||||
"@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",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2"
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
"manifestVersion": 2,
|
||||
|
||||
"requiresCustomScript": false,
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||||
"group": { "default": "Other" },
|
||||
|
|
|
@ -1,11 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.accessibleTable {
|
||||
.shomMeTheTable {
|
||||
|
@ -34,7 +35,9 @@
|
|||
font-size: $ms-font-size-xl;
|
||||
font-weight: $ms-font-weight-semibold;
|
||||
& span {
|
||||
font-size: $ms-font-size-16;
|
||||
//font-size: $ms-font-size-16;
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "fcba1920-e685-428a-8637-ab15883a2d0b",
|
||||
"alias": "AreaChartDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
"requiresCustomScript": false,
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 'AreaChartDemoWebPartStrings';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.areaChartDemo {
|
||||
color:inherit;
|
||||
|
|
|
@ -122,7 +122,6 @@ export default class AreaChartDemo extends React.Component<IAreaChartDemoProps,
|
|||
private _renderCommandBar(): JSX.Element {
|
||||
return (
|
||||
<CommandBar
|
||||
isSearchBoxVisible={false}
|
||||
items={[
|
||||
{
|
||||
key: 'randomizeData',
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "74f7231a-c3f1-4ef5-94e7-3d2dd97cb39b",
|
||||
"alias": "BarChartDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -2,10 +2,8 @@ import * as React from 'react';
|
|||
import * as ReactDom from 'react-dom';
|
||||
import * as strings from 'BarChartDemoWebPartStrings';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 { IBarChartDemoProps } from './components/IBarChartDemo.types';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.barChartDemo {
|
||||
color: inherit; // so that SCSS doesn't complain about an empty class
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"requiresCustomScript": false,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.barChartStatic {
|
||||
.container {
|
||||
|
@ -71,4 +72,4 @@
|
|||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "dd21a307-fd9f-4fef-8d9f-d8abcb83b814",
|
||||
"alias": "BubbleChartDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 'BubbleChartDemoWebPartStrings';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.bubbleChartDemo {
|
||||
color: inherit;
|
||||
|
|
|
@ -108,7 +108,6 @@ export default class BubbleChartDemo extends React.Component<IBubbleChartDemoPro
|
|||
private _renderCommandBar(): JSX.Element {
|
||||
return (
|
||||
<CommandBar
|
||||
isSearchBoxVisible={false}
|
||||
items={[
|
||||
{
|
||||
key: 'randomizeData',
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
"componentType": "WebPart",
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"requiresCustomScript": false,
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
|
|
|
@ -5,21 +5,8 @@ import * as ReactDom from 'react-dom';
|
|||
import { Version } from '@microsoft/sp-core-library';
|
||||
|
||||
// Stuff for out-of-the-box property panes
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneChoiceGroup,
|
||||
PropertyPaneLabel,
|
||||
PropertyPaneDropdown,
|
||||
PropertyPaneToggle,
|
||||
PropertyPaneTextField,
|
||||
IPropertyPaneChoiceGroupOption,
|
||||
PropertyPaneSlider,
|
||||
IPropertyPaneGroup,
|
||||
PropertyPaneButton,
|
||||
IPropertyPaneDropdownOption,
|
||||
PropertyPaneHorizontalRule
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
|
||||
import { IPropertyPaneConfiguration, PropertyPaneChoiceGroup, PropertyPaneLabel, PropertyPaneDropdown, PropertyPaneToggle, PropertyPaneTextField, IPropertyPaneChoiceGroupOption, PropertyPaneSlider, IPropertyPaneGroup, PropertyPaneButton, IPropertyPaneDropdownOption, PropertyPaneHorizontalRule } from "@microsoft/sp-property-pane";
|
||||
|
||||
// Needed to create drop down choices
|
||||
import {
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.chartinator {
|
||||
color: inherit;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.chartTitle {
|
||||
font-size: 14px;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
|
||||
import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
|
||||
import { IPropertyFieldRepeatingDataProps } from '.';
|
||||
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.propertyPaneGroupField {
|
||||
padding-top : 4px;
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import {
|
||||
IPropertyPaneField,
|
||||
PropertyPaneFieldType
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
|
||||
|
||||
import { IPropertyFieldRepeatingDataProps } from "./PropertyFieldRepeatingData.types";
|
||||
import { IPropertyFieldRepeatingDataHostProps } from './PropertyFieldRepeatingData.types';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
|
||||
import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
|
||||
import { ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
|
||||
|
||||
/**
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
|
||||
import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
|
||||
import { IPropertyPaneChartPaletteSelectorProps } from './IPropertyPaneChartPaletteSelectorProps';
|
||||
|
||||
export interface IPropertyPaneChartPaletteSelectorInternalProps extends IPropertyPaneCustomFieldProps, IPropertyPaneChartPaletteSelectorProps { }
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import {
|
||||
IPropertyPaneField,
|
||||
PropertyPaneFieldType
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
|
||||
|
||||
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
|
||||
import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
|
||||
import { IPropertyPaneDashSelectorProps } from './IPropertyPaneDashSelectorProps';
|
||||
|
||||
export interface IPropertyPaneDashSelectorInternalProps extends IPropertyPaneCustomFieldProps, IPropertyPaneDashSelectorProps { }
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import {
|
||||
IPropertyPaneField,
|
||||
PropertyPaneFieldType
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
|
||||
|
||||
import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.dashSelector {
|
||||
color: inherit;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "849fad01-2cf4-4653-88ef-1fa9151a7b17",
|
||||
"alias": "ComboChartDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 'ComboChartDemoWebPartStrings';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.comboChartDemo {
|
||||
color: inherit;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "3bc38cb3-d1b1-4572-8196-679445d39d58",
|
||||
"alias": "CustomPluginDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 'CustomPluginDemoWebPartStrings';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.customPluginDemo {
|
||||
color: inherit;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "907cfe87-fffe-4d9c-8fac-3ea23c3f2c09",
|
||||
"alias": "DonutPatternsDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -3,10 +3,8 @@ import * as ReactDom from 'react-dom';
|
|||
import * as strings from 'DonutPatternsDemoWebPartStrings';
|
||||
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.donutPatternsDemo {
|
||||
color:inherit;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "eeadd4a5-4787-4d86-a606-17271bcfe81b",
|
||||
"alias": "DynamicDataCallableWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -1,11 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.dynamicDataCallable {
|
||||
color: inherit;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "d5db1f38-c34b-4083-b2b0-99b09d9161b1",
|
||||
"alias": "DynamicDataConsumerWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -3,16 +3,8 @@ import * as ReactDom from 'react-dom';
|
|||
import { Version } from '@microsoft/sp-core-library';
|
||||
|
||||
// standard web part stuff
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField,
|
||||
PropertyPaneDynamicFieldSet,
|
||||
PropertyPaneDynamicField,
|
||||
IPropertyPaneConditionalGroup,
|
||||
DynamicDataSharedDepth,
|
||||
IWebPartPropertiesMetadata
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { BaseClientSideWebPart, IWebPartPropertiesMetadata } from "@microsoft/sp-webpart-base";
|
||||
import { IPropertyPaneConfiguration, PropertyPaneTextField, PropertyPaneDynamicFieldSet, PropertyPaneDynamicField, IPropertyPaneConditionalGroup, DynamicDataSharedDepth } from "@microsoft/sp-property-pane";
|
||||
|
||||
// dynamic data web parts
|
||||
import { DynamicProperty } from '@microsoft/sp-component-base';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.dynamicDataConsumer {
|
||||
.container {
|
||||
|
@ -71,4 +72,4 @@
|
|||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "a63646aa-098e-4c3f-b1f4-f32e9eed4013",
|
||||
"alias": "HorizontalBarDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.horizontalBarDemo {
|
||||
color: inherit;
|
||||
|
|
|
@ -77,7 +77,6 @@ export default class HorizontalBarDemo extends React.Component<IHorizontalBarDem
|
|||
private _renderCommandBar(): JSX.Element {
|
||||
return (
|
||||
<CommandBar
|
||||
isSearchBoxVisible={false}
|
||||
items={[
|
||||
{
|
||||
key: 'addData',
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "3b06de0f-5762-4160-8a2c-405f34a7d55d",
|
||||
"alias": "LineChartDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -2,10 +2,8 @@ import * as React from 'react';
|
|||
import * as ReactDom from 'react-dom';
|
||||
import * as strings from 'LineChartDemoWebPartStrings';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 { ILineChartDemoProps } from './components/ILineChartDemo.types';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.lineChartDemo {
|
||||
color: inherit;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "0ccdae4a-e8b0-4bd8-aba3-30d54444ee10",
|
||||
"alias": "PieChartDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 'PieChartDemoWebPartStrings';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.pieChartDemo {
|
||||
color:inherit;
|
||||
|
|
|
@ -96,7 +96,6 @@ export default class PieChartDemo extends React.Component<IPieChartDemoProps, {}
|
|||
private _renderCommandBar(): JSX.Element {
|
||||
return (
|
||||
<CommandBar
|
||||
isSearchBoxVisible={false}
|
||||
items={[
|
||||
{
|
||||
key: 'randomizeData',
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "75942037-254d-4c8d-a5d1-44031c957ebf",
|
||||
"alias": "PolarAreaDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 'PolarAreaDemoWebPartStrings';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.polarAreaDemo {
|
||||
color: inherit;
|
||||
|
|
|
@ -87,7 +87,6 @@ export default class PolarAreaDemo extends React.Component<IPolarAreaDemoProps,
|
|||
private _renderCommandBar(): JSX.Element {
|
||||
return (
|
||||
<CommandBar
|
||||
isSearchBoxVisible={false}
|
||||
items={[
|
||||
{
|
||||
key: 'randomizeData',
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "510b8ccc-c873-4a41-87ca-b43d94bb6d20",
|
||||
"alias": "RadarDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 'RadarDemoWebPartStrings';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.radarDemo {
|
||||
color: inherit;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"id": "98c90b31-f355-4c24-9997-a7c25e0ff016",
|
||||
"alias": "RealtimePluginDemoWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
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 'RealtimePluginDemoWebPartStrings';
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
//@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.realtimePluginDemo {
|
||||
color: inherit;
|
||||
|
|
|
@ -114,7 +114,6 @@ export default class RealtimePluginDemo extends React.Component<IRealtimePluginD
|
|||
private _renderCommandBar(): JSX.Element {
|
||||
return (
|
||||
<CommandBar
|
||||
isSearchBoxVisible={false}
|
||||
items={[
|
||||
{
|
||||
key: 'randomizeData',
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
"componentType": "WebPart",
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"requiresCustomScript": false,
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { BaseClientSideWebPart, } from "@microsoft/sp-webpart-base";
|
||||
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
|
||||
import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
|
||||
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.scatterChartDemo {
|
||||
color: inherit;
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"noUnusedLocals": false,
|
||||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
"@microsoft/generator-sharepoint": {
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.8.2",
|
||||
"version": "1.10.0",
|
||||
"libraryName": "react-kanban-board",
|
||||
"libraryId": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,16 +1,32 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 7/17/2019 12:00:00 AM
|
||||
---
|
||||
|
||||
# React Kanban Board Webpart
|
||||
|
||||
## Summary
|
||||
|
||||
|
||||
This solution contains an SPFx webpart which shows a Kanban board using Office UI Fabric components ([Office UI Fabric](https://developer.microsoft.com/fluentui/)).
|
||||
This solution contains an SPFx webpart that shows a kanban board using Office UI Fabric components ([Office UI Fabric](https://developer.microsoft.com/fluentui/)).
|
||||
The webpart uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.
|
||||
|
||||
![picture of the web part in action](assets/kanbanofficeUI.gif)
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
|
||||
![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
|
||||
|
||||
## Applies to
|
||||
|
||||
|
@ -43,29 +59,27 @@ Version|Date|Comments
|
|||
-------|----|--------
|
||||
1.0.0.0|July 17, 2019|Initial release
|
||||
1.0.1.0|April 21, 2020|Added support for Teams hosts
|
||||
2.0.0.0|July 10, 2020| jqwidgets replaced with a customKanban Board based on Office UI Component and IE11 Support
|
||||
2.0.0.0|July 10, 2020| jqwidgets replaced with a custom Kanban Board based on Office UI Component and IE11 Support
|
||||
|
||||
[Read More about the implementation of this Board](./src/kanban/Readme.md)
|
||||
[Read More about the implementation of this Board](./src/kanban/README.md)
|
||||
|
||||
## Usage
|
||||
* PNP Placeholder Control if not Configured
|
||||
* PNP WebpartTitle Control (Toggle Show/Hide in PropertyPane)
|
||||
* PNP Order PropertyPane Control (Change Position of Buckets)
|
||||
* PNP List Selection PropertyPane Control (including Filter on BaseTemplateId)
|
||||
* Usage of BucketEdit in Pane (Use an Component in PropertyPane (Custom Field))
|
||||
* PNP Placeholder control if not Configured
|
||||
* PNP WebpartTitle control (toggle Show/Hide in property pane)
|
||||
* PNP OrderPropertyPane control (change position of buckets)
|
||||
* PNP ListSelectionPropertyPane control (including filtering on BaseTemplateId)
|
||||
* Usage of BucketEdit in Pane (Use a component in property pane (custom field))
|
||||
* Office UI Fabric
|
||||
* PNP JS DataConnection to SharePoint
|
||||
|
||||
|
||||
<!---Thanks form @petkir to: -->
|
||||
<!---Thanks from @petkir to: -->
|
||||
<!--- -->
|
||||
<!---* [Daniel Westerdale](https://github.com/westerdaled) for Testing and inspiration (everytime again)-->
|
||||
<!---* [Hugo Bernier](https://github.com/hugoabernier) for Inspiration to use Office UI Fabric -->
|
||||
<!---* [Jean-Philippe CIVADE](https://github.com/ewidance) for Bug Report IE11 (initiator of rewrite of this Sample)-->
|
||||
<!---* [Jean-Philippe CIVADE](https://github.com/ewidance) for Bug Report IE11 (initiator of rewrite of this sample)-->
|
||||
<!---* [RamPrasadMeenavalli](https://github.com/RamPrasadMeenavalli) for the initial Idea-->
|
||||
|
||||
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
@ -83,9 +97,9 @@ Version|Date|Comments
|
|||
## Features
|
||||
|
||||
This sample highlights the following concepts
|
||||
* Binding SharePoint list data to an custom Kanban-Control
|
||||
* Binding SharePoint list data to a custom Kanban-Control
|
||||
* Updating SharePoint List Items based on events from the custom Kanban-Control
|
||||
|
||||
When a task is moved to different columns in the Kanban Board, the status of the respective SharePoint list item is updated using PnP JS
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-kanban-board" />
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "react-kanban-board-client-side-solution",
|
||||
"id": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
|
||||
"version": "1.0.1.0",
|
||||
"version": "2.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "react-kanban-board",
|
||||
"version": "1.0.1",
|
||||
"main": "lib/index.js",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
@ -11,11 +12,11 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.8.2",
|
||||
"@microsoft/sp-lodash-subset": "1.8.2",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.8.2",
|
||||
"@microsoft/sp-property-pane": "1.8.2",
|
||||
"@microsoft/sp-webpart-base": "1.8.2",
|
||||
"@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",
|
||||
"@pnp/common": "^1.3.3",
|
||||
"@pnp/logging": "^1.3.3",
|
||||
"@pnp/odata": "^1.3.3",
|
||||
|
@ -24,26 +25,28 @@
|
|||
"@pnp/spfx-controls-react": "1.19.0",
|
||||
"@pnp/spfx-property-controls": "1.19.0",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.7.22",
|
||||
"@types/react-dom": "16.8.0",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"classnames": "^2.2.6",
|
||||
"office-ui-fabric-react": "6.214.0",
|
||||
"react": "16.7.0",
|
||||
"react-dom": "16.7.0"
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.7.22"
|
||||
"@types/react": "16.8.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-2.9": "0.7.7",
|
||||
"@microsoft/sp-build-web": "1.8.2",
|
||||
"@microsoft/sp-module-interfaces": "1.8.2",
|
||||
"@microsoft/sp-tslint-rules": "1.8.2",
|
||||
"@microsoft/sp-webpart-workbench": "1.8.2",
|
||||
"@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",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2",
|
||||
"autoprefixer": "^9.8.4",
|
||||
"gulp": "~3.9.1",
|
||||
"react-html-parser": "^2.0.2"
|
||||
}
|
||||
|
|
|
@ -4,9 +4,8 @@ import * as strings from 'KanbanBoardStrings';
|
|||
import { IconButton } from 'office-ui-fabric-react/lib/Button';
|
||||
import { IKanbanTask } from './IKanbanTask';
|
||||
import { IKanbanBoardTaskSettings } from './IKanbanBoardTaskSettings';
|
||||
import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions';
|
||||
import classNames from 'classnames';
|
||||
import { IconNames, Persona, PersonaSize, Stack } from 'office-ui-fabric-react';
|
||||
import { Persona, PersonaSize } from 'office-ui-fabric-react';
|
||||
|
||||
export interface IKanbanTaskProps extends IKanbanTask, IKanbanBoardTaskSettings {
|
||||
|
||||
|
|
|
@ -4,9 +4,9 @@
|
|||
import * as React from 'react';
|
||||
import styles from './KanbanTaskManagedProp.module.scss';
|
||||
import { IKanbanTaskManagedProps, KanbanTaskMamagedPropertyType } from './IKanbanTask';
|
||||
import { IStackStyles, Stack } from 'office-ui-fabric-react/lib/Stack';
|
||||
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
|
||||
import { Persona, PersonaSize, PersonaPresence, IPersonaSharedProps, IPersonaProps } from 'office-ui-fabric-react';
|
||||
import { Stack } from 'office-ui-fabric-react/lib/Stack';
|
||||
import ReactHtmlParser from 'react-html-parser';
|
||||
import { Persona, PersonaSize, IPersonaProps } from 'office-ui-fabric-react';
|
||||
|
||||
export interface IKanbanTaskManagedPropProps extends IKanbanTaskManagedProps { }
|
||||
|
||||
|
|
|
@ -184,6 +184,8 @@ private _allowMove(taskId: string, prevBucket: IKanbanBucket, targetBucket: IKan
|
|||
```
|
||||
|
||||
## Leanings
|
||||
|
||||
Read more about [Drag and Drop](https://petkir.wordpress.com/2020/07/01/drag-and-drop-in-react-spfx/)
|
||||
```
|
||||
IKanbanTask {
|
||||
taskId: string;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
|
||||
"extends": "node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
|
@ -0,0 +1,32 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.10.0",
|
||||
"libraryName": "spfx-minesweeper",
|
||||
"libraryId": "550b232e-4d6f-476b-9594-e6408fc3e8bb",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2020 Pieter Heemeryck
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
|
@ -0,0 +1,58 @@
|
|||
# Minesweeper
|
||||
|
||||
## Summary
|
||||
|
||||
This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx web part!
|
||||
|
||||
![Minesweeper](./assets/Minesweeper.gif)
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
None.
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-minesweeper | [Pieter Heemeryck](https://twitter.com/heemeryckpieter)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|July, 2020|Initial release
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
* Clone this repository
|
||||
* in the command line run:
|
||||
* `npm install`
|
||||
* `gulp serve`
|
||||
|
||||
## Features
|
||||
|
||||
* Difficulties: Beginner, Intermediate, Expert
|
||||
* High scores are stored in localStorage
|
||||
* Mine mode / flag mode (swap left & right click), useful on mobile
|
||||
* [Chording](http://www.minesweeper.info/wiki/Chord)
|
||||
|
||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
* [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-minesweeper" />
|
Binary file not shown.
After Width: | Height: | Size: 817 KiB |
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"minesweeper-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/minesweeper/MinesweeperWebPart.js",
|
||||
"manifest": "./src/webparts/minesweeper/MinesweeperWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"MinesweeperWebPartStrings": "lib/webparts/minesweeper/loc/{locale}.js"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "spfx-minesweeper",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "spfx-minesweeper-client-side-solution",
|
||||
"id": "550b232e-4d6f-476b-9594-e6408fc3e8bb",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/spfx-minesweeper.sppkg"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue