LegendCategories: support for custom markers.

CartoDB · Jul 13, 2022 · 174e53e · 174e53e
1 parent da3caf2
commit 174e53e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js
@@ -20,21 +20,22 @@ describe('LegendCategories', () => {
   });
   test('renders colors (CARTOColors) correctly', () => {
     render(<LegendCategories legend={DEFAULT_LEGEND} />);
-    const elements = document.querySelectorAll('[class*="circle"]');
+    const elements = document.querySelectorAll('[class*="markerCircle"]');
     getPalette(COLOR, 2).forEach((color, idx) =>
       expect(elements[idx]).toHaveStyle(`background-color: ${color}`)
     );
   });
   test('renders colors (hex) correctly', () => {
     render(<LegendCategories legend={{ ...DEFAULT_LEGEND, colors: ['#000', '#fff'] }} />);
-    const [firstCategory, secondCategory] =
-      document.querySelectorAll('[class*="circle"]');
+    const [firstCategory, secondCategory] = document.querySelectorAll(
+      '[class*="markerCircle"]'
+    );
     expect(firstCategory).toHaveStyle('background-color: #000;');
     expect(secondCategory).toHaveStyle('background-color: #fff;');
   });
   test('renders stroked colors correctly', () => {
     render(<LegendCategories legend={{ ...DEFAULT_LEGEND, isStrokeColor: true }} />);
-    const elements = document.querySelectorAll('[class*="circle"]');
+    const elements = document.querySelectorAll('[class*="markerCircle"]');
     getPalette(COLOR, 2).forEach((color, idx) =>
       expect(elements[idx]).toHaveStyle(`border-color: ${color}`)
     );

diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js
@@ -4,7 +4,7 @@ import { getPalette } from '../../utils/palette';
 import PropTypes from 'prop-types';
 
 function LegendCategories({ legend }) {
-  const { labels = [], colors = [], isStrokeColor = false } = legend;
+  const { labels = [], colors = [], isStrokeColor = false, customMarkers } = legend;
 
   const palette = getPalette(colors, labels.length);
 
@@ -14,6 +14,9 @@ function LegendCategories({ legend }) {
       isMax={false}
       label={label}
       color={palette[idx]}
+      icon={
+        customMarkers && Array.isArray(customMarkers) ? customMarkers[idx] : customMarkers
+      }
       isStrokeColor={isStrokeColor}
     />
   ));
@@ -42,6 +45,10 @@ LegendCategories.propTypes = {
   legend: PropTypes.shape({
     labels: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
     colors: PropTypes.oneOfType([PropTypes.arrayOf(ColorType), PropTypes.string]),
+    customMarkers: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.string),
+      PropTypes.string
+    ]),
     isStrokeColor: PropTypes.bool
   }).isRequired
 };
@@ -56,14 +63,11 @@ const useStyles = makeStyles((theme) => ({
       '& $circle': {}
     }
   },
-  circle: {
+  marker: {
     whiteSpace: 'nowrap',
     display: 'block',
-    width: '12px',
-    height: '12px',
-    borderRadius: '50%',
     position: 'relative',
-    border: '2px solid transparent',
+
     '&::after': {
       position: 'absolute',
       display: ({ isMax }) => (isMax ? 'block' : 'none'),
@@ -76,6 +80,16 @@ const useStyles = makeStyles((theme) => ({
       boxSizing: 'content-box'
     }
   },
+  markerCircle: {
+    width: '12px',
+    height: '12px',
+    border: '2px solid transparent',
+    borderRadius: '50%'
+  },
+  markerIcon: {
+    width: '16px',
+    height: '16px'
+  },
   flexParent: {
     display: 'flex',
     alignItems: 'center'
@@ -94,7 +108,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-function Row({ label, isMax, isStrokeColor, color = '#000' }) {
+function Row({ label, isMax, isStrokeColor, color = '#000', icon }) {
   const classes = useStyles({ isMax });
 
   const [showTooltip, setShowTooltip] = useState(false);
@@ -121,8 +135,25 @@ function Row({ label, isMax, isStrokeColor, color = '#000' }) {
           <Box
             mr={1.5}
             component='span'
-            className={classes.circle}
-            style={isStrokeColor ? { borderColor: color } : { backgroundColor: color }}
+            className={[
+              classes.marker,
+              icon ? classes.markerIcon : classes.markerCircle
+            ].join(' ')}
+            style={
+              icon
+                ? {
+                    backgroundColor: color,
+                    maskRepeat: 'no-repeat',
+                    maskSize: 'cover',
+                    maskImage: `url(${icon})`,
+                    WebkitMaskRepeat: 'no-repeat',
+                    WebkitMaskSize: 'cover',
+                    WebkitMaskImage: `url(${icon})`
+                  }
+                : isStrokeColor
+                ? { borderColor: color }
+                : { backgroundColor: color }
+            }
           />
         </Tooltip>
         <Typography ref={labelRef} variant='overline' className={classes.longTruncate}>