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

* 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

View File

@ -53,7 +53,7 @@ test.describe('Overlay Plot', () => {
await page.locator('.c-click-swatch--menu').click();
await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click();
// 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)');
});

View File

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

View File

@ -251,7 +251,7 @@ mct-plot {
}
&.gl-plot-y-label {
display: block;
display: flex;
left: 0; right: auto; bottom: 0;
text-orientation: mixed;
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 {
&.gl-plot-y { margin-left: 100%; }