@semcore/d3-chart 1.7.1 → 2.0.0

package/src/createElement.jsx

@@ -9,11 +9,13 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 
 function createElementRender() {
   const Element = React.forwardRef(function (
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     { render, tag, childrenPosition = 'below', x: xS, y: yS, ...source },
     ref,
   ) {
     const {
       forwardRef = null,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       children: _children,
       Children,
       x = xS,
@@ -50,7 +52,7 @@ function createElementRender() {
     }
 
     if (!Tag) {
-      throw new Error('В Element нужно передать render');
+      throw new Error('Element expected render prop to be passed');
     }
     return [
       <React.Fragment key="child-above">

package/src/index.js

@@ -12,6 +12,7 @@ export { default as Area } from './Area';
 export { default as StackedArea } from './StackedArea';
 export { default as ScatterPlot } from './ScatterPlot';
 export { default as Bubble } from './Bubble';
+export { default as RadialTree } from './RadialTree';
 export { default as Donut } from './Donut';
 export { default as Venn } from './Venn';
 

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,13 +19,13 @@ STick[hide] {
 
 SGrid {
   fill: transparent;
-  stroke: var(--mercury);
+  stroke: var(--gray-100);
 }
 
 STitle {
   font-size: 12px;
-  fill: var(--gray60);
-  transform-origin: center;
+  fill: var(--gray-500);
+  transform-origin: var(--transform-origin);
 }
 
 STitle[position='top'] {
@@ -41,14 +41,12 @@ STitle[position='bottom'] {
 
 STitle[position='right'] {
   transform: rotate(-90deg);
-  transform-box: fill-box;
   alignment-baseline: middle;
 }
 
 STitle[position='left'] {
   transform: rotate(-90deg);
-  text-anchor: end;
-  transform-box: fill-box;
+  text-anchor: middle;
   alignment-baseline: middle;
 }
 

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/plot.shadow.css

@@ -0,0 +1,6 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+SPlot {
+  overflow: hidden;
+}

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

@@ -0,0 +1,34 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+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);
+  transform-origin: var(--transform-origin);
+}
+SRadian:hover SLabel {
+  fill: var(--color-hovered);
+}
+
+@media (prefers-reduced-motion) {
+  SLineCap {
+    transition: none;
+  }
+}

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;

package/src/types/index.d.ts

@@ -34,6 +34,12 @@ export * from './Area';
 export { default as StackedArea } from './StackedArea';
 export * from './StackedArea';
 
+/** It becomes resolvable after building and moving file to lib dir */
+// eslint-disable-next-line import/no-unresolved
+export { default as RadialTree } from './RadialTree';
+// eslint-disable-next-line import/no-unresolved
+export * from './RadialTree';
+
 export { default as Donut } from './Donut';
 export * from './Donut';