Stacked bar 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
Values that will be shown in the widget.

Format:

Array of category objects
[
  {
    category: String. The name of the category i.e. each bar
    values: Object. Each key (String) comes with a numeric value
     {
        key1: value,
        key2: value,
        ...
     }
  },
  ...
]

Example:
  [
    {
      category: 'A New Hope',
      values: {
        investment: 204338075,
        revenue: 359029623
      }
    },
    {
      category: 'The Empire Strikes Back',
      values: {
        investment: 359029623,
        revenue: 236513856
      }
    }
  ]

From this property we can extract all the information needed to draw the chart:

• We can traverse all the values and retrieve all the value keys.
• If a category doesn't have a value key, create one with value 0.
• For each value key, assign a color from the default palette.
• For each value key, assign the value key as its label.

valuesInfo
Info for each value that allows to tweak its representation.
Format:

Object. Each key corresponds to a key on `data`
{
  valueKey1: {
    label: String. The text to show in the legend for this value,
    color: String. The custom color for this value.
  },
  valueKey2: ...
}

Example:
{
  investment: {
    label: 'Investment',
    color: '#FABADA'
  },
  revenue: {
    label: 'Gross Revenue',
    color: '#C00FEE'
  }
}

This property adds on top of the info gathered from data.
If a value has an entry in this object, we overwrite the label and / or color gathered from data.

showLegend
Default: true
If true, show the legend below the graph.

sortByValue
Nice to have.
Boolean. Default: false
If true, the bars are stacked sorted by value. First, the biggest.

Example:

showCategories
Nice to have.
Boolean. Default: false
If true the categories name will be written below each bar. This is only suitable for short strings, that's why this is optional and false by default.

Questions

• What palette do we use by default? @CartoDB/design

[ivanmalagon]

This widget won't be finished during this dev cycle. Putting it off to the next one.

[IagoLast]

@ivanmalagon I got some questions:

• What are the default colors? how are they applied?
• Is the legend located on top or bottom?
• What about x label? is not defined in the design but I guess we are going to need it.
  • At the moment there will not be x-label since showCategories option will be disabled