Yarn prettier

packages/charts/react-charting/etc/react-charting.api.md

@@ -1228,6 +1228,7 @@ export interface ISankeyChartData {
 export interface ISankeyChartProps {
     accessibility?: ISankeyChartAccessibilityProps;
     borderColorsForNodes?: string[];
+    calloutProps?: Partial<ICalloutProps>;
     className?: string;
     colorsForNodes?: string[];
     componentRef?: IRefObject<IChart>;

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -14,7 +14,6 @@ import {
   transformPlotlyJsonToVSBCProps,
   transformPlotlyJsonToScatterChartProps,
   transformPlotlyJsonToHorizontalBarWithAxisProps,
-
   transformPlotlyJsonToHeatmapProps,
   transformPlotlyJsonToSankeyProps,
   transformPlotlyJsonToGaugeProps,
@@ -86,7 +85,8 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
   DeclarativeChartProps
 >((props, forwardedRef) => {
   const { plotlySchema } = sanitizeJson(props.chartSchema);
-  let { data, layout, selectedLegends } = plotlySchema;
+  const { data, layout } = plotlySchema;
+  let { selectedLegends } = plotlySchema;
   const xValues = data[0].x;
   const isXDate = isDateArray(xValues);
   const isXNumber = isNumberArray(xValues);
@@ -108,9 +108,9 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
   };
 
   React.useEffect(() => {
-    const { plotlySchema } = sanitizeJson(props.chartSchema);
-    const { selectedLegends } = plotlySchema;
-    setActiveLegends(selectedLegends ?? []);
+    const { updatedPlotlySchema } = sanitizeJson(props.chartSchema);
+    const { updatedSelectedLegends } = updatedPlotlySchema;
+    setActiveLegends(updatedSelectedLegends ?? []);
   }, [props.chartSchema]);
 
   const legendProps = {
@@ -142,10 +142,10 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
       return (
         <DonutChart
           {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}
-          legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends}}
+          legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}
           componentRef={chartRef}
           // Bubble event to prevent right click to open menu on the callout
-          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+          calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
         />
       );
     case 'bar':
@@ -156,7 +156,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
             {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}
             legendProps={legendProps}
             componentRef={chartRef}
-            calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+            calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
           />
         );
       } else {
@@ -166,7 +166,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
               {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}
               legendProps={legendProps}
               componentRef={chartRef}
-              calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+              calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
             />
           );
         }
@@ -175,7 +175,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
             {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}
             legendProps={legendProps}
             componentRef={chartRef}
-            calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+            calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
           />
         );
       }
@@ -188,16 +188,16 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
               {...transformPlotlyJsonToScatterChartProps({ data, layout }, true, colorMap, isDarkTheme)}
               legendProps={legendProps}
               componentRef={chartRef}
-              calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+              calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
             />
           );
         }
         return (
           <LineChart
             {...transformPlotlyJsonToScatterChartProps({ data, layout }, false, colorMap, isDarkTheme)}
-            legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends}}
+            legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}
             componentRef={chartRef}
-            calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+            calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
           />
         );
       }
@@ -206,7 +206,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}
           legendProps={legendProps}
           componentRef={chartRef}
-          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+          calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
         />
       );
     case 'heatmap':
@@ -215,15 +215,15 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           {...transformPlotlyJsonToHeatmapProps(plotlySchema)}
           legendProps={legendProps}
           componentRef={chartRef}
-          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+          calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
         />
       );
     case 'sankey':
       return (
         <SankeyChart
           {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}
           componentRef={chartRef}
-          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+          calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
         />
       );
     case 'indicator':
@@ -233,7 +233,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
             {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}
             legendProps={legendProps}
             componentRef={chartRef}
-            calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+            calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
           />
         );
       }
@@ -244,7 +244,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}
           legendProps={legendProps}
           componentRef={chartRef}
-          calloutProps={{layerProps: {eventBubblingEnabled: true}}}
+          calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
         />
       );
     default:

packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -523,7 +523,7 @@ export const sanitizeJson = (jsonObject: any, depth: number = 0): any => {
   }
 
   return jsonObject;
-}
+};
 
 function isTypedArray(a: any) {
   return ArrayBuffer.isView(a) && !(a instanceof DataView);

packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx

@@ -100,7 +100,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   public componentDidUpdate(prevProps: IDonutChartProps): void {
     if (prevProps.legendProps?.selectedLegends !== this.props.legendProps?.selectedLegends) {
       this.setState({
-        selectedLegends: this.props.legendProps?.selectedLegends || []
+        selectedLegends: this.props.legendProps?.selectedLegends || [],
       });
     }
   }

packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx

@@ -170,7 +170,7 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
   public componentDidUpdate(prevProps: IGaugeChartProps): void {
     if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) {
       this.setState({
-        selectedLegend: this.props.legendProps?.selectedLegend ?? ''
+        selectedLegend: this.props.legendProps?.selectedLegend ?? '',
       });
     }
   }

packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx

@@ -147,7 +147,7 @@ export class GroupedVerticalBarChartBase
   public componentDidUpdate(prevProps: IGroupedVerticalBarChartProps): void {
     if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) {
       this.setState({
-        selectedLegend: this.props.legendProps?.selectedLegend ?? ''
+        selectedLegend: this.props.legendProps?.selectedLegend ?? '',
       });
     }
   }

packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx

@@ -156,7 +156,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
   public componentDidUpdate(prevProps: IHeatMapChartProps): void {
     if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) {
       this.setState({
-        selectedLegend: this.props.legendProps?.selectedLegend ?? ''
+        selectedLegend: this.props.legendProps?.selectedLegend ?? '',
       });
     }
   }

packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx

@@ -116,7 +116,7 @@ export class HorizontalBarChartWithAxisBase
   public componentDidUpdate(prevProps: IHorizontalBarChartWithAxisProps): void {
     if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) {
       this.setState({
-        selectedLegend: this.props.legendProps?.selectedLegend ?? ''
+        selectedLegend: this.props.legendProps?.selectedLegend ?? '',
       });
     }
   }

packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx

@@ -230,7 +230,8 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   }
 
   public componentDidUpdate(prevProps: ILineChartProps): void {
-    if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend ||
+    if (
+      prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend ||
       prevProps.legendProps?.selectedLegends !== this.props.legendProps?.selectedLegends
     ) {
       this.setState({

packages/charts/react-charting/src/components/SankeyChart/SankeyChart.types.ts

@@ -92,10 +92,10 @@ export interface ISankeyChartProps {
    */
   componentRef?: IRefObject<IChart>;
 
-    /**
-     * props for the callout in the chart
-     */
-    calloutProps?: Partial<ICalloutProps>;
+  /**
+   * props for the callout in the chart
+   */
+  calloutProps?: Partial<ICalloutProps>;
 }
 
 /**

packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx

@@ -143,7 +143,7 @@ export class VerticalBarChartBase
   public componentDidUpdate(prevProps: IVerticalBarChartProps): void {
     if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) {
       this.setState({
-        selectedLegend: this.props.legendProps?.selectedLegend ?? ''
+        selectedLegend: this.props.legendProps?.selectedLegend ?? '',
       });
     }
   }

packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx

@@ -172,7 +172,7 @@ export class VerticalStackedBarChartBase
   public componentDidUpdate(prevProps: IVerticalStackedBarChartProps): void {
     if (prevProps.legendProps?.selectedLegend !== this.props.legendProps?.selectedLegend) {
       this.setState({
-        selectedLegend: this.props.legendProps?.selectedLegend ?? ''
+        selectedLegend: this.props.legendProps?.selectedLegend ?? '',
       });
     }
 

packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx

@@ -37,7 +37,6 @@ const schemas: any[] = [
 
 const dropdownStyles = { dropdown: { width: 200 } };
 
-
 const textFieldStyles: Partial<ITextFieldStyles> = { root: { maxWidth: 300 } };
 
 function fileSaver(url: string) {
@@ -67,11 +66,11 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
     this._lastKnownValidLegends = selectedLegends;
   }
 
-  componentDidMount() {
-    document.addEventListener('contextmenu', (e) => {
+  public componentDidMount() {
+    document.addEventListener('contextmenu', e => {
       e.preventDefault();
     });
-  };
+  }
 
   public render(): JSX.Element {
     return <div>{this._createDeclarativeChart()}</div>;
@@ -83,7 +82,10 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
     this.setState({ selectedChoice: option.key as string, selectedLegends: JSON.stringify(selectedLegends) });
   };
 
-  private _onSelectedLegendsEdited = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {
+  private _onSelectedLegendsEdited = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string,
+  ): void => {
     this.setState({ selectedLegends: newValue ?? '' });
   };
 
@@ -104,13 +106,14 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
     if (this.state.selectedLegends === '') {
       this._lastKnownValidLegends = undefined;
     } else {
-        try {
-          this._lastKnownValidLegends = JSON.parse(this.state.selectedLegends);
-        } catch (error) {
+      try {
+        this._lastKnownValidLegends = JSON.parse(this.state.selectedLegends);
+      } catch (error) {
+        // Nothing to do here
       }
     }
     const plotlySchema = { data, layout, selectedLegends: this._lastKnownValidLegends };
-    let inputSchema: Schema = { plotlySchema: plotlySchema };
+    const inputSchema: Schema = { plotlySchema };
 
     return (
       <ErrorBoundary>
@@ -142,7 +145,12 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
           componentRef={this._declarativeChartRef}
         />
         <br />
-        <TextField label="Current Legend selection" value={this.state.selectedLegends} onChange={this._onSelectedLegendsEdited} styles={textFieldStyles}/>
+        <TextField
+          label="Current Legend selection"
+          value={this.state.selectedLegends}
+          onChange={this._onSelectedLegendsEdited}
+          styles={textFieldStyles}
+        />
       </ErrorBoundary>
     );
   }

packages/react-examples/src/react-charting/DeclarativeChart/ErrorBoundary.tsx

@@ -1,30 +1,26 @@
 import * as React from 'react';
 
-interface ErrorBoundaryProps {
+interface IErrorBoundaryProps {
   children: React.ReactNode;
 }
 
-interface ErrorBoundaryState {
+interface IErrorBoundaryState {
   hasError: boolean;
   error: string;
 }
 
-class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: '' };
-  }
-
-  static getDerivedStateFromError(error: Error) {
+class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryState> {
+  public static getDerivedStateFromError(error: Error) {
     // Update state so the next render will show the fallback UI.
     return { hasError: true, error: `${error.message} ${error.stack}` };
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error("Error caught by ErrorBoundary:", error, errorInfo);
+  constructor(props: IErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: '' };
   }
 
-  render() {
+  public render() {
     if (this.state.hasError) {
       return <h1>${this.state.error}</h1>;
     }