ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-31 16:36:13 +00:00
Code Issues Actions 4 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
Show Stats 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 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="{
width: (tickWidth + 30) + 'px'
}">
<div class="gl-plot-label gl-plot-y-label" ng-if="!yKeyOptions">
{{ yAxis.get('label') }}
<div class="gl-plot-label gl-plot-y-label"
ng-class="{'icon-gear': (yKeyOptions.length > 1 && series.length === 1)}"
ng-bind="yAxisLabel">
</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"
ng-model="yAxisLabel" ng-change="plot.toggleYAxisLabel(yAxisLabel, yKeyOptions, series[0])">
<option ng-repeat="option in yKeyOptions"
value="{{option.name}}"
ng-selected="option.name === yAxisLabel">
{{option.name}}
</option>
</select>
</div>
<select class="gl-plot-y-label__select local-controls--hidden"
ng-if="yKeyOptions.length > 1 && series.length === 1"
ng-model="yAxisLabel" ng-change="plot.toggleYAxisLabel(yAxisLabel, yKeyOptions, series[0])">
<option ng-repeat="option in yKeyOptions"
value="{{option.name}}"
ng-selected="option.name === yAxisLabel">
{{option.name}}
</option>
</select>
<mct-ticks axis="yAxis">

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

@ -526,6 +526,7 @@ define([
if (yAxisObject) {
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.
*/
PlotController.prototype.exportJPG = function () {
this.hideExportButtons = true;
this.exportImageService.exportJPG(this.$element[0], 'plot.jpg', 'export-plot')
.finally(function () {
this.hideExportButtons = false;
}.bind(this));
var plotElement = this.$element.children()[1];
this.exportImageService.exportJPG(plotElement, 'plot.jpg', 'export-plot');
};
/**
* Export view as PNG.
*/
PlotController.prototype.exportPNG = function () {
this.hideExportButtons = true;
this.exportImageService.exportPNG(this.$element[0], 'plot.png', 'export-plot')
.finally(function () {
this.hideExportButtons = false;
}.bind(this));
var plotElement = this.$element.children()[1];
this.exportImageService.exportPNG(plotElement, 'plot.png', 'export-plot');
};
PlotController.prototype.toggleCursorGuide = function ($event) {

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

@ -126,6 +126,12 @@ mct-plot {
bottom: nth($plotDisplayArea, 3);
left: 0;
width: $plotYBarW;
&:hover {
.gl-plot-y-label__select {
display: block;
}
}
}
}
@ -162,24 +168,23 @@ mct-plot {
}
&.gl-plot-y-label {
$x: -50%;
$r: -90deg;
transform-origin: 50% 0;
transform: translateX($x) rotate($r);
display: inline-block;
margin-left: $interiorMargin; // Kick off the left edge
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;
}
display: block;
left: 0; top: 0; right: auto; bottom: 0;
padding-left: 5px;
text-orientation: mixed;
overflow: hidden;
writing-mode: vertical-lr;
}
}
.gl-plot-y-label__select {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
z-index: 10;
}
.gl-plot-x-options,
.gl-plot-y-options {
$h: 24px;