ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-12 21:53:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Plots] Toggle grid lines (#3313)

Browse Source 
* add toggle button

* enable toggle grid lines in plots

* fix merge issue

* change to new glyphs

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
This commit is contained in:
David Tsay 2020-10-19 10:07:51 -07:00 committed by GitHub
parent 1ae8199e89
commit d27f73579b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 55 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,15 +188,19 @@
ng-style="{
right: (100 * (max - tick.value) / interval) + '%',
height: '100%'
}">
</div>
}"
ng-show="plot.gridLines"
>
</div>
</mct-ticks>
<mct-ticks axis="yAxis">
<div class="gl-plot-hash hash-h"
<div class="gl-plot-hash hash-h"
ng-repeat="tick in ticks track by tick.value"
ng-style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }">
</div>
ng-style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }"
ng-show="plot.gridLines"
>
</div>
</mct-ticks>
<mct-chart config="config"

19
src/plugins/plot/res/templates/plot.html
View File

@ -22,16 +22,16 @@
<div ng-controller="PlotController as controller"
class="c-plot holder holder-plot has-control-bar">
<div class="c-control-bar" ng-show="!controller.hideExportButtons">
<span class="c-button-set c-button-set--strip-h">
<span class="c-button-set c-button-set--strip-h">
<button class="c-button icon-download"
ng-click="controller.exportPNG()"
title="Export This View's Data as PNG">
<span class="c-button__label">PNG</span>
ng-click="controller.exportPNG()"
title="Export This View's Data as PNG">
<span class="c-button__label">PNG</span>
</button>
<button class="c-button"
ng-click="controller.exportJPG()"
title="Export This View's Data as JPG">
<span class="c-button__label">JPG</span>
ng-click="controller.exportJPG()"
title="Export This View's Data as JPG">
<span class="c-button__label">JPG</span>
</button>
</span>
<button class="c-button icon-crosshair"
@ -39,6 +39,11 @@
ng-click="controller.toggleCursorGuide($event)"
title="Toggle cursor guides">
</button>
<button class="c-button"
ng-class="{ 'icon-grid-on': controller.gridLines, 'icon-grid-off': !controller.gridLines }"
ng-click="controller.toggleGridLines($event)"
title="Toggle grid lines">
</button>
</div>
<div class="l-view-section">

27
src/plugins/plot/res/templates/stacked-plot.html
View File

@ -22,23 +22,28 @@
<div ng-controller="StackedPlotController as stackedPlot"
class="c-plot c-plot--stacked holder holder-plot has-control-bar">
<div class="c-control-bar" ng-show="!stackedPlot.hideExportButtons">
<span class="c-button-set c-button-set--strip-h">
<button class="c-button icon-download"
ng-click="stackedPlot.exportPNG()"
title="Export This View's Data as PNG">
<span class="c-button__label">PNG</span>
</button>
<button class="c-button"
ng-click="stackedPlot.exportJPG()"
title="Export This View's Data as JPG">
<span class="c-button__label">JPG</span>
</button>
<span class="c-button-set c-button-set--strip-h">
<button class="c-button icon-download"
ng-click="stackedPlot.exportPNG()"
title="Export This View's Data as PNG">
<span class="c-button__label">PNG</span>
</button>
<button class="c-button"
ng-click="stackedPlot.exportJPG()"
title="Export This View's Data as JPG">
<span class="c-button__label">JPG</span>
</button>
</span>
<button class="c-button icon-crosshair"
ng-class="{ 'is-active': stackedPlot.cursorGuide }"
ng-click="stackedPlot.toggleCursorGuide($event)"
title="Toggle cursor guides">
</button>
<button class="c-button"
ng-class="{ 'icon-grid-on': stackedPlot.gridLines, 'icon-grid-off': !stackedPlot.gridLines }"
ng-click="stackedPlot.toggleGridLines($event)"
title="Toggle grid lines">
</button>
</div>
<div class="l-view-section">
<div class="c-loading--overlay loading"

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

@ -96,7 +96,10 @@ define([
this.cursorGuideHorizontal = this.$element[0].querySelector('.js-cursor-guide--h');
this.cursorGuide = false;
this.gridLines = true;
this.listenTo(this.$scope, 'cursorguide', this.toggleCursorGuide, this);
this.listenTo(this.$scope, 'toggleGridLines', this.toggleGridLines, this);
this.listenTo(this.$scope, '$destroy', this.destroy, this);
this.listenTo(this.$scope, 'plot:tickWidth', this.onTickWidthChange, this);
@ -554,6 +557,10 @@ define([
this.cursorGuide = !this.cursorGuide;
};
MCTPlotController.prototype.toggleGridLines = function ($event) {
this.gridLines = !this.gridLines;
};
MCTPlotController.prototype.getXKeyOption = function (key) {
return this.$scope.xKeyOptions.find(option => option.key === key);
};

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

@ -60,6 +60,7 @@ define([
this.objectService = objectService;
this.exportImageService = exportImageService;
this.cursorGuide = false;
this.gridLines = true;
$scope.pending = 0;
@ -331,6 +332,11 @@ define([
this.$scope.$broadcast('cursorguide', $event);
};
PlotController.prototype.toggleGridLines = function ($event) {
this.gridLines = !this.gridLines;
this.$scope.$broadcast('toggleGridLines', $event);
};
return PlotController;
});

5
src/plugins/plot/src/telemetry/StackedPlotController.js
View File

@ -160,5 +160,10 @@ define([], function () {
this.$scope.$broadcast('cursorguide', $event);
};
StackedPlotController.prototype.toggleGridLines = function ($event) {
this.gridLines = !this.gridLines;
this.$scope.$broadcast('toggleGridLines', $event);
};
return StackedPlotController;
});