realchart 0.9.8 → 0.9.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -23,86 +23,86 @@
23
23
 
24
24
  /** palette */
25
25
  .rct-root {
26
- --color-1: #6b76f2;
27
- --color-2: #00d3e4;
28
- --color-3: #fe3ea5;
29
- --color-4: #ffd938;
30
- --color-5: #8650cc;
31
- --color-6: #e30922;
32
- --color-7: #00E272;
33
- --color-8: #FF7300;
34
- --color-9: #5948ff;
35
- --color-10: #e700fe;
36
- --color-11: #00b8ac;
37
- --color-12: #2da0f9;
38
- }
39
- .rct-root[data-palette='gray'] {
26
+ --color-1: #0097e2;
27
+ --color-2: #5eb3e4;
28
+ --color-3: #ff5c35;
29
+ --color-4: #ff9f00;
30
+ --color-5: #ffd938;
31
+ --color-6: #00ac69;
32
+ --color-7: #91cc39;
33
+ --color-8: #8fc6a9;
34
+ --color-9: #c45db9;
35
+ --color-10: #ef5e99;
36
+ --color-11: #afa4c6;
37
+ --color-12: #5b63aa;
38
+ }
39
+ .rct-root[data-palette="gray"] {
40
40
  --color-1: #464646;
41
- --color-2: #61666A;
42
- --color-3: #6F6F6D;
43
- --color-4: #82898F;
44
- --color-5: #8D8D8B;
45
- --color-6: #9EA7A6;
46
- --color-7: #ACABA7;
47
- --color-8: #BCBCBC;
48
- --color-9: #C5C9CA;
49
- --color-10: #D9D4CE;
50
- --color-11: #DEDEDE;
41
+ --color-2: #61666a;
42
+ --color-3: #6f6f6d;
43
+ --color-4: #82898f;
44
+ --color-5: #8d8d8b;
45
+ --color-6: #9ea7a6;
46
+ --color-7: #acaba7;
47
+ --color-8: #bcbcbc;
48
+ --color-9: #c5c9ca;
49
+ --color-10: #d9d4ce;
50
+ --color-11: #dedede;
51
51
  --color-12: #e8ecef;
52
52
  }
53
- .rct-root[data-palette='warm'] {
54
- --color-1: #CCAACB;
55
- --color-2: #8FC9CA;
56
- --color-3: #97C1A9;
57
- --color-4: #F3B0C2;
58
- --color-5: #FFC7A2;
59
- --color-6: #D97872;
60
- --color-7: #8BA3C5;
61
- --color-8: #DC97AA;
62
- --color-9: #9C9CC2;
63
- --color-10: #B7CADB;
64
- --color-11: #C7C19D;
65
- --color-12: #FBE693;
66
- }
67
- .rct-root[data-palette='cool'] {
68
- --color-1: #EB455F;
69
- --color-2: #FFD49C;
70
- --color-3: #A4CADD;
71
- --color-4: #3E4977;
72
- --color-5: #FAAB78;
73
- --color-6: #BFACE2;
74
- --color-7: #A0BCC2;
75
- --color-8: #FF7396;
76
- --color-9: #6DC7C9;
77
- --color-10: #7895CB;
78
- --color-11: #FEA1A1;
79
- --color-12: #90C8AC;
80
- }
81
- .rct-root[data-palette='forest'] {
82
- --color-1: #FFB94A;
83
- --color-2: #94CFD3;
84
- --color-3: #1B9C85;
85
- --color-4: #7FB47E;
86
- --color-5: #9AA77B;
87
- --color-6: #FBD872;
88
- --color-7: #A4C1AD;
89
- --color-8: #EAD9A7;
90
- --color-9: #7A9083;
91
- --color-10: #7FBCAA;
92
- --color-11: #B6BA99;
93
- --color-12: #4D6166;
53
+ .rct-root[data-palette="warm"] {
54
+ --color-1: #ccaacb;
55
+ --color-2: #8fc9ca;
56
+ --color-3: #97c1a9;
57
+ --color-4: #f3b0c2;
58
+ --color-5: #ffc7a2;
59
+ --color-6: #d97872;
60
+ --color-7: #8ba3c5;
61
+ --color-8: #dc97aa;
62
+ --color-9: #9c9cc2;
63
+ --color-10: #b7cadb;
64
+ --color-11: #c7c19d;
65
+ --color-12: #fbe693;
66
+ }
67
+ .rct-root[data-palette="cool"] {
68
+ --color-1: #eb455f;
69
+ --color-2: #ffd49c;
70
+ --color-3: #a4cadd;
71
+ --color-4: #3e4977;
72
+ --color-5: #faab78;
73
+ --color-6: #bface2;
74
+ --color-7: #a0bcc2;
75
+ --color-8: #ff7396;
76
+ --color-9: #6dc7c9;
77
+ --color-10: #7895cb;
78
+ --color-11: #fea1a1;
79
+ --color-12: #90c8ac;
80
+ }
81
+ .rct-root[data-palette="forest"] {
82
+ --color-1: #666d4d;
83
+ --color-2: #7f736c;
84
+ --color-3: #a9a389;
85
+ --color-4: #d0b081;
86
+ --color-5: #8da34e;
87
+ --color-6: #4f5d3a;
88
+ --color-7: #9d7448;
89
+ --color-8: #a7afa2;
90
+ --color-9: #9fa871;
91
+ --color-10: #656146;
92
+ --color-11: #8d877b;
93
+ --color-12: #422c1e;
94
94
  }
95
95
 
96
96
  /** theme */
97
97
  .rct-control {
98
98
  --rct-background: none;
99
99
  }
100
- .rct-control[data-theme='dark'] {
100
+ .rct-control[data-theme="dark"] {
101
101
  --rct-background: black;
102
102
  }
103
103
 
104
104
  .rct-root {
105
- --rct-font-family: AppleSDGothicNeo-Light, 'HelveticaNeue', 'Malgun Gothic', '맑은 고딕', sans-serif;
105
+ --rct-font-family: AppleSDGothicNeo-Light, "HelveticaNeue", "Malgun Gothic", "맑은 고딕", sans-serif;
106
106
  --rct-font-size: 16px;
107
107
 
108
108
  --rct-focus-border: red;
@@ -111,7 +111,7 @@
111
111
  --rct-title-fill: #333;
112
112
  --rct-subtitle-fill: #333;
113
113
 
114
- --rct-plot-background-stroke: #ddd;
114
+ --rct-body-background-stroke: none;
115
115
 
116
116
  --rct-axis-title-fill: #333;
117
117
  --rct-axis-line-stroke: #aaa;
@@ -121,6 +121,10 @@
121
121
  --rct-axis-grid-line-stroke-start: none;
122
122
  --rct-axis-grid-line-stroke-end: none;
123
123
  --rct-axis-grid-line-stroke-width: 1px;
124
+ --rct-axis-scrollbar-track-fill: #fdfdfd;
125
+ --rct-axis-scrollbar-track-stroke: #aaa;
126
+ --rct-axis-scrollbar-thumb-fill: lightgray;
127
+ --rct-axis-scrollbar-rx: 4px;
124
128
 
125
129
  --rct-legend-background-stroke: none;
126
130
  --rct-legend-item-fill: #333;
@@ -130,7 +134,8 @@
130
134
  --rct-point-label-font-size: 0.8em;
131
135
  --rct-point-label-font-weight: bold;
132
136
  --rct-point-label-stroke: none;
133
- --rct-point-label-fill: #333;
137
+ --rct-point-label-fill: #777;
138
+ --rct-point-label-fill-outlined: #333;
134
139
 
135
140
  --rct-credits-fill: #777;
136
141
 
@@ -146,6 +151,11 @@
146
151
  --rct-clock-gauge-minor-tick-stroke: #555;
147
152
  --rct-clock-gauge-tick-label-fill: #333;
148
153
  --rct-clock-gauge-label-fill: #aaa;
154
+ /** zoom tracker */
155
+ --rct-zoom-tracker-fill: #0044ff30;
156
+ /** series navigator */
157
+ --rct-navigator-handle-color: #aac;
158
+ --rct-navigator-handle-hover-color: #55c;
149
159
  }
150
160
  .rct-root[data-theme='dark'] {
151
161
  --rct-focus-border: yellow;
@@ -154,10 +164,10 @@
154
164
  --rct-title-fill: #fff;
155
165
  --rct-subtitle-fill: #fff;
156
166
 
157
- --rct-plot-background-stroke: #ccc;
167
+ --rct-body-background-stroke: none;
158
168
 
159
169
  --rct-axis-title-fill: #fff;
160
- --rct-axis-line-stroke: #ddd;
170
+ --rct-axis-line-stroke: #1e1e1e;
161
171
  --rct-axis-tick-stroke: #fff;
162
172
  --rct-axis-label-fill: #fff;
163
173
  --rct-axis-grid-line-stroke: #ddd;
@@ -173,6 +183,9 @@
173
183
  /* circle gauge */
174
184
  --rct-circle-gauge-back-fill: #333;
175
185
  --rct-circle-gauge-label-fill: #eee;
186
+
187
+ /** zoom tracker */
188
+ --rct-zoom-tracker-fill: #efefef40;
176
189
  }
177
190
 
178
191
  /** control */
@@ -200,13 +213,25 @@
200
213
  .rct-label-dark {
201
214
  fill: black;
202
215
  }
203
- .rct-label-bright {
216
+ .rct-label-light {
204
217
  fill: white;
205
218
  }
206
219
  .rct-label-background {
207
220
  fill: lightgray;
208
221
  }
209
222
 
223
+ /** button */
224
+ .rct-button-background {
225
+ padding: 2px 4px;
226
+ rx: 5px;
227
+ fill: #e0e0e0;
228
+ stroke: #c0c0c0;
229
+ }
230
+ .rct-button {
231
+ fill: #333;
232
+ font-size: 0.9em;
233
+ }
234
+
210
235
  /** background */
211
236
  .rct-background {
212
237
  fill: none;
@@ -220,15 +245,18 @@
220
245
 
221
246
  /** title */
222
247
  .rct-title {
223
- margin-bottom: 5px;
248
+ margin-bottom: 10px;
224
249
  font-size: 24px;
225
250
  fill: var(--rct-title-fill);
226
251
  }
252
+ .rct-title[data-hassub] {
253
+ margin-bottom: 2px;
254
+ }
227
255
  .rct-title-background {
228
256
  fill: none;
229
257
  }
230
258
  .rct-subtitle {
231
- margin-bottom: 5px;
259
+ margin-bottom: 10px;
232
260
  font-size: 16px;
233
261
  fill: var(--rct-subtitle-fill);
234
262
  }
@@ -239,10 +267,11 @@
239
267
  /** legend */
240
268
  .rct-legend {
241
269
  stroke: none;
242
- fill: none;
243
- padding: 4px;
270
+ padding: 3px 6px;
244
271
  }
245
272
  .rct-legend-background {
273
+ fill: #c4c4c430;
274
+ rx: 7px;
246
275
  stroke: var(--rct-legend-background-stroke);
247
276
  }
248
277
  .rct-legend-item {
@@ -260,11 +289,11 @@
260
289
  }
261
290
 
262
291
  /** plot area */
263
- .rct-plot-background {
264
- stroke: var(--rct-plot-background-stroke);
292
+ .rct-body-background {
293
+ stroke: var(--rct-body-background-stroke);
265
294
  fill: none;
266
295
  }
267
- .rct-plot-background[data-polar] {
296
+ .rct-body-background[data-polar] {
268
297
  stroke: none;
269
298
  }
270
299
 
@@ -297,7 +326,7 @@
297
326
  stroke-width: var(--rct-axis-grid-line-stroke-width);
298
327
  }
299
328
  .rct-axis-break {
300
- stroke: #777;
329
+ stroke: #aaa;
301
330
  fill: white;
302
331
  fill-opacity: 0.9;
303
332
  }
@@ -313,6 +342,15 @@
313
342
  stroke: none;
314
343
  fill: #0088ff40;
315
344
  }
345
+ .rct-axis-scrollbar-track {
346
+ fill: var(--rct-axis-scrollbar-track-fill);
347
+ stroke: var(--rct-axis-scrollbar-track-stroke);
348
+ rx: var(--rct-axis-scrollbar-rx);
349
+ }
350
+ .rct-axis-scrollbar-thumb {
351
+ fill: var(--rct-axis-scrollbar-thumb-fill);
352
+ rx: var(--rct-axis-scrollbar-rx);
353
+ }
316
354
 
317
355
  /** polar axis */
318
356
  .rct-polar-xaxis-line {
@@ -322,7 +360,7 @@
322
360
  stroke: #ccc;
323
361
  }
324
362
  .rct-polar-yaxis-line {
325
- stroke: red;
363
+ stroke: #afafaf;
326
364
  }
327
365
  .rct-polar-yaxis-grid-line {
328
366
  stroke: #0000ff20;
@@ -445,6 +483,9 @@
445
483
  fill-opacity: 1;
446
484
  opacity: 1;
447
485
  }
486
+ .rct-point-label[data-outlined] {
487
+ fill: var(--rct-point-label-fill-outlined);
488
+ }
448
489
  .rct-point-label-lines {
449
490
  stroke: #585;
450
491
  fill: none;
@@ -452,7 +493,7 @@
452
493
 
453
494
  /** bar series */
454
495
  .rct-bar-series {
455
- fill-opacity: 0.85;
496
+ fill-opacity: 1;
456
497
  }
457
498
  .rct-bar-series .rct-point[data-focus] {
458
499
  stroke: var(--rct-focus-border);
@@ -485,6 +526,9 @@
485
526
  .rct-area-series-area {
486
527
  fill-opacity: 0.5;
487
528
  }
529
+ .rct-area-series-area[data-simple] {
530
+ fill-opacity: 0.05;
531
+ }
488
532
  .rct-area-series .rct-area-series-area {
489
533
  stroke: none;
490
534
  }
@@ -856,3 +900,26 @@
856
900
  stroke: none;
857
901
  fill: #fff;
858
902
  }
903
+
904
+ /** zoom tracker */
905
+ .rct-zoom-tracker {
906
+ fill: var(--rct-zoom-tracker-fill);
907
+ }
908
+
909
+ /** series navigator */
910
+ .rct-navigator-back {
911
+ fill: white;
912
+ stroke: #f0f0f0;
913
+ }
914
+ .rct-navigator-mask {
915
+ fill: #4488cc20;
916
+ stroke: #ccc;
917
+ }
918
+ .rct-navigator-handle {
919
+ fill: var(--rct-navigator-handle-color);
920
+ stroke: var(--rct-navigator-handle-color);
921
+ }
922
+ .rct-navigator-handle[data-select], .rct-navigator-handle:hover {
923
+ fill: var(--rct-navigator-handle-hover-color);
924
+ stroke: var(--rct-navigator-handle-hover-color);;
925
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "realchart",
3
- "version": "0.9.8",
3
+ "version": "0.9.10",
4
4
  "description": "Wooritech charting library",
5
5
  "main": "./dist/index",
6
6
  "author": {