Merge branch 'master' into mcalzado-v2.3.11

CHANGELOG.md

@@ -2,10 +2,23 @@
 
 ## Not released
 
-- Keyboard accessibility improvements in Widgets and DS components [#835](https://github.com/CartoDB/carto-react/pull/835)
-
 ## 2.3
 
+### 2.3.13 (2024-03-06)
+
+- Add percentFormatter prop in PieWidgetUI, allowing to format percent values [#844](https://github.com/CartoDB/carto-react/pull/844)
+- Fix Snowflake spatial index detection [#845](https://github.com/CartoDB/carto-react/pull/845)
+- Fix TimeSeriesWidgetUI check undefined echart.getInstance().getDom() [#842](https://github.com/CartoDB/carto-react/pull/842)
+- Update MultipleSelectField placeholder text color [#846](https://github.com/CartoDB/carto-react/pull/846)
+
+### 2.3.12 (2024-02-19)
+
+- Fix TimeSeriesContext exports [#840](https://github.com/CartoDB/carto-react/pull/840)
+
+### 2.3.11 (2024-02-13)
+
+- Keyboard accessibility improvements in Widgets and DS components [#835](https://github.com/CartoDB/carto-react/pull/835)
+
 ### 2.3.10 (2024-01-31)
 
 - New DS core component: Autocomplete [#828](https://github.com/CartoDB/carto-react/pull/828)

packages/react-api/package.json

@@ -68,9 +68,9 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
-    "@carto/react-redux": "^2.3.10",
-    "@carto/react-workers": "^2.3.10",
+    "@carto/react-core": "^2.3.11",
+    "@carto/react-redux": "^2.3.11",
+    "@carto/react-workers": "^2.3.11",
     "@deck.gl/carto": "^8.9.18",
     "@deck.gl/core": "^8.9.18",
     "@deck.gl/extensions": "^8.9.18",

packages/react-auth/package.json

@@ -68,7 +68,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
+    "@carto/react-core": "^2.3.11",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"
   }

packages/react-basemaps/package.json

@@ -68,7 +68,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
+    "@carto/react-core": "^2.3.11",
     "@deck.gl/google-maps": "^8.9.18",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"

packages/react-core/__tests__/utils/columns.test.js

@@ -21,14 +21,20 @@ describe('getColumnNameFromGeoColumn', () => {
 describe('getSpatialIndexFromGeoColumn', () => {
   it('detect simple spatial index', () => {
     expect(getSpatialIndexFromGeoColumn('quadbin')).toStrictEqual('quadbin');
+    expect(getSpatialIndexFromGeoColumn('QUADBIN')).toStrictEqual('quadbin');
     expect(getSpatialIndexFromGeoColumn('h3')).toStrictEqual('h3');
+    expect(getSpatialIndexFromGeoColumn('H3')).toStrictEqual('h3');
     expect(getSpatialIndexFromGeoColumn('s2')).toStrictEqual('s2');
+    expect(getSpatialIndexFromGeoColumn('S2')).toStrictEqual('s2');
   });
 
   it('detect prefix spatial index', () => {
     expect(getSpatialIndexFromGeoColumn('quadbin:abc')).toStrictEqual('quadbin');
+    expect(getSpatialIndexFromGeoColumn('QUADBIN:ABC')).toStrictEqual('quadbin');
     expect(getSpatialIndexFromGeoColumn('h3:abc')).toStrictEqual('h3');
+    expect(getSpatialIndexFromGeoColumn('H3:abc')).toStrictEqual('h3');
     expect(getSpatialIndexFromGeoColumn('s2:abc')).toStrictEqual('s2');
+    expect(getSpatialIndexFromGeoColumn('S2:abc')).toStrictEqual('s2');
   });
 
   it('handle unsupported spatial index', () => {

packages/react-core/src/utils/columns.js

@@ -8,7 +8,7 @@ export function getColumnNameFromGeoColumn(geoColumn) {
 export function getSpatialIndexFromGeoColumn(geoColumn) {
   const parts = geoColumn.split(':');
   return (parts.length === 1 || parts.length === 2) &&
-    Object.values(SpatialIndex).includes(parts[0])
-    ? parts[0]
+    Object.values(SpatialIndex).includes(parts[0].toLowerCase())
+    ? parts[0].toLowerCase()
     : null;
 }

packages/react-redux/package.json

@@ -67,8 +67,8 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
-    "@carto/react-workers": "^2.3.10",
+    "@carto/react-core": "^2.3.11",
+    "@carto/react-workers": "^2.3.11",
     "@deck.gl/carto": "^8.9.18",
     "@deck.gl/core": "^8.9.18",
     "@reduxjs/toolkit": "^1.5.0"

packages/react-ui/package.json

@@ -82,7 +82,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
+    "@carto/react-core": "^2.3.11",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@formatjs/intl-localematcher": "^0.4.0",

packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js

@@ -92,7 +92,7 @@ const MultipleSelectField = forwardRef(
         <Typography
           component='span'
           variant={isSmall ? 'body2' : 'body1'}
-          color='textSecondary'
+          color='text.hint'
           ml={paddingSize}
         >
           {placeholder || intlConfig.formatMessage({ id: 'c4r.form.noneSelected' })}

packages/react-ui/src/index.js

@@ -12,11 +12,16 @@ import LegendProportion from './widgets/legend/LegendProportion';
 import LegendRamp from './widgets/legend/LegendRamp';
 import ScatterPlotWidgetUI from './widgets/ScatterPlotWidgetUI/ScatterPlotWidgetUI';
 import TimeSeriesWidgetUI from './widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI';
+import {
+  useTimeSeriesContext,
+  TimeSeriesProvider
+} from './widgets/TimeSeriesWidgetUI/hooks/TimeSeriesContext';
 import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI/FeatureSelectionWidgetUI';
 import FeatureSelectionUIDropdown from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIDropdown';
 import FeatureSelectionUIGeometryChips from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIGeometryChips';
 import FeatureSelectionUIToggleButton from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIToggleButton';
 import RangeWidgetUI from './widgets/RangeWidgetUI/RangeWidgetUI';
+import useTimeSeriesInteractivity from './widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity';
 import ComparativeFormulaWidgetUI from './widgets/comparative/ComparativeFormulaWidgetUI/ComparativeFormulaWidgetUI';
 import ComparativeCategoryWidgetUI from './widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI';
 import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants';
@@ -72,6 +77,9 @@ export {
   FeatureSelectionUIGeometryChips,
   FeatureSelectionUIToggleButton,
   TimeSeriesWidgetUI,
+  useTimeSeriesContext,
+  useTimeSeriesInteractivity,
+  TimeSeriesProvider,
   CHART_TYPES as TIME_SERIES_CHART_TYPES,
   TableWidgetUI,
   LegendWidgetUI,

packages/react-ui/src/types.d.ts

@@ -80,6 +80,7 @@ export type PieWidgetUI = {
   data: PieWidgetUIData;
   formatter?: Function;
   tooltipFormatter?: Function;
+  percentFormatter?: Function;
   height?: string;
   colors?: string[];
   selectedCategories?: string[];

packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js

@@ -49,6 +49,7 @@ function PieWidgetUI({
   data = [],
   formatter,
   tooltipFormatter,
+  percentFormatter,
   height,
   width,
   labels,
@@ -67,7 +68,12 @@ function PieWidgetUI({
   const { showSkeleton } = useSkeleton(isLoading);
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
-
+  const _percentFormatter = useMemo(
+    () =>
+      percentFormatter ||
+      ((v) => `${intl.formatNumber(v, { maximumFractionDigits: 2 })}%`),
+    [intl, percentFormatter]
+  );
   // Tooltip
   const tooltipOptions = useMemo(
     () => ({
@@ -77,14 +83,17 @@ function PieWidgetUI({
       textStyle: { color: theme.palette.common.white },
       confine: true,
       formatter:
-        !!tooltipFormatter && ((params) => tooltipFormatter({ ...params, formatter }))
+        !!tooltipFormatter &&
+        ((params) =>
+          tooltipFormatter({ ...params, formatter, percentFormatter: _percentFormatter }))
     }),
     [
       theme.spacingValue,
       theme.palette.black,
       theme.palette.common.white,
       tooltipFormatter,
-      formatter
+      formatter,
+      _percentFormatter
     ]
   );
 
@@ -233,7 +242,11 @@ function PieWidgetUI({
       )}
 
       <ChartContent height={height} width={width}>
-        <PieCentralText data={processedData} selectedCategories={selectedCategories} />
+        <PieCentralText
+          data={processedData}
+          selectedCategories={selectedCategories}
+          formatter={_percentFormatter}
+        />
 
         <Chart
           option={options}
@@ -281,6 +294,7 @@ PieWidgetUI.propTypes = {
   colors: PropTypes.array,
   formatter: PropTypes.func,
   tooltipFormatter: PropTypes.func,
+  percentFormatter: PropTypes.func,
   height: PropTypes.string,
   width: PropTypes.string,
   animation: PropTypes.bool,
@@ -297,12 +311,12 @@ export default PieWidgetUI;
 // Aux
 function tooltipFormatter(params) {
   const value = processFormatterRes(params.formatter(params.value));
-
+  const percentage = params?.percentFormatter(params.percent) || `${params.percent}%`;
   const markerColor = params.data.color || params.textStyle.color;
   const markerStyle = `display:inline-block;border-radius:4px;width:8px;height:8px;background-color:${markerColor}`;
 
   return `
     <div style="white-space:normal;"><p style="max-width:${CHART_SIZE};font-size:11px;font-weight:500;line-height:1.454;text-transform:uppercase;margin:0 0 4px 0;">${params.name}</p>
-    <p style="display:flex;align-items:center;font-size: 11px;font-weight:500;line-height:1.454;margin:0;"><span style="${markerStyle}"></span> <span style="margin:0 4px;font-weight:400;">${value}</span> (${params.percent}%)</p></div>
+    <p style="display:flex;align-items:center;font-size: 11px;font-weight:500;line-height:1.454;margin:0;"><span style="${markerStyle}"></span> <span style="margin:0 4px;font-weight:400;">${value}</span> (${percentage})</p></div>
   `.trim();
 }

packages/react-ui/src/widgets/PieWidgetUI/components/PieCentralText.js

@@ -29,7 +29,7 @@ const MarkerColor = styled(Box)(({ theme }) => ({
   height: theme.spacing(1)
 }));
 
-function PieCentralText({ data, selectedCategories }) {
+function PieCentralText({ data, selectedCategories, formatter }) {
   const [selectedItem, setSelectedItem] = useState({});
 
   // Select the largest category to display in CentralText and calculate its percentage from the total
@@ -57,11 +57,11 @@ function PieCentralText({ data, selectedCategories }) {
       sumValue += category.value;
     }
 
-    const percentage = calculatePercentage(category.value, sumValue);
+    const percentage = calculatePercentage(category.value, sumValue, formatter);
     category.percentage = percentage;
 
     return category;
-  }, [data, selectedCategories]);
+  }, [data, selectedCategories, formatter]);
 
   useEffect(() => {
     if (topSelectedCategory) {
@@ -96,7 +96,8 @@ PieCentralText.propTypes = {
       color: PropTypes.string
     })
   ),
-  selectedCategories: PropTypes.array
+  selectedCategories: PropTypes.array,
+  formatter: PropTypes.func
 };
 
 export default PieCentralText;

packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js

@@ -248,7 +248,7 @@ export default function TimeSeriesChart({
       return;
     }
 
-    const element = echartsInstance.getDom().parentElement;
+    const element = echartsInstance?.getDom()?.parentElement;
 
     if (!element) return;
 

packages/react-ui/src/widgets/utils/chartUtils.js

@@ -94,11 +94,12 @@ export function findLargestCategory(array) {
 }
 
 // Calculate the percentage of a value in relation to a total
-export function calculatePercentage(value, total) {
-  if (total === 0) {
-    return '0.00%'; // Avoid division by zero
+export function calculatePercentage(value, total, formatter) {
+  let percentage = 0;
+
+  if (total !== 0) {
+    percentage = (value / total) * 100;
   }
 
-  const percentage = ((value / total) * 100).toFixed(2); // Limit to two decimals
-  return `${percentage}%`;
+  return formatter ? formatter(percentage) : `${percentage}%`;
 }

packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js

@@ -128,3 +128,15 @@ CollapseMoreThan12Categories.args = CollapseCategoriesProps;
 export const Loading = LoadingTemplate.bind({});
 const LoadingProps = { data: dataDefault, isLoading: true };
 Loading.args = LoadingProps;
+
+export const CustomPercentFormatter = Template.bind({});
+const CustomPercentFormatterProps = {
+  data: dataDefault,
+  formatter: (v) => `${v} units`,
+  percentFormatter: (v) =>
+    `${Intl.NumberFormat('en', {
+      maximumFractionDigits: 3,
+      minimumFractionDigits: 3
+    }).format(v)}%`
+};
+CustomPercentFormatter.args = CustomPercentFormatterProps;

packages/react-widgets/package.json

@@ -69,11 +69,11 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-api": "^2.3.10",
-    "@carto/react-core": "^2.3.10",
-    "@carto/react-redux": "^2.3.10",
-    "@carto/react-ui": "^2.3.10",
-    "@carto/react-workers": "^2.3.10",
+    "@carto/react-api": "^2.3.11",
+    "@carto/react-core": "^2.3.11",
+    "@carto/react-redux": "^2.3.11",
+    "@carto/react-ui": "^2.3.11",
+    "@carto/react-workers": "^2.3.11",
     "@deck.gl/core": "^8.9.18",
     "@deck.gl/layers": "^8.9.18",
     "@emotion/react": "^11.10.6",