Comparative Formula Widget

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 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)
 
 ## 1.5
 

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

@@ -22,6 +22,7 @@ import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants';
 import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI';
 import NoDataAlert from './widgets/NoDataAlert';
 import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI';
+import ComparativeFormulaWidgetUI from './widgets/ComparativeFormulaWidgetUI';
 
 export {
   cartoThemeOptions,
@@ -42,6 +43,7 @@ export {
   TableWidgetUI,
   LegendWidgetUI,
   RangeWidgetUI,
+  ComparativeFormulaWidgetUI,
   LEGEND_TYPES,
   NoDataAlert,
   LegendCategories,

packages/react-ui/src/index.js

@@ -14,6 +14,7 @@ import ScatterPlotWidgetUI from './widgets/ScatterPlotWidgetUI';
 import TimeSeriesWidgetUI from './widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI';
 import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI';
 import RangeWidgetUI from './widgets/RangeWidgetUI';
+import ComparativeFormulaWidgetUI from './widgets/ComparativeFormulaWidgetUI';
 import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants';
 import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI';
 import NoDataAlert from './widgets/NoDataAlert';
@@ -42,6 +43,7 @@ export {
   ScatterPlotWidgetUI,
   TimeSeriesWidgetUI,
   FeatureSelectionWidgetUI,
+  ComparativeFormulaWidgetUI,
   CHART_TYPES as TIME_SERIES_CHART_TYPES,
   TableWidgetUI,
   LegendWidgetUI,

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

@@ -201,3 +201,24 @@ export type AnimatedNumber = {
   options?: AnimationOptions;
   formatter: (n: number) => React.ReactNode;
 };
+
+export type FormulaLabels = {
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  note?: React.ReactNode;
+};
+
+export type FormulaColors = {
+  [key in keyof FormulaLabels]?: string;
+} & {
+  value?: string;
+};
+
+export type ComparativeFormulaWidgetUI = {
+  data: number[];
+  labels?: FormulaLabels[];
+  colors?: FormulaColors[];
+  animated?: boolean;
+  animationOptions?: AnimationOptions;
+  formatter?: (n: number) => React.ReactNode;
+};

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

@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, makeStyles, Typography } from '@material-ui/core';
+import { useTheme } from '@material-ui/core';
+import AnimatedNumber, {
+  animationOptionsPropTypes
+} from '../custom-components/AnimatedNumber';
+
+const IDENTITY_FN = (v) => v;
+const EMPTY_ARRAY = [];
+
+const useStyles = makeStyles((theme) => ({
+  formulaGroup: {
+    '& + $formulaGroup': {
+      marginTop: theme.spacing(2)
+    }
+  },
+  firstLine: {
+    margin: 0,
+    ...theme.typography.h5,
+    fontWeight: Number(theme.typography.fontWeightMedium),
+    color: theme.palette.text.primary,
+    display: 'flex'
+  },
+  unit: {
+    marginLeft: theme.spacing(0.5)
+  },
+  unitBefore: {
+    marginLeft: 0,
+    marginRight: theme.spacing(0.5)
+  },
+  note: {
+    display: 'inline-block',
+    marginTop: theme.spacing(0.5)
+  }
+}));
+
+/**
+ * Renders a `<ComparativeFormulaWidgetUI />` widget
+ * <!--
+ * @param {Object} props
+ * @param {number[]} props.data
+ * @param {{ prefix?: string; suffix?: string; note?: string }[]} [props.labels]
+ * @param {{ prefix?: string; suffix?: string; note?: string; value?: string }[]} [props.colors]
+ * @param {boolean} [props.animated]
+ * @param {{ duration?: number; animateOnMount?: boolean; initialValue?: number; }} [props.animationOptions]
+ * @param {(v: number) => React.ReactNode} [props.formatter]
+ * -->
+ */
+function ComparativeFormulaWidgetUI({
+  data = EMPTY_ARRAY,
+  labels = EMPTY_ARRAY,
+  colors = EMPTY_ARRAY,
+  animated = true,
+  animationOptions,
+  formatter = IDENTITY_FN
+}) {
+  const theme = useTheme();
+  const classes = useStyles();
+
+  function getColor(index) {
+    return colors[index] || {};
+  }
+  function getLabel(index) {
+    return labels[index] || {};
+  }
+
+  return (
+    <div>
+      {data
+        .filter((n) => n !== undefined)
+        .map((d, i) => (
+          <div className={classes.formulaGroup} key={i}>
+            <div className={classes.firstLine}>
+              {getLabel(i).prefix ? (
+                <Box color={getColor(i).prefix || theme.palette.text.secondary}>
+                  <Typography
+                    color='inherit'
+                    component='span'
+                    variant='subtitle2'
+                    className={[classes.unit, classes.unitBefore].join(' ')}
+                  >
+                    {getLabel(i).prefix}
+                  </Typography>
+                </Box>
+              ) : null}
+              <Box color={getColor(i).value}>
+                <AnimatedNumber
+                  value={d || 0}
+                  enabled={animated}
+                  options={animationOptions}
+                  formatter={formatter}
+                />
+              </Box>
+              {getLabel(i).suffix ? (
+                <Box color={getColor(i).suffix || theme.palette.text.secondary}>
+                  <Typography
+                    color='inherit'
+                    component='span'
+                    variant='subtitle2'
+                    className={classes.unit}
+                  >
+                    {getLabel(i).suffix}
+                  </Typography>
+                </Box>
+              ) : null}
+            </div>
+            {getLabel(i).note ? (
+              <Box color={getColor(i).note}>
+                <Typography className={classes.note} color='inherit' variant='caption'>
+                  {getLabel(i).note}
+                </Typography>
+              </Box>
+            ) : null}
+          </div>
+        ))}
+    </div>
+  );
+}
+
+ComparativeFormulaWidgetUI.displayName = 'ComparativeFormulaWidgetUI';
+ComparativeFormulaWidgetUI.defaultProps = {
+  data: EMPTY_ARRAY,
+  labels: EMPTY_ARRAY,
+  colors: EMPTY_ARRAY,
+  animated: true,
+  animationOptions: {},
+  formatter: IDENTITY_FN
+};
+
+const formulaLabelsPropTypes = PropTypes.shape({
+  prefix: PropTypes.string,
+  suffix: PropTypes.string,
+  note: PropTypes.string
+});
+
+const formulaColorsPropTypes = PropTypes.shape({
+  prefix: PropTypes.string,
+  suffix: PropTypes.string,
+  note: PropTypes.string,
+  value: PropTypes.string
+});
+
+ComparativeFormulaWidgetUI.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.number).isRequired,
+  labels: PropTypes.arrayOf(formulaLabelsPropTypes),
+  colors: PropTypes.arrayOf(formulaColorsPropTypes),
+  animated: PropTypes.bool,
+  animationOptions: animationOptionsPropTypes,
+  formatter: PropTypes.func
+};
+
+export default ComparativeFormulaWidgetUI;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import ComparativeFormulaWidgetUI from '../../../src/widgets/ComparativeFormulaWidgetUI';
+import { buildReactPropsAsString } from '../../utils'
+
+const options = {
+  title: 'Custom Components/ComparativeFormulaWidgetUI',
+  component: ComparativeFormulaWidgetUI
+};
+
+export default options;
+
+const Template = (args) => <ComparativeFormulaWidgetUI {...args} />;
+const sampleProps = {
+  data: [1245, 3435.9],
+  labels: [
+    { prefix: '$', suffix: ' sales', note: 'label 1' },
+    { prefix: '$', suffix: ' sales', note: 'label 2' }
+  ],
+  colors: [{ note: '#ff9900' }, { note: '#6732a8' }]
+};
+
+export const Default = Template.bind({});
+Default.args = sampleProps;
+Default.parameters = buildReactPropsAsString(sampleProps, 'ComparativeFormulaWidgetUI');