cartodb / airship

A design library for building Location Intelligence applications.

[DEPRECATED]

Hey! This content applies only to previous CARTO products.

Please check if it's relevant to your use case. On October 2021 we released the current version of our platform. You can learn more and read the latest documentation at docs.carto.com

What is CARTO?

CARTO is an open, powerful, and intuitive platform for discovering and predicting the key insights underlying the location data in our world.

Empower organizations to optimize operational performance, strategic investments, and everyday decisions with CARTO Engine—our embeddable platform for web and mobile apps—and the new CARTO Builder, a drag and drop analysis tool.

It was built to make it easier for people to tell their stories by providing them with flexible and intuitive ways to create maps and design geospatial applications. CARTO can be installed on your own server and we also offer a hosted service at carto.com.

If you would like to see some live demos, check out our videos on Vimeo. We hope you like it!

What can I do with CARTO?

With CARTO, you can upload your geospatial data (Shapefiles, GeoJSON, etc) using a web form and then make it public or private.

After it is uploaded, you can visualize it in a dataset or on a map, search it using SQL, and apply map styles using CartoCSS. You can even access it using the CARTO APIs, or export it to a file.

In other words, with CARTO you can make awesome maps and build powerful geospatial applications! Definitely check out the CARTO Platform for interactive examples and code.

Installing

Read the installation guide in CARTO developers documentation

How do I upgrade CARTO?

See UPGRADE for instructions about upgrading CARTO.

For upgrade of Windshaft-CartoDB and CartoDB-SQL-API see the relative documentation.

Developing & Contributing to CARTO

See our contributing doc for how you can improve CARTO, but you will need to sign a Contributor License Agreement (CLA) before making a submission, learn more here.

Testing

Check the testing doc section.

Requirements

CARTO works in any modern browser, but if you want more info:

31+ ✔	38+ ✔	11+ ✔	31+ ✔	8+ ✔

airship's Issues

Radio button has multiple circles inside it on IE11

Context

Please explain here below what you were doing when the issue happened
I was reading the documentation in IE11.

Steps to Reproduce

Please break down here below all the needed steps to reproduce the issue

1. Open IE11
2. Go to https://carto-airship.netlify.com/#/components/radiobutton

Current Result

Please describe here below the current result you got
IE11 shows up multiple circles on the selected radio button

Expected result

Please describe here below what should be the expected behaviour
It should be showing a single circle inside the selected radio button

Browser and version

What internet browser (Chrome, Firefox, etc) and version was you using and version
IE11

Additional info

Please add any information of interest here below

Layout containers: toolbar

Goal

The goal of this issue is to define exactly the behaviour of the toolbar container.

Mockups

Side toolbar

Top toolbar

Characteristics:

• Different positions:
  • Top
  • Right
  • Left

Responsive

In mobile breakpoint, the iconbar will be always on top.

Colors

Question for @CartoDB/design

Should we use a color from the palette for the background by default? Which one? One of the branding ones?

Range slider widget

A component that allows users to input numeric values within a range by dragging its sliders.

The React component done in our first iteration is great so please refer also to its documentation.

Inspired by the React component, I'll proceed to copypaste here the API.

Props

maxValue
Number.
The top limit of the range. You cannot drag your slider beyond this value. By default the value is 10.

minValue
Number
The bottom limit of the range. You cannot drag your slider under this value. By default the value is 0.

value
Number
The initial value. By default the value is 0 or the minValue.

disabled
Boolean
To get the component disabled.

name
String
In order to make the component accesible, it creates hidden inputs underneath when you pass a name property.

step
Number
The default increment/decrement of your component is 1. You can change that by setting a different number to this property.

draggable
Boolean
If this property is set to true, and it has multiple value, you can drag the entire track.

formatLabel
Number
By default, value labels are displayed as plain numbers. If you want to change the display, you can do so by passing in a function.

Callbacks

changeStart
Triggered when the user starts dragging a slider. Return the current range.

change
Triggered when the user is dragging a slider. Return the current range.

changeEnd
Triggered when the user ends dragging a slider. Return the current range.

Questions

• I miss in the React docs, how can I set the slider to one or two draggable balls :raur: ? @rubenmoya

Add interactivity to histogram component

Context

Add selection capabilities to histogram component, just as we have in category component.

To do

• Add a event handler to notify of bin selection: for instance, add a onBinClick function that returns the selected bin(s) data.

• Add a selected prop to highlight visually a particular bin(s). Accept an array of indexes.

• Update documentation

Food for thought

What happens if we have a selection but the input data changes? We've faced this problem in Builder before and it doesn't have a proper solution. Anyway, it's out of scope for this issue but we need to keep it in mind.

Category widget

Mockup

Props

Title
The text to show in the title

Description
The description text of the widget

Show header
If false, Title and description are not rendered

Categories
The categories to show in the widget. The expected object is:

{
  name: String. The name of the category,
  value: Number. The number to show along with the category.
  color: String. The color for rendering the category bar. If not present, the default bar color is used.
}

Selected categories
The categories that are selected.
Format: strings array.

Note: this should be exposed also as a getter. From the outside we need to have access to the selected categories.

Use total percentage
If true, we use the total sum of all categories (including others) to render the % in each bar.
If no, we use the max category value to render the %.
Default: false

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

Show clear button
Boolean.
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

categoriesSelected
Triggered when the selected categories change.
Returns the selected categories array.

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

• Other category is not selectable.

Positioning v1

Another thing to take into account in Airship is positioning elements.

In this document there are a collection of screenshots of custom applications. As you can see, there are no so many different patterns so special position styles won't be needed for all elements. Most elements are just block ones. We don't need a complex grid system like in Bootstrap, for instance.

General guidelines

Remember the grid
In Airship we follow a visual grid system of multiples of 4px.

Keep it simple
As stated above, there's no need for a complex grid system (apparently). Most of the elements won't need a special treatment for positioning.

In a first look, a simple positioning system based on flexbox is enough. It's usual in Carto to offer a series of utility functions for this kind of work.

I'm thinking on something like

<div class="as-row">
    <div> // All this content will go the left
        <div ...>
    </div>
    <div>..</div> // This content will go to the right
</div>

being the style

.as-row {
    display: flex;
    justify-content: space-between;
}

Something simple.

Layout containers definition

For Airship v1.0, we aim to provide common layouts for LI apps. The goal of this issue is to define what containers should be included in the v1.0 release and its behaviour.

• Toolbar #47
• Sidebar #49
• Bottom bar #56
• Floating containers #60
• Infowindow #78

Modify airship theme

I'm currently using Airship with React and I'd like to know if there's a way to modify the theme colors.

I'm using Range component and I'd like to have it in another color but I'm not sure how to modify the theme since I only have the dist directory.

v1 project setting

Context

Airship v1 changes its approach from the alpha version. Our first attempt was to provide a component library in React. We're changing that since we've seen that doesn't answer well our partner / customer needs.

The main guidelines for Airship v1 are:

• Aimed to design the whole application.
• Framework agnostic.
• Provide scaffolds for the most common LI apps patterns.

To create a framework that achieves both goals we'll use two technologies:

• A CSS framework to style the whole application.
• A series of Web Components for complex widgets.

The CSS framework will allow our users to use our styles and layouts independently from the JS framework they use. The Web Components can be used integrated with different frameworks.

The first task is to set up the project for the right development of the project.

Setting the project up

For setting the project successfully all the following tasks should be tackled. In case it's needed, we'll create separated issues to provide more detail. Take this as an outline.

• Repository tasks: like moving current branch to a frozen one. Master branch should start with a blank slate. Pending PRs, issues... should be frozen as well.

• Build process: set up the build system to be able to develop / create a distribution.

• Stencil: set up Stencil within the project and build system to be able to develop web components.

• Linting: stylelint & tslint

• Testing: set up testing structure, both for style and webcomponents.

• CI: set up the CI pipeline in Github.

• Docs: set up the structure to build the needed documentation.
  We'll use Catalog to document prior to think on the Developer Portal.

• Release: set up the process to release the library (NPM, CDN, ...)

• Style guidelines: set the guidelines and methodologies to tackle the CSS framework.

Basic CSS: icons

Reference:

• https://projects.invisionapp.com/share/3REYL6RJK#/screens/269307387

Gauge chart over title and description on IE11

Context

Please explain here below what you were doing when the issue happened
I was reading the documentation in IE11.

Steps to Reproduce

Please break down here below all the needed steps to reproduce the issue

1. Open IE11
2. Go to https://carto-airship.netlify.com/#/components/gaugechart

Current Result

Please describe here below the current result you got
Gauge chart is over the title and description

Expected result

Please describe here below what should be the expected behaviour
Gauge chart should be at the bottom right of title and description

Browser and version

What internet browser (Chrome, Firefox, etc) and version was you using and version
IE11

Additional info

Please add any information of interest here below

Histogram widget

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)

Add badges to README.md

It will be useful to add some informative badges:

• CircleCI
• npm packages

Range component value does not update when state changes (no synch between state and value)

Hi there,
I believe there is a lack of synchronization between the state and the value in the AirShip Range component. For a better comprehension of the problem, I modified this codesandbox. So I put a button close Range div, any time you click, the state changes and then the text and the zoom level update properly however the Range keeps invariable.

Any thoughts?
Rafael

Basic Style Testing

Summary

Investigate and implement a testing proposal for style/elements

• Implement a dummy element as-button
• Create an automated test
• Pass the test

Component Showcase

Summary

We need a place to showcase all Airship components, including all the possible variants of the components. It can serve as a development tool, because it will include the components bundle as well as the styles.

Examples using Airship in angular 5

Hi.
Is there some "quick start" example integrating Airship and angular 5?

Widgets

Complex components that will be published as Web Components.

Most important ones

• Category #90
• Histogram #91
• Range slider #94
• Infowindow
• Application content
• Dropdown #89
• Stacked bar #93

Nice to have

• Animated text ?? (For formula)
• DatePicker
• Legends: check old ticket about legends
  • https://github.com/CartoDB/product/issues/35
  • CartoDB/cartodb#10493

Low priority

• Gauge chart
• Donut
• Line chart

Elements CSS

We have to implement the basic elements of the Airship framework. Please use as reference https://projects.invisionapp.com/share/3REYL6RJK

These elements will be built using only CSS. For most complex elements we'll create Custom Elements.

If you find that any them that can't be built only with CSS, please give the team a heads up.

Basic CSS

• Colors #75
• Typography #76
  • Jumbo
  • Display
  • Title (normal / bold)
  • Subheader (normal / bold / mono)
  • Body (normal / bold / mono)
  • Caption (normal / bold / mono)
• List #76
  • Bulleted
  • Numbered
• Icons #77

Elements

• Buttons
• Inputs, textarea
• Checkbox
• Radio buttons
• Tabs (WC?)
• Banner
• Flags
• Avatar
• Tooltips
• Breadcrumbs
• Menu dropdown (perhaps we can reuse dropdown style. Create a WC as well?)
• Badges
• Switch (should we create a WC also?)
• Loading (global, block, title)

Nice to have

• Table

Grid component does not allow change the CSS Grid parameters

According to the code defined here

The width of the grid has 1 static value and can't be use to change the parameters of the CSS Grid like grid-template-columns, this constraints a lot the usage of the Grid component, due to it is not possible to make the Grid responsive or customize the Grid in further ways

cc @rubenmoya @piensaenpixel

Loading element's animation isn't working on IE11

Context

Please explain here below what you were doing when the issue happened
I was reading the documentation in IE11.

Steps to Reproduce

Please break down here below all the needed steps to reproduce the issue

1. Open IE11
2. Go to https://carto-airship.netlify.com/#/components/loading

Current Result

Please describe here below the current result you got
Loader isn't doing the animation

Expected result

Please describe here below what should be the expected behaviour
Loader should be spinning

Browser and version

What internet browser (Chrome, Firefox, etc) and version was you using and version
IE11

Additional info

Please add any information of interest here below

Add dependencies on the documentation of airship

We would need to indicate in the documentation the dependencies prop-types and styled-components, due to npm is not downloading them when downloading airship through the next command and this might lead to confusion when setting up the environment.

npm install --save @carto/airship

cc @rubenmoya @piensaenpixel

Link to documentation in README is "emtpy"

There's a link in the README that should point to the documentation but right now is pointing to #:

For a more detailed usage guide check out our documentation.

Dropdown not working

Context

I've implemented dropdown in the same they as it was presented in example but it's not working

Steps to Reproduce

1. create-react-app

<Dropdown
 action="over"
>
 <Dropdown.Trigger>
   <Button borderless>
     Hover me&nbsp;
   </Button>
 </Dropdown.Trigger>
 <Dropdown.Content>
   <Dropdown.Menu>
      <Dropdown.Item>Image</Dropdown.Item>
      <Dropdown.Item>Video</Dropdown.Item>
      <Dropdown.Item>None</Dropdown.Item>
   </Dropdown.Menu>
 </Dropdown.Content>
</Dropdown>

Current Result

Please describe here below the current result you got
Element is rendered but not reacting to any events

Browser and version

What internet browser (Chrome, Firefox, etc) and version was you using and version
Chrome
"@carto/airship": "^1.0.0-alpha.25"

Additional info

Button and RadioButton are working

Layout containers: Infowindow container

Mockups

Characteristics

Width: 260px

Content can be layed out using the CSS built on #40

Setup a changelog

I suggest using https://conventionalcommits.org/ and https://github.com/conventional-changelog/conventional-changelog.

Histogram component to contain only numeric data

Context

Our current histogram implementation is in reality a Bar chart. Histograms are a representation of the distribution of numerical data.

To reflect its authentic nature we need to make several changes:

Input data

Histogram component need to accept as data an array of buckets with this info:

data: [{
  start: number, // The lower limit of the bin
  end: number, // The upper limit of the bin
  value: number // To value represented in the bin
}]

The validations to do are to check that everything is a number.

X axis

Initial feedback is telling us that people want to see the X axis values. Taking a similar one designed in Airship sketch as an example.

From that design, I assume that there's no vertical lines in Airship design.

Are you ok with this, @urbanphes ? Drawing x axis values and not showing vertical lines. If not, can you provide us with an example?

Documentation

Update documentation

Extra ball: bar chart

Since we're getting rid of the histogram component as a bar chart, can we use the current StackedBar as a replacement, @rubenmoya ?

I mean, using it with only one category would behave as the current histogram, right? If so, we can create a component called Bar chart and extend it to Stacked Bar chart.

Basic CSS: typography

Reference:

• https://projects.invisionapp.com/share/3REYL6RJK#/screens/269307387

TYPOGRAPHY

Typefont: Roboto, Overpass

Jumbo

Display

Title (Regular / Medium)

Subheader (Regular / Medium / Mono)

Body (Regular / Medium / Mono)

Caption (Regular / Medium / Mono)

Lists

Layout containers: bottom bar

Mockups

Characteristics

• Should adapt to content but with a max-height.
  As we can see in the two screenshots, one of them has a lot more height than the other.
  Users must be conscious of the available space. In Builder we control exactly the height of the components allocated in the bottom bar. In Airship we cannot foresee what will be included here so we must discourage putting to much vertical content here somehow (via overflow-y: hidden, for instance)

Responsive

• Should have a class to move the bar off-canvas. Depending on the answer to #49 (comment) we can use the same solution.

Containers v1

After general layout, the next layout level to think of is subcontainers.

In this document there are several common patterns in custom applications / solutions. As you can see, most of them are "boxes" stacked vertically.

Tasks

• Define styles for boxes that gather similar content together.
• Define styles for a scrollable container. Like we already have in Widget container in Builder.

Component programming styleguide

we can follow:

https://stenciljs.com/docs/style-guide

TsLinting errors wont make Lerna fail

When you run npm run lint on the top level and tslint detects some error the lerna returns a success status.

This should fail instead

> lerna run lint

lerna info version 2.11.0

> @carto/[email protected] lint /Users/iago/Workspace/airship/packages/styles
> stylelint 'src/**/*.scss'


> @carto/[email protected] lint /Users/iago/Workspace/airship/packages/components
> npm run lint:ts & npm run lint:css


> @carto/[email protected] lint:ts /Users/iago/Workspace/airship/packages/components
> tslint -c tslint.json src/**/*.tsx src/**/*.ts


> @carto/[email protected] lint:css /Users/iago/Workspace/airship/packages/components
> stylelint 'src/components/**/*.scss'


ERROR: src/components/as-switch/as-switch.tsx[5, 3]: The key 'styleUrl' is not sorted alphabetically
ERROR: src/components/as-switch/as-switch.tsx[5, 12]: missing whitespace
ERROR: src/components/as-switch/as-switch.tsx[14, 21]: " should be '
ERROR: src/components/as-switch/as-switch.tsx[15, 21]: " should be '

lerna success run Ran npm script 'lint' in packages:
lerna success - @carto/airship-components
lerna success - @carto/airship-style

Tslint inconsistency with vscode linter

In vscode im Getting the following error:

while tslint output wont warn about this.

It also happens with unused variables :S

Basic Component Testing

Summary

We need to find a way to test web components. In this issue, the idea is to tackle unit testing by configuring the system provided by stencil.

• Implement a basic unit test for the toggle component
• Pass the test
• Add a lerna command to run the unit tests test:unit

Setup Library distribution

Summary

We need to provide a good method to distribute the library, we want to support:

• Include all elements from CDN
• Include a single element from CDN
• Include all elements from build system
  • Webpack
  • Sass
• Include a single element from build system
  • Webpack
  • Sass
• Create a demo component including styles from styles
• Include Component from CDN
• Use Lerna to easy package management
• Include Component from Webpack
• Component customization

Open questions

The current dist folder has folders inside, could we flatten this structure?

Layout containers: sidebar

Mockups

XXL

Characteristics

• Two versions:
  • XL: like the one in the Reveal mockup.
  • L: 360px.
  • Standard: 260px.

Responsive

In mobile, the sidebar should be off-canvas and show a hamburguer menu to show it

The problem here is that this needs JS to solve this problem and to hide / show the canvas. CSS-only solutions are a bit cumbersome in this case.

Furthermore, what happens when we combine a top toolbar with a sidebar in mobile? The logic changes and, again, a CSS-only solution it's not possible. Or at least easy.

We have two options to solve this problem:

• Offer a Web Component that handles all this logic and combinations.
• Solve the different combinations of layouts via examples / scaffold. That is, we don't provide the solution to this problem in Airship but in a implementation that uses Airship.

Customize linting rules

Context

Currently we have the basic lint tasks with #46.
We should review and customize the linting rules at stylelint & tslint

Styles programming guidelines

Create a README.md in the styles root folder indicating the rules to follow when programming airship-styles.

Style framework guidelines

For building the Airship CSS framework, these are the guidelines to follow:

• Sass preprocessor.
• BEM methodology.
• Namespacing: for utilities, state classes and JS hooks.
• ITCSS architecture.
• Stylelint.

These are common choices in CARTO.

• Sass preprocessor: used in Builder and Hangar.
• BEM methodology: we've tried to follow it but we are not consistent. Let's do it better this time. You can see it being used in Hangar
• Namespacing for utilities: used in Builder and Hangar. For instance, for positioning we use .u-tspace-8 and is-small, is-caption for state.
• ITCSS: suggested by @elenatorro Let's give it a try.
• Stylelint: used in Builder CI.

Links

BEM

• BEM introduction
• BEM by example
• BEM 10 common problems

Namespacing

• Writing modular CSS - namespaces Utilities and state applies.

ITCSS

• Building a maintainable and scalable CSS with ITCSS
• CSS at Trivago
• CSS at Trivago 2

Stylelint

• We're using stylelint-config-standard and stylelint-config-property-sort-order-smacss. Study if there's more config that can helps us with BEM or ITCSS.

Any thoughts @piensaenpixel ?

Layout containers: floating containers

Mockups

Characteristics

• Different positions: four corners
• Horizontal / vertical growth
  • In the example the top-left containers are expanding horizontally and the top-right ones are expanding vertically.
• Sizes:
  • 300 px
  • 232 px
  • 168 px

Responsive

Responsive here is a tough one as well. The solution proposed by Design is the same that we have now in Builder. Showing a tab bar to choose between the map and all the legends, rendered all of them in a full panel. That forces us to have a markup like this:

<div id="map-container">
  <div id="map"></div>
  <div id="legends">
    <div class="legend is-top"></div>
    <div class="legend is-right"></div>
  </div>
</div>

It's possible that a CSS-only solution can be made but not with the tabs, but showing an icon that, when pressed, shows the whole container. What do you think, @CartoDB/design ?

If it's not the desired solution and we go for the tabs, that should be solved at scaffold level, via example. We don't provide the solution out-of-the-box in Airship but in an example using Airship.

Setup Linting

• Configure stylelint for elements
• Configure tslint for components
• Configure stylelint for components
• Add a lerna command lint
• Add a lerna command lint:fix

Configure CI

Summary

Configure CircleCI to run:

• linter
• tests for components
• test for styles

This depends on #46 #51 #52

Dropdown widget

Mockup

Props

Placeholder
Text to show when no option has been chosen yet.

Disabled
Indicates if the dropdown is disabled. Reflect UI accordingly.

Options
Options to show in the dropdown contextual menu.
Format:

{
  value: the key of the option,
  text: string to show to the user as option
}

Events

itemSelected
Fires when the user has selected an option from the menu.
Return the { value, text } pair of the selected item.

Range component implementation on a legend

Hi there, I'm trying to implement the Range airship component into a legend to change a layer transparency value. Also I'm using the 'react-leaflet-control' extension to render components in the map container.
The problem is I can see the Range component, but I can't drag the slider. I suspect it's because of the mouse over Propagation 'react-leaflet-control' has already implement.

If I put the Range component on a regular DIV (without 'react-leaflet-control') then I can drag both, slider and map, as a block In this specific case, I'd need to disable the propagation.

Can you please take a look at this behavior? Maybe by using props to enable or disable propagation would be great.

Thx!

Basic CSS: colors

Reference:

• https://projects.invisionapp.com/share/3REYL6RJK#/screens/269307387

COLORS

Airship comes with the following color palette:

Brand colors
01: #1785FB
02: #0F2D53
03: #47DB99

Type colors
01: #2C2C2C
02: #747474
03: #BABABA
04: #FFFFFF

UI colors
01: #FFFFFF
02: #F5F5F5
03: #E2E6E3
04: #D1D5D7

Support colors
01: #F3522B
02: #FDB32B
03: #80B622

Stacked bar widget

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

Release process

We are now in an alpha stage, but we need to define how airship is going to be released.

• Discuss about versioning
• Release a 0.0.0-apha-26 just for testing

Tslint not working

Our current linting task only lints .ts files

"lint:ts": "tslint -c tslint.json 'src/**/*.ts'",

but we got .tsx files so is not working

Possible Enhancement Request For Airship-Gauge Chart

Context

Please explain here below what you were doing when the issue happened
Working with the Carto-Airship Gauge component, I was hoping for a starter value to be introduce for easier display of Negative numbers visually.

The Gauge is always starting from the left to right. If a starting value is introduced, perhaps it can start from the center and move Either Left or Right, depending on the Value property being a positive or negative number.

Setup a script to generate and download image references from CircleCI

The visual regression references should be generated in the CI environment.

Currently, the way to go is to upload the code, run the CI with ssh and manually download the references using scp.

We need to improve this process. Some suggestions:

• Create a script that can be run on the CI which generates the references and creates a new PR/commit with them.
• Create a script to easy scp the references from the CI and manually add the new references to the repo