realchart 1.4.2 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realchart",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Wooritech charting library",
   "main": "./index.js",
   "module": "./index.mjs",

package/realchart-style.css

@@ -147,15 +147,28 @@
     --rct-title-fill: #333;
     --rct-subtitle-fill: #333;
 
+    --rct-text-annotation-fill: #333;
+
     --rct-body-background-stroke: none;
 
+    --rct-empty-view-stroke: #eee;
+    --rct-empty-view-fill: #fcfcff;
+    --rct-empty-view-label-fill: #777;
+
+    --rct-body-depth-org-line-stroke: #cdcdcd;
+    --rct-body-depth-side: #fafafa;
+    --rct-body-depth-side-line-stroke: #cdcdcd;
+    --rct-body-depth-grid-line-stroke: #e0e0e0;
+
     --rct-axis-title-fill: #333;
     --rct-axis-line-stroke: #aaa;
     --rct-axis-baseline-stroke: #333;
     --rct-axis-tick-stroke: #555;
     --rct-axis-label-fill: #333;
     --rct-axis-unit-label-fill: #333;
-    --rct-axis-grid-line-stroke: #eaeaea;
+    --rct-axis-break-stroke: #aaa;
+    --rct-axis-break-fill: #fff;
+    --rct-axis-grid-line-stroke: #e8e8e8;
     --rct-axis-grid-line-stroke-start: none;
     --rct-axis-grid-line-stroke-end: none;
     --rct-axis-grid-line-stroke-width: 1px;
@@ -163,6 +176,10 @@
     --rct-axis-scrollbar-track-stroke: #aaa;
     --rct-axis-scrollbar-thumb-fill: #d3d3d3;
     --rct-axis-scrollbar-rx: 4px;
+
+    --rct-crosshair-line-stroke: #80808080;
+    --rct-crosshair-flag-text-fill: #fff;
+    --rct-crosshair-flag-fill: #555;
     
     --rct-legend-background: none;
 	--rct-legend-background-stroke: none;
@@ -182,6 +199,7 @@
     --rct-credits-fill: #777;
 
     /* polar */
+    --rct-polar-xaxis-line-stroke: #333;
     --rct-polar-xaxis-grid-line-stroke: #cacaca;
     --rct-polar-yaxis-grid-line-stroke: #cacaca;
     --rct-polar-axis-labels-fill: #555;
@@ -218,9 +236,17 @@
     --rct-zoom-tracker-fill: #0044ff30;
     /** series navigator */
     --rct-navigator-handle-color: #0098ff; 
-    --rct-navigator-handle-hover-color: #55c;
+    --rct-navigator-handle-hover-color: #005893;
     --rct-navigator-track-fill: #d3d3d3;
     --rct-navigator-thumb-fill:#0098ff;
+    --rct-navigator-back-fill: #fff;
+    --rct-navigator-back-stroke: #f0f0f0;
+    --rct-navigator-mask-fill: #4488cc20;
+
+    --rct-button-background-fill: #e0e0e0;
+    --rct-button-background-stroke: #e0e0e0;
+    --rct-button-fill: #333;
+    
 }
 .rct-root[data-theme='dark'] {
     --rct-focus-stroke: #ccc;
@@ -229,14 +255,29 @@
     --rct-title-fill: #fff;
     --rct-subtitle-fill: #fff;
 
+    --rct-text-annotation-fill: #939393;
+
     --rct-body-background-stroke: none;
+
+    --rct-empty-view-stroke: #898989;
+    --rct-empty-view-fill: #414141;
+    --rct-empty-view-label-fill: #939393;
+
+    --rct-body-depth-side: #4D4D4D;
     
     --rct-axis-title-fill: #fff;
     --rct-axis-line-stroke: #fff;
     --rct-axis-baseline-stroke: #fff;
     --rct-axis-tick-stroke: #fff;
     --rct-axis-label-fill: #fff;
-    --rct-axis-grid-line-stroke: #fff;
+    --rct-axis-break-stroke: #fff;
+    --rct-axis-break-fill: #262626;
+    --rct-axis-grid-line-stroke: #939393;
+    --rct-axis-scrollbar-thumb-fill: #7D7D7D;
+
+    --rct-crosshair-line-stroke: #fff;
+    --rct-crosshair-flag-text-fill: #555;
+    --rct-crosshair-flag-fill: #fff;
     
     --rct-legend-background: none;
 	--rct-legend-background-stroke: none;
@@ -245,11 +286,13 @@
     --rct-legend-item-disabled-decoration: line-through;
 
     --rct-point-label-fill: #ddd;
+    --rct-point-label-line-stroke: #939393;
 
     --rct-credits-fill: #999;
 
     /* polar */
-    --rct-polar-xaxis-grid-line-stroke: #ccc;
+    --rct-polar-xaxis-line-stroke: #fff;
+    --rct-polar-xaxis-grid-line-stroke: #fff;
     --rct-polar-yaxis-grid-line-stroke: #fff;
     --rct-polar-axis-labels-fill: #fff;
 
@@ -264,6 +307,19 @@
 
     /** zoom tracker */
     --rct-zoom-tracker-fill: #efefef40;
+
+    /** series navigator */
+    --rct-navigator-handle-color: #0098ff; 
+    --rct-navigator-handle-hover-color: #005893;
+    --rct-navigator-track-fill: #d3d3d3;
+    --rct-navigator-thumb-fill:#0098ff;
+    --rct-navigator-back-fill: #1C1C1C;
+    --rct-navigator-back-stroke: #8E8E8E;
+    --rct-navigator-mask-fill: #81818130;
+
+    --rct-button-background-fill: #262626;
+    --rct-button-background-stroke: #fff;
+    --rct-button-fill: #fff;
 }
 .rct-root[data-theme='real'] {
     --rct-focus-stroke: yellow;
@@ -286,7 +342,7 @@
     --rct-legend-item-disabled: #4e7b82;
     --rct-legend-item-disabled-decoration: line-through;
 
-    --rct-point-label-fill: #ddd;
+    --rct-point-label-fill: #fff;
 
     --rct-credits-fill: #999;
 
@@ -346,11 +402,11 @@
 .rct-button-background {
     padding: 2px 4px;
     rx: 5px;
-    fill: #e0e0e0;
-    stroke: #c0c0c0;
+    fill: var(--rct-button-background-fill);
+    stroke: var(--rct-button-background-stroke);
 }
 .rct-button {
-    fill: #333;
+    fill: var(--rct-button-fill);
     font-size: 0.9em;
 }
 
@@ -430,12 +486,24 @@
 .rct-body-background[data-polar] {
     stroke: none;
 }
+.rct-body-depth-org-line {
+    stroke: var(--rct-body-depth-org-line-stroke);
+}
+.rct-body-depth-side {
+    fill: var(--rct-body-depth-side);
+}
+.rct-body-depth-grid-line {
+    stroke: var(--rct-body-depth-grid-line-stroke);
+}
+.rct-body-depth-side-line {
+    stroke: var(--rct-body-depth-side-line-stroke);
+}
 .rct-empty-view {
-    fill: #fcfcff;
-    stroke: #eee;
+    stroke: var(--rct-empty-view-stroke);
+    fill: var(--rct-empty-view-fill);
 }
 .rct-empty-view-label {
-    fill: #777;
+    fill: var(--rct-empty-view-label-fill);
     font-size: 1.4em;
 }
 
@@ -479,8 +547,8 @@
     shape-rendering: crispEdges;
 }
 .rct-axis-break {
-    stroke: #aaa;
-    fill: #fff;
+    stroke: var(--rct-axis-break-stroke);
+    fill: var(--rct-axis-break-fill);
     fill-opacity: 0.9;
 }
 .rct-axis-guide-label {
@@ -509,7 +577,7 @@
 
 /** polar axis */
 .rct-polar-xaxis-line {
-    stroke: #333;
+    stroke: var(--rct-polar-xaxis-line-stroke);
 }
 .rct-polar-xaxis-sector-line {
     stroke: #555;
@@ -580,13 +648,6 @@
     stroke: var(--color-12);
 }
 
-.rct-series-trendline {
-    stroke: #ff0000;
-    stroke-width: 2px;
-    stroke-linejoin: round;
-    fill: none;
-}
-
 /** data point */
 .rct-series[data-pointcolors="a"] .rct-point[data-index="0"] {
     fill: var(--color-1);
@@ -689,9 +750,18 @@
 .rct-series .rct-point[data-focus], .rct-point[data-unfocus] {
     stroke: var(--rct-focus-stroke) !important;
     stroke-width: var(--rct-focus-stroke-width) !important;
+    stroke-linecap: round;
+    stroke-linejoin: round;
     filter: brightness(115%) !important;
     opacity: 1 !important;
 }
+.rct-series-trendline {
+    stroke: #ff0000;
+    stroke-width: 2px;
+    stroke-linejoin: round;
+    fill: none;
+}
+
 /** data point hover */
 .rct-point-unhover {
     opacity: 0.3;
@@ -954,10 +1024,24 @@
 .rct-pie-series .rct-point {
     stroke: #fff;
 }
+.rct-pie-series[data-deep] .rct-point {
+    stroke: none;
+}
 .rct-pie-series-inner {
     font-size: 20px;
     fill: #557;
 }
+.rct-pie-series-sides {
+    stroke: none;
+}
+.rct-pie-series-side[data-focus] {
+    stroke: var(--rct-focus-stroke) !important;
+    stroke-width: var(--rct-focus-stroke-width) !important;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    filter: brightness(115%) !important;
+    opacity: 1 !important;
+}
 
 /** funnel series */
 .rct-funnel-series .rct-point {
@@ -1148,14 +1232,14 @@
 }
 .rct-text-annotation {
     font-size: 20px;
-    fill: #333;
+    fill: var(--rct-text-annotation-fill);
 }
 
 /** crosshair */
 .rct-crosshair-line {
     fill: none;
     stroke-width: 1;
-    stroke: #80808080;
+    stroke: var(--rct-crosshair-line-stroke);
     shape-rendering: crispEdges;
 }
 .rct-crosshair-bar {
@@ -1164,11 +1248,11 @@
 }
 .rct-crosshair-flag {
     stroke: none;
-    fill: #555;    
+    fill: var(--rct-crosshair-flag-fill);
 }
 .rct-crosshair-flag-text {
     stroke: none;
-    fill: #fff;    
+    fill: var(--rct-crosshair-flag-text-fill);
 }
 
 /** zoom tracker */
@@ -1181,12 +1265,12 @@
     display: none;
 }
 .rct-navigator-back {
-    fill: #fff;
-    stroke: #f0f0f0;
+    fill: var(--rct-navigator-back-fill);
+    stroke: var(--rct-navigator-back-stroke);
     shape-rendering: crispEdges;
 }
 .rct-navigator-mask {
-    fill: #4488cc20;
+    fill: var(--rct-navigator-mask-fill);
     /* stroke: #ccc; */
 }
 .rct-navigator-handle {

package/split.d.ts

@@ -51,7 +51,7 @@ declare class Pane extends ChartItem<PaneOptions> {
     private _body;
     private _legend;
     constructor(chart: IChart, row: number, col: number);
-    protected _doInitChildren(op: PaneOptions): void;
+    protected _doInit(op: PaneOptions): void;
     /**
      * Body 모델.
      */