When to use Filter Tabs:
– set number of parameters, less than 5
– parameters appear in the same order
– we can show 0 data because of fixed parameters
– initial state can either be just one or all selected
– users deactivate a parameter by clicking on it
When to use Filter Cards:
– flexible amount of parameters
– depending on data, can come in any order
– we don’t show 0 data
– initial state is “show all”
– users can focus on one parameter by clicking on it
General CSS for filter tabs (based on Tabs component for the Line graphs)
max-width: 34%;
}
.graph-legend-color .graph-legend-value {
font-size: 38px;
line-height: 1.4;
}
.graph-legend-color .graph-legend-item-container {
padding-top: 12px;
}
Color tabs: errors
For the tab background we use our light palette with 60% opacity. Hover state has 100% opacity.
The null-state provides user with a clearly different state, supported with the positive icon. The tab is disabled.
Inactive tabs: border-top has 20% opacity on:hover.
CSS for error tabs
.graph-legend-item-errornew:hover,
.graph-legend-item-error400.active,
.graph-legend-item-error400:hover {
background: #fff3f480;
}
.graph-legend-item-errornew:hover,
.graph-legend-item-error400:hover {
border-top-color: #f16b8b16;
}
.graph-legend-item-errornew.active,
.graph-legend-item-error400.active {
border-top-color: #f16b8b;
}
.graph-legend-item-errornew.active:hover,
.graph-legend-item-error400.active:hover {
background: #fff3f4;
}
.graph-legend-item-error500.active,
.graph-legend-item-error500:hover {
background: #c931540f;
}
.graph-legend-item-error500:hover {
border-top-color: #c931540f;
}
.graph-legend-item-error500.active {
border-top-color: #c93154;
}
.graph-legend-item-error500.active:hover {
background: #c931541a;
}
.graph-legend-item-noerrors {
background: #fafcfd;
cursor: default;
}
.graph-legend-item-noerrors .graph-legend-value:after {
content:'';
display: inline-block;
width: 16px;
height: 16px;
background: url(checkmark.svg) no-repeat;
margin-left: 8px;
vertical-align: middle;
}
.graph-legend-item-noerrors .graph-legend-value {
color: #a1b1c1;
font-size: 32px;
line-height: 1.75;
}
Other tabs: warning, positive, neutral
Filter Cards (example, tba)
