diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 96a11b45d5..5fee11dda1 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -243,6 +243,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa .gl-plot-tick, .tick-label { + direction: rtl; + unicode-bidi:bidi-override; font-size: 0.7rem; position: absolute; overflow: hidden; diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 19d2d6fcb4..594bb082f6 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -6874,12 +6874,14 @@ table { /* line 244, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick, .tick-label { + direction: rtl; + unicode-bidi: bidi-override; font-size: 0.7rem; position: absolute; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - /* line 251, ../../../../general/res/sass/plots/_plots-main.scss */ + /* line 253, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x, .tick-label.gl-plot-x-tick-label, .tick-label.tick-label-x { @@ -6890,7 +6892,7 @@ table { width: 20%; margin-left: -10%; text-align: center; } - /* line 261, ../../../../general/res/sass/plots/_plots-main.scss */ + /* line 263, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y, .tick-label.gl-plot-y-tick-label, .tick-label.tick-label-y { @@ -6900,18 +6902,18 @@ table { margin-bottom: -0.5em; text-align: right; } -/* line 272, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 274, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label { top: 5px; } -/* line 275, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 277, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label { right: 5px; left: 5px; } -/* line 282, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */ .tick-label.tick-label-x { top: 0; } -/* line 285, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 287, ../../../../general/res/sass/plots/_plots-main.scss */ .tick-label.tick-label-y { right: 0; left: 0; } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 68bb1eb262..3a914e488b 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -6747,12 +6747,14 @@ table { /* line 244, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick, .tick-label { + direction: rtl; + unicode-bidi: bidi-override; font-size: 0.7rem; position: absolute; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - /* line 251, ../../../../general/res/sass/plots/_plots-main.scss */ + /* line 253, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x, .tick-label.gl-plot-x-tick-label, .tick-label.tick-label-x { @@ -6763,7 +6765,7 @@ table { width: 20%; margin-left: -10%; text-align: center; } - /* line 261, ../../../../general/res/sass/plots/_plots-main.scss */ + /* line 263, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y, .tick-label.gl-plot-y-tick-label, .tick-label.tick-label-y { @@ -6773,18 +6775,18 @@ table { margin-bottom: -0.5em; text-align: right; } -/* line 272, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 274, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label { top: 5px; } -/* line 275, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 277, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label { right: 5px; left: 5px; } -/* line 282, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */ .tick-label.tick-label-x { top: 0; } -/* line 285, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 287, ../../../../general/res/sass/plots/_plots-main.scss */ .tick-label.tick-label-y { right: 0; left: 0; } diff --git a/platform/features/plot/src/elements/PlotTickGenerator.js b/platform/features/plot/src/elements/PlotTickGenerator.js index 8fa957fae7..57c6f6c5cf 100644 --- a/platform/features/plot/src/elements/PlotTickGenerator.js +++ b/platform/features/plot/src/elements/PlotTickGenerator.js @@ -62,7 +62,9 @@ define( for (i = 0; i < count; i += 1) { result.push({ //If data to show, display label for each tick line, otherwise show lines but suppress labels. - label: span > 0 ? format(i * step + start) : '' + // Make the tick value have its ellipsis on the least significant left side by reversing it here, + // and then reversing it again via CSS. Relevant styling in _plots-main.scss. + label: span > 0 ? format(i * step + start).split('').reverse().join('') : '' }); }