realchart 0.9.3 → 0.9.5

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.
Files changed (6) hide show
  1. package/README.md +27 -39
  2. package/dist/index.d.ts +130 -33
  3. package/dist/index.esm.js +2 -2
  4. package/dist/index.js +2 -2
  5. package/dist/realchart-style.css +123 -42
  6. package/package.json +1 -1
package/dist/realchart-style.css CHANGED
@@ -23,32 +23,74 @@
23
23
 
24
24
  /** palette */
25
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;
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
38
  }
39
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;
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;
51
+ --color-12: #e8ecef;
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;
52
94
  }
53
95
 
54
96
  /** theme */
@@ -62,6 +104,8 @@
62
104
  .rct-root {
63
105
  --rct-font-family: AppleSDGothicNeo-Light, 'HelveticaNeue', 'Malgun Gothic', '맑은 고딕', sans-serif;
64
106
  --rct-font-size: 16px;
107
+
108
+ --rct-focus-border: red;
65
109
  --rct-text-fill: #333;
66
110
 
67
111
  --rct-title-fill: #333;
@@ -70,15 +114,24 @@
70
114
  --rct-plot-background-stroke: #ddd;
71
115
 
72
116
  --rct-axis-title-fill: #333;
73
- --rct-axis-line-stroke: #ddd;
74
- --rct-axis-tick-stroke: #333;
117
+ --rct-axis-line-stroke: #aaa;
118
+ --rct-axis-tick-stroke: #555;
75
119
  --rct-axis-label-fill: #555;
76
- --rct-axis-grid-stroke: #ddd;
120
+ --rct-axis-grid-line-stroke: #ddd;
121
+ --rct-axis-grid-line-stroke-start: none;
122
+ --rct-axis-grid-line-stroke-end: none;
123
+ --rct-axis-grid-line-stroke-width: 1px;
77
124
 
125
+ --rct-legend-background-stroke: none;
78
126
  --rct-legend-item-fill: #333;
79
127
  --rct-legend-item-disabled: #aaa;
80
128
  --rct-legend-item-disabled-decoration: line-through;
81
129
 
130
+ --rct-point-label-font-size: 0.8em;
131
+ --rct-point-label-font-weight: bold;
132
+ --rct-point-label-stroke: none;
133
+ --rct-point-label-fill: #333;
134
+
82
135
  --rct-credits-fill: #777;
83
136
  }
84
137
  .rct-root[data-theme='dark'] {
@@ -94,12 +147,14 @@
94
147
  --rct-axis-line-stroke: #ddd;
95
148
  --rct-axis-tick-stroke: #fff;
96
149
  --rct-axis-label-fill: #fff;
97
- --rct-axis-grid-stroke: #ddd;
150
+ --rct-axis-grid-line-stroke: #ddd;
98
151
 
99
152
  --rct-legend-item-fill: #fff;
100
153
  --rct-legend-item-disabled: #aaa;
101
154
  --rct-legend-item-disabled-decoration: line-through;
102
155
 
156
+ --rct-point-label-fill: #ddd;
157
+
103
158
  --rct-credits-fill: #999;
104
159
  }
105
160
 
@@ -168,10 +223,10 @@
168
223
  .rct-legend {
169
224
  stroke: none;
170
225
  fill: none;
171
- /* margin-top: 16px; */
226
+ padding: 4px;
172
227
  }
173
228
  .rct-legend-background {
174
- padding: 4px;
229
+ stroke: var(--rct-legend-background-stroke);
175
230
  }
176
231
  .rct-legend-item {
177
232
  fill: var(--rct-legend-item-fill);
@@ -216,9 +271,13 @@
216
271
  font-size: 14px;
217
272
  fill: var(--rct-axis-label-fill);
218
273
  }
219
- .rct-axis-grid {
274
+ /* .rct-axis-grid {
220
275
  stroke: var(--rct-axis-grid-stroke);
221
276
  stroke-width: 1px;
277
+ } */
278
+ .rct-axis-grid-line {
279
+ stroke: var(--rct-axis-grid-line-stroke);
280
+ stroke-width: var(--rct-axis-grid-line-stroke-width);
222
281
  }
223
282
  .rct-axis-break {
224
283
  stroke: none;
@@ -310,55 +369,67 @@
310
369
  /** data point */
311
370
  .rct-series[data-pointcolors] .rct-point[data-index="0"] {
312
371
  fill: var(--color-1);
372
+ stroke: var(--color-1);
313
373
  }
314
374
  .rct-series[data-pointcolors] .rct-point[data-index="1"] {
315
375
  fill: var(--color-2);
376
+ stroke: var(--color-2);
316
377
  }
317
378
  .rct-series[data-pointcolors] .rct-point[data-index="2"] {
318
379
  fill: var(--color-3);
380
+ stroke: var(--color-3);
319
381
  }
320
382
  .rct-series[data-pointcolors] .rct-point[data-index="3"] {
321
383
  fill: var(--color-4);
384
+ stroke: var(--color-4);
322
385
  }
323
386
  .rct-series[data-pointcolors] .rct-point[data-index="4"] {
324
387
  fill: var(--color-5);
388
+ stroke: var(--color-5);
325
389
  }
326
390
  .rct-series[data-pointcolors] .rct-point[data-index="5"] {
327
391
  fill: var(--color-6);
392
+ stroke: var(--color-6);
328
393
  }
329
394
  .rct-series[data-pointcolors] .rct-point[data-index="6"] {
330
395
  fill: var(--color-7);
396
+ stroke: var(--color-7);
331
397
  }
332
398
  .rct-series[data-pointcolors] .rct-point[data-index="7"] {
333
399
  fill: var(--color-8);
400
+ stroke: var(--color-8);
334
401
  }
335
402
  .rct-series[data-pointcolors] .rct-point[data-index="8"] {
336
403
  fill: var(--color-9);
404
+ stroke: var(--color-9);
337
405
  }
338
406
  .rct-series[data-pointcolors] .rct-point[data-index="9"] {
339
407
  fill: var(--color-10);
408
+ stroke: var(--color-10);
340
409
  }
341
410
  .rct-series[data-pointcolors] .rct-point[data-index="10"] {
342
411
  fill: var(--color-11);
412
+ stroke: var(--color-11);
343
413
  }
344
414
  .rct-series[data-pointcolors] .rct-point[data-index="11"] {
345
415
  fill: var(--color-12);
416
+ stroke: var(--color-12);
346
417
  }
347
418
 
348
419
  /** rct-point 대신 여기에 지정해야 outline에 반영된다. */
349
420
  .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;
421
+ font-size: var(--rct-point-label-font-size);
422
+ font-weight: var(--rct-point-label-font-weight);
423
+ stroke: var(--rct-point-label-stroke);
424
+ fill: var(--rct-point-label-fill);
356
425
  }
357
426
  .rct-point-label {
358
- stroke: #333;
427
+ fill-opacity: 1;
428
+ opacity: 1;
359
429
  }
360
430
  .rct-point-label-lines {
361
- stroke: black;
431
+ stroke: #585;
432
+ fill: none;
362
433
  }
363
434
 
364
435
  /** bar series */
@@ -383,7 +454,10 @@
383
454
  .rct-line-series-line {
384
455
  stroke-width: 1px;
385
456
  }
386
- .rct-line-point-marker[data-focus] {
457
+ .rct-line-series .rct-point {
458
+ stroke-dasharray: none;
459
+ }
460
+ .rct-line-series .rct-point[data-focus] {
387
461
  /* scale: 2; */
388
462
  stroke: var(--rct-focus-border) !important;
389
463
  stroke-width: 2px;
@@ -393,6 +467,9 @@
393
467
  .rct-area-series-area {
394
468
  fill-opacity: 0.5;
395
469
  }
470
+ .rct-area-series .rct-area-series-area {
471
+ stroke: none;
472
+ }
396
473
 
397
474
  /** arearange series */
398
475
  .rct-arearange-series-area {
@@ -475,12 +552,12 @@
475
552
  .rct-ohlc-point-back {
476
553
  stroke: none;
477
554
  }
478
- .rct-ohlc-point-tick {
555
+ /* .rct-ohlc-point-tick {
479
556
  stroke: #003;
480
557
  }
481
558
  .rct-ohlc-point-bar {
482
559
  stroke: #f00;
483
- }
560
+ } */
484
561
  .rct-ohlc-point-bar-fall {
485
562
  stroke: #00f;
486
563
  }
@@ -568,6 +645,10 @@
568
645
  .rct-pie-series .rct-point {
569
646
  stroke: white;
570
647
  }
648
+ .rct-pie-series-inner {
649
+ font-size: 20px;
650
+ fill: #557;
651
+ }
571
652
 
572
653
  /** funnel series */
573
654
  .rct-funnel-series .rct-point {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "realchart",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "description": "Wooritech charting library",
5
5
  "main": "./dist/index",
6
6
  "author": {