Fix Histogram widget when there is just one row of data (#653)

CartoDB · Apr 25, 2023 · 8b1293e · 8b1293e
1 parent 563b793
commit 8b1293e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,15 +2,16 @@
 
 ## Not released
 
-- New DS core component: table [#657](https://github.com/CartoDB/carto-react/pull/657)
+- New DS core component: Table [#657](https://github.com/CartoDB/carto-react/pull/657)
 - Improve upgrade guide documentation [#651](https://github.com/CartoDB/carto-react/pull/651)
 - Fix storybook publication with Node 18 [#654](https://github.com/CartoDB/carto-react/pull/654)
+- Fix Histogram widget when showing just one row of data [#653](https://github.com/CartoDB/carto-react/pull/653)
 
 ## 2.0
 
 ### 2.0.1 (2023-04-14)
 
-- New DS core component: accordion [#632](https://github.com/CartoDB/carto-react/pull/632)
+- New DS core component: Accordion [#632](https://github.com/CartoDB/carto-react/pull/632)
 - DS update: Disable ligatures in the monospaced font family [#649](https://github.com/CartoDB/carto-react/pull/649)
 - DS update: change action.disabledBackground color [#647](https://github.com/CartoDB/carto-react/pull/647)
 - Storybook documentation and fixes [#629](https://github.com/CartoDB/carto-react/pull/629)

diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
@@ -175,7 +175,14 @@ function HistogramWidgetUI({
 
   // Series
   const seriesOptions = useMemo(() => {
-    const dataWithColor = formattedData.map((item, idx) => {
+    // We check if we have just one different value
+    const isUniqueDataRow = formattedData.filter((row) => row[2] !== 0).length === 1;
+
+    const data = isUniqueDataRow
+      ? [formattedData[0], formattedData[formattedData.length - 1]]
+      : formattedData;
+
+    const dataWithColor = data.map((item, idx) => {
       const isDisabled = selectedBars.length && selectedBars.indexOf(idx) === -1;
       const color = isDisabled ? theme.palette.black[25] : theme.palette.secondary.main;
 
@@ -200,9 +207,10 @@ function HistogramWidgetUI({
         return {
           type: 'rect',
           shape: {
-            x: x + (isFirst ? 0 : 1),
+            x: isUniqueDataRow ? x / 10 : x + (isFirst ? 0 : 1),
             y,
-            width: width - (isLast ? 0 : 1),
+            // Division by 10 in the next line is done to avoid that the only bar rendered inside the histogram widget gets all the width of it
+            width: isUniqueDataRow ? x - x / 10 : width - (isLast ? 0 : 1),
             height
           },
           style: { fill },