ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-05 00:50:49 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Plots] Fix wrapping of Y Axis when height is small (#6264)

Browse Source 
* New branch to fix y-axis icons

* test: fix locator

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
This commit is contained in:
Rukmini Bose (Ruki) 2023-05-17 13:32:05 -05:00 committed by GitHub
parent b39d5e8bcc
commit 5df7971438
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
View File

@ -53,7 +53,7 @@ test.describe('Overlay Plot', () => {
await page.locator('.c-click-swatch--menu').click(); await page.locator('.c-click-swatch--menu').click();
await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click(); await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click();
// gets color for swatch located in legend // gets color for swatch located in legend
const seriesColorSwatch = page.locator('.gl-plot-label > .plot-series-color-swatch'); const seriesColorSwatch = page.locator('.gl-plot-y-label-swatch-container > .plot-series-color-swatch');
await expect(seriesColorSwatch).toHaveCSS('background-color', 'rgb(255, 166, 61)'); await expect(seriesColorSwatch).toHaveCSS('background-color', 'rgb(255, 166, 61)');
}); });

2
src/plugins/plot/axis/YAxis.vue
View File

@ -28,6 +28,7 @@
<div <div
class="gl-plot-label gl-plot-y-label" class="gl-plot-label gl-plot-y-label"
> >
<div class="gl-plot-y-label-swatch-container">
<span <span
v-for="(colorAsHexString, index) in seriesColors" v-for="(colorAsHexString, index) in seriesColors"
:key="`${colorAsHexString}-${index}`" :key="`${colorAsHexString}-${index}`"
@ -35,6 +36,7 @@
:style="{ 'background-color': colorAsHexString }" :style="{ 'background-color': colorAsHexString }"
> >
</span> </span>
</div>
<span <span
:class="{'icon-gear-after': (yKeyOptions.length > 1 && singleSeries)}" :class="{'icon-gear-after': (yKeyOptions.length > 1 && singleSeries)}"
>{{ canShowYAxisLabel ? yAxisLabel : `Y Axis ${id}` }}</span> >{{ canShowYAxisLabel ? yAxisLabel : `Y Axis ${id}` }}</span>

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

@ -251,7 +251,7 @@ mct-plot {
} }
&.gl-plot-y-label { &.gl-plot-y-label {
display: block; display: flex;
left: 0; right: auto; bottom: 0; left: 0; right: auto; bottom: 0;
text-orientation: mixed; text-orientation: mixed;
writing-mode: vertical-lr; writing-mode: vertical-lr;
@ -275,7 +275,11 @@ mct-plot {
} }
} }
} }
.gl-plot-y-label-swatch-container{
display: flex;
flex-direction: row;
overflow: auto;
}
.plot-yaxis-right { .plot-yaxis-right {
&.gl-plot-y { margin-left: 100%; } &.gl-plot-y { margin-left: 100%; }