@semcore/d3-chart 1.5.6 → 1.6.0

package/lib/cjs/ScatterPlot.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _core = require("@semcore/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _canUseDOM = _interopRequireDefault(require("@semcore/utils/lib/canUseDOM"));
+
+var _utils = require("./utils");
+
+var _createElement = _interopRequireDefault(require("./createElement"));
+
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+
+var _d3Transition = require("d3-transition");
+
+var _ClipPath = _interopRequireDefault(require("./ClipPath"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/*__reshadow-styles__:"./style/scatterplot.shadow.css"*/
+var style = (
+/*__reshadow_css_start__*/
+_core.sstyled.insert(
+/*__inner_css_start__*/
+".___SScatterPlot_w67fh_gg_{fill:#2bb3ff;transition-property:cx,cy;transition-duration:var(--duration_hiipjg);transition-timing-function:ease-in-out;opacity:.5}.___SScatterPlot_w67fh_gg_:hover{opacity:.8}.___SScatterPlot_w67fh_gg_.__color_w67fh_gg_{fill:var(--color_hiipjg)}.___SValue_w67fh_gg_{text-anchor:middle;font-size:10px;stroke:#008ff8}.___SValue_w67fh_gg_.__color_w67fh_gg_{stroke:var(--color_hiipjg)}"
+/*__inner_css_end__*/
+, "hiipjg_gg_")
+/*__reshadow_css_end__*/
+, {
+  "__SScatterPlot": "___SScatterPlot_w67fh_gg_",
+  "--duration": "--duration_hiipjg",
+  "_color": "__color_w67fh_gg_",
+  "--color": "--color_hiipjg",
+  "__SValue": "___SValue_w67fh_gg_"
+});
+
+var ScatterPlotRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(ScatterPlotRoot, _Component);
+
+  var _super = _createSuper(ScatterPlotRoot);
+
+  function ScatterPlotRoot() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ScatterPlotRoot);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "virtualElement", (0, _canUseDOM["default"])() ? document.createElement('div') : {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerTooltip", function (visible, props) {
+      return function (_ref2) {
+        var x = _ref2.clientX,
+            y = _ref2.clientY;
+        var eventEmitter = _this.asProps.eventEmitter;
+        _this.virtualElement.getBoundingClientRect = _this.generateGetBoundingClientRect(x, y);
+        _this.virtualElement[_utils.CONSTANT.VIRTUAL_ELEMENT] = true;
+        eventEmitter.emit('onTooltipVisible', visible, props, _this.virtualElement);
+      };
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ScatterPlotRoot, [{
+    key: "generateGetBoundingClientRect",
+    value: function generateGetBoundingClientRect() {
+      var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      return function () {
+        return {
+          width: 0,
+          height: 0,
+          top: y,
+          right: x,
+          bottom: y,
+          left: x
+        };
+      };
+    }
+  }, {
+    key: "animationCircle",
+    value: function animationCircle() {
+      var _this$asProps = this.asProps,
+          duration = _this$asProps.duration,
+          uid = _this$asProps.uid,
+          r = _this$asProps.r,
+          value = _this$asProps.value;
+      var radius = r ? r : value ? 12 : 5.5;
+      var selectRect = (0, _d3Transition.transition)().selection().selectAll("[id^=".concat(uid, "]")).attr('r', 0);
+      var selectRectNode = selectRect.node();
+
+      if (duration > 0 && selectRectNode) {
+        selectRect.transition().duration(duration).attr('r', radius);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.animationCircle();
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.animationCircle();
+    }
+  }, {
+    key: "renderCircle",
+    value: function renderCircle(d, i) {
+      var _ref;
+
+      var _this$asProps2 = this.asProps,
+          color = _this$asProps2.color,
+          scale = _this$asProps2.scale,
+          x = _this$asProps2.x,
+          y = _this$asProps2.y,
+          r = _this$asProps2.r,
+          offset = _this$asProps2.offset,
+          styles = _this$asProps2.styles,
+          uid = _this$asProps2.uid,
+          duration = _this$asProps2.duration,
+          value = _this$asProps2.value,
+          valueColor = _this$asProps2.valueColor;
+
+      var _scale = (0, _slicedToArray2["default"])(scale, 2),
+          xScale = _scale[0],
+          yScale = _scale[1];
+
+      var SScatterPlot = this.Element;
+      var SValue = 'text';
+      return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement("g", _ref.cn("g", {
+        "key": "circle(#".concat(i, ")"),
+        "onMouseMove": this.bindHandlerTooltip(true, {
+          xIndex: i
+        }),
+        "onMouseLeave": this.bindHandlerTooltip(false, {
+          xIndex: i
+        })
+      }), /*#__PURE__*/_react["default"].createElement(SScatterPlot, _ref.cn("SScatterPlot", {
+        "id": "".concat(uid).concat(i),
+        "render": "circle",
+        "clipPath": "url(#".concat(uid, ")"),
+        "cx": xScale(d[x]) + offset[0],
+        "cy": yScale(d[y]) + offset[1],
+        "color": d[color],
+        "r": r,
+        "use:duration": "".concat(duration, "ms")
+      })), d[value] && /*#__PURE__*/_react["default"].createElement(SValue, _ref.cn("SValue", {
+        "x": xScale(d[x]) + offset[0],
+        "y": yScale(d[y]) + offset[1],
+        "dy": ".3em",
+        "clipPath": "url(#".concat(uid, ")"),
+        "color": d[valueColor]
+      }), d[value]));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$asProps3 = this.asProps,
+          data = _this$asProps3.data,
+          uid = _this$asProps3.uid,
+          size = _this$asProps3.size,
+          scale = _this$asProps3.scale;
+
+      var _scale2 = (0, _slicedToArray2["default"])(scale, 2),
+          xScale = _scale2[0],
+          yScale = _scale2[1];
+
+      var marginX = Math.min(xScale.range()[0], xScale.range()[1]);
+      var marginY = Math.min(yScale.range()[0], yScale.range()[1]);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, data.map(this.renderCircle.bind(this)), /*#__PURE__*/_react["default"].createElement(_ClipPath["default"], {
+        id: uid,
+        x: marginX,
+        y: marginY,
+        width: "".concat(size[0] - 2 * marginX, "px"),
+        height: "".concat(size[1] - 2 * marginY, "px")
+      }));
+    }
+  }]);
+  return ScatterPlotRoot;
+}(_core.Component);
+
+(0, _defineProperty2["default"])(ScatterPlotRoot, "displayName", 'ScatterPlot');
+(0, _defineProperty2["default"])(ScatterPlotRoot, "style", style);
+(0, _defineProperty2["default"])(ScatterPlotRoot, "enhance", [(0, _uniqueID["default"])()]);
+(0, _defineProperty2["default"])(ScatterPlotRoot, "defaultProps", {
+  offset: [0, 0],
+  duration: 500
+});
+var ScatterPlot = (0, _createElement["default"])(ScatterPlotRoot);
+var _default = ScatterPlot;
+exports["default"] = _default;
+//# sourceMappingURL=ScatterPlot.js.map

package/lib/cjs/ScatterPlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ScatterPlot.js"],"names":["ScatterPlotRoot","document","createElement","visible","props","x","clientX","y","clientY","eventEmitter","asProps","virtualElement","getBoundingClientRect","generateGetBoundingClientRect","CONSTANT","VIRTUAL_ELEMENT","emit","width","height","top","right","bottom","left","duration","uid","r","value","radius","selectRect","selection","selectAll","attr","selectRectNode","node","transition","animationCircle","d","i","color","scale","offset","styles","valueColor","xScale","yScale","SScatterPlot","Element","SValue","bindHandlerTooltip","xIndex","data","size","marginX","Math","min","range","marginY","map","renderCircle","bind","Component","style","ScatterPlot"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled } from '@semcore/core';\nimport canUseDOM from '@semcore/utils/lib/canUseDOM';\nimport { CONSTANT } from './utils';\nimport createElement from './createElement';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport { transition } from 'd3-transition';\nimport style from './style/scatterplot.shadow.css';\nimport ClipPath from './ClipPath';\n\nclass ScatterPlotRoot extends Component {\n  static displayName = 'ScatterPlot';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()];\n\n  static defaultProps = {\n    offset: [0, 0],\n    duration: 500,\n  };\n\n  virtualElement = canUseDOM() ? document.createElement('div') : {};\n\n  generateGetBoundingClientRect(x = 0, y = 0) {\n    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });\n  }\n\n  bindHandlerTooltip = (visible, props) => ({ clientX: x, clientY: y }) => {\n    const { eventEmitter } = this.asProps;\n    this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(x, y);\n    this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;\n    eventEmitter.emit('onTooltipVisible', visible, props, this.virtualElement);\n  };\n\n  animationCircle() {\n    const { duration, uid, r, value } = this.asProps;\n    const radius = r ? r : value ? 12 : 5.5;\n    const selectRect = transition()\n      .selection()\n      .selectAll(`[id^=${uid}]`)\n      .attr('r', 0);\n    const selectRectNode = selectRect.node();\n\n    if (duration > 0 && selectRectNode) {\n      selectRect\n        .transition()\n        .duration(duration)\n        .attr('r', radius);\n    }\n  }\n\n  componentDidUpdate() {\n    this.animationCircle();\n  }\n\n  componentDidMount() {\n    this.animationCircle();\n  }\n\n  renderCircle(d, i) {\n    const {\n      color,\n      scale,\n      x,\n      y,\n      r,\n      offset,\n      styles,\n      uid,\n      duration,\n      value,\n      valueColor,\n    } = this.asProps;\n    const [xScale, yScale] = scale;\n    const SScatterPlot = this.Element;\n    const SValue = 'text';\n    return sstyled(styles)(\n      <g\n        key={`circle(#${i})`}\n        onMouseMove={this.bindHandlerTooltip(true, { xIndex: i })}\n        onMouseLeave={this.bindHandlerTooltip(false, { xIndex: i })}\n      >\n        <SScatterPlot\n          id={`${uid}${i}`}\n          render=\"circle\"\n          clipPath={`url(#${uid})`}\n          cx={xScale(d[x]) + offset[0]}\n          cy={yScale(d[y]) + offset[1]}\n          color={d[color]}\n          r={r}\n          use:duration={`${duration}ms`}\n        />\n        {d[value] && (\n          <SValue\n            x={xScale(d[x]) + offset[0]}\n            y={yScale(d[y]) + offset[1]}\n            dy=\".3em\"\n            clipPath={`url(#${uid})`}\n            color={d[valueColor]}\n          >\n            {d[value]}\n          </SValue>\n        )}\n      </g>,\n    );\n  }\n\n  render() {\n    const { data, uid, size, scale } = this.asProps;\n    const [xScale, yScale] = scale;\n    const marginX = Math.min(xScale.range()[0], xScale.range()[1]);\n    const marginY = Math.min(yScale.range()[0], yScale.range()[1]);\n\n    return (\n      <>\n        {data.map(this.renderCircle.bind(this))}\n        <ClipPath\n          id={uid}\n          x={marginX}\n          y={marginY}\n          width={`${size[0] - 2 * marginX}px`}\n          height={`${size[1] - 2 * marginY}px`}\n        />\n      </>\n    );\n  }\n}\n\nconst ScatterPlot = createElement(ScatterPlotRoot);\n\nexport default ScatterPlot;\n"],"file":"ScatterPlot.js"}

package/lib/cjs/StackBar.js

@@ -48,15 +48,15 @@ var _ref = (
 /*__reshadow_css_start__*/
 (0, _core.__css__)(
 /*__inner_css_start__*/
-".___SBar_jj14u_gg_{fill:#50aef4;transition-property:height,width,y;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SBar_jj14u_gg_.__color_jj14u_gg_{fill:var(--color)}.___SBar_jj14u_gg_.__hide_jj14u_gg_{display:none}.___SBackground_jj14u_gg_{fill:#e4ecf1}"
+".___SBar_1q91m_gg_{fill:#50aef4;transition-property:height,width,y;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SBar_1q91m_gg_.__color_1q91m_gg_{fill:var(--color)}.___SBar_1q91m_gg_.__hide_1q91m_gg_{display:none}.___SBackground_1q91m_gg_{fill:#e4ecf1}"
 /*__inner_css_end__*/
-, "1iy4upi_gg_")
+, "1uiyv3q_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBar": "___SBar_jj14u_gg_",
-  "_color": "__color_jj14u_gg_",
-  "_hide": "__hide_jj14u_gg_",
-  "__SBackground": "___SBackground_jj14u_gg_"
+  "__SBar": "___SBar_1q91m_gg_",
+  "_color": "__color_1q91m_gg_",
+  "_hide": "__hide_1q91m_gg_",
+  "__SBackground": "___SBackground_1q91m_gg_"
 }),
     style = (0, _extends2["default"])({}, _ref);
 

package/lib/cjs/StackedArea.js

@@ -46,16 +46,16 @@ var _ref = (
 /*__reshadow_css_start__*/
 (0, _core.__css__)(
 /*__inner_css_start__*/
-".___SArea_zz80o_gg_{fill:#50aef4;fill-opacity:.4}.___SArea_zz80o_gg_.__color_zz80o_gg_{fill:var(--color)}.___SAreaLine_zz80o_gg_{stroke:#50aef4;stroke-width:3;fill:transparent}.___SAreaLine_zz80o_gg_.__color_zz80o_gg_{stroke:var(--color)}.___SArea_zz80o_gg_,.___SAreaLine_zz80o_gg_{transition-property:d;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SNull_zz80o_gg_{fill:transparent;stroke:#bdc4c6;stroke-dasharray:4}.___SNull_zz80o_gg_.__hide_zz80o_gg_{display:none}"
+".___SArea_1pbv6_gg_{fill:#50aef4;fill-opacity:.4}.___SArea_1pbv6_gg_.__color_1pbv6_gg_{fill:var(--color)}.___SAreaLine_1pbv6_gg_{stroke:#50aef4;stroke-width:3;fill:transparent}.___SAreaLine_1pbv6_gg_.__color_1pbv6_gg_{stroke:var(--color)}.___SArea_1pbv6_gg_,.___SAreaLine_1pbv6_gg_{transition-property:d;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SNull_1pbv6_gg_{fill:transparent;stroke:#bdc4c6;stroke-dasharray:4}.___SNull_1pbv6_gg_.__hide_1pbv6_gg_{display:none}"
 /*__inner_css_end__*/
-, "1vghdzd_gg_")
+, "2qdwr1_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SArea": "___SArea_zz80o_gg_",
-  "_color": "__color_zz80o_gg_",
-  "__SAreaLine": "___SAreaLine_zz80o_gg_",
-  "__SNull": "___SNull_zz80o_gg_",
-  "_hide": "__hide_zz80o_gg_"
+  "__SArea": "___SArea_1pbv6_gg_",
+  "_color": "__color_1pbv6_gg_",
+  "__SAreaLine": "___SAreaLine_1pbv6_gg_",
+  "__SNull": "___SNull_1pbv6_gg_",
+  "_hide": "__hide_1pbv6_gg_"
 }),
     style = (0, _extends2["default"])({}, _ref);
 

package/lib/cjs/Tooltip.js

@@ -54,17 +54,17 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STooltip_1rv9e_gg_{position:relative;background-color:#fff;border-radius:3px;border:1px solid #bdc4c6;box-sizing:border-box;box-shadow:0 2px 5px 0 rgba(0,0,0,.25),0 -2px 5px -2px rgba(0,0,0,.25);padding:12px}.___STitle_1rv9e_gg_{font-size:12px;line-height:1.5;color:#757575;margin-bottom:8px}.___SDotGroup_1rv9e_gg_{display:flex;align-items:center}.___SDot_1rv9e_gg_{width:8px;height:8px;border-radius:50%;margin-right:8px;background:#50aef4}.___SDot_1rv9e_gg_.__color_1rv9e_gg_{background:var(--color_1rmqsj5)}"
+".___STooltip_16ivl_gg_{font-size:12px;line-height:1.5;position:relative;background-color:#fff;border-radius:3px;border:1px solid #bdc4c6;box-sizing:border-box;box-shadow:0 2px 5px 0 rgba(0,0,0,.25),0 -2px 5px -2px rgba(0,0,0,.25);padding:12px}.___STitle_16ivl_gg_{color:#757575;margin-bottom:8px}.___SDotGroup_16ivl_gg_{display:flex;align-items:center}.___SDot_16ivl_gg_{width:8px;height:8px;border-radius:50%;margin-right:8px;background:#50aef4}.___SDot_16ivl_gg_.__color_16ivl_gg_{background:var(--color_drazch)}"
 /*__inner_css_end__*/
-, "1rmqsj5_gg_")
+, "drazch_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STooltip": "___STooltip_1rv9e_gg_",
-  "__STitle": "___STitle_1rv9e_gg_",
-  "__SDotGroup": "___SDotGroup_1rv9e_gg_",
-  "__SDot": "___SDot_1rv9e_gg_",
-  "_color": "__color_1rv9e_gg_",
-  "--color": "--color_1rmqsj5"
+  "__STooltip": "___STooltip_16ivl_gg_",
+  "__STitle": "___STitle_16ivl_gg_",
+  "__SDotGroup": "___SDotGroup_16ivl_gg_",
+  "__SDot": "___SDot_16ivl_gg_",
+  "_color": "__color_16ivl_gg_",
+  "--color": "--color_drazch"
 });
 
 var TooltipRoot = /*#__PURE__*/function (_Component) {

package/lib/cjs/Venn.js

@@ -48,16 +48,16 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SCircle_c0tdq_gg_{fill:#3ab011;stroke:#fff;stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_1j56sbj);transition-timing-function:ease-in-out}.___SCircle_c0tdq_gg_:hover{fill-opacity:.7}.___SCircle_c0tdq_gg_.__color_c0tdq_gg_{fill:var(--color_1j56sbj)}.___SIntersection_c0tdq_gg_{stroke:#fff;stroke-width:2px;fill-opacity:0}.___SIntersection_c0tdq_gg_:hover{fill-opacity:.1}"
+".___SCircle_1fulb_gg_{fill:#3ab011;stroke:#fff;stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_1j56sbj);transition-timing-function:ease-in-out}.___SCircle_1fulb_gg_:hover{fill-opacity:.7}.___SCircle_1fulb_gg_.__color_1fulb_gg_{fill:var(--color_1j56sbj)}.___SIntersection_1fulb_gg_{stroke:#fff;stroke-width:2px;fill-opacity:0}.___SIntersection_1fulb_gg_:hover{fill-opacity:.1}"
 /*__inner_css_end__*/
 , "1j56sbj_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCircle": "___SCircle_c0tdq_gg_",
+  "__SCircle": "___SCircle_1fulb_gg_",
   "--duration": "--duration_1j56sbj",
-  "_color": "__color_c0tdq_gg_",
+  "_color": "__color_1fulb_gg_",
   "--color": "--color_1j56sbj",
-  "__SIntersection": "___SIntersection_c0tdq_gg_"
+  "__SIntersection": "___SIntersection_1fulb_gg_"
 });
 
 var VennRoot = /*#__PURE__*/function (_Component) {

package/lib/cjs/index.js

@@ -65,6 +65,18 @@ Object.defineProperty(exports, "StackedArea", {
     return _StackedArea["default"];
   }
 });
+Object.defineProperty(exports, "ScatterPlot", {
+  enumerable: true,
+  get: function get() {
+    return _ScatterPlot["default"];
+  }
+});
+Object.defineProperty(exports, "Bubble", {
+  enumerable: true,
+  get: function get() {
+    return _Bubble["default"];
+  }
+});
 Object.defineProperty(exports, "Donut", {
   enumerable: true,
   get: function get() {
@@ -132,6 +144,10 @@ var _Area = _interopRequireDefault(require("./Area"));
 
 var _StackedArea = _interopRequireDefault(require("./StackedArea"));
 
+var _ScatterPlot = _interopRequireDefault(require("./ScatterPlot"));
+
+var _Bubble = _interopRequireDefault(require("./Bubble"));
+
 var _Donut = _interopRequireDefault(require("./Donut"));
 
 var _Venn = _interopRequireDefault(require("./Venn"));

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AACA","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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AACA","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/cjs/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/cjs/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/cjs/style/tooltip.shadow.css

@@ -2,6 +2,8 @@
 @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;
@@ -12,8 +14,6 @@ STooltip {
 }
 
 STitle {
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
   color: var(--gray60);
   margin-bottom: 8px;
 }

package/lib/es6/Area.js

@@ -25,18 +25,18 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SArea_od5v4_gg_{fill:#50aef4;fill-opacity:.4}.___SArea_od5v4_gg_.__color_od5v4_gg_{fill:var(--color_clbofp)}.___SAreaLine_od5v4_gg_{stroke:#50aef4;stroke-width:3;fill:transparent}.___SAreaLine_od5v4_gg_.__color_od5v4_gg_{stroke:var(--color_clbofp)}.___SArea_od5v4_gg_,.___SAreaLine_od5v4_gg_{transition-property:d;transition-duration:var(--duration_clbofp);transition-timing-function:ease-in-out}.___SNull_od5v4_gg_{fill:transparent;stroke:#bdc4c6;stroke-dasharray:4}.___SNull_od5v4_gg_.__hide_od5v4_gg_{display:none}"
+".___SArea_1ca0q_gg_{fill:#50aef4;fill-opacity:.4}.___SArea_1ca0q_gg_.__color_1ca0q_gg_{fill:var(--color_clbofp)}.___SAreaLine_1ca0q_gg_{stroke:#50aef4;stroke-width:3;fill:transparent}.___SAreaLine_1ca0q_gg_.__color_1ca0q_gg_{stroke:var(--color_clbofp)}.___SArea_1ca0q_gg_,.___SAreaLine_1ca0q_gg_{transition-property:d;transition-duration:var(--duration_clbofp);transition-timing-function:ease-in-out}.___SNull_1ca0q_gg_{fill:transparent;stroke:#bdc4c6;stroke-dasharray:4}.___SNull_1ca0q_gg_.__hide_1ca0q_gg_{display:none}"
 /*__inner_css_end__*/
 , "clbofp_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SArea": "___SArea_od5v4_gg_",
-  "_color": "__color_od5v4_gg_",
+  "__SArea": "___SArea_1ca0q_gg_",
+  "_color": "__color_1ca0q_gg_",
   "--color": "--color_clbofp",
-  "__SAreaLine": "___SAreaLine_od5v4_gg_",
+  "__SAreaLine": "___SAreaLine_1ca0q_gg_",
   "--duration": "--duration_clbofp",
-  "__SNull": "___SNull_od5v4_gg_",
-  "_hide": "__hide_od5v4_gg_"
+  "__SNull": "___SNull_1ca0q_gg_",
+  "_hide": "__hide_1ca0q_gg_"
 });
 
 var AreaRoot = /*#__PURE__*/function (_Component) {

package/lib/es6/Axis.js

@@ -27,22 +27,22 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SAxis_1izro_gg_{stroke:#a6b0b3}.___SAxis_1izro_gg_.__hide_1izro_gg_{display:none}.___STick_1izro_gg_{font-size:12px;fill:#757575}.___STick_1izro_gg_.__hide_1izro_gg_{display:none}.___SGrid_1izro_gg_{fill:transparent;stroke:#dee3e5}.___STitle_1izro_gg_{font-size:12px;fill:#757575;transform-origin:center}.___STitle_1izro_gg_._position_top_1izro_gg_{text-anchor:middle;transform:translateY(-16px)}.___STitle_1izro_gg_._position_bottom_1izro_gg_{text-anchor:middle;alignment-baseline:hanging;transform:translateY(16px)}.___STitle_1izro_gg_._position_left_1izro_gg_,.___STitle_1izro_gg_._position_right_1izro_gg_{transform:rotate(-90deg);transform-box:fill-box;alignment-baseline:middle}.___STitle_1izro_gg_._position_left_1izro_gg_{text-anchor:end}.___STick_1izro_gg_._position_top_1izro_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_1izro_gg_._position_bottom_1izro_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_1izro_gg_._position_right_1izro_gg_{transform:translateX(16px);text-anchor:start;alignment-baseline:middle}.___STick_1izro_gg_._position_left_1izro_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}.___STick_1izro_gg_._position_custom_0_1izro_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_1izro_gg_._position_custom_1_1izro_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}"
+".___SAxis_pw4pp_gg_{stroke:#a6b0b3}.___SAxis_pw4pp_gg_.__hide_pw4pp_gg_{display:none}.___STick_pw4pp_gg_{font-size:12px;fill:#757575}.___STick_pw4pp_gg_.__hide_pw4pp_gg_{display:none}.___SGrid_pw4pp_gg_{fill:transparent;stroke:#dee3e5}.___STitle_pw4pp_gg_{font-size:12px;fill:#757575;transform-origin:center}.___STitle_pw4pp_gg_._position_top_pw4pp_gg_{text-anchor:middle;transform:translateY(-16px)}.___STitle_pw4pp_gg_._position_bottom_pw4pp_gg_{text-anchor:middle;alignment-baseline:hanging;transform:translateY(16px)}.___STitle_pw4pp_gg_._position_left_pw4pp_gg_,.___STitle_pw4pp_gg_._position_right_pw4pp_gg_{transform:rotate(-90deg);transform-box:fill-box;alignment-baseline:middle}.___STitle_pw4pp_gg_._position_left_pw4pp_gg_{text-anchor:end}.___STick_pw4pp_gg_._position_top_pw4pp_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_pw4pp_gg_._position_bottom_pw4pp_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_pw4pp_gg_._position_right_pw4pp_gg_{transform:translateX(16px);text-anchor:start;alignment-baseline:middle}.___STick_pw4pp_gg_._position_left_pw4pp_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}.___STick_pw4pp_gg_._position_custom_0_pw4pp_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_pw4pp_gg_._position_custom_1_pw4pp_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}"
 /*__inner_css_end__*/
 , "8vu5zg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAxis": "___SAxis_1izro_gg_",
-  "_hide": "__hide_1izro_gg_",
-  "__STick": "___STick_1izro_gg_",
-  "__SGrid": "___SGrid_1izro_gg_",
-  "__STitle": "___STitle_1izro_gg_",
-  "_position_top": "_position_top_1izro_gg_",
-  "_position_bottom": "_position_bottom_1izro_gg_",
-  "_position_left": "_position_left_1izro_gg_",
-  "_position_right": "_position_right_1izro_gg_",
-  "_position_custom_0": "_position_custom_0_1izro_gg_",
-  "_position_custom_1": "_position_custom_1_1izro_gg_"
+  "__SAxis": "___SAxis_pw4pp_gg_",
+  "_hide": "__hide_pw4pp_gg_",
+  "__STick": "___STick_pw4pp_gg_",
+  "__SGrid": "___SGrid_pw4pp_gg_",
+  "__STitle": "___STitle_pw4pp_gg_",
+  "_position_top": "_position_top_pw4pp_gg_",
+  "_position_bottom": "_position_bottom_pw4pp_gg_",
+  "_position_left": "_position_left_pw4pp_gg_",
+  "_position_right": "_position_right_pw4pp_gg_",
+  "_position_custom_0": "_position_custom_0_pw4pp_gg_",
+  "_position_custom_1": "_position_custom_1_pw4pp_gg_"
 });
 var CUSTOM_0 = Symbol('custom_0');
 var CUSTOM_1 = Symbol('custom_1');

package/lib/es6/Bar.js

@@ -24,17 +24,17 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SBar_fx34p_gg_{fill:#50aef4;transition-property:height,width,y;transition-duration:var(--duration_6qtpvs);transition-timing-function:ease-in-out}.___SBar_fx34p_gg_.__color_fx34p_gg_{fill:var(--color_6qtpvs)}.___SBar_fx34p_gg_.__hide_fx34p_gg_{display:none}.___SBackground_fx34p_gg_{fill:#e4ecf1}"
+".___SBar_16vhi_gg_{fill:#50aef4;transition-property:height,width,y;transition-duration:var(--duration_6qtpvs);transition-timing-function:ease-in-out}.___SBar_16vhi_gg_.__color_16vhi_gg_{fill:var(--color_6qtpvs)}.___SBar_16vhi_gg_.__hide_16vhi_gg_{display:none}.___SBackground_16vhi_gg_{fill:#e4ecf1}"
 /*__inner_css_end__*/
 , "6qtpvs_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBar": "___SBar_fx34p_gg_",
+  "__SBar": "___SBar_16vhi_gg_",
   "--duration": "--duration_6qtpvs",
-  "_color": "__color_fx34p_gg_",
+  "_color": "__color_16vhi_gg_",
   "--color": "--color_6qtpvs",
-  "_hide": "__hide_fx34p_gg_",
-  "__SBackground": "___SBackground_fx34p_gg_"
+  "_hide": "__hide_16vhi_gg_",
+  "__SBackground": "___SBackground_16vhi_gg_"
 });
 
 var BarRoot = /*#__PURE__*/function (_Component) {