ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 15:43:48 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Fix Y axis plot label control (#2465)

Browse Source 
* Fix Y axis plot label control
* Now uses writing-mode: vertical-lr instead of transform for vertical
text;
* Text overflow: hidden prevents scrollbars;
* Select displayed on hover over Y axis area;
* Dynamically adds icon-gear when Y axis can be configured;
* use child plot div for image exports
This commit is contained in:
Charles Hacskaylo
2019-09-03 11:10:02 -07:00
committed by Andrew Henry
parent fa66289d5c
commit e89881c266
4 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/plugins/plot/res/templates/mct-plot.html
View File

@ -110,25 +110,25 @@
</div> </div>
<div class="plot-wrapper-axis-and-display-area flex-elem grows"> <div class="plot-wrapper-axis-and-display-area flex-elem grows">
<div class="gl-plot-axis-area gl-plot-y" <div class="gl-plot-axis-area gl-plot-y has-local-controls"
ng-style="{ ng-style="{
width: (tickWidth + 30) + 'px' width: (tickWidth + 30) + 'px'
}"> }">
<div class="gl-plot-label gl-plot-y-label" ng-if="!yKeyOptions"> <div class="gl-plot-label gl-plot-y-label"
{{ yAxis.get('label') }} ng-class="{'icon-gear': (yKeyOptions.length > 1 && series.length === 1)}"
ng-bind="yAxisLabel">
</div> </div>
<div class="gl-plot-label gl-plot-y-label" ng-if="yKeyOptions.length > 1 && series.length === 1"> <select class="gl-plot-y-label__select local-controls--hidden"
<select class="gl-plot-y-label__select" ng-if="yKeyOptions.length > 1 && series.length === 1"
ng-model="yAxisLabel" ng-change="plot.toggleYAxisLabel(yAxisLabel, yKeyOptions, series[0])"> ng-model="yAxisLabel" ng-change="plot.toggleYAxisLabel(yAxisLabel, yKeyOptions, series[0])">
<option ng-repeat="option in yKeyOptions" <option ng-repeat="option in yKeyOptions"
value="{{option.name}}" value="{{option.name}}"
ng-selected="option.name === yAxisLabel"> ng-selected="option.name === yAxisLabel">
{{option.name}} {{option.name}}
</option> </option>
</select> </select>
</div>
<mct-ticks axis="yAxis"> <mct-ticks axis="yAxis">

1
src/plugins/plot/src/plot/MCTPlotController.js
View File

@ -526,6 +526,7 @@ define([
if (yAxisObject) { if (yAxisObject) {
series.emit('change:yKey', yAxisObject.key); series.emit('change:yKey', yAxisObject.key);
this.$scope.yAxisLabel = label;
} }
}; };

16
src/plugins/plot/src/telemetry/PlotController.js
View File

@ -277,22 +277,18 @@ define([
* Export view as JPG. * Export view as JPG.
*/ */
PlotController.prototype.exportJPG = function () { PlotController.prototype.exportJPG = function () {
this.hideExportButtons = true; var plotElement = this.$element.children()[1];
this.exportImageService.exportJPG(this.$element[0], 'plot.jpg', 'export-plot')
.finally(function () { this.exportImageService.exportJPG(plotElement, 'plot.jpg', 'export-plot');
this.hideExportButtons = false;
}.bind(this));
}; };
/** /**
* Export view as PNG. * Export view as PNG.
*/ */
PlotController.prototype.exportPNG = function () { PlotController.prototype.exportPNG = function () {
this.hideExportButtons = true; var plotElement = this.$element.children()[1];
this.exportImageService.exportPNG(this.$element[0], 'plot.png', 'export-plot')
.finally(function () { this.exportImageService.exportPNG(plotElement, 'plot.png', 'export-plot');
this.hideExportButtons = false;
}.bind(this));
}; };
PlotController.prototype.toggleCursorGuide = function ($event) { PlotController.prototype.toggleCursorGuide = function ($event) {

35
src/styles/_legacy-plots.scss
View File

@ -126,6 +126,12 @@ mct-plot {
bottom: nth($plotDisplayArea, 3); bottom: nth($plotDisplayArea, 3);
left: 0; left: 0;
width: $plotYBarW; width: $plotYBarW;
&:hover {
.gl-plot-y-label__select {
display: block;
}
}
} }
} }
@ -162,24 +168,23 @@ mct-plot {
} }
&.gl-plot-y-label { &.gl-plot-y-label {
$x: -50%; display: block;
$r: -90deg; left: 0; top: 0; right: auto; bottom: 0;
transform-origin: 50% 0; padding-left: 5px;
transform: translateX($x) rotate($r); text-orientation: mixed;
display: inline-block; overflow: hidden;
margin-left: $interiorMargin; // Kick off the left edge writing-mode: vertical-lr;
left: 0;
top: 50%;
white-space: nowrap;
select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M0 5l5 5V0L0 5z'/%3e%3c/svg%3e");
background-position: left .4em top 50%, 0 0;
padding: 1px $interiorMargin 1px 20px;
}
} }
} }
.gl-plot-y-label__select {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
z-index: 10;
}
.gl-plot-x-options, .gl-plot-x-options,
.gl-plot-y-options { .gl-plot-y-options {
$h: 24px; $h: 24px;