realchart 0.9.2 → 0.9.3

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.
@@ -17,16 +17,98 @@
17
17
  text-align: initial;
18
18
  }
19
19
 
20
+ .rct-root text {
21
+ stroke: none;
22
+ }
23
+
24
+ /** palette */
25
+ .rct-root {
26
+ --color-1: #1bafdc;
27
+ --color-2: #12d365;
28
+ --color-3: #343ec3;
29
+ --color-4: #81d8c1;
30
+ --color-5: #fe6a35;
31
+ --color-6: #6b8abc;
32
+ --color-7: #d568fb;
33
+ --color-8: #2ee0ca;
34
+ --color-9: #fa4b42;
35
+ --color-10: #fe6ab5;
36
+ --color-11: #6afeb5;
37
+ --color-12: #b5fe6a;
38
+ }
39
+ .rct-root[data-palette='gray'] {
40
+ --color-1: #dddddd;
41
+ --color-2: #cccccc;
42
+ --color-3: #bbbbbb;
43
+ --color-4: #aaaaaa;
44
+ --color-5: #8f8f8f;
45
+ --color-6: #888888;
46
+ --color-7: #7f7f7f;
47
+ --color-8: #707070;
48
+ --color-9: #666666;
49
+ --color-10: #555555;
50
+ --color-11: #505050;
51
+ --color-12: #484848;
52
+ }
53
+
54
+ /** theme */
55
+ .rct-control {
56
+ --rct-background: none;
57
+ }
58
+ .rct-control[data-theme='dark'] {
59
+ --rct-background: black;
60
+ }
61
+
20
62
  .rct-root {
21
63
  --rct-font-family: AppleSDGothicNeo-Light, 'HelveticaNeue', 'Malgun Gothic', '맑은 고딕', sans-serif;
22
64
  --rct-font-size: 16px;
23
- --rct-focus-border: black;
65
+ --rct-text-fill: #333;
66
+
67
+ --rct-title-fill: #333;
68
+ --rct-subtitle-fill: #333;
69
+
70
+ --rct-plot-background-stroke: #ddd;
71
+
72
+ --rct-axis-title-fill: #333;
73
+ --rct-axis-line-stroke: #ddd;
74
+ --rct-axis-tick-stroke: #333;
75
+ --rct-axis-label-fill: #555;
76
+ --rct-axis-grid-stroke: #ddd;
77
+
78
+ --rct-legend-item-fill: #333;
79
+ --rct-legend-item-disabled: #aaa;
80
+ --rct-legend-item-disabled-decoration: line-through;
81
+
82
+ --rct-credits-fill: #777;
24
83
  }
84
+ .rct-root[data-theme='dark'] {
85
+ --rct-focus-border: yellow;
86
+ --rct-text-fill: #fff;
25
87
 
26
- .rct-root text {
27
- stroke: none;
88
+ --rct-title-fill: #fff;
89
+ --rct-subtitle-fill: #fff;
90
+
91
+ --rct-plot-background-stroke: #ccc;
92
+
93
+ --rct-axis-title-fill: #fff;
94
+ --rct-axis-line-stroke: #ddd;
95
+ --rct-axis-tick-stroke: #fff;
96
+ --rct-axis-label-fill: #fff;
97
+ --rct-axis-grid-stroke: #ddd;
98
+
99
+ --rct-legend-item-fill: #fff;
100
+ --rct-legend-item-disabled: #aaa;
101
+ --rct-legend-item-disabled-decoration: line-through;
102
+
103
+ --rct-credits-fill: #999;
104
+ }
105
+
106
+ /** control */
107
+ .rct-control {
108
+ background-color: var(--rct-background);
28
109
  }
29
110
 
111
+ /** root(svg) */
30
112
  /** debug border */
31
113
  .rct-debug {
32
114
  fill: none;
@@ -58,36 +140,45 @@
58
140
  fill: none;
59
141
  }
60
142
 
143
+ /** credits */
144
+ .rct-credits {
145
+ font-size: 0.7em;
146
+ fill: var(--rct-credits-fill);
147
+ }
148
+
61
149
  /** title */
62
150
  .rct-title {
151
+ margin-bottom: 5px;
63
152
  font-size: 24px;
64
- margin-bottom: 4px;
153
+ fill: var(--rct-title-fill);
65
154
  }
66
155
  .rct-title-background {
67
- fill: transparent;
156
+ fill: none;
68
157
  }
69
158
  .rct-subtitle {
159
+ margin-bottom: 5px;
70
160
  font-size: 16px;
71
- margin-bottom: 4px;
161
+ fill: var(--rct-subtitle-fill);
72
162
  }
73
163
  .rct-subtitle-background {
74
- fill: transparent;
164
+ fill: none;
75
165
  }
76
166
 
77
167
  /** legend */
78
168
  .rct-legend {
79
- stroke: #ddd;
80
- fill: transparent;
81
- margin: 8px;
169
+ stroke: none;
170
+ fill: none;
171
+ /* margin-top: 16px; */
82
172
  }
83
173
  .rct-legend-background {
84
174
  padding: 4px;
85
175
  }
86
176
  .rct-legend-item {
87
- fill: #333;
177
+ fill: var(--rct-legend-item-fill);
88
178
  }
89
179
  .rct-legend-item-label[data-hidden] {
90
- fill: #aaa;
180
+ fill: var(--rct-legend-item-disabled);
181
+ text-decoration: var(--rct-legend-item-disabled-decoration)
91
182
  }
92
183
  .rct-legend-item-marker {
93
184
  stroke: none;
@@ -98,31 +189,35 @@
98
189
 
99
190
  /** plot area */
100
191
  .rct-plot-background {
101
- stroke: #ddd;
192
+ stroke: var(--rct-plot-background-stroke);
102
193
  fill: none;
103
194
  }
195
+ .rct-plot-background[data-polar] {
196
+ stroke: none;
197
+ }
104
198
 
105
199
  /** axis */
106
200
  .rct-axis-title {
107
201
  font-size: 16px;
202
+ fill: var(--rct-axis-title-fill);
108
203
  }
109
204
  .rct-axis-title-background {
110
205
  fill: none;
111
206
  }
112
207
  .rct-axis-line {
113
- stroke: #ddd;
208
+ stroke: var(--rct-axis-line-stroke);
114
209
  stroke-width: 1px;
115
210
  }
116
- .rct-axis-tick-marks {
117
- stroke: #333;
211
+ .rct-axis-tick {
212
+ stroke: var(--rct-axis-tick-stroke);
118
213
  stroke-width: 1px;
119
214
  }
120
- .rct-axis-tick-labels {
215
+ .rct-axis-label {
121
216
  font-size: 14px;
122
- fill: #111;
217
+ fill: var(--rct-axis-label-fill);
123
218
  }
124
219
  .rct-axis-grid {
125
- stroke: #ddd;
220
+ stroke: var(--rct-axis-grid-stroke);
126
221
  stroke-width: 1px;
127
222
  }
128
223
  .rct-axis-break {
@@ -157,16 +252,108 @@
157
252
  }
158
253
 
159
254
  /** series */
160
- .rct-series-labels {
161
- font-size: 0.8em;
162
- font-weight: bold;
163
- fill: #558;
255
+ .rct-series[data-index="0"] {
256
+ fill: var(--color-1);
257
+ stroke: var(--color-1);
258
+ }
259
+ .rct-series[data-index="1"] {
260
+ fill: var(--color-2);
261
+ stroke: var(--color-2);
262
+ }
263
+ .rct-series[data-index="2"] {
264
+ fill: var(--color-3);
265
+ stroke: var(--color-3);
266
+ }
267
+ .rct-series[data-index="3"] {
268
+ fill: var(--color-4);
269
+ stroke: var(--color-4);
270
+ }
271
+ .rct-series[data-index="4"] {
272
+ fill: var(--color-5);
273
+ stroke: var(--color-5);
274
+ }
275
+ .rct-series[data-index="5"] {
276
+ fill: var(--color-6);
277
+ stroke: var(--color-6);
164
278
  }
279
+ .rct-series[data-index="6"] {
280
+ fill: var(--color-7);
281
+ stroke: var(--color-7);
282
+ }
283
+ .rct-series[data-index="7"] {
284
+ fill: var(--color-8);
285
+ stroke: var(--color-8);
286
+ }
287
+ .rct-series[data-index="8"] {
288
+ fill: var(--color-9);
289
+ stroke: var(--color-9);
290
+ }
291
+ .rct-series[data-index="9"] {
292
+ fill: var(--color-10);
293
+ stroke: var(--color-10);
294
+ }
295
+ .rct-series[data-index="10"] {
296
+ fill: var(--color-11);
297
+ stroke: var(--color-11);
298
+ }
299
+ .rct-series[data-index="11"] {
300
+ fill: var(--color-12);
301
+ stroke: var(--color-12);
302
+ }
303
+
165
304
  .rct-series-trendline {
166
305
  stroke: red;
167
306
  stroke-width: 2px;
168
307
  fill: none;
169
308
  }
309
+
310
+ /** data point */
311
+ .rct-series[data-pointcolors] .rct-point[data-index="0"] {
312
+ fill: var(--color-1);
313
+ }
314
+ .rct-series[data-pointcolors] .rct-point[data-index="1"] {
315
+ fill: var(--color-2);
316
+ }
317
+ .rct-series[data-pointcolors] .rct-point[data-index="2"] {
318
+ fill: var(--color-3);
319
+ }
320
+ .rct-series[data-pointcolors] .rct-point[data-index="3"] {
321
+ fill: var(--color-4);
322
+ }
323
+ .rct-series[data-pointcolors] .rct-point[data-index="4"] {
324
+ fill: var(--color-5);
325
+ }
326
+ .rct-series[data-pointcolors] .rct-point[data-index="5"] {
327
+ fill: var(--color-6);
328
+ }
329
+ .rct-series[data-pointcolors] .rct-point[data-index="6"] {
330
+ fill: var(--color-7);
331
+ }
332
+ .rct-series[data-pointcolors] .rct-point[data-index="7"] {
333
+ fill: var(--color-8);
334
+ }
335
+ .rct-series[data-pointcolors] .rct-point[data-index="8"] {
336
+ fill: var(--color-9);
337
+ }
338
+ .rct-series[data-pointcolors] .rct-point[data-index="9"] {
339
+ fill: var(--color-10);
340
+ }
341
+ .rct-series[data-pointcolors] .rct-point[data-index="10"] {
342
+ fill: var(--color-11);
343
+ }
344
+ .rct-series[data-pointcolors] .rct-point[data-index="11"] {
345
+ fill: var(--color-12);
346
+ }
347
+
348
+ /** rct-point 대신 여기에 지정해야 outline에 반영된다. */
349
+ .rct-point-labels {
350
+ font-size: 0.8em;
351
+ font-weight: bold;
352
+ stroke: none;
353
+ fill: #558;
354
+ fill-opacity: 1;
355
+ opacity: 1;
356
+ }
170
357
  .rct-point-label {
171
358
  stroke: #333;
172
359
  }
@@ -175,18 +362,26 @@
175
362
  }
176
363
 
177
364
  /** bar series */
178
- .rct-box-point {
179
- fill: #00aaff;
365
+ .rct-bar-series {
366
+ fill-opacity: 0.85;
367
+ }
368
+ .rct-bar-series .rct-point[data-focus] {
369
+ stroke: var(--rct-focus-border);
370
+ stroke-width: 2px;
371
+ }
372
+
373
+ /** barrange series */
374
+ .rct-barrange-series {
180
375
  fill-opacity: 0.85;
181
376
  }
182
- .rct-box-point[data-focus] {
377
+ .rct-barrange-series .rct-point[data-focus] {
183
378
  stroke: var(--rct-focus-border);
184
379
  stroke-width: 2px;
185
380
  }
186
381
 
187
382
  /** line series */
188
383
  .rct-line-series-line {
189
- stroke: gray;
384
+ stroke-width: 1px;
190
385
  }
191
386
  .rct-line-point-marker[data-focus] {
192
387
  /* scale: 2; */
@@ -196,26 +391,30 @@
196
391
 
197
392
  /** area series */
198
393
  .rct-area-series-area {
199
- fill: #0088ff;
394
+ fill-opacity: 0.5;
395
+ }
396
+
397
+ /** arearange series */
398
+ .rct-arearange-series-area {
200
399
  fill-opacity: 0.5;
201
400
  }
202
401
 
203
402
  /** bubble series */
204
- .rct-bubble-point-marker {
205
- fill: #0088ff;
403
+ .rct-bubble-series {
206
404
  fill-opacity: 0.75;
207
- stroke: #0088ff;
405
+ stroke-width: 1px;
208
406
  }
209
- .rct-bubble-point-marker[data-focus] {
407
+
408
+ .rct-bubble-series .rct-point[data-focus] {
210
409
  stroke: var(--rct-focus-border);
211
410
  stroke-width: 2px;
212
411
  }
213
412
 
214
413
  /** scatter series */
215
- .rct-scatter-point-marker {
414
+ .rct-scatter-series {
216
415
  fill-opacity: 0.7;
217
416
  }
218
- .rct-scatter-point-marker[data-focus] {
417
+ .rct-scatter-series .data-point[data-focus] {
219
418
  stroke: var(--rct-focus-border);
220
419
  stroke-width: 2px;
221
420
  }
@@ -223,12 +422,8 @@
223
422
  /** boxplot series */
224
423
  .rct-boxplot-series {
225
424
  stroke-width: 1;
226
- fill: white;
227
425
  }
228
- .rct-boxplot-point-box {
229
- fill: #0088ff80;
230
- }
231
- .rct-boxplot-point[data-focus] .rct-boxplot-point-box {
426
+ .rct-boxplot-series .rct-point[data-focus] {
232
427
  stroke: var(--rct-focus-border);
233
428
  stroke-width: 2px;
234
429
  }
@@ -248,7 +443,7 @@
248
443
  stroke: #333;
249
444
  stroke-dasharray: 2;
250
445
  }
251
- .rct-boxplot-point[data-focus] .rct-boxplot-point-stem {
446
+ .rct-boxplot-series .rct-point[data-focus] .rct-boxplot-point-stem {
252
447
  stroke: black;
253
448
  stroke-dasharray: none;
254
449
  stroke-width: 2px;
@@ -257,6 +452,10 @@
257
452
  /** candlestick series */
258
453
  .rct-candlestick-series {
259
454
  stroke-width: 1;
455
+ fill-opacity: 0.85;
456
+ }
457
+ .rct-candlestick-series .rct-point[data-focus] {
458
+ fill-opacity: 0.5;
260
459
  }
261
460
  .rct-candlestick-point-border {
262
461
  stroke: #333;
@@ -264,36 +463,43 @@
264
463
  .rct-candlestick-point-wick {
265
464
  stroke: #003;
266
465
  }
267
- .rct-candlestick-point[data-focus] {
268
- fill-opacity: 0.5;
269
- }
270
466
  .rct-candlestick-point-fall {
271
467
  fill: #008;
272
- }
273
- .rct-candlestick-point[data-focus] .rct-candlestick-point-body-fall {
274
- fill-opacity: 0.5;
468
+ stroke: #008;
275
469
  }
276
470
 
277
471
  /** ohlc series */
278
- .rct-ohlc-point {
279
- stroke-width: 1;
472
+ .rct-ohlc-series {
473
+ stroke-width: 2;
474
+ }
475
+ .rct-ohlc-point-back {
476
+ stroke: none;
280
477
  }
281
478
  .rct-ohlc-point-tick {
282
479
  stroke: #003;
283
480
  }
284
481
  .rct-ohlc-point-bar {
285
- stroke: #800;
482
+ stroke: #f00;
286
483
  }
287
484
  .rct-ohlc-point-bar-fall {
288
- stroke: #008;
485
+ stroke: #00f;
289
486
  }
290
487
 
291
488
  /** waterfall series */
489
+ .rct-waterfall-series {
490
+ fill-opacity: 0.85;
491
+ }
492
+ .rct-waterfall-series .rct-point[data-focus] {
493
+ stroke: var(--rct-focus-border);
494
+ stroke-width: 2px;
495
+ }
292
496
  .rct-waterfall-point-negative {
293
497
  fill: #dd5500;
498
+ stroke: #dd5500;
294
499
  }
295
500
  .rct-waterfall-point-sum {
296
501
  fill: #0055cc;
502
+ stroke: #0055cc;
297
503
  }
298
504
  .rct-waterfall-series-lines {
299
505
  stroke: #77f;
@@ -302,66 +508,76 @@
302
508
  }
303
509
 
304
510
  /** errobar series */
305
- .rct-errorbar-point {
511
+ .rct-errorbar-series .rct-point {
306
512
  stroke: #008;
307
513
  stroke-width: 2px;
308
514
  }
309
515
 
310
516
  /** lollipop series */
311
- .rct-lollipop-point {
312
- stroke: #008;
517
+ .rct-lollipop-series {
313
518
  stroke-width: 3px;
314
519
  }
315
520
  .rct-lollipop-point-marker {
316
521
  stroke: none;
317
- fill: #008;
318
522
  }
319
523
 
320
524
  /** dumbbell series */
321
- .rct-dumbbell-point {
322
- stroke: #008;
525
+ .rct-dumbbell-series {
323
526
  stroke-width: 2px;
324
527
  }
325
528
  .rct-dumbbell-point-marker {
326
529
  stroke: none;
327
- fill: #008;
328
530
  }
329
531
 
330
- /** funnel series */
331
- .rct-funnel-point[data-focus] {
332
- stroke: red;
333
- stroke-width: 2px;
532
+ /** equalizer series */
533
+ .rct-equalizer-series {
534
+ fill-opacity: 0.9;
535
+ }
536
+
537
+ .rct-histogram-series .rct-point {
538
+ stroke: white;
334
539
  }
335
540
 
336
541
  /** vector series */
337
542
  .rct-vector-series {
338
543
  stroke-width: 2px;
339
- /* stroke-linejoin: round; */
340
544
  }
341
- .rct-vector-point[data-focus] {
342
- stroke-width: 3px;
545
+ .rct-vector-series .rct-point[data-focus] {
546
+ stroke-width: 5px;
343
547
  }
344
548
 
345
549
  /** heatmpa series */
346
- .rct-heatmap-point[data-focus] {
550
+ .rct-heatmap-series .rct-point {
551
+ stroke: none;
552
+ }
553
+ .rct-heatmap-series .rct-point[data-focus] {
347
554
  stroke: var(--rct-focus-border);
348
555
  stroke-width: 2px;
349
556
  }
350
557
 
351
558
  /** treemap series */
352
- .rct-treemap-point {
559
+ .rct-treemap-series .rct-point {
353
560
  stroke: white;
354
561
  }
355
- .rct-treemap-point[data-focus] {
562
+ .rct-treemap-series .rct-point[data-focus] {
356
563
  stroke: var(--rct-focus-border);
357
564
  stroke-width: 2px;
358
565
  }
359
566
 
360
567
  /** pie series */
361
- .rct-pie-series .rct-series-points {
568
+ .rct-pie-series .rct-point {
362
569
  stroke: white;
363
570
  }
364
571
 
572
+ /** funnel series */
573
+ .rct-funnel-series .rct-point {
574
+ stroke: white;
575
+ }
576
+ .rct-funnel-series .rct-point[data-focus] {
577
+ stroke: red;
578
+ stroke-width: 2px;
579
+ }
580
+
365
581
  /** tooltip */
366
582
  .rct-tooltip {
367
583
  opacity: 0.9;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "realchart",
3
- "version": "0.9.2",
3
+ "version": "0.9.3",
4
4
  "description": "Wooritech charting library",
5
5
  "main": "./dist/index",
6
6
  "author": {