114 lines
1.7 KiB
SCSS
114 lines
1.7 KiB
SCSS
@mixin standard-gradient($class, $color) {
|
|
linearGradient.#{$class} {
|
|
> .start {
|
|
stop-color: $color;
|
|
stop-opacity: 0.6;
|
|
}
|
|
|
|
> .end {
|
|
stop-color: $color;
|
|
stop-opacity: 0.05;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart.line-chart {
|
|
display: block;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
&.with-annotations {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
& > svg {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.hover-target {
|
|
fill: transparent;
|
|
stroke: transparent;
|
|
}
|
|
|
|
.line {
|
|
fill: transparent;
|
|
stroke-width: 1.25;
|
|
}
|
|
|
|
.area {
|
|
fill: none;
|
|
}
|
|
|
|
.axis {
|
|
line,
|
|
path {
|
|
stroke: $grey-blue;
|
|
}
|
|
|
|
text {
|
|
fill: darken($grey-blue, 20%);
|
|
}
|
|
}
|
|
|
|
.gridlines {
|
|
path {
|
|
stroke-width: 0;
|
|
}
|
|
|
|
line {
|
|
stroke: lighten($grey-blue, 10%);
|
|
stroke-dasharray: 5 10;
|
|
}
|
|
}
|
|
|
|
.line-chart-annotations {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
|
|
.area.is-#{$name} {
|
|
.line {
|
|
stroke: $color;
|
|
}
|
|
}
|
|
|
|
linearGradient {
|
|
&.is-#{$name} {
|
|
> .start {
|
|
stop-color: $color;
|
|
stop-opacity: 0.6;
|
|
}
|
|
|
|
> .end {
|
|
stop-color: $color;
|
|
stop-opacity: 0.05;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $name, $scale in $chart-scales {
|
|
@include standard-gradient($name, nth($scale, -1));
|
|
.area.#{$name} .line {
|
|
stroke: nth($scale, -1);
|
|
}
|
|
|
|
@each $color in $scale {
|
|
@include standard-gradient((#{$name}-#{index($scale, $color)}), $color);
|
|
.area.#{$name}-#{index($scale, $color)} .line {
|
|
stroke: $color;
|
|
}
|
|
}
|
|
}
|
|
}
|