@semcore/d3-chart 1.9.0 → 2.0.0

package/lib/es6/style/venn.shadow.css

@@ -1,7 +1,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SCircle {
-  fill: var(--green-01);
+  fill: var(--green-02);
   stroke: #fff;
   stroke-width: 2px;
   fill-opacity: 0.5;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/d3-chart",
   "description": "SEMRush D3 Chart Component",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -42,6 +42,11 @@
     "@semcore/jest-preset-ui": "1.0.0",
     "@types/d3-array": "^3.0.2",
     "@types/d3-scale": "^4.0.2",
-    "@types/d3-transition": "^3.0.1"
+    "@types/d3-transition": "^3.0.1",
+    "@semcore/typography": "*",
+    "@semcore/dropdown-menu": "*",
+    "@semcore/button": "*",
+    "@semcore/checkbox": "*",
+    "@semcore/icon": "*"
   }
 }

package/src/RadialTree.tsx

@@ -136,7 +136,6 @@ class RadialTreeBase extends Component<RootAsProps> {
     duration: 300,
     centralMargin: 50,
     labelMargin: 2,
-    color: '#008FF8',
     iconColor: '#fff',
     capSize: 8,
     iconSize: 8,
@@ -577,8 +576,8 @@ type RadialTreeRadianLineAsProps = IRadialTreeRadianLineProps & {
   Element: React.FC<{ render: string } & React.SVGProps<any>>;
   styles: React.CSSProperties;
 };
-const Line: React.FC<RadialTreeRadianLineAsProps> = ({ Element: SLine, styles }) => {
-  return sstyled(styles)(<SLine render="line" />) as React.ReactElement;
+const Line: React.FC<RadialTreeRadianLineAsProps> = ({ Element: SLine, styles, stroke }) => {
+  return sstyled(styles)(<SLine render="line" stroke={stroke} />) as React.ReactElement;
 };
 
 export interface IRadialTreeRadianCapProps {

package/src/style/area.shadow.css

@@ -1,8 +1,8 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SArea {
-  fill: var(--blue-01);
-  fill-opacity: 0.4;
+  fill: var(--blue-03);
+  fill-opacity: 0.2;
 }
 
 SArea[color] {
@@ -10,7 +10,7 @@ SArea[color] {
 }
 
 SAreaLine {
-  stroke: var(--blue-01);
+  stroke: var(--blue-03);
   stroke-width: 3;
   fill: transparent;
 }
@@ -28,7 +28,7 @@ SAreaLine {
 
 SNull {
   fill: transparent;
-  stroke: #bdc4c6;
+  stroke: var(--gray-400);
   stroke-dasharray: 4;
 }
 

package/src/style/axis.shadow.css

@@ -1,7 +1,7 @@
 @import '@semcore/utils/style/var.css';
 
 SAxis {
-  stroke: var(--stone);
+  stroke: var(--gray-200);
 }
 
 SAxis[hide] {
@@ -10,7 +10,7 @@ SAxis[hide] {
 
 STick {
   font-size: 12px;
-  fill: var(--gray60);
+  fill: var(--gray-500);
 }
 
 STick[hide] {
@@ -19,12 +19,12 @@ STick[hide] {
 
 SGrid {
   fill: transparent;
-  stroke: var(--mercury);
+  stroke: var(--gray-100);
 }
 
 STitle {
   font-size: 12px;
-  fill: var(--gray60);
+  fill: var(--gray-500);
   transform-origin: var(--transform-origin);
 }
 

package/src/style/bar.shadow.css

@@ -2,7 +2,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SBar {
-  fill: var(--blue-01);
+  fill: var(--blue-03);
   transition-property: height, width, y;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -17,5 +17,5 @@ SBar[hide] {
 }
 
 SBackground {
-  fill: var(--mystic);
+  fill: var(--gray-200);
 }

package/src/style/bubble.shadow.css

@@ -2,7 +2,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SBubble {
-  fill: #2bb3ff;
+  fill: var(--blue-03);
   stroke: #fff;
   stroke-width: 2px;
   transition-property: cx, cy;
@@ -21,7 +21,7 @@ SBubble[color] {
 SCenter {
   text-anchor: middle;
   font-size: 11px;
-  stroke: #2bb3ff;
+  stroke: var(--blue-03);
 }
 
 SCenter[color] {
@@ -29,7 +29,7 @@ SCenter[color] {
 }
 
 SLabel {
-  fill: #2bb3ff;
+  fill: var(--blue-03);
 }
 
 SLabel[position='right'] {

package/src/style/donut.shadow.css

@@ -3,7 +3,7 @@
 
 SPie {
   stroke: #ffffff;
-  fill: var(--blue-01);
+  fill: var(--blue-03);
 }
 
 SPie[color] {
@@ -11,7 +11,7 @@ SPie[color] {
 }
 
 SEmptyData {
-  fill: var(--mystic);
+  fill: var(--gray-100);
 }
 
 SEmptyData[color] {

package/src/style/dot.shadow.css

@@ -5,7 +5,7 @@ SDot {
   stroke-width: 2px;
   stroke: #fff;
   r: 6px;
-  fill: var(--blue-01);
+  fill: var(--blue-03);
   transition-property: cx, cy;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;

package/src/style/hover.shadow.css

@@ -1,9 +1,9 @@
 @import '@semcore/utils/style/var.css';
 
 SHoverLine {
-  stroke: var(--stone);
+  stroke: var(--gray-300);
 }
 
 SHoverRect {
-  fill: color-mod(var(--mist) a(30%));
+  fill: color-mod(var(--gray-200) a(30%));
 }

package/src/style/line.shadow.css

@@ -4,7 +4,7 @@
 SLine {
   fill: transparent;
   stroke-width: 3;
-  stroke: var(--blue-01);
+  stroke: var(--blue-03);
   transition-property: d;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -20,7 +20,7 @@ SLine[hide] {
 
 SNull {
   fill: transparent;
-  stroke: var(--mist);
+  stroke: var(--gray-200);
   stroke-dasharray: 4;
 }
 

package/src/style/radial-tree.shadow.css

@@ -3,10 +3,21 @@
 
 SRadian {
   cursor: pointer;
+  fill: var(--blue-04);
 }
+
+SLine {
+  stroke: var(--blue-04);
+}
+
+SLine[color] {
+  stroke: var(--color);
+}
+
 SCap {
   transition: r 0.1s;
 }
+
 SLabel {
   fill: var(--color);
   cursor: var(--text-cursor);

package/src/style/scatterplot.shadow.css

@@ -2,7 +2,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SScatterPlot {
-  fill: #2bb3ff;
+  fill: var(--blue-03);
   transition-property: cx, cy;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -19,7 +19,7 @@ SScatterPlot[color] {
 SValue {
   text-anchor: middle;
   font-size: 10px;
-  stroke: #008ff8;
+  stroke: var(--blue-04);
 }
 
 SValue[color] {

package/src/style/tooltip.shadow.css

@@ -6,15 +6,15 @@ STooltip {
   line-height: var(--lh-100);
   position: relative;
   background-color: #fff;
-  border-radius: 3px;
-  border: 1px solid var(--stone-light);
+  border-radius: 6px;
+  border: 1px solid var(--gray-100);
   box-sizing: border-box;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25), 0 -2px 5px -2px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow-popper);
   padding: 12px;
 }
 
 STitle {
-  color: var(--gray60);
+  color: var(--gray-500);
   margin-bottom: 8px;
 }
 
@@ -28,7 +28,7 @@ SDot {
   height: 8px;
   border-radius: 50%;
   margin-right: 8px;
-  background: var(--blue-01);
+  background: var(--blue-03);
 }
 
 SDot[color] {

package/src/style/var.css

@@ -1,32 +1,125 @@
 :root {
-  --blue-01: #50aef4;
-  --blue-02: #91c7ef;
-  --blue-03: #0e75c2;
-  --blue-04: #d1e8f8;
-  --blue-05: #084c80;
-  --green-01: #3ab011;
-  --green-02: #91d27b;
-  --green-03: #278707;
-  --green-04: #d1edc8;
-  --green-05: #1a6700;
-  --orange-01: #ff8e29;
-  --orange-02: #fec089;
-  --orange-03: #da6905;
-  --orange-04: #ffe5cd;
-  --orange-05: #a14e03;
-  --violet-01: #890c85;
-  --violet-02: #c783c5;
-  --violet-03: #6e026b;
-  --violet-04: #e7cbe6;
-  --violet-05: #4d024b;
-  --red-01: #e91e25;
-  --red-02: #f69498;
-  --red-03: #bd0000;
-  --red-04: #fbd2d3;
-  --red-05: #830005;
-  --yellow-01: #ffc83f;
-  --yellow-02: #ffdb82;
-  --yellow-03: #e4aa18;
-  --yellow-04: #ffebb9;
-  --yellow-05: #b3840c;
+  --blue-01: #c4e5fe;
+  --blue-02: #8ecdff;
+  --blue-03: #2bb3ff;
+  --blue-04: #008ff8;
+  --blue-05: #006dca;
+  --green-01: #9ef2c9;
+  --green-02: #59ddaa;
+  --green-03: #00c192;
+  --green-04: #009f81;
+  --green-05: #007c65;
+  --orange-01: #ffdca2;
+  --orange-02: #ffb26e;
+  --orange-03: #ff8c43;
+  --orange-04: #ff622d;
+  --orange-05: #c33909;
+  --pink-01: #ffd3ff;
+  --pink-02: #ffa9fa;
+  --pink-03: #f67cf2;
+  --pink-04: #e14adf;
+  --pink-05: #b229b9;
+  --violet-01: #edd9ff;
+  --violet-02: #dcb8ff;
+  --violet-03: #c695ff;
+  --violet-04: #ab6cfe;
+  --violet-05: #8649e1;
+  --red-01: #ffd7df;
+  --red-02: #ffaeb5;
+  --red-03: #ff8786;
+  --red-04: #ff4953;
+  --red-05: #d1002f;
+  --yellow-01: #fce081;
+  --yellow-02: #fdc23c;
+  --yellow-03: #ef9800;
+  --yellow-04: #d87900;
+  --yellow-05: #a75800;
+  --salad-01: #c7ee96;
+  --salad-02: #9bd85d;
+  --salad-03: #66c030;
+  --salad-04: #35a21e;
+  --salad-05: #0a7e22;
+  --gray-01: #c4c7cf;
+
+  --gray-50: #f4f5f9;
+  --gray-100: #e0e1e9;
+  --gray-200: #c4c7cf;
+  --gray-300: #a9abb6;
+  --gray-400: #8a8e9b;
+  --gray-500: #6c6e79;
+  --gray-600: #484a54;
+  --gray-700: #2b2e38;
+  --gray-800: #191b23;
+  --blue-50: #e9f7ff;
+  --blue-100: #c4e5fe;
+  --blue-200: #8ecdff;
+  --blue-300: #2bb3ff;
+  --blue-400: #008ff8;
+  --blue-500: #006dca;
+  --blue-600: #044792;
+  --blue-700: #002b5f;
+  --blue-800: #001b3d;
+  --green-100: #9ef2c9;
+  --green-200: #59ddaa;
+  --green-300: #00c192;
+  --green-400: #009f81;
+  --green-50: #dbfee8;
+  --green-500: #007c65;
+  --green-600: #055345;
+  --green-700: #00342d;
+  --green-800: #00201e;
+  --salad-100: #c7ee96;
+  --salad-200: #9bd85d;
+  --salad-300: #66c030;
+  --salad-400: #35a21e;
+  --salad-50: #ecfbcd;
+  --salad-500: #0a7e22;
+  --salad-600: #005613;
+  --salad-700: #003509;
+  --salad-800: #002203;
+  --orange-50: #fff3d9;
+  --orange-100: #ffdca2;
+  --orange-200: #ffb26e;
+  --orange-300: #ff8c43;
+  --orange-400: #ff622d;
+  --orange-500: #c33909;
+  --orange-600: #8b1500;
+  --orange-700: #551200;
+  --orange-800: #351000;
+  --yellow-100: #fce081;
+  --yellow-200: #fdc23c;
+  --yellow-300: #ef9800;
+  --yellow-400: #d87900;
+  --yellow-50: #fdf7c8;
+  --yellow-500: #a75800;
+  --yellow-600: #743a00;
+  --yellow-700: #462500;
+  --yellow-800: #2c1600;
+  --red-100: #ffd7df;
+  --red-200: #ffaeb5;
+  --red-300: #ff8786;
+  --red-400: #ff4953;
+  --red-50: #fff0f7;
+  --red-500: #d1002f;
+  --red-600: #8e0016;
+  --red-700: #58000a;
+  --red-800: #410101;
+  --pink-100: #ffd3ff;
+  --pink-200: #ffa9fa;
+  --pink-300: #f67cf2;
+  --pink-400: #e14adf;
+  --pink-50: #fff0ff;
+  --pink-500: #b229b9;
+  --pink-600: #7d0480;
+  --pink-700: #4d0050;
+  --pink-800: #340439;
+  --violet-100: #edd9ff;
+  --violet-200: #dcb8ff;
+  --violet-300: #c695ff;
+  --violet-400: #ab6cfe;
+  --violet-50: #f9f2ff;
+  --violet-500: #8649e1;
+  --violet-600: #5925ab;
+  --violet-700: #421984;
+  --violet-800: #220358;
 }

package/src/style/venn.shadow.css

@@ -1,7 +1,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SCircle {
-  fill: var(--green-01);
+  fill: var(--green-02);
   stroke: #fff;
   stroke-width: 2px;
   fill-opacity: 0.5;