cartodb / airship Goto Github PK
View Code? Open in Web Editor NEWA design library for building Location Intelligence applications.
Home Page: https://carto.com/developers/airship/
License: BSD 3-Clause "New" or "Revised" License
A design library for building Location Intelligence applications.
Home Page: https://carto.com/developers/airship/
License: BSD 3-Clause "New" or "Revised" License
I've implemented dropdown in the same they as it was presented in example but it's not working
<Dropdown
action="over"
>
<Dropdown.Trigger>
<Button borderless>
Hover me
</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>
Please describe here below the current result you got
Element is rendered but not reacting to any events
What internet browser (Chrome, Firefox, etc) and version was you using and version
Chrome
"@carto/airship": "^1.0.0-alpha.25"
Button and RadioButton are working
Create a README.md in the styles root folder indicating the rules to follow when programming airship-styles
.
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.
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.
Reference:
Typefont: Roboto, Overpass
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
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
Elements
Nice to have
We are now in an alpha stage, but we need to define how airship is going to be released.
0.0.0-apha-26
just for testingThe 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:
It will be useful to add some informative badges:
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
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:
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.
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?
Update documentation
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.
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.
Add selection capabilities to histogram component, just as we have in category component.
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
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.
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!
(Y axis text should align to the left)
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:
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.
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.
Currently we have the basic lint tasks with #46.
We should review and customize the linting rules at stylelint & tslint
The goal of this issue is to define exactly the behaviour of the toolbar container.
Side toolbar
In mobile breakpoint, the iconbar will be always on top.
Question for @CartoDB/design
Should we use a color from the palette for the background by default? Which one? One of the branding ones?
Reference:
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
Complex components that will be published as Web Components.
Most important ones
Nice to have
Low priority
Please explain here below what you were doing when the issue happened
I was reading the documentation in IE11.
Please break down here below all the needed steps to reproduce the issue
Please describe here below the current result you got
Gauge chart is over the title and description
Please describe here below what should be the expected behaviour
Gauge chart should be at the bottom right of title and description
What internet browser (Chrome, Firefox, etc) and version was you using and version
IE11
Please add any information of interest here below
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.
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.
(Y axis text should align to the left)
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:
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.
clearSelection
When called, the selected range gets reset. Useful for delegating the filtering logic to another component.
rangeSelected
Triggered when the selected range change.
Returns the selected range [min, max]
See Selection section
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.
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.
Please explain here below what you were doing when the issue happened
I was reading the documentation in IE11.
Please break down here below all the needed steps to reproduce the issue
Please describe here below the current result you got
Loader isn't doing the animation
Please describe here below what should be the expected behaviour
Loader should be spinning
What internet browser (Chrome, Firefox, etc) and version was you using and version
IE11
Please add any information of interest here below
Please explain here below what you were doing when the issue happened
I was reading the documentation in IE11.
Please break down here below all the needed steps to reproduce the issue
Please describe here below the current result you got
IE11 shows up multiple circles on the selected radio button
Please describe here below what should be the expected behaviour
It should be showing a single circle inside the selected radio button
What internet browser (Chrome, Firefox, etc) and version was you using and version
IE11
Please add any information of interest here below
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.
clearSelection
When called, the selected range gets reset. Useful for delegating the filtering logic to another component.
categoriesSelected
Triggered when the selected categories change.
Returns the selected categories array.
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.
Other
category is not selectable.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.
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.
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.
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
we can follow:
We need to provide a good method to distribute the library, we want to support:
styles
The current dist folder has folders inside, could we flatten this structure?
Hi.
Is there some "quick start" example integrating Airship and angular 5?
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
lint
lint:fix
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:
To create a framework that achieves both goals we'll use two technologies:
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.
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.
For building the Airship CSS framework, these are the guidelines to follow:
These are common choices in CARTO.
.u-tspace-8
and is-small
, is-caption
for state.BEM
Namespacing
ITCSS
Stylelint
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 ?
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:
Investigate and implement a testing proposal for style/elements
as-button
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
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
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.
toggle
componenttest:unit
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
}
itemSelected
Fires when the user has selected an option from the menu.
Return the { value, text } pair of the selected item.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.