@semcore/d3-chart 1.5.3 → 1.6.0

package/lib/es6/color.js

@@ -1,40 +1,42 @@
-export var 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"*/
+var 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"
 };
 var componentRenderIndex = 0;
 var cache = {};
 var colorValues = Object.keys(colors).sort(function (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/lib/es6/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/color.js"],"names":["colors","componentRenderIndex","cache","colorValues","Object","keys","sort","a","b","parseInt","match","join","getColor","key","color"],"mappings":"AAAA,OAAO,IAAMA,MAAM,GAAG;AACpB,aAAW,SADS;AAEpB,aAAW,SAFS;AAGpB,aAAW,SAHS;AAIpB,aAAW,SAJS;AAKpB,aAAW,SALS;AAMpB,cAAY,SANQ;AAOpB,cAAY,SAPQ;AAQpB,cAAY,SARQ;AASpB,cAAY,SATQ;AAUpB,cAAY,SAVQ;AAWpB,eAAa,SAXO;AAYpB,eAAa,SAZO;AAapB,eAAa,SAbO;AAcpB,eAAa,SAdO;AAepB,eAAa,SAfO;AAgBpB,eAAa,SAhBO;AAiBpB,eAAa,SAjBO;AAkBpB,eAAa,SAlBO;AAmBpB,eAAa,SAnBO;AAoBpB,eAAa,SApBO;AAqBpB,YAAU,SArBU;AAsBpB,YAAU,SAtBU;AAuBpB,YAAU,SAvBU;AAwBpB,YAAU,SAxBU;AAyBpB,YAAU,SAzBU;AA0BpB,eAAa,SA1BO;AA2BpB,eAAa,SA3BO;AA4BpB,eAAa,SA5BO;AA6BpB,eAAa,SA7BO;AA8BpB,eAAa;AA9BO,CAAf;AAiCP,IAAIC,oBAAoB,GAAG,CAA3B;AACA,IAAMC,KAAK,GAAG,EAAd;AACA,IAAMC,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYL,MAAZ,EAAoBM,IAApB,CAAyB,UAACC,CAAD,EAAIC,CAAJ,EAAU;AACrD,SAAOC,QAAQ,CAACF,CAAC,CAACG,KAAF,CAAQ,QAAR,EAAkBC,IAAlB,CAAuB,EAAvB,CAAD,EAA6B,EAA7B,CAAR,GAA2CF,QAAQ,CAACD,CAAC,CAACE,KAAF,CAAQ,QAAR,EAAkBC,IAAlB,CAAuB,EAAvB,CAAD,EAA6B,EAA7B,CAA1D;AACD,CAFmB,CAApB;AAIA,eAAe,SAASC,QAAT,CAAkBC,GAAlB,EAAuB;AACpC,MAAIX,KAAK,CAACW,GAAD,CAAT,EAAgB;AACd,WAAOX,KAAK,CAACW,GAAD,CAAZ;AACD;;AACD,MAAMC,KAAK,GAAGd,MAAM,CAACG,WAAW,CAACF,oBAAoB,EAArB,CAAZ,CAApB;AACAC,EAAAA,KAAK,CAACW,GAAD,CAAL,GAAaC,KAAb;AACA,SAAOA,KAAP;AACD","sourcesContent":["export const colors = {\n  'blue-01': '#50aef4',\n  'blue-02': '#91c7ef',\n  'blue-03': '#0e75c2',\n  'blue-04': '#d1e8f8',\n  'blue-05': '#084c80',\n  'green-01': '#3ab011',\n  'green-02': '#91d27b',\n  'green-03': '#278707',\n  'green-04': '#d1edc8',\n  'green-05': '#1a6700',\n  'orange-01': '#ff8e29',\n  'orange-02': '#fec089',\n  'orange-03': '#da6905',\n  'orange-04': '#ffe5cd',\n  'orange-05': '#a14e03',\n  'violet-01': '#890c85',\n  'violet-02': '#c783c5',\n  'violet-03': '#6e026b',\n  'violet-04': '#e7cbe6',\n  'violet-05': '#4d024b',\n  'red-01': '#e91e25',\n  'red-02': '#f69498',\n  'red-03': '#bd0000',\n  'red-04': '#fbd2d3',\n  'red-05': '#830005',\n  'yellow-01': '#ffc83f',\n  'yellow-02': '#ffdb82',\n  'yellow-03': '#e4aa18',\n  'yellow-04': '#ffebb9',\n  'yellow-05': '#b3840c',\n};\n\nlet componentRenderIndex = 0;\nconst cache = {};\nconst colorValues = Object.keys(colors).sort((a, b) => {\n  return parseInt(a.match(/[0-9]/g).join(''), 10) - parseInt(b.match(/[0-9]/g).join(''), 10);\n});\n\nexport default function getColor(key) {\n  if (cache[key]) {\n    return cache[key];\n  }\n  const color = colors[colorValues[componentRenderIndex++]];\n  cache[key] = color;\n  return color;\n}\n"],"file":"color.js"}
+{"version":3,"sources":["../../src/color.js"],"names":["colors","componentRenderIndex","cache","colorValues","Object","keys","sort","a","b","parseInt","match","join","getColor","key","color"],"mappings":"AAAA;AACA,IAAMA,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAZ;AAKA,IAAIC,oBAAoB,GAAG,CAA3B;AACA,IAAMC,KAAK,GAAG,EAAd;AACA,IAAMC,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYL,MAAZ,EAAoBM,IAApB,CAAyB,UAACC,CAAD,EAAIC,CAAJ,EAAU;AACrD,SAAOC,QAAQ,CAACF,CAAC,CAACG,KAAF,CAAQ,QAAR,EAAkBC,IAAlB,CAAuB,EAAvB,CAAD,EAA6B,EAA7B,CAAR,GAA2CF,QAAQ,CAACD,CAAC,CAACE,KAAF,CAAQ,QAAR,EAAkBC,IAAlB,CAAuB,EAAvB,CAAD,EAA6B,EAA7B,CAA1D;AACD,CAFmB,CAApB;AAIA,SAASX,MAAT;AACA,eAAe,SAASY,QAAT,CAAkBC,GAAlB,EAAuB;AACpC,MAAIX,KAAK,CAACW,GAAD,CAAT,EAAgB;AACd,WAAOX,KAAK,CAACW,GAAD,CAAZ;AACD;;AACD,MAAMC,KAAK,GAAGd,MAAM,CAACG,WAAW,CAACF,oBAAoB,EAArB,CAAZ,CAApB;AACAC,EAAAA,KAAK,CAACW,GAAD,CAAL,GAAaC,KAAb;AACA,SAAOA,KAAP;AACD","sourcesContent":["/*__semcore-vars__:\"./style/var.css\"*/\nconst colors = preval`\n  const path = require('path');\n  module.exports = require('@semcore/babel-plugin-react-semcore/utils/vars')(path.resolve(__dirname, './style/var.css'));\n`;\n\nlet componentRenderIndex = 0;\nconst cache = {};\nconst colorValues = Object.keys(colors).sort((a, b) => {\n  return parseInt(a.match(/[0-9]/g).join(''), 10) - parseInt(b.match(/[0-9]/g).join(''), 10);\n});\n\nexport { colors };\nexport default function getColor(key) {\n  if (cache[key]) {\n    return cache[key];\n  }\n  const color = colors[colorValues[componentRenderIndex++]];\n  cache[key] = color;\n  return color;\n}\n"],"file":"color.js"}

package/lib/es6/index.js

@@ -7,6 +7,8 @@ export { default as GroupBar } from './GroupBar';
 export { default as StackBar } from './StackBar';
 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 Donut } from './Donut';
 export { default as Venn } from './Venn';
 export { default as Tooltip } from './Tooltip';

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":["default","Plot","XAxis","YAxis","Line","Bar","HorizontalBar","GroupBar","StackBar","Area","StackedArea","Donut","Venn","Tooltip","ResponsiveContainer","HoverLine","HoverRect","minMax","colors"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB,QAAgC,QAAhC;AAEA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,QAA7B;AAEA,SAASH,OAAO,IAAII,IAApB,QAAgC,QAAhC;AAEA,SAASJ,OAAO,IAAIK,GAApB,QAA+B,OAA/B;AACA,SAASL,OAAO,IAAIM,aAApB,QAAyC,iBAAzC;AACA,SAASN,OAAO,IAAIO,QAApB,QAAoC,YAApC;AACA,SAASP,OAAO,IAAIQ,QAApB,QAAoC,YAApC;AACA,SAASR,OAAO,IAAIS,IAApB,QAAgC,QAAhC;AACA,SAAST,OAAO,IAAIU,WAApB,QAAuC,eAAvC;AACA,SAASV,OAAO,IAAIW,KAApB,QAAiC,SAAjC;AACA,SAASX,OAAO,IAAIY,IAApB,QAAgC,QAAhC;AAEA,SAASZ,OAAO,IAAIa,OAApB,QAAmC,WAAnC;AAEA,SAASb,OAAO,IAAIc,mBAApB,QAA+C,uBAA/C;AAEA,SAASC,SAAT,EAAoBC,SAApB,QAAqC,SAArC;AAEA,SAASC,MAAT,QAAuB,SAAvB;AACA,SAASC,MAAT,QAAuB,SAAvB","sourcesContent":["export { default as Plot } from './Plot';\n\nexport { XAxis, YAxis } from './Axis';\n\nexport { default as Line } from './Line';\n\nexport { default as Bar } from './Bar';\nexport { default as HorizontalBar } from './HorizontalBar';\nexport { default as GroupBar } from './GroupBar';\nexport { default as StackBar } from './StackBar';\nexport { default as Area } from './Area';\nexport { default as StackedArea } from './StackedArea';\nexport { default as Donut } from './Donut';\nexport { default as Venn } from './Venn';\n\nexport { default as Tooltip } from './Tooltip';\n\nexport { default as ResponsiveContainer } from './ResponsiveContainer';\n\nexport { HoverLine, HoverRect } from './Hover';\n\nexport { minMax } from './utils';\nexport { colors } from './color';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default","Plot","XAxis","YAxis","Line","Bar","HorizontalBar","GroupBar","StackBar","Area","StackedArea","ScatterPlot","Bubble","Donut","Venn","Tooltip","ResponsiveContainer","HoverLine","HoverRect","minMax","colors"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB,QAAgC,QAAhC;AAEA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,QAA7B;AAEA,SAASH,OAAO,IAAII,IAApB,QAAgC,QAAhC;AAEA,SAASJ,OAAO,IAAIK,GAApB,QAA+B,OAA/B;AACA,SAASL,OAAO,IAAIM,aAApB,QAAyC,iBAAzC;AACA,SAASN,OAAO,IAAIO,QAApB,QAAoC,YAApC;AACA,SAASP,OAAO,IAAIQ,QAApB,QAAoC,YAApC;AACA,SAASR,OAAO,IAAIS,IAApB,QAAgC,QAAhC;AACA,SAAST,OAAO,IAAIU,WAApB,QAAuC,eAAvC;AACA,SAASV,OAAO,IAAIW,WAApB,QAAuC,eAAvC;AACA,SAASX,OAAO,IAAIY,MAApB,QAAkC,UAAlC;AACA,SAASZ,OAAO,IAAIa,KAApB,QAAiC,SAAjC;AACA,SAASb,OAAO,IAAIc,IAApB,QAAgC,QAAhC;AAEA,SAASd,OAAO,IAAIe,OAApB,QAAmC,WAAnC;AAEA,SAASf,OAAO,IAAIgB,mBAApB,QAA+C,uBAA/C;AAEA,SAASC,SAAT,EAAoBC,SAApB,QAAqC,SAArC;AAEA,SAASC,MAAT,QAAuB,SAAvB;AACA,SAASC,MAAT,QAAuB,SAAvB","sourcesContent":["export { default as Plot } from './Plot';\n\nexport { XAxis, YAxis } from './Axis';\n\nexport { default as Line } from './Line';\n\nexport { default as Bar } from './Bar';\nexport { default as HorizontalBar } from './HorizontalBar';\nexport { default as GroupBar } from './GroupBar';\nexport { default as StackBar } from './StackBar';\nexport { default as Area } from './Area';\nexport { default as StackedArea } from './StackedArea';\nexport { default as ScatterPlot } from './ScatterPlot';\nexport { default as Bubble } from './Bubble';\nexport { default as Donut } from './Donut';\nexport { default as Venn } from './Venn';\n\nexport { default as Tooltip } from './Tooltip';\n\nexport { default as ResponsiveContainer } from './ResponsiveContainer';\n\nexport { HoverLine, HoverRect } from './Hover';\n\nexport { minMax } from './utils';\nexport { colors } from './color';\n"],"file":"index.js"}

package/lib/es6/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/lib/es6/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/lib/es6/style/bubble.shadow.css

@@ -0,0 +1,45 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+SBubble {
+  fill: #2bb3ff;
+  stroke: #fff;
+  stroke-width: 2px;
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+  opacity: 0.5;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+SBubble[color] {
+  fill: var(--color);
+}
+
+SCenter {
+  text-anchor: middle;
+  font-size: 11px;
+  stroke: #2bb3ff;
+}
+
+SCenter[color] {
+  stroke: var(--color);
+}
+
+SLabel {
+  fill: #2bb3ff;
+}
+
+SLabel[position='right'] {
+  text-anchor: end;
+}
+
+SLabel[position='left'] {
+  text-anchor: start;
+}
+
+SLabel[color] {
+  fill: var(--color);
+}

package/lib/es6/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/lib/es6/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/lib/es6/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/lib/es6/style/scatterplot.shadow.css

@@ -0,0 +1,27 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+SScatterPlot {
+  fill: #2bb3ff;
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+  opacity: 0.5;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+SScatterPlot[color] {
+  fill: var(--color);
+}
+
+SValue {
+  text-anchor: middle;
+  font-size: 10px;
+  stroke: #008ff8;
+}
+
+SValue[color] {
+  stroke: var(--color);
+}

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

@@ -1,6 +1,9 @@
 @import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
 
 STooltip {
+  font-size: var(--fs-100);
+  line-height: var(--lh-100);
   position: relative;
   background-color: #fff;
   border-radius: 3px;
@@ -11,8 +14,6 @@ STooltip {
 }
 
 STitle {
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
   color: var(--gray60);
   margin-bottom: 8px;
 }
@@ -27,5 +28,9 @@ SDot {
   height: 8px;
   border-radius: 50%;
   margin-right: 8px;
+  background: var(--blue-01);
+}
+
+SDot[color] {
   background: var(--color);
 }

package/lib/es6/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/lib/es6/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/lib/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/lib/types/Bubble.d.ts

@@ -0,0 +1,27 @@
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+
+export interface IBubbleProps extends IContext {
+  /** Field from data for XAxis */
+  x: string;
+  /** Field from data for YAxis */
+  y: string;
+  /** Field from data for circle radius */
+  value: string;
+  /** Field from data for circle label */
+  label?: string;
+  /** Circle color */
+  color?: string;
+  /** Cross in the center of the bubble
+   * @default true
+   */
+  markedCross?: boolean;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
+}
+
+declare const Bubble: <T>(props: CProps<IBubbleProps & T>) => ReturnEl;
+
+export default Bubble;

package/lib/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>(

package/lib/types/ScatterPlot.d.ts

@@ -0,0 +1,27 @@
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+
+export interface IScatterPlotProps extends IContext {
+  /** Field from data for XAxis */
+  x: string;
+  /** Field from data for YAxis */
+  y: string;
+  /** Field from data for circle value */
+  value?: string;
+  /** Circle color */
+  color?: string;
+  /** Circle value color */
+  valueColor?: string;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
+  /** Radius of circles
+   * @default 5.5 or 12 with value
+   */
+  r?: number;
+}
+
+declare const ScatterPlot: <T>(props: CProps<IScatterPlotProps & T>) => ReturnEl;
+
+export default ScatterPlot;

package/lib/types/index.d.ts

@@ -39,3 +39,9 @@ export * from './Donut';
 
 export { default as Tooltip } from './Tooltip';
 export * from './Tooltip';
+
+export { default as ScatterPlot } from './ScatterPlot';
+export * from './ScatterPlot';
+
+export { default as Bubble } from './Bubble';
+export * from './Bubble';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/d3-chart",
   "description": "SEMRush D3 Chart Component",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",

package/src/Area.js

@@ -14,8 +14,8 @@ class AreaRoot extends Component {
   static style = style;
   static enhance = [uniqueIDEnhancement()];
 
-  static defaultProps = ({ x, y, y0, $rootProps, curve = curveLinear }) => {
-    const [xScale, yScale] = $rootProps.scale;
+  static defaultProps = ({ x, y, y0, $rootProps, curve = curveLinear, scale }) => {
+    const [xScale, yScale] = scale || $rootProps.scale;
     const yRange = yScale.range();
 
     return {
@@ -30,7 +30,6 @@ class AreaRoot extends Component {
         .curve(curve)
         .x((p) => scaleOfBandwidth(xScale, p[x]))
         .y((p) => scaleOfBandwidth(yScale, p[y])),
-      color: '#50aef4',
       duration: 500,
     };
   };

package/src/Bar.js

@@ -14,7 +14,6 @@ class BarRoot extends Component {
   static enhance = [uniqueIDEnhancement()];
 
   static defaultProps = {
-    color: '#50aef4',
     offset: [0, 0],
     duration: 500,
     r: 2,
@@ -70,17 +69,16 @@ class BarRoot extends Component {
     const [xScale, yScale] = scale;
     const barY = yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1];
     const barX = xScale(d[x]) + offset[0];
-    let height = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0)));
-    height = isRounded ? height + r : height;
+    const height = Math.abs(
+      yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0)),
+    );
     const width = widthProps || getBandwidth(xScale);
-    const isRounded = r !== 0;
-    const yValue = isRounded ? (d[y] > 0 ? barY - r : barY) : barY;
     const dSvg = getRect({
       x: barX,
-      y: yValue,
+      y: barY,
       width,
       height,
-      radius: r,
+      radius: Array.isArray(r) ? r[i] : r,
       position: d[y] > 0 ? 'top' : 'bottom',
     });
 
@@ -96,7 +94,7 @@ class BarRoot extends Component {
         hide={hide}
         color={color}
         x={barX}
-        y={yValue}
+        y={barY}
         width={width}
         height={height}
         d={dSvg}