mirror of
https://github.com/nasa/openmct.git
synced 2025-06-19 15:43:48 +00:00
Review and integrate UI enhancements (#2078)
* [Frontend] WIP New local-controls classes Fixes #2000 - h-local-controls - Markup in plots changed - Changed reset plot button's icon * [Frontend] WIP local-controls classes Fixes #2000 - Refactoring to use and apply local-control classes consistently; - Plots and imagery done in main view and Display Layout contexts; * [Frontend] WIP local-controls classes Fixes #2000 - Use local-control classes in Timelines; - Group Timeline buttons in l-btn-set; - Use reset icon glyph; * [Frontend] WIP local-controls classes Fixes #2000 - Slight increase in size to buttons in frame context; * [Frontend] local-controls classes Fixes #2000 - Code cleanup; - Update Style Guide content; - Provisionally done, needs unit testing and double-checking; * [Frontend] Better selecting in browse mode Fixes #2000 - Better colors and approach to selecting in browse mode; * [Frontend] Tweaks to pane collapse mini-tabs Fixes #1758 Fixes #2000 - Enlarged mini-tabs and moved to screen top; - Removed duplicative theme-based constants; * [Frontend] Tweaks to "nav up" arrow button Fixes #1758 Fixes #2000 - Increased hit area of .l-back "nav up" arrow in object-browse-bar; * [Frontend] Glyph improvements Fixes #1758 Fixes #2000 - New arrow glyph for view controls; - Increased hit area of view controls in tree for mobile and desktop; - Better "hamburger" menu glyph; * [Frontend] Inspector refactor to CSS grid WIP Fixes #1758 Fixes #2000 - WIP!!!; - Good progress on Properties section; * [Frontend] Inspector refactor to CSS grid WIP Fixes #2000 - Significant mods to CSS and markup; - New grid archetypes classes; - Added title attribs to plot options edit and browse props; - Added value, alarm markers to plot series browse props; - Nearly done (?) but needs unit testing and cleanups; * [Frontend] Minor tweaks to form and form-row Fixes #2000 - Fixing margin problem with .form-row; - h2 instead of div.section-header; * [Frontend] Fixed H2 in Elements pool Fixes #2000 * Refinements to Time Conductor Fixes #2000 - Tweaks size of fixed position grab ticks; - Positioning refinements to ticks and text; - Hide major tick marks; * Hide View Large button for nested hidden-frame Layouts Fixes #2000 - When a layout is nested and has its frame hidden, hide the View Large button; * Better hiding of Time Conductor "Submit" button Fixes #2000 * Re-added new icon-arrow-right-equilateral glyph; Fixes #2000 Fixes #2078 * Remove commented styles/markup Fixes #2000 Fixes #2078 * Repaired approach to hiding Time Conductor Submit button Fixes #2000 Fixes #2078 - Renamed .off to .invisible and added refinements; * Fixed wrong conflict resolutions; polish search Fixes #2000 Fixes #2078 - .invisible instead of .off in search.html; - Minor polishing to search; fixes #1758 fixes #1763 fixes #2011
This commit is contained in:
Charles Hacskaylo
committed by
Pete Richards
Pete Richards
parent
07fb20c32f
commit
9d2c7a6de5
@ -162,20 +162,18 @@
|
||||
the-y-axis="yAxis">
|
||||
</mct-chart>
|
||||
|
||||
<div class="l-local-controls gl-plot-local-controls"
|
||||
ng-show="plotHistory.length"
|
||||
style="position: absolute; top: 8px; right: 8px;">
|
||||
|
||||
<a class="s-button icon-arrow-left"
|
||||
ng-click="plot.back()"
|
||||
title="Restore previous pan/zoom">
|
||||
</a>
|
||||
|
||||
<a class="s-button icon-arrows-out"
|
||||
ng-click="plot.clear()"
|
||||
title="Reset pan/zoom">
|
||||
</a>
|
||||
|
||||
<div class="h-local-controls h-local-controls-overlay-content"
|
||||
ng-show="plotHistory.length">
|
||||
<div class="l-btn-set">
|
||||
<a class="s-button icon-arrow-left"
|
||||
ng-click="plot.back()"
|
||||
title="Restore previous pan/zoom">
|
||||
</a>
|
||||
<a class="s-button icon-reset"
|
||||
ng-click="plot.clear()"
|
||||
title="Reset pan/zoom">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
|
||||
|
||||
@ -19,112 +19,132 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="PlotOptionsController"
|
||||
class="flex-elem grows l-inspector-part">
|
||||
<ul class="flex-elem grows l-inspector-part"><li>
|
||||
<em class="t-inspector-part-header">Plot Series</em>
|
||||
<ul class="first flex-elem grows vscroll">
|
||||
<ul class="tree">
|
||||
<li ng-repeat="series in config.series.models">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span
|
||||
class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: series.expanded }"
|
||||
ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
<div ng-controller="PlotOptionsController">
|
||||
<ul class="tree">
|
||||
<h2 title="Plot series display properties in this object">Plot Series</h2>
|
||||
<li ng-repeat="series in config.series.models">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: series.expanded }"
|
||||
ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
</span>
|
||||
<ul class="grid-properties" ng-show="series.expanded">
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The field to be plotted as a value for this series.">Value</div>
|
||||
<div class="grid-cell value">
|
||||
{{series.get('yKey')}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The line rendering style for this series.">Line Style</div>
|
||||
<div class="grid-cell value">{{ {
|
||||
'none': 'None',
|
||||
'linear': 'Linear interpolation',
|
||||
'stepAfter': 'Step After'
|
||||
}[series.get('interpolate')] }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Whether markers are displayed, and their size.">Markers</div>
|
||||
<div class="grid-cell value">
|
||||
{{series.get('markers') ? "Enabled: " + series.get('markerSize') + "px" : "Disabled"}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Display markers visually denoting points in alarm.">Alarm Markers</div>
|
||||
<div class="grid-cell value">
|
||||
{{series.get('alarmMarkers') ? "Enabled" : "Disabled"}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The plot line and marker color for this series.">Color</div>
|
||||
<div class="grid-cell value">
|
||||
<!-- TODO: get this into a class -->
|
||||
<span class="color-swatch"
|
||||
ng-style="{
|
||||
'background': series.get('color').asHexString(),
|
||||
'display': 'inline-block',
|
||||
'border': '1px solid rgba(255, 255, 255, 0.2)',
|
||||
'height': '10px',
|
||||
'width': '10px',
|
||||
'vertical-align': 'middle',
|
||||
'margin-left': '3px',
|
||||
'margin-top': -'2px'
|
||||
}">
|
||||
</span>
|
||||
<div class="l-flex-col inspector-config" ng-show="series.expanded">
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Line Style</div>
|
||||
<div class="value">{{ {
|
||||
'none': 'None',
|
||||
'linear': 'Linear interpolation',
|
||||
'stepAfter': 'Step After'
|
||||
}[series.get('interpolate')] }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Markers</div>
|
||||
<div class="value">
|
||||
{{series.get('markers') ? "On, " + series.get('markerSize') + "px" : "Off"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Color</div>
|
||||
<div class="value">
|
||||
<span class="color-swatch"
|
||||
ng-style="{
|
||||
'background': series.get('color').asHexString(),
|
||||
'display': 'inline-block',
|
||||
'border': '1px solid rgba(255, 255, 255, 0.2)',
|
||||
'height': '10px',
|
||||
'width': '10px',
|
||||
'vertical-align': 'middle',
|
||||
'margin-left': '3px',
|
||||
'margin-top': -'2px'
|
||||
}">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<em class="t-inspector-part-header">Y Axis</em>
|
||||
<div class="inspector-properties first">
|
||||
<div class="label">Label</div>
|
||||
<div class="value">{{ config.yAxis.get('label') }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Autoscale</div>
|
||||
<div class="value">
|
||||
{{ config.yAxis.get('autoscale') ? "On" : "Off" }}
|
||||
{{ config.yAxis.get('autoscale') ? (config.yAxis.get('autoscalePadding') * 100) + "%" : ""}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspector-properties"
|
||||
ng-if="!form.yAxis.autoscale">
|
||||
<div class="label">Min</div>
|
||||
<div class="value">{{ config.yAxis.get('range').min }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties"
|
||||
ng-if="!form.yAxis.autoscale">
|
||||
<div class="label">Max</div>
|
||||
<div class="value">{{ config.yAxis.get('range').max }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<em class="t-inspector-part-header">Legend</em>
|
||||
<div class="inspector-properties first">
|
||||
<div class="label">Position</div>
|
||||
<div class="value">{{ config.legend.get('position') }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Expand by Default</div>
|
||||
<div class="value">{{ config.legend.get('expandByDefault') ? "Yes" : "No" }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Show when collapsed:</div>
|
||||
<div class="value">{{
|
||||
config.legend.get('valueToShowWhenCollapsed').replace('nearest', '')
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Show when expanded:</div>
|
||||
<div class="value comma-list">
|
||||
<span ng-if="config.legend.get('showTimestampWhenExpanded')">Timestamp</span>
|
||||
<span ng-if="config.legend.get('showValueWhenExpanded')">Value</span>
|
||||
<span ng-if="config.legend.get('showMinimumWhenExpanded')">Min</span>
|
||||
<span ng-if="config.legend.get('showMaximumWhenExpanded')">Max</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li><!-- end repeat -->
|
||||
</ul>
|
||||
<div class="grid-properties">
|
||||
<ul class="l-inspector-part">
|
||||
<h2 title="Y axis settings for this object">Y Axis</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Manually override how the Y axis is labeled.">Label</div>
|
||||
<div class="grid-cell value">{{ config.yAxis.get('label') ? config.yAxis.get('label') : "Not defined" }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Automatically scale the Y axis to keep all values in view.">Autoscale</div>
|
||||
<div class="grid-cell value">
|
||||
{{ config.yAxis.get('autoscale') ? "Enabled: " : "Disabled" }}
|
||||
{{ config.yAxis.get('autoscale') ? (config.yAxis.get('autoscalePadding')) : ""}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" ng-if="!form.yAxis.autoscale">
|
||||
<div class="grid-cell label"
|
||||
title="Minimum Y axis value.">Minimum value</div>
|
||||
<div class="grid-cell value">{{ config.yAxis.get('range').min }}</div>
|
||||
</li>
|
||||
<li class="grid-row" ng-if="!form.yAxis.autoscale">
|
||||
<div class="grid-cell label"
|
||||
title="Maximum Y axis value.">Maximum value</div>
|
||||
<div class="grid-cell value">{{ config.yAxis.get('range').max }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="l-inspector-part">
|
||||
<h2 title="Legend settings for this object">Legend</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The position of the legend relative to the plot display area.">Position</div>
|
||||
<div class="grid-cell value capitalize">{{ config.legend.get('position') }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default">Expand by Default</div>
|
||||
<div class="grid-cell value">{{ config.legend.get('expandByDefault') ? "Yes" : "No" }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's collapsed.">Show when collapsed:</div>
|
||||
<div class="grid-cell value">{{
|
||||
config.legend.get('valueToShowWhenCollapsed').replace('nearest', '')
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's expanded.">Show when expanded:</div>
|
||||
<div class="grid-cell value comma-list">
|
||||
<span ng-if="config.legend.get('showTimestampWhenExpanded')">Timestamp</span>
|
||||
<span ng-if="config.legend.get('showValueWhenExpanded')">Value</span>
|
||||
<span ng-if="config.legend.get('showMinimumWhenExpanded')">Min</span>
|
||||
<span ng-if="config.legend.get('showMaximumWhenExpanded')">Max</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,147 +19,140 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="PlotOptionsController"
|
||||
class="flex-elem grows l-inspector-part">
|
||||
<em class="t-inspector-part-header"
|
||||
title="Display properties for this object">
|
||||
Series Options
|
||||
</em>
|
||||
<ul class="first flex-elem grows vscroll">
|
||||
<ul class="tree">
|
||||
<li ng-repeat="series in config.series.models">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span
|
||||
class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: series.expanded }"
|
||||
ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
<div ng-controller="PlotOptionsController">
|
||||
<ul class="tree l-inspector-part">
|
||||
<h2 title="Display properties for this object">Plot Series Options</h2>
|
||||
<li ng-repeat="series in config.series.models">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: series.expanded }"
|
||||
ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<div class="inspector-config" ng-show="series.expanded">
|
||||
<ul>
|
||||
<li>
|
||||
<label>Value:</label>
|
||||
<span class="control">
|
||||
<div class="select">
|
||||
<select ng-model="form.series[$index].yKey">
|
||||
<option ng-repeat="option in form.series[$index].yAxisOptions"
|
||||
value="{{option.value}}"
|
||||
ng-selected="option.value == form.series[$index].yKey">
|
||||
{{option.name}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<mct-representation class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
</span>
|
||||
<ul class="grid-properties" ng-show="series.expanded">
|
||||
<li class="grid-row">
|
||||
<!-- Value to be displayed -->
|
||||
<div class="grid-cell label"
|
||||
title="The field to be plotted as a value for this series.">Value</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="select">
|
||||
<select ng-model="form.series[$index].yKey">
|
||||
<option ng-repeat="option in form.series[$index].yAxisOptions"
|
||||
value="{{option.value}}"
|
||||
ng-selected="option.value == form.series[$index].yKey">
|
||||
{{option.name}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The line rendering style for this series.">Line Style</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="select">
|
||||
<select ng-model="form.series[$index].interpolate">
|
||||
<option value="none">None</option>
|
||||
<option value="linear">Linear interpolate</option>
|
||||
<option value="stepAfter">Step after</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Whether markers are displayed.">Markers</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.series[$index].markers"/></div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Display markers visually denoting points in alarm.">Alarm Markers</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.series[$index].alarmMarkers"/></div>
|
||||
</li>
|
||||
<li class="grid-row" ng-show="form.series[$index].markers || form.series[$index].alarmMarkers">
|
||||
<div class="grid-cell label"
|
||||
title="The size of regular and alarm markers for this series.">Marker Size:</div>
|
||||
<div class="grid-cell value"><input class="sm" type="text" ng-model="form.series[$index].markerSize"/></div>
|
||||
</li>
|
||||
<li class="grid-row"
|
||||
ng-controller="ClickAwayController as toggle"
|
||||
ng-show="form.series[$index].interpolate !== 'none' || form.series[$index].markers">
|
||||
<div class="grid-cell label"
|
||||
title="Manually set the plot line and marker color for this series.">Color</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="s-menu-button" ng-click="toggle.toggle()">
|
||||
<span class="color-swatch" ng-style="{ background: series.get('color').asHexString() }">
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<label>Line Style:</label>
|
||||
<span class="control">
|
||||
<div class="select">
|
||||
<select ng-model="form.series[$index].interpolate">
|
||||
<option value="none">None</option>
|
||||
<option value="linear">Linear interpolate</option>
|
||||
<option value="stepAfter">Step After</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="l-inline-palette" ng-show="toggle.isActive()">
|
||||
<!-- TODO: redo this as a grid -->
|
||||
<div class="l-palette-row" ng-repeat="group in config.series.palette.groups()">
|
||||
<div class="l-palette-item s-palette-item"
|
||||
ng-repeat="color in group"
|
||||
xng-class="{ 'icon-check': series.get('color') === color }"
|
||||
ng-style="{ background: color.asHexString() }"
|
||||
ng-click="setColor(series, color, config.series.models.indexOf(series))">
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Show Markers</label>
|
||||
<span class="control"><input type="checkbox" ng-model="form.series[$index].markers"/></span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Show Alarm Markers</label>
|
||||
<span class="control"><input type="checkbox" ng-model="form.series[$index].alarmMarkers"/></span>
|
||||
</li>
|
||||
<li ng-show="form.series[$index].markers || form.series[$index].alarmMarkers">
|
||||
<label>Marker Size:</label>
|
||||
<span class="control"><input class="sm" type="text" ng-model="form.series[$index].markerSize"/></span>
|
||||
</li>
|
||||
<ul ng-controller="ClickAwayController as toggle" ng-show="form.series[$index].interpolate !== 'none' || form.series[$index].markers">
|
||||
<li>
|
||||
<label>Color:</label>
|
||||
<span class="control">
|
||||
<div class="s-menu-button" ng-click="toggle.toggle()">
|
||||
<span class="color-swatch" ng-style="{ background: series.get('color').asHexString() }">
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li class="connects-to-previous l-inline-palette" ng-show="toggle.isActive()">
|
||||
<div class="l-palette-row" ng-repeat="group in config.series.palette.groups()">
|
||||
<div class="l-palette-item s-palette-item"
|
||||
ng-repeat="color in group"
|
||||
xng-class="{ 'icon-check': series.get('color') === color }"
|
||||
ng-style="{ background: color.asHexString() }"
|
||||
ng-click="setColor(series, color, config.series.models.indexOf(series))">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="grid-properties" ng-show="!!config.series.models.length">
|
||||
<ul class="l-inspector-part">
|
||||
<h2>Y Axis</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Manually override how the Y axis is labeled.">Label</div>
|
||||
<div class="grid-cell value"><input class="control" type="text" ng-model="form.yAxis.label"/></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="l-inspector-part" ng-show="!(form.yAxis.key == 'enum')">
|
||||
<h2>Y Axis Scaling</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Automatically scale the Y axis to keep all values in view.">Autoscale</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.yAxis.autoscale"/></div>
|
||||
</li>
|
||||
<li class="grid-row" ng-show="form.yAxis.autoscale">
|
||||
<div class="grid-cell label"
|
||||
title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc.">
|
||||
Padding</div>
|
||||
<div class="grid-cell value">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.autoscalePadding"/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<form class="inspector-config"
|
||||
ng-show="!!config.series.models.length">
|
||||
<em class="t-inspector-part-header"
|
||||
title="Options for plot axes display">
|
||||
Y Axis
|
||||
</em>
|
||||
<ul>
|
||||
<li>
|
||||
<label>Label:</label>
|
||||
<input class="control" type="text" ng-model="form.yAxis.label"/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul ng-show="!(form.yAxis.key == 'enum')">
|
||||
<li class="section-header">Scaling</li>
|
||||
<li class="controls-first">
|
||||
<label>Autoscale</label>
|
||||
<span class="control">
|
||||
<input type="checkbox" ng-model="form.yAxis.autoscale"/>
|
||||
</span>
|
||||
</li>
|
||||
<li class="form-error"
|
||||
ng-show="!(form.yAxis.key == 'enum') && !form.yAxis.autoscale && validation['form.yAxis.range']">
|
||||
<ul class="l-inspector-part" ng-show="!form.yAxis.autoscale">
|
||||
<div class="grid-span-all form-error"
|
||||
ng-show="!(form.yAxis.key == 'enum') && !form.yAxis.autoscale && validation['form.yAxis.range']">
|
||||
{{ validation['form.yAxis.range'] }}
|
||||
</div>
|
||||
<li class="grid-row force-border">
|
||||
<div class="grid-cell label"
|
||||
title="Minimum Y axis value.">Minimum Value</div>
|
||||
<div class="grid-cell value">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.range.min"/>
|
||||
</div>
|
||||
</li>
|
||||
<li ng-show="!form.yAxis.autoscale">
|
||||
<label>Minimum:</label>
|
||||
<span class="control">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.range.min"/>
|
||||
</span>
|
||||
</li>
|
||||
<li ng-show="!form.yAxis.autoscale">
|
||||
<label>Maximum:</label>
|
||||
<span class="control">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.range.max"/>
|
||||
</span>
|
||||
</li>
|
||||
<li ng-show="form.yAxis.autoscale">
|
||||
<label>Padding:</label>
|
||||
<span class="control">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.autoscalePadding"/>
|
||||
</span>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Maximum Y axis value.">Maximum Value</div>
|
||||
<div class="grid-cell value"><input class="sm" type="text" ng-model="form.yAxis.range.max"/></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<em class="t-inspector-part-header"
|
||||
title="Options for legend display">
|
||||
Legend
|
||||
</em>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<label>Position:</label>
|
||||
<span class="control">
|
||||
<ul class="l-inspector-part">
|
||||
<h2 title="Legend options">Legend</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The position of the legend relative to the plot display area.">Position</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="select">
|
||||
<select ng-model="form.legend.position">
|
||||
<option value="hidden">Hidden</option>
|
||||
@ -169,61 +162,45 @@
|
||||
<option value="left">Left</option>
|
||||
</select>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Expand by default</label>
|
||||
<span class="control">
|
||||
<input type="checkbox" ng-model="form.legend.expandByDefault"/>
|
||||
</span>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default">Expand by default</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.legend.expandByDefault"/></div>
|
||||
</li>
|
||||
<li class="controls-under">
|
||||
<label>Show when collapsed:</label>
|
||||
<span class="control">
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's collapsed.">When collapsed show</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="select">
|
||||
<select ng-model="form.legend.valueToShowWhenCollapsed">
|
||||
<option value="none">None</option>
|
||||
<option value="nearestTimestamp">Nearest Timestamp</option>
|
||||
<option value="nearestValue">Nearest Value</option>
|
||||
<option value="min">Minimum</option>
|
||||
<option value="max">Maximum</option>
|
||||
<option value="none">nothing</option>
|
||||
<option value="nearestTimestamp">nearest timestamp</option>
|
||||
<option value="nearestValue">nearest Value</option>
|
||||
<option value="min">minimum value</option>
|
||||
<option value="max">maximum value</option>
|
||||
</select>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="controls-under">
|
||||
<ul>
|
||||
<li><label>Show when expanded:</label></li>
|
||||
<li class="controls-first">
|
||||
<label>Nearest Timestamp</label>
|
||||
<span class="control">
|
||||
<input type="checkbox"
|
||||
ng-model="form.legend.showTimestampWhenExpanded"/>
|
||||
</span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Nearest Value</label>
|
||||
<span class="control">
|
||||
<input type="checkbox"
|
||||
ng-model="form.legend.showValueWhenExpanded"/>
|
||||
</span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Minimum</label>
|
||||
<span class="control">
|
||||
<input type="checkbox"
|
||||
ng-model="form.legend.showMinimumWhenExpanded"/>
|
||||
</span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Maximum</label>
|
||||
<span class="control">
|
||||
<input type="checkbox"
|
||||
ng-model="form.legend.showMaximumWhenExpanded"/>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's expanded.">When expanded show</div>
|
||||
<div class="grid-cell value">
|
||||
<ul>
|
||||
<li><input type="checkbox"
|
||||
ng-model="form.legend.showTimestampWhenExpanded"/> Nearest timestamp</li>
|
||||
<li><input type="checkbox"
|
||||
ng-model="form.legend.showValueWhenExpanded"/> Nearest value</li>
|
||||
<li><input type="checkbox"
|
||||
ng-model="form.legend.showMinimumWhenExpanded"/> Minimum value</li>
|
||||
<li><input type="checkbox"
|
||||
ng-model="form.legend.showMaximumWhenExpanded"/> Maximum value</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user