Filter tabs and cards

Filter Tabs and Filter Cards are used to filter the information displayed in the tables. They are bigger than tabs used in charts to create a visible summary to an information-busy table.

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

 
 

Active tab
888
Inactive tab
888
Inactive tab
888

 
 
General CSS for filter tabs (based on Tabs component for the Line graphs)

.graph-legend-color .graph-legend-item  {
  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.

New errors
4
5xx errors
8
4xx errors
15

 
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.

New errors
none
5xx errors
8
4xx errors
15

 
 
CSS for error tabs

.graph-legend-item-errornew.active,
.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

Warnings
30
2xx pages
12,500
Notices
15

 

Warnings
30
2xx pages
12,500
Notices
15

 
 
Filter Cards (example, tba)

filter cards example