Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3130 from influxdata/bugfix/y-axis-title 

Prevent Y Axis Title from exceeding height of graph
pull/3156/head
Alex Paxton 2018-04-06 10:39:01 -07:00 committed by GitHub
parent 92d95972c4 b0f14fec4b
commit 483a0d9014
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -22,6 +22,7 @@
1. [#3104](https://github.com/influxdata/chronograf/pull/3104): Query annotations at auto-refresh interval
1. [#3109](https://github.com/influxdata/chronograf/pull/3109): Display link to configure Kapacitor on Alerts Page if no configured kapacitor.
1. [#3111](https://github.com/influxdata/chronograf/pull/3111): Fix saving of new TICKscripts
1. [#3130](https://github.com/influxdata/chronograf/pull/3130): Fix appearance of cell Y-Axis titles
1. [#3129](https://github.com/influxdata/chronograf/pull/3129): Only add stateChangesOnly to new rules
1. [#3131](https://github.com/influxdata/chronograf/pull/3131): Fix 500s when deleting organizations
1. [#3137](https://github.com/influxdata/chronograf/pull/3137): Fixes issues with providing regexp in query
@ -80,6 +81,7 @@
1. [#2837](https://github.com/influxdata/chronograf/pull/2837): Prevent execution of queries in cells that are not in view on the dashboard page
1. [#2829](https://github.com/influxdata/chronograf/pull/2829): Add an optional persistent legend which can toggle series visibility to dashboard cells
1. [#2846](https://github.com/influxdata/chronograf/pull/2846): Allow user to annotate graphs via UI or API
### UI Improvements
1. [#2848](https://github.com/influxdata/chronograf/pull/2848): Add ability to set a prefix and suffix on Single Stat and Gauge cell types

50
ui/src/style/components/dygraphs.scss
View File

@ -15,9 +15,27 @@
pointer-events: none;
display: none;
background: fade-out($g20-white, 1);
background: -moz-linear-gradient(top, fade-out($g20-white, 1) 0%, fade-out($g20-white, 0.71) 6%, fade-out($g20-white, 0.71) 80%, fade-out($g20-white, 1) 100%);
background: -webkit-linear-gradient(top, fade-out($g20-white, 1) 0%,fade-out($g20-white, 0.71) 6%,fade-out($g20-white, 0.71) 80%,fade-out($g20-white, 1) 100%);
background: linear-gradient(to bottom, fade-out($g20-white, 1) 0%,fade-out($g20-white, 0.71) 6%,fade-out($g20-white, 0.71) 80%,fade-out($g20-white, 1) 100%);
background: -moz-linear-gradient(
top,
fade-out($g20-white, 1) 0%,
fade-out($g20-white, 0.71) 6%,
fade-out($g20-white, 0.71) 80%,
fade-out($g20-white, 1) 100%
);
background: -webkit-linear-gradient(
top,
fade-out($g20-white, 1) 0%,
fade-out($g20-white, 0.71) 6%,
fade-out($g20-white, 0.71) 80%,
fade-out($g20-white, 1) 100%
);
background: linear-gradient(
to bottom,
fade-out($g20-white, 1) 0%,
fade-out($g20-white, 0.71) 6%,
fade-out($g20-white, 0.71) 80%,
fade-out($g20-white, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='fade-out($g20-white, 0.71)', endColorstr='fade-out($g20-white, 0.71)',GradientType=0 );
}
@ -38,7 +56,8 @@
text-align: right !important;
user-select: none;
}
.graph-container > div > div > div > div {}
.graph-container > div > div > div > div {
}
/* Vertical Axis Labels */
.dygraph-ylabel,
@ -51,8 +70,11 @@
top: -12px !important;
color: $g11-sidewalk;
font-weight: 500;
padding:0 0 2px 0 !important;
padding: 0 0 2px 0 !important;
border-bottom: 2px solid $g4-onyx !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.dygraph-ylabel {
transform: rotate(-90deg);
@ -62,7 +84,6 @@
}
.graph--hasYLabel {
.dygraph-axis-label-y {
padding: 0 1px 0 16px !important;
}
@ -71,7 +92,6 @@
}
}
/* Single Stat Cells */
.single-stat {
position: absolute;
@ -100,7 +120,7 @@
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
width: auto;
max-width: calc(100% - 32px);
text-align: center;
@ -130,7 +150,7 @@
left: 50%;
width: 90%;
height: 0;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
box-shadow: fade-out($g2-kevlar, 0.3) 0 0 50px 30px;
z-index: -1;
}
@ -138,8 +158,6 @@
box-shadow: fade-out($g2-kevlar, 0.3) 0 0 30px 10px;
}
/*
Legend Styles
------------------------------------------------------------------------------
@ -201,7 +219,9 @@
align-items: center;
flex-wrap: nowrap;
> .btn { margin-left: 4px; }
> .btn {
margin-left: 4px;
}
}
.dygraph-legend--timestamp {
margin-right: 8px;
@ -228,7 +248,7 @@
line-height: 13px;
max-height: 123px;
overflow-y: auto;
@include custom-scrollbar-round($g0-obsidian,$g3-castle);
@include custom-scrollbar-round($g0-obsidian, $g3-castle);
}
.dygraph-legend--row {
display: flex;
@ -254,7 +274,9 @@
&.highlight {
opacity: 1;
background-color: $g3-castle;
figure {color: $g20-white;}
figure {
color: $g20-white;
}
}
&.highlight:only-child {
background-color: transparent;