From 174e53ed514f9890734d7b343c13ea61a47b437f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zbigniew=20Zag=C3=B3rski?= Date: Wed, 13 Jul 2022 13:26:33 +0200 Subject: [PATCH 1/4] LegendCategories: support for custom markers. --- .../widgets/legend/LegendCategories.test.js | 9 ++-- .../src/widgets/legend/LegendCategories.js | 49 +++++++++++++++---- 2 files changed, 45 insertions(+), 13 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js index 59d43d768..f97a8c3d5 100644 --- 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(); - 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(); - 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(); - 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 index 38c87f998..2754e0e86 100644 --- 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' }) { From 82692f46544d7b7bbd2d94309c09485cbb73470a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zbigniew=20Zag=C3=B3rski?= Date: Wed, 13 Jul 2022 18:24:49 +0200 Subject: [PATCH 2/4] add changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 324751073..abcb7a85c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## Not released +- LegendCategories: support for custom markers [#451](https://github.com/CartoDB/carto-react/pull/451) + +## 1.4 ## 1.3 ### 1.3.0 (2022-07-11) From 97ee96936e7a6429b83ecb2aa16e31ac14f7eac1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zbigniew=20Zag=C3=B3rski?= Date: Wed, 13 Jul 2022 18:29:56 +0200 Subject: [PATCH 3/4] add tests --- .../widgets/legend/LegendCategories.test.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js index f97a8c3d5..7f4e43500 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js @@ -40,4 +40,16 @@ describe('LegendCategories', () => { expect(elements[idx]).toHaveStyle(`border-color: ${color}`) ); }); + test('renders icons correctly', () => { + render( + + ); + const elements = document.querySelectorAll('[class*="markerIcon"]'); + getPalette(COLOR, 2).forEach((color, idx) => { + expect(elements[idx]).toHaveStyle(`mask-image: url(https://xyz.com/x.png)`); + expect(elements[idx]).toHaveStyle(`background-color: ${color}`); + }); + }); }); From 8da4773a074bdbfe6084c8cae991fb241aff9345 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zbigniew=20Zag=C3=B3rski?= Date: Thu, 14 Jul 2022 11:23:06 +0200 Subject: [PATCH 4/4] cleanup css --- .../widgets/legend/LegendCategories.test.js | 11 ++++---- .../src/widgets/legend/LegendCategories.js | 28 +++++++------------ 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js index 7f4e43500..0f66ca9dc 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js @@ -20,22 +20,21 @@ describe('LegendCategories', () => { }); test('renders colors (CARTOColors) correctly', () => { render(); - const elements = document.querySelectorAll('[class*="markerCircle"]'); + const elements = document.querySelectorAll('[class*="marker"]'); getPalette(COLOR, 2).forEach((color, idx) => expect(elements[idx]).toHaveStyle(`background-color: ${color}`) ); }); test('renders colors (hex) correctly', () => { render(); - const [firstCategory, secondCategory] = document.querySelectorAll( - '[class*="markerCircle"]' - ); + const [firstCategory, secondCategory] = + document.querySelectorAll('[class*="marker"]'); expect(firstCategory).toHaveStyle('background-color: #000;'); expect(secondCategory).toHaveStyle('background-color: #fff;'); }); test('renders stroked colors correctly', () => { render(); - const elements = document.querySelectorAll('[class*="markerCircle"]'); + const elements = document.querySelectorAll('[class*="marker"]'); getPalette(COLOR, 2).forEach((color, idx) => expect(elements[idx]).toHaveStyle(`border-color: ${color}`) ); @@ -46,7 +45,7 @@ describe('LegendCategories', () => { legend={{ ...DEFAULT_LEGEND, customMarkers: 'https://xyz.com/x.png' }} /> ); - const elements = document.querySelectorAll('[class*="markerIcon"]'); + const elements = document.querySelectorAll('[class*="marker"]'); getPalette(COLOR, 2).forEach((color, idx) => { expect(elements[idx]).toHaveStyle(`mask-image: url(https://xyz.com/x.png)`); expect(elements[idx]).toHaveStyle(`background-color: ${color}`); diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index 2754e0e86..bd52ac742 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -66,8 +66,13 @@ const useStyles = makeStyles((theme) => ({ marker: { whiteSpace: 'nowrap', display: 'block', + width: '12px', + height: '12px', + borderRadius: '50%', position: 'relative', - + border: '2px solid transparent' + }, + circle: { '&::after': { position: 'absolute', display: ({ isMax }) => (isMax ? 'block' : 'none'), @@ -80,15 +85,9 @@ const useStyles = makeStyles((theme) => ({ boxSizing: 'content-box' } }, - markerCircle: { - width: '12px', - height: '12px', - border: '2px solid transparent', - borderRadius: '50%' - }, - markerIcon: { - width: '16px', - height: '16px' + icon: { + maskRepeat: 'no-repeat', + maskSize: 'cover' }, flexParent: { display: 'flex', @@ -135,19 +134,12 @@ function Row({ label, isMax, isStrokeColor, color = '#000', icon }) {