update legend; update tooltip for geoda

GeoDaCenter · Aug 6, 2024 · 30eccb0 · 30eccb0
1 parent 9832348
commit 30eccb0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/components/src/common/color-legend.tsx b/src/components/src/common/color-legend.tsx
@@ -84,6 +84,7 @@ interface ColorLegendProps {
   range?: RangeType;
   labelFormat?: Function;
   displayLabel?: boolean;
+  legendRowHeight?: number;
 }
 
 export default class ColorLegend extends Component<ColorLegendProps> {
@@ -142,7 +143,7 @@ export default class ColorLegend extends Component<ColorLegendProps> {
   );
 
   render() {
-    const {width, displayLabel = true} = this.props;
+    const {width, displayLabel = true, legendRowHeight} = this.props;
 
     const legends = this.legendsSelector(this.props);
     const height = legends.data.length * (ROW_H + GAP);
@@ -157,6 +158,7 @@ export default class ColorLegend extends Component<ColorLegendProps> {
               displayLabel={displayLabel}
               color={color}
               idx={idx}
+              height={legendRowHeight}
             />
           ))}
         </svg>
@@ -165,10 +167,10 @@ export default class ColorLegend extends Component<ColorLegendProps> {
   }
 }
 
-export const LegendRow = ({label = '', displayLabel, color, idx}) => (
-  <g transform={`translate(0, ${idx * (ROW_H + GAP)})`}>
-    <rect width={RECT_W} height={ROW_H} style={{fill: color}} />
-    <text x={RECT_W + 8} y={ROW_H - 1}>
+export const LegendRow = ({label = '', displayLabel, color, idx, height = ROW_H}) => (
+  <g transform={`translate(0, ${idx * (height + GAP)})`}>
+    <rect width={RECT_W} height={height} style={{fill: color}} />
+    <text x={RECT_W + 8} y={height - 1}>
       {displayLabel ? label?.toString() ?? 'N/A' : ''}
     </text>
   </g>

diff --git a/src/components/src/map/map-legend.tsx b/src/components/src/map/map-legend.tsx
@@ -88,17 +88,19 @@ const SINGLE_COLOR_DOMAIN = [''];
 export type SingleColorLegendProps = {
   width: number;
   color: string;
+  legendRowHeight?: number;
 };
 
 /** @type {typeof import('./map-legend').SingleColorLegend} */
-export const SingleColorLegend: React.FC<SingleColorLegendProps> = React.memo(({width, color}) => (
+export const SingleColorLegend: React.FC<SingleColorLegendProps> = React.memo(({width, color, legendRowHeight}) => (
   <ColorLegend
     scaleType="ordinal"
     displayLabel={false}
     domain={SINGLE_COLOR_DOMAIN}
     fieldType={null}
     range={{colors: [rgb(...color).toString()]}}
     width={width}
+    legendRowHeight={legendRowHeight}
   />
 ));
 
@@ -138,6 +140,7 @@ export const LayerColorLegend: React.FC<LayerColorLegendProps> = React.memo(
                 <SingleColorLegend
                   color={config.visConfig[property] || config[property] || config.color}
                   width={width}
+                  legendRowHeight={description.label.includes('.stroke') ? 4 : 10}
                 />
               )}
             </div>

diff --git a/src/components/src/side-panel/interaction-panel/tooltip-config.tsx b/src/components/src/side-panel/interaction-panel/tooltip-config.tsx
@@ -212,7 +212,7 @@ function TooltipConfigFactory(
             />
           )
         )}
-        <CompareSwitchWrapper>
+        <CompareSwitchWrapper className="comparison-switch">
           <FormattedMessage id="compare.modeLabel" />
           <Switch
             checked={config.compareMode}
@@ -227,7 +227,7 @@ function TooltipConfigFactory(
             secondary
           />
         </CompareSwitchWrapper>
-        <SidePanelSection>
+        <SidePanelSection className="comparison-type">
           <PanelLabel>
             <FormattedMessage id="compare.typeLabel" />
           </PanelLabel>