Histogram widget

[ivanmalagon]

Mockup

(Y axis text should align to the left)

Props

Title
The text to show in the title

Description
The description of the histogram.

Show header
If false, title and description are not rendered.

Data
The data to show in the histogram. Format:

{
  start: Number. The starting point of the range
  end: Number. The end point of the range
  value: Number. The value of the bucket
}

The X and Y axis should adapt to this data, being:

• The X axis range from the minimum start point to the maximum end point.
• The Y axis range from 0 (no ocurrences) to the maximum value in data.

Default bar color
This color will be used to draw the bars. It has a default value.

Color range
The color range to apply to the bars. Useful when combined with style metadata. Format:

[
  {
    "min": 9,
    "max": 20,
    "value": "#7F3C8D"
  },
  {
    "min": 20,
    "max": 25,
    "value": "#11A579"
  },
 ...
]

Note that this metadata could not coincide with the data buckets so an interpolation will be needed (just as it happens in Builder)

Show clear button
Boolean. Default: true
If present, it'll show a button when there are any category selected.
The button, when pressed, will clear the selected categories.

Functions

clearSelection
When called, the selected range gets reset. Useful for delegating the filtering logic to another component.

Events

rangeSelected
Triggered when the selected range change.
Returns the selected range [min, max]
See Selection section

Selection behaviour

The devs that used the React implementation of the histogram told us that they were missing the range selection feature in Builder.

One of them indeed did a clever hack using a stacked bar instead of a histogram to be able to paint different colors (grey areas for not selected bins) and a range slider below the stacked bar.

We don't have any mockup for selection in Airship. This is a suggestion based on the customer hack but please @CartoDB/design make your magic!! We need a design for selection in Airship histograms.

Filtering

This API proposal allows two different filtering scenarios:

1. We want to filter as soon as the user clicks on a category.
   In this scenario, we can listen to onCategoriesSelected event, set showClearButton to true and change the source of the dataview instantly (or wait some time).
   As soon as the filtering occurs, the widget will change its categories, keeping the selected ones active.
   The clear button allows us to have an independent filter on this widget and not worry about other widgets.

2. We want to delegate filtering to some other component. For instance, we want an Apply all filters button.
   In this scenario, we can listen to onCategoriesSelected. If triggered, we notify to the filter component that there's been a change so we can activate an Apply all filters button.
   When the user clicks on it, we go to the Category widget, read the selected categories and then do the source changes.
   The clear button is this scenario is optional.

Remarks

• The widget should show a tooltip with the value of the hovered bucket

Questions (@CartoDB/design)

• What process should we apply to color when we hover over the bars? (increase brightness in X, etc)

[rjimenezda]

There's a prop for the color of the bars, but we should also have one called selectedColor for the bars that are selected. Temporarily, I'm using #fabada because that's the best placeholder color.