@semcore/d3-chart 1.5.2 → 1.5.6

package/src/color.js

@@ -1,35 +1,8 @@
-export const colors = {
-  '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',
-};
+/*__semcore-vars__:"./style/var.css"*/
+const colors = preval`
+  const path = require('path');
+  module.exports = require('@semcore/babel-plugin-react-semcore/utils/vars')(path.resolve(__dirname, './style/var.css'));
+`;
 
 let componentRenderIndex = 0;
 const cache = {};
@@ -37,6 +10,7 @@ const colorValues = Object.keys(colors).sort((a, b) => {
   return parseInt(a.match(/[0-9]/g).join(''), 10) - parseInt(b.match(/[0-9]/g).join(''), 10);
 });
 
+export { colors };
 export default function getColor(key) {
   if (cache[key]) {
     return cache[key];

package/src/style/area.shadow.css

@@ -1,14 +1,24 @@
+@import '@semcore/d3-chart/src/style/var.css';
+
 SArea {
-  fill: var(--color);
+  fill: var(--blue-01);
   fill-opacity: 0.4;
 }
 
+SArea[color] {
+  fill: var(--color);
+}
+
 SAreaLine {
-  stroke: var(--color);
+  stroke: var(--blue-01);
   stroke-width: 3;
   fill: transparent;
 }
 
+SAreaLine[color] {
+  stroke: var(--color);
+}
+
 SArea,
 SAreaLine {
   transition-property: d;

package/src/style/bar.shadow.css

@@ -1,16 +1,21 @@
 @import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
 
 SBar {
-  fill: var(--color);
+  fill: var(--blue-01);
   transition-property: height, width, y;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
 }
 
+SBar[color] {
+  fill: var(--color);
+}
+
 SBar[hide] {
   display: none;
 }
 
 SBackground {
-  fill: color-mod(var(--mystic));
+  fill: var(--mystic);
 }

package/src/style/donut.shadow.css

@@ -1,5 +1,20 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
 SPie {
   stroke: #ffffff;
+  fill: var(--blue-01);
+}
+
+SPie[color] {
+  fill: var(--color);
+}
+
+SEmptyData {
+  fill: var(--mystic);
+}
+
+SEmptyData[color] {
   fill: var(--color);
 }
 

package/src/style/dot.shadow.css

@@ -1,15 +1,20 @@
 @import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
 
 SDot {
   stroke-width: 2px;
   stroke: #fff;
   r: 6px;
-  fill: var(--color);
+  fill: var(--blue-01);
   transition-property: cx, cy;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
 }
 
+SDot[color] {
+  fill: var(--color);
+}
+
 SDot[hide] {
   display: none;
 }

package/src/style/line.shadow.css

@@ -1,14 +1,19 @@
 @import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
 
 SLine {
   fill: transparent;
   stroke-width: 3;
-  stroke: var(--color);
+  stroke: var(--blue-01);
   transition-property: d;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
 }
 
+SLine[color] {
+  stroke: var(--color);
+}
+
 SLine[hide] {
   display: none;
 }

package/src/style/tooltip.shadow.css

@@ -1,4 +1,5 @@
 @import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
 
 STooltip {
   position: relative;
@@ -27,5 +28,9 @@ SDot {
   height: 8px;
   border-radius: 50%;
   margin-right: 8px;
+  background: var(--blue-01);
+}
+
+SDot[color] {
   background: var(--color);
 }

package/src/style/var.css

@@ -0,0 +1,32 @@
+: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;
+}

package/src/style/venn.shadow.css

@@ -1,5 +1,7 @@
+@import '@semcore/d3-chart/src/style/var.css';
+
 SCircle {
-  fill: var(--color);
+  fill: var(--green-01);
   stroke: #fff;
   stroke-width: 2px;
   fill-opacity: 0.5;
@@ -12,6 +14,10 @@ SCircle {
   }
 }
 
+SCircle[color] {
+  fill: var(--color);
+}
+
 SIntersection {
   stroke: #fff;
   stroke-width: 2px;

package/src/types/Bar.d.ts

@@ -18,7 +18,7 @@ export interface IBarProps extends IContext {
   /** Radius of curvature
    * @default 2
    */
-  r?: number;
+  r?: number | number[];
 }
 
 export interface IBarContext {

package/src/types/HorizontalBar.d.ts

@@ -17,7 +17,7 @@ export interface IHorizontalBarProps extends IContext {
   /** Radius of curvature
    * @default 2
    */
-  r?: number;
+  r?: number | number[];
 }
 
 declare const HorizontalBar: (<T>(