ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-07 19:40:28 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[Frontend] Clean up

Browse Source 
WTD-1172
Moved HTML limits markup out of plot.html and into temp-limits/.../examples.html
This commit is contained in:
Charles Hacskaylo 2015-05-06 10:34:16 -07:00
parent 39c8f0ab00
commit 4b774f7b12
5 changed files with 90 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
platform/commonUI/general/res/css/plots.css
View File

@ -5,35 +5,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
/****************************** Limits */ /****************************** Limits */ }
/*.l-limit {
// Limits in plot display area
$h: 10px;
$a0: 0.1;
$a1: 0.2;
//top: auto;
height: auto;
z-index: 0;
&.s-limit-upr {
//$dir: 0deg;
&.s-limit-yellow {
@include limitBg($colorLimitYellow);
}
&.s-limit-red {
@include limitBg($colorLimitRed);
}
}
&.s-limit-lwr {
//$dir: 180deg;
&.s-limit-yellow {
@include limitBg($colorLimitYellow);
}
&.s-limit-red {
@include limitBg($colorLimitRed);
}
}
}*/ }
/* line 17, ../sass/plots/_plots-main.scss */ /* line 17, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area { .gl-plot .gl-plot-axis-area {
position: absolute; } position: absolute; }
@ -147,13 +119,30 @@
height: 24px; height: 24px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; } overflow-y: auto; }
/* line 137, ../sass/plots/_plots-main.scss */ /* line 136, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit,
.gl-plot .l-oob-data { .gl-plot .l-oob-data {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
width: auto; } width: auto; }
/* line 173, ../sass/plots/_plots-main.scss */ /* line 144, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit {
height: auto;
z-index: 0; }
/* line 158, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit.s-limit-upr.s-limit-yellow {
background: rgba(204, 153, 0, 0.2); }
/* line 161, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit.s-limit-upr.s-limit-red {
background: rgba(204, 0, 0, 0.2); }
/* line 167, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit.s-limit-lwr.s-limit-yellow {
background: rgba(204, 153, 0, 0.2); }
/* line 170, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit.s-limit-lwr.s-limit-red {
background: rgba(204, 0, 0, 0.2); }
/* line 176, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data { .gl-plot .l-oob-data {
-moz-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite;
-webkit-animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite;
@ -169,7 +158,7 @@
pointer-events: none; pointer-events: none;
height: 10px; height: 10px;
z-index: 1; } z-index: 1; }
/* line 182, ../sass/plots/_plots-main.scss */ /* line 185, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-up { .gl-plot .l-oob-data.l-oob-data-up {
top: 0; top: 0;
bottom: auto; bottom: auto;
@ -178,7 +167,7 @@
background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); } background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
/* line 187, ../sass/plots/_plots-main.scss */ /* line 190, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-dwn { .gl-plot .l-oob-data.l-oob-data-dwn {
bottom: 0; bottom: 0;
top: auto; top: auto;
@ -188,20 +177,20 @@
background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); } background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
/* line 197, ../sass/plots/_plots-main.scss */ /* line 200, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item, .gl-plot-legend .plot-legend-item,
.gl-plot-legend .legend-item, .gl-plot-legend .legend-item,
.legend .plot-legend-item, .legend .plot-legend-item,
.legend .legend-item { .legend .legend-item {
display: inline-block; display: inline-block;
margin-right: 10px; } margin-right: 10px; }
/* line 201, ../sass/plots/_plots-main.scss */ /* line 204, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item span, .gl-plot-legend .plot-legend-item span,
.gl-plot-legend .legend-item span, .gl-plot-legend .legend-item span,
.legend .plot-legend-item span, .legend .plot-legend-item span,
.legend .legend-item span { .legend .legend-item span {
vertical-align: middle; } vertical-align: middle; }
/* line 204, ../sass/plots/_plots-main.scss */ /* line 207, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch, .gl-plot-legend .plot-legend-item .plot-color-swatch,
.gl-plot-legend .plot-legend-item .color-swatch, .gl-plot-legend .plot-legend-item .color-swatch,
.gl-plot-legend .legend-item .plot-color-swatch, .gl-plot-legend .legend-item .plot-color-swatch,
@ -217,7 +206,7 @@
height: 8px; height: 8px;
width: 8px; } width: 8px; }
/* line 219, ../sass/plots/_plots-main.scss */ /* line 222, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item { .gl-plot-legend .plot-legend-item {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -225,22 +214,22 @@
color: #fff; color: #fff;
line-height: 1.5em; line-height: 1.5em;
padding: 0px 5px; } padding: 0px 5px; }
/* line 225, ../sass/plots/_plots-main.scss */ /* line 228, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch { .gl-plot-legend .plot-legend-item .plot-color-swatch {
border: 1px solid #333; border: 1px solid #333;
height: 9px; height: 9px;
width: 9px; } width: 9px; }
/* line 233, ../sass/plots/_plots-main.scss */ /* line 236, ../sass/plots/_plots-main.scss */
.tick { .tick {
position: absolute; position: absolute;
border: 0 rgba(255, 255, 255, 0.3) solid; } border: 0 rgba(255, 255, 255, 0.3) solid; }
/* line 236, ../sass/plots/_plots-main.scss */ /* line 239, ../sass/plots/_plots-main.scss */
.tick.tick-x { .tick.tick-x {
border-right-width: 1px; border-right-width: 1px;
height: 100%; } height: 100%; }
/* line 242, ../sass/plots/_plots-main.scss */ /* line 245, ../sass/plots/_plots-main.scss */
.gl-plot-tick, .gl-plot-tick,
.tick-label { .tick-label {
font-size: 0.7rem; font-size: 0.7rem;
@ -248,7 +237,7 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; } text-overflow: ellipsis; }
/* line 250, ../sass/plots/_plots-main.scss */ /* line 253, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x, .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
.tick-label.gl-plot-x-tick-label, .tick-label.gl-plot-x-tick-label,
.tick-label.tick-label-x { .tick-label.tick-label-x {
@ -259,7 +248,7 @@
width: 20%; width: 20%;
margin-left: -10%; margin-left: -10%;
text-align: center; } text-align: center; }
/* line 260, ../sass/plots/_plots-main.scss */ /* line 263, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y, .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
.tick-label.gl-plot-y-tick-label, .tick-label.gl-plot-y-tick-label,
.tick-label.tick-label-y { .tick-label.tick-label-y {
@ -269,18 +258,18 @@
margin-bottom: -0.5em; margin-bottom: -0.5em;
text-align: right; } text-align: right; }
/* line 272, ../sass/plots/_plots-main.scss */ /* line 275, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label { .gl-plot-tick.gl-plot-x-tick-label {
top: 5px; } top: 5px; }
/* line 275, ../sass/plots/_plots-main.scss */ /* line 278, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label { .gl-plot-tick.gl-plot-y-tick-label {
right: 5px; right: 5px;
left: 5px; } left: 5px; }
/* line 282, ../sass/plots/_plots-main.scss */ /* line 285, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-x { .tick-label.tick-label-x {
top: 0; } top: 0; }
/* line 285, ../sass/plots/_plots-main.scss */ /* line 288, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-y { .tick-label.tick-label-y {
right: 0; right: 0;
left: 0; } left: 0; }

83
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -2270,35 +2270,7 @@ input[type="text"] {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
/****************************** Limits */ /****************************** Limits */ }
/*.l-limit {
// Limits in plot display area
$h: 10px;
$a0: 0.1;
$a1: 0.2;
//top: auto;
height: auto;
z-index: 0;
&.s-limit-upr {
//$dir: 0deg;
&.s-limit-yellow {
@include limitBg($colorLimitYellow);
}
&.s-limit-red {
@include limitBg($colorLimitRed);
}
}
&.s-limit-lwr {
//$dir: 180deg;
&.s-limit-yellow {
@include limitBg($colorLimitYellow);
}
&.s-limit-red {
@include limitBg($colorLimitRed);
}
}
}*/ }
/* line 17, ../sass/plots/_plots-main.scss */ /* line 17, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area { .gl-plot .gl-plot-axis-area {
position: absolute; } position: absolute; }
@ -2412,13 +2384,30 @@ input[type="text"] {
height: 24px; height: 24px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; } overflow-y: auto; }
/* line 137, ../sass/plots/_plots-main.scss */ /* line 136, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit,
.gl-plot .l-oob-data { .gl-plot .l-oob-data {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
width: auto; } width: auto; }
/* line 173, ../sass/plots/_plots-main.scss */ /* line 144, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit {
height: auto;
z-index: 0; }
/* line 158, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit.s-limit-upr.s-limit-yellow {
background: rgba(204, 153, 0, 0.2); }
/* line 161, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit.s-limit-upr.s-limit-red {
background: rgba(204, 0, 0, 0.2); }
/* line 167, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit.s-limit-lwr.s-limit-yellow {
background: rgba(204, 153, 0, 0.2); }
/* line 170, ../sass/plots/_plots-main.scss */
.gl-plot .l-limit.s-limit-lwr.s-limit-red {
background: rgba(204, 0, 0, 0.2); }
/* line 176, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data { .gl-plot .l-oob-data {
-moz-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite;
-webkit-animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite;
@ -2434,7 +2423,7 @@ input[type="text"] {
pointer-events: none; pointer-events: none;
height: 10px; height: 10px;
z-index: 1; } z-index: 1; }
/* line 182, ../sass/plots/_plots-main.scss */ /* line 185, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-up { .gl-plot .l-oob-data.l-oob-data-up {
top: 0; top: 0;
bottom: auto; bottom: auto;
@ -2443,7 +2432,7 @@ input[type="text"] {
background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); } background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
/* line 187, ../sass/plots/_plots-main.scss */ /* line 190, ../sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-dwn { .gl-plot .l-oob-data.l-oob-data-dwn {
bottom: 0; bottom: 0;
top: auto; top: auto;
@ -2453,20 +2442,20 @@ input[type="text"] {
background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); } background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
/* line 197, ../sass/plots/_plots-main.scss */ /* line 200, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item, .gl-plot-legend .plot-legend-item,
.gl-plot-legend .legend-item, .gl-plot-legend .legend-item,
.legend .plot-legend-item, .legend .plot-legend-item,
.legend .legend-item { .legend .legend-item {
display: inline-block; display: inline-block;
margin-right: 10px; } margin-right: 10px; }
/* line 201, ../sass/plots/_plots-main.scss */ /* line 204, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item span, .gl-plot-legend .plot-legend-item span,
.gl-plot-legend .legend-item span, .gl-plot-legend .legend-item span,
.legend .plot-legend-item span, .legend .plot-legend-item span,
.legend .legend-item span { .legend .legend-item span {
vertical-align: middle; } vertical-align: middle; }
/* line 204, ../sass/plots/_plots-main.scss */ /* line 207, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch, .gl-plot-legend .plot-legend-item .plot-color-swatch,
.gl-plot-legend .plot-legend-item .color-swatch, .gl-plot-legend .plot-legend-item .color-swatch,
.gl-plot-legend .legend-item .plot-color-swatch, .gl-plot-legend .legend-item .plot-color-swatch,
@ -2482,7 +2471,7 @@ input[type="text"] {
height: 8px; height: 8px;
width: 8px; } width: 8px; }
/* line 219, ../sass/plots/_plots-main.scss */ /* line 222, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item { .gl-plot-legend .plot-legend-item {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -2490,22 +2479,22 @@ input[type="text"] {
color: #fff; color: #fff;
line-height: 1.5em; line-height: 1.5em;
padding: 0px 5px; } padding: 0px 5px; }
/* line 225, ../sass/plots/_plots-main.scss */ /* line 228, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch { .gl-plot-legend .plot-legend-item .plot-color-swatch {
border: 1px solid #333; border: 1px solid #333;
height: 9px; height: 9px;
width: 9px; } width: 9px; }
/* line 233, ../sass/plots/_plots-main.scss */ /* line 236, ../sass/plots/_plots-main.scss */
.tick { .tick {
position: absolute; position: absolute;
border: 0 rgba(255, 255, 255, 0.3) solid; } border: 0 rgba(255, 255, 255, 0.3) solid; }
/* line 236, ../sass/plots/_plots-main.scss */ /* line 239, ../sass/plots/_plots-main.scss */
.tick.tick-x { .tick.tick-x {
border-right-width: 1px; border-right-width: 1px;
height: 100%; } height: 100%; }
/* line 242, ../sass/plots/_plots-main.scss */ /* line 245, ../sass/plots/_plots-main.scss */
.gl-plot-tick, .gl-plot-tick,
.tick-label { .tick-label {
font-size: 0.7rem; font-size: 0.7rem;
@ -2513,7 +2502,7 @@ input[type="text"] {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; } text-overflow: ellipsis; }
/* line 250, ../sass/plots/_plots-main.scss */ /* line 253, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x, .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
.tick-label.gl-plot-x-tick-label, .tick-label.gl-plot-x-tick-label,
.tick-label.tick-label-x { .tick-label.tick-label-x {
@ -2524,7 +2513,7 @@ input[type="text"] {
width: 20%; width: 20%;
margin-left: -10%; margin-left: -10%;
text-align: center; } text-align: center; }
/* line 260, ../sass/plots/_plots-main.scss */ /* line 263, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y, .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
.tick-label.gl-plot-y-tick-label, .tick-label.gl-plot-y-tick-label,
.tick-label.tick-label-y { .tick-label.tick-label-y {
@ -2534,18 +2523,18 @@ input[type="text"] {
margin-bottom: -0.5em; margin-bottom: -0.5em;
text-align: right; } text-align: right; }
/* line 272, ../sass/plots/_plots-main.scss */ /* line 275, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label { .gl-plot-tick.gl-plot-x-tick-label {
top: 5px; } top: 5px; }
/* line 275, ../sass/plots/_plots-main.scss */ /* line 278, ../sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label { .gl-plot-tick.gl-plot-y-tick-label {
right: 5px; right: 5px;
left: 5px; } left: 5px; }
/* line 282, ../sass/plots/_plots-main.scss */ /* line 285, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-x { .tick-label.tick-label-x {
top: 0; } top: 0; }
/* line 285, ../sass/plots/_plots-main.scss */ /* line 288, ../sass/plots/_plots-main.scss */
.tick-label.tick-label-y { .tick-label.tick-label-y {
right: 0; right: 0;
left: 0; } left: 0; }

9
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@ -133,7 +133,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
/****************************** Limits */ /****************************** Limits */
//.l-limit, .l-limit,
.l-oob-data { .l-oob-data {
position: absolute; position: absolute;
left: 0; left: 0;
@ -141,8 +141,11 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
width: auto; width: auto;
} }
/*.l-limit { .l-limit {
// Limits in plot display area // Limits in plot display area
@mixin limitBg($c) {
background: rgba($c, 0.2);
}
$h: 10px; $h: 10px;
$a0: 0.1; $a0: 0.1;
@ -168,7 +171,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
@include limitBg($colorLimitRed); @include limitBg($colorLimitRed);
} }
} }
}*/ }
.l-oob-data { .l-oob-data {
$c: #7748d6; $c: #7748d6;

15
platform/features/plot/res/templates/plot.html
View File

@ -53,21 +53,6 @@
ng-mouseenter="subplot.isHovering(true); representation.showControls = true;" ng-mouseenter="subplot.isHovering(true); representation.showControls = true;"
ng-mouseleave="subplot.isHovering(false)"> ng-mouseleave="subplot.isHovering(false)">
<div ng-init="limits=[
{type: 'upr', severity: 'severe', top: 0, bottom: 90},
{type: 'upr', severity: 'med', top: 10, bottom: 80},
{type: 'lwr', severity: 'med', top: 70, bottom: 20},
{type: 'lwr', severity: 'severe', top: 80, bottom: 0}
]"></div>
<!-- Limits display -->
<div
ng-repeat="limit in limits"
ng-show="1"
class="t-limit l-limit s-limit-{{limit.type}} s-limit-{{limit.severity}}"
style="top: {{limit.top}}%; bottom: {{limit.bottom}}%"
></div>
<!-- Out-of-bounds data indicators --> <!-- Out-of-bounds data indicators -->
<div ng-show="1" class="l-oob-data l-oob-data-up"></div> <div ng-show="1" class="l-oob-data l-oob-data-up"></div>
<div ng-show="1" class="l-oob-data l-oob-data-dwn"></div> <div ng-show="1" class="l-oob-data l-oob-data-dwn"></div>

16
platform/features/temp-limits/res/examples.html
View File

@ -1,13 +1,21 @@
<h1>Limits Examples</h1> <h1>Limits Examples</h1>
<h2>Plot limits</h2> <h2>Plot limits</h2>
<div ng-init="limits=[
{type: 'upr', severity: 'red', top: 0, bottom: 90},
{type: 'upr', severity: 'yellow', top: 10, bottom: 80},
{type: 'lwr', severity: 'yellow', top: 70, bottom: 20},
{type: 'lwr', severity: 'red', top: 80, bottom: 0}
]"></div>
<div style="width: 1000px; height: 500px"> <div style="width: 1000px; height: 500px">
<div class="gl-plot" style="height: 100%;"> <div class="gl-plot" style="height: 100%;">
<div class="gl-plot-display-area"> <div class="gl-plot-display-area">
<div class="t-limit l-limit s-limit-upr s-limit-1" style="bottom: 80%"></div> <div
<div class="t-limit l-limit s-limit-upr s-limit-0" style="bottom: 50%"></div> ng-repeat="limit in limits"
<div class="t-limit l-limit s-limit-lwr s-limit-0" style="bottom: 30%"></div> ng-show="1"
<div class="t-limit l-limit s-limit-lwr s-limit-1" style="bottom: 10%"></div> class="t-limit l-limit s-limit-{{limit.type}} s-limit-{{limit.severity}}"
style="top: {{limit.top}}%; bottom: {{limit.bottom}}%"
></div>
</div> </div>
</div> </div>
</div> </div>