Skip to content

Commit aafaa4a

Browse files
ramiyramiy
committed
Bi-directional data and tooltips
1 parent 0b648b3 commit aafaa4a

8 files changed

Lines changed: 104 additions & 41 deletions

File tree

‎dist/charts.css‎

Lines changed: 15 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/charts.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/charts.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/charts/_area.scss‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,12 @@
197197
}
198198

199199
.data {
200-
transform: translateX(50%);
200+
&:dir(ltr) {
201+
transform: translateX(50%);
202+
}
203+
&:dir(rtl) {
204+
transform: translateX(-50%);
205+
}
201206
}
202207

203208
&::after {
@@ -225,7 +230,12 @@
225230
}
226231

227232
.data {
228-
transform: translateX(-50%);
233+
&:dir(ltr) {
234+
transform: translateX(-50%);
235+
}
236+
&:dir(rtl) {
237+
transform: translateX(50%);
238+
}
229239
}
230240

231241
&::after {
@@ -255,7 +265,12 @@
255265
}
256266

257267
.data {
258-
transform: translateX(50%);
268+
&:dir(ltr) {
269+
transform: translateX(50%);
270+
}
271+
&:dir(rtl) {
272+
transform: translateX(-50%);
273+
}
259274
}
260275

261276
&::after {
@@ -283,7 +298,12 @@
283298
}
284299

285300
.data {
286-
transform: translateX(-50%);
301+
&:dir(ltr) {
302+
transform: translateX(-50%);
303+
}
304+
&:dir(rtl) {
305+
transform: translateX(50%);
306+
}
287307
}
288308

289309
&::after {

‎src/charts/_bar.scss‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,14 @@
5252
justify-content: var(--#{ $variable-prefix }data-position, flex-end);
5353

5454
.data.outside {
55-
transform: translateX(100%);
5655
white-space: nowrap;
56+
57+
&:dir(ltr) {
58+
transform: translateX(100%);
59+
}
60+
&:dir(rtl) {
61+
transform: translateX(-100%);
62+
}
5763
}
5864
}
5965
}
@@ -66,8 +72,14 @@
6672
justify-content: var(--#{ $variable-prefix }data-position, flex-start);
6773

6874
.data.outside {
69-
transform: translateX(-100%);
7075
white-space: nowrap;
76+
77+
&:dir(ltr) {
78+
transform: translateX(-100%);
79+
}
80+
&:dir(rtl) {
81+
transform: translateX(100%);
82+
}
7183
}
7284
}
7385
}

‎src/charts/_line.scss‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,12 @@
199199
}
200200

201201
.data {
202-
transform: translateX(50%);
202+
&:dir(ltr) {
203+
transform: translateX(50%);
204+
}
205+
&:dir(rtl) {
206+
transform: translateX(-50%);
207+
}
203208
}
204209

205210
&::after {
@@ -227,7 +232,12 @@
227232
}
228233

229234
.data {
230-
transform: translateX(-50%);
235+
&:dir(ltr) {
236+
transform: translateX(-50%);
237+
}
238+
&:dir(rtl) {
239+
transform: translateX(50%);
240+
}
231241
}
232242

233243
&::after {
@@ -257,7 +267,12 @@
257267
}
258268

259269
.data {
260-
transform: translateX(50%);
270+
&:dir(ltr) {
271+
transform: translateX(50%);
272+
}
273+
&:dir(rtl) {
274+
transform: translateX(-50%);
275+
}
261276
}
262277

263278
&::after {
@@ -285,7 +300,12 @@
285300
}
286301

287302
.data {
288-
transform: translateX(-50%);
303+
&:dir(ltr) {
304+
transform: translateX(-50%);
305+
}
306+
&:dir(rtl) {
307+
transform: translateX(50%);
308+
}
289309
}
290310

291311
&::after {

‎src/components/_data.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,12 @@
108108
--#{ $variable-prefix }data-position: flex-end;
109109

110110
.data {
111-
transform: translateX(100%);
111+
&:dir(ltr) {
112+
transform: translateX(100%);
113+
}
114+
&:dir(rtl) {
115+
transform: translateX(-100%);
116+
}
112117
}
113118
}
114119
}
@@ -121,7 +126,12 @@
121126
--#{ $variable-prefix }data-position: flex-start;
122127

123128
.data {
124-
transform: translateX(-100%);
129+
&:dir(ltr) {
130+
transform: translateX(-100%);
131+
}
132+
&:dir(rtl) {
133+
transform: translateX(100%);
134+
}
125135
}
126136
}
127137
}

‎src/components/_tooltips.scss‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@
77
// Position
88
position: absolute;
99
z-index: 1;
10-
bottom: 50%;
11-
left: 50%;
12-
transform: translateX(-50%); // translateX for both bar & column chart
10+
inset-block-end: 50%;
11+
inset-inline-start: 50%;
1312
width: max-content;
1413
padding: 5px 10px;
1514
border-radius: 6px;
@@ -23,12 +22,20 @@
2322
text-align: center;
2423
font-size: .9rem;
2524

25+
// translateX for both bar & column chart
26+
&:dir(ltr) {
27+
transform: translateX(-50%);
28+
}
29+
&:dir(rtl) {
30+
transform: translateX(50%);
31+
}
32+
2633
&::after {
2734
content: "";
2835
position: absolute;
29-
top: 100%;
30-
left: 50%;
31-
margin-left: -5px;
36+
inset-block-start: 100%;
37+
inset-inline-start: 50%;
38+
margin-inline-start: -5px;
3239
border-width: 5px;
3340
border-style: solid;
3441
border-color: #555 transparent transparent;

0 commit comments

Comments
 (0)