Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent Y Axis Title from exceeding height of graph #3130

Merged
merged 3 commits into from
Apr 6, 2018
Merged

Prevent Y Axis Title from exceeding height of graph #3130

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80d4c30
Truncate y axis label when it exceeds height of line graph
alexpaxton Apr 4, 2018
5f3f305
Update changelog
alexpaxton Apr 4, 2018
b0f14fe
Merge branch 'master' into bugfix/y-axis-title
Apr 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,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

## v1.4.3.1 [2018-04-02]

Expand Down Expand Up @@ -76,6 +77,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
Expand Down
50 changes: 36 additions & 14 deletions ui/src/style/components/dygraphs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}

Expand All @@ -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,
Expand All @@ -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);
Expand All @@ -62,7 +84,6 @@
}

.graph--hasYLabel {

.dygraph-axis-label-y {
padding: 0 1px 0 16px !important;
}
Expand All @@ -71,7 +92,6 @@
}
}


/* Single Stat Cells */
.single-stat {
position: absolute;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -130,16 +150,14 @@
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;
}
.single-stat--small .single-stat--shadow:after {
box-shadow: fade-out($g2-kevlar, 0.3) 0 0 30px 10px;
}



/*
Legend Styles
------------------------------------------------------------------------------
Expand Down Expand Up @@ -201,7 +219,9 @@
align-items: center;
flex-wrap: nowrap;

> .btn { margin-left: 4px; }
> .btn {
margin-left: 4px;
}
}
.dygraph-legend--timestamp {
margin-right: 8px;
Expand All @@ -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;
Expand All @@ -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;
Expand Down