diff --git a/.gitignore b/.gitignore index cc534c3e29..87da789581 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +**/build diff --git a/apps/plotly_examples/package.json b/apps/plotly_examples/package.json index 57604dfa1f..00bb02c844 100644 --- a/apps/plotly_examples/package.json +++ b/apps/plotly_examples/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "private": true, "dependencies": { - "@fluentui/react-charting": "^5.23.29", + "@fluentui/react-charting": "^5.23.32", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "^5.0.1", diff --git a/apps/plotly_examples/public/index.html b/apps/plotly_examples/public/index.html index f7a5b7d4c4..72790f98a0 100644 --- a/apps/plotly_examples/public/index.html +++ b/apps/plotly_examples/public/index.html @@ -3,7 +3,7 @@ - React Chart App + Fluent charts test app diff --git a/apps/plotly_examples/src/components/DeclarativeChart.tsx b/apps/plotly_examples/src/components/DeclarativeChart.tsx index 1d7d352479..0086607bcb 100644 --- a/apps/plotly_examples/src/components/DeclarativeChart.tsx +++ b/apps/plotly_examples/src/components/DeclarativeChart.tsx @@ -1,13 +1,41 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; +import { TextField, ITextFieldStyles } from '@fluentui/react/lib/TextField'; import { DeclarativeChart, DeclarativeChartProps, IDeclarativeChart, Schema } from '@fluentui/react-charting'; -import { Toggle } from '@fluentui/react/lib/Toggle'; + +interface IErrorBoundaryProps { + children: React.ReactNode; +} + +interface IErrorBoundaryState { + hasError: boolean; + error: string; +} + +class ErrorBoundary extends React.Component { + public static getDerivedStateFromError(error: Error) { + // Update state so the next render will show the fallback UI. + return { hasError: true, error: `${error.message} ${error.stack}` }; + } + + constructor(props: IErrorBoundaryProps) { + super(props); + this.state = { hasError: false, error: '' }; + } + + public render() { + if (this.state.hasError) { + return

${this.state.error}

; + } + + return this.props.children; + } +} interface IDeclarativeChartState { selectedChoice: string; selectedSchema: any; schemasData: any[]; - preSelectLegends: boolean; selectedLegends: string; } @@ -25,28 +53,45 @@ const options: IDropdownOption[] = schemasData.map((data) => ({ const dropdownStyles = { dropdown: { width: 200 } }; +const textFieldStyles: Partial = { root: { maxWidth: 300 } }; + export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarativeChartState> { private _declarativeChartRef: React.RefObject; + private _lastKnownValidLegends: string[] | undefined; + constructor(props: DeclarativeChartProps) { super(props); + const selectedSchema = schemasData[0]?.schema || {}; + const { selectedLegends } = selectedSchema as any; this.state = { selectedChoice: (schemasData[0].schema as { id: string }).id || 'unknown', // Set the first file as the default choice if available - selectedSchema: schemasData[0]?.schema || null, + selectedSchema: selectedSchema, schemasData: schemasData, - preSelectLegends: false, - selectedLegends: '', + selectedLegends: JSON.stringify(selectedLegends), }; + this._declarativeChartRef = React.createRef(); + this._lastKnownValidLegends = selectedLegends; + } + + public componentDidMount() { + document.addEventListener('contextmenu', e => { + e.preventDefault(); + }); } private _onChange = (ev: any, option?: IDropdownOption): void => { const selectedChoice = option?.key as string; const selectedSchema = this.state.schemasData.find((data) => (data.schema as { id: string }).id === selectedChoice)?.schema; - this.setState({ selectedChoice, selectedSchema, selectedLegends: '' }); + const { selectedLegends } = selectedSchema as any; + this.setState({ selectedChoice, selectedSchema, selectedLegends: JSON.stringify(selectedLegends) }); }; - private _onTogglePreselectLegends = (ev: React.MouseEvent, checked?: boolean) => { - this.setState({ preSelectLegends: checked! }); + private _onSelectedLegendsEdited = ( + event: React.FormEvent, + newValue?: string, + ): void => { + this.setState({ selectedLegends: newValue ?? '' }); }; private fileSaver(url: string) { @@ -64,12 +109,24 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati }; private _createDeclarativeChart(): JSX.Element { + + const uniqueKey = `${this.state.selectedChoice}`; const { selectedSchema } = this.state; + const { data, layout } = selectedSchema; if (!selectedSchema) { return
No data available
; } - const inputSchema: Schema = { plotlySchema: selectedSchema }; - const uniqueKey = `${this.state.selectedChoice}_${this.state.preSelectLegends}`; + if (this.state.selectedLegends === '') { + this._lastKnownValidLegends = undefined; + } else { + try { + this._lastKnownValidLegends = JSON.parse(this.state.selectedLegends); + } catch (error) { + // Nothing to do here + } + } + const plotlySchema = { data, layout, selectedLegends: this._lastKnownValidLegends }; + const inputSchema: Schema = { plotlySchema }; return ( <>
@@ -81,13 +138,6 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati styles={dropdownStyles} />     -