mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 12:56:25 +00:00
Plots correctly use configuration set on the parent if they can't their own (#7770)
* For telemetry that cannot have it's own configuration, ensure that it is correct initialized by the parent. * stacked plot test checks that config properties for immutable telemetry points are applied correctly * add tab navigation to inspector tabs * add accessibility metadata to this component * Update title to be on the correct component. Add expand/collapse logic * clean up test * refactor: better a11y for plot forms, fix "expand by default" test, refactor out `plotActions.js` * a11y: aria label for plotOptionsItem * refactor(a11y): PlotOptionsBrowse structure to have better a11y * fixed tests * address comment * reverted to match previous commit --------- Co-authored-by: Hill, John (ARC-TI)[KBR Wyle Services, LLC] <john.c.hill@nasa.gov> Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov> Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
This commit is contained in:
Shefali Joshi
GitHub
parent
6983148aba
commit
db808b4d54
@ -26,7 +26,6 @@ Testsuite for plot autoscale.
|
||||
|
||||
import { createDomainObjectWithDefaults } from '../../../../appActions.js';
|
||||
import { expect, test } from '../../../../pluginFixtures.js';
|
||||
import { setUserDefinedMinAndMax, turnOffAutoscale } from './plotActions.js';
|
||||
test.use({
|
||||
viewport: {
|
||||
width: 1280,
|
||||
@ -62,9 +61,12 @@ test.describe('Autoscale', () => {
|
||||
await page.getByLabel('Edit Object').click();
|
||||
|
||||
await page.getByRole('tab', { name: 'Config' }).click();
|
||||
await turnOffAutoscale(page);
|
||||
|
||||
await setUserDefinedMinAndMax(page, '-2', '2');
|
||||
// turn off autoscale
|
||||
await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();
|
||||
|
||||
await page.getByLabel('Y Axis 1 Minimum value').fill('-2');
|
||||
await page.getByLabel('Y Axis 1 Maximum value').fill('2');
|
||||
|
||||
// save
|
||||
await page.click('button[title="Save"]');
|
||||
|
||||
@ -91,7 +91,7 @@ test.describe('Overlay Plot', () => {
|
||||
// Assert that the legend is collapsed by default
|
||||
await expect(page.getByLabel('Plot Legend Collapsed')).toBeVisible();
|
||||
await expect(page.getByLabel('Plot Legend Expanded')).toBeHidden();
|
||||
await expect(page.getByLabel('Expand by Default')).toHaveText('No');
|
||||
await expect(page.getByLabel('Expand by Default')).toHaveText(/No/);
|
||||
|
||||
expect(await page.getByLabel('Plot Legend Item').count()).toBe(3);
|
||||
|
||||
@ -106,7 +106,7 @@ test.describe('Overlay Plot', () => {
|
||||
await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
|
||||
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
|
||||
await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
|
||||
await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
|
||||
await expect(page.getByLabel('Expand by Default')).toHaveText(/Yes/);
|
||||
await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);
|
||||
|
||||
// Assert that the legend is expanded on page load
|
||||
@ -116,7 +116,7 @@ test.describe('Overlay Plot', () => {
|
||||
await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
|
||||
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
|
||||
await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
|
||||
await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
|
||||
await expect(page.getByLabel('Expand by Default')).toHaveText(/Yes/);
|
||||
await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);
|
||||
});
|
||||
|
||||
@ -144,15 +144,8 @@ test.describe('Overlay Plot', () => {
|
||||
|
||||
// Expand the "Sine Wave Generator" plot series options and enable limit lines
|
||||
await page.getByRole('tab', { name: 'Config' }).click();
|
||||
await page
|
||||
.getByRole('list', { name: 'Plot Series Properties' })
|
||||
.locator('span')
|
||||
.first()
|
||||
.click();
|
||||
await page
|
||||
.getByRole('list', { name: 'Plot Series Properties' })
|
||||
.locator('[title="Display limit lines"]~div input')
|
||||
.check();
|
||||
await page.getByLabel('Expand Sine Wave Generator:').click();
|
||||
await page.getByLabel('Limit lines').check();
|
||||
|
||||
await assertLimitLinesExistAndAreVisible(page);
|
||||
|
||||
@ -215,21 +208,13 @@ test.describe('Overlay Plot', () => {
|
||||
|
||||
// Expand the "Sine Wave Generator" plot series options and enable limit lines
|
||||
await page.getByRole('tab', { name: 'Config' }).click();
|
||||
await page
|
||||
.getByRole('list', { name: 'Plot Series Properties' })
|
||||
.locator('span')
|
||||
.first()
|
||||
.click();
|
||||
await page
|
||||
.getByRole('list', { name: 'Plot Series Properties' })
|
||||
.getByRole('checkbox', { name: 'Limit lines' })
|
||||
.check();
|
||||
await page.getByLabel('Expand Sine Wave Generator:').click();
|
||||
await page.getByLabel('Limit lines').check();
|
||||
|
||||
await assertLimitLinesExistAndAreVisible(page);
|
||||
|
||||
// Save (exit edit mode)
|
||||
await page.locator('button[title="Save"]').click();
|
||||
await page.locator('li[title="Save and Finish Editing"]').click();
|
||||
await page.getByRole('button', { name: 'Save' }).click();
|
||||
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
|
||||
|
||||
const initialCoords = await assertLimitLinesExistAndAreVisible(page);
|
||||
// Resize the chart container by showing the snapshot pane.
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2024, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/**
|
||||
* @param {import('@playwright/test').Page} page
|
||||
*/
|
||||
async function turnOffAutoscale(page) {
|
||||
// uncheck autoscale
|
||||
await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @param {string} min
|
||||
* @param {string} max
|
||||
*/
|
||||
async function setUserDefinedMinAndMax(page, min, max) {
|
||||
// set minimum value
|
||||
await page.getByRole('spinbutton').first().fill(min);
|
||||
// set maximum value
|
||||
await page.getByRole('spinbutton').nth(1).fill(max);
|
||||
}
|
||||
|
||||
export { setUserDefinedMinAndMax, turnOffAutoscale };
|
||||
@ -33,7 +33,6 @@ import {
|
||||
setStartOffset
|
||||
} from '../../../../appActions.js';
|
||||
import { expect, test } from '../../../../pluginFixtures.js';
|
||||
import { setUserDefinedMinAndMax, turnOffAutoscale } from './plotActions.js';
|
||||
|
||||
test.describe('Plot Controls', () => {
|
||||
let overlayPlot;
|
||||
@ -78,9 +77,12 @@ test.describe('Plot Controls', () => {
|
||||
await page.getByLabel('Edit Object').click();
|
||||
|
||||
await page.getByRole('tab', { name: 'Config' }).click();
|
||||
await turnOffAutoscale(page);
|
||||
|
||||
await setUserDefinedMinAndMax(page, '-1', '1');
|
||||
// turn off autoscale
|
||||
await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();
|
||||
|
||||
await page.getByLabel('Y Axis 1 Minimum value').fill('-1');
|
||||
await page.getByLabel('Y Axis 1 Maximum value').fill('1');
|
||||
|
||||
// save
|
||||
await page.click('button[title="Save"]');
|
||||
|
||||
@ -39,19 +39,23 @@ test.describe('Stacked Plot', () => {
|
||||
await page.goto('./', { waitUntil: 'domcontentloaded' });
|
||||
|
||||
stackedPlot = await createDomainObjectWithDefaults(page, {
|
||||
type: 'Stacked Plot'
|
||||
type: 'Stacked Plot',
|
||||
name: 'Stacked Plot'
|
||||
});
|
||||
|
||||
swgA = await createDomainObjectWithDefaults(page, {
|
||||
type: 'Sine Wave Generator',
|
||||
name: 'Sine Wave Generator A',
|
||||
parent: stackedPlot.uuid
|
||||
});
|
||||
swgB = await createDomainObjectWithDefaults(page, {
|
||||
type: 'Sine Wave Generator',
|
||||
name: 'Sine Wave Generator B',
|
||||
parent: stackedPlot.uuid
|
||||
});
|
||||
swgC = await createDomainObjectWithDefaults(page, {
|
||||
type: 'Sine Wave Generator',
|
||||
name: 'Sine Wave Generator C',
|
||||
parent: stackedPlot.uuid
|
||||
});
|
||||
});
|
||||
@ -151,40 +155,80 @@ test.describe('Stacked Plot', () => {
|
||||
await page.getByRole('tab', { name: 'Config' }).click();
|
||||
|
||||
// Click on the 1st plot
|
||||
await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"] canvas`).nth(1).click();
|
||||
await page
|
||||
.getByLabel('Stacked Plot Item Sine Wave Generator A')
|
||||
.getByLabel('Plot Canvas')
|
||||
.click();
|
||||
|
||||
// Assert that the inspector shows the Y Axis properties for swgA
|
||||
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
|
||||
'Plot Series'
|
||||
);
|
||||
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
|
||||
await expect(
|
||||
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
|
||||
).toContainText(swgA.name);
|
||||
page.getByLabel('Inspector Views').getByText('Sine Wave Generator A', { exact: true })
|
||||
).toBeVisible();
|
||||
|
||||
// Click on the 2nd plot
|
||||
await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"] canvas`).nth(1).click();
|
||||
|
||||
await page
|
||||
.getByLabel('Stacked Plot Item Sine Wave Generator B')
|
||||
.getByLabel('Plot Canvas')
|
||||
.click();
|
||||
// Assert that the inspector shows the Y Axis properties for swgB
|
||||
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
|
||||
'Plot Series'
|
||||
);
|
||||
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
|
||||
await expect(
|
||||
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
|
||||
).toContainText(swgB.name);
|
||||
page.getByLabel('Inspector Views').getByText('Sine Wave Generator B', { exact: true })
|
||||
).toBeVisible();
|
||||
|
||||
// Click on the 3rd plot
|
||||
await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"] canvas`).nth(1).click();
|
||||
|
||||
// Assert that the inspector shows the Y Axis properties for swgC
|
||||
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
|
||||
'Plot Series'
|
||||
);
|
||||
await page
|
||||
.getByLabel('Stacked Plot Item Sine Wave Generator C')
|
||||
.getByLabel('Plot Canvas')
|
||||
.click();
|
||||
// Assert that the inspector shows the Y Axis properties for swgB
|
||||
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
|
||||
await expect(
|
||||
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
|
||||
).toContainText(swgC.name);
|
||||
page.getByLabel('Inspector Views').getByText('Sine Wave Generator C', { exact: true })
|
||||
).toBeVisible();
|
||||
|
||||
// Go into edit mode
|
||||
await page.getByLabel('Edit Object').click();
|
||||
|
||||
await page.getByRole('tab', { name: 'Config' }).click();
|
||||
|
||||
// Click on the 1st plot
|
||||
await page.getByLabel('Stacked Plot Item Sine Wave Generator A').click();
|
||||
|
||||
// Assert that the inspector shows the Y Axis properties for swgA
|
||||
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
|
||||
await expect(
|
||||
page.getByLabel('Inspector Views').getByText('Sine Wave Generator A', { exact: true })
|
||||
).toBeVisible();
|
||||
|
||||
// Click on the 2nd plot
|
||||
await page.getByLabel('Stacked Plot Item Sine Wave Generator B').click();
|
||||
|
||||
// Assert that the inspector shows the Y Axis properties for swgB
|
||||
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
|
||||
await expect(
|
||||
page.getByLabel('Inspector Views').getByText('Sine Wave Generator B', { exact: true })
|
||||
).toBeVisible();
|
||||
|
||||
// Click on the 3rd plot
|
||||
await page.getByLabel('Stacked Plot Item Sine Wave Generator C').click();
|
||||
|
||||
// Assert that the inspector shows the Y Axis properties for swgC
|
||||
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
|
||||
await expect(
|
||||
page.getByLabel('Inspector Views').getByText('Sine Wave Generator C', { exact: true })
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('Changing properties of an immutable child plot are applied correctly', async ({ page }) => {
|
||||
await page.goto(stackedPlot.url);
|
||||
|
||||
// Go into edit mode
|
||||
await page.getByLabel('Edit Object').click();
|
||||
@ -192,40 +236,35 @@ test.describe('Stacked Plot', () => {
|
||||
await page.getByRole('tab', { name: 'Config' }).click();
|
||||
|
||||
// Click on canvas for the 1st plot
|
||||
await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"]`).click();
|
||||
await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();
|
||||
|
||||
// Assert that the inspector shows the Y Axis properties for swgA
|
||||
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
|
||||
'Plot Series'
|
||||
);
|
||||
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
|
||||
// Expand config for the series
|
||||
await page.getByLabel('Expand Sine Wave Generator').click();
|
||||
|
||||
// turn off alarm markers
|
||||
await page.getByLabel('Alarm Markers').uncheck();
|
||||
|
||||
// save
|
||||
await page.getByRole('button', { name: 'Save' }).click();
|
||||
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
|
||||
|
||||
// reload page and waitForPlotsToRender
|
||||
await page.reload();
|
||||
await waitForPlotsToRender(page);
|
||||
|
||||
// Click on canvas for the 1st plot
|
||||
await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();
|
||||
|
||||
// Expand config for the series
|
||||
//TODO Fix this locator
|
||||
await page.getByLabel('Expand Sine Wave Generator A generator').click();
|
||||
|
||||
// Assert that alarm markers are still turned off
|
||||
await expect(
|
||||
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
|
||||
).toContainText(swgA.name);
|
||||
|
||||
//Click on canvas for the 2nd plot
|
||||
await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"]`).click();
|
||||
|
||||
// Assert that the inspector shows the Y Axis properties for swgB
|
||||
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
|
||||
'Plot Series'
|
||||
);
|
||||
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
|
||||
await expect(
|
||||
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
|
||||
).toContainText(swgB.name);
|
||||
|
||||
//Click on canvas for the 3rd plot
|
||||
await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"]`).click();
|
||||
|
||||
// Assert that the inspector shows the Y Axis properties for swgC
|
||||
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
|
||||
'Plot Series'
|
||||
);
|
||||
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
|
||||
await expect(
|
||||
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
|
||||
).toContainText(swgC.name);
|
||||
page
|
||||
.getByTitle('Display markers visually denoting points in alarm.')
|
||||
.getByRole('cell', { name: 'Disabled' })
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('the legend toggles between aggregate and per child', async ({ page }) => {
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
-->
|
||||
<template>
|
||||
<ul>
|
||||
<li class="c-tree__item menus-to-left" :class="aliasCss">
|
||||
<li class="c-tree__item menus-to-left" :class="aliasCss" role="treeitem">
|
||||
<span
|
||||
class="c-disclosure-triangle is-enabled flex-elem"
|
||||
:class="expandedCssClass"
|
||||
|
||||
@ -20,109 +20,55 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<template>
|
||||
<div v-if="loaded" class="js-plot-options-browse">
|
||||
<ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
|
||||
<h2 class="--first" title="Plot series display properties in this object">Plot Series</h2>
|
||||
<PlotOptionsItem v-for="series in plotSeries" :key="series.keyString" :series="series" />
|
||||
</ul>
|
||||
<div v-if="plotSeries.length && !isStackedPlotObject" class="grid-properties">
|
||||
<ul
|
||||
<ul v-if="loaded" class="js-plot-options-browse" aria-label="Plot Configuration">
|
||||
<li v-if="showPlotSeries" class="c-tree" aria-labelledby="plot-series-header">
|
||||
<h2 id="plot-series-header" class="--first">Plot Series</h2>
|
||||
<ul aria-label="Plot Series Items" class="l-inspector-part">
|
||||
<PlotOptionsItem v-for="series in plotSeries" :key="series.keyString" :series="series" />
|
||||
</ul>
|
||||
</li>
|
||||
<ul v-if="showYAxisProperties" aria-label="Y Axes" class="l-inspector-part js-yaxis-properties">
|
||||
<li
|
||||
v-for="(yAxis, index) in yAxesWithSeries"
|
||||
:key="`yAxis-${index}`"
|
||||
class="l-inspector-part js-yaxis-properties"
|
||||
:aria-label="
|
||||
yAxesWithSeries.length > 1 ? `Y Axis ${yAxis.id} Properties` : 'Y Axis Properties'
|
||||
"
|
||||
:aria-labelledby="getYAxisHeaderId(index)"
|
||||
>
|
||||
<h2 title="Y axis settings for this object">
|
||||
<h2 :id="getYAxisHeaderId(index)">
|
||||
Y Axis {{ yAxesWithSeries.length > 1 ? yAxis.id : '' }}
|
||||
</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">{{ yAxis.label ? yAxis.label : 'Not defined' }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label" title="Enable log mode.">Log mode</div>
|
||||
<div class="grid-cell value">
|
||||
{{ yAxis.logMode ? 'Enabled' : 'Disabled' }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="Automatically scale the Y axis to keep all values in view."
|
||||
<ul class="grid-properties" :aria-label="`Y Axis ${yAxis.id} Properties`">
|
||||
<li
|
||||
v-for="(prop, key) in yAxisProperties(yAxis)"
|
||||
:key="key"
|
||||
:aria-labelledby="getYAxisPropId(index, prop.label)"
|
||||
class="grid-row"
|
||||
role="grid"
|
||||
>
|
||||
Auto scale
|
||||
</div>
|
||||
<div class="grid-cell value">
|
||||
{{ yAxis.autoscale ? 'Enabled: ' + yAxis.autoscalePadding : 'Disabled' }}
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="!yAxis.autoscale && yAxis.rangeMin !== ''" class="grid-row">
|
||||
<div class="grid-cell label" title="Minimum Y axis value.">Minimum value</div>
|
||||
<div class="grid-cell value">{{ yAxis.rangeMin }}</div>
|
||||
</li>
|
||||
<li v-if="!yAxis.autoscale && yAxis.rangeMax !== ''" class="grid-row">
|
||||
<div class="grid-cell label" title="Maximum Y axis value.">Maximum value</div>
|
||||
<div class="grid-cell value">{{ yAxis.rangeMax }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="isStackedPlotObject || !isNestedWithinAStackedPlot" class="grid-properties">
|
||||
<ul class="l-inspector-part js-legend-properties">
|
||||
<h2 class="--first" title="Legend settings for this object">Legend</h2>
|
||||
<li v-if="isStackedPlotObject" class="grid-row">
|
||||
<div class="grid-cell label" title="Display legends per sub plot.">
|
||||
Show legend per plot
|
||||
</div>
|
||||
<div class="grid-cell value">{{ showLegendsForChildren ? 'Yes' : 'No' }}</div>
|
||||
</li>
|
||||
<li v-if="showLegendDetails" 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">{{ position }}</div>
|
||||
</li>
|
||||
<li v-if="showLegendDetails" class="grid-row">
|
||||
<div class="grid-cell label" title="Hide the legend when the plot is small">
|
||||
Hide when plot small
|
||||
</div>
|
||||
<div class="grid-cell value">{{ hideLegendWhenSmall ? 'Yes' : 'No' }}</div>
|
||||
</li>
|
||||
<li v-if="showLegendDetails" class="grid-row">
|
||||
<div class="grid-cell label" title="Show the legend expanded by default">
|
||||
Expand by Default
|
||||
</div>
|
||||
<div aria-label="Expand by Default" class="grid-cell value">
|
||||
{{ expandByDefault ? 'Yes' : 'No' }}
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="showLegendDetails" 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">{{ valueToShowWhenCollapsed.replace('nearest', '') }}</div>
|
||||
</li>
|
||||
<li v-if="showLegendDetails" 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 v-if="showTimestampWhenExpanded">Timestamp</span>
|
||||
<span v-if="showValueWhenExpanded">Value</span>
|
||||
<span v-if="showMinimumWhenExpanded">Min</span>
|
||||
<span v-if="showMaximumWhenExpanded">Max</span>
|
||||
<span v-if="showUnitsWhenExpanded">Unit</span>
|
||||
<div
|
||||
:id="getYAxisPropId(index, prop.label)"
|
||||
class="grid-cell label"
|
||||
:title="prop.title"
|
||||
role="gridcell"
|
||||
>
|
||||
{{ prop.label }}
|
||||
</div>
|
||||
<div class="grid-cell value" role="gridcell">{{ prop.value }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<li v-if="showLegendProperties" class="grid-properties" aria-label="Legend Configuration">
|
||||
<ul class="l-inspector-part js-legend-properties" aria-labelledby="legend-header">
|
||||
<h2 id="legend-header" class="--first">Legend</h2>
|
||||
<li v-for="(prop, key) in legendProperties" :key="key" class="grid-row">
|
||||
<div class="u-contents" :aria-label="prop.label">
|
||||
<div class="grid-cell label" :title="prop.title">{{ prop.label }}</div>
|
||||
<div class="grid-cell value" :class="prop.class">{{ prop.value }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -173,6 +119,60 @@ export default {
|
||||
},
|
||||
yAxesWithSeries() {
|
||||
return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
|
||||
},
|
||||
showPlotSeries() {
|
||||
return !this.isStackedPlotObject;
|
||||
},
|
||||
showYAxisProperties() {
|
||||
return this.plotSeries.length && !this.isStackedPlotObject;
|
||||
},
|
||||
showLegendProperties() {
|
||||
return this.isStackedPlotObject || !this.isNestedWithinAStackedPlot;
|
||||
},
|
||||
legendProperties() {
|
||||
const props = {};
|
||||
|
||||
if (this.isStackedPlotObject) {
|
||||
props.showLegendsForChildren = {
|
||||
label: 'Show legend per plot',
|
||||
title: 'Display legends per sub plot.',
|
||||
value: this.showLegendsForChildren ? 'Yes' : 'No'
|
||||
};
|
||||
}
|
||||
|
||||
if (this.showLegendDetails) {
|
||||
Object.assign(props, {
|
||||
position: {
|
||||
label: 'Position',
|
||||
title: 'The position of the legend relative to the plot display area.',
|
||||
value: this.position,
|
||||
class: 'capitalize'
|
||||
},
|
||||
hideLegendWhenSmall: {
|
||||
label: 'Hide when plot small',
|
||||
title: 'Hide the legend when the plot is small',
|
||||
value: this.hideLegendWhenSmall ? 'Yes' : 'No'
|
||||
},
|
||||
expandByDefault: {
|
||||
label: 'Expand by Default',
|
||||
title: 'Show the legend expanded by default',
|
||||
value: this.expandByDefault ? 'Yes' : 'No'
|
||||
},
|
||||
valueToShowWhenCollapsed: {
|
||||
label: 'Show when collapsed:',
|
||||
title: "What to display in the legend when it's collapsed.",
|
||||
value: this.valueToShowWhenCollapsed.replace('nearest', '')
|
||||
},
|
||||
expandedValues: {
|
||||
label: 'Show when expanded:',
|
||||
title: "What to display in the legend when it's expanded.",
|
||||
value: this.getExpandedValues(),
|
||||
class: 'comma-list'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return props;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -282,6 +282,76 @@ export default {
|
||||
if (foundYAxis) {
|
||||
foundYAxis.seriesCount = foundYAxis.seriesCount + updateCount;
|
||||
}
|
||||
},
|
||||
getYAxisHeaderId(index) {
|
||||
return `yAxis-${index}-header`;
|
||||
},
|
||||
|
||||
getYAxisPropId(index, label) {
|
||||
return `y-axis-${index}-${label.toLowerCase().replace(' ', '-')}`;
|
||||
},
|
||||
|
||||
yAxisAriaLabel(yAxis) {
|
||||
return this.yAxesWithSeries.length > 1
|
||||
? `Y Axis ${yAxis.id} Properties`
|
||||
: 'Y Axis Properties';
|
||||
},
|
||||
yAxisProperties(yAxis) {
|
||||
const props = {
|
||||
label: {
|
||||
label: 'Label',
|
||||
title: 'Manually override how the Y axis is labeled.',
|
||||
value: yAxis.label ? yAxis.label : 'Not defined'
|
||||
},
|
||||
logMode: {
|
||||
label: 'Log mode',
|
||||
title: 'Enable log mode.',
|
||||
value: yAxis.logMode ? 'Enabled' : 'Disabled'
|
||||
},
|
||||
autoscale: {
|
||||
label: 'Auto scale',
|
||||
title: 'Automatically scale the Y axis to keep all values in view.',
|
||||
value: yAxis.autoscale ? `Enabled: ${yAxis.autoscalePadding}` : 'Disabled'
|
||||
}
|
||||
};
|
||||
|
||||
if (!yAxis.autoscale) {
|
||||
if (yAxis.rangeMin !== '') {
|
||||
props.rangeMin = {
|
||||
label: 'Minimum value',
|
||||
title: 'Minimum Y axis value.',
|
||||
value: yAxis.rangeMin
|
||||
};
|
||||
}
|
||||
if (yAxis.rangeMax !== '') {
|
||||
props.rangeMax = {
|
||||
label: 'Maximum value',
|
||||
title: 'Maximum Y axis value.',
|
||||
value: yAxis.rangeMax
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return props;
|
||||
},
|
||||
getExpandedValues() {
|
||||
const values = [];
|
||||
if (this.showTimestampWhenExpanded) {
|
||||
values.push('Timestamp');
|
||||
}
|
||||
if (this.showValueWhenExpanded) {
|
||||
values.push('Value');
|
||||
}
|
||||
if (this.showMinimumWhenExpanded) {
|
||||
values.push('Min');
|
||||
}
|
||||
if (this.showMaximumWhenExpanded) {
|
||||
values.push('Max');
|
||||
}
|
||||
if (this.showUnitsWhenExpanded) {
|
||||
values.push('Unit');
|
||||
}
|
||||
return values.join(', ');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
-->
|
||||
<template>
|
||||
<div v-if="loaded" class="js-plot-options-edit">
|
||||
<ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
|
||||
<h2 class="--first" title="Display properties for this object">Plot Series</h2>
|
||||
<ul v-if="!isStackedPlotObject" class="c-tree" role="tree">
|
||||
<h2 class="--first" title="Display properties for this Plot Series object">Plot Series</h2>
|
||||
<li v-for="series in plotSeries" :key="series.keyString">
|
||||
<series-form :series="series" @series-updated="updateSeriesConfigForObject" />
|
||||
</li>
|
||||
@ -33,15 +33,18 @@
|
||||
:key="`yAxis-${index}`"
|
||||
class="grid-properties js-yaxis-grid-properties"
|
||||
:y-axis="config.yAxis"
|
||||
role="group"
|
||||
aria-labelledby="y-axis-group"
|
||||
@series-updated="updateSeriesConfigForObject"
|
||||
/>
|
||||
<ul
|
||||
v-if="isStackedPlotObject || !isStackedPlotNestedObject"
|
||||
class="l-inspector-part"
|
||||
aria-label="Legend Properties"
|
||||
role="tree"
|
||||
>
|
||||
<h2 class="--first" title="Legend options">Legend</h2>
|
||||
<legend-form class="grid-properties" :legend="config.legend" />
|
||||
<legend-form role="treeitem" tabindex="0" class="grid-properties" :legend="config.legend" />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -83,7 +86,10 @@ export default {
|
||||
);
|
||||
},
|
||||
yAxesIds() {
|
||||
return !this.isStackedPlotObject && this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
|
||||
if (this.isStackedPlotObject) {
|
||||
return [];
|
||||
}
|
||||
return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -20,98 +20,93 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<template>
|
||||
<ul>
|
||||
<li class="c-tree__item menus-to-left" :class="isAliasClass">
|
||||
<span
|
||||
class="c-disclosure-triangle is-enabled flex-elem"
|
||||
:class="expandedCssClass"
|
||||
@click="toggleExpanded"
|
||||
>
|
||||
</span>
|
||||
<div class="c-object-label" :class="statusClass">
|
||||
<div class="c-object-label__type-icon" :class="getSeriesClass">
|
||||
<span class="is-status__indicator" title="This item is missing or suspect"></span>
|
||||
</div>
|
||||
<div class="c-object-label__name">{{ series.domainObject.name }}</div>
|
||||
<li class="c-tree__item menus-to-left" :class="isAliasClass" :aria-label="ariaLabel">
|
||||
<span
|
||||
class="c-disclosure-triangle is-enabled flex-elem"
|
||||
:class="expandedCssClass"
|
||||
role="button"
|
||||
:aria-label="ariaLabelExpandCollapse"
|
||||
tabindex="0"
|
||||
@click="toggleExpanded"
|
||||
@keydown.enter="toggleExpanded"
|
||||
></span>
|
||||
<div class="c-object-label" :class="statusClass">
|
||||
<div class="c-object-label__type-icon" :class="getSeriesClass">
|
||||
<span class="is-status__indicator" title="This item is missing or suspect"></span>
|
||||
</div>
|
||||
</li>
|
||||
<li v-show="expanded" class="c-tree__item menus-to-left" role="table">
|
||||
<ul class="grid-properties js-plot-options-browse-properties" role="rowgroup">
|
||||
<li class="grid-row" role="row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="The field to be plotted as a value for this series."
|
||||
role="cell"
|
||||
>
|
||||
Value
|
||||
</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{ yKey }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" role="row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="The rendering method to join lines for this series."
|
||||
role="cell"
|
||||
>
|
||||
Line Method
|
||||
</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{
|
||||
{
|
||||
none: 'None',
|
||||
linear: 'Linear interpolation',
|
||||
stepAfter: 'Step After'
|
||||
}[interpolate]
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" role="row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="Whether markers are displayed, and their size."
|
||||
role="cell"
|
||||
>
|
||||
Markers
|
||||
</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{ markerOptionsDisplayText }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" role="row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="Display markers visually denoting points in alarm."
|
||||
role="cell"
|
||||
>
|
||||
Alarm Markers
|
||||
</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{ alarmMarkers ? 'Enabled' : 'Disabled' }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" role="row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="Display lines visually denoting alarm limits."
|
||||
role="cell"
|
||||
>
|
||||
Limit Lines
|
||||
</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{ limitLines ? 'Enabled' : 'Disabled' }}
|
||||
</div>
|
||||
</li>
|
||||
<ColorSwatch
|
||||
:current-color="seriesHexColor"
|
||||
edit-title="Manually set the plot line and marker color for this series."
|
||||
view-title="The plot line and marker color for this series."
|
||||
short-label="Color"
|
||||
/>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="c-object-label__name">{{ series.domainObject.name }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li v-show="expanded" class="c-tree__item menus-to-left" role="table">
|
||||
<ul class="grid-properties js-plot-options-browse-properties" role="rowgroup">
|
||||
<li class="grid-row" role="row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="The field to be plotted as a value for this series."
|
||||
role="cell"
|
||||
>
|
||||
Value
|
||||
</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{ yKey }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" role="row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="The rendering method to join lines for this series."
|
||||
role="cell"
|
||||
>
|
||||
Line Method
|
||||
</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{
|
||||
{
|
||||
none: 'None',
|
||||
linear: 'Linear interpolation',
|
||||
stepAfter: 'Step After'
|
||||
}[interpolate]
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" role="row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="Whether markers are displayed, and their size."
|
||||
role="cell"
|
||||
>
|
||||
Markers
|
||||
</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{ markerOptionsDisplayText }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" role="row" title="Display markers visually denoting points in alarm.">
|
||||
<div class="grid-cell label" role="cell">Alarm Markers</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{ alarmMarkers ? 'Enabled' : 'Disabled' }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" role="row">
|
||||
<div
|
||||
class="grid-cell label"
|
||||
title="Display lines visually denoting alarm limits."
|
||||
role="cell"
|
||||
>
|
||||
Limit Lines
|
||||
</div>
|
||||
<div class="grid-cell value" role="cell">
|
||||
{{ limitLines ? 'Enabled' : 'Disabled' }}
|
||||
</div>
|
||||
</li>
|
||||
<ColorSwatch
|
||||
:current-color="seriesHexColor"
|
||||
edit-title="Manually set the plot line and marker color for this series."
|
||||
view-title="The plot line and marker color for this series."
|
||||
short-label="Color"
|
||||
/>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -137,6 +132,15 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ariaLabel() {
|
||||
return this.series?.domainObject?.name ?? '';
|
||||
},
|
||||
ariaLabelExpandCollapse() {
|
||||
const name = this.series.domainObject.name ? ` ${this.series.domainObject.name}` : '';
|
||||
const type = this.series.domainObject.type ? ` ${this.series.domainObject.type}` : '';
|
||||
|
||||
return `${this.expanded ? 'Collapse' : 'Expand'}${name}${type}`;
|
||||
},
|
||||
isAliasClass() {
|
||||
let cssClass = '';
|
||||
const domainObjectPath = [this.series.domainObject, ...this.path];
|
||||
|
||||
@ -21,15 +21,19 @@
|
||||
-->
|
||||
<template>
|
||||
<ul>
|
||||
<li class="c-tree__item menus-to-left" :class="isAliasCss">
|
||||
<li class="c-tree__item menus-to-left" :class="isAliasCss" role="treeitem">
|
||||
<span
|
||||
class="c-disclosure-triangle is-enabled flex-elem"
|
||||
:class="expandedCssClass"
|
||||
role="button"
|
||||
:aria-label="ariaLabelValue"
|
||||
tabindex="0"
|
||||
@click="toggleExpanded"
|
||||
@keydown.enter="toggleExpanded"
|
||||
>
|
||||
</span>
|
||||
<div :class="objectLabelCss">
|
||||
<div class="c-object-label__type-icon" :class="[seriesCss]">
|
||||
<div class="c-object-label__type-icon" :class="seriesCss">
|
||||
<span class="is-status__indicator" title="This item is missing or suspect"></span>
|
||||
</div>
|
||||
<div class="c-object-label__name">{{ series.domainObject.name }}</div>
|
||||
@ -43,12 +47,7 @@
|
||||
</div>
|
||||
<div class="grid-cell value">
|
||||
<select v-model="yKey" @change="updateForm('yKey')">
|
||||
<option
|
||||
v-for="option in yKeyOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
:selected="option.value == yKey"
|
||||
>
|
||||
<option v-for="option in yKeyOptions" :key="option.value" :value="option.value">
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
@ -84,10 +83,15 @@
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label" title="Display markers visually denoting points in alarm.">
|
||||
Alarm Markers
|
||||
<label for="alarm-markers-checkbox">Alarm Markers</label>
|
||||
</div>
|
||||
<div class="grid-cell value">
|
||||
<input v-model="alarmMarkers" type="checkbox" @change="updateForm('alarmMarkers')" />
|
||||
<input
|
||||
id="alarm-markers-checkbox"
|
||||
v-model="alarmMarkers"
|
||||
type="checkbox"
|
||||
@change="updateForm('alarmMarkers')"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
@ -169,18 +173,24 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ariaLabelValue() {
|
||||
const name = this.series.domainObject.name ? ` ${this.series.domainObject.name}` : '';
|
||||
const type = this.series.domainObject.type ? ` ${this.series.domainObject.type}` : '';
|
||||
|
||||
return `${this.expanded ? 'Collapse' : 'Expand'}${name}${type}`;
|
||||
},
|
||||
colorPalette() {
|
||||
return this.series.collection.palette.groups();
|
||||
},
|
||||
objectLabelCss() {
|
||||
return this.status ? `c-object-label is-status--${this.status}'` : 'c-object-label';
|
||||
return this.status ? `c-object-label is-status--${this.status}` : 'c-object-label';
|
||||
},
|
||||
seriesCss() {
|
||||
let type = this.openmct.types.get(this.series.domainObject.type);
|
||||
const type = this.openmct.types.get(this.series.domainObject.type);
|
||||
const baseClass = 'c-object-label__type-icon';
|
||||
const typeClass = type.definition.cssClass || '';
|
||||
|
||||
return type.definition.cssClass
|
||||
? `c-object-label__type-icon ${type.definition.cssClass}`
|
||||
: `c-object-label__type-icon`;
|
||||
return `${baseClass} ${typeClass}`.trim();
|
||||
},
|
||||
isAliasCss() {
|
||||
let cssClass = '';
|
||||
|
||||
@ -31,25 +31,36 @@
|
||||
Label
|
||||
</div>
|
||||
<div class="grid-cell value">
|
||||
<input v-model="label" class="c-input--flex" type="text" @change="updateForm('label')" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div id="log-mode-checkbox" class="grid-cell label" title="Enable log mode.">Log mode</div>
|
||||
<div class="grid-cell value">
|
||||
<!-- eslint-disable-next-line vue/html-self-closing -->
|
||||
<label :for="`y-axis-${id}-label`" class="visually-hidden">Y Axis {{ id }} Label</label>
|
||||
<input
|
||||
v-model="logMode"
|
||||
class="js-log-mode-input"
|
||||
aria-labelledby="log-mode-checkbox"
|
||||
type="checkbox"
|
||||
@change="updateForm('logMode')"
|
||||
:id="`y-axis-${id}-label`"
|
||||
v-model="label"
|
||||
class="c-input--flex"
|
||||
type="text"
|
||||
@change="updateForm('label')"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div :id="`log-mode-checkbox-${id}`" class="grid-cell label" title="Enable log mode.">
|
||||
Log mode
|
||||
</div>
|
||||
<div class="grid-cell value">
|
||||
<input
|
||||
:id="`log-mode-input-${id}`"
|
||||
v-model="logMode"
|
||||
class="js-log-mode-input"
|
||||
type="checkbox"
|
||||
@change="updateForm('logMode')"
|
||||
/>
|
||||
<label :for="`log-mode-input-${id}`" class="visually-hidden"
|
||||
>Y Axis {{ id }} Log mode</label
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div
|
||||
id="autoscale-checkbox"
|
||||
:id="`autoscale-checkbox-${id}`"
|
||||
class="grid-cell label"
|
||||
title="Automatically scale the Y axis to keep all values in view."
|
||||
>
|
||||
@ -57,11 +68,14 @@
|
||||
</div>
|
||||
<div class="grid-cell value">
|
||||
<input
|
||||
:id="`autoscale-input-${id}`"
|
||||
v-model="autoscale"
|
||||
type="checkbox"
|
||||
aria-labelledby="autoscale-checkbox"
|
||||
@change="updateForm('autoscale')"
|
||||
/>
|
||||
<label :for="`autoscale-input-${id}`" class="visually-hidden"
|
||||
>Y Axis {{ id }} Auto scale</label
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li v-show="autoscale" class="grid-row">
|
||||
@ -72,7 +86,11 @@
|
||||
Padding
|
||||
</div>
|
||||
<div class="grid-cell value">
|
||||
<label :for="`autoscale-padding-${id}`" class="visually-hidden"
|
||||
>Y Axis {{ id }} Autoscale Padding</label
|
||||
>
|
||||
<input
|
||||
:id="`autoscale-padding-${id}`"
|
||||
v-model="autoscalePadding"
|
||||
class="c-input--flex"
|
||||
type="text"
|
||||
@ -88,8 +106,12 @@
|
||||
<li class="grid-row force-border">
|
||||
<div class="grid-cell label" title="Minimum Y axis value.">Minimum Value</div>
|
||||
<div class="grid-cell value">
|
||||
<label :for="`range-min-${id}`" class="visually-hidden"
|
||||
>Y Axis {{ id }} Minimum value</label
|
||||
>
|
||||
<input
|
||||
v-model.lazy="rangeMin"
|
||||
:id="`range-min-${id}`"
|
||||
v-model="rangeMin"
|
||||
class="c-input--flex"
|
||||
type="number"
|
||||
@change="updateForm('range')"
|
||||
@ -99,8 +121,12 @@
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label" title="Maximum Y axis value.">Maximum Value</div>
|
||||
<div class="grid-cell value">
|
||||
<label :for="`range-max-${id}`" class="visually-hidden"
|
||||
>Y Axis {{ id }} Maximum value</label
|
||||
>
|
||||
<input
|
||||
v-model.lazy="rangeMax"
|
||||
:id="`range-max-${id}`"
|
||||
v-model="rangeMax"
|
||||
class="c-input--flex"
|
||||
type="number"
|
||||
@change="updateForm('range')"
|
||||
|
||||
@ -122,8 +122,11 @@ export default {
|
||||
'grid-lines',
|
||||
'plot-y-tick-width'
|
||||
],
|
||||
mounted() {
|
||||
beforeMount() {
|
||||
// We must do this before mounted to use any series configuration options set at the stacked plot level
|
||||
this.updateView();
|
||||
},
|
||||
mounted() {
|
||||
this.isEditing = this.openmct.editor.isEditing();
|
||||
this.openmct.editor.on('isEditing', this.setEditState);
|
||||
this.setupClockChangedEvent((domainObject) => {
|
||||
|
||||
@ -28,8 +28,10 @@
|
||||
role="tab"
|
||||
class="c-inspector__tab c-tab"
|
||||
:class="{ 'is-current': isSelected(tab) }"
|
||||
tabindex="0"
|
||||
:title="tab.name"
|
||||
@click="selectTab(tab)"
|
||||
@keydown.enter="selectTab(tab)"
|
||||
>
|
||||
<span class="c-inspector__tab-name c-tab__name">{{ tab.name }}</span>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user