Comparative Category Widget

CHANGELOG.md

@@ -2,8 +2,9 @@
 
 ## Not released
 
-- AnimatedNumber component with hook wrapping `animateValue` [#509](https://github.com/CartoDB/carto-react/pull/509)
 - Implement ComparativeFormulaWidgetUI [#504](https://github.com/CartoDB/carto-react/pull/504)
+- Implement ComparativeCategoryWidgetUI [#505](https://github.com/CartoDB/carto-react/pull/505)
+- AnimatedNumber component with hook wrapping `animateValue` [#509](https://github.com/CartoDB/carto-react/pull/509)
 
 ## 1.5
 

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

@@ -23,6 +23,7 @@ import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI';
 import NoDataAlert from './widgets/NoDataAlert';
 import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI';
 import ComparativeFormulaWidgetUI from './widgets/ComparativeFormulaWidgetUI';
+import ComparativeCategoryWidgetUI, { ORDER_TYPES } from './widgets/ComparativeCategoryWidgetUI';
 
 export {
   cartoThemeOptions,
@@ -39,11 +40,13 @@ export {
   useTimeSeriesInteractivity,
   TimeSeriesProvider,
   CHART_TYPES as TIME_SERIES_CHART_TYPES,
-  FeatureSelectionWidgetUI,
   TableWidgetUI,
   LegendWidgetUI,
   RangeWidgetUI,
+  FeatureSelectionWidgetUI,
   ComparativeFormulaWidgetUI,
+  ComparativeCategoryWidgetUI,
+  ORDER_TYPES as CATEGORY_ORDER_TYPES,
   LEGEND_TYPES,
   NoDataAlert,
   LegendCategories,

packages/react-ui/src/index.js

@@ -15,6 +15,9 @@ import TimeSeriesWidgetUI from './widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI'
 import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI';
 import RangeWidgetUI from './widgets/RangeWidgetUI';
 import ComparativeFormulaWidgetUI from './widgets/ComparativeFormulaWidgetUI';
+import ComparativeCategoryWidgetUI, {
+  ORDER_TYPES
+} from './widgets/ComparativeCategoryWidgetUI';
 import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants';
 import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI';
 import NoDataAlert from './widgets/NoDataAlert';
@@ -41,13 +44,15 @@ export {
   BarWidgetUI,
   PieWidgetUI,
   ScatterPlotWidgetUI,
-  TimeSeriesWidgetUI,
   FeatureSelectionWidgetUI,
-  ComparativeFormulaWidgetUI,
+  TimeSeriesWidgetUI,
   CHART_TYPES as TIME_SERIES_CHART_TYPES,
   TableWidgetUI,
   LegendWidgetUI,
   RangeWidgetUI,
+  ComparativeFormulaWidgetUI,
+  ComparativeCategoryWidgetUI,
+  ORDER_TYPES as CATEGORY_ORDER_TYPES,
   LEGEND_TYPES,
   NoDataAlert,
   featureSelectionIcons,

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

@@ -222,3 +222,29 @@ export type ComparativeFormulaWidgetUI = {
   animationOptions?: AnimationOptions;
   formatter?: (n: number) => React.ReactNode;
 };
+
+export enum ORDER_TYPES {
+  RANKING = 'ranking',
+  FIXED = 'fixed',
+}
+
+type CategoryData = {
+  name: string;
+  value: number;
+};
+
+export type ComparativeCategoryWidgetUI = {
+  names: string[];
+  data: CategoryData[][];
+  labels?: string[];
+  colors?: string[];
+  maxItems?: number;
+  order?: ORDER_TYPES;
+  animation?: boolean;
+  animationOptions?: AnimationOptions;
+  searchable?: boolean;
+  filterable?: boolean;
+  selectedCategories?: string[];
+  onSelectedCategoriesChange?: (categories: string[]) => any;
+  formatter?: (v: any) => string;
+};