fix: Update Scatterplot component and alphabetize new component props

src/components/AreaChart/index.tsx

@@ -72,22 +72,22 @@ export const AreaChart: React.FC<AreaChartProps> = (
   inProps: AreaChartProps,
 ): React.ReactElement<AreaChartProps> => {
   const {
+    areaChartProps,
+    areaKeys,
+    areaProps,
     children,
     colors = [],
-    areaProps,
-    areaChartProps,
-    responsiveContainerProps,
-    tooltipProps,
     data,
     height,
     legendProps,
-    width,
+    responsiveContainerProps,
     showLegend = false,
-    areaKeys,
+    tooltipProps,
+    width,
     xAxisProps,
-    yAxisProps,
     xLabel,
     xLabelProps,
+    yAxisProps,
     yLabel,
     yLabelProps,
     yReferenceValue,

src/components/Map/index.tsx

@@ -76,19 +76,19 @@ export type MapProps = MapGLProps & {
     | GeoJSON.FeatureCollection<GeoJSON.Geometry>
     | string
     | undefined;
+  height: number | string;
   initialBoundsPosition?: InitialBoundsPositionProps;
   layers?: Array<React.ReactElement<LayerProps>>;
   layerProps?: LayerProps;
   mapboxAccessToken: string;
   navigationControlProps?: NavigationControlProps;
   onMapClick?: (event: MapLayerMouseEvent, mapRef: MapRef | null) => void;
-  height: number | string;
-  width: number | string;
   // eslint-disable-next-line react/boolean-prop-naming
   preserveDrawingBuffer?: boolean;
   setHoverInfo?: (value: FeatureHoverProps | undefined) => void;
   sourceId?: string;
   sourceProps?: SourceProps;
+  width: number | string;
 };
 
 /**

src/components/OverlappedBarChart/OverlappedLabel/index.tsx

@@ -26,18 +26,18 @@ export type OverlappedLabelProps = LabelProps & {
 
 export const OverlappedLabel: React.FC<OverlappedLabelProps> = ({
   color,
+  data,
+  height,
+  index,
+  isOutsideBar,
   label,
-  outsideBarDataKey,
   labelColor,
+  outsideBarDataKey,
   value,
   valueColor,
   width,
   x,
   y,
-  data,
-  isOutsideBar,
-  height,
-  index,
 }: OverlappedLabelProps): React.ReactElement<OverlappedLabelProps> => {
   const { palette, spacing } = useTheme();
 

src/components/OverlappedBarChart/index.tsx

@@ -35,9 +35,9 @@ export interface OverlappedBarDataProps {
 }
 
 export interface OverlappedBarChartProps {
+  barChartProps?: Omit<BarChartProps, 'data'>;
   barKeys: string[];
   barProps?: Omit<BarProps, 'dataKey' | 'ref'>;
-  barChartProps?: Omit<BarChartProps, 'data'>;
   children?: React.ReactElement<unknown>;
   colors?: string[];
   data: Array<OverlappedBarDataProps>;
@@ -50,9 +50,9 @@ export const OverlappedBarChart: React.FC<OverlappedBarChartProps> = (
   inProps: OverlappedBarChartProps,
 ): React.ReactElement<OverlappedBarChartProps> => {
   const {
+    barChartProps,
     barKeys,
     barProps,
-    barChartProps,
     children,
     colors = [],
     data,

src/components/PieChart/InnerPieComponent/index.tsx

@@ -14,16 +14,16 @@ import { PolarViewBox } from 'recharts/types/util/types';
 import { HighlightComponentType, PieDataProps } from '../types';
 
 interface InnerPieComponentProps extends LabelProps {
+  HighlightComponent: HighlightComponentType;
   payload: PieDataProps;
   pieTotalValue: number;
-  HighlightComponent: HighlightComponentType;
 }
 
 const InnerPieComponent: React.FC<InnerPieComponentProps> = ({
-  viewBox: wrongTypeViewBox,
+  HighlightComponent,
   payload,
   pieTotalValue,
-  HighlightComponent,
+  viewBox: wrongTypeViewBox,
 }) => {
   if (!wrongTypeViewBox) {
     return null;

src/components/PieChart/PieLegend/index.tsx

@@ -52,11 +52,11 @@ export const PieLegend: React.FC<PieLegendProps> = (
     chartHeight,
     chartWidth,
     formatValue,
+    onMouseEnter,
+    onMouseLeave,
     payload,
     pieTotalValue,
     showAsSquare,
-    onMouseEnter,
-    onMouseLeave,
   } = props;
 
   const handleMouseEnter = (

src/components/PieChart/index.tsx

@@ -57,6 +57,7 @@ export interface PieChartProps {
   CustomLegendIcon?: CustomLegendComponentType;
   data: Array<TypesPieDataProps>;
   height?: number;
+  HighlightComponent?: HighlightComponentType;
   legendProps?: LegendProps;
   pieChartProps?: CategoricalChartProps;
   pieProps?: Partial<PieProps>;
@@ -65,7 +66,6 @@ export interface PieChartProps {
   tooltipProps?: TooltipProps<ValueType, NameType>;
   variant?: VariantType;
   width?: number | string;
-  HighlightComponent?: HighlightComponentType;
 }
 
 export const DEFAULT_PIE_GAP_ANGLE = 1;
@@ -83,6 +83,7 @@ export const PieChart: React.FC<PieChartProps> = (
     CustomLegendIcon,
     data,
     height,
+    HighlightComponent,
     legendProps,
     pieChartProps,
     pieProps,
@@ -91,7 +92,6 @@ export const PieChart: React.FC<PieChartProps> = (
     tooltipProps,
     variant,
     width,
-    HighlightComponent,
   } = useThemeProps({ name: DLS_COMPONENT_NAMES.PIE_CHART, props: inProps });
 
   const { palette, spacing, typography } = useTheme();

src/components/SCFMap/index.tsx

@@ -31,11 +31,11 @@ export interface SCFMapProps {
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
   mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
+  onHoverInfo?: FeatureHoverProps;
   processDataFn?: (
     featureCollection: GeoJSON.FeatureCollection<GeoJSON.Geometry>,
     data: Array<IMapDataProps>,
   ) => GeoJSON.FeatureCollection<GeoJSON.Geometry>;
-  onHoverInfo?: FeatureHoverProps;
   selectedSCF?: Array<string>;
   setOnHoverInfo?: (newHoverInfo: FeatureHoverProps | undefined) => void;
   tooltipElement?: React.ReactElement;
@@ -49,10 +49,10 @@ export interface SCFMapProps {
 export const SCFMap: React.FC<SCFMapProps> = ({
   data,
   geoJSONPath,
-  onHoverInfo,
   mapboxAccessToken,
-  mapProps,
   mapPopupProps,
+  mapProps,
+  onHoverInfo,
   processDataFn,
   selectedSCF,
   setOnHoverInfo,

src/components/ScatterPlot/CustomTooltip/index.tsx

@@ -23,14 +23,14 @@ import {
 import { IGroupDataPoint } from '../types';
 
 type ICustomTooltipProps = {
-  isBlockingOnHovers: boolean;
   CustomTooltipContent?: React.ElementType;
+  isBlockingOnHovers: boolean;
 } & TooltipProps<ValueType, NameType>;
 
 export const CustomTooltip: React.FC<ICustomTooltipProps> = ({
-  payload,
-  isBlockingOnHovers,
   CustomTooltipContent,
+  isBlockingOnHovers,
+  payload,
 }): React.ReactElement<TooltipProps<ValueType, NameType>> | null => {
   const data = payload && (get(payload[0], 'payload') as IGroupDataPoint);
   const members = data?.members;

src/components/ScatterPlot/CustomizedCell/index.tsx

@@ -20,22 +20,22 @@ const OPACITY_NOT_HIGHLIGHTED = 0.2;
 
 export type CustomizedScatterCellProps = CellProps & {
   color?: string;
-  selectedPoint?: ScatterPlotData;
   groupSize?: number;
-  members?: IGroupDataPoint[];
   label?: string;
+  members?: IGroupDataPoint[];
+  selectedPoint?: ScatterPlotData;
 };
 
 const CustomizedCell: React.FC<CustomizedScatterCellProps> = ({
   color,
   cx,
   cy,
+  groupSize,
   height,
-  width,
-  selectedPoint,
   label,
-  groupSize,
   members,
+  selectedPoint,
+  width,
 }) => {
   const { palette } = useTheme();
 

src/components/ScatterPlot/CustomizedLabel/index.tsx

@@ -16,9 +16,9 @@ import { ScatterPlotData } from '~/types';
 export type CustomizedLabelProps = LabelProps & {
   fontSize?: number;
   fontWeight?: number;
+  isBlockingOnHovers?: boolean;
   selectedPoint?: ScatterPlotData;
   shouldHideLabel?: Record<string, boolean>;
-  isBlockingOnHovers?: boolean;
 };
 
 export function calculateLabelWidth(label: string): number {
@@ -32,12 +32,12 @@ export const CustomizedLabel: React.FC<CustomizedLabelProps> = ({
   fill,
   fontSize,
   fontWeight,
+  isBlockingOnHovers,
+  selectedPoint,
+  shouldHideLabel = {},
   value,
   x,
   y,
-  selectedPoint,
-  shouldHideLabel = {},
-  isBlockingOnHovers,
 }): React.ReactElement<CustomizedLabelProps> | null => {
   let opacity = 1;
   const isThisSelectedPoint =

src/components/ScatterPlot/RankSummary/index.tsx

@@ -39,8 +39,8 @@ export interface RankSummaryProps {
   idSubstring?: string;
   selectedPoint?: ScatterPlotData;
   setSelectedPoint?: (data: ScatterPlotData | undefined) => void;
-  showSummary?: boolean;
   setShowSummary?: (value: boolean) => void;
+  showSummary?: boolean;
   tableContainerProps?: TableContainerProps;
 }
 
@@ -50,8 +50,8 @@ export const RankSummary: React.FC<RankSummaryProps> = ({
   idSubstring,
   selectedPoint,
   setSelectedPoint,
-  showSummary = true,
   setShowSummary,
+  showSummary = true,
   tableContainerProps,
 }: RankSummaryProps): JSX.Element => {
   const ref = React.useRef<HTMLDivElement>(null);