) => {
+ const data: Chart.ChartData = {
+ datasets: [{
+ label: strings.DataSet1Label,
+ backgroundColor: chartBackgroundColors[0],
+ borderColor: chartColors[0],
+ hoverBackgroundColor: chartColors[0],
+ borderWidth: 1,
+ data: bubbleArrays[0]
+ }, {
+ label: strings.DataSet2Label,
+ backgroundColor: chartBackgroundColors[1],
+ borderColor: chartColors[1],
+ hoverBackgroundColor: chartColors[1],
+ borderWidth: 2,
+ data: bubbleArrays[1]
+ }]
+ };
+
+ resolve(data);
+ });
+ });
+ }
+
+ /**
+ * Called when user clicks on Randomize Data.
+ * Reloads the entire dataset with newly retrieved randomized numbers
+ */
+ private _handleRandomizeData = () => {
+ const { data } = this._chartElem.getChart();
+ data.datasets.forEach((dataset) => {
+ // get the data as array of IBubblePoint
+ dataset.data = this._generateData();
+ });
+
+ this._chartElem.update();
+ }
+
+ /**
+ * Handles requests to add a new dataset.
+ */
+ private _handleAddDataset = () => {
+ // get the chart's data
+ const { data } = this._chartElem.getChart();
+
+ data.datasets.push({
+ backgroundColor: chartBackgroundColors[data.datasets.length % chartColors.length],
+ borderColor: chartColors[data.datasets.length % chartColors.length],
+ hoverBackgroundColor: chartColors[data.datasets.length % chartColors.length],
+ data: this._generateData(),
+ borderWidth: Math.min(Math.max(1, data.datasets.length + 1), MAX_BORDERWIDTH)
+ });
+
+ // update that chart
+ this._chartElem.update();
+ }
+
+ /**
+ * Removes the oldset dataset
+ */
+ private _handleRemoveDataset = () => {
+ const { data } = this._chartElem.getChart();
+ data.datasets.shift();
+
+ // update that chart
+ this._chartElem.update();
+ }
+
+ private _generateData(): Chart.ChartPoint[] {
+ const data: Chart.ChartPoint[] = [];
+
+ for (let i = 0; i < DATA_COUNT; ++i) {
+ data.push({
+ x: MockChartDataProvider.getRandomNumber(),
+ y: MockChartDataProvider.getRandomNumber(),
+ r: Math.abs(MockChartDataProvider.getRandomNumber()) / 5
+ });
+ }
+
+ return data;
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/IBubbleChartDemo.types.ts b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/IBubbleChartDemo.types.ts
new file mode 100644
index 000000000..62a2e6ab1
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/IBubbleChartDemo.types.ts
@@ -0,0 +1,3 @@
+export interface IBubbleChartDemoProps {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/loc/en-us.js
new file mode 100644
index 000000000..a07b01149
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/loc/en-us.js
@@ -0,0 +1,13 @@
+define([], function() {
+ return {
+ "ChartTitle": "Bubble Chart",
+ "DataSet1Label": "My first dataset",
+ "DataSet2Label": "My second dataset",
+ "RandomizeCommandLabel": "Randomize data",
+ "AddDatasetCommandLabel": "Add dataset",
+ "RemoveDatasetCommandLabel": "Remove dataset",
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl to render a bubble chart as per the Chart.js sample
+ Note that this example uses points that provide an x and y coordinate, along with a r value, for the bubble's radius.`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..905f703c1
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/loc/mystrings.d.ts
@@ -0,0 +1,15 @@
+declare interface IBubbleChartDemoWebPartStrings {
+ ChartTitle: string;
+ DataSet1Label: string;
+ DataSet2Label: string;
+ RandomizeCommandLabel: string;
+ AddDatasetCommandLabel: string;
+ RemoveDatasetCommandLabel: string;
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'BubbleChartDemoWebPartStrings' {
+ const strings: IBubbleChartDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.manifest.json
new file mode 100644
index 000000000..f92a89222
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.manifest.json
@@ -0,0 +1,29 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "604dd344-80a9-4efb-9cd5-7caddc5ac653",
+ "alias": "ChartinatorWebPart",
+ "componentType": "WebPart",
+ "version": "*",
+ "manifestVersion": 2,
+ "requiresCustomScript": false,
+ "preconfiguredEntries": [
+ {
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": {
+ "default": "Other"
+ },
+ "title": {
+ "default": "Chartinator"
+ },
+ "description": {
+ "default": "Easily create and configure a chart to show your data visually."
+ },
+ "officeFabricIconFontName": "Chart",
+ "properties": {
+ "description": "Chartinator",
+ "dataSourceType": 0,
+ "data": []
+ }
+ }
+ ]
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
new file mode 100644
index 000000000..9fcca3a7e
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
@@ -0,0 +1,1592 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+
+// Needed for data versions
+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';
+
+// Needed to create drop down choices
+import {
+ IDropdownOption
+} from 'office-ui-fabric-react/lib/components/Dropdown';
+
+// Needed for charts
+import { ChartPalette, PaletteGenerator, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+// PnP property fields
+import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber';
+import { PropertyFieldSpinButton } from '@pnp/spfx-property-controls/lib/PropertyFieldSpinButton';
+import { PropertyFieldToggleWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldToggleWithCallout';
+import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
+import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
+import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
+
+// Component that actually renders the web part content
+import Chartinator from './components/Chartinator';
+import { IChartinatorProps, DataSourceType } from './components/Chartinator.types';
+
+// Needed to generate unique data row ids
+import { Guid } from '@microsoft/sp-core-library';
+
+// Custom property field
+import { PropertyFieldRepeatingData } from './controls/PropertyFieldRepeatingData';
+import { PropertyPaneChartPaletteSelector } from './controls/PropertyPaneChartPaletteSelector';
+import { PropertyPaneDashSelector } from './controls/PropertyPaneDashSelector';
+
+// Properties for this web part
+// I prefer to keep the web part props as a
+// separate file -- keeps things cleaner
+// (in my mind, at least)
+import {
+ IChartinatorWebPartProps,
+} from './ChartinatorWebPart.types';
+
+// Needed for localization and other resource-types
+import * as Assets from './LocalizedResources';
+import * as strings from 'ChartinatorWebPartStrings';
+import { ListService } from '../../services/ListService/ListService';
+import { IListService } from '../../services/ListService/IListService';
+import { IListField } from '../../services/ListService/IListField';
+import { DashType, DashStrokes } from './controls/PropertyPaneDashSelector/components/DashSelector.types';
+
+/**
+ * Constant for the number of colors to show in the
+ * palette previews.
+ * Chart palettes in Office show 6 colours, so who
+ * am I to argue with them?
+ */
+const NUMCOLORS: number = 6;
+
+/**Default values -- store them as constants because
+ * we refer to them in a few places
+ */
+const DEFAULT_CUTOUTPERCENTAGE: number = 50;
+const DEFAULT_CIRCUMFERENCE: number = 100;
+const DEFAULT_CHARTROTATION: number = -180;
+const DEFAULT_POINTRADIUS = 3;
+
+export default class ChartinatorWebPart extends BaseClientSideWebPart {
+ private _fields: IListField[];
+
+ /**
+ * Draws the chartinator
+ */
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ Chartinator,
+ {
+ ...this.properties, // passes all properties without having to list every single one
+ context: this.context,
+ displayMode: this.displayMode,
+ radialChart: this._isRadialChart(),
+ updateTitle: (value: string) => {
+ // when title is changed, store the new title
+ this.properties.title = value;
+ }
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ /**
+ * Resets data when the chart type changes
+ */
+ protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
+ // If the chart type is changed, always reset the data to prevent
+ // nasty errors from ChartJs.
+ if (propertyPath === 'chartType') {
+ // Bubble charts datasets are incompatible with other chart types
+ if (oldValue === ChartType.Bubble || newValue === ChartType.Bubble) {
+ this._initalizeData();
+
+ }
+ // so are scatter charts
+ else if (oldValue === ChartType.Scatter || newValue === ChartType.Scatter) {
+ this._initalizeData();
+ }
+
+ // every other chart type is compatible with other charts
+ }
+
+ if (propertyPath === 'dataSourceListId' && newValue) {
+ this._getFields().then(fields => {
+ this.properties.dataLabelField = undefined;
+ this.properties.dataValueField = undefined;
+ this.properties.dataYValueField = undefined;
+ this.properties.dataRValueField = undefined;
+ this._fields = fields;
+ this.context.propertyPane.refresh();
+ });
+ }
+ }
+
+ protected onPropertyPaneConfigurationStart(): void {
+ this._getFields().then(fields => {
+ this._fields = fields;
+ this.context.propertyPane.refresh();
+ });
+ }
+
+ /***
+ * called when web part is disposed
+ */
+ protected onDispose(): void {
+ 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
+ * pre-setting the properties in the manifest file,
+ * but I wanted to make it easy to test all the settings
+ * without having to remove and re-add the web part.
+ */
+ protected onInit(): Promise {
+ return new Promise((resolve, _reject) => {
+
+ // Initialize data if no data yet
+ if (this.properties.data === undefined) {
+ this._initalizeData();
+ }
+
+ // Default chart type is bar
+ if (this.properties.chartType === undefined) {
+ this.properties.chartType = ChartType.Bar;
+ }
+
+ // Default data type is manual
+ if (this.properties.dataSourceType === undefined) {
+ this.properties.dataSourceType = DataSourceType.Static;
+ }
+
+ // Default ChartJs animation duration is 1000 milliseconds
+ if (this.properties.animationDuration === undefined) {
+ this.properties.animationDuration = 1000;
+ }
+
+ // Default ChartJs animation is easOutQuart
+ if (this.properties.animationEasing === undefined) {
+ this.properties.animationEasing = 'easeOutQuart';
+ }
+
+ // Layout: default is no padding.
+ if (this.properties.leftPadding === undefined) {
+ this.properties.leftPadding = 0;
+ }
+
+ if (this.properties.rightPadding === undefined) {
+ this.properties.rightPadding = 0;
+ }
+
+ if (this.properties.topPadding === undefined) {
+ this.properties.topPadding = 0;
+ }
+
+ if (this.properties.bottomPadding === undefined) {
+ this.properties.bottomPadding = 0;
+ }
+
+ // legend: ChartJs's default is to show it, but
+ // we hide it to appear consistent with the
+ // out-of-the-box Quick Chart web part.
+ if (this.properties.legendPosition === undefined) {
+ this.properties.legendPosition = 'none';
+ }
+
+ // legends are not reversed by default
+ if (this.properties.legendReversed === undefined) {
+ this.properties.legendReversed = false;
+ }
+
+ // ChartJs will render 'undefined' in the tooltips
+ // and legends if you don't provide a dataset name.
+ // Use the standard 'My Dataset' as the default value.
+ if (this.properties.dataSetName === undefined) {
+ this.properties.dataSetName = strings.DataSetDefault;
+ }
+
+ // tooltip are enabled by default in ChartJs, but
+ // we want this to behave more like the
+ // out-of-the-box Quick Charts web part, so we
+ // disable them.
+ if (this.properties.tooltipEnabled === undefined) {
+ this.properties.tooltipEnabled = false;
+ }
+
+ // Default ChartJs tooltip mode is 'nearest'
+ if (this.properties.tooltipMode === undefined) {
+ this.properties.tooltipMode = 'nearest';
+ }
+
+ // Default ChartJs interset is enabled.
+ if (this.properties.tooltipIntersect === undefined) {
+ this.properties.tooltipIntersect = true;
+ }
+
+ // Default tooltip position in ChartJs is average
+ if (this.properties.tooltipPosition === undefined) {
+ this.properties.tooltipPosition = 'average';
+ }
+
+ // ChartControl uses Colorful1 as the default option
+ // -- just like Office charts do.
+ if (this.properties.chartPalette === undefined) {
+ this.properties.chartPalette = ChartPalette.OfficeColorful1;
+ }
+
+ // Lines are usually on for line charts... otherwise, they'd
+ // just be charts :-)
+ if (this.properties.lineShowLine === undefined) {
+ this.properties.lineShowLine = true;
+ }
+
+ // Stepped lines are off by default
+ if (this.properties.lineStepped === undefined) {
+ this.properties.lineStepped = false;
+ }
+
+ if (this.properties.lineFill === undefined) {
+ this.properties.lineFill = 'none';
+ }
+
+ // Point style default in ChartJs is circle
+ if (this.properties.pointStyle === undefined) {
+ this.properties.pointStyle = 'circle';
+ }
+
+ // Point radius default in ChartJs is 3
+ if (this.properties.pointRadius === undefined) {
+ this.properties.pointRadius = DEFAULT_POINTRADIUS;
+ }
+
+ // Point rotation default in ChartJs is 0
+ if (this.properties.pointRotation === undefined) {
+ this.properties.pointRotation = 0; // don't rotate
+ }
+
+ // Default cutout percentage for donut charts is 50
+ if (this.properties.cutoutPercentage === undefined) {
+ this.properties.cutoutPercentage = DEFAULT_CUTOUTPERCENTAGE;
+ }
+
+ if (this.properties.chartRotation === undefined) {
+ this.properties.chartRotation = DEFAULT_CHARTROTATION;
+ }
+
+ if (this.properties.circumference === undefined) {
+ this.properties.circumference = DEFAULT_CIRCUMFERENCE;
+ }
+
+ if (this.properties.offsetGridLines === undefined) {
+ this.properties.offsetGridLines = true;
+ }
+
+ if (this.properties.borderWidth === undefined) {
+ this.properties.borderWidth = 1;
+ }
+
+ if (this.properties.borderDash === undefined) {
+ this.properties.borderDash = DashType.Solid;
+ }
+
+ if (this.properties.borderJoinStyle === undefined) {
+ this.properties.borderJoinStyle = 'miter';
+ }
+
+ if (this.properties.borderCapStyle === undefined) {
+ this.properties.borderCapStyle = 'butt';
+ }
+
+ // We like to show gridlines by default
+ if (this.properties.xAxisShowGridlines === undefined) {
+ this.properties.xAxisShowGridlines = true;
+ }
+
+ if (this.properties.yAxisShowGridlines === undefined) {
+ this.properties.yAxisShowGridlines = true;
+ }
+
+ if (this.properties.yAxisBeginAtZero === undefined) {
+ this.properties.yAxisBeginAtZero = true;
+ }
+
+ resolve(undefined);
+ });
+ }
+
+ /**
+ * Renders the property pane.
+ *
+ * Note that normally the property groups are rendered directly within
+ * this function, but we have so many settings (and we wanted some
+ * conditional settings) that we split each setting group into their
+ * respective function.
+ *
+ * Here, we just call each _render____PropertyGroup function in the order
+ * we want them to appear.
+ */
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ const { chartType } = this.properties;
+ // create a configuration variable so that we can change its content
+ // before returning it
+ const configuration: IPropertyPaneConfiguration = {
+ pages: [
+ {
+ displayGroupsAsAccordion: true,
+ header: {
+ description: strings.PropertyPaneDescription
+ },
+ groups: [
+ // chart type
+ this._renderChartTypePropertyGroup(),
+
+ // Data Source
+ this._renderDataSourcePropertyGroup(),
+
+ // Chart Palette
+ this._renderPalettePropertyGroup(),
+
+ // Layout
+ this._renderLayoutPropertyGroup(),
+
+ // Legend
+ this._renderLegendPropertyGroup(),
+
+ // Tooltips
+ this._renderTooltipPropertyGroup(),
+
+ // Animation
+ this._renderAnimationGroup(),
+ ]
+ },
+ ]
+ };
+
+ // Insert options in reverse order so that we don't have to worry about
+ // whether something else was inserted before it
+ const { groups } = configuration.pages[0];
+
+ // These two options shouldn't appear if the charts are radial
+ // e.g.: pie, donut, etc.
+ if (!this._isRadialChart()) {
+ // X Axis -- insert as the 4th item
+ groups.splice(3, 0, this._renderXAxisPropertyGroup());
+
+ // Y Axis -- insert as the 5th item
+ groups.splice(4, 0, this._renderYAxisPropertyGroup());
+ }
+
+ // Chart settings -- changes based on what chart type you select
+
+ // Scatter, radar and line charts can configure points
+ if (chartType === ChartType.Line || chartType === ChartType.Scatter || chartType === ChartType.Radar || chartType === ChartType.Bubble) {
+ groups.splice(3, 0, this._renderPointSettingsPropertyGroup());
+ }
+
+ // Line charts can configure line and area settings
+ if (chartType === ChartType.Line) {
+ groups.splice(3, 0, this._renderLineSettingsPropertyGroup());
+ }
+
+ // Donut charts, pie charts, polar charts
+ if (chartType === ChartType.Doughnut || chartType == ChartType.Pie || chartType == ChartType.PolarArea) {
+ groups.splice(3, 0, this._renderDonutPiePolarSettingsPropertyGroup());
+ }
+
+ if (chartType === ChartType.Bar || chartType === ChartType.HorizontalBar) {
+ groups.splice(3, 0, this._renderBarSettingsPropertyGroup());
+ }
+
+ return configuration;
+ }
+
+ /**
+ * Shows legend settings
+ */
+ private _renderLegendPropertyGroup = (): IPropertyPaneGroup => {
+ return {
+ groupName: strings.LegendGroupName,
+ isCollapsed: true,
+ groupFields: [
+ PropertyPaneLabel('legendPosition', {
+ text: strings.LegendGroupDescription
+ }),
+ PropertyPaneChoiceGroup('legendPosition', {
+ label: strings.LegendPositionFieldLabel,
+ options: [
+ {
+ key: 'none',
+ text: strings.None,
+ selectedImageSrc: Assets.LegendNone,
+ imageSrc: Assets.LegendNone,
+ },
+ {
+ key: 'top',
+ text: strings.Top,
+ selectedImageSrc: Assets.LegendTop,
+ imageSrc: Assets.LegendTop,
+ },
+ {
+ key: 'bottom',
+ text: strings.Bottom,
+ selectedImageSrc: Assets.LegendBottom,
+ imageSrc: Assets.LegendBottom,
+ },
+ {
+ key: 'left',
+ text: strings.Left,
+ selectedImageSrc: Assets.LegendLeft,
+ imageSrc: Assets.LegendLeft,
+ },
+ {
+ key: 'right',
+ text: strings.Right,
+ selectedImageSrc: Assets.LegendRight,
+ imageSrc: Assets.LegendRight,
+ },
+ ]
+ }),
+ this.properties.legendPosition !== 'none' && PropertyPaneToggle('legendReversed', {
+ label: strings.LegendReversedFieldLabel,
+ onText: strings.On,
+ offText: strings.Off
+ })
+ ]
+ };
+ }
+
+ /**
+ * Shows layout settings
+ */
+ private _renderLayoutPropertyGroup = (): IPropertyPaneGroup => {
+ const {
+ leftPadding,
+ topPadding,
+ rightPadding,
+ bottomPadding
+ } = this.properties;
+ return {
+ groupName: strings.LayoutGroupName,
+ isCollapsed: true,
+ groupFields: [
+ PropertyPaneLabel('topPadding', {
+ text: strings.LayoutGroupDescription
+ }),
+ PropertyFieldNumber('topPadding', {
+ key: 'topPadding',
+ label: strings.TopPaddingFieldLabel,
+ value: topPadding,
+ minValue: 0
+ }),
+ PropertyFieldNumber('leftPadding', {
+ key: 'leftPadding',
+ label: strings.LeftPaddingFieldLabel,
+ value: leftPadding,
+ minValue: 0
+ }),
+ PropertyFieldNumber('bottomPadding', {
+ key: 'bottomPadding',
+ label: strings.BottomPaddingFieldLabel,
+ value: bottomPadding,
+ minValue: 0
+ }),
+ PropertyFieldNumber('rightPadding', {
+ key: 'rightPadding',
+ label: strings.RightPaddingFieldLabel,
+ value: rightPadding,
+ minValue: 0
+ }),
+ ]
+ };
+ }
+
+ /**
+ * Shows X axis settings
+ */
+ private _renderXAxisPropertyGroup = (): IPropertyPaneGroup => {
+ const radialChart: boolean = this._isRadialChart();
+ const {
+ xAxisLabelEnabled
+ } = this.properties;
+
+ // Axis settings don't show up if the chart type is radial
+ return {
+ groupName: strings.XAxisGroupName,
+ isCollapsed: true,
+ groupFields: [
+ PropertyPaneLabel('chartType', {
+ text: radialChart ? strings.GroupNotAvailable : strings.XAxisGroupDescription
+ }),
+ PropertyPaneToggle('xAxisLabelEnabled', {
+ disabled: radialChart,
+ label: strings.AxisShowLabel,
+ offText: strings.Hide,
+ onText: strings.Show,
+ }),
+ PropertyPaneTextField('xAxisLabelText', {
+ disabled: xAxisLabelEnabled !== true,
+ label: strings.AxisLabelText,
+ }),
+ PropertyPaneHorizontalRule(),
+ PropertyPaneToggle('xAxisShowGridlines', {
+ label: strings.ShowGridlinesFieldLabel,
+ offText: strings.Hide,
+ onText: strings.Show
+ }),
+ ]
+ };
+ }
+
+ /**
+ * Shows Y axis settings
+ */
+ private _renderYAxisPropertyGroup = (): IPropertyPaneGroup => {
+ const radialChart: boolean = this._isRadialChart();
+ const {
+ yAxisLabelEnabled,
+ yAxisBeginAtZero,
+ yAxisMax,
+ yAxisMaxTicksLimit,
+ yAxisMin,
+ yAxisStepSize
+ } = this.properties;
+
+ return {
+ groupName: strings.YAxisGroupName,
+ isCollapsed: true,
+ groupFields: [
+ PropertyPaneLabel('chartType', {
+ text: radialChart ? strings.GroupNotAvailable : strings.YAxisGroupDescription
+ }),
+ PropertyPaneToggle('yAxisLabelEnabled', {
+ disabled: radialChart,
+ label: strings.AxisShowLabel,
+ offText: strings.Hide,
+ onText: strings.Show
+ }),
+ PropertyPaneTextField('yAxisLabelText', {
+ disabled: yAxisLabelEnabled !== true,
+ label: strings.AxisLabelText,
+ }),
+ PropertyPaneHorizontalRule(),
+ PropertyPaneToggle('yAxisShowGridlines', {
+ label: strings.ShowGridlinesFieldLabel,
+ offText: strings.Hide,
+ onText: strings.Show
+ }),
+ PropertyPaneHorizontalRule(),
+ PropertyPaneToggle('yAxisBeginAtZero', {
+ disabled: radialChart,
+ label: strings.YAxisBeginAtZero,
+ offText: strings.Off,
+ onText: strings.On
+ }),
+ PropertyFieldNumber('yAxisMin', {
+ key: 'yAxisMin',
+ label: strings.YAxisMinValueFieldLabel,
+ value: yAxisMin,
+ disabled: radialChart || yAxisBeginAtZero
+ }),
+ PropertyFieldNumber('yAxisMax', {
+ key: 'yAxisMax',
+ label: strings.YAxisMaxValueFieldLabel,
+ value: yAxisMax,
+ disabled: radialChart
+ }),
+ PropertyFieldNumber('yAxisMaxTicksLimit', {
+ key: 'yAxisMaxTicksLimit',
+ label: strings.YAxisMaxStepsFieldLabel,
+ value: yAxisMaxTicksLimit,
+ disabled: radialChart
+ }),
+ PropertyFieldNumber('yAxisStepSize', {
+ key: 'yAxisStepSize',
+ label: strings.YAxisStepSizeFieldLabel,
+ value: yAxisStepSize,
+ disabled: radialChart
+ })
+ ]
+ };
+ }
+
+ /**
+ * Shows palette settings
+ */
+ private _renderPalettePropertyGroup = (): IPropertyPaneGroup => {
+ const {
+ chartPalette
+ } = this.properties;
+ return {
+ groupName: strings.PaletteGroupName,
+ isCollapsed: true,
+ groupFields: [
+ PropertyPaneLabel('chartPalette', {
+ text: strings.PaletteGroupDescription
+ }),
+ PropertyPaneChartPaletteSelector('chartPalette', {
+ label: strings.ColorPaletteFieldLabel,
+ disabled: false,
+ selectedKey: chartPalette,
+ options: this._getPaletteOptions(),
+ onPropertyChange: (propertyPath: string, newValue: any) => this._handlePropertyChange(propertyPath, newValue),
+ }),
+ ]
+ };
+ }
+
+ /**
+ * Shows chart type settings
+ */
+ private _renderChartTypePropertyGroup = (): IPropertyPaneGroup => {
+ const {
+ chartType
+ } = this.properties;
+
+ return {
+ groupName: strings.ChartTypeGroupName,
+ groupFields: [
+ PropertyPaneChoiceGroup('chartType', {
+ options: this._getChartChoices()
+ }),
+ PropertyPaneLabel('chartType', {
+ text: strings.ChartDescription[chartType]
+ })
+ ]
+ };
+ }
+
+ /**
+ * Shows data source settings
+ */
+ private _renderDataSourcePropertyGroup = (): IPropertyPaneGroup => {
+ const {
+ chartType,
+ dataSourceType
+ } = this.properties;
+
+ const hasX: boolean = chartType === ChartType.Bubble || chartType === ChartType.Scatter;
+ const hasY: boolean = chartType === ChartType.Bubble || chartType === ChartType.Scatter;
+ const hasR: boolean = chartType === ChartType.Bubble;
+
+ return {
+ groupName: strings.DataGroupName,
+ groupFields: [
+ PropertyPaneTextField('dataSetName', {
+ label: strings.DataSetFieldName,
+ }),
+ PropertyPaneHorizontalRule(),
+ PropertyPaneChoiceGroup('dataSourceType', {
+ options: [
+ {
+ key: DataSourceType.Static,
+ text: strings.StaticDataSource,
+ },
+ {
+ key: DataSourceType.List,
+ text: strings.ListDataSource,
+ }
+ ]
+ }),
+ dataSourceType === DataSourceType.Static && PropertyFieldRepeatingData({
+ key: 'repeatingData',
+ data: this.properties.data,
+ chartType: chartType,
+ onDataChanged: (data: any) => this._handleChangeData(data)
+ }),
+ dataSourceType === DataSourceType.List && PropertyFieldListPicker('dataSourceListId', {
+ label: strings.DataSourcListIdFieldLabel,
+ selectedList: this.properties.dataSourceListId,
+ includeHidden: false,
+ orderBy: PropertyFieldListPickerOrderBy.Title,
+ disabled: false,
+ onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+ properties: this.properties,
+ context: this.context,
+ onGetErrorMessage: null,
+ deferredValidationTime: 0,
+ key: 'dataSourceListId'
+ }),
+ dataSourceType === DataSourceType.List && PropertyPaneDropdown('dataValueField', {
+ options: this._getDataFields(),
+ label: hasX ? strings.DataSourceDataXValueFieldLabel : strings.DataSourceDataValueFieldLabel,
+ selectedKey: this.properties.dataValueField
+ }),
+ dataSourceType === DataSourceType.List && hasY && PropertyPaneDropdown('dataYValueField', {
+ options: this._getDataFields(),
+ label: strings.DataSourceDataYValueFieldLabel,
+ selectedKey: this.properties.dataYValueField
+ }),
+ dataSourceType === DataSourceType.List && hasR && PropertyPaneDropdown('dataRValueField', {
+ options: this._getDataFields(),
+ label: strings.DataSourceDataRValueFieldLabel,
+ selectedKey: this.properties.dataRValueField
+ }),
+ dataSourceType === DataSourceType.List && PropertyPaneDropdown('dataLabelField', {
+ options: this._getLabelFields(),
+ label: strings.DataSourceDataLabelFieldLabel,
+ selectedKey: this.properties.dataLabelField
+ })
+ ]
+ };
+ }
+
+ /**
+ * Shows line chart-specific settings
+ */
+ private _renderLineSettingsPropertyGroup = (): IPropertyPaneGroup => {
+ return {
+ groupName: strings.LineSettingsGroupName,
+ isCollapsed: true,
+ groupFields: [
+ PropertyFieldToggleWithCallout('lineShowLine', {
+ disabled: this.properties.lineStepped === true,
+ key: 'lineShowLine',
+ label: strings.LineShowLinesFieldLabel,
+ onText: strings.LineShowLinesOn,
+ offText: strings.LineShowLinesOff,
+ checked: this.properties.lineShowLine !== false,
+ calloutContent: React.createElement('div', {}, strings.LineShowLinesFieldTooltip),
+ calloutTrigger: CalloutTriggers.Hover,
+ }),
+ PropertyFieldToggleWithCallout('lineStepped', {
+ disabled: this.properties.lineShowLine === false,
+ key: 'lineStepped',
+ label: strings.LineSteppedFieldLabel,
+ onText: strings.LineSteppedOn,
+ offText: strings.LineSteppedOff,
+ checked: this.properties.lineStepped !== false,
+ calloutContent: React.createElement('div', {},
+ // always tell people why you disable options
+ this.properties.lineShowLine === false ?
+ strings.LineSteppedFieldTooltipDisabled // disabled because show lines is off
+ : strings.LineSteppedFieldTooltipEnabled // enabled tooltip
+ ),
+ calloutTrigger: CalloutTriggers.Hover,
+ }),
+ PropertyFieldToggleWithCallout('lineCurved', {
+ disabled: this.properties.lineStepped === true || this.properties.lineShowLine === false,
+ // I know, I know, I just like to explictly say true to make it more legible
+ key: 'lineCurved',
+ label: strings.LineCurvedFieldName,
+ onText: strings.LineCurvedOn,
+ offText: strings.LineCurvedOff,
+ checked: this.properties.lineCurved !== false,
+ calloutContent: React.createElement('div', {},
+ // always tell people why you disable options
+ this.properties.lineShowLine === false ?
+ strings.LineCurvedFieldTooltipDisabled // disabled because show lines is off
+ : this.properties.lineStepped === true ?
+ strings.LineCurvedFieldTooltipDisabledCozStepped // disabled because stepped lines are on
+ : strings.LineCurvedFieldTooltipEnabled // enabled tooltip
+ ),
+ calloutTrigger: CalloutTriggers.Hover,
+ }),
+ PropertyFieldSpinButton('borderWidth', {
+ decimalPlaces: 0,
+ min: 0,
+ step: 1,
+ suffix: strings.PixelUnitSuffix,
+ label: strings.BorderWidthFieldLabel,
+ key: 'borderWidthId',
+ onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+ properties: this.properties,
+ initialValue: this.properties.borderWidth
+ }),
+ PropertyFieldColorPicker('borderColor', {
+ label: strings.BorderColorFieldLabel,
+ selectedColor: this.properties.borderColor,
+ onPropertyChange: this.onPropertyPaneFieldChanged,
+ properties: this.properties,
+ alphaSliderHidden: false,
+ style: PropertyFieldColorPickerStyle.Inline,
+ key: 'borderColorId'
+ }),
+ PropertyPaneDashSelector('borderDash', {
+ label: "Dash type",
+ disabled: false,
+ selectedKey: this.properties.borderDash,
+ options: this._getDashOptions(),
+ onPropertyChange: (propertyPath: string, newValue: any) => this._handlePropertyChange(propertyPath, newValue)
+ }),
+ PropertyPaneDropdown('borderCapStyle', {
+ label: strings.LineCapStyleFieldLabel,
+ selectedKey: this.properties.borderCapStyle,
+ options: [
+ {
+ key: 'butt',
+ text: strings.CapStyleButt // tee hee
+ },
+ {
+ key: 'round',
+ text: strings.CapStyleRound
+ },
+ {
+ key: 'square',
+ text: strings.CapStyleSquare
+ }
+ ]
+ }),
+ PropertyPaneDropdown('borderJoinStyle', {
+ label: strings.LineJoinStyleFieldLabel,
+ selectedKey: this.properties.borderJoinStyle,
+ options: [
+ {
+ key: 'bevel',
+ text: strings.JoinTypeBevel
+ },
+ {
+ key: 'round',
+ text: strings.JoinTypeRound
+ },
+ {
+ key: 'miter',
+ text: strings.JoinTypeMiter
+ }
+ ]
+ }),
+ PropertyPaneHorizontalRule(),
+ PropertyPaneChoiceGroup('lineFill', {
+ label: strings.FillFieldLabel,
+ options: [
+ {
+ key: 'none',
+ text: strings.FillNone,
+ selectedImageSrc: Assets.FillNone,
+ imageSrc: Assets.FillNone,
+ },
+ {
+ key: 'start',
+ text: strings.FillStart,
+ selectedImageSrc: Assets.FillStart,
+ imageSrc: Assets.FillStart,
+ },
+ {
+ key: 'end',
+ text: strings.FillEnd,
+ selectedImageSrc: Assets.FillEnd,
+ imageSrc: Assets.FillEnd,
+ },
+ {
+ key: 'origin',
+ text: strings.FillOrigin,
+ selectedImageSrc: Assets.FillOrigin,
+ imageSrc: Assets.FillOrigin,
+ },
+ ]
+ }),
+
+ ]
+ };
+ }
+
+ /**
+ * Renders the point configuration propety group
+ */
+ private _renderPointSettingsPropertyGroup = (): IPropertyPaneGroup => {
+ return {
+ groupName: strings.PointSettingsGroup,
+ isCollapsed: true,
+ groupFields: [
+ PropertyPaneChoiceGroup('pointStyle', {
+ label: strings.PointStyleFieldLabel,
+ options: [
+ {
+ key: 'circle',
+ text: strings.PointStyleCircle,
+ selectedImageSrc: Assets.PointStyleCircle,
+ imageSrc: Assets.PointStyleCircle,
+ },
+ {
+ key: 'cross',
+ text: strings.PointStyleCross,
+ selectedImageSrc: Assets.PointStyleCross,
+ imageSrc: Assets.PointStyleCross,
+ },
+ {
+ key: 'crossRot',
+ text: strings.PointStyleRectRot,
+ selectedImageSrc: Assets.PointStyleCrossRot,
+ imageSrc: Assets.PointStyleCrossRot,
+ },
+ {
+ key: 'dash',
+ text: strings.PointStyleDash,
+ selectedImageSrc: Assets.PointStyleDash,
+ imageSrc: Assets.PointStyleDash,
+ },
+ {
+ key: 'line',
+ text: strings.PointStyleLine,
+ selectedImageSrc: Assets.PointStyleLine,
+ imageSrc: Assets.PointStyleLine,
+ },
+ {
+ key: 'rect',
+ text: strings.PointStyleRect,
+ selectedImageSrc: Assets.PointStyleRect,
+ imageSrc: Assets.PointStyleRect
+ },
+ {
+ key: 'rectRounded',
+ text: strings.PointStyleRectRounded,
+ selectedImageSrc: Assets.PointStyleRectRounded,
+ imageSrc: Assets.PointStyleRectRounded,
+ },
+ {
+ key: 'rectRot',
+ text: strings.PointStyleRectRot,
+ selectedImageSrc: Assets.PointStyleRectRot,
+ imageSrc: Assets.PointStyleRectRot,
+ },
+ {
+ key: 'star',
+ text: strings.PointStyleStar,
+ selectedImageSrc: Assets.PointStyleStar,
+ imageSrc: Assets.PointStyleStar,
+ },
+ {
+ key: 'triangle',
+ text: strings.PointStyleTriangle,
+ selectedImageSrc: Assets.PointStyleTriangle,
+ imageSrc: Assets.PointStyleTriangle,
+ },
+ ]
+ }),
+ PropertyFieldSpinButton('pointRadius', {
+ properties: this.properties,
+ key: 'pointRadiusId',
+ label: strings.PointRadiusFieldLabel,
+ initialValue: this.properties.pointRadius,
+ min: 0,
+ step: 1,
+ decimalPlaces: 0,
+ onPropertyChange: (propertyPath: string, newValue: any) => this._handlePropertyChange(propertyPath, newValue),
+ }),
+ PropertyPaneSlider('pointRotation', {
+ label: strings.PointRotationFieldLabel,
+ min: 0,
+ max: 360,
+ value: this.properties.pointRotation,
+ showValue: true,
+ step: 1
+ })
+ ]
+ };
+ }
+
+ /**
+ * Render property groups for donuts, pie, or polar charts.
+ * You know... the round ones.
+ */
+ private _renderDonutPiePolarSettingsPropertyGroup = (): IPropertyPaneGroup => {
+
+ const isDonut: boolean = this.properties.chartType === ChartType.Doughnut;
+ const isPie: boolean = this.properties.chartType === ChartType.Pie;
+
+ return {
+ groupName: isDonut ?
+ strings.DonutSettingsGroupName
+ : isPie
+ ? strings.PieSettingsGroupName
+ : strings.PolarSettingsGroupName,
+ isCollapsed: true,
+ groupFields: [
+ isDonut && PropertyPaneSlider('cutoutPercentage', {
+ label: strings.DonutCutoutPercentageFieldLabel,
+ min: 0,
+ max: 100,
+ step: 1,
+ showValue: true
+ }),
+ PropertyPaneSlider('chartRotation', {
+ label: strings.ChartRotationFieldLabel,
+ min: -360,
+ max: 360,
+ step: 1,
+ showValue: true,
+ value: this.properties.chartRotation
+ }),
+ (isDonut || isPie) && PropertyPaneSlider('circumference', {
+ label: strings.CircumferenceFieldLabel,
+ min: 0,
+ max: 100,
+ step: 1,
+ showValue: true,
+ value: this.properties.circumference
+ }),
+ PropertyPaneToggle('animateRotate', {
+ label: strings.AnimateRotateFieldLabel,
+ onText: strings.On,
+ offText: strings.Off,
+ checked: this.properties.animateRotate !== false
+ }),
+ PropertyPaneToggle('animateScale', {
+ label: strings.AnimateScaleFieldLabel,
+ onText: strings.On,
+ offText: strings.Off,
+ checked: this.properties.animateScale !== false
+ }),
+ PropertyPaneButton('animateScale', {
+ text: strings.ResetDonutPieSettingsButtonLabel,
+ onClick: ((_value: any) => {
+ // reset to the default values
+ this.properties.animateRotate = true;
+ this.properties.animateScale = true;
+ this.properties.circumference = DEFAULT_CIRCUMFERENCE;
+ this.properties.chartRotation = DEFAULT_CHARTROTATION;
+ this.properties.cutoutPercentage = DEFAULT_CUTOUTPERCENTAGE;
+ })
+ })
+ ]
+ };
+ }
+
+ /**
+ * Renders settings for bar charts (and vertical ones too)
+ */
+ private _renderBarSettingsPropertyGroup = (): IPropertyPaneGroup => {
+ return {
+ groupName: strings.BarSettingsGroupName,
+ isCollapsed: true,
+ groupFields: [
+ PropertyPaneLabel('offsetGridLines', {
+ text: strings.BarSettingsGroupDescription
+ }),
+ PropertyPaneToggle('offsetGridLines', {
+ label: strings.OffsetGridLinesFieldName,
+ onText: strings.On,
+ offText: strings.Off,
+ checked: this.properties.offsetGridLines !== false
+ })
+ ]
+ };
+ }
+
+ /**
+ * Shows Tooltip settings
+ */
+ private _renderTooltipPropertyGroup = (): IPropertyPaneGroup => {
+ const {
+ tooltipEnabled
+ } = this.properties;
+ return {
+ groupName: strings.TooltipsGroupName,
+ isCollapsed: true,
+ groupFields: [
+ PropertyPaneLabel('tooltipEnabled', {
+ text: strings.TooltipGroupDescription
+ }),
+ PropertyPaneToggle('tooltipEnabled', {
+ label: strings.TooltipsEnabledFieldLabel,
+ offText: strings.Hide,
+ onText: strings.Show
+ }),
+ PropertyPaneDropdown('tooltipMode', {
+ disabled: tooltipEnabled === false,
+ label: strings.TooltipModeFieldLabel,
+ options: [
+ {
+ key: 'nearest',
+ text: strings.TooltipModeNearest
+ },
+ {
+ key: 'point',
+ text: strings.TooltipModePoint
+ },
+
+ {
+ key: 'index',
+ text: strings.TooltipModeIndex
+ },
+ {
+ key: 'dataset',
+ text: strings.TooltipModeDataset
+ },
+ {
+ key: 'x',
+ text: strings.TooltipModeX
+ },
+ {
+ key: 'y',
+ text: strings.TooltipModeY
+ },
+ ]
+ }),
+ PropertyPaneToggle('tooltipIntersect', {
+ disabled: tooltipEnabled === false,
+ label: strings.TooltipsIntersectFieldLabel,
+ offText: strings.Off,
+ onText: strings.On
+ }),
+ PropertyPaneDropdown('tooltipPosition', {
+ disabled: tooltipEnabled === false,
+ label: strings.TooltipsPositionFieldLabel,
+ options: [
+ {
+ key: 'average',
+ text: strings.TooltipsPositionAverage
+ },
+ {
+ key: 'nearest',
+ text: strings.TooltipsPositionNearest
+ },
+ ]
+ }),
+ ]
+ };
+ }
+
+ /**
+ * Lists all animation types.
+ * There are a lot.
+ */
+ private _renderAnimationGroup = (): IPropertyPaneGroup => {
+ const {
+ animationDuration
+ } = this.properties;
+ return {
+ groupName: strings.AnimationGroupName,
+ isCollapsed: true,
+ groupFields: [
+ PropertyPaneLabel('animationDuration', {
+ text: strings.AnimationGroupDescription
+ }),
+ PropertyFieldNumber('animationDuration', {
+ key: 'animationDurationId',
+ label: strings.DurationFieldLabel,
+ description: strings.DurationFieldDescription,
+ value: animationDuration,
+ minValue: 0
+ }),
+ PropertyPaneChoiceGroup('animationEasing', {
+ label: strings.EasingFieldLabel,
+ options: [
+ {
+ key: 'linear',
+ text: strings.EasingLinear,
+ selectedImageSrc: Assets.Linear,
+ imageSrc: Assets.Linear
+ },
+ {
+ key: 'easeInQuad',
+ text: strings.EasingEaseInQuad,
+ selectedImageSrc: Assets.EaseInQuad,
+ imageSrc: Assets.EaseInQuad
+ },
+ {
+ key: 'easeOutQuad',
+ text: strings.EasingEaseOutQuad,
+ selectedImageSrc: Assets.EaseOutQuad,
+ imageSrc: Assets.EaseOutQuad
+ },
+ {
+ key: 'easeInOutQuad',
+ text: strings.EasingEaseInOutQuad,
+ selectedImageSrc: Assets.EaseInOutQuad,
+ imageSrc: Assets.EaseInOutQuad
+ },
+ {
+ key: 'easeInCubic',
+ text: strings.EasingEaseInCubic,
+ selectedImageSrc: Assets.EaseInCubic,
+ imageSrc: Assets.EaseInCubic
+ },
+ {
+ key: 'easeOutCubic',
+ text: strings.EasingEaseOutCubic,
+ selectedImageSrc: Assets.EaseOutCubic,
+ imageSrc: Assets.EaseOutCubic
+ },
+ {
+ key: 'easeInOutCubic',
+ text: strings.EasingEaseInOutCubic,
+ selectedImageSrc: Assets.EaseInOutCubic,
+ imageSrc: Assets.EaseInOutCubic
+ },
+ {
+ key: 'easeInQuart',
+ text: strings.EasingEaseInQuart,
+ selectedImageSrc: Assets.EaseInQuart,
+ imageSrc: Assets.EaseInQuart
+ },
+ {
+ key: 'easeOutQuart',
+ text: strings.EasingEaseOutQuart,
+ selectedImageSrc: Assets.EaseOutQuart,
+ imageSrc: Assets.EaseOutQuart
+ },
+ {
+ key: 'easeInOutQuart',
+ text: strings.EasingEaseInOutQuart,
+ selectedImageSrc: Assets.EaseInOutQuart,
+ imageSrc: Assets.EaseInOutQuart
+ },
+ {
+ key: 'easeInQuint',
+ text: strings.EasingEaseInQuint,
+ selectedImageSrc: Assets.EaseInQuint,
+ imageSrc: Assets.EaseInQuint
+ },
+ {
+ key: 'easeOutQuint',
+ text: strings.EasingEaseOutQuint,
+ selectedImageSrc: Assets.EaseOutQuint,
+ imageSrc: Assets.EaseOutQuint
+ },
+ {
+ key: 'easeInOutQuint',
+ text: strings.EasingEaseInOutQuint,
+ selectedImageSrc: Assets.EaseInOutQuint,
+ imageSrc: Assets.EaseInOutQuint
+ },
+ {
+ key: 'easeInSine',
+ text: strings.EasingEaseInSine,
+ selectedImageSrc: Assets.EaseInSine,
+ imageSrc: Assets.EaseInSine
+ },
+ {
+ key: 'easeOutSine',
+ text: strings.EasingEaseOutSine,
+ selectedImageSrc: Assets.EaseOutSine,
+ imageSrc: Assets.EaseOutSine
+ },
+ {
+ key: 'easeInOutSine',
+ text: strings.EasingEaseInOutSine,
+ selectedImageSrc: Assets.EaseInOutSine,
+ imageSrc: Assets.EaseInOutSine
+ },
+ {
+ key: 'easeInExpo',
+ text: strings.EasingEaseInExpo,
+ selectedImageSrc: Assets.EaseInExpo,
+ imageSrc: Assets.EaseInExpo
+ },
+ {
+ key: 'easeOutExpo',
+ text: strings.EasingEaseOutExpo,
+ selectedImageSrc: Assets.EaseOutExpo,
+ imageSrc: Assets.EaseOutExpo
+ },
+ {
+ key: 'easeInOutExpo',
+ text: strings.EasingEaseInOutExpo,
+ selectedImageSrc: Assets.EaseInOutExpo,
+ imageSrc: Assets.EaseInOutExpo
+ },
+ {
+ key: 'easeInCirc',
+ text: strings.EasingEaseInCirc,
+ selectedImageSrc: Assets.EaseInCirc,
+ imageSrc: Assets.EaseInCirc
+ },
+ {
+ key: 'easeOutCirc',
+ text: strings.EasingEaseOutCirc,
+ selectedImageSrc: Assets.EaseOutCirc,
+ imageSrc: Assets.EaseOutCirc
+ },
+ {
+ key: 'easeInOutCirc',
+ text: strings.EasingEaseInOutCirc,
+ selectedImageSrc: Assets.EaseInOutCirc,
+ imageSrc: Assets.EaseInOutCirc
+ },
+ {
+ key: 'easeInElastic',
+ text: strings.EasingEaseInElastic,
+ selectedImageSrc: Assets.EaseInElastic,
+ imageSrc: Assets.EaseInElastic
+ },
+ {
+ key: 'easeOutElastic',
+ text: strings.EasingEaseOutElastic,
+ selectedImageSrc: Assets.EaseOutElastic,
+ imageSrc: Assets.EaseOutElastic
+ },
+ {
+ key: 'easeInOutElastic',
+ text: strings.EasingEaseInOutElastic,
+ selectedImageSrc: Assets.EaseInOutElastic,
+ imageSrc: Assets.EaseInOutElastic
+ },
+ {
+ key: 'easeInBack',
+ text: strings.EasingEaseInBack,
+ selectedImageSrc: Assets.EaseInBack,
+ imageSrc: Assets.EaseInBack
+ },
+ {
+ key: 'easeOutBack',
+ text: strings.EasingEaseOutBack,
+ selectedImageSrc: Assets.EaseOutBack,
+ imageSrc: Assets.EaseOutBack
+ },
+ {
+ key: 'easeInOutBack',
+ text: strings.EasingEaseInOutBack,
+ selectedImageSrc: Assets.EaseInOutBack,
+ imageSrc: Assets.EaseInOutBack
+ },
+ {
+ key: 'easeInBounce',
+ text: strings.EasingEaseInBounce,
+ selectedImageSrc: Assets.EaseInBounce,
+ imageSrc: Assets.EaseInBounce
+ },
+ {
+ key: 'easeOutBounce',
+ text: strings.EasingEaseOutBounce,
+ selectedImageSrc: Assets.EaseOutBounce,
+ imageSrc: Assets.EaseOutBounce
+ },
+ {
+ key: 'easeInOutBounce',
+ text: strings.EasingEaseInOutBounce,
+ selectedImageSrc: Assets.EaseInOutBounce,
+ imageSrc: Assets.EaseInOutBounce
+ },
+ ]
+ })
+ ]
+ };
+ }
+
+ /**
+ * Lists all palette choices for the palette property pane group
+ */
+ private _getPaletteOptions = (): IDropdownOption[] => {
+ // Because I'm lazy, I am NOT going to list
+ // every single palette option manually,
+ // so I'll just loop through the enum values
+
+ // Get all the palette key names
+ const names = Object.keys(ChartPalette)
+ .filter(k => typeof ChartPalette[k] === "number") as string[];
+
+ // Generate the palette options from palette names
+ const paletteOptions: IDropdownOption[] = names.filter(paletteName => strings.PaletteName[paletteName] !== undefined).map((paletteName: string) => {
+ const displayName: string = strings.PaletteName[paletteName];
+ const description: string = strings.PaletteDescription[paletteName];
+ return {
+ key: ChartPalette[paletteName],
+ text: displayName,
+ data: {
+ colors: PaletteGenerator.GetPalette(ChartPalette[paletteName], NUMCOLORS).slice(0, NUMCOLORS),
+ description: description
+ }
+ };
+ });
+
+ return paletteOptions;
+ }
+
+ /**
+ * Returns the list of dash styles
+ */
+ private _getDashOptions = (): IDropdownOption[] => {
+ // Enums often return two copies of each value: one by numerical value, and one by text.
+ // we use the number enums so that we only get one instance of each type
+ const names = Object.keys(DashType)
+ .filter(k => typeof DashType[k] === "number") as string[];
+
+ // Generate the dash options from dash names
+ const dashOptions: IDropdownOption[] = names.map((dashName: string, index: number) => {
+ const displayName: string = strings.DashNames[index];
+ const strokes: number[] = DashStrokes[DashType[dashName]];
+ return {
+ key: DashType[dashName],
+ text: displayName,
+ data: {
+ strokes: strokes
+ }
+ };
+ });
+
+ return dashOptions;
+ }
+
+ /**
+ * Gets the list of fields
+ */
+ private _getFields(): Promise {
+ // No list selected
+ if (!this.properties.dataSourceListId) {
+ return Promise.resolve();
+ }
+
+ // Call the list service
+ const service: IListService = new ListService(this.context);
+ return service.getFields(this.properties.dataSourceListId);
+ }
+
+ /**
+ * Get the list of fields that can be used for labels
+ */
+ private _getLabelFields(): IPropertyPaneDropdownOption[] {
+ if (this._fields === undefined) {
+ return undefined;
+ }
+
+ // Fields that contain text or date can be used as labels
+ const labelFields = this._fields!.filter(f => f.TypeAsString === 'Text' || f.TypeAsString === 'DateTime').map(field => {
+ return {
+ key: field.InternalName,
+ text: `${field.Title}`,
+ };
+ });
+ return labelFields;
+ }
+
+ /**
+ * Returns the list of fields that can be used for data
+ */
+ private _getDataFields(): IPropertyPaneDropdownOption[] {
+ if (this._fields === undefined) {
+ return undefined;
+ }
+ const dataFields = this._fields!.filter(f => f.TypeAsString === 'Number' || f.TypeAsString === 'Currency').map(field => {
+ return {
+ key: field.InternalName,
+ text: `${field.Title}`,
+ };
+ });
+ return dataFields;
+ }
+
+ /**
+ * Lists the possible chart choices
+ */
+ private _getChartChoices = (): IPropertyPaneChoiceGroupOption[] => {
+
+ const names = Object.keys(ChartType) as string[];
+
+ // Make sure we retrieve chart types that have a string resource for them.
+ const chartOptions: IPropertyPaneChoiceGroupOption[] = names.filter(type => strings.ChartTypeName[type] !== undefined).map((chartTypeName: string) => {
+
+ const choice: IPropertyPaneChoiceGroupOption = {
+ key: ChartType[chartTypeName],
+ text: strings.ChartTypeName[chartTypeName]
+ };
+
+ // Only some of charts types have Office Fabric UI icon equivalents.
+ // This code finds the Office Fabric icon or the icon asset
+ switch (chartTypeName) {
+ case 'Bar':
+ choice.iconProps = {
+ officeFabricIconFontName: 'BarChartVertical'
+ };
+ break;
+ case 'HorizontalBar':
+ choice.iconProps = {
+ officeFabricIconFontName: 'BarChartHorizontal'
+ };
+ break;
+ case 'Doughnut':
+ choice.iconProps = {
+ officeFabricIconFontName: 'DonutChart'
+ };
+ break;
+ case 'Line':
+ choice.iconProps = {
+ officeFabricIconFontName: 'LineChart'
+ };
+ break;
+ case 'Pie':
+ choice.iconProps = {
+ officeFabricIconFontName: 'PieDouble'
+ };
+ break;
+ default:
+ choice.imageSrc = Assets.ChartIcons[chartTypeName];
+ choice.selectedImageSrc = Assets.ChartIcons[chartTypeName];
+ }
+ return choice;
+ });
+ return chartOptions;
+ }
+
+ /**
+ * Returns true if the selected chart type is a radial chart
+ * (i.e.: Pie, Donut, etc.)
+ */
+ private _isRadialChart = (): boolean => {
+ const { chartType } = this.properties;
+ return chartType === ChartType.Pie || chartType === ChartType.Doughnut || chartType === ChartType.PolarArea || chartType === ChartType.Radar;
+ }
+
+ /**
+ * Notified when data is changed.
+ * Forces chart to re-render
+ */
+ private _handleChangeData = (data: any) => {
+ this.properties.data = data;
+ this.render();
+ }
+
+ /**
+ * Notified when a property is changed.
+ * Forces chart to re-render.
+ */
+ private _handlePropertyChange(propertyPath: string, newValue: any): void {
+ this.properties[propertyPath] = newValue;
+
+ this.render();
+ }
+
+ /**
+ * Resets the data if chart changes to (or from)
+ * a type of data that is incompatible with another
+ * one. This prevents getting nasty error messages.
+ */
+ private _initalizeData = () => {
+ const { chartType } = this.properties;
+ if (chartType === ChartType.Bubble) {
+ this.properties.data = [{
+ id: Guid.newGuid().toString(),
+ name: '',
+ x: undefined,
+ y: undefined,
+ r: undefined
+ }];
+ } else if (chartType === ChartType.Scatter) {
+ this.properties.data = [{
+ id: Guid.newGuid().toString(),
+ name: '',
+ x: undefined,
+ y: undefined
+ }];
+ } else {
+ this.properties.data = [{
+ id: Guid.newGuid().toString(),
+ name: '',
+ value: undefined
+ }];
+ }
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.types.ts b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.types.ts
new file mode 100644
index 000000000..52693336d
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.types.ts
@@ -0,0 +1,64 @@
+import { INumberChartData, IBubbleChartData, IScatterChartData } from './controls/PropertyFieldRepeatingData';
+import { ChartType, ChartPalette } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { DashType } from './controls/PropertyPaneDashSelector/components/DashSelector.types';
+import { DataSourceType, EasingType, CapType, JoinType } from './components/Chartinator.types';
+
+/**
+ * There are a LOT of options to store with this web part.
+ * I don't normally recommend doing this, but the goal of this
+ * sample is to demonstrate each chart setting individually.
+ */
+export interface IChartinatorWebPartProps {
+ animateRotate: boolean;
+ animateScale: boolean;
+ animationDuration: number;
+ animationEasing: EasingType;
+ borderCapStyle: CapType;
+ borderColor: string;
+ borderDash: DashType;
+ borderJoinStyle: JoinType;
+ borderWidth: number;
+ bottomPadding: number;
+ chartPalette: ChartPalette;
+ chartRotation: number;
+ chartType: ChartType;
+ circumference: number;
+ cutoutPercentage: number;
+ data: Array;
+ dataLabelField: string;
+ dataRValueField: string;
+ dataSetName: string;
+ dataSourceListId: string;
+ dataSourceType: DataSourceType;
+ dataValueField: string;
+ dataYValueField: string;
+ leftPadding: number;
+ legendPosition: Chart.PositionType | 'none';
+ legendReversed: boolean;
+ lineCurved: boolean;
+ lineFill: string;
+ lineShowLine: boolean;
+ lineStepped: boolean;
+ offsetGridLines: boolean;
+ pointRadius: number;
+ pointRotation: number;
+ pointStyle: Chart.PointStyle;
+ rightPadding: number;
+ title: string;
+ tooltipEnabled: boolean;
+ tooltipIntersect: boolean;
+ tooltipMode: Chart.InteractionMode;
+ tooltipPosition: string;
+ topPadding: number;
+ xAxisLabelEnabled: boolean;
+ xAxisLabelText: string;
+ xAxisShowGridlines: boolean;
+ yAxisBeginAtZero: boolean;
+ yAxisLabelEnabled: boolean;
+ yAxisLabelText: string;
+ yAxisMax: number;
+ yAxisMaxTicksLimit: number;
+ yAxisMin: number;
+ yAxisStepSize: number;
+ yAxisShowGridlines: boolean;
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/LocalizedResources.ts b/samples/react-chartcontrol/src/webparts/chartinator/LocalizedResources.ts
new file mode 100644
index 000000000..f1f48fa60
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/LocalizedResources.ts
@@ -0,0 +1,64 @@
+// legend icons
+export const LegendLeft: string = require('./assets/LegendLeft.png');
+export const LegendRight: string = require('./assets/LegendRight.png');
+export const LegendTop: string = require('./assets/LegendTop.png');
+export const LegendBottom: string = require('./assets/LegendBottom.png');
+export const LegendNone: string = require('./assets/LegendNone.png');
+
+// chart icons
+export const ChartIcons = {
+ "Bubble": require('./assets/BubbleChart.png'),
+ "PolarArea": require('./assets/PolarArea.png'),
+ "Radar": require('./assets/RadarChart.png'),
+ "Scatter": require('./assets/ScatterChart.png'),
+};
+
+export const PointStyleCircle: string = require('./assets/PointStyleCircle.png');
+export const PointStyleCross: string = require('./assets/PointStyleCross.png');
+export const PointStyleCrossRot: string = require('./assets/PointStyleCrossRot.png');
+export const PointStyleDash: string = require('./assets/PointStyleDash.png');
+export const PointStyleLine: string = require('./assets/PointStyleLine.png');
+export const PointStyleRect: string = require('./assets/PointStyleRect.png');
+export const PointStyleRectRounded: string = require('./assets/PointStyleRectRounded.png');
+export const PointStyleRectRot: string = require('./assets/PointStyleRectRot.png');
+export const PointStyleStar: string = require('./assets/PointStyleStar.png');
+export const PointStyleTriangle: string = require('./assets/PointStyleTriangle.png');
+
+// easing icons
+export const Linear: string = require('./assets/Linear.png');
+export const EaseInQuad: string = require('./assets/EaseInQuad.png');
+export const EaseOutQuad: string = require('./assets/EaseOutQuad.png');
+export const EaseInOutQuad: string = require('./assets/EaseInOutQuad.png');
+export const EaseInCubic: string = require('./assets/EaseInCubic.png');
+export const EaseOutCubic: string = require('./assets/EaseOutCubic.png');
+export const EaseInOutCubic: string = require('./assets/EaseInOutCubic.png');
+export const EaseInQuart: string = require('./assets/EaseInQuart.png');
+export const EaseOutQuart: string = require('./assets/EaseOutQuart.png');
+export const EaseInOutQuart: string = require('./assets/EaseInOutQuart.png');
+export const EaseInQuint: string = require('./assets/EaseInQuint.png');
+export const EaseOutQuint: string = require('./assets/EaseOutQuint.png');
+export const EaseInOutQuint: string = require('./assets/EaseInOutQuint.png');
+export const EaseInSine: string = require('./assets/EaseInSine.png');
+export const EaseOutSine: string = require('./assets/EaseOutSine.png');
+export const EaseInOutSine: string = require('./assets/EaseInOutSine.png');
+export const EaseInExpo: string = require('./assets/EaseInExpo.png');
+export const EaseOutExpo: string = require('./assets/EaseOutExpo.png');
+export const EaseInOutExpo: string = require('./assets/EaseInOutExpo.png');
+export const EaseInCirc: string = require('./assets/EaseInCirc.png');
+export const EaseOutCirc: string = require('./assets/EaseOutCirc.png');
+export const EaseInOutCirc: string = require('./assets/EaseInOutCirc.png');
+export const EaseInElastic: string = require('./assets/EaseInElastic.png');
+export const EaseOutElastic: string = require('./assets/EaseOutElastic.png');
+export const EaseInOutElastic: string = require('./assets/EaseInOutElastic.png');
+export const EaseInBack: string = require('./assets/EaseInBack.png');
+export const EaseOutBack: string = require('./assets/EaseOutBack.png');
+export const EaseInOutBack: string = require('./assets/EaseInOutBack.png');
+export const EaseInBounce: string = require('./assets/EaseInBounce.png');
+export const EaseOutBounce: string = require('./assets/EaseOutBounce.png');
+export const EaseInOutBounce: string = require('./assets/EaseInOutBounce.png');
+
+// fill icons
+export const FillNone: string = require('./assets/FillNone.png');
+export const FillStart: string = require('./assets/FillStart.png');
+export const FillEnd: string = require('./assets/FillEnd.png');
+export const FillOrigin: string = require('./assets/FillOrigin.png');
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/BubbleChart.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/BubbleChart.png
new file mode 100644
index 000000000..5f97af6e5
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/BubbleChart.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInBack.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInBack.png
new file mode 100644
index 000000000..562e9099f
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInBack.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInBounce.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInBounce.png
new file mode 100644
index 000000000..d431b086c
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInBounce.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInCirc.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInCirc.png
new file mode 100644
index 000000000..d22f40848
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInCirc.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInCubic.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInCubic.png
new file mode 100644
index 000000000..84ca6ed6e
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInCubic.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInElastic.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInElastic.png
new file mode 100644
index 000000000..1578a9af3
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInElastic.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInExpo.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInExpo.png
new file mode 100644
index 000000000..7c4c81ac1
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInExpo.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutBack.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutBack.png
new file mode 100644
index 000000000..96f82b69a
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutBack.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutBounce.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutBounce.png
new file mode 100644
index 000000000..db82d74b8
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutBounce.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutCirc.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutCirc.png
new file mode 100644
index 000000000..cf92299e7
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutCirc.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutCubic.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutCubic.png
new file mode 100644
index 000000000..73baeb242
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutCubic.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutElastic.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutElastic.png
new file mode 100644
index 000000000..9657bf23a
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutElastic.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutExpo.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutExpo.png
new file mode 100644
index 000000000..44ff150ff
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutExpo.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutQuad.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutQuad.png
new file mode 100644
index 000000000..ba0e9a054
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutQuad.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutQuart.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutQuart.png
new file mode 100644
index 000000000..6b8f99a69
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutQuart.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutQuint.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutQuint.png
new file mode 100644
index 000000000..a7d45e98b
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutQuint.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutSine.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutSine.png
new file mode 100644
index 000000000..3e7b4c469
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInOutSine.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInQuad.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInQuad.png
new file mode 100644
index 000000000..4dd835aed
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInQuad.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInQuart.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInQuart.png
new file mode 100644
index 000000000..ae6a7e6f5
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInQuart.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInQuint.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInQuint.png
new file mode 100644
index 000000000..0e133d036
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInQuint.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInSine.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInSine.png
new file mode 100644
index 000000000..e074d7a43
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseInSine.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutBack.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutBack.png
new file mode 100644
index 000000000..c6a95e5b0
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutBack.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutBounce.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutBounce.png
new file mode 100644
index 000000000..8e842dbfb
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutBounce.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutCirc.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutCirc.png
new file mode 100644
index 000000000..f3ad9e889
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutCirc.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutCubic.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutCubic.png
new file mode 100644
index 000000000..cc47bcd2c
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutCubic.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutElastic.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutElastic.png
new file mode 100644
index 000000000..b333f2962
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutElastic.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutExpo.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutExpo.png
new file mode 100644
index 000000000..10306af93
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutExpo.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutQuad.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutQuad.png
new file mode 100644
index 000000000..0da2eb47f
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutQuad.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutQuart.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutQuart.png
new file mode 100644
index 000000000..dd88453fc
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutQuart.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutQuint.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutQuint.png
new file mode 100644
index 000000000..c0164aa04
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutQuint.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutSine.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutSine.png
new file mode 100644
index 000000000..f70b44c06
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/EaseOutSine.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/FIllNone.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/FIllNone.png
new file mode 100644
index 000000000..e5409c2f3
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/FIllNone.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/FillEnd.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/FillEnd.png
new file mode 100644
index 000000000..e1ce1693f
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/FillEnd.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/FillOrigin.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/FillOrigin.png
new file mode 100644
index 000000000..f3ecbd0c4
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/FillOrigin.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/FillStart.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/FillStart.png
new file mode 100644
index 000000000..1fcb69a2c
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/FillStart.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendBottom.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendBottom.png
new file mode 100644
index 000000000..bc4c2aeef
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendBottom.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendLeft.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendLeft.png
new file mode 100644
index 000000000..a95d79bd0
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendLeft.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendNone.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendNone.png
new file mode 100644
index 000000000..85d619758
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendNone.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendRight.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendRight.png
new file mode 100644
index 000000000..63f428e3d
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendRight.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendTop.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendTop.png
new file mode 100644
index 000000000..904a4730d
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/LegendTop.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/Linear.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/Linear.png
new file mode 100644
index 000000000..18f05913a
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/Linear.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleCircle.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleCircle.png
new file mode 100644
index 000000000..35cc28bc4
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleCircle.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleCross.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleCross.png
new file mode 100644
index 000000000..e57476d8b
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleCross.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleCrossRot.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleCrossRot.png
new file mode 100644
index 000000000..faf345095
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleCrossRot.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleDash.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleDash.png
new file mode 100644
index 000000000..ebc1aebc7
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleDash.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleLine.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleLine.png
new file mode 100644
index 000000000..3509a4157
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleLine.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleRect.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleRect.png
new file mode 100644
index 000000000..543f94af0
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleRect.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleRectRot.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleRectRot.png
new file mode 100644
index 000000000..5ee56c005
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleRectRot.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleRectRounded.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleRectRounded.png
new file mode 100644
index 000000000..07d385eb7
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleRectRounded.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleStar.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleStar.png
new file mode 100644
index 000000000..b1e072fb9
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleStar.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleTriangle.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleTriangle.png
new file mode 100644
index 000000000..7fe245e93
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PointStyleTriangle.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/PolarArea.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/PolarArea.png
new file mode 100644
index 000000000..eda5edd26
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/PolarArea.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/RadarChart.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/RadarChart.png
new file mode 100644
index 000000000..f07b7210f
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/RadarChart.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/assets/ScatterChart.png b/samples/react-chartcontrol/src/webparts/chartinator/assets/ScatterChart.png
new file mode 100644
index 000000000..9fd183bb3
Binary files /dev/null and b/samples/react-chartcontrol/src/webparts/chartinator/assets/ScatterChart.png differ
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.module.scss b/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.module.scss
new file mode 100644
index 000000000..7e2ca45b2
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.module.scss
@@ -0,0 +1,23 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.chartinator {
+ color: inherit;
+}
+
+
+// .propertyPaneAddButtonWithText {
+// display: -webkit-box;
+// display: -ms-flexbox;
+// display: flex;
+// -webkit-box-pack: justify;
+// -ms-flex-pack: justify;
+// justify-content: space-between;
+// -webkit-box-align: center;
+// -ms-flex-align: center;
+// align-items: center;
+// width: 100%;
+// }
+
+// .propertyPaneAddButton {
+// text-align: left;
+// }
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.tsx b/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.tsx
new file mode 100644
index 000000000..be04d799e
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.tsx
@@ -0,0 +1,359 @@
+import * as React from 'react';
+import styles from './Chartinator.module.scss';
+import { IChartinatorProps } from './Chartinator.types';
+import * as strings from 'ChartinatorWebPartStrings';
+
+// used to add a chart control
+import { ChartControl, ChartType, ChartPalette, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
+import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
+import { IBubbleChartData, IScatterChartData, INumberChartData } from '../controls/PropertyFieldRepeatingData';
+import { ChartTitle } from '../controls/ChartTitle';
+import { DashStrokes } from '../controls/PropertyPaneDashSelector/components/DashSelector.types';
+
+// List methods to retrieve data
+import { IListService, ListService, IListItem, MockListService } from '../../../services/ListService';
+
+export default class Chartinator extends React.Component {
+ /**
+* The chart element
+*/
+ private _chartElem: ChartControl = undefined;
+
+ public componentWillReceiveProps(nextProps: IChartinatorProps): void {
+ // Remove data before changing chart type
+ // -- prevents running into issues with different kinds of data required for each kind of chart
+ if (this._chartElem) {
+ const chart = this._chartElem.getChart();
+ if (chart) {
+ chart.data!.datasets = [];
+ }
+ }
+ }
+
+ /**
+ * Render the chart
+ */
+ public render(): React.ReactElement {
+ const { chartType } = this.props;
+ const { radialChart } = this.props;
+
+ // Scales should not be defined for radial charts.
+ const chartScales: Chart.ChartScales = radialChart ? undefined : {
+ yAxes: [{
+ gridLines: {
+ display: this.props.yAxisShowGridlines
+ },
+ ticks: {
+ beginAtZero: this.props.yAxisBeginAtZero,
+ },
+ scaleLabel: {
+ display: this.props.yAxisLabelEnabled,
+ labelString: this.props.yAxisLabelText,
+ }
+ }],
+ xAxes: [{
+ gridLines: {
+ display: this.props.xAxisShowGridlines
+
+ },
+ scaleLabel: {
+ display: this.props.xAxisLabelEnabled,
+ labelString: this.props.xAxisLabelText,
+ }
+ }]
+ };
+
+ // This option only applies to bar and horizontal bards
+ if (chartType === ChartType.Bar) {
+ chartScales.xAxes[0].gridLines.offsetGridLines = this.props.offsetGridLines;
+ } else if (chartType === ChartType.HorizontalBar) {
+ chartScales.yAxes[0].gridLines.offsetGridLines = this.props.offsetGridLines;
+ }
+
+ // some of these settings should only be defined if there are values
+
+ // set the minimum Y axis -- if available
+ if (chartScales && this.props.yAxisMin && !this.props.yAxisBeginAtZero) {
+ chartScales.yAxes[0].ticks.min = this.props.yAxisMin;
+ }
+
+ // set the maximum Y axis -- if available
+ if (chartScales && this.props.yAxisMax) {
+ chartScales.yAxes[0].ticks.max = this.props.yAxisMax;
+ }
+
+ // set the maximum number of lines
+ if (chartScales && this.props.yAxisMaxTicksLimit) {
+ chartScales.yAxes[0].ticks.maxTicksLimit = this.props.yAxisMaxTicksLimit;
+ }
+
+ // set the step size
+ if (chartScales && this.props.yAxisStepSize) {
+ chartScales.yAxes[0].ticks.stepSize = this.props.yAxisStepSize;
+ }
+
+ // set the legend position
+ const legendPosition: Chart.PositionType = this.props.legendPosition === 'none' ? 'top' : this.props.legendPosition as Chart.PositionType;
+
+ // set the options
+ const options: Chart.ChartOptions = {
+ title: {
+ display: false
+ },
+ animation: {
+ duration: this.props.animationDuration,
+ easing: this.props.animationEasing
+ },
+ layout: {
+ padding: {
+ left: this.props.leftPadding,
+ right: this.props.rightPadding,
+ top: this.props.topPadding,
+ bottom: this.props.bottomPadding
+ }
+ },
+ legend: {
+ position: legendPosition,
+ display: this.props.legendPosition !== 'none',
+ reverse: this.props.legendReversed
+ },
+ tooltips: {
+ enabled: this.props.tooltipEnabled,
+ intersect: this.props.tooltipIntersect,
+ mode: this.props.tooltipMode as Chart.InteractionMode,
+ position: this.props.tooltipPosition
+ },
+ scales: chartScales
+ };
+
+ if (chartType == ChartType.Doughnut) {
+ options.cutoutPercentage = this.props.cutoutPercentage;
+ }
+
+ if (chartType === ChartType.Doughnut || chartType === ChartType.Pie) {
+ options.circumference = (this.props.circumference / 100) * 2 * Math.PI;
+ }
+
+ // Only apply rotation to pie, doughnuts and polar area
+ if (chartType === ChartType.Doughnut || chartType === ChartType.Pie || chartType === ChartType.PolarArea) {
+ options.rotation = (this.props.chartRotation / 360) * Math.PI;
+
+ // Add chart animation
+ if (options.animation === undefined) {
+ options.animation = {};
+ }
+ options.animation.animateRotate = this.props.animateRotate;
+ options.animation.animateScale = this.props.animateScale;
+ }
+
+ return (
+
+
+ );
+ }
+
+ /**
+ * Links a reference to the chart so that we can
+ * refer to it later and change its data
+ */
+ private _linkElement = (e: ChartControl) => {
+ this._chartElem = e;
+ }
+
+ /**
+ * Loads data from a service.
+ * This is where you would replace for your own code
+ */
+ private _loadAsyncData(): Promise {
+
+ const { data } = this.props;
+
+ // Check if we received data
+ if (data !== undefined && data.length > 0 && data[0].name !== '') {
+ // Yes, load the manual data
+ return this._loadManualData();
+ } else {
+ return this._loadListData();
+ }
+ }
+
+ /**
+ * Loads data from a list or, if no data is provided,
+ * from a mock list.
+ */
+ private _loadListData = (): Promise => {
+ const { chartType } = this.props;
+ return new Promise((resolve, _reject) => {
+ let service: IListService;
+
+ // If the data source is configured, get the data from the list
+ if (this.props.dataSourceListId && this.props.dataLabelField && this.props.dataValueField) {
+ service = new ListService(this.props.context);
+ } else {
+ // no data provided, and no data source. Load bogus data
+ service = new MockListService(chartType, strings.SampleLabels);
+ }
+
+ return service.getListItems(this.props.dataSourceListId,
+ this.props.dataLabelField,
+ this.props.dataValueField,
+ this.props.dataYValueField,
+ this.props.dataRValueField,
+ ).then((listItems: IListItem[]) => {
+
+ let dataItems = [];
+ if (chartType === ChartType.Bubble) {
+ dataItems = listItems.map((listItem: IListItem) => {
+ const dataItem: Chart.ChartPoint = {
+ x: listItem.Value,
+ y: listItem.YValue,
+ r: listItem.RValue
+ };
+ return dataItem;
+ });
+ } else if (chartType === ChartType.Scatter) {
+ dataItems = listItems.map((listItem: IListItem) => {
+ const dataItem: Chart.ChartPoint = {
+ x: listItem.Value,
+ y: listItem.YValue
+ };
+ return dataItem;
+ });
+ } else {
+ dataItems = listItems.map((listItem: IListItem) => {
+ return listItem.Value;
+ });
+ }
+
+ const data: Chart.ChartData =
+ {
+ labels: listItems.map((listItem: IListItem) => {
+ return listItem.Label;
+ }),
+ datasets: [
+ {
+ label: this.props.dataSetName,
+ data: dataItems
+ }
+ ]
+ };
+
+ // Line fill
+ this._addDataOptions(data);
+ resolve(data);
+ });
+ });
+ }
+
+ private _loadManualData = (): Promise => {
+ const { chartType } = this.props;
+ return new Promise((resolve, _reject) => {
+ const labels: string[] = this.props.data.map(dataRow => {
+ return dataRow.name;
+ });
+
+ let dataItems: Array | Chart.ChartPoint[];
+
+ if (chartType === ChartType.Bubble) {
+ dataItems = this.props.data.map((dataRow: IBubbleChartData) => {
+ return {
+ x: dataRow.x,
+ y: dataRow.y,
+ r: dataRow.r
+ };
+ });
+ } else if (chartType === ChartType.Scatter) {
+ dataItems = this.props.data.map((dataRow: IScatterChartData) => {
+ return {
+ x: dataRow.x,
+ y: dataRow.y,
+ };
+ });
+ } else {
+ dataItems = this.props.data.map((dataRow: INumberChartData) => {
+ return dataRow.value;
+ });
+ }
+
+
+ const data: Chart.ChartData =
+ {
+ labels: labels,
+ datasets: [
+ {
+ label: this.props.dataSetName,
+ data: dataItems
+ }
+ ]
+ };
+
+ this._addDataOptions(data);
+
+ resolve(data);
+ });
+ }
+
+ private _addDataOptions = (data: Chart.ChartData): void => {
+ const { chartType } = this.props;
+ const primaryDataSet: Chart.ChartDataSets = data.datasets[0];
+
+ if (primaryDataSet === undefined) {
+ return;
+ }
+
+ if (chartType === ChartType.Line) {
+ primaryDataSet.showLine = this.props.lineShowLine === true;
+ primaryDataSet.steppedLine = this.props.lineStepped;
+ primaryDataSet.borderWidth = this.props.borderWidth;
+
+ if (this.props.borderColor !== undefined) {
+ primaryDataSet.borderColor = this.props.borderColor;
+ }
+
+ if (this.props.borderDash !== undefined) {
+ primaryDataSet.borderDash = DashStrokes[this.props.borderDash];
+ }
+
+ if (this.props.borderJoinStyle !== undefined) {
+ primaryDataSet.borderJoinStyle = this.props.borderJoinStyle;
+ }
+
+ if (this.props.borderCapStyle !== undefined) {
+ primaryDataSet.borderCapStyle = this.props.borderCapStyle;
+ }
+
+ if (!this.props.lineCurved) {
+ primaryDataSet.lineTension = 0;
+ }
+
+ // Line fill
+ if (this.props.lineFill && chartType === ChartType.Line) {
+ primaryDataSet.fill = this.props.lineFill;
+ }
+ }
+
+ if (chartType === ChartType.Line || chartType === ChartType.Scatter) {
+ primaryDataSet.pointRadius = this.props.pointRadius;
+ }
+
+ if (chartType === ChartType.Line || chartType === ChartType.Scatter || chartType === ChartType.Bubble) {
+ primaryDataSet.pointStyle = this.props.pointStyle;
+
+ // chart.js seems to not declare a point rotation, but it is a valid property
+ primaryDataSet["pointRotation"] = this.props.pointRotation;
+ }
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.types.ts b/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.types.ts
new file mode 100644
index 000000000..87a7a52d0
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.types.ts
@@ -0,0 +1,105 @@
+import { INumberChartData, IScatterChartData, IBubbleChartData } from "../controls/PropertyFieldRepeatingData";
+import { DisplayMode } from '@microsoft/sp-core-library';
+import { ChartType, ChartPalette } from '@pnp/spfx-controls-react/lib/ChartControl';
+import { DashType } from "../controls/PropertyPaneDashSelector/components/DashSelector.types";
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+
+export interface IChartinatorProps {
+ animateRotate: boolean;
+ animateScale: boolean;
+ animationDuration: number;
+ animationEasing: EasingType;
+ borderCapStyle: CapType;
+ borderColor: string;
+ borderDash: DashType;
+ borderJoinStyle: JoinType;
+ borderWidth: number;
+ bottomPadding: number;
+ chartPalette: ChartPalette;
+ chartRotation: number;
+ chartType: ChartType;
+ circumference: number;
+ context: WebPartContext;
+ cutoutPercentage: number;
+ data: Array;
+ dataLabelField: string;
+ dataRValueField: string;
+ dataSetName: string;
+ dataSourceListId: string;
+ dataSourceType: DataSourceType;
+ dataValueField: string;
+ dataYValueField: string;
+ displayMode: DisplayMode;
+ leftPadding: number;
+ legendPosition: Chart.PositionType | 'none';
+ legendReversed: boolean;
+ lineCurved: boolean;
+ lineFill: string;
+ lineShowLine: boolean;
+ lineStepped: boolean;
+ offsetGridLines: boolean;
+ pointRadius: number;
+ pointRotation: number;
+ pointStyle: Chart.PointStyle;
+ radialChart: boolean;
+ rightPadding: number;
+ title: string;
+ tooltipEnabled: boolean;
+ tooltipIntersect: boolean;
+ tooltipMode: Chart.InteractionMode;
+ tooltipPosition: string;
+ topPadding: number;
+ xAxisLabelEnabled: boolean;
+ xAxisLabelText: string;
+ xAxisShowGridlines: boolean;
+ yAxisBeginAtZero: boolean;
+ yAxisLabelEnabled: boolean;
+ yAxisLabelText: string;
+ yAxisMax: number;
+ yAxisMaxTicksLimit: number;
+ yAxisMin: number;
+ yAxisStepSize: number;
+ yAxisShowGridlines: boolean;
+ updateTitle: (value: string) => void;
+}
+
+export enum DataSourceType {
+ Static,
+ List
+}
+
+export type EasingType = 'linear' |
+ 'easeInQuad' |
+ 'easeOutQuad' |
+ 'easeInOutQuad' |
+ 'easeInCubic' |
+ 'easeOutCubic' |
+ 'easeInOutCubic' |
+ 'easeInQuart' |
+ 'easeOutQuart' |
+ 'easeInOutQuart' |
+ 'easeInQuint' |
+ 'easeOutQuint' |
+ 'easeInOutQuint' |
+ 'easeInSine' |
+ 'easeOutSine' |
+ 'easeInOutSine' |
+ 'easeInExpo' |
+ 'easeOutExpo' |
+ 'easeInOutExpo' |
+ 'easeInCirc' |
+ 'easeOutCirc' |
+ 'easeInOutCirc' |
+ 'easeInElastic' |
+ 'easeOutElastic' |
+ 'easeInOutElastic' |
+ 'easeInBack' |
+ 'easeOutBack' |
+ 'easeInOutBack' |
+ 'easeInBounce' |
+ 'easeOutBounce' |
+ 'easeInOutBounce';
+
+ export type CapType = 'butt' | 'round' | 'square';
+
+ export type JoinType = 'bevel' | 'round' | 'miter';
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.module.scss b/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.module.scss
new file mode 100644
index 000000000..213d02903
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.module.scss
@@ -0,0 +1,62 @@
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+
+.chartTitle {
+ font-size: 14px;
+ font-weight: 100;
+ // margin-bottom: 0;
+ color: $ms-color-neutralPrimary;
+ text-align: center;
+
+ @media (min-width: 320px) {
+ font-size: 21px;
+ }
+
+ @media (min-width: 480px) {
+ font-size: 24px;
+ }
+
+ // Edit mode
+ textarea {
+ background-color: transparent;
+ border: none;
+ box-sizing: border-box;
+ color: inherit;
+ display: block;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ height: 36px;
+ line-height: inherit;
+ margin: 0;
+ outline: 0;
+ overflow: hidden;
+ resize: none;
+ text-align: inherit;
+ white-space: pre;
+ width: 100%;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+ text-align: center;
+ }
+
+ textarea::-webkit-input-placeholder {
+ color:$ms-color-neutralTertiaryAlt;
+ }
+
+ textarea:-moz-placeholder { /* Firefox 18- */
+ color:$ms-color-neutralTertiaryAlt;
+ }
+
+ textarea::-moz-placeholder { /* Firefox 19+ */
+ color:$ms-color-neutralTertiaryAlt;
+ }
+
+ textarea:-ms-input-placeholder {
+ color:$ms-color-neutralTertiaryAlt;
+ }
+
+ // View mode
+ span {
+ color: inherit;
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.tsx
new file mode 100644
index 000000000..10d7eb2ab
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { DisplayMode } from '@microsoft/sp-core-library';
+import styles from './ChartTitle.module.scss';
+import { IChartTitleProps } from './ChartTitle.types';
+import { css } from "office-ui-fabric-react/lib/Utilities";
+
+/**
+ * Chart Title component -- designed to mimic the Quick Chart title component.
+ * Unfortunately, the PnP WebParttitle control doesn't allow you to specify a placeholder.
+ * PR is coming up!
+ */
+export class ChartTitle extends React.Component {
+ /**
+ * Process the text area change
+ */
+ private _onChange = (event) => {
+ this.props.updateTitle(event.target.value);
+ }
+
+ /**
+ * Default React component render method
+ */
+ public render(): React.ReactElement {
+ if (this.props.title || this.props.displayMode === DisplayMode.Edit) {
+ return (
+
+ {
+ this.props.displayMode === DisplayMode.Edit &&
+ }
+ {
+ this.props.displayMode !== DisplayMode.Edit && this.props.title && {this.props.title}
+ }
+
+ );
+ }
+
+ return null;
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.types.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.types.ts
new file mode 100644
index 000000000..497c55611
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/ChartTitle.types.ts
@@ -0,0 +1,9 @@
+import { DisplayMode } from '@microsoft/sp-core-library';
+
+export interface IChartTitleProps {
+ className?: string;
+ displayMode: DisplayMode;
+ placeholder?: string;
+ title: string;
+ updateTitle: (value: string) => void;
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/index.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/index.ts
new file mode 100644
index 000000000..b121b625f
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/ChartTitle/index.ts
@@ -0,0 +1,2 @@
+export * from './ChartTitle';
+export * from './ChartTitle.types';
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx
new file mode 100644
index 000000000..7e79bb22c
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import * as strings from 'ChartinatorWebPartStrings';
+import { INumberTextFieldProps, INumberTextFieldState } from './NumberTextField.types';
+
+/**
+ * Textbox for only signed numbers
+ */
+export class NumberTextField extends React.Component {
+ constructor(props: INumberTextFieldProps) {
+ super(props);
+
+ this.state = {
+ value: props.value !== undefined ? props.value.toString() : undefined
+ };
+ }
+
+ /**
+ * Renders the textobx
+ */
+ public render(): JSX.Element {
+ return (
+ this._handleChange(newValue)}
+ onGetErrorMessage={(value: string) => this._validateNumber(value)}
+ />
+ );
+ }
+
+ /**
+ * Validates a number as it is typed in
+ * @param value the value
+ */
+ private _validateNumber(value: string): string {
+ return isNaN(Number(value)) ? strings.NumberErrorMessage : '';
+ }
+
+ /**
+ * Handles changes in the textbox
+ */
+ private _handleChange(newValue: string): void {
+ this.setState({
+ value: newValue
+ });
+
+ this.props.onChanged(newValue);
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.types.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.types.ts
new file mode 100644
index 000000000..d7681b45b
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.types.ts
@@ -0,0 +1,10 @@
+export interface INumberTextFieldProps {
+ label: string;
+ placeholder: string;
+ value: number;
+ onChanged: (newValue: string) => void;
+}
+
+export interface INumberTextFieldState {
+ value: string;
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/index.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/index.ts
new file mode 100644
index 000000000..ef64c8cbb
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/index.ts
@@ -0,0 +1,2 @@
+export * from './NumberTextField';
+export * from './NumberTextField.types';
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/IPropertyFieldRepeatingDataInternalProps.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/IPropertyFieldRepeatingDataInternalProps.ts
new file mode 100644
index 000000000..65e121536
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/IPropertyFieldRepeatingDataInternalProps.ts
@@ -0,0 +1,5 @@
+import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
+import { IPropertyFieldRepeatingDataProps } from '.';
+
+
+export interface IPropertyFieldRepeatingDataInternalProps extends IPropertyPaneCustomFieldProps, IPropertyFieldRepeatingDataProps {}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingData.module.scss b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingData.module.scss
new file mode 100644
index 000000000..0193a5641
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingData.module.scss
@@ -0,0 +1,7 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.propertyPaneGroupField {
+ padding-top : 4px;
+ color : $ms-color-neutralPrimary;
+ word-wrap : break-word;
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingData.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingData.ts
new file mode 100644
index 000000000..df63b9c10
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingData.ts
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import {
+ IPropertyPaneField,
+ PropertyPaneFieldType
+} from '@microsoft/sp-webpart-base';
+
+import { IPropertyFieldRepeatingDataProps } from "./PropertyFieldRepeatingData.types";
+import { IPropertyFieldRepeatingDataHostProps } from './PropertyFieldRepeatingData.types';
+import PropertyFieldRepeatingNumberDataHost from './PropertyFieldRepeatingDataHost';
+import { IPropertyFieldRepeatingDataInternalProps } from './IPropertyFieldRepeatingDataInternalProps';
+
+/**
+ * Handles entering repeating rows of data
+ */
+class PropertyFieldRepeatingDataBuilder implements IPropertyPaneField {
+
+ //Properties defined by IPropertyPaneField
+ public targetProperty: string;
+ public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;
+ public properties: IPropertyFieldRepeatingDataInternalProps;
+
+ private elem: HTMLElement;
+
+ public constructor(_properties: IPropertyFieldRepeatingDataProps) {
+ this.properties = {
+ key: _properties.key,
+ data: _properties.data,
+ chartType: _properties.chartType,
+ onRender: this.onRender.bind(this),
+ onDataChanged: (data: any) => _properties.onDataChanged(data)
+ };
+ }
+
+ public render(): void {
+ if (!this.elem) {
+ return;
+ }
+ this.onRender(this.elem);
+ }
+
+ /** Renders the repeating data control */
+ private onRender(elem: HTMLElement, _ctx?: any, _changeCallback?: (targetProperty?: string, newValue?: any) => void): void {
+ if (!this.elem) {
+ this.elem = elem;
+ }
+
+ const element: React.ReactElement = React.createElement(PropertyFieldRepeatingNumberDataHost, {
+ data: this.properties.data,
+ chartType: this.properties.chartType,
+ onDataChanged: (data: any) => this.properties.onDataChanged(data)
+ });
+ ReactDom.render(element, elem);
+ }
+}
+
+/**
+ * Creates an instance of PropertyFieldRepeatingData
+ * @param properties The IPropertyFieldRepeatingDataProps to configure the control
+ */
+export function PropertyFieldRepeatingData(properties: IPropertyFieldRepeatingDataProps): IPropertyPaneField {
+ return new PropertyFieldRepeatingDataBuilder(properties);
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingData.types.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingData.types.ts
new file mode 100644
index 000000000..b5ca458c1
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingData.types.ts
@@ -0,0 +1,58 @@
+import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
+import { ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+/**
+ * Configuration properties for the PropertyFieldRepeatingData control
+ */
+export interface IPropertyFieldRepeatingDataProps {
+ chartType: ChartType;
+ data: {}[];
+ key: string;
+ onDataChanged: (any) => void;
+}
+
+/**
+ * State for the PropertyFieldRepeatingData cotnrol
+ */
+export interface IPropertyFieldRepeatingDataState {
+ data: {}[];
+}
+
+/**
+ * Properties for the PropertyFieldRepeatingDataHost
+ */
+export interface IPropertyFieldRepeatingDataHostProps {
+ chartType: ChartType;
+ data: {}[];
+ onDataChanged: (any) => void;
+}
+
+/**
+ * Contains points for number charts
+ */
+export interface INumberChartData {
+ id: string;
+ name: string;
+ value: number;
+}
+
+/**
+ * Contains points for bubble chart
+ */
+export interface IBubbleChartData {
+ id: string;
+ name: string;
+ x: number;
+ y: number;
+ r: number;
+}
+
+/**
+ * Contains points for scatter charts
+ */
+export interface IScatterChartData {
+ id: string;
+ name: string;
+ x: number;
+ y: number;
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingDataHost.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingDataHost.tsx
new file mode 100644
index 000000000..a1dcc2297
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingDataHost.tsx
@@ -0,0 +1,241 @@
+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 styles from './PropertyFieldRepeatingData.module.scss';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { NumberTextField } from '../NumberTextField/NumberTextField';
+import * as strings from 'ChartinatorWebPartStrings';
+import { Guid } from '@microsoft/sp-core-library';
+import { ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+/**
+ * Hosts the PropertyFieldRepeatingData control
+ */
+export default class IPropertyFieldRepeatingDataHost extends React.Component {
+
+ constructor(props: IPropertyFieldRepeatingDataHostProps) {
+ super(props);
+
+ this.state = {
+ data: props.data
+ };
+ }
+
+ /**
+ * Renders the control
+ */
+ public render(): JSX.Element {
+ const { chartType } = this.props;
+
+ // Get the datarows
+ let dataRows: JSX.Element[] = undefined;
+ switch (chartType) {
+ case ChartType.Bubble:
+ dataRows = this._renderBubbleRows();
+ break;
+ case ChartType.Scatter:
+ dataRows = this._renderPointRows();
+ break;
+ default:
+ dataRows = this._renderDataRows();
+ }
+
+ return (
+
+ {dataRows}
+
this._handleRowAdd()}
+ >
+ {strings.AddButtonLabel}
+
+
+
this._handleRowChange(dataRow.id, 'name', newValue)}
+ />
+ this._handleRowChange(dataRow.id, 'value', newValue)}
+ />
+
+ {index > 0 &&
+ this._handleRowDelete(dataRow.id)} />}
+
+
+
this._handleRowChange(dataRow.key, 'name', newValue)}
+ />
+ this._handleRowChange(dataRow.id, 'x', newValue)}
+ />
+ this._handleRowChange(dataRow.id, 'y', newValue)}
+ />
+ this._handleRowChange(dataRow.id, 'r', newValue)}
+ />
+ {index > 0 &&
+ this._handleRowDelete(dataRow.id)} />}
+
+
+
this._handleRowChange(dataRow.id, 'name', newValue)}
+ />
+ this._handleRowChange(dataRow.id, 'x', newValue)}
+ />
+ this._handleRowChange(dataRow.id, 'y', newValue)}
+ />
+ {index > 0 &&
+ this._handleRowDelete(dataRow.id)} />}
+
+
{
+ public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;
+ public properties: IPropertyPaneChartPaletteSelectorInternalProps;
+ private element: HTMLElement;
+
+ constructor(public targetProperty: string, properties: IPropertyPaneChartPaletteSelectorProps) {
+ this.properties = {
+ key: properties.label,
+ label: properties.label,
+ disabled: properties.disabled,
+ options: properties.options,
+ selectedKey: properties.selectedKey,
+ onPropertyChange: properties.onPropertyChange,
+ onRender: this.onRender.bind(this)
+ };
+ }
+
+ public render(): void {
+ if (!this.element) {
+ return;
+ }
+ }
+
+ /**
+ * Render's the control
+ * @param element
+ */
+ private onRender(element: HTMLElement): void {
+ if (!this.element) {
+ this.element = element;
+ }
+
+ // render the palette selector
+ const reactElement: React.ReactElement = React.createElement(ChartPaletteSelector, {
+ label: this.properties.label,
+ onChanged: (option: IDropdownOption, index?: number) => this.onChanged(option, index),
+ options: this.properties.options,
+ selectedKey: this.properties.selectedKey,
+ disabled: this.properties.disabled,
+ stateKey: new Date().toString() // hack to allow for externally triggered re-rendering
+ });
+ ReactDom.render(reactElement, element);
+ }
+
+ /**
+ * On changed call handler
+ * @param option
+ * @param index
+ */
+ private onChanged(option: IDropdownOption, index?: number): void {
+ this.properties.onPropertyChange(this.targetProperty, option.key);
+ }
+}
+
+export function PropertyPaneChartPaletteSelector(targetProperty: string, properties: IPropertyPaneChartPaletteSelectorProps): IPropertyPaneField {
+ return new PropertyPaneChartPaletteSelectorBuilder(targetProperty, {
+ ...properties,
+ });
+}
+
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.module.scss b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.module.scss
new file mode 100644
index 000000000..2380bade2
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.module.scss
@@ -0,0 +1,39 @@
+.chartPaletteSelector {
+ color: inherit;
+}
+
+.colorChoice {
+ display: table-row;
+}
+
+.colorCell {
+ position: relative;
+ box-sizing: border-box;
+ display: table-cell;
+ cursor: pointer;
+ vertical-align: top;
+ padding-top: 0px;
+ padding-right: 0px;
+ padding-bottom: 0px;
+ padding-left: 0px;
+ user-select: none;
+ outline: transparent;
+ border-width: 1px;
+ border-style: solid;
+ border-color: transparent;
+ border-image: initial;
+ text-decoration: none;
+ border-radius: 0px;
+ overflow: visible;
+ background: transparent;
+}
+
+.svg {
+ width: 20px;
+ height: 20px;
+ padding-top: 4px;
+ padding-right: 4px;
+ padding-bottom: 4px;
+ padding-left: 4px;
+ box-sizing: content-box;
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx
new file mode 100644
index 000000000..e309d1e0a
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx
@@ -0,0 +1,102 @@
+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';
+
+import styles from './ChartPaletteSelector.module.scss';
+import { IChartPaletteSelectorProps, IChartPaletteSelectorState } from './ChartPaletteSelector.types';
+
+/**
+ * Displays a list of palette colours
+ */
+export default class ChartPaletteSelector extends React.Component {
+ constructor(props: IChartPaletteSelectorProps) {
+ super(props);
+ this.state = {
+ selectedKey: this.props.selectedKey
+ };
+ }
+ public render(): JSX.Element {
+ return (
+
+ this._onChanged(option, index)} />
+
+ );
+ }
+
+ /**
+ * Renders a drop down option
+ */
+ private _onRenderOption = (option: IDropdownOption): JSX.Element => {
+ // Get the palette name
+ const paletteName: string = option.key as string;
+
+ // Get the colors
+ const colors: string[] = option.data.colors;
+
+ return (
+ {
+ return (
+
+ {option.text}
+
+ );
+ }
+ }}
+ id={`${paletteName}_tooltip`}
+ directionalHint={DirectionalHint.bottomCenter}
+ >
+
+ {colors.map((colorValue: string, index: number) => {
+ return
+
;
+ })}
+
+
+ );
+ }
+
+ /**
+ * Render the palette that gets displayed when the drop down isn't expanded
+ */
+ private _onRenderTitle = (options: IDropdownOption[]): JSX.Element => {
+ const option = options[0];
+
+ return this._onRenderOption(option);
+ }
+
+ /**
+ * Selection has changed
+ * @param option Selected option
+ * @param index
+ */
+ private _onChanged(option: IDropdownOption, index?: number): void {
+ this.setState({
+ selectedKey: option.key
+ });
+ if (this.props.onChanged) {
+ this.props.onChanged(option, index);
+ }
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.types.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.types.ts
new file mode 100644
index 000000000..79745f7e0
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.types.ts
@@ -0,0 +1,17 @@
+import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+
+/**
+ * Properties for the chart palette select
+ */
+export interface IChartPaletteSelectorProps {
+ disabled: boolean;
+ label: string;
+ options: IDropdownOption[];
+ selectedKey: string | number;
+ stateKey: string;
+ onChanged: (option: IDropdownOption, index?: number) => void;
+}
+
+export interface IChartPaletteSelectorState {
+ selectedKey: string | number;
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/index.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/index.ts
new file mode 100644
index 000000000..2a68643e0
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/index.ts
@@ -0,0 +1,3 @@
+export * from './IPropertyPaneChartPaletteSelectorProps';
+export * from './IPropertyPaneChartPaletteSelectorInternalProps';
+export * from './PropertyPaneChartPaletteSelector';
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorInternalProps.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorInternalProps.ts
new file mode 100644
index 000000000..64942b766
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorInternalProps.ts
@@ -0,0 +1,4 @@
+import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
+import { IPropertyPaneDashSelectorProps } from './IPropertyPaneDashSelectorProps';
+
+export interface IPropertyPaneDashSelectorInternalProps extends IPropertyPaneCustomFieldProps, IPropertyPaneDashSelectorProps { }
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorProps.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorProps.ts
new file mode 100644
index 000000000..6fc419ff2
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorProps.ts
@@ -0,0 +1,9 @@
+import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+
+export interface IPropertyPaneDashSelectorProps {
+ disabled: boolean;
+ label: string;
+ options: IDropdownOption[]; // we pass the list of options in to make easier to define your own dashes
+ selectedKey: string | number;
+ onPropertyChange: (propertyPath: string, newValue: any) => void;
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts
new file mode 100644
index 000000000..8c23ea372
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import {
+ IPropertyPaneField,
+ PropertyPaneFieldType
+} from '@microsoft/sp-webpart-base';
+
+import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+
+import { IDashSelectorProps } from './components/DashSelector.types';
+import DashSelector from './components/DashSelector';
+import {
+ IPropertyPaneDashSelectorProps,
+ IPropertyPaneDashSelectorInternalProps,
+} from '.';
+
+/**
+ * Dash selector control for property panes
+ */
+class PropertyPaneDashSelectorBuilder implements IPropertyPaneField {
+ public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;
+ public properties: IPropertyPaneDashSelectorInternalProps;
+ private element: HTMLElement;
+
+ constructor(public targetProperty: string, properties: IPropertyPaneDashSelectorProps) {
+ this.properties = {
+ key: properties.label,
+ label: properties.label,
+ disabled: properties.disabled,
+ selectedKey: properties.selectedKey,
+ onPropertyChange: properties.onPropertyChange,
+ onRender: this.onRender.bind(this),
+ options: properties.options
+ };
+ }
+
+ public render(): void {
+ if (!this.element) {
+ return;
+ }
+ }
+
+ /**
+ * Render's the control
+ * @param element
+ */
+ private onRender(element: HTMLElement): void {
+ if (!this.element) {
+ this.element = element;
+ }
+
+ // render the palette selector
+ const reactElement: React.ReactElement = React.createElement(DashSelector, {
+ label: this.properties.label,
+ onChanged: (option: IDropdownOption, index?: number) => this.handleChange(option, index),
+ selectedKey: this.properties.selectedKey,
+ disabled: this.properties.disabled,
+ options: this.properties.options,
+ stateKey: new Date().toString() // hack to allow for externally triggered re-rendering
+ });
+
+ ReactDom.render(reactElement, element);
+ }
+
+ /**
+ * On changed call handler
+ * @param option
+ * @param index
+ */
+ private handleChange(option: IDropdownOption, index?: number): void {
+ this.properties.onPropertyChange(this.targetProperty, option.key);
+ }
+}
+
+export function PropertyPaneDashSelector(targetProperty: string, properties: IPropertyPaneDashSelectorProps): IPropertyPaneField {
+ return new PropertyPaneDashSelectorBuilder(targetProperty, {
+ ...properties,
+ });
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.module.scss b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.module.scss
new file mode 100644
index 000000000..75e262bfc
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.module.scss
@@ -0,0 +1,45 @@
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+
+.dashSelector {
+ color: inherit;
+}
+
+.dashChoice {
+ display: table-row;
+}
+
+.dashCell {
+ position: relative;
+ box-sizing: border-box;
+ display: table-cell;
+ cursor: pointer;
+ vertical-align: top;
+ padding-top: 0px;
+ padding-right: 0px;
+ padding-bottom: 0px;
+ padding-left: 0px;
+ user-select: none;
+ outline: transparent;
+ border-width: 1px;
+ border-style: solid;
+ border-color: transparent;
+ border-image: initial;
+ text-decoration: none;
+ border-radius: 0px;
+ overflow: visible;
+ background: transparent;
+}
+
+.svg {
+ width: 100%;
+ height: 20px;
+ padding-top: 4px;
+ padding-right: 4px;
+ padding-bottom: 4px;
+ padding-left: 4px;
+ box-sizing: content-box;
+ line {
+ stroke: $ms-color-neutralPrimary;
+ stroke-width: 2;
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx
new file mode 100644
index 000000000..eeae18bef
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx
@@ -0,0 +1,112 @@
+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';
+
+import styles from './DashSelector.module.scss';
+import { IDashSelectorProps, IDashSelectorState, DashType, DashStrokes } from './DashSelector.types';
+
+/**
+ * Displays a list of dash options.
+ *
+ */
+export default class DashSelector extends React.Component {
+ /**
+ *
+ */
+ constructor(props: IDashSelectorProps) {
+ super(props);
+ this.state = {
+ selectedKey: this.props.selectedKey
+ };
+ }
+
+ /** Renders the dash selector */
+ public render(): JSX.Element {
+ return (
+
+ this._onChanged(option, index)} />
+
+ );
+ }
+
+ /**
+ * Renders a drop down option
+ */
+ private _onRenderOption = (option: IDropdownOption): JSX.Element => {
+ // Get the palette name
+ const dashName: string = option.key as string;
+
+ // Get the colors
+ const strokes: number[] = option.data.strokes;
+
+ // Build a string describing the dash
+ // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
+ let dashString: string = "";
+ strokes.forEach((dashValue: number, index: number) => {
+ if (index > 0) {
+ dashString = dashString + ', ';
+ }
+ dashString = dashString + `${dashValue}px`;
+ });
+
+ return (
+ {
+ return (
+ {option.text}
+ );
+ }
+ }}
+ id={`${dashName}_tooltip`}
+ directionalHint={DirectionalHint.bottomCenter}
+ >
+
+
+ );
+ }
+
+ /**
+ * Render the palette that gets displayed when the drop down isn't expanded
+ */
+ private _onRenderTitle = (options: IDropdownOption[]): JSX.Element => {
+ const option = options[0];
+
+ return this._onRenderOption(option);
+ }
+
+ /**
+ * Selection has changed
+ * @param option Selected option
+ * @param index
+ */
+ private _onChanged(option: IDropdownOption, index?: number): void {
+ this.setState({
+ selectedKey: option.key
+ });
+ if (this.props.onChanged) {
+ this.props.onChanged(option, index);
+ }
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.types.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.types.ts
new file mode 100644
index 000000000..3ea6ec09e
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.types.ts
@@ -0,0 +1,48 @@
+import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+
+/**
+ * Properties for the dash selector
+ */
+export interface IDashSelectorProps {
+ disabled: boolean;
+ label: string;
+ options: IDropdownOption[];
+ selectedKey: string | number;
+ stateKey: string;
+ onChanged: (option: IDropdownOption, index?: number) => void;
+}
+
+/**
+ * Handles the dash selector state
+ */
+export interface IDashSelectorState {
+ selectedKey: string | number;
+}
+
+/**
+ * The various types of dash supported.
+ * Feel free to add your own
+ */
+export enum DashType {
+ Solid,
+ Dot,
+ Dash,
+ DashDot,
+ LongDash,
+ LongDashDot,
+ LongDashDotDot
+}
+
+/**
+ * Describes the dash strokes.
+ * https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
+ */
+export const DashStrokes = {
+ [DashType.Solid]: [],
+ [DashType.Dot]: [2],
+ [DashType.Dash]: [10, 5],
+ [DashType.DashDot]: [10, 5, 2, 5],
+ [DashType.LongDash]: [16, 5],
+ [DashType.LongDashDot]: [16, 5, 3, 5],
+ [DashType.LongDashDotDot]: [16, 5, 3, 5, 3, 5]
+};
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/index.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/index.ts
new file mode 100644
index 000000000..200be79cf
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/index.ts
@@ -0,0 +1,3 @@
+export * from './IPropertyPaneDashSelectorProps';
+export * from './IPropertyPaneDashSelectorInternalProps';
+export * from './PropertyPaneDashSelector';
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/loc/en-us.js b/samples/react-chartcontrol/src/webparts/chartinator/loc/en-us.js
new file mode 100644
index 000000000..df2b2e284
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/loc/en-us.js
@@ -0,0 +1,253 @@
+define([], function () {
+ return {
+ "AddButtonLabel": "Add",
+ "AnimateRotateFieldLabel": "Animate rotation",
+ "AnimateScaleFieldLabel": "Animate scale",
+ "AnimationGroupDescription": "Specify how the chart is animated when rendered. Set duration to 0 to disable animations.",
+ "AnimationGroupName": "Animation",
+ "AxisLabelText": "Label text",
+ "AxisShowLabel": "Show label",
+ "BarChartType": "Bar chart",
+ "BarSettingsGroupDescription": "By default, the chart will render the gridlines before the bars. If you disable 'Offset gridlines', the chart will render gridlines in the middle of each bar.",
+ "BarSettingsGroupName": "Bar settings",
+ "BorderColorFieldLabel": "Line color",
+ "BorderDashFieldLabel": "Dash type",
+ "BorderWidthFieldLabel": "Line width",
+ "Bottom": "Bottom",
+ "BottomPaddingFieldLabel": "Bottom padding",
+ "BubbleChartType": "Bubble chart",
+ "CapStyleButt": "Butt",
+ "CapStyleRound": "Round",
+ "CapStyleSquare": "Square",
+ "ChartDescription": {
+ "bubble": "A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.",
+ "doughnut": "A doughnut chart to show percentages of a whole. Best when used with fewer than seven categories.",
+ "horizontalbar": "A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. ",
+ "line": "A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.",
+ "pie": "Use a pie chart to show percentages of a whole. Best when used with fewer than seven categories.",
+ "polar": "Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.",
+ "radar": "A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.",
+ "scatter": "Scatter charts are based on basic line charts with the x axis changed to a linear axis",
+ "bar": "Use a bar chart to show data changes over time or comparisons among items. Categories are typically shown along the horizontal axis and values along the vertical axis."
+ },
+ "ChartRotationFieldLabel": "Rotation (degrees)",
+ "ChartSettingsPrefix": "",
+ "ChartSettingsSuffix": " options",
+ "ChartTitlePlaceholder": "Name your chart",
+ "ChartTypeGroupName": "Chart type",
+ "ChartTypeLabel": "Chart type",
+ "ChartTypeName": {
+ "Bar": "Bar chart",
+ "Bubble": "Bubble chart",
+ "Doughnut": "Donut chart",
+ "HorizontalBar": "Horizontal bar chart",
+ "Line": "Line chart",
+ "Pie": "Pie chart",
+ "PolarArea": "Polar area chart",
+ "Radar": "Radar chart",
+ "Scatter": "Scatter chart",
+ },
+ "CircumferenceFieldLabel": "Circumference (%)",
+ "ColorPaletteFieldLabel": "Color palette",
+ "DashNames": [
+ "Solid",
+ "Dot",
+ "Dash",
+ "Dash Dot",
+ "Long Dash",
+ "Long Dash Dot",
+ "Long Dash Dot Dot",
+ ],
+ "DashTypeFieldLabel": "Dash type",
+ "DataGroupName": "Data",
+ "DataLabelFieldLabel": "Data label",
+ "DataLabelFieldPlaceholder": "Enter a name",
+ "DataRemoveButtonLabel": "Remove",
+ "DataSetDefault": "My first dataset",
+ "DataSetFieldName": "Dataset name",
+ "DataSourceDataLabelFieldLabel": "Column with labels for each data point",
+ "DataSourceDataRValueFieldLabel": "Column that has the radius values",
+ "DataSourceDataValueFieldLabel": "Column that has the data to display",
+ "DataSourceDataXValueFieldLabel": "Column that has the X values",
+ "DataSourceDataYValueFieldLabel": "Column that has the Y values",
+ "DataSourcListIdFieldLabel": "Select a list",
+ "DataValueFieldLabel": "Value",
+ "DataValueFieldPlaceholder": "Enter a number",
+ "DataValueRFieldLabel": "Radius value",
+ "DataValueRFieldPlaceholder": "Enter a number",
+ "DataValueXFieldLabel": "X value",
+ "DataValueXFieldPlaceholder": "Enter a number",
+ "DataValueYFieldLabel": "Y value",
+ "DataValueYFieldPlaceholder": "Enter a number",
+ "DonutChartType": "Donut chart",
+ "DonutCutoutPercentageFieldLabel": "Cutout percentage",
+ "DonutSettingsGroupName": "Doughnut settings",
+ "DurationFieldDescription": "The duration of the animation, in milliseconds",
+ "DurationFieldLabel": "Duration",
+ "EasingEaseInBack": "Ease In Back",
+ "EasingEaseInBounce": "Ease In Bounce",
+ "EasingEaseInCirc": "Ease In Circ",
+ "EasingEaseInCubic": "Ease In Cubic",
+ "EasingEaseInElastic": "Ease In Elastic",
+ "EasingEaseInExpo": "Ease In Expo",
+ "EasingEaseInOutBack": "Ease In Out Back",
+ "EasingEaseInOutBounce": "Ease In Out Bounce",
+ "EasingEaseInOutCirc": "Ease In Out Circ",
+ "EasingEaseInOutCubic": "Ease In Out Cubic",
+ "EasingEaseInOutElastic": "Ease In Out Elastic",
+ "EasingEaseInOutExpo": "Ease In Out Expo",
+ "EasingEaseInOutQuad": "Ease In Out Quad",
+ "EasingEaseInOutQuart": "Ease In Out Quart",
+ "EasingEaseInOutQuint": "Eease In Out Quint",
+ "EasingEaseInOutSine": "Ease In Out Sine",
+ "EasingEaseInQuad": "Ease In Quad",
+ "EasingEaseInQuart": "Ese In Quart",
+ "EasingEaseInQuint": "Ease In Quint",
+ "EasingEaseInSine": "Ease In Sine",
+ "EasingEaseOutBack": "Ease Out Back",
+ "EasingEaseOutBounce": "Ease Out Bounce",
+ "EasingEaseOutCirc": "Ease Out Circ",
+ "EasingEaseOutCubic": "Ease Out Cubic",
+ "EasingEaseOutElastic": "Ease Out Elastic",
+ "EasingEaseOutExpo": "Ease Out Expo",
+ "EasingEaseOutQuad": "Ease Out Quad",
+ "EasingEaseOutQuart": "Ease Out Quart",
+ "EasingEaseOutQuint": "Ease Out Quint",
+ "EasingEaseOutSine": "Ease Out Sine",
+ "EasingFieldLabel": "Easing",
+ "EasingLinear": "Linear",
+ "FillEnd": "End",
+ "FillFieldLabel": "Fill",
+ "FillNone": "None",
+ "FillOrigin": "Origin",
+ "FillStart": "Start",
+ "GroupNotAvailable": "This configuration setting is not available for the type of chart you selected.",
+ "Hide": "Hide",
+ "HorizontalBarChartType": "Horizontal bar chart",
+ "JoinTypeBevel": "Bevel",
+ "JoinTypeMiter": "Miter",
+ "JoinTypeRound": "Round",
+ "LayoutGroupDescription": "Specify the space around the chart",
+ "LayoutGroupName": "Layout",
+ "Left": "Left",
+ "LeftPaddingFieldLabel": "Left padding",
+ "LegendDisplayLabel": "Legend",
+ "LegendGroupDescription": "Show or hide the legend and control its appearance.",
+ "LegendGroupName": "Legend",
+ "LegendPositionFieldLabel": "Position",
+ "LegendReversedFieldLabel": "Show legend in reverse order",
+ "LineCapStyleFieldLabel": "Cap type",
+ "LineChartType": "Line chart",
+ "LineCurvedFieldName": "Smoothed lines",
+ "LineCurvedFieldTooltipDisabled": "This option is disabled when Show lines is set to 'Hide'.",
+ "LineCurvedFieldTooltipDisabledCozStepped": "This option is disabled when Stepped lines is set to 'Stepped'",
+ "LineCurvedFieldTooltipEnabled": "Indicates whether the chart will draw the lines between points as smoothed lines or straight lines.",
+ "LineCurvedOff": "Straight",
+ "LineCurvedOn": "Smoothed",
+ "LineJoinStyleFieldLabel": "Join type",
+ "LineSettingsGroupName": "Line settings",
+ "LineShowLinesFieldLabel": "Show lines",
+ "LineShowLinesFieldTooltip": "Indicates whether the chart should draw lines between points. Turning this feature off will disable the stepped lines and smoothed lines options.",
+ "LineShowLinesOff": "Hide",
+ "LineShowLinesOn": "Show",
+ "LineSteppedFieldLabel": "Stepped lines",
+ "LineSteppedFieldTooltipDisabled": "This option is disabled when Show lines is set to 'Hide'.",
+ "LineSteppedFieldTooltipEnabled": "Indicates whether the chart will draw the lines between points as steps or as angled lines (i.e.: No step).",
+ "LineSteppedOff": "No step",
+ "LineSteppedOn": "Stepped",
+ "ListDataSource": "Get data from a SharePoint list on this site",
+ "None": "None",
+ "NumberErrorMessage": "Please enter a number.",
+ "Off": "Off",
+ "OffsetGridLinesFieldName": "Offset gridlines",
+ "On": "On",
+ "PaletteDescription": {
+ "OfficeColorful1": "Blue, Orange, Grey, Gold, Blue, Green.",
+ "OfficeColorful2": "Blue, Grey, Blue, Dark Blue, Dark Grey, Dark Blue.",
+ "OfficeColorful3": "Orange, Gold, Green, Brown, Dark Yellow, Dark Green.",
+ "OfficeColorful4": "Green, Blue, Gold, Dark Green, Dark Blue, Dark Yellow.",
+ "OfficeMonochromatic1": "Blue gradient, dark to light.",
+ "OfficeMonochromatic2": "Orange gradient, dark to light.",
+ "OfficeMonochromatic3": "Grey gradient, dark to light.",
+ "OfficeMonochromatic4": "Gold gradient, dark to light.",
+ "OfficeMonochromatic5": "Blue gradient, dark to light.",
+ "OfficeMonochromatic6": "Green gradient, dark to light.",
+ "OfficeMonochromatic7": "Dark Grey, Light Grey, Grey, Dark Grey, Light Grey, Grey.",
+ "OfficeMonochromatic8": "Blue gradient, light to dark.",
+ "OfficeMonochromatic9": "Orange gradient, light to dark.",
+ "OfficeMonochromatic10": "Grey gradient, light to dark.",
+ },
+ "PaletteGroupDescription": "Choose a color palette to change the chart's default colors. ",
+ "PaletteGroupName": "Palette",
+ "PaletteName": {
+ "OfficeColorful1": "Colorful Palette 1",
+ "OfficeColorful2": "Colorful Palette 2",
+ "OfficeColorful3": "Colorful Palette 3",
+ "OfficeColorful4": "Colorful Palette 4",
+ "OfficeMonochromatic1": "Monochromatic Palette 1",
+ "OfficeMonochromatic2": "Monochromatic Palette 2",
+ "OfficeMonochromatic3": "Monochromatic Palette 3",
+ "OfficeMonochromatic4": "Monochromatic Palette 4",
+ "OfficeMonochromatic5": "Monochromatic Palette 5",
+ "OfficeMonochromatic6": "Monochromatic Palette 6",
+ "OfficeMonochromatic7": "Monochromatic Palette 7",
+ "OfficeMonochromatic8": "Monochromatic Palette 8",
+ "OfficeMonochromatic9": "Monochromatic Palette 9",
+ "OfficeMonochromatic10": "Monochromatic Palette 10",
+ },
+ "PieChartType": "Pie chart",
+ "PieSettingsGroupName": "Pie settings",
+ "PixelUnitSuffix": "px",
+ "PointRadiusFieldLabel": "Point radius",
+ "PointRotationFieldLabel": "Point rotation",
+ "PointSettingsGroup": "Point settings",
+ "PointStyleCircle": "Circle",
+ "PointStyleCross": "Cross",
+ "PointStyleCrossRot": "Rotated cross",
+ "PointStyleDash": "Dash",
+ "PointStyleFieldLabel": "Point style",
+ "PointStyleLine": "Line",
+ "PointStyleRect": "Rectangle",
+ "PointStyleRectRot": "Rotated rectangle",
+ "PointStyleRectRounded": "Rounded rectangle",
+ "PointStyleStar": "Star",
+ "PointStyleTriangle": "Triangle",
+ "PolarChartType": "Polar area chart",
+ "PolarSettingsGroupName": "Polar area settings",
+ "PropertyPaneDescription": "Select a chart type and then select a data source. You can enter data points, or use data from a SharePoint list on this site as the data source.",
+ "RadarChartType": "Radar chart",
+ "ResetDonutPieSettingsButtonLabel": "Reset",
+ "Right": "Right",
+ "RightPaddingFieldLabel": "Right padding",
+ "SampleLabels": ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ "ScatterChartType": "Scatter chart",
+ "Show": "Show",
+ "ShowGridlinesFieldLabel": "Show gridlines",
+ "StaticDataSource": "Enter data",
+ "TooltipGroupDescription": "Show or hide tooltips and control its position.",
+ "TooltipModeDataset": "Dataset",
+ "TooltipModeFieldLabel": "Mode",
+ "TooltipModeIndex": "Index",
+ "TooltipModeNearest": "Nearest",
+ "TooltipModePoint": "Point",
+ "TooltipModeX": "X",
+ "TooltipModeY": "Y",
+ "TooltipsEnabledFieldLabel": "Tooltips",
+ "TooltipsGroupName": "Tooltips",
+ "TooltipsIntersectFieldLabel": "Intersect",
+ "TooltipsPositionAverage": "Average",
+ "TooltipsPositionFieldLabel": "Position",
+ "TooltipsPositionNearest": "Nearest",
+ "Top": "Top",
+ "TopPaddingFieldLabel": "Top padding",
+ "XAxisGroupDescription": "Controls whether the horizontal axis label should be shown, and other options",
+ "XAxisGroupName": "Horizontal axis",
+ "YAxisBeginAtZero": "Always begin at zero",
+ "YAxisGroupDescription": "Controls whether the vertical axis label should be shown. ",
+ "YAxisGroupName": "Vertical axis",
+ "YAxisMaxStepsFieldLabel": "Maximum number of lines",
+ "YAxisMaxValueFieldLabel": "Maximum value",
+ "YAxisMinValueFieldLabel": "Minimum value",
+ "YAxisStepSizeFieldLabel": "Step size",
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/chartinator/loc/mystrings.d.ts
new file mode 100644
index 000000000..a9208756c
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/chartinator/loc/mystrings.d.ts
@@ -0,0 +1,198 @@
+declare interface IChartinatorWebPartStrings {
+ AddButtonLabel: string;
+ AnimateRotateFieldLabel: string;
+ AnimateScaleFieldLabel: string;
+ AnimationGroupDescription: string;
+ AnimationGroupName: string;
+ AxisLabelText: string;
+ AxisShowLabel: string;
+ BarChartType: string;
+ BarSettingsGroupDescription: string;
+ BarSettingsGroupName: string;
+ BorderColorFieldLabel: string;
+ BorderDashFieldLabel: string;
+ BorderWidthFieldLabel: string;
+ Bottom: string;
+ BottomPaddingFieldLabel: string;
+ BubbleChartType: string;
+ CapStyleButt: string;
+ CapStyleRound: string;
+ CapStyleSquare: string;
+ ChartDescription: { [key: string]: string };
+ ChartRotationFieldLabel: string;
+ ChartSettingsPrefix: string;
+ ChartSettingsSuffix: string;
+ ChartTitlePlaceholder: string;
+ ChartTypeGroupName: string;
+ ChartTypeLabel: string;
+ ChartTypeName: string[];
+ CircumferenceFieldLabel: string;
+ ColorPaletteFieldLabel: string;
+ DashNames: string[];
+ DashTypeFieldLabel: string;
+ DataGroupName: string;
+ DataLabelFieldLabel: string;
+ DataLabelFieldPlaceholder: string;
+ DataRemoveButtonLabel: string;
+ DataSetDefault: string;
+ DataSetFieldName: string;
+ DataSourceDataLabelFieldLabel: string;
+ DataSourceDataRValueFieldLabel: string;
+ DataSourceDataValueFieldLabel: string;
+ DataSourceDataXValueFieldLabel: string;
+ DataSourceDataYValueFieldLabel: string;
+ DataSourcListIdFieldLabel: string;
+ DataValueFieldLabel: string;
+ DataValueFieldPlaceholder: string;
+ DataValueRFieldLabel: string;
+ DataValueRFieldPlaceholder: string;
+ DataValueXFieldLabel: string;
+ DataValueXFieldPlaceholder: string;
+ DataValueYFieldLabel: string;
+ DataValueYFieldPlaceholder: string;
+ DonutChartType: string;
+ DonutCutoutPercentageFieldLabel: string;
+ DonutSettingsGroupName: string;
+ DurationFieldDescription: string;
+ DurationFieldLabel: string;
+ EasingEaseInBack: string;
+ EasingEaseInBounce: string;
+ EasingEaseInCirc: string;
+ EasingEaseInCubic: string;
+ EasingEaseInElastic: string;
+ EasingEaseInExpo: string;
+ EasingEaseInOutBack: string;
+ EasingEaseInOutBounce: string;
+ EasingEaseInOutCirc: string;
+ EasingEaseInOutCubic: string;
+ EasingEaseInOutElastic: string;
+ EasingEaseInOutExpo: string;
+ EasingEaseInOutQuad: string;
+ EasingEaseInOutQuart: string;
+ EasingEaseInOutQuint: string;
+ EasingEaseInOutSine: string;
+ EasingEaseInQuad: string;
+ EasingEaseInQuart: string;
+ EasingEaseInQuint: string;
+ EasingEaseInSine: string;
+ EasingEaseOutBack: string;
+ EasingEaseOutBounce: string;
+ EasingEaseOutCirc: string;
+ EasingEaseOutCubic: string;
+ EasingEaseOutElastic: string;
+ EasingEaseOutExpo: string;
+ EasingEaseOutQuad: string;
+ EasingEaseOutQuart: string;
+ EasingEaseOutQuint: string;
+ EasingEaseOutSine: string;
+ EasingFieldLabel: string;
+ EasingLinear: string;
+ FillEnd: string;
+ FillFieldLabel: string;
+ FillNone: string;
+ FillOrigin: string;
+ FillStart: string;
+ GroupNotAvailable: string;
+ Hide: string;
+ HorizontalBarChartType: string;
+ JoinTypeBevel
+ JoinTypeMiter: string;
+ JoinTypeRound: string;
+ LayoutGroupDescription: string;
+ LayoutGroupName: string;
+ Left: string;
+ LeftPaddingFieldLabel: string;
+ LegendDisplayLabel: string;
+ LegendGroupDescription: string;
+ LegendGroupName: string;
+ LegendPositionFieldLabel: string;
+ LegendReversedFieldLabel: string;
+ LineCapStyleFieldLabel: string;
+ LineChartType: string;
+ LineCurvedFieldName: string;
+ LineCurvedFieldTooltipDisabled: string;
+ LineCurvedFieldTooltipDisabledCozStepped: string;
+ LineCurvedFieldTooltipEnabled: string;
+ LineCurvedOff: string;
+ LineCurvedOn: string;
+ LineJoinStyleFieldLabel: string;
+ LineSettingsGroupName: string;
+ LineShowLinesFieldLabel: string;
+ LineShowLinesFieldTooltip: string;
+ LineShowLinesOff: string;
+ LineShowLinesOn: string;
+ LineSteppedFieldLabel: string;
+ LineSteppedFieldTooltipDisabled: string;
+ LineSteppedFieldTooltipEnabled: string;
+ LineSteppedOff: string;
+ LineSteppedOn: string;
+ ListDataSource: string;
+ None: string;
+ NumberErrorMessage: string;
+ Off: string;
+ OffsetGridLinesFieldName: string;
+ On: string;
+ PaletteDescription: string[];
+ PaletteGroupDescription: string;
+ PaletteGroupName: string;
+ PaletteName: string[];
+ PieChartType: string;
+ PieSettingsGroupName: string;
+ PixelUnitSuffix: string;
+ PointRadiusFieldLabel: string;
+ PointRotationFieldLabel: string;
+ PointSettingsGroup: string;
+ PointStyleCircle: string;
+ PointStyleCross: string;
+ PointStyleCrossRot: string;
+ PointStyleDash: string;
+ PointStyleFieldLabel: string;
+ PointStyleLine: string;
+ PointStyleRect: string;
+ PointStyleRectRot: string;
+ PointStyleRectRounded: string;
+ PointStyleStar: string;
+ PointStyleTriangle: string;
+ PolarChartType: string;
+ PolarSettingsGroupName: string;
+ PropertyPaneDescription: string;
+ RadarChartType: string;
+ ResetDonutPieSettingsButtonLabel: string;
+ Right: string;
+ RightPaddingFieldLabel: string;
+ SampleLabels: string[];
+ ScatterChartType: string;
+ Show: string;
+ ShowGridlinesFieldLabel: string;
+ StaticDataSource: string;
+ TooltipGroupDescription: string;
+ TooltipModeDataset: string;
+ TooltipModeFieldLabel: string;
+ TooltipModeIndex: string;
+ TooltipModeNearest: string;
+ TooltipModePoint: string;
+ TooltipModeX: string;
+ TooltipModeY: string;
+ TooltipsEnabledFieldLabel: string;
+ TooltipsGroupName: string;
+ TooltipsIntersectFieldLabel: string;
+ TooltipsPositionAverage: string;
+ TooltipsPositionFieldLabel: string;
+ TooltipsPositionNearest: string;
+ Top: string;
+ TopPaddingFieldLabel: string;
+ XAxisGroupDescription: string;
+ XAxisGroupName: string;
+ YAxisBeginAtZero: string;
+ YAxisGroupDescription: string;
+ YAxisGroupName: string;
+ YAxisMaxStepsFieldLabel: string;
+ YAxisMaxValueFieldLabel: string;
+ YAxisMinValueFieldLabel: string;
+ YAxisStepSizeFieldLabel: string;
+}
+
+declare module 'ChartinatorWebPartStrings' {
+ const strings: IChartinatorWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.manifest.json
new file mode 100644
index 000000000..503e1177f
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.manifest.json
@@ -0,0 +1,22 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "849fad01-2cf4-4653-88ef-1fa9151a7b17",
+ "alias": "ComboChartDemoWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+ "title": { "default": "Combo Chart" },
+ "description": { "default": "Demonstrates how to create combination charts" },
+ "officeFabricIconFontName": "BIDashboard",
+ "properties": {
+ "description": "Combo Chart"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts
new file mode 100644
index 000000000..f0db308a2
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts
@@ -0,0 +1,58 @@
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+
+import * as strings from 'ComboChartDemoWebPartStrings';
+import ComboChartDemo from './components/ComboChartDemo';
+import { IComboChartDemoProps } from './components/IComboChartDemo.types';
+
+export interface IComboChartDemoWebPartProps {
+ description: string;
+}
+
+export default class ComboChartDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ ComboChartDemo,
+ {
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
+
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.module.scss b/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.module.scss
new file mode 100644
index 000000000..f105da527
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.module.scss
@@ -0,0 +1,12 @@
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+
+.comboChartDemo {
+ color: inherit;
+}
+
+:export {
+ border1: rgb(54, 162, 235);
+ background2: rgb(255, 99, 132);
+ border2: white;
+ background3: rgb(75, 192, 192);
+}
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.tsx b/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.tsx
new file mode 100644
index 000000000..912e31ce4
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import styles from './ComboChartDemo.module.scss';
+import { IComboChartDemoProps } from './IComboChartDemo.types';
+import * as strings from 'ComboChartDemoWebPartStrings';
+import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
+import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+
+const DATA_LENGTH: number = 7;
+const DATASET_LENGTH: number = 3;
+
+export default class ComboChartDemo extends React.Component {
+
+ /**
+ * Renders the command bar and the chart
+ */
+ public render(): React.ReactElement {
+
+ return (
+
+
+ );
+ }
+
+
+ /**
+ * Loads data from a service.
+ * This is where you would replace for your own code
+ */
+ private _loadAsyncData(): Promise {
+ return new Promise((resolve, reject) => {
+ // we're using a mock service that returns random numbers.
+ const dataProvider: IChartDataProvider = new MockChartDataProvider();
+ dataProvider.getMultiDataset(DATASET_LENGTH, DATA_LENGTH) // we only need 5 data elements for this demo
+ .then((numberArrays: Array) => {
+
+ const data: Chart.ChartData =
+ {
+ labels: strings.ChartLabels,
+ datasets: [{
+ type: 'line',
+ label: `${strings.DataSetLabel} 1`,
+ borderColor: styles.border1,
+ borderWidth: 2,
+ fill: false,
+ data: numberArrays[0]
+ },
+ {
+ type: 'bar',
+ label: `${strings.DataSetLabel} 2`,
+ backgroundColor: styles.background2,
+ data: numberArrays[1],
+ borderColor: styles.border2,
+ borderWidth: 2
+ },
+ {
+ type: 'bar',
+ label: `${strings.DataSetLabel} 3`,
+ backgroundColor: styles.background3,
+ data: numberArrays[2]
+ }]
+ };
+ resolve(data);
+ });
+ });
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/components/IComboChartDemo.types.ts b/samples/react-chartcontrol/src/webparts/comboChartDemo/components/IComboChartDemo.types.ts
new file mode 100644
index 000000000..369994e5f
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/components/IComboChartDemo.types.ts
@@ -0,0 +1,3 @@
+export interface IComboChartDemoProps {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/comboChartDemo/loc/en-us.js
new file mode 100644
index 000000000..a2a3069db
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/loc/en-us.js
@@ -0,0 +1,10 @@
+define([], function() {
+ return {
+ "ChartTitle": "Combo Bar Line Chart",
+ "DataSetLabel": "Dataset ",
+ "ChartLabels": ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ "RandomizeCommandLabel": "Randomize data",
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl to render a combination chart.
It is inspired by the combo bar-line chart sample from Chart.js.
`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/comboChartDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..c3e1a353e
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/loc/mystrings.d.ts
@@ -0,0 +1,13 @@
+declare interface IComboChartDemoWebPartStrings {
+ ChartTitle: string;
+ DataSetLabel: string;
+ ChartLabels: string[];
+ RandomizeCommandLabel: string;
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'ComboChartDemoWebPartStrings' {
+ const strings: IComboChartDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.manifest.json
new file mode 100644
index 000000000..2e6fa8dad
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.manifest.json
@@ -0,0 +1,22 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "3bc38cb3-d1b1-4572-8196-679445d39d58",
+ "alias": "CustomPluginDemoWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+ "title": { "default": "Custom Plugin" },
+ "description": { "default": "Demonstrates how to create your own chart plugin." },
+ "iconImageUrl": "data:image/png;base64,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",
+ "properties": {
+ "description": "Custom Plugin"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts
new file mode 100644
index 000000000..b6d0e2738
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts
@@ -0,0 +1,58 @@
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+
+import * as strings from 'CustomPluginDemoWebPartStrings';
+import CustomPluginDemo from './components/CustomPluginDemo';
+import { ICustomPluginDemoProps } from './components/ICustomPluginDemo,types';
+
+export interface ICustomPluginDemoWebPartProps {
+ description: string;
+}
+
+export default class CustomPluginDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ CustomPluginDemo,
+ {
+
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.module.scss b/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.module.scss
new file mode 100644
index 000000000..c3daba59c
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.module.scss
@@ -0,0 +1,19 @@
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+
+.customPluginDemo {
+ color: inherit;
+}
+
+// this is a neat trick to export styles from SCSS without hard-coding them in the code
+:export {
+ bugBackground1: #25cfe4;
+ bugBackground2: #92e7f1;
+ bugBackground3: #eeeeee;
+ fixesBackground1: #514463;
+ fixesBackground2: #8c75ab;
+ fixesBackground3: #eeeeee;
+ redesignsBackground1: #88CCF9;
+ redesignsBackground2: #0E98F3;
+ redesignsBackground3: #eeeeee;
+ fontColor: #526E7A;
+}
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.tsx b/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.tsx
new file mode 100644
index 000000000..9a2c40742
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.tsx
@@ -0,0 +1,183 @@
+import * as React from 'react';
+import styles from './CustomPluginDemo.module.scss';
+import { ICustomPluginDemoProps } from './ICustomPluginDemo,types';
+import * as strings from 'CustomPluginDemoWebPartStrings';
+
+// used to add a chart control
+import { ChartControl, ChartType, IChartPlugin } from "@pnp/spfx-controls-react/lib/ChartControl";
+
+// Import the chart.js helpers
+import * as Chart from 'chart.js';
+
+/**
+ * Declare the plugins before adding them.
+ * Custom plugins should implement portions of the IChartPlugin interface
+ */
+const donutPlugins: IChartPlugin[] = [
+ // This plugin renders the "rounded line" donut chart
+ {
+ afterUpdate: (chart: any) => {
+ var a = chart.config.data.datasets.length - 1;
+ for (let i in chart.config.data.datasets) {
+ for (var j = chart.config.data.datasets[i].data.length - 1; j >= 0; --j) {
+ if (Number(j) == (chart.config.data.datasets[i].data.length - 1))
+ continue;
+ var arc = chart.getDatasetMeta(i).data[j];
+ arc.round = {
+ x: (chart.chartArea.left + chart.chartArea.right) / 2,
+ y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
+ radius: chart.innerRadius + chart.radiusLength / 2 + (a * chart.radiusLength),
+ thickness: chart.radiusLength / 2 - 1,
+ backgroundColor: arc._model.backgroundColor
+ };
+ }
+ a--;
+ }
+ },
+ afterDraw: (chart: any) => {
+ var ctx = chart.chart.ctx;
+ for (let i in chart.config.data.datasets) {
+ for (var j = chart.config.data.datasets[i].data.length - 1; j >= 0; --j) {
+ if (Number(j) == (chart.config.data.datasets[i].data.length - 1))
+ continue;
+ var arc = chart.getDatasetMeta(i).data[j];
+ var startAngle = Math.PI / 2 - arc._view.startAngle;
+ var endAngle = Math.PI / 2 - arc._view.endAngle;
+
+ ctx.save();
+ ctx.translate(arc.round.x, arc.round.y);
+ ctx.fillStyle = arc.round.backgroundColor;
+ ctx.beginPath();
+ ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI);
+ ctx.closePath();
+ ctx.fill();
+ ctx.restore();
+ }
+ }
+ }
+ },
+ // This plugin renders text in the middle of the chart.
+ {
+ afterUpdate: (chart: any) => {
+ if (chart.config.options.elements.center) {
+ var helpers = Chart.helpers;
+ var centerConfig = chart.config.options.elements.center;
+ var globalConfig = Chart.defaults.global;
+ var ctx = chart.chart.ctx;
+
+ var fontStyle = helpers.getValueOrDefault(centerConfig.fontStyle, globalConfig.defaultFontStyle);
+ var fontFamily = helpers.getValueOrDefault(centerConfig.fontFamily, globalConfig.defaultFontFamily);
+
+ var fontSize = undefined;
+ if (centerConfig.fontSize)
+ fontSize = centerConfig.fontSize;
+ // figure out the best font size, if one is not specified
+ else {
+ ctx.save();
+ fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
+ var maxFontSize = helpers.getValueOrDefault(centerConfig.maxFontSize, 256);
+ var maxText = helpers.getValueOrDefault(centerConfig.maxText, centerConfig.text);
+
+ do {
+ ctx.font = helpers.fontString(fontSize, fontStyle, fontFamily);
+ var textWidth = ctx.measureText(maxText).width;
+
+ // check if it fits, is within configured limits and that we are not simply toggling back and forth
+ if (textWidth < chart.innerRadius * 2 && fontSize < maxFontSize)
+ fontSize += 1;
+ else {
+ // reverse last step
+ fontSize -= 1;
+ break;
+ }
+ } while (true);
+ ctx.restore();
+ }
+
+ // save properties
+ chart.center = {
+ font: helpers.fontString(fontSize, fontStyle, fontFamily),
+ fillStyle: helpers.getValueOrDefault(centerConfig.fontColor, globalConfig.defaultFontColor)
+ };
+ }
+ },
+ afterDraw: (chart: any) => {
+ if (chart.center) {
+ var centerConfig = chart.config.options.elements.center;
+ var ctx = chart.chart.ctx;
+
+ ctx.save();
+ ctx.font = chart.center.font;
+ ctx.fillStyle = chart.center.fillStyle;
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ var centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
+ var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
+ ctx.fillText(centerConfig.text, centerX, centerY);
+ ctx.restore();
+ }
+ }
+ }];
+
+/**
+ * Chart.js accepts options for the plugins as well.
+ * To prevent the compiler from complaining,
+ * we defined the options as "any" and pass them on.
+ */
+const chartOptions: any = {
+ elements: {
+ center: {
+ // the longest text that could appear in the center
+ maxText: '100%',
+ text: '67%',
+ fontColor: styles.fontColor,
+ fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+ fontStyle: 'normal',
+ // fontSize: 12,
+ // if a fontSize is NOT specified, we will scale (within the below limits) maxText to take up the maximum space in the center
+ // if these are not specified either, we default to 1 and 256
+ minFontSize: 1,
+ maxFontSize: 256,
+ }
+ },
+ legend: {
+ display: false
+ }
+};
+
+export default class CustomPluginDemo extends React.Component {
+
+ /**
+ * Renders the (static) donut chart with the plugins passed in
+ */
+ public render(): React.ReactElement {
+ return (
+
+
+ );
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/components/ICustomPluginDemo,types.ts b/samples/react-chartcontrol/src/webparts/customPluginDemo/components/ICustomPluginDemo,types.ts
new file mode 100644
index 000000000..6c0c85b55
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/components/ICustomPluginDemo,types.ts
@@ -0,0 +1,3 @@
+export interface ICustomPluginDemoProps {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/customPluginDemo/loc/en-us.js
new file mode 100644
index 000000000..20d8dd023
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/loc/en-us.js
@@ -0,0 +1,11 @@
+define([], function() {
+ return {
+ "Bugs": "Bugs",
+ "Fixes": "Fixes",
+ "Redesigns": "Redesigns",
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl with a custom chart plugin to render doughnut chart.
+ The concept for the chart's look and feel came from a StackOverflow question from fsenna .
+ The custom plugin code is inspired from JSFiddle from user8296539 in response to fsenna's question.
`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/customPluginDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..b6b54e8df
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/loc/mystrings.d.ts
@@ -0,0 +1,12 @@
+declare interface ICustomPluginDemoWebPartStrings {
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+ Bugs: string;
+ Fixes: string;
+ Redesigns: string;
+}
+
+declare module 'CustomPluginDemoWebPartStrings' {
+ const strings: ICustomPluginDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.manifest.json
new file mode 100644
index 000000000..ba18b06cb
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.manifest.json
@@ -0,0 +1,23 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "907cfe87-fffe-4d9c-8fac-3ea23c3f2c09",
+ "alias": "DonutPatternsDemoWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+
+ "title": { "default": "Donut with Patterns" },
+ "description": { "default": "Demonstrates how to render a donut chart and use patterns instead of colors" },
+ "officeFabricIconFontName": "DonutChart",
+ "properties": {
+ "description": "DonutPatternsDemo"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts
new file mode 100644
index 000000000..ed0a123f1
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts
@@ -0,0 +1,58 @@
+import * as React from 'react';
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+
+import DonutPatternsDemo from './components/DonutPatternsDemo';
+import { IDonutPatternsDemoProps } from './components/IDonutPatternsDemo.types';
+
+export interface IDonutPatternsDemoWebPartProps {
+ description: string;
+}
+
+export default class DonutPatternsDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ DonutPatternsDemo,
+ {
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.module.scss b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.module.scss
new file mode 100644
index 000000000..a6cff15c3
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.module.scss
@@ -0,0 +1,5 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.donutPatternsDemo {
+ color:inherit;
+}
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx
new file mode 100644
index 000000000..640f66438
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx
@@ -0,0 +1,143 @@
+import * as React from 'react';
+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 { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+
+// Patternomaly is used to render patterns
+import * as pattern from 'patternomaly';
+
+import { ChartControl, ChartType, PaletteGenerator, ChartPalette } from "@pnp/spfx-controls-react/lib/ChartControl";
+
+// There are 21 different patterns
+const NUM_PATTERNS: number = 21;
+
+const colors: string[] = PaletteGenerator.GetPalette(ChartPalette.OfficeColorful1, NUM_PATTERNS);
+/**
+ * The patterns generated using the colors above.
+ * You could also just generate the patterns randomly by writing:
+ * const patterns: CanvasPattern[] = pattern.generate(colors);
+ */
+const patterns: CanvasPattern[] = [
+ pattern.draw('plus', colors[0]),
+ pattern.draw('cross', colors[1]),
+ pattern.draw('dash', colors[2]),
+ pattern.draw('cross-dash', colors[3]),
+ pattern.draw('dot', colors[4]),
+ pattern.draw('dot-dash', colors[5]),
+ pattern.draw('disc', colors[6]),
+ pattern.draw('ring', colors[7]),
+ pattern.draw('line', colors[8]),
+ pattern.draw('line-vertical', colors[9]),
+ pattern.draw('weave', colors[10]),
+ pattern.draw('zigzag', colors[11]),
+ pattern.draw('zigzag-vertical', colors[12]),
+ pattern.draw('diagonal', colors[13]),
+ pattern.draw('diagonal-right-left', colors[14]),
+ pattern.draw('square', colors[15]),
+ pattern.draw('box', colors[16]),
+ pattern.draw('triangle', colors[17]),
+ pattern.draw('triangle-inverted', colors[18]),
+ pattern.draw('diamond', colors[19]),
+ pattern.draw('diamond-box', colors[20])
+];
+
+/**
+ * This sample demonstrates how you can use
+ * patternomaly to render a chart that uses patterns instead
+ * of (only) colours.
+ * @see https://github.com/ashiguruma/patternomaly
+ * @see https://github.com/ashiguruma/patternomaly/blob/master/examples/optional.html
+ * @see https://www.chartjs.org/docs/latest/general/colors.html
+ *
+ * This sample also demonstrates how you can use get the chart's data and
+ * 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 {
+ private _chartElem: ChartControl = undefined;
+
+ /**
+ * Renders the "Loading" spinner if the state is currently loading,
+ * or the chart once data is loladed
+ */
+ public render(): React.ReactElement {
+ return (
+
+ {
+ , checked: boolean) => this._onCheckboxChange(ev, checked)}
+ defaultChecked={true} />
+
+ );
+ }
+
+ // tslint:disable-next-line no-any
+ private _linkElement = (e: any) => {
+ this._chartElem = e;
+ }
+
+ /**
+ * Toggles between displaying patterns and not
+ * @param ev
+ * @param checked
+ */
+ private _onCheckboxChange(ev: React.FormEvent, checked: boolean): void {
+ // Use a pattern if checked, colors if not
+ var fill = (checked) ? patterns : colors;
+
+ const { data } = this._chartElem.getChart();
+
+ // Get access to the chart's dataset
+ data.datasets[0].backgroundColor = fill;
+
+ // Update the chart (without updating the entire web part)
+ this._chartElem.update();
+ }
+
+ /**
+* Loads data from a service.
+* This is where you would replace for your own code
+*/
+ private _loadAsyncData(): Promise {
+ return new Promise((resolve, _reject) => {
+ // we're using a mock service that returns random numbers.
+ const dataProvider: IChartDataProvider = new MockChartDataProvider();
+ dataProvider.getNumberArray(NUM_PATTERNS).then((dataSet: number[]) => {
+ const data: Chart.ChartData =
+ {
+ labels: strings.ChartLabels,
+ datasets: [
+ {
+ label: strings.DataSetLabel,
+ data: dataSet,
+ backgroundColor: patterns
+ }
+ ]
+ };
+ resolve(data);
+ });
+ });
+ }
+}
+
+
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/IDonutPatternsDemo.types.ts b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/IDonutPatternsDemo.types.ts
new file mode 100644
index 000000000..a62f37da0
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/IDonutPatternsDemo.types.ts
@@ -0,0 +1,7 @@
+export interface IDonutPatternsDemoProps {
+
+}
+
+export interface IDonutPatternsDemoState {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/loc/en-us.js
new file mode 100644
index 000000000..9a7e53295
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/loc/en-us.js
@@ -0,0 +1,33 @@
+define([], function () {
+ return {
+ "UsePatternsLabel": "Use patterns",
+ "Loading": "Loading...",
+ "DataSetLabel": "Patterns",
+ "ChartLabels": [
+ "Plus",
+ "Cross",
+ "Dash",
+ "Cross-dash",
+ "Dot",
+ "Dot-dash",
+ "Disc",
+ "Ring",
+ "Line",
+ "Line-vertical",
+ "Weave",
+ "Zigzag",
+ "Zigzag Vertical",
+ "Diagonal",
+ "Diagonal-right-left",
+ "Square",
+ "Box",
+ "Triangle",
+ "Triangle-inverted",
+ "Diamond",
+ "Diamond-box",
+
+ ],
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl to render a donut chart with patterns instead of colors.
It is inspired by the patternomaly sample referred by the Chart.js documentation
`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..9cda22346
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/loc/mystrings.d.ts
@@ -0,0 +1,13 @@
+declare interface IDonutPatternsDemoWebPartStrings {
+ UsePatternsLabel: string;
+ Loading: string;
+ DataSetLabel: string;
+ ChartLabels: string[];
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'DonutPatternsDemoWebPartStrings' {
+ const strings: IDonutPatternsDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.manifest.json
new file mode 100644
index 000000000..ed57b69c1
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.manifest.json
@@ -0,0 +1,23 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "eeadd4a5-4787-4d86-a606-17271bcfe81b",
+ "alias": "DynamicDataCallableWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+ "title": { "default": "Dynamic Data Callable" },
+ "description": { "default": "Demonstrates how to create a dynamic data callable web part with a chart" },
+ "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcCAYAAADj79JYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHYcAAB2HAY/l8WUAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAAASXSURBVHhe7ZxJqB1FFIafBlw44MaFCIoLiYqoGxEcgkNC1EV04Yw4gSIKGlSSjUiCLpIoDiQxEnBAUMEJdKEiTiGKIooQUCMuRBxAd84gKvr/8R0oD+ferq6uern9+D/4eLzb3ae7/wt1q6ure04IIYQQQgghhBCLnWvgk/Az+BP8GX4On4ZXQVGJk+EH8J8Od8IToBjAGhiFO82boSjgDhgFmuNqKHpwCoyC7KOalx58CKMQ+/g2FBmwNxIFWOLlUHTwFIzCK/FZKDpgPzsKr8RvoeiAFzVReKWKDr6HUXAl/gZFB6/BKLwS34Oig00wCq/Eh6Ho4DIYhVfi9VBk8CaMAuwjB7xEJmfCKMQ+roKiB0Pa8gehKOBWGAU6TY0UDoTjIbtgFG4qb0CcD0UlzobPQR/0Y/AkKBrhAz8Riob4wC+FoiE+8PVQNMQH/gwU/3Hw/N+q+MD/gPvDMWDHfNSe/+pyBPwBPrLnv4qkYZtjGTOx420R+G3Q6m/nB7Wwoqk74Biw420ROLkF2j628YMaWEHv6XDWsWNtFTi5Edp+tvCDoVgx7xtw1rFjbRk4uQHavgaPK1mhyKvhLGPHaYHv11COKdn+7oPFWJHIr+ABcFax47TA02Nv7T2wiKhY6gtwVrFj3BuBPwqL8IVeDj4r/jancCHcAF+B30HOT/8UPgGvhDnY8VngSxrKttv2Vxw2sSImr64+cp9R/nDU4FT4KvT1vTnz023d1j+aD0Db16CwiRUy7XL2S+iX8a7REDhO42t2OW1+uq3TMvD0TlmVq04rZlrgx8IfoV/ONv1A2Je0a9XXSXedbHmrwNdB20e1S3wraKYDNitgNFXua5jbzpILoK9BefV2CTwGLoUXwfthtG7UvNiyFoGvhVa/6niKFTX9CNnR8F3o16MvweNgF+/DdLs/Ib+ESZwD/STUaH66LWsR+OGQ0wSbD175wA3OuvLrmuxpXAujpoZDBH79aWEby6HfbqHnpx80/7cq/qQmBU5ugn791L8gw+eYAwd+zoKcU56u02cQ6F6Ybrso5qenJ0SnBU6Wwejmc65ss3M5D6bbLor56ekJ0a7ADbbdW+Hf0NeYJn8gczkM+u1Hjz+h3MCNQ+Cd8Avoa0WyN5LLodBvvy8cNf6E+gaeciTkY+Ob4aSrSXb9clkJ0205BDBazoUvwvSEKLt6XFaLx2Fan/3sXO6G6bbPw9HBrtUnMD2RyN2QXb2hRDN32c/uIupOjm7OTMlkTm4zFH55aU1e1LCfPYnT4K8w3WYMd6D+x5DpynfBIVwBo7rsZ7P5Ym+EP5Bss30zYo7q0fMaE/LZ/x7C7TCqmyPfgjEqajxyUmPqhL9yzHF0Ydd8qOo6OJQz4Fswqp/6Ojwejg7eHotOqMSajw1yRsBDkCORv0DW/wbyFVAXw9Eylgdj95n/O3pqPvr9OxQd6OUGC4xe37HA8N2EUXgl6gU1GegVTHuBj2EUYB/fgSKTGpf2fKOn6MFGGAWZI+/oiAJKQtdjhANh85LTpnPyDt/oKSqh11kLIYQQQgghhBBCCCGEEELMLnNz/wIB5HIsRa7e4QAAAABJRU5ErkJggg==",
+ "properties": {
+ "repoOwner": "SharePoint",
+ "repo": "sp-dev-fx-webparts"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts
new file mode 100644
index 000000000..dd39ac50b
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts
@@ -0,0 +1,144 @@
+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 * as strings from 'DynamicDataCallableWebPartStrings';
+import DynamicDataCallable from './components/DynamicDataCallable';
+import { IDynamicDataCallableProps } from './components/IDynamicDataCallableProps';
+import { IDynamicDataPropertyDefinition, IDynamicDataCallables } from '@microsoft/sp-dynamic-data';
+import { IContributor } from '../../services/GitHubService';
+
+/**
+ * The id of the dynamic data property we'll pass around
+ */
+const contributorProperty = 'contributor';
+
+export interface IDynamicDataCallableWebPartProps {
+ repoOwner: string;
+ repo: string;
+}
+
+export default class DynamicDataCallableWebPart extends BaseClientSideWebPart implements IDynamicDataCallables {
+ /** the last selected contributor */
+ private _selectedContributor: IContributor;
+
+ protected onInit(): Promise {
+ // register this web part as dynamic data source
+ this.context.dynamicDataSourceManager.initializeSource(this);
+ return Promise.resolve();
+ }
+
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ DynamicDataCallable,
+ {
+ repoOwner: this.properties.repoOwner,
+ repo: this.properties.repo,
+ httpClient: this.context.httpClient,
+ onSelectionChange: (alias: string) => {
+ this._onContributorSelected(alias);
+ },
+ onConfigure: this._onConfigure,
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ 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
+ */
+ protected get disableReactivePropertyChanges(): boolean {
+ // require an apply button on the property pane
+ return true;
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ header: {
+ description: strings.PropertyPaneDescription
+ },
+ groups: [
+ {
+ groupName: strings.BasicGroupName,
+ groupFields: [
+ PropertyPaneTextField('repoOwner', {
+ label: strings.RepoOwnerFieldLabel,
+ description: strings.RepoOwnerFieldDescription
+ }),
+ PropertyPaneTextField('repo', {
+ label: strings.RepoFieldLabel,
+ description: strings.RepoFieldDescription
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+
+ /**
+ * Return list of dynamic data properties that this dynamic data source
+ * returns
+ */
+ public getPropertyDefinitions(): ReadonlyArray {
+ return [
+ {
+ id: contributorProperty,
+ title: strings.ContributorProperty
+ }
+ ];
+ }
+
+ /**
+ * Return the current value of the specified dynamic data set
+ * @param propertyId ID of the dynamic data set to retrieve the value for
+ */
+ public getPropertyValue(propertyId: string): IContributor {
+ switch (propertyId) {
+ case contributorProperty:
+ return this._selectedContributor;
+ }
+
+ throw new Error(strings.BadPropertyIdErrorMessage);
+ }
+
+ /**
+ * Event handler for selecting a contributor from a donut
+ */
+ private _onContributorSelected = (alias: string): void => {
+ const contributor: IContributor = {
+ alias: alias,
+ repo: this.properties.repo,
+ repoOwner: this.properties.repoOwner
+ };
+ this._selectedContributor = contributor;
+ console.log('Data Callable Contributor selected', JSON.stringify(contributor));
+
+ // notify subscribers that the selected event has changed
+ this.context.dynamicDataSourceManager.notifyPropertyChanged(contributorProperty);
+ }
+
+ private _onConfigure = (): void => {
+ this.context.propertyPane.open();
+ }
+}
+
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.module.scss b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.module.scss
new file mode 100644
index 000000000..ff51e8fc5
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.module.scss
@@ -0,0 +1,47 @@
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+
+.dynamicDataCallable {
+ color: inherit;
+}
+
+.tooltip {
+ position: absolute;
+ pointer-events: none;
+ height: 64px;
+ overflow-y: hidden;
+}
+
+.tooltipTitle {
+ color: inherit;
+}
+
+.tooltipLegend {
+ width: 16px;
+ height: 16px;
+ display: table-cell;
+}
+
+.tooltipValue {
+ display: table-cell;
+}
+
+.tooltipThumb {
+ float: left;
+}
+
+.tooltipContent {
+ margin-left: 64px;
+}
+
+.avatarImg {
+ width: 60px;
+ height: 60px;
+ display: block;
+}
+
+:export {
+ vesaChromaticStart: #ffa500;
+ vesaChromaticEnd: #fff6e5;
+ borderColor: #fff;
+}
+
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx
new file mode 100644
index 000000000..c33ded385
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx
@@ -0,0 +1,240 @@
+import * as React from 'react';
+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';
+
+// used to add a chart control
+import { ChartControl, ChartType, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+// used to call GitHub
+import GitHubService from '../../../services/GitHubService/GitHubService';
+import { IGitHubService, IGitHubContributor } from '../../../services/GitHubService';
+
+export default class DynamicDataCallable extends React.Component {
+ /**
+* The chart element
+*/
+private _chartElem: ChartControl = undefined;
+private _tooltipElem: HTMLElement = undefined;
+private _tooltipImg: HTMLImageElement = undefined;
+private _avatarTitleElem: HTMLElement = undefined;
+private _contributionsElem: HTMLElement = undefined;
+private _contributionsLegendElem: HTMLElement = undefined;
+
+ public render(): React.ReactElement {
+ const {
+ repoOwner,
+ repo,
+ onConfigure
+ } = this.props;
+ // if we're not configured, show the placeholder
+ if (!repoOwner || !repo) {
+ return
+
+ {strings.Error}: {error}
+ }
+ options={
+ {
+ legend: {
+ display: false
+ },
+ title: {
+ display: true,
+ text: strings.ChartTitle
+ },
+ tooltips: {
+ enabled: false,
+ custom: (tooltip => {
+ // get the custom tooltip element
+ const elem = this._tooltipElem;
+
+ // if chart.js wants to hide the tooltip, don't bother showing it
+ // who are we to argume
+ if (tooltip!.opacity === 0) {
+ elem.style.opacity = '0';
+ return;
+ }
+
+ // if there are no data points, don't do anything
+ if (tooltip!.dataPoints!.length < 1) {
+ return;
+ }
+
+ // get the data from the chart
+ const data = this._chartElem!.getChart()!.data as any;
+ const avatars = data!.avatars;
+ const dataPoint = tooltip!.dataPoints![0];
+ const alias = data!.labels[dataPoint!.index];
+ const contributions = data!.datasets[0].data[dataPoint!.index];
+ const avatarUrl = avatars[dataPoint!.index];
+ if (avatarUrl) {
+ // set the tooltip position and size
+ const positionX = this._chartElem.getCanvas().offsetLeft;
+ const positionY = this._chartElem.getCanvas().offsetTop;
+ elem.style.opacity = '1';
+ elem.style.left = positionX + tooltip.caretX + 'px';
+ elem.style.top = positionY + tooltip.caretY + 'px';
+ elem.style.fontFamily = tooltip._bodyFontFamily;
+ elem.style.fontSize = tooltip.bodyFontSize;
+ elem.style.fontStyle = tooltip._bodyFontStyle;
+ elem.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
+ elem.style.backgroundColor = tooltip.backgroundColor;
+ elem.style.borderRadius = tooltip.cornerRadius;
+ elem.style.width = tooltip.width + 64 + 'px';
+ elem.style.borderColor = tooltip.borderColor;
+ elem.style.borderWidth = tooltip.borderwidth;
+
+ // set the avatar img
+ this._tooltipImg.src = avatarUrl;
+ this._tooltipImg.alt = alias;
+ this._tooltipImg.style.borderColor = tooltip.titleFontColor;
+ this._tooltipImg.style.borderWidth = '1px';
+
+ // set the alias
+ this._avatarTitleElem.innerText = alias;
+ this._avatarTitleElem.style.color = tooltip.titleFontColor;
+ this._avatarTitleElem.style.fontSize = tooltip.titleFontSize;
+ this._avatarTitleElem.style.fontFamily = tooltip._titleFontFamily;
+ this._avatarTitleElem.style.fontWeight = tooltip._titleFontStyle;
+ this._avatarTitleElem.style.marginBottom = tooltip.titleMarginBottom + 'px';
+
+ // set the number of contributions
+ this._contributionsElem.innerText = contributions.toString();
+ this._contributionsElem.style.color = tooltip.bodyFontColor;
+ this._contributionsElem.style.fontSize = tooltip.bodyFontSize;
+ this._contributionsElem.style.fontFamily = tooltip._bodyFontFamily;
+ this._contributionsElem.style.fontWeight = tooltip._bodyFontStyle;
+ this._contributionsElem.style.paddingLeft = tooltip.bodySpacing + 'px';
+
+ // set the contribution legend
+ this._contributionsLegendElem.style.backgroundColor = tooltip.labelColors[0].backgroundColor;
+ this._contributionsLegendElem.style.borderColor = tooltip.labelColors[0].borderColor;
+ }
+ })
+ }
+ }
+ }
+ onClick={(_ignored?: MouseEvent, activeElements?: Array<{}>) => {
+ try {
+ const clickedElement = activeElements![0];
+ const clickedIndex: number = clickedElement!['_index'];
+ const clickedContributor: string = clickedElement!['_chart'].chart.data.labels[clickedIndex];
+ console.log('Data Callable Contributor', clickedContributor);
+ this.props.onSelectionChange(clickedContributor);
+ } catch (error) {
+
+ }
+
+ return {};
+ }}
+ />
+
+
+
+
+
+
{
+ return new Promise((resolve, reject) => {
+ const { httpClient,
+ repoOwner,
+ repo } = this.props;
+
+ // Get the GitHub data provider
+ const dataProvider: IGitHubService = new GitHubService();
+
+ // Create an async request
+ dataProvider.getContributors(httpClient, repoOwner, repo)
+ .then((contributors: IGitHubContributor[]) => {
+ const authors: string[] = contributors.map((contributor) => {
+ return contributor.login;
+ });
+
+ const totalContributions: number[] = contributors.map((contributor) => {
+ return contributor.contributions;
+ });
+
+ // We're storing custom data in the chart's data for later retrieval
+ const avatars: string[] = contributors.map((contributor: IGitHubContributor) => {
+ return contributor.avatar_url;
+ });
+
+ // Generate a cool gradient with as many steps as there are data elements
+ const backgroundColor = PaletteGenerator.generateNonRepeatingGradient(
+ [styles.vesaChromaticStart, styles.vesaChromaticEnd],
+ totalContributions.length);
+
+ const data = {
+ labels: authors,
+ avatars: avatars,
+ datasets: [{
+ label: strings.DatasetLabel,
+ data: totalContributions,
+ backgroundColor: backgroundColor,
+ borderWidth: 1,
+ borderColor: styles.borderColor
+ }]
+ };
+ resolve(data);
+ }, (error) => { reject(error); });
+ });
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/IDynamicDataCallableProps.ts b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/IDynamicDataCallableProps.ts
new file mode 100644
index 000000000..238b52590
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/IDynamicDataCallableProps.ts
@@ -0,0 +1,16 @@
+import { HttpClient } from "@microsoft/sp-http";
+
+export interface IDynamicDataCallableProps {
+ repoOwner: string;
+ repo: string;
+ /**
+ * Instance of the HttpClient. Used to communicate with the GitHub API
+ */
+ httpClient: HttpClient;
+ onSelectionChange: (alias: string) => void;
+
+ /**
+ * Event handler for clicking the Configure button on the Placeholder
+ */
+ onConfigure: () => void;
+}
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/loc/en-us.js b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/loc/en-us.js
new file mode 100644
index 000000000..97f16674d
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/loc/en-us.js
@@ -0,0 +1,19 @@
+define([], function() {
+ return {
+ "ChartTitle": "GitHub Contributors",
+ "PropertyPaneDescription": "Provide a GitHub repository owner and repo to see commits by authors.",
+ "BasicGroupName": "Repository Settings",
+ "RepoOwnerFieldLabel": "Repository Owner",
+ "RepoOwnerFieldDescription": "The repository owner. E.g.: SharePoint",
+ "RepoFieldLabel": "Repository",
+ "RepoFieldDescription": "The repository name. E.g.: sp-dev-fx-webparts",
+ "PlaceholderTitle": "Hold on a minute!",
+ "PlaceholderDescription": "Before we can show you commit statistics, we need you to configure a GitHub repository owner and repository name. Duh!",
+ "ConfigureButton": "Configure",
+ "ContributorProperty": "Contributor",
+ "BadPropertyIdErrorMessage": "Bad property id",
+ "Loading": "Loading contributors...",
+ "Error": "There was an error loading data from GitHub",
+ "DatasetLabel": "Contributions"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/loc/mystrings.d.ts
new file mode 100644
index 000000000..dce38f433
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/loc/mystrings.d.ts
@@ -0,0 +1,22 @@
+declare interface IDynamicDataCallableWebPartStrings {
+ ChartTitle: string;
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ RepoOwnerFieldLabel: string;
+ RepoFieldLabel: string;
+ RepoOwnerFieldDescription: string;
+ RepoFieldDescription: string;
+ PlaceholderTitle: string;
+ PlaceholderDescription: string;
+ ConfigureButton: string;
+ ContributorProperty: string;
+ BadPropertyIdErrorMessage: string;
+ Loading: string;
+ Error: string;
+ DatasetLabel: string;
+}
+
+declare module 'DynamicDataCallableWebPartStrings' {
+ const strings: IDynamicDataCallableWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.manifest.json
new file mode 100644
index 000000000..1de026804
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.manifest.json
@@ -0,0 +1,22 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "d5db1f38-c34b-4083-b2b0-99b09d9161b1",
+ "alias": "DynamicDataConsumerWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+ "title": { "default": "Dynamic Data Consumer" },
+ "description": { "default": "Demonstrates how to create a dynamic data consumer web part that renders a chart upon receiving dynamic data" },
+ "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcCAYAAADj79JYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHYcAAB2HAY/l8WUAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAAASISURBVHhe7ZxZyH1TGIc/lAtDblxIkQsZEm6kTBkzXODCnExFohDiRiIuTBkypgwplKm4QDKGSKSUKReSobgzlxDP79/31rJ6z9lrrb3397e+3qeeTuecvdbe6/f1rbP22mvvlSAIgiAIgiAIgiAIgrXjbHwUP8Wf8Gf8HB/HMzGYiH3xPfxnwDdxLwxGcAV64S7zIgwauAq9QEu8BIMK9kMvyBqje6ngffRCrPF1DArQaMQLsMXTMBjgMfTCa/FJDAbQONsLr8VvMRhAJzVeeK0GA3yPXnAt/obBAC+hF16L72AwwE3ohdfifRgMcCp64bV4HgYFvIpegDVqwiso5BD0QqzxWAwqGNOX34FBA5eiF+gyY6ZwJJoP+Qi9cFN1AeI4DCbiMHwK86Afwn0wmIk88L0xmJE88FMwmJE88GsxWMA2q69jyAN/ArvFGrHzhnfTsiP+gA9seNdOGrb8A7fALrFGzBH4ZWj1368PGrE6UrudM7EGzBG4uBhtH/fqgwasfOob2CXWgLkCFxeg7ecufVCJlc09ELvDDn7OwMX5aPuqnfewcrmvYHfYwVvgm8+o5jxsf7diKVbG8yzsCjtwCzxtzNzejCV4Zc2vcEvsBjvwjRH4g1iCVzb1GewGO2gLfLMZVd9t+ysNW1gZ83nns9L/lhpOwBvwBfwOtT79E3wEz8Am7IDn/tG8HW1fNWELK2fq7PWD7DOpH+Yp2B9fxLz+3Kb16VZ4zsDTKzktZ51W1rTpgi8x/077GoPmafI6h6xan26F5gr8GrR9tJ7iW3nTAt8df8T8e/XpW2Et6dC11uKrTlZgjsCvRKt/zHyK1WGmE2JHoLdU7mus6WePx7wOqbPjk3E33AVPxNvQ27aoe7GN5wh8B9Qytqknr/IZyF3xbcy3k8/hHjjEu5iW+xP1R1jEUZgvQv1frE/fevV1DGmjZB64oVVX+bamRhrnoNfVaIog335Z2MbhmJdbF+vT80YtClxciPn2qX+hwtecjibWDkWtKU+3qZlkuwXTsutifXraILkscHEQehefS1WfXcoxmJZdF+vT0wbJocAN9d1349+Y17FM/UCWsj3m5bsnb1Bp4Ma2eDV+gXldnhqNlLId5uU3xa7JG1QbeMpOqNvG78RFZ5Ma+pVyJKZlNQXQLUfjs5g2SGqop++m4mFM69c4u5TrMS37NHaHhlYfY9oQz89QQ72xeCt3Nc4ewhtOdrdmpmUxp8qMRX+8tE6d1GicvYgD8FdMy3R3BWrMcuXrcAyno1evxtnqvjQa0Q+k+uy8GzG7uvV8igX5Gn+P4XL06i1RT8HoiiluOZli6UR+5lhid2FPeVPVuTiWg/E19OpPfRn3xO7Q5TGvQS1OedugVgTcg5qJ/AVV/zeoR0CdhN3Sy42xm6y+ds+Ut37/jsEA8XCDNSYe37HG6NmEXngtxgNqCohHMG0EPkQvwBrfwqCQKU7t9UTPoIIb0QuyRF3RCRpoCT1uIxyJupeSPl2Ld/REz2Ai4nHWQRAEQRAEQRAEQRAEQRAEQRAE/2Vl5V//q3IsGyKfUAAAAABJRU5ErkJggg==",
+ "properties": {
+ "contributor": {}
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
new file mode 100644
index 000000000..9e35dce18
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
@@ -0,0 +1,309 @@
+import * as React from 'react';
+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';
+
+// dynamic data web parts
+import { DynamicProperty } from '@microsoft/sp-component-base';
+
+// localization
+import * as strings from 'DynamicDataConsumerWebPartStrings';
+
+// component rendering
+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';
+
+// used to group GitHub results by date
+import { groupBy, toPairs } from '@microsoft/sp-lodash-subset';
+import * as moment from 'moment';
+
+// used to add a chart control
+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';
+
+//Orange color
+const CHARTCOLOR: string = "#ffa500";
+const CHARTALPHA: number = 0.2;
+
+export interface IDynamicDataConsumerWebPartProps {
+ contributor: DynamicProperty;
+ alias: string;
+ repo: string;
+ repoOwner: string;
+}
+
+export default class DynamicDataConsumerWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const { repo,
+ repoOwner,
+ alias,
+ contributor
+ } = this.properties;
+
+ // we need to configure this if we didn't specify static or dynamic properties
+ const contributorSource = contributor.tryGetSource();
+ const needsConfiguration: boolean =
+ (!repo // no static repo
+ || !repoOwner // no static repo owner
+ || !alias) // no static alias
+ && (!contributorSource); // no dynamic data and no dynamic data source configured
+ if (needsConfiguration) {
+ this._renderPlaceholder();
+ } else {
+ if (contributor.tryGetValue() === undefined) {
+ this._renderPrompt();
+ } else {
+ this._renderChart();
+ }
+ }
+ }
+
+ protected get propertiesMetadata(): IWebPartPropertiesMetadata {
+ return {
+ 'contributor': {
+ dynamicPropertyType: 'object'
+ }
+ };
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ header: {
+ description: strings.PaneDescription
+ },
+ groups: [
+ // Web part properties group for specifying the information about
+ // the contributor
+ {
+ // Primary group is used to provide GitHub information
+ // in a text field in the web part properties
+ primaryGroup: {
+ groupName: strings.StaticGroupName,
+ groupFields: [
+ PropertyPaneTextField('repoOwner', {
+ label: strings.RepoOwnerFieldLabel
+ }),
+ PropertyPaneTextField('repo', {
+ label: strings.RepoFieldLabel
+ }),
+
+ PropertyPaneTextField('alias', {
+ label: strings.AliasFieldLabel
+ })
+ ]
+ },
+ // Secondary group is used to retrieve the contributor from the
+ // connected dynamic data source
+ secondaryGroup: {
+ groupName: strings.DynamicGroupName,
+ groupFields: [
+ PropertyPaneDynamicFieldSet({
+ label: strings.ContributorDynamicFieldLabel,
+ fields: [
+ PropertyPaneDynamicField('contributor', {
+ label: strings.ContributorDynamicFieldLabel,
+ propertyValueDepth: DynamicDataSharedDepth.None
+ })]
+ })
+ ]
+ },
+ // Show the secondary group only if the web part has been
+ // connected to a dynamic data source
+ showSecondaryGroup: !!this.properties.contributor.tryGetSource()
+ } as IPropertyPaneConditionalGroup
+ ]
+ }
+ ]
+ };
+ }
+
+ protected get disableReactivePropertyChanges(): boolean {
+ // set property changes mode to reactive, so that GitHub is not
+ // called on each keystroke when typing in the repo, owner, and alias
+ // in web part properties. We don't want to exceed GitHub's rate limit.
+ return true;
+ }
+
+ /**
+ * Renders the chart with contributions
+ */
+ private _renderChart = (): void => {
+ const {
+ contributor
+ } = this.properties;
+ const contributorData: IContributor | undefined = contributor.tryGetValue();
+
+ let repoOwner: string = undefined;
+ let repo: string = undefined;
+ let alias: string = undefined;
+ try {
+ repoOwner = contributorData.repoOwner;
+ repo = contributorData.repo;
+ alias = contributorData.alias;
+ } catch (error) {
+ }
+
+ if (!repoOwner || !repo || !alias) {
+ // this shouldn't happen
+ return undefined;
+ }
+
+ this._loadAsyncData(contributorData).then((data: Chart.ChartData) => {
+ const element: React.ReactElement = React.createElement(
+ DynamicDataConsumer,
+ {
+ data,
+ alias
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }, ((error: any) => {
+ const element: React.ReactElement = React.createElement(
+ MessageBar,
+ {
+ messageBarType: MessageBarType.error,
+ isMultiline: false,
+ }, [
+ strings.Error + ":" + error
+ ]
+ );
+ ReactDom.render(element, this.domElement);
+ }));
+ }
+
+ /**
+ * Renders a placeholder prompting users to pick a contributor
+ */
+ private _renderPrompt = (): void => {
+ const element: React.ReactElement = React.createElement(
+ Placeholder,
+ {
+ iconName: 'GitGraph',
+ iconText: strings.PlaceHolderDynamicDataTitle,
+ description: strings.PlaceHolderDynamicDataDescription
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ /**
+ * Renders a placeholder prompting users to configure the web part
+ */
+ private _renderPlaceholder = (): void => {
+ const element: React.ReactElement = React.createElement(
+ Placeholder,
+ {
+ iconName: 'Edit',
+ iconText: strings.PlaceHolderConfigureTitle,
+ description: strings.PlaceHolderConfigureDescription,
+ buttonLabel: strings.ConfigureButtonLabel,
+ onConfigure: () => { this.context.propertyPane.open(); }
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ /**
+ * Loads data from a service.
+ * This is where you would replace for your own code
+ */
+ private _loadAsyncData = (contributorData: IContributor): Promise => {
+ const {
+ repoOwner,
+ repo,
+ alias
+ } = contributorData;
+
+ return new Promise((resolve, reject) => {
+ // Get the GitHub data provider
+ const dataProvider: IGitHubService = new GitHubService();
+
+ // Create an async request
+ dataProvider.getCommits(this.context.httpClient, repoOwner, repo, alias)
+ .then((commits: IAuthorCommit[]) => {
+
+ // Group them by month
+ var groupedOccurences: [string, IAuthorCommit[]][] = toPairs(groupBy(commits, (commit) => moment(commit.commit.author.date).startOf('month')));
+
+ // Create time series structures so that Chart.js can display them
+ const uniqueDateList: { "t": string, "y": number }[] = [];
+ groupedOccurences.forEach(group => {
+ uniqueDateList.push({ "t": group[0], "y": group[1].length });
+ });
+
+ // sort that list so that we don't get overlapped bars on the chart
+ uniqueDateList.sort((leftSide, rightSide): number => {
+ // convert to moments so that we can sort them as dates
+ const leftMoment = moment(leftSide.t);
+ const rightMoment = moment(rightSide.t);
+ if (leftMoment.isBefore(rightMoment)) {
+ return -1;
+ }
+ if (leftMoment.isAfter(rightMoment)) {
+ return 1;
+ }
+ return 0;
+ });
+
+ // Generate an orange semi transparent color
+ const backgroundColor = PaletteGenerator.alpha(CHARTCOLOR, CHARTALPHA);
+
+ const data: Chart.ChartData = {
+ datasets: [{
+ label: strings.SeriesLabel,
+ data: uniqueDateList,
+ //backgroundColor: backgroundColor,
+ // make lines thicker than usual
+ borderWidth: 2,
+ borderColor: CHARTCOLOR,
+ // make a small empty point
+ pointBorderWidth: 2,
+ pointBackgroundColor: "#fff",
+ // make a big semi-transparent border on hover
+ pointHoverBorderWidth: 15,
+ pointHoverBackgroundColor: CHARTCOLOR,
+ pointHoverBorderColor: backgroundColor,
+ pointHitRadius: 30,
+ fill: false,
+ lineTension: 0.000001 // make lines straight
+ }]
+ };
+ resolve(data);
+ }, (error) => {
+ reject(error);
+ });
+ });
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.module.scss b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.module.scss
new file mode 100644
index 000000000..36f4b729a
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.module.scss
@@ -0,0 +1,74 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.dynamicDataConsumer {
+ .container {
+ max-width: 700px;
+ margin: 0px auto;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+ }
+
+ .row {
+ @include ms-Grid-row;
+ @include ms-fontColor-white;
+ background-color: $ms-color-themeDark;
+ padding: 20px;
+ }
+
+ .column {
+ @include ms-Grid-col;
+ @include ms-lg10;
+ @include ms-xl8;
+ @include ms-xlPush2;
+ @include ms-lgPush1;
+ }
+
+ .title {
+ @include ms-font-xl;
+ @include ms-fontColor-white;
+ }
+
+ .subTitle {
+ @include ms-font-l;
+ @include ms-fontColor-white;
+ }
+
+ .description {
+ @include ms-font-l;
+ @include ms-fontColor-white;
+ }
+
+ .button {
+ // Our button
+ text-decoration: none;
+ height: 32px;
+
+ // Primary Button
+ min-width: 80px;
+ background-color: $ms-color-themePrimary;
+ border-color: $ms-color-themePrimary;
+ color: $ms-color-white;
+
+ // Basic Button
+ outline: transparent;
+ position: relative;
+ font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ border-width: 0;
+ text-align: center;
+ cursor: pointer;
+ display: inline-block;
+ padding: 0 16px;
+
+ .label {
+ font-weight: $ms-font-weight-semibold;
+ font-size: $ms-font-size-m;
+ height: 32px;
+ line-height: 32px;
+ margin: 0 4px;
+ vertical-align: top;
+ display: inline-block;
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.tsx b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.tsx
new file mode 100644
index 000000000..f8e94de45
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import styles from './DynamicDataConsumer.module.scss';
+import { IDynamicDataConsumerProps } from './IDynamicDataConsumerProps';
+
+// localization
+import * as strings from 'DynamicDataConsumerWebPartStrings';
+
+// used to add a chart control
+import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+// used to format date
+import * as moment from 'moment';
+
+/**
+ * This component is designed to render a line chart that looks and behave like the
+ * Office 365 Admin center dashboards.
+ * 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 {
+
+ public render(): React.ReactElement {
+ const { alias, data } = this.props;
+ const options: Chart.ChartOptions = {
+ legend: {
+ display: false // don't display a legend -- there's only one data point
+ },
+ title: {
+ display: true,
+ text: [alias, strings.ChartTitle] // when title is a string array, it spans over multiple lines
+ },
+ hover: {
+ mode: 'nearest', // will automatically select the nearest point
+ intersect: false
+ },
+ tooltips: {
+ mode: 'label', // work with label
+ intersect: false,
+ callbacks: {
+ // custom tooltip logic for title
+ title: ((tooltipItems, _tooltipData) => {
+ // format the date as 'AbbreviatedMonth Year' e.g.: Nov 2018
+ return moment(tooltipItems[0].xLabel).format(strings.TooltipDateFormat);
+ })
+ }
+ },
+ scales: {
+ xAxes: [{
+ type: 'time', // Format as a time series
+ gridLines: {
+ display: false
+ },
+ time: {
+ displayFormats: {
+ // Pass the same format so that it is always consistent, regardless of the scale
+ 'millisecond': strings.MonthLabel,
+ 'second': strings.MonthLabel,
+ 'minute': strings.MonthLabel,
+ 'hour': strings.MonthLabel,
+ 'day': strings.MonthLabel,
+ 'week': strings.MonthLabel,
+ 'month': strings.MonthLabel,
+ 'quarter': strings.MonthLabel,
+ 'year': strings.MonthLabel,
+ }
+ }
+ }],
+ yAxes: [{
+ ticks: {
+ beginAtZero: true
+ }
+ }]
+ }
+ };
+
+ return (
+
+
+ );
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/IDynamicDataConsumerProps.ts b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/IDynamicDataConsumerProps.ts
new file mode 100644
index 000000000..e8154517d
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/IDynamicDataConsumerProps.ts
@@ -0,0 +1,4 @@
+export interface IDynamicDataConsumerProps {
+ alias: string;
+ data: Chart.ChartData;
+}
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/loc/en-us.js b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/loc/en-us.js
new file mode 100644
index 000000000..3cb53f24f
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/loc/en-us.js
@@ -0,0 +1,25 @@
+define([], function () {
+ return {
+ "PropertyPaneDescription": "Description",
+ "BasicGroupName": "Group Name",
+ "DescriptionFieldLabel": "Description Field",
+ "Loading": "Loading",
+ "Error": "Something went wrong",
+ "ChartTitle": "Commits by month",
+ "MonthLabel": "MMM YYYY",
+ "SeriesLabel": "Commits",
+ "PaneDescription": "Connect to a dynamic data source, or provide static contributor information.",
+ "StaticGroupName": "Static Contributor Information",
+ "DynamicGroupName": "Dynamic Data Source",
+ "RepoOwnerFieldLabel": "Repo Owner",
+ "RepoFieldLabel": "Repo",
+ "AliasFieldLabel": "Contributor Alias",
+ "ContributorDynamicFieldLabel": "Contributor",
+ "PlaceHolderDynamicDataTitle": "Select a contributor",
+ "PlaceHolderDynamicDataDescription": "In order to see a contributor's commits, you need to select a contributor from the GitHub Contributors web part",
+ "PlaceHolderConfigureTitle":"Configure your web part",
+ "PlaceHolderConfigureDescription":"Please configure the web part.",
+ "ConfigureButtonLabel":"Configure",
+ "TooltipDateFormat": "MMM YYYY"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/loc/mystrings.d.ts
new file mode 100644
index 000000000..e104cbc06
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/loc/mystrings.d.ts
@@ -0,0 +1,28 @@
+declare interface IDynamicDataConsumerWebPartStrings {
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ DescriptionFieldLabel: string;
+ Error: string;
+ Loading: string;
+ ChartTitle: string;
+ MonthLabel: string;
+ SeriesLabel: string;
+ PaneDescription: string;
+ StaticGroupName: string;
+ DynamicGroupName: string;
+ RepoOwnerFieldLabel: string;
+ RepoFieldLabel: string;
+ AliasFieldLabel: string;
+ ContributorDynamicFieldLabel: string;
+ PlaceHolderDynamicDataTitle: string;
+ PlaceHolderDynamicDataDescription: string;
+ PlaceHolderConfigureTitle: string;
+ PlaceHolderConfigureDescription: string;
+ ConfigureButtonLabel: string;
+ TooltipDateFormat: string;
+}
+
+declare module 'DynamicDataConsumerWebPartStrings' {
+ const strings: IDynamicDataConsumerWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.manifest.json
new file mode 100644
index 000000000..32ad97abf
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.manifest.json
@@ -0,0 +1,23 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "a63646aa-098e-4c3f-b1f4-f32e9eed4013",
+ "alias": "HorizontalBarDemoWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+
+ "title": { "default": "Horizontal Bar" },
+ "description": { "default": "Demonstrates how to create a horizontal bar chart" },
+ "officeFabricIconFontName": "BarChartHorizontal",
+ "properties": {
+ "description": "HorizontalBarDemo"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts
new file mode 100644
index 000000000..a9f50e1ef
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts
@@ -0,0 +1,57 @@
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+import * as strings from 'HorizontalBarDemoWebPartStrings';
+import HorizontalBarDemo from './components/HorizontalBarDemo';
+import { IHorizontalBarDemoProps } from './components/IHorizontalBarDemo.types';
+
+export interface IHorizontalBarDemoWebPartProps {
+ description: string;
+}
+
+export default class HorizontalBarDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ HorizontalBarDemo,
+ {
+ description: this.properties.description
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.module.scss b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.module.scss
new file mode 100644
index 000000000..a9508bb17
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.module.scss
@@ -0,0 +1,5 @@
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+
+.horizontalBarDemo {
+ color: inherit;
+}
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx
new file mode 100644
index 000000000..a3ff16d88
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx
@@ -0,0 +1,252 @@
+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 * as strings from 'HorizontalBarDemoWebPartStrings';
+import * as Color from 'color';
+
+import {
+ CommandBar
+} from 'office-ui-fabric-react';
+
+import { ChartControl, ChartType,OFFICE_COLORFUL1, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+
+/**
+ * The standard office colors
+ */
+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 {
+ private _chartElem: ChartControl = undefined;
+
+ public render(): React.ReactElement {
+ // Get the command bar control
+ const commandBar: JSX.Element = this._renderCommandBar();
+
+ return (
+
+ {commandBar}
+
+ );
+ }
+
+ /**
+ * Renders the command bar control.
+ * The dataMenuItems and dataSetMenuItems are
+ * in separate arrays in case we want to hide/show
+ * some menu options
+ */
+ private _renderCommandBar(): JSX.Element {
+ return (
+ { this._addData(); },
+ ['data-automation-id']: 'addDataItemMenu'
+ },
+ {
+ key: 'removeData',
+ name: strings.RemoveDataButton,
+ iconProps: {
+ iconName: 'InsertColumnsLeft'
+ },
+ ariaLabel: strings.AddDataButton,
+ onClick: () => { this._removeData(); },
+ ['data-automation-id']: 'editButton'
+ },
+ {
+ key: 'addDataSet',
+ name: strings.AddDatasetButton,
+ icon: 'Table',
+ ariaLabel: strings.AddDatasetButton,
+ onClick: () => { this._handleAddDataset(); },
+ ['data-automation-id']: 'addDataItemMenu'
+ },
+ {
+ key: 'deleteDataSet',
+ name: strings.RemoveDatasetButton,
+ icon: 'DeleteTable',
+ onClick: () => { this._handleRemoveDataset(); },
+ ['data-automation-id']: 'deleteDatasetButton'
+ }
+ ]}
+ />
+ );
+ }
+
+ // tslint:disable-next-line no-any
+ private _linkElement = (e: any) => {
+ this._chartElem = e;
+ }
+
+ /**
+ * Loads data from a service.
+ * This is where you would replace for your own code
+ */
+ private _loadAsyncData(): Promise {
+ return new Promise((resolve, reject) => {
+ const dataProvider: IChartDataProvider = new MockChartDataProvider();
+ dataProvider.getMultiDataset(1, 7).then((dataSets: Array) => {
+ const data: Chart.ChartData =
+ {
+ labels: strings.ChartLabels,
+ datasets: [
+ {
+ backgroundColor: backgroundColors[0],
+ borderColor: chartColors[0],
+ label: strings.DataSetLabel + '1',
+ data: dataSets[0],
+ borderWidth: 1
+ }
+ ]
+ };
+ resolve(data);
+ });
+ });
+ }
+
+ /**
+ * Removes a data item from a dataset
+ */
+ private _removeData = (): void => {
+ // Get a reference to the chart's data
+ const data: Chart.ChartData = this._chartElem.getChart().data;
+
+ // Don't allow people to remove the last data
+ if (data.datasets.length > 0) {
+ if (data.labels.length < 2) {
+ return;
+ }
+
+ // Remove the label
+ data.labels.splice(-1, 1);
+
+ // Remove the data from the dataset
+ data.datasets.forEach((dataset) => {
+ dataset.data.pop();
+ });
+
+ this._chartElem.update();
+ }
+
+ }
+
+ /**
+ * Adds a data item to a dataset
+ */
+ private _addData = (): void => {
+ // Get a reference to chart's data
+ const data: any = this._chartElem.getChart().data;
+
+ // Don't let people add data if there are no datasets
+ // or if we've added all the months
+ if (data.datasets.length > 0) {
+ if (data.labels.length > 11) {
+ return;
+ }
+
+ // Get the name of the next month to add
+ var month: string = strings.Months[data.labels.length % strings.Months.length];
+
+ // Add it to the month labels
+ data.labels.push(month);
+
+ // Add a new data item to every dataset
+ for (var index = 0; index < data.datasets.length; ++index) {
+ data.datasets[index].data.push(MockChartDataProvider.getRandomNumber());
+ }
+
+ this._chartElem.update();
+ }
+ }
+
+ /**
+ * Removes a dataset from the chart
+ */
+ private _handleRemoveDataset = (): void => {
+ // Get a reference to the chart
+ const data: any = this._chartElem.getChart().data;
+
+ // Don't let them remove the last dataset
+ if (data.datasets.length > 1) {
+ // Pop the dataset off the dataset array
+ data.datasets.pop();
+ }
+
+ this._chartElem.update();
+ }
+
+ /**
+ * Adds a dataset to the chart
+ */
+ private _handleAddDataset = (): void => {
+ // Get a reference to the chart's data
+ const data: any = this._chartElem.getChart().data;
+
+ // Create a new dataset
+ const newDataset = {
+ label: strings.DataSetLabel + (data.datasets.length + 1),
+ // Create a 20 percent opaque background
+ backgroundColor: backgroundColors[data.datasets.length % chartColors.length],
+ borderColor: chartColors[data.datasets.length % chartColors.length],
+ borderWidth: 1,
+ // Start with blank data, we'll add some next
+ data: []
+ };
+
+ // Add data for every month
+ for (var index = 0; index < data.labels.length; ++index) {
+ newDataset.data.push(MockChartDataProvider.getRandomNumber());
+ }
+
+ // Add the new dataset
+ data.datasets.push(newDataset);
+
+ this._chartElem.update();
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/IHorizontalBarDemo.types.ts b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/IHorizontalBarDemo.types.ts
new file mode 100644
index 000000000..ad79f0e47
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/IHorizontalBarDemo.types.ts
@@ -0,0 +1,3 @@
+export interface IHorizontalBarDemoProps {
+ description: string;
+}
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/loc/en-us.js
new file mode 100644
index 000000000..effcfb3d1
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/loc/en-us.js
@@ -0,0 +1,17 @@
+define([], function () {
+ return {
+ "Loading": "Loading",
+ "DataSetLabel": "Dataset ",
+ "ChartLabels": [
+ 'January', 'February', 'March', 'April', 'May', 'June', 'July'
+ ],
+ "Months":
+ ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+ "AddDataButton": "Add data",
+ "AddDatasetButton": "Add dataset",
+ "RemoveDataButton": "Remove data",
+ "RemoveDatasetButton": "Remove dataset",
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl to render a stacked horizontal bar chart.
It uses the horizontal bar chart sample code from Chart.js
`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..e34d00b63
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/loc/mystrings.d.ts
@@ -0,0 +1,17 @@
+declare interface IHorizontalBarDemoWebPartStrings {
+ Loading: string;
+ DataSetLabel: string;
+ ChartLabels: string[];
+ Months: string[];
+ AddDataButton: string;
+ AddDatasetButton: string;
+ RemoveDataButton: string;
+ RemoveDatasetButton: string;
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'HorizontalBarDemoWebPartStrings' {
+ const strings: IHorizontalBarDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.manifest.json
new file mode 100644
index 000000000..14b00f27f
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.manifest.json
@@ -0,0 +1,23 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "3b06de0f-5762-4160-8a2c-405f34a7d55d",
+ "alias": "LineChartDemoWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+
+ "title": { "default": "Line Chart" },
+ "description": { "default": "Demonstrates how to render a line chart" },
+ "officeFabricIconFontName": "LineChart",
+ "properties": {
+ "description": "LineChartDemo"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts
new file mode 100644
index 000000000..73714c48c
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts
@@ -0,0 +1,57 @@
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+import LineChartDemo from './components/LineChartDemo';
+import { ILineChartDemoProps } from './components/ILineChartDemo.types';
+
+export interface ILineChartDemoWebPartProps {
+ description: string;
+}
+
+export default class LineChartDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ LineChartDemo,
+ {
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
+
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/components/ILineChartDemo.types.ts b/samples/react-chartcontrol/src/webparts/lineChartDemo/components/ILineChartDemo.types.ts
new file mode 100644
index 000000000..caed8f66d
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/components/ILineChartDemo.types.ts
@@ -0,0 +1,7 @@
+export interface ILineChartDemoProps {
+
+}
+
+export interface ILineChartDemoState {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.module.scss b/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.module.scss
new file mode 100644
index 000000000..b4aef41ed
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.module.scss
@@ -0,0 +1,21 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.lineChartDemo {
+ color: inherit;
+}
+
+:export {
+ backgroundColor1: rgba(75,192,192,0.4);
+ borderColor1: rgba(75,192,192,1);
+ pointBorderColor1: rgba(75,192,192,1);
+ pointBackgroundColor1: rgba(75,192,192,1);;
+ pointHoverBackgroundColor1: rgba(75,192,192,1);
+ pointHoverBorderColor1: rgba(220,220,220,1);
+
+ backgroundColor2: rgba(192,75,192,0.4);
+ borderColor2: rgba(192,75, 192,1);
+ pointBorderColor2:rgba(192,75, 192,1);
+ pointBackgroundColor2: rgba(192,75, 192,1);
+ pointHoverBackgroundColor2: rgba(192,75,192,1);
+ pointHoverBorderColor2: rgba(220,220,220,1);
+}
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.tsx b/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.tsx
new file mode 100644
index 000000000..41bcd0dcf
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react';
+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 { ChartControl, ChartType } from "@pnp/spfx-controls-react/lib/ChartControl";
+
+
+/**
+ * Demonstrates how to render line charts, using multiple datasets
+ * Also demonstrates customizing axis labels and
+ * custom tooltip providers.
+ */
+export default class LineChartDemo extends React.Component {
+
+ public render(): React.ReactElement {
+ return (
+
+ {
+ var sum = 0;
+
+ tooltipItems.forEach((tooltipItem) => {
+ sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] as number;
+ });
+ return strings.SumLabel + sum;
+ },
+ },
+ footerFontStyle: 'normal'
+ },
+ hover: {
+ mode: 'index',
+ intersect: true
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: strings.XAxisLabel
+ }
+ }],
+ yAxes: [
+ {
+ stacked: true,
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: strings.YAxisLabel
+ }
+ }
+ ]
+ }
+ }}
+ />
+
+ );
+ }
+
+
+ /**
+ * Loads data from a service.
+ * This is where you would replace for your own code
+ */
+ private _loadAsyncData(): Promise {
+ return new Promise((resolve, reject) => {
+ // we're using a mock service that returns random numbers.
+ const dataProvider: IChartDataProvider = new MockChartDataProvider();
+ dataProvider.getMultiDataset(2, 7).then((dataSets: Array) => {
+ const data: Chart.ChartData =
+ {
+ labels: strings.ChartLabels,
+ datasets: [{
+ label: strings.DataSet1Label,
+ fill: false,
+ lineTension: 0,
+ backgroundColor: styles.backgroundColor1,
+ borderColor: styles.borderColor1,
+ borderCapStyle: 'butt',
+ borderDash: [],
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'miter',
+ pointBorderColor: styles.pointBorderColor1,
+ pointBackgroundColor: styles.pointBackgroundColor1,
+ pointBorderWidth: 0,
+ pointHoverRadius: 8,
+ pointHoverBackgroundColor: styles.pointHoverBackgroundColor1,
+ pointHoverBorderColor: styles.pointHoverBorderColor1,
+ pointHoverBorderWidth: 1,
+ pointRadius: 5,
+ pointHitRadius: 10,
+ data: dataSets[0],
+ },
+ {
+ label: strings.DataSet2Label,
+ fill: false,
+ lineTension: 0,
+ backgroundColor: styles.backgroundColor2,
+ borderColor: styles.borderColor2,
+ borderCapStyle: 'butt',
+ borderDash: [],
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'miter',
+ pointBorderColor: styles.pointBorderColor2,
+ pointBackgroundColor: styles.pointBackgroundColor2,
+ pointBorderWidth: 0,
+ pointHoverRadius: 8,
+ pointHoverBackgroundColor: styles.pointHoverBackgroundColor2,
+ pointHoverBorderColor: styles.pointHoverBorderColor2,
+ pointHoverBorderWidth: 1,
+ pointRadius: 5,
+ pointHitRadius: 10,
+ data: dataSets[1],
+ pointStyle: "triangle"
+ }
+ ]
+ };
+ resolve(data);
+ });
+ });
+ }
+}
+
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/lineChartDemo/loc/en-us.js
new file mode 100644
index 000000000..cdaa0f596
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/loc/en-us.js
@@ -0,0 +1,15 @@
+define([], function() {
+ return {
+ "Loading": "Loading...",
+ "DataSet1Label": "Cars",
+ "DataSet2Label": "Trucks",
+ "SumLabel": "Sum:",
+ "XAxisLabel": "Month",
+ "YAxisLabel": "Number (thousands)",
+ "ChartLabels": [
+ 'January', 'February', 'March', 'April', 'May', 'June', 'July'
+ ],
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl to render a line chart as per the Chart.js documentation
`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/lineChartDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..8aee619f9
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/loc/mystrings.d.ts
@@ -0,0 +1,16 @@
+declare interface ILineChartDemoWebPartStrings {
+ Loading: string;
+ DataSet1Label: string;
+ DataSet2Label: string;
+ SumLabel: string;
+ XAxisLabel: string;
+ YAxisLabel: string;
+ ChartLabels: string[];
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'LineChartDemoWebPartStrings' {
+ const strings: ILineChartDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.manifest.json
new file mode 100644
index 000000000..300d061f7
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.manifest.json
@@ -0,0 +1,23 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "0ccdae4a-e8b0-4bd8-aba3-30d54444ee10",
+ "alias": "PieChartDemoWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+
+ "title": { "default": "Pie Chart" },
+ "description": { "default": "Demonstrates how to render a pie chart" },
+ "officeFabricIconFontName": "PieDouble",
+ "properties": {
+ "description": "Pie Chart"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts
new file mode 100644
index 000000000..d823792d3
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts
@@ -0,0 +1,56 @@
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+
+import * as strings from 'PieChartDemoWebPartStrings';
+import PieChartDemo from './components/PieChartDemo';
+import { IPieChartDemoProps } from './components/IPieChartDemo.types';
+
+export interface IPieChartDemoWebPartProps {
+ description: string;
+}
+
+export default class PieChartDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ PieChartDemo
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
+
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/components/IPieChartDemo.types.ts b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/IPieChartDemo.types.ts
new file mode 100644
index 000000000..dfadbed82
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/IPieChartDemo.types.ts
@@ -0,0 +1,3 @@
+export interface IPieChartDemoProps {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.module.scss b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.module.scss
new file mode 100644
index 000000000..d2f721025
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.module.scss
@@ -0,0 +1,13 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.pieChartDemo {
+ color:inherit;
+}
+
+:export {
+ color1: rgb(255, 99, 132);
+ color2: rgb(255, 159, 64);
+ color3: rgb(255, 205, 86);
+ color4: rgb(75, 192, 192);
+ color5: rgb(54, 162, 235);
+}
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx
new file mode 100644
index 000000000..6d13f4216
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx
@@ -0,0 +1,251 @@
+import * as React from 'react';
+import styles from './PieChartDemo.module.scss';
+import { IPieChartDemoProps } from './IPieChartDemo.types';
+import * as strings from 'PieChartDemoWebPartStrings';
+
+// used to add a chart control
+import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+
+// used to retrieve (fake) data from a (fake) service
+import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
+import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+
+// used to render the toolbar above the chart
+import {
+ CommandBar
+} from 'office-ui-fabric-react';
+
+/**
+ * Define the chart colors:
+ * Red,
+ * Orange,
+ * Yellow,
+ * Green,
+ * Blue
+ */
+const chartColors: string[] = [
+ styles.color1,
+ styles.color2,
+ styles.color3,
+ styles.color4,
+ styles.color5
+];
+
+const DATA_LENGTH: number = 5;
+/**
+ * This sample demonstrates add and modifying the data in a pie chart
+ */
+export default class PieChartDemo extends React.Component {
+ /**
+ * The chart element
+ */
+ private _chartElem: ChartControl = undefined;
+
+ /**
+ * Handle to async requests
+ */
+ private _asyncRequest = undefined;
+
+ /**
+ * When component is mounted, get the data
+ * It is better to use componentDidMount than
+ * componentWillMount to prevent calling the service
+ * more than once.
+ */
+ public componentDidMount(): void {
+ // by default, load only one dataset
+ this._loadAsyncData(1);
+ }
+
+ /**
+ * Before we unmount, cancel any pending requests
+ */
+ public componentWillUnmount(): void {
+ // any outstading requests?
+ if (this._asyncRequest) {
+ // cancel them!
+ this._asyncRequest.cancel();
+ }
+ }
+
+ /**
+ * Renders the pie chart with a toolbar above it
+ */
+ public render(): React.ReactElement {
+ return (
+
+ {this._renderCommandBar()}
+
+ );
+ }
+
+ /**
+ * Renders the command bar control.
+ */
+ private _renderCommandBar(): JSX.Element {
+ return (
+ { this._handleRandomizeData(); },
+ ['data-automation-id']: 'randomizeData'
+ },
+ {
+ key: 'addDataSet',
+ name: strings.AddDatasetCommandLabel,
+ iconProps: {
+ iconName: 'Table'
+ },
+ onClick: () => { this._handleAddDataset(); },
+ ['data-automation-id']: 'addDataset'
+ },
+ {
+ key: 'removeDataSet',
+ name: strings.RemoveDatasetCommandLabel,
+ icon: 'DeleteTable',
+ onClick: () => { this._handleRemoveDataset(); },
+ ['data-automation-id']: 'removeDataset'
+ },
+ ]}
+ />
+ );
+ }
+
+ /**
+ * Links a reference to the chart so that we can
+ * refer to it later and change its data
+ */
+ // tslint:disable-next-line no-any
+ private _linkElement = (e: any) => {
+ this._chartElem = e;
+ }
+
+ /**
+ * Loads data from a service.
+ * This is where you would replace for your own code
+ */
+ private _loadAsyncData = (numDatasets: number) => {
+ // Get the mock data provider
+ const dataProvider: IChartDataProvider = new MockChartDataProvider();
+
+ // Create an async request
+ this._asyncRequest = dataProvider
+ .getMultiDataset(numDatasets, DATA_LENGTH) // we only need 5 data elements for this demo
+ .then((dataSets: Array) => {
+ // we got the data back
+
+ // mark the request as done
+ this._asyncRequest = undefined;
+
+ // get the chart's data
+ const { data } = this._chartElem.props;
+
+ // iterate through all the datasets we have received
+ dataSets.forEach((returnedData: number[], dsIndex: number) => {
+ // if we already have that dataset, simply replace the data
+ if (data.datasets.length > dsIndex) {
+ // replace the data
+ data.datasets[dsIndex].data = returnedData;
+ } else {
+ // this is a new dataset!
+ const newDataset = {
+ backgroundColor: [],
+ data: [],
+ // create a dataset label (e.g.: Dataset 1)
+ label: strings.DataSetLabel + (dsIndex + 1).toString(),
+ };
+
+ // get the retrieved data
+ newDataset.data = returnedData;
+
+ // map the colors
+ for (var index = 0; index < data.labels.length; ++index) {
+ //newDataset.data.push(returnedData[index]);
+ var newColor = chartColors[index % chartColors.length];
+ newDataset.backgroundColor.push(newColor);
+ }
+
+ // add the dataset
+ data.datasets.push(newDataset);
+ }
+ });
+
+ // update the chart without refreshing the entire web part
+ this._chartElem.update();
+ });
+ }
+
+ /**
+ * Called when user clicks on Randomize Data.
+ * Reloads the entire dataset with newly retrieved randomized numbers
+ */
+ private _handleRandomizeData = () => {
+ this._loadAsyncData(this._chartElem.getChart().data.datasets.length);
+ }
+
+ /**
+ * Handles requests to add a new dataset.
+ */
+ private _handleAddDataset = () => {
+ // get the chart's data
+ const data: Chart.ChartData = this._chartElem.getChart().data;
+
+ // create a new dataset
+ var newDataset = {
+ backgroundColor: [],
+ data: [],
+ // give it a label (e.g.: Dataset 1)
+ label: strings.DataSetLabel + data.datasets.length.toString(),
+ };
+
+ // add new numbers and background colors
+ for (var index = 0; index < data.labels.length; ++index) {
+ // add a random number
+ newDataset.data.push(MockChartDataProvider.getRandomNumber());
+
+ // add the background color
+ var newColor = chartColors[index % chartColors.length];
+ newDataset.backgroundColor.push(newColor);
+ }
+
+ // add the new dataset
+ data.datasets.push(newDataset);
+
+ // update that chart
+ this._chartElem.update();
+ }
+
+ /**
+ * Removes the oldset dataset
+ */
+ private _handleRemoveDataset = () => {
+ // get the data from the chart
+ const data: Chart.ChartData = this._chartElem.getChart().data;
+
+ // splice the array and remove a dataset
+ data.datasets.splice(0, 1);
+
+ // update the chart.
+ this._chartElem.update();
+
+ // that's all there is to it!
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/pieChartDemo/loc/en-us.js
new file mode 100644
index 000000000..5351f7545
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/loc/en-us.js
@@ -0,0 +1,16 @@
+define([], function() {
+ return {
+ "DataSetLabel": "Dataset ",
+ "ChartLabels": ['Red',
+ 'Orange',
+ 'Yellow',
+ 'Green',
+ 'Blue'
+ ],
+ "RandomizeCommandLabel": "Randomize data",
+ "AddDatasetCommandLabel": "Add dataset",
+ "RemoveDatasetCommandLabel": "Remove dataset",
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl to render a pie chart.
It is inspired by the pie chart sample from Chart.js.
`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/pieChartDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..86ce0db7d
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/loc/mystrings.d.ts
@@ -0,0 +1,14 @@
+declare interface IPieChartDemoWebPartStrings {
+ DataSetLabel: string;
+ ChartLabels: string[];
+ RandomizeCommandLabel: string;
+ AddDatasetCommandLabel: string;
+ RemoveDatasetCommandLabel: string;
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'PieChartDemoWebPartStrings' {
+ const strings: IPieChartDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.manifest.json
new file mode 100644
index 000000000..7c9bc0484
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.manifest.json
@@ -0,0 +1,23 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "75942037-254d-4c8d-a5d1-44031c957ebf",
+ "alias": "PolarAreaDemoWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+
+ "title": { "default": "Polar Area" },
+ "description": { "default": "Demonstrates how to render a polar area chart" },
+ "iconImageUrl": "data:image/png;base64,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",
+ "properties": {
+ "description": "Polar Area"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts
new file mode 100644
index 000000000..c7d811ef2
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts
@@ -0,0 +1,55 @@
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+
+import * as strings from 'PolarAreaDemoWebPartStrings';
+import PolarAreaDemo from './components/PolarAreaDemo';
+import { IPolarAreaDemoProps } from './components/IPolarAreaDemo.types';
+
+export interface IPolarAreaDemoWebPartProps {
+ description: string;
+}
+
+export default class PolarAreaDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ PolarAreaDemo
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/IPolarAreaDemo.types.ts b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/IPolarAreaDemo.types.ts
new file mode 100644
index 000000000..502eea814
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/IPolarAreaDemo.types.ts
@@ -0,0 +1,3 @@
+export interface IPolarAreaDemoProps {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.module.scss b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.module.scss
new file mode 100644
index 000000000..3cb7f70d7
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.module.scss
@@ -0,0 +1,18 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.polarAreaDemo {
+ color: inherit;
+}
+
+:export {
+ color1: rgba(255, 99, 132, 0.5);
+ color2: rgba(255, 159, 64, 0.5);
+ color3: rgba(255, 205, 86, 0.5);
+ color4: rgba(75, 192, 192, 0.5);
+ color5: rgba(54, 162, 235, 0.5);
+ borderColor1: rgb(255, 99, 132);
+ borderColor2: rgb(255, 159, 64);
+ borderColor3: rgb(255, 205, 86);
+ borderColor4: rgb(75, 192, 192);
+ borderColor5: rgb(54, 162, 235);
+}
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx
new file mode 100644
index 000000000..77adffa07
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx
@@ -0,0 +1,226 @@
+import * as React from 'react';
+import styles from './PolarAreaDemo.module.scss';
+import { IPolarAreaDemoProps } from './IPolarAreaDemo.types';
+import * as strings from 'PolarAreaDemoWebPartStrings';
+
+// used to add a chart control
+import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+
+// used to retrieve (fake) data from a (fake) service
+import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
+import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+
+// used to render the toolbar above the chart
+import {
+ CommandBar
+} from 'office-ui-fabric-react';
+
+/**
+ * Define the chart colors:
+ * Red,
+ * Orange,
+ * Yellow,
+ * Green,
+ * Blue
+ */
+const chartColors: string[] = [
+ styles.color1,
+ styles.color2,
+ styles.color3,
+ styles.color4,
+ styles.color5
+];
+
+const borderColors: string[] = [
+ styles.borderColor1,
+ styles.borderColor2,
+ styles.borderColor3,
+ styles.borderColor4,
+ styles.borderColor5
+];
+
+const DATA_LENGTH: number = 5;
+
+export default class PolarAreaDemo extends React.Component {
+ /**
+ * The chart element
+ */
+ private _chartElem: ChartControl = undefined;
+
+ public render(): React.ReactElement {
+ return (
+
+ {this._renderCommandBar()}
+
+ );
+ }
+
+ /**
+ * Renders the command bar control.
+ */
+ private _renderCommandBar(): JSX.Element {
+ return (
+ { this._handleRandomizeData(); },
+ ['data-automation-id']: 'randomizeData'
+ },
+ {
+ key: 'addData',
+ name: strings.AddDataCommandLabel,
+ iconProps: {
+ iconName: 'InsertColumnsRight'
+ },
+ onClick: () => { this._handleAddData(); },
+ ['data-automation-id']: 'addDataset'
+ },
+ {
+ key: 'removeData',
+ name: strings.RemoveDataCommandLabel,
+ icon: 'InsertColumnsLeft',
+ onClick: () => { this._handleRemoveData(); },
+ ['data-automation-id']: 'removeData'
+ },
+ ]}
+ />
+ );
+ }
+
+ /**
+ * Links a reference to the chart so that we can
+ * refer to it later and change its data
+ */
+ // tslint:disable-next-line no-any
+ private _linkElement = (e: any) => {
+ this._chartElem = e;
+ }
+
+ /**
+ * Loads data from a service.
+ * This is where you would replace for your own code
+ */
+ private _loadAsyncData(): Promise {
+ return new Promise((resolve, reject) => {
+ // Get the mock data provider
+ const dataProvider: IChartDataProvider = new MockChartDataProvider();
+
+ // Create an async request
+ dataProvider
+ .getNumberArray(DATA_LENGTH) // we only need 5 data elements for this demo
+ .then((numbers: number[]) => {
+ // get the chart's data
+ const data: Chart.ChartData = {
+ labels: strings.ChartLabels,
+ datasets: [
+ {
+ backgroundColor: [...chartColors], // we use the spread (...) notation to copy the colors
+ borderColor: [...borderColors], // we use the spread (...) notation to copy the colors
+ borderWidth:1,
+ data: numbers,
+ label: strings.DataSetLabel
+ }
+ ]
+ };
+ resolve(data);
+ });
+ });
+ }
+
+ /**
+ * Called when user clicks on Randomize Data.
+ * Reloads the entire dataset with newly retrieved randomized numbers
+ */
+ private _handleRandomizeData = () => {
+ const data = this._chartElem.getChart().data;
+ data.datasets.forEach((piece, i) => {
+ const dataElements: number[] = piece.data as number[];
+ dataElements.forEach((value, j) => {
+ data.datasets[i].data[j] = MockChartDataProvider.getRandomNumber();
+ });
+ });
+
+ this._chartElem.update();
+
+ }
+
+ /**
+ * Handles requests to add a new dataset.
+ */
+ private _handleAddData = () => {
+ // get the chart's data
+ const data: Chart.ChartData = this._chartElem.getChart().data;
+
+ const dataSet = data.datasets[0];
+
+ const labels: string[] = data.labels as string[];
+ labels.push('data #' + labels.length.toString());
+
+ const colorName = chartColors[labels.length % 5];
+ const backgroundColors: string[] = dataSet.backgroundColor as string[];
+ backgroundColors.push(colorName);
+
+ const borderColor: string[] = dataSet.borderColor as string[];
+ borderColor.push(borderColors[labels.length % 5]);
+
+ const dataElements: number[] = dataSet.data as number[];
+ dataElements.push(MockChartDataProvider.getRandomNumber());
+
+ // update that chart
+ this._chartElem.update();
+ }
+
+ /**
+ * Removes the oldset dataset
+ */
+ private _handleRemoveData = () => {
+ const data: Chart.ChartData = this._chartElem.getChart().data;
+
+ data.labels.pop();
+
+ const backgroundColors: string[] = data.datasets[0].backgroundColor as string[];
+ backgroundColors.pop();
+
+ const borderColor: string[] = data.datasets[0].borderColor as string[];
+ borderColor.pop();
+
+ const dataElements: number[] = data.datasets[0].data as number[];
+ dataElements.pop();
+
+ // update that chart
+ this._chartElem.update();
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/polarAreaDemo/loc/en-us.js
new file mode 100644
index 000000000..46faed4f8
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/loc/en-us.js
@@ -0,0 +1,18 @@
+define([], function () {
+ return {
+ "ChartTitle": "Polar Area Chart",
+ "DataSetLabel": "My dataset",
+ "ChartLabels": [
+ 'Red',
+ 'Orange',
+ 'Yellow',
+ 'Green',
+ 'Blue'
+ ],
+ "RandomizeCommandLabel": "Randomize data",
+ "AddDataCommandLabel": "Add data",
+ "RemoveDataCommandLabel": "Remove data",
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl to render a polar area chart as per the Chart.js sample
`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/polarAreaDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..f9abb054c
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/loc/mystrings.d.ts
@@ -0,0 +1,15 @@
+declare interface IPolarAreaDemoWebPartStrings {
+ ChartTitle: string;
+ DataSetLabel: string;
+ ChartLabels: string[];
+ RandomizeCommandLabel: string;
+ AddDataCommandLabel: string;
+ RemoveDataCommandLabel: string;
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'PolarAreaDemoWebPartStrings' {
+ const strings: IPolarAreaDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.manifest.json
new file mode 100644
index 000000000..67c0cf09a
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.manifest.json
@@ -0,0 +1,23 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "510b8ccc-c873-4a41-87ca-b43d94bb6d20",
+ "alias": "RadarDemoWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+
+ "title": { "default": "Radar Chart" },
+ "description": { "default": "Demonstrates how to use a radar chart" },
+ "iconImageUrl": "data:image/png;base64,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",
+ "properties": {
+ "description": "Radar Chart"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts
new file mode 100644
index 000000000..8daf3f2a3
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts
@@ -0,0 +1,55 @@
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+
+import * as strings from 'RadarDemoWebPartStrings';
+import RadarDemo from './components/RadarDemo';
+import { IRadarDemoProps } from './components/IRadarDemo.types';
+
+export interface IRadarDemoWebPartProps {
+ description: string;
+}
+
+export default class RadarDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ RadarDemo
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/components/IRadarDemo.types.ts b/samples/react-chartcontrol/src/webparts/radarDemo/components/IRadarDemo.types.ts
new file mode 100644
index 000000000..ab881d61d
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/components/IRadarDemo.types.ts
@@ -0,0 +1,7 @@
+export interface IRadarDemoProps {
+
+}
+
+export interface IRadarDemoState {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.module.scss b/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.module.scss
new file mode 100644
index 000000000..6ea8b2804
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.module.scss
@@ -0,0 +1,13 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.radarDemo {
+ color: inherit;
+}
+
+:export {
+ menBackground: rgba(54, 162, 235, 0.2);
+ menBorder: rgba(54, 162, 235, 1);
+ pointBorder: #fff;
+ womenBackground: rgba(255, 99, 132, 0.2);
+ womenBorder: rgba(255, 99, 132, 1);
+}
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.tsx b/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.tsx
new file mode 100644
index 000000000..d2c2e4457
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+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 { ChartControl, ChartType } from "@pnp/spfx-controls-react/lib/ChartControl";
+
+
+const DATASET_LENGTH: number = 2;
+const DATA_LENGTH: number = 7;
+export default class RadarDemo extends React.Component {
+
+ public render(): React.ReactElement {
+
+ return (
+
+
+ );
+ }
+
+ private _loadAsyncData(): Promise {
+ return new Promise((resolve, reject) => {
+ // Get the mock data provider
+ const dataProvider: IChartDataProvider = new MockChartDataProvider();
+
+ // Create an async request
+ dataProvider
+ .getMultiDataset(DATASET_LENGTH, DATA_LENGTH)
+ .then((numbersArrays: Array) => {
+
+ const data: Chart.ChartData = {
+ labels: strings.ChartLabels,
+ datasets: [{
+ label: strings.DataSet1Label,
+ backgroundColor: styles.menBackground,
+ borderColor: styles.menBorder,
+ pointBackgroundColor: styles.menBackground,
+ pointBorderColor: styles.pointBorder,
+ pointHoverBackgroundColor: styles.pointBorder,
+ pointHoverBorderColor: styles.menBorder,
+ data: numbersArrays[0]
+ }, {
+ label: strings.DataSet2Label,
+ backgroundColor: styles.womenBackground,
+ borderColor: styles.womenBorder,
+ pointBackgroundColor: styles.womenBackground,
+ pointBorderColor: styles.pointBorder,
+ pointHoverBackgroundColor: styles.pointBorder,
+ pointHoverBorderColor: styles.womenBorder,
+ data: numbersArrays[1]
+ }],
+ };
+ resolve(data);
+ });
+ });
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/radarDemo/loc/en-us.js
new file mode 100644
index 000000000..dcd7adf68
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/loc/en-us.js
@@ -0,0 +1,18 @@
+define([], function() {
+ return {
+ "Loading": "Loading...",
+ "DataSet1Label": "Men",
+ "DataSet2Label": "Women",
+ "ChartLabels": [
+ 'Eating',
+ 'Drinking',
+ 'Sleeping',
+ 'Designing',
+ 'Coding',
+ 'Cycling',
+ 'Running'
+ ],
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl to render a radar chart as per the Chart.js sample
`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/radarDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..421dfdc33
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/loc/mystrings.d.ts
@@ -0,0 +1,13 @@
+declare interface IRadarDemoWebPartStrings {
+ Loading: string;
+ DataSet1Label: string;
+ DataSet2Label: string;
+ ChartLabels: string[];
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'RadarDemoWebPartStrings' {
+ const strings: IRadarDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.manifest.json
new file mode 100644
index 000000000..53bf04651
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.manifest.json
@@ -0,0 +1,22 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "98c90b31-f355-4c24-9997-a7c25e0ff016",
+ "alias": "RealtimePluginDemoWebPart",
+ "componentType": "WebPart",
+
+ "version": "*",
+ "manifestVersion": 2,
+
+ "requiresCustomScript": false,
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": { "default": "Other" },
+ "title": { "default": "Realtime Plugin" },
+ "description": { "default": "Demonstrates using a plugin to render real-time charts." },
+ "officeFabricIconFontName": "Streaming",
+ "properties": {
+ "description": "Realtime Plugin"
+ }
+ }]
+}
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts
new file mode 100644
index 000000000..67587a768
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts
@@ -0,0 +1,57 @@
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+
+import * as strings from 'RealtimePluginDemoWebPartStrings';
+import RealtimePluginDemo from './components/RealtimePluginDemo';
+import { IRealtimePluginDemoProps } from './components/IRealtimePluginDemo.types';
+
+export interface IRealtimePluginDemoWebPartProps {
+ description: string;
+}
+
+export default class RealtimePluginDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ RealtimePluginDemo,
+ {
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/IRealtimePluginDemo.types.ts b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/IRealtimePluginDemo.types.ts
new file mode 100644
index 000000000..ea0621efe
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/IRealtimePluginDemo.types.ts
@@ -0,0 +1,3 @@
+export interface IRealtimePluginDemoProps {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.module.scss b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.module.scss
new file mode 100644
index 000000000..9592b3539
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.module.scss
@@ -0,0 +1,16 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.realtimePluginDemo {
+ color: inherit;
+
+}
+
+:export {
+red: rgb(255, 99, 132);
+orange: rgb(255, 159, 64);
+yellow: rgb(255, 205, 86);
+green: rgb(75, 192, 192);
+blue: rgb(54, 162, 235);
+purple: rgb(153, 102, 255);
+grey: rgb(201, 203, 207);
+}
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx
new file mode 100644
index 000000000..4ab56d9cb
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx
@@ -0,0 +1,235 @@
+import * as React from 'react';
+import styles from './RealtimePluginDemo.module.scss';
+import { IRealtimePluginDemoProps } from './IRealtimePluginDemo.types';
+import * as Color from 'color';
+import * as strings from 'RealtimePluginDemoWebPartStrings';
+
+// used to add a chart control
+import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+// used to import the real-time plugin
+import * as realTime from 'chartjs-plugin-streaming';
+
+// used to render the toolbar above the chart
+import {
+ CommandBar
+} from 'office-ui-fabric-react';
+
+const chartColors = {
+ red: styles.red,
+ orange: styles.orange,
+ yellow: styles.yellow,
+ green: styles.green,
+ blue: styles.blue,
+ purple: styles.purple,
+ grey: styles.grey
+};
+
+
+export default class RealtimePluginDemo extends React.Component {
+ /**
+ * The chart element
+ */
+ private _chartElem: ChartControl = undefined;
+
+ public render(): React.ReactElement {
+ const options: any = {
+ title: {
+ display: true,
+ text: strings.ChartTitle
+ },
+ scales: {
+ xAxes: [{
+ type: 'realtime',
+ realtime: {
+ duration: 20000,
+ refresh: 1000,
+ delay: 2000,
+ onRefresh: (chart) => this._onRefresh(chart)
+ }
+ }],
+ yAxes: [{
+ scaleLabel: {
+ display: true,
+ labelString: 'value'
+ }
+ }]
+ },
+ tooltips: {
+ mode: 'nearest',
+ intersect: false
+ },
+ hover: {
+ mode: 'nearest',
+ intersect: false
+ }
+ };
+ return (
+
+ {this._renderCommandBar()}
+
+ );
+ }
+
+ private _randomScalingFactor() {
+ return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+ }
+
+ private _onRefresh(chart) {
+ chart.config.data.datasets.forEach((dataset) => {
+ dataset.data.push({
+ x: Date.now(),
+ y: this._randomScalingFactor()
+ });
+ });
+ }
+
+ /**
+* Renders the command bar control.
+*/
+ private _renderCommandBar(): JSX.Element {
+ return (
+ { this._handleRandomizeData(); },
+ ['data-automation-id']: 'randomizeData'
+ },
+ {
+ key: 'addDataset',
+ name: strings.AddDatasetCommandLabel,
+ iconProps: {
+ iconName: 'Table'
+ },
+ onClick: () => { this._handleAddDataset(); },
+ ['data-automation-id']: 'addDataset'
+ },
+ {
+ key: 'removeDataset',
+ name: strings.RemoveDatasetCommandLabel,
+ icon: 'DeleteTable',
+ onClick: () => { this._handleRemoveDataset(); },
+ ['data-automation-id']: 'removeDataset'
+ },
+ {
+ key: 'addData',
+ name: strings.AddDataCommandLabel,
+ iconProps: {
+ iconName: 'InsertColumnsRight'
+ },
+ onClick: () => { this._handleAddData(); },
+ ['data-automation-id']: 'addDataset'
+ },
+ ]}
+ />
+ );
+ }
+
+ /**
+ * Links a reference to the chart so that we can
+ * refer to it later and change its data
+ */
+ // tslint:disable-next-line no-any
+ private _linkElement = (e: any) => {
+ this._chartElem = e;
+ }
+
+
+ /**
+ * Called when user clicks on Randomize Data.
+ * Reloads the entire dataset with newly retrieved randomized numbers
+ */
+ private _handleRandomizeData = () => {
+ const data = this._chartElem.getChart().data;
+
+ data.datasets.forEach((dataset) => {
+ (dataset.data as any[]).forEach((dataObj: any) => {
+ dataObj.y = this._randomScalingFactor();
+ });
+ });
+
+ this._chartElem.update();
+ }
+
+ /**
+ * Handles requests to add a new dataset.
+ */
+ private _handleAddDataset = () => {
+ // get the chart's data
+ const data: Chart.ChartData = this._chartElem.getChart().data;
+
+ var colorNames = Object.keys(chartColors);
+ var colorName = colorNames[data.datasets.length % colorNames.length];
+ var newColor = chartColors[colorName];
+ var newDataset = {
+ label: `${strings.DatasetPrefix} ${data.datasets.length + 1}`,
+ backgroundColor: Color(newColor).alpha(0.5).toString(),
+ borderColor: newColor,
+ fill: false,
+ lineTension: 0,
+ data: []
+ };
+
+ data.datasets.push(newDataset);
+
+ // update that chart
+ this._chartElem.update();
+ }
+
+ /**
+ * Removes the oldset dataset
+ */
+ private _handleRemoveDataset = () => {
+ const data: Chart.ChartData = this._chartElem.getChart().data;
+
+ data.datasets.pop();
+
+ // update that chart
+ this._chartElem.update();
+ }
+
+ /**
+ * Handles requests to add a new data point
+ */
+ private _handleAddData = () => {
+ // get the chart
+ const myChart = this._chartElem.getChart();
+
+ this._onRefresh(myChart);
+
+ // update that chart
+ this._chartElem.update();
+ }
+
+}
+
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/chartjs-plugin-streaming.d.ts b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/chartjs-plugin-streaming.d.ts
new file mode 100644
index 000000000..76f7321db
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/chartjs-plugin-streaming.d.ts
@@ -0,0 +1,68 @@
+/** Declaration file generated by dts-gen */
+
+export const id: string;
+
+export function afterDatasetDraw(chart: any): void;
+
+export function afterInit(chart: any): void;
+
+export function afterUpdate(chart: any, options: any): void;
+
+export function beforeDatasetDraw(chart: any, args: any): any;
+
+export function beforeEvent(chart: any, event: any): any;
+
+export function beforeInit(chart: any): void;
+
+export function beforeUpdate(chart: any): any;
+
+export function destroy(chart: any): void;
+
+export namespace afterDatasetDraw {
+ const prototype: {
+ };
+
+}
+
+export namespace afterInit {
+ const prototype: {
+ };
+
+}
+
+export namespace afterUpdate {
+ const prototype: {
+ };
+
+}
+
+export namespace beforeDatasetDraw {
+ const prototype: {
+ };
+
+}
+
+export namespace beforeEvent {
+ const prototype: {
+ };
+
+}
+
+export namespace beforeInit {
+ const prototype: {
+ };
+
+}
+
+export namespace beforeUpdate {
+ const prototype: {
+ };
+
+}
+
+export namespace destroy {
+ const prototype: {
+ };
+
+}
+
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/loc/en-us.js
new file mode 100644
index 000000000..c7b40fe50
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/loc/en-us.js
@@ -0,0 +1,16 @@
+define([], function () {
+ return {
+ "ChartTitle": "Real-Time Line chart",
+ "DatasetPrefix": "Dataset",
+ "Dataset1Label": "Dataset 1 (linear interpolation)",
+ "Dataset2Label": "Dataset 2 (cubic interpolation)",
+ "RandomizeCommandLabel": "Randomize data",
+ "AddDatasetCommandLabel": "Add dataset",
+ "RemoveDatasetCommandLabel": "Remove dataset",
+ "AddDataCommandLabel": "Add data",
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl
+ to render a real-time chart using the real-time plugin .
+ The code sample is inspired from the horizontal scroll sample from chartjs-plugin-streaming.
`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..ca1d0b2c3
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/loc/mystrings.d.ts
@@ -0,0 +1,17 @@
+declare interface IRealtimePluginDemoWebPartStrings {
+ ChartTitle: string;
+ DatasetPrefix: string;
+ Dataset1Label: string;
+ Dataset2Label: string;
+ RandomizeCommandLabel: string;
+ AddDatasetCommandLabel: string;
+ RemoveDatasetCommandLabel: string;
+ AddDataCommandLabel: string;
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'RealtimePluginDemoWebPartStrings' {
+ const strings: IRealtimePluginDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.manifest.json b/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.manifest.json
new file mode 100644
index 000000000..8ee149212
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.manifest.json
@@ -0,0 +1,27 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "612ed0fa-453a-480a-81bf-2d3cb872d938",
+ "alias": "ScatterChartDemoWebPart",
+ "componentType": "WebPart",
+ "version": "*",
+ "manifestVersion": 2,
+ "requiresCustomScript": false,
+ "preconfiguredEntries": [
+ {
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+ "group": {
+ "default": "Other"
+ },
+ "title": {
+ "default": "Scatter Chart"
+ },
+ "description": {
+ "default": "Demonstrates how to render a scatter chart using a logarithmic scale"
+ },
+ "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAYAAAATFf3WAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAvdEVYdFRpdGxlAENoYXJ0cyBTVkcgRXhhbXBsZSAtIFNpbXBsZSBTY2F0dGVyIENoYXJ0s5lgbwAABNZJREFUWIW9139sVeUZB/DP6a39QVtCKS3YijgzmX9sYyYmKhAJ4g+MRNwEE2OYiZK5hWRTQuKvGBMTUSPRGGPU+Cvxxz8WIzoimToLi5WxLIGxwX4E0g0n4i2ISGspvbfHP845vefenltFq09ycu/5vs/7PM/7Pu/zPc8biKQLTTiA6b5fCRBm4AP4PHlpxkzVg+uYBPxUbbRDTfzSiR+itory5Mv7OvU431ynVdEIpAI6jCJyaM1QnoaRb4mXsG7XKHhKoM7j/uYBS201XKHfkA5wBMPx74kMhycmAS9hbdaiDtSbZ63FttpUoT8lHeB0nIV/YqiKw1PHt7pM4F6hQTs86HYHQI2jZdrN8hl2RojzjDa04Ascy3DYjv5Twu83YoF9ogKk4IBLzQUb/cwML+JMx7xieeFMyY6C44/S+hd8nOxgoFQwzRkOmzJWWI4/bK4u5+rV6wmBBm1ltmqdYYE2vYatsA/ztQgc10bNboJUgIObsCualkxnFvbhSEYguQnxbX4h9CpyVuo3xeVm24E/40IwZJPecDbmjM0+7mOCfxNU8GDXQLLwJMAiPpRNmF8toVviYKHdfMv93C4fuMRJKwQGrbIdD+OG1Mw/4JcTmU4HmIvfOzP0ZqjkyHXmONtSx/QadFhTamy/AXSaD/44FrjjjdFRT2SoHrP4rJsgxYe7jogU84nTUVEV70U+I8BCGd7jxwLviqhgVOAmoUbME+p2r5fxyXgbLRXnuHEYh2hdleGzg1JhDOFfvm6KAyvj4CIboeXq3CCwXmC/CyKSnQxJF8k0EcV8dYo/1G92avSYjzR4R70FYJ1dtltmqGzBM+i6k9a7StDRUFScWZ/YRuQTHmzAPPQpT2WtxQqi7c7rcasaK4R2C3yu4Co5HyhaL+e/FUufY2FMzJF0yD4+E+JJ5AXsHxv6qykGdGOpbXbabLVlzhd6NN6TBUY9ZoklyHtVToePRG0boX6tDkXGwul4iRN1NJyMPdxJsDsjqHGSUENTbPwkplpijWa/EhF4p+naDWrQ5OKxmSMKXvIn5HRrdo73tZulqM/vrXejfrTQ0MXCDdSejXOiZ3sPz30WjeuI42ipeJpwNH0GZ4g+W3kzFcuW0Synzsu4LZ5IvRdwSJKeux1UopRU2u7I2JeLjuBg/FLOECUpq+Kj2COiGwqeU0r5p/Z6Ws6FQk8K3SOwyCLPZxiddEl2sEWU4jw6XYqfusz1fmSbPqvdL3StAEV5j9jIUxdx3YbUucKzt/Pb/yur+lumsuGNiJQb455vS6jEFuM/ApGMq+LzsF+PT/FrgXkCr1vkLe85oiZ1HQhdaXF4CDsrjP6E4B+yK/MbVXGS4qKoUSjiDoHHsVpos23mK/h7auIJNfZkGPxOJNna03A6DhtxRaozC+Qt84z7/M7Nctr1ed5vFHmznasrzHV3iFKXlbZqqZwwxcnAsKhgCupswcIYH9XmDW/r83ZZF4KraxnYSHOqtV/5H1F1ZlVmtWqdsIrT3cz/UCPvITMdxnlGveYSO2ReDYMDWFPF+KRJkPr/AxEPTpPQTUnqGXfrIiqurEtTFl4rakaKFXidaBcrfTbIuE7MqQRiaauCz8rAcuJLd4W0YmoGXs1nJt5YRTlXBZ+SgdWcop0sG2P4l/rcYKEmuvdjAAAAAElFTkSuQmCC",
+ "properties": {
+ "description": "Scatter Chart"
+ }
+ }
+ ]
+}
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts
new file mode 100644
index 000000000..40875b16e
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts
@@ -0,0 +1,58 @@
+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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+
+
+import * as strings from 'ScatterChartDemoWebPartStrings';
+import ScatterChartDemo from './components/ScatterChartDemo';
+import { IScatterChartDemoProps } from './components/IScatterChartDemo.types';
+
+export interface IScatterChartDemoWebPartProps {
+ description: string;
+}
+
+export default class ScatterChartDemoWebPart extends BaseClientSideWebPart {
+
+ public render(): void {
+ const element: React.ReactElement = React.createElement(
+ ScatterChartDemo,
+ {
+ }
+ );
+
+ ReactDom.render(element, this.domElement);
+ }
+
+ protected onDispose(): void {
+ ReactDom.unmountComponentAtNode(this.domElement);
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ groups: [
+ {
+ groupFields: [
+ PropertyPaneWebPartInformation({
+ description: strings.WebPartDescription,
+ moreInfoLink: strings.MoreInfoLinkUrl,
+ key: 'webPartInfoId'
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/IScatterChartDemo.types.ts b/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/IScatterChartDemo.types.ts
new file mode 100644
index 000000000..ca606f1f7
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/IScatterChartDemo.types.ts
@@ -0,0 +1,3 @@
+export interface IScatterChartDemoProps {
+
+}
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.module.scss b/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.module.scss
new file mode 100644
index 000000000..66dba08b3
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.module.scss
@@ -0,0 +1,10 @@
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+
+.scatterChartDemo {
+ color: inherit;
+}
+
+:export {
+ color1: rgb(255, 99, 132);
+ color2: rgba(255, 99, 132, 0.5);
+}
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.tsx b/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.tsx
new file mode 100644
index 000000000..512355eed
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.tsx
@@ -0,0 +1,172 @@
+import * as React from 'react';
+import styles from './ScatterChartDemo.module.scss';
+import { IScatterChartDemoProps } from './IScatterChartDemo.types';
+
+// used to add a chart control
+import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
+
+import * as strings from 'ScatterChartDemoWebPartStrings';
+
+
+export default class ScatterChartDemo extends React.Component {
+ public render(): React.ReactElement {
+ return (
+
+ {
+ var remain = tick / (Math.pow(10, Math.floor(this._log10(tick))));
+ if (remain === 1 || remain === 2 || remain === 5) {
+ return tick.toString() + strings.xAxisUnit;
+ }
+ return '';
+ },
+ },
+ scaleLabel: {
+ labelString: strings.xAxisLabel,
+ display: true,
+ }
+ }],
+ yAxes: [{
+ type: 'linear',
+ ticks: {
+ callback: (tick) => {
+ return tick.toString() + strings.yAxisUnit;
+ }
+ },
+ scaleLabel: {
+ labelString: strings.yAxisLabel,
+ display: true
+ }
+ }]
+ }
+ }}
+ />
+
+ );
+ }
+
+ private _log10 = (x: number): number => {
+ const exponent = Math.log(x) * Math.LOG10E; // Math.LOG10E = 1 / Math.LN10.
+
+ // Check for whole powers of 10,
+
+ // which due to floating point rounding error should be corrected.
+ const powerOf10 = Math.round(exponent);
+ const isPowerOf10 = x === Math.pow(10, powerOf10);
+ return isPowerOf10 ? powerOf10 : exponent;
+ }
+}
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/loc/en-us.js b/samples/react-chartcontrol/src/webparts/scatterChartDemo/loc/en-us.js
new file mode 100644
index 000000000..72cb7f517
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/loc/en-us.js
@@ -0,0 +1,15 @@
+define([], function() {
+ return {
+ "ChartTitle": "Scatter Chart - Logarithmic X-Axis",
+ "DataSetLabel": "V(node2)",
+ "xAxisLabel": "Frequency",
+ "xAxisUnit": "Hz",
+ "yAxisLabel": "Voltage",
+ "yAxisUnit": "dB",
+ "WebPartDescription": `This web part demonstrates how to use the PnP ChartControl
+ to render a scatter chart on a logarithmic scale as per the
+ Chart.js samp
+ Note that scatter charts only accepts data in a point format, using x and y values.`,
+ "MoreInfoLinkUrl": "https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ChartControl/"
+ }
+});
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/loc/mystrings.d.ts b/samples/react-chartcontrol/src/webparts/scatterChartDemo/loc/mystrings.d.ts
new file mode 100644
index 000000000..a6bd8063b
--- /dev/null
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/loc/mystrings.d.ts
@@ -0,0 +1,15 @@
+declare interface IScatterChartDemoWebPartStrings {
+ ChartTitle: string;
+ DataSetLabel: string;
+ xAxisLabel: string;
+ xAxisUnit: string;
+ yAxisLabel: string;
+ yAxisUnit: string;
+ WebPartDescription: string;
+ MoreInfoLinkUrl: string;
+}
+
+declare module 'ScatterChartDemoWebPartStrings' {
+ const strings: IScatterChartDemoWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-chartcontrol/tsconfig.json b/samples/react-chartcontrol/tsconfig.json
new file mode 100644
index 000000000..f13ec27a6
--- /dev/null
+++ b/samples/react-chartcontrol/tsconfig.json
@@ -0,0 +1,34 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "forceConsistentCasingInFileNames": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "jsx": "react",
+ "declaration": true,
+ "sourceMap": true,
+ "experimentalDecorators": true,
+ "skipLibCheck": true,
+ "outDir": "lib",
+ "typeRoots": [
+ "./node_modules/@types",
+ "./node_modules/@microsoft"
+ ],
+ "types": [
+ "es6-promise",
+ "webpack-env"
+ ],
+ "lib": [
+ "es5",
+ "dom",
+ "es2015.collection"
+ ]
+ },
+ "include": [
+ "src/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules",
+ "lib"
+ ]
+}
diff --git a/samples/react-chartcontrol/tslint.json b/samples/react-chartcontrol/tslint.json
new file mode 100644
index 000000000..23fa2aa43
--- /dev/null
+++ b/samples/react-chartcontrol/tslint.json
@@ -0,0 +1,30 @@
+{
+ "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+ "rules": {
+ "class-name": false,
+ "export-name": false,
+ "forin": false,
+ "label-position": false,
+ "member-access": true,
+ "no-arg": false,
+ "no-console": false,
+ "no-construct": false,
+ "no-duplicate-variable": true,
+ "no-eval": false,
+ "no-function-expression": true,
+ "no-internal-module": true,
+ "no-shadowed-variable": true,
+ "no-switch-case-fall-through": true,
+ "no-unnecessary-semicolons": true,
+ "no-unused-expression": true,
+ "no-use-before-declare": true,
+ "no-with-statement": true,
+ "semicolon": true,
+ "trailing-comma": false,
+ "typedef": false,
+ "typedef-whitespace": false,
+ "use-named-parameter": true,
+ "variable-name": false,
+ "whitespace": false
+ }
+}
\ No newline at end of file
diff --git a/samples/readme.md b/samples/readme.md
index 1d6bdee6e..9925d1557 100644
--- a/samples/readme.md
+++ b/samples/readme.md
@@ -6,108 +6,109 @@ Samples around the SharePoint Framework client-side web parts to demonstrate dif
Title|Description| Preview | Drop
----|----|-------|------
+Angular2 Web Part Prototype
requesting Lists and Views data from SharePoint REST API creating Knockout dropdown custom component with Fabric UI styling creating dependent properties (dropdowns) in Client-Side Web Part Property Pane Reading taxonomy term stores' hierarchy from SharePoint Loading JavaScript Object Model scripts creating Knockout components Reading taxonomy term stores' hierarchy from SharePoint Loading JavaScript Object Model scripts creating Knockout components requesting Lists and Views data from SharePoint REST API creating Knockout dropdown custom component with Fabric UI styling creating dependent properties (dropdowns) in Client-Side Web Part Property Pane