realchart 0.9.16 → 0.9.18

package/dist/realchart-style.css

@@ -161,15 +161,14 @@
     --rct-legend-background: none;
 	--rct-legend-background-stroke: none;
     --rct-legend-background-stroke: none;
-    --rct-legend-item-fill: #333;
+    --rct-legend-fill: #333;
     --rct-legend-item-disabled: #aaa;
     --rct-legend-item-disabled-decoration: line-through;
 
     --rct-point-label-font-size: 0.8em;
     --rct-point-label-font-weight: bold;
     --rct-point-label-stroke: none;
-    --rct-point-label-fill: #555;
-    --rct-point-label-fill-outlined: #333;
+    --rct-point-label-fill: #333;
 
     --rct-credits-fill: #777;
 
@@ -196,8 +195,10 @@
     /** zoom tracker */
     --rct-zoom-tracker-fill: #0044ff30;
     /** series navigator */
-    --rct-navigator-handle-color: #aac; 
-    --rct-navigator-handle-hover-color: #55c; 
+    --rct-navigator-handle-color: #0098ff; 
+    --rct-navigator-handle-hover-color: #55c;
+    --rct-navigator-track-fill: lightgray;
+    --rct-navigator-thumb-fill:#0098ff;
 }
 .rct-root[data-theme='dark'] {
     --rct-focus-border: yellow;
@@ -216,7 +217,7 @@
     
     --rct-legend-background: none;
 	--rct-legend-background-stroke: none;
-    --rct-legend-item-fill: #fff;
+    --rct-legend-fill: #fff;
     --rct-legend-item-disabled: #707070;
     --rct-legend-item-disabled-decoration: line-through;
 
@@ -256,7 +257,7 @@
     
     --rct-legend-background: none;
 	--rct-legend-background-stroke: none;
-    --rct-legend-item-fill: #f0d9be;
+    --rct-legend-fill: #f0d9be;
     --rct-legend-item-disabled: #4e7b82;
     --rct-legend-item-disabled-decoration: line-through;
 
@@ -286,7 +287,11 @@
     background-color: var(--rct-background);
 }
 
-/** root(svg) */
+/** root */
+.rct-root {
+    padding: 20px;
+}
+
 /** debug border */
 .rct-debug {
     fill: none;
@@ -342,9 +347,6 @@
     font-size: 24px;
     fill: var(--rct-title-fill);
 }
-.rct-title[data-hassub] {
-    margin-bottom: 2px;
-}
 .rct-title-background {
     fill: none;
 }
@@ -359,6 +361,7 @@
 
 /** legend */
 .rct-legend {
+    fill: var(--rct-legend-fill);
     stroke: none;
     padding: 3px 6px;
 }
@@ -367,9 +370,6 @@
     rx: 7px;
     stroke: var(--rct-legend-background-stroke);
 }
-.rct-legend-item {
-    fill: var(--rct-legend-item-fill);
-}
 .rct-legend-item-label[data-hidden] {
     fill: var(--rct-legend-item-disabled);
     text-decoration: var(--rct-legend-item-disabled-decoration)
@@ -406,7 +406,7 @@
     stroke: var(--rct-axis-tick-stroke);
     stroke-width: 1px;
 }
-.rct-axis-label {
+.rct-axis-labels {
     font-size: 14px;
     fill: var(--rct-axis-label-fill);
 }
@@ -424,12 +424,11 @@
     fill-opacity: 0.9;
 }
 .rct-axis-guide-label {
-    fill: blue;
+    fill: #555;
 }
 .rct-axis-guide-line {
-    stroke: blue;
+    stroke: #555;
     stroke-width: 2px;
-    stroke-dasharray: 4;
 }
 .rct-axis-guide-range {
     stroke: none;
@@ -519,55 +518,92 @@
 }
 
 /** data point */
-.rct-series[data-pointcolors] .rct-point[data-index="0"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="0"] {
     fill: var(--color-1);
     stroke: var(--color-1);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="1"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="1"] {
     fill: var(--color-2);
     stroke: var(--color-2);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="2"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="2"] {
     fill: var(--color-3);
     stroke: var(--color-3);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="3"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="3"] {
     fill: var(--color-4);
     stroke: var(--color-4);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="4"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="4"] {
     fill: var(--color-5);
     stroke: var(--color-5);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="5"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="5"] {
     fill: var(--color-6);
     stroke: var(--color-6);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="6"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="6"] {
     fill: var(--color-7);
     stroke: var(--color-7);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="7"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="7"] {
     fill: var(--color-8);
     stroke: var(--color-8);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="8"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="8"] {
     fill: var(--color-9);
     stroke: var(--color-9);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="9"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="9"] {
     fill: var(--color-10);
     stroke: var(--color-10);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="10"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="10"] {
     fill: var(--color-11);
     stroke: var(--color-11);
 }
-.rct-series[data-pointcolors] .rct-point[data-index="11"] {
+.rct-series[data-pointcolors="a"] .rct-point[data-index="11"] {
     fill: var(--color-12);
     stroke: var(--color-12);
 }
 
+.rct-series[data-pointcolors="f"] .rct-point[data-index="0"] {
+    fill: var(--color-1);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="1"] {
+    fill: var(--color-2);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="2"] {
+    fill: var(--color-3);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="3"] {
+    fill: var(--color-4);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="4"] {
+    fill: var(--color-5);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="5"] {
+    fill: var(--color-6);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="6"] {
+    fill: var(--color-7);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="7"] {
+    fill: var(--color-8);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="8"] {
+    fill: var(--color-9);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="9"] {
+    fill: var(--color-10);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="10"] {
+    fill: var(--color-11);
+}
+.rct-series[data-pointcolors="f"] .rct-point[data-index="11"] {
+    fill: var(--color-12);
+}
+
 /** rct-point 대신 여기에 지정해야 outline에 반영된다. */
 .rct-point-labels {
     font-size: var(--rct-point-label-font-size);
@@ -579,9 +615,6 @@
     fill-opacity: 1;
     opacity: 1;
 }
-.rct-point-label[data-outlined] {
-    fill: var(--rct-point-label-fill-outlined);
-}
 .rct-point-label-lines {
     stroke: #585;
     fill: none;
@@ -698,6 +731,10 @@
 .rct-candlestick-series .rct-point[data-focus] {
     fill-opacity: 0.5;
 }
+.rct-candlestick-series .rct-point[data-fall] {
+    fill: #008;
+    stroke: #008;
+}
 .rct-candlestick-point-border {
     stroke: #333;
 }
@@ -986,6 +1023,10 @@
 .rct-text-annotation {
     font-size: 20px;
 }
+.rct-shape-annotation {
+    stroke: #333;
+    stroke-width: 3px;
+}
 
 /** crosshair */
 .rct-crosshair-line {
@@ -1012,13 +1053,16 @@
 }
 
 /** series navigator */
+.rct-navigator .rct-axis-line {
+    display: none;
+}
 .rct-navigator-back {
     fill: white;
     stroke: #f0f0f0;
 }
 .rct-navigator-mask {
     fill: #4488cc20;
-    stroke: #ccc;
+    /* stroke: #ccc; */
 }
 .rct-navigator-handle {
     fill: var(--rct-navigator-handle-color);
@@ -1026,5 +1070,14 @@
 }
 .rct-navigator-handle[data-select], .rct-navigator-handle:hover {
     fill: var(--rct-navigator-handle-hover-color);
-    stroke: var(--rct-navigator-handle-hover-color);;   
+    stroke: var(--rct-navigator-handle-hover-color);
+}
+
+.rct-navigator-track {
+    fill: var(--rct-navigator-track-fill);
+    stroke: var(--rct-navigator-track-fill);
+}
+.rct-navigator-thumb {
+    fill: var(--rct-navigator-thumb-fill);
+    stroke: var(--rct-navigator-thumb-fill);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realchart",
-  "version": "0.9.16",
+  "version": "0.9.18",
   "description": "Wooritech charting library",
   "main": "./dist/index",
   "author": {