Mockup
![image](https://user-images.githubusercontent.com/1078228/43150416-270347c8-8f6a-11e8-9045-1f5787b265b0.png)
(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.
![image](https://user-images.githubusercontent.com/1078228/43192055-d6ce9166-8ffc-11e8-9357-b55a6d0fa394.png)
Filtering
This API proposal allows two different filtering scenarios:
-
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.
-
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
![image](https://user-images.githubusercontent.com/1078228/43150540-73b8e80c-8f6a-11e8-9c2c-de775bfdbfa4.png)
Questions (@CartoDB/design)
- What process should we apply to color when we hover over the bars? (increase brightness in X, etc)