@nova-ui/charts
Version:
Nova Charts is a library created to provide potential consumers with solutions for various data visualizations that conform with the Nova Design Language. It's designed to solve common patterns identified by UX designers, but also be very flexible so that
237 lines (194 loc) • 6.03 kB
text/less
@import (reference) "@nova-ui/bits/sdk/less/nui-framework-variables";
@import (reference) "./nui-charts-variables.less";
@import (reference) "@nova-ui/bits/sdk/less/mixins.less";
@nui-legend-series-max-width: 250px;
@nui-legend-series-description-min-width: 130px; // 180px from mockups - 50px for tile
.nui-chart-layout {
display: grid;
grid-template:
"axis-label-left axis-label-right ." 0fr
"chart chart legend" 1fr
"axis-label-bottom axis-label-bottom ." 0fr
"legend-bottom legend-bottom ." 0fr
~"/" 1fr 1fr auto;
.axis-label-left {
grid-area: axis-label-left;
justify-self: start;
margin-bottom: @nui-space-xs;
margin-right: @nui-space-xs;
}
.axis-label-right {
grid-area: axis-label-right;
justify-self: end;
margin-bottom: @nui-space-xs;
margin-left: @nui-space-xs;
}
.axis-label-bottom {
grid-area: axis-label-bottom;
justify-self: center;
margin-top: @nui-space-xs;
}
.chart {
grid-area: chart;
display: flex;
justify-content: stretch;
&.has-overlay {
position: relative;
& .overlay {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
}
}
.legend {
grid-area: legend;
align-self: start;
padding-left: @nui-space-xs;
// TODO: Merge this class with .legend (breaking change)
// https://jira.solarwinds.com/browse/NUI-3766
&.scrollable {
overflow: auto;
height: 100%;
}
}
.legend-bottom {
grid-area: legend-bottom;
justify-self: center;
margin-top: @nui-space-xs;
}
@media print {
break-inside: avoid;
}
}
.nui-legend-series {
padding: @nui-space-xxs;
max-width: @nui-legend-series-max-width;
cursor: default; // to prevent text selection cursor
.setCssVariable(background-color, nui-color-bg-content);
&:not(.nui-legend-series--horizontal):not(:last-child) {
margin-bottom: 1px;
}
& &__tile-wrapper {
display: flex;
justify-content: center;
}
& &__tile {
display: flex;
}
&--horizontal:not(:last-child) {
margin-right: @nui-space-sm;
}
&:empty {
display: none;
}
&.description-min-width--unset {
.description {
min-width: unset ;
}
}
& .description {
line-height: @nui-line-height-default;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-left: @nui-space-xs;
padding-right: @nui-space-xs;
min-width: @nui-legend-series-description-min-width;
&-container {
overflow: hidden;
}
&-primary {
font-weight: @nui-font-weight-semibold;
.setCssVariable(color, nui-color-text-default);
}
&-primary:not(:last-child) {
margin-bottom: -@nui-legend-series-content-margin;
}
&-secondary {
.setCssVariable(color, nui-color-text-secondary);
}
&-secondary:not(:first-child) {
margin-top: -1px;
}
}
& .legend-menu {
display: none;
align-items: center;
}
&:hover .legend-menu {
display: flex;
}
&--interactive {
cursor: pointer;
& .nui-legend-series__tile-wrapper {
position: relative;
.nui-legend-series__checkbox {
&-wrapper {
align-self: center;
position: absolute;
visibility: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&-mark {
.nui-checkbox__mark();
}
&-glyph {
.nui-checkbox__glyph();
display: none;
}
&--checked {
.nui-legend-series__checkbox-mark {
.setCssVariable(background-color, nui-color-active);
.setCssVariable(border-color, nui-color-active);
> .nui-legend-series__checkbox-glyph {
display: block;
}
}
}
}
}
& .nui-legend-series--deselected,
& .nui-legend-series__tile-wrapper:hover {
.nui-legend-series__checkbox-wrapper {
visibility: visible;
}
.nui-legend-series__tile {
visibility: hidden;
}
}
& .nui-legend-series__tile-wrapper:hover {
.setCssVariable(background-color, nui-color-bg-transparent-hover);
}
&:hover {
.setCssVariable(background-color, nui-color-bg-light-hover);
.nui-legend-series--deselected {
.nui-legend-series__tile-wrapper {
.setCssVariable(background-color, nui-color-bg-transparent-hover);
}
}
}
&:not(:hover) {
.nui-legend-series--deselected {
.nui-legend-series__tile-wrapper {
.setCssVariable(background-color, nui-color-bg-secondary);
}
}
}
}
&:not(:hover) &--state-hidden {
.description-container {
opacity: @nui-legend-deemphasized-opacity;
}
}
& &--state-deemphasized {
opacity: @nui-legend-deemphasized-opacity;
}
}