[RFC] Comparative Widgets

[juandjara]

Background

Many projects from PS (Site Selection, Initiative, etc) need the functionality of comparing two or more sets of widgets side to side, comparing data from many different sources in different form and aggregations.

You can check the zeplin designs for projects Site Selection and Initiative to get a grasp on the visual aspect here.

Problem

Implementing his feature right now is not possible without ejecting from the Carto4React widgets UI and models completely and rebuilding them all from scratch. The current widgets available in the Carto4React library do not provide this functionality.

This causes all PS projects that require this functionality to take care of building the whole widget stack from scratch every time. Every time widgets are built according to the project specific use cases and customizations, thus reducing compatiibility of widgets built between project and defeating the purpose of carto4react library of standarization of the carto brand and look and feel across all its related apps and products.

Why do we need that

If carto4react would have a comparative widgets stack, that could be used to share the same implementation across many projects and reduce the time of development for the applications, focussing on providing real value for our customers.

Proposal

The proposed implementation consists on developing new components for the comparative widgets, but only adding the presentation (UI) part.
Developing the logic to extract the data from the models would be left out of the scope of this RFC.

Note: it is important to separate the current single-dataset widget implementation from the comparative widgets implementation in order to avoid breaking changes in the library release proccess. In my opinion, the current UI layer of the widgets provided by the carto4react library are complex enough and we should not add more complexity to them by implementing this feature in the same components. Separating normal single-dataset widgets from multiple-dataset comparative widgets UI layer would provide for a simpler interface, not disrupting the current experience for any user, adding this new feature seamlessly and following good practices of the industry.

Design

The implemented design would be the one from site selection from the first section above.
Here are some code snippets displaying the shape of the new comparative widgets UI layer:

Formula

<MultipleFormulaWidgetUI
  data={[1245, 3435.9]}
  colors={[{ note: palette.comparisonPrimary }, { note: palette.comparisonSecondary }]}
  labels={[{ note: 'reference POI name' }, { note: 'compared POI name' }]}
  formatter={numberFormatter}
  animated={true}
/>

Pie

<MultiplePieWidgetUI
  names={['POI name 1', 'POI name 2']}
  data={[
    [{ name: 'column 1', value: 40 }, { name: 'column 2', value: 60 }],
    [{ name: 'column 1', value: 30 }, { name: 'column 2', value: 70 }],
  ]}
  labels={[['column label 1', 'column label 2'], ['column label 1', 'column label 2']]}
  colors={[['purple', 'green'], ['red', 'orange']]}
/>

Histogram (Bars)

<MultipleHistogramWidgetUI
  data={[[40, 50, 60], [50, 60, 70]]}
  labels={['column label 1', 'column label 2']}
  names={['POI name 1', 'POI name 2']}
  totals={[150, 180]}
  colors={['#f00', '#ff0']}
/>

[aaranadev]

I propose that if the solution is to create a separate component for the comparative mode to avoid breaking changes, it's possible to create new widgets with models for a comparative model too.

This discussion maybe is moved to another issue.

[juandjara]

You can check some example usage here, I'm testing and developing the final components in a branch of carto-react-template before porting them to the carto-react repo

[alasarr]

+1 to this feature.

For me next steps will be:

1. Define the API for all the widgets we've today in a comparative mode. @juandjara can you work on this for all the widgets you want to implement? So we can discuss over your proposal. I prefer the prefix Comparative over Multiple. ComparativeFormulaWidgetUI.
2. Implement a PR per each UI widget. Start first with the formula

For sure we don't want breaking changes, but I think we can discuss it at the PR with the implementation

[juandjara]

Allright @alasarr I have the widgets ready in the branch mencioned before for formula, pie, and category. The only thing left is porting them to c4r and creating a PR for each one. I think the actual BarWidgetUI can be used for comparative mode, but can we discuss that later also

[juandjara]

PR for Comparative Formula Widget UI is ready
#504