@semcore/d3-chart 1.0.0-8 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,68 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [1.2.0] - 2021-09-24
+
+### Added
+
+- The ability to pass "undefined" to skip some of the data.
+
+## [1.1.0] - 2021-09-14
+
+### Added
+
+- Display 1% of the sector as the minimum value for Donut chart
+
+## [1.0.0] - 2021-09-08
+
+### Added
+
+- Added animation for all charts.
+
+## [1.0.0-15] - 2021-08-26
+
+### Changed
+
+- Add 'sideEffect=false' for more optimal build via webpack
+
+## [1.0.0-14] - 2021-08-02
+
+### Fixed
+
+- [ts] correct types.
+
+## [1.0.0-13] - 2021-06-18
+
+### BREAK
+
+- Revert area for stack area chart.
+- Change data for Venn chart.
+
+### Changed
+
+- Add default ticks for Axis.
+
+## [1.0.0-12] - 2021-06-02
+
+### Added
+
+- Added Venn chart.
+
+## [1.0.0-11] - 2021-05-12
+
+### Fixed
+
+- Fix TS type
+
+## [1.0.0-9] - 2021-04-26
+
+### Changed
+
+- Version of dependence `@semcore/core` has been changed to `1.11`.
+- Improved performance. Removed one component wrapper.
+- The style processing system has been changed.
+- Removed the ability to apply media styles via a plugin `babel-plugin-react-semcore`.
+
 ## [1.0.0-8] - 2021-04-20
 
 ### Fixed

package/lib/cjs/Area.js

@@ -21,7 +21,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = require("@semcore/core");
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -29,35 +29,35 @@ var _d3Shape = require("d3-shape");
 
 var _Dots = _interopRequireDefault(require("./Dots"));
 
-var _core = require("@semcore/core");
-
 var _createElement = _interopRequireDefault(require("./createElement"));
 
 var _utils = require("./utils");
 
+var _ClipPath = _interopRequireDefault(require("./ClipPath"));
+
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+
 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/area.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.sstyled.insert(
 /*__inner_css_start__*/
-".___SDot_1hrzl_gg_{stroke-width:2px;stroke:#fff;r:6px}.___SDot_1hrzl_gg_.__hide_1hrzl_gg_{display:none}.___SDot_1hrzl_gg_.__active_1hrzl_gg_{r:8px}.___SNull_1hrzl_gg_{fill:transparent;stroke:#bdc4c6;stroke-dasharray:4}.___SNull_1hrzl_gg_.__hide_1hrzl_gg_{display:none}"
+".___SArea_110zq_gg_{fill:var(--color_16k7jnx);fill-opacity:.4}.___SAreaLine_110zq_gg_{stroke:var(--color_16k7jnx);stroke-width:3;fill:transparent}.___SArea_110zq_gg_,.___SAreaLine_110zq_gg_{transition-property:d;transition-duration:var(--duration_16k7jnx);transition-timing-function:ease-in-out}.___SNull_110zq_gg_{fill:transparent;stroke:#bdc4c6;stroke-dasharray:4}.___SNull_110zq_gg_.__hide_110zq_gg_{display:none}"
 /*__inner_css_end__*/
-, "10wrq0c_gg_")
+, "16k7jnx_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SArea": "___SArea_1hrzl_gg_",
-  "__SDot": "___SDot_1hrzl_gg_",
-  "_hide": "__hide_1hrzl_gg_",
-  "_active": "__active_1hrzl_gg_",
-  "__SNull": "___SNull_1hrzl_gg_"
-}),
-    style = (0, _extends2["default"])({}, _ref);
-
-var styled_c8 = (0, _core.create)([]);
+  "__SArea": "___SArea_110zq_gg_",
+  "--color": "--color_16k7jnx",
+  "__SAreaLine": "___SAreaLine_110zq_gg_",
+  "--duration": "--duration_16k7jnx",
+  "__SNull": "___SNull_110zq_gg_",
+  "_hide": "__hide_110zq_gg_"
+});
 
 var AreaRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(AreaRoot, _Component);
@@ -83,46 +83,64 @@ var AreaRoot = /*#__PURE__*/function (_Component) {
         y: y,
         data: data,
         d3: d3Line,
-        fill: color
+        color: color
       };
     }
   }, {
     key: "getNullProps",
     value: function getNullProps() {
       var _this$asProps2 = this.asProps,
+          x = _this$asProps2.x,
           y = _this$asProps2.y,
           color = _this$asProps2.color,
           data = _this$asProps2.data,
           d3Line = _this$asProps2.d3Line;
       return {
-        d3Line: d3Line,
-        data: (0, _utils.getNullData)(data, d3Line.defined(), y),
-        fill: color
+        data: (0, _utils.getNullData)(data, (0, _utils.definedNullData)(x, y), y),
+        d3: d3Line,
+        color: color
       };
     }
   }, {
     key: "render",
     value: function render() {
+      var _ref;
+
       var SArea = this.Element;
+      var SAreaLine = 'path';
       var _this$asProps3 = this.asProps,
           styles = _this$asProps3.styles,
           hide = _this$asProps3.hide,
           d3 = _this$asProps3.d3,
           d3Line = _this$asProps3.d3Line,
           data = _this$asProps3.data,
-          fill = _this$asProps3.fill,
-          color = _this$asProps3.color;
-      return (0, _core.styled)(((0, _core.set)([styled_c8, styles]), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SArea, (0, _core.map)("SArea", {
-        render: "path",
-        hide: hide,
-        fill: fill,
-        d: d3(data)
-      })), /*#__PURE__*/_react["default"].createElement("path", (0, _core.map)("path", {
-        stroke: color,
-        strokeWidth: "3",
-        fill: "transparent",
-        d: d3Line(data)
-      })))));
+          color = _this$asProps3.color,
+          uid = _this$asProps3.uid,
+          size = _this$asProps3.size,
+          duration = _this$asProps3.duration;
+      return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SAreaLine, _ref.cn("SAreaLine", {
+        "clipPath": "url(#".concat(uid, ")"),
+        "d": d3Line(data),
+        "color": color,
+        "use:duration": "".concat(duration, "ms")
+      })), /*#__PURE__*/_react["default"].createElement(SArea, _ref.cn("SArea", {
+        "clipPath": "url(#".concat(uid, ")"),
+        "render": "path",
+        "d": d3(data),
+        "hide": hide,
+        "color": color,
+        "use:duration": "".concat(duration, "ms")
+      })), duration && /*#__PURE__*/_react["default"].createElement(_ClipPath["default"], _ref.cn("ClipPath", {
+        "setAttributeTag": function setAttributeTag(rect) {
+          rect.setAttribute('width', size[0]);
+        },
+        "id": uid,
+        "x": "0",
+        "y": "0",
+        "width": 0,
+        "height": size[1],
+        "transition": "width ".concat(duration, "ms ease-in-out")
+      })));
     }
   }]);
   return AreaRoot;
@@ -130,13 +148,14 @@ var AreaRoot = /*#__PURE__*/function (_Component) {
 
 (0, _defineProperty2["default"])(AreaRoot, "displayName", 'Area');
 (0, _defineProperty2["default"])(AreaRoot, "style", style);
-(0, _defineProperty2["default"])(AreaRoot, "defaultProps", function (_ref2) {
-  var x = _ref2.x,
-      y = _ref2.y,
-      y0 = _ref2.y0,
-      $rootProps = _ref2.$rootProps,
-      _ref2$curve = _ref2.curve,
-      curve = _ref2$curve === void 0 ? _d3Shape.curveLinear : _ref2$curve;
+(0, _defineProperty2["default"])(AreaRoot, "enhance", [(0, _uniqueID["default"])()]);
+(0, _defineProperty2["default"])(AreaRoot, "defaultProps", function (_ref3) {
+  var x = _ref3.x,
+      y = _ref3.y,
+      y0 = _ref3.y0,
+      $rootProps = _ref3.$rootProps,
+      _ref3$curve = _ref3.curve,
+      curve = _ref3$curve === void 0 ? _d3Shape.curveLinear : _ref3$curve;
 
   var _$rootProps$scale = (0, _slicedToArray2["default"])($rootProps.scale, 2),
       xScale = _$rootProps$scale[0],
@@ -157,22 +176,25 @@ var AreaRoot = /*#__PURE__*/function (_Component) {
       return (0, _utils.scaleOfBandwidth)(yScale, p[y]);
     }),
     color: '#50aef4',
-    fill: '#50aef450'
+    duration: 500
   };
 });
-var styled_12c = (0, _core.create)([]);
 
 function Null(props) {
+  var _ref2;
+
   var SNull = props.Element,
       styles = props.styles,
-      d3Line = props.d3Line,
+      d3 = props.d3,
       data = props.data,
-      hide = props.hide;
-  return (0, _core.styled)(((0, _core.set)([styled_12c, styles]), /*#__PURE__*/_react["default"].createElement(SNull, (0, _core.map)("SNull", {
-    render: "path",
-    d: d3Line(data),
-    hide: hide
-  }))));
+      hide = props.hide,
+      color = props.color;
+  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SNull, _ref2.cn("SNull", {
+    "render": "path",
+    "d": d3(data),
+    "hide": hide,
+    "color": color
+  }));
 }
 
 var _default = (0, _createElement["default"])(AreaRoot, {

package/lib/cjs/Area.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Area.js"],"names":["AreaRoot","asProps","x","y","color","data","d3Line","d3","fill","defined","SArea","Element","styles","hide","Component","style","y0","$rootProps","curve","curveLinear","scale","xScale","yScale","yRange","range","p","y1","Null","props","SNull","Dots"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,Q;;;;;;;;;;;;WAyBJ,wBAAe;AAAA,0BACyB,KAAKC,OAD9B;AAAA,UACLC,CADK,iBACLA,CADK;AAAA,UACFC,CADE,iBACFA,CADE;AAAA,UACCC,KADD,iBACCA,KADD;AAAA,UACQC,IADR,iBACQA,IADR;AAAA,UACcC,MADd,iBACcA,MADd;AAGb,aAAO;AACLJ,QAAAA,CAAC,EAADA,CADK;AAELC,QAAAA,CAAC,EAADA,CAFK;AAGLE,QAAAA,IAAI,EAAJA,IAHK;AAILE,QAAAA,EAAE,EAAED,MAJC;AAKLE,QAAAA,IAAI,EAAEJ;AALD,OAAP;AAOD;;;WAED,wBAAe;AAAA,2BACsB,KAAKH,OAD3B;AAAA,UACLE,CADK,kBACLA,CADK;AAAA,UACFC,KADE,kBACFA,KADE;AAAA,UACKC,IADL,kBACKA,IADL;AAAA,UACWC,MADX,kBACWA,MADX;AAEb,aAAO;AACLA,QAAAA,MAAM,EAANA,MADK;AAELD,QAAAA,IAAI,EAAE,wBAAYA,IAAZ,EAAkBC,MAAM,CAACG,OAAP,EAAlB,EAAoCN,CAApC,CAFD;AAGLK,QAAAA,IAAI,EAAEJ;AAHD,OAAP;AAKD;;;WAED,kBAAS;AACP,UAAMM,KAAK,GAAG,KAAKC,OAAnB;AADO,2BAEiD,KAAKV,OAFtD;AAAA,UAECW,MAFD,kBAECA,MAFD;AAAA,UAESC,IAFT,kBAESA,IAFT;AAAA,UAEeN,EAFf,kBAEeA,EAFf;AAAA,UAEmBD,MAFnB,kBAEmBA,MAFnB;AAAA,UAE2BD,IAF3B,kBAE2BA,IAF3B;AAAA,UAEiCG,IAFjC,kBAEiCA,IAFjC;AAAA,UAEuCJ,KAFvC,kBAEuCA,KAFvC;AAGP,aAAO,8CAAOQ,MAAP,iBACL,+EACE,gCAAC,KAAD;AAAA,gBAAc,MAAd;AAAA,cAA2BC,IAA3B;AAAA,cAAuCL,IAAvC;AAAA,WAAgDD,EAAE,CAACF,IAAD;AAAlD,SADF,eAEE;AAAA,gBAAcD,KAAd;AAAA,qBAAiC,GAAjC;AAAA,cAA0C,aAA1C;AAAA,WAA2DE,MAAM,CAACD,IAAD;AAAjE,SAFF,CADK,EAAP;AAMD;;;EAvDoBS,e;;iCAAjBd,Q,iBACiB,M;iCADjBA,Q,WAEWe,K;iCAFXf,Q,kBAIkB,iBAAmD;AAAA,MAAhDE,CAAgD,SAAhDA,CAAgD;AAAA,MAA7CC,CAA6C,SAA7CA,CAA6C;AAAA,MAA1Ca,EAA0C,SAA1CA,EAA0C;AAAA,MAAtCC,UAAsC,SAAtCA,UAAsC;AAAA,0BAA1BC,KAA0B;AAAA,MAA1BA,KAA0B,4BAAlBC,oBAAkB;;AAAA,0DAC9CF,UAAU,CAACG,KADmC;AAAA,MAChEC,MADgE;AAAA,MACxDC,MADwD;;AAEvE,MAAMC,MAAM,GAAGD,MAAM,CAACE,KAAP,EAAf;AAEA,SAAO;AACLjB,IAAAA,EAAE,EAAE,qBACDE,OADC,CACO,wBAAYP,CAAZ,EAAeC,CAAf,CADP,EAEDe,KAFC,CAEKA,KAFL,EAGDhB,CAHC,CAGC,UAACuB,CAAD;AAAA,aAAO,6BAAiBJ,MAAjB,EAAyBI,CAAC,CAACvB,CAAD,CAA1B,CAAP;AAAA,KAHD,EAIDc,EAJC,CAIE,UAACS,CAAD;AAAA,aAAQA,CAAC,CAACT,EAAD,CAAD,GAAQ,6BAAiBM,MAAjB,EAAyBG,CAAC,CAACT,EAAD,CAA1B,CAAR,GAA0CO,MAAM,CAAC,CAAD,CAAxD;AAAA,KAJF,EAKDG,EALC,CAKE,UAACD,CAAD;AAAA,aAAO,6BAAiBH,MAAjB,EAAyBG,CAAC,CAACtB,CAAD,CAA1B,CAAP;AAAA,KALF,CADC;AAOLG,IAAAA,MAAM,EAAE,qBACLG,OADK,CACG,wBAAYP,CAAZ,EAAeC,CAAf,CADH,EAELe,KAFK,CAECA,KAFD,EAGLhB,CAHK,CAGH,UAACuB,CAAD;AAAA,aAAO,6BAAiBJ,MAAjB,EAAyBI,CAAC,CAACvB,CAAD,CAA1B,CAAP;AAAA,KAHG,EAILC,CAJK,CAIH,UAACsB,CAAD;AAAA,aAAO,6BAAiBH,MAAjB,EAAyBG,CAAC,CAACtB,CAAD,CAA1B,CAAP;AAAA,KAJG,CAPH;AAYLC,IAAAA,KAAK,EAAE,SAZF;AAaLI,IAAAA,IAAI,EAAE;AAbD,GAAP;AAeD,C;;;AAmCH,SAASmB,IAAT,CAAcC,KAAd,EAAqB;AAAA,MACFC,KADE,GACoCD,KADpC,CACXjB,OADW;AAAA,MACKC,MADL,GACoCgB,KADpC,CACKhB,MADL;AAAA,MACaN,MADb,GACoCsB,KADpC,CACatB,MADb;AAAA,MACqBD,IADrB,GACoCuB,KADpC,CACqBvB,IADrB;AAAA,MAC2BQ,IAD3B,GACoCe,KADpC,CAC2Bf,IAD3B;AAEnB,SAAO,+CAAOD,MAAP,iBAAe,gCAAC,KAAD;AAAA,YAAc,MAAd;AAAA,OAAwBN,MAAM,CAACD,IAAD,CAA9B;AAAA,UAA4CQ;AAA5C,KAAf,EAAP;AACD;;eAEc,+BAAcb,QAAd,EAAwB;AACrC8B,EAAAA,IAAI,EAAJA,gBADqC;AAErCH,EAAAA,IAAI,EAAJA;AAFqC,CAAxB,C","sourcesContent":["import React from 'react';\nimport { area, curveLinear, line } from 'd3-shape';\nimport Dots from './Dots';\nimport { Component, styled } from '@semcore/core';\nimport createElement from './createElement';\nimport { definedData, scaleOfBandwidth, getNullData } from './utils';\n\nimport style from './style/area.shadow.css';\n\nclass AreaRoot extends Component {\n  static displayName = 'Area';\n  static style = style;\n\n  static defaultProps = ({ x, y, y0, $rootProps, curve = curveLinear }) => {\n    const [xScale, yScale] = $rootProps.scale;\n    const yRange = yScale.range();\n\n    return {\n      d3: area()\n        .defined(definedData(x, y))\n        .curve(curve)\n        .x((p) => scaleOfBandwidth(xScale, p[x]))\n        .y0((p) => (p[y0] ? scaleOfBandwidth(yScale, p[y0]) : yRange[0]))\n        .y1((p) => scaleOfBandwidth(yScale, p[y])),\n      d3Line: line()\n        .defined(definedData(x, y))\n        .curve(curve)\n        .x((p) => scaleOfBandwidth(xScale, p[x]))\n        .y((p) => scaleOfBandwidth(yScale, p[y])),\n      color: '#50aef4',\n      fill: '#50aef450',\n    };\n  };\n\n  getDotsProps() {\n    const { x, y, color, data, d3Line } = this.asProps;\n\n    return {\n      x,\n      y,\n      data,\n      d3: d3Line,\n      fill: color,\n    };\n  }\n\n  getNullProps() {\n    const { y, color, data, d3Line } = this.asProps;\n    return {\n      d3Line,\n      data: getNullData(data, d3Line.defined(), y),\n      fill: color,\n    };\n  }\n\n  render() {\n    const SArea = this.Element;\n    const { styles, hide, d3, d3Line, data, fill, color } = this.asProps;\n    return styled(styles)(\n      <>\n        <SArea render=\"path\" hide={hide} fill={fill} d={d3(data)} />\n        <path stroke={color} strokeWidth=\"3\" fill=\"transparent\" d={d3Line(data)} />\n      </>,\n    );\n  }\n}\n\nfunction Null(props) {\n  const { Element: SNull, styles, d3Line, data, hide } = props;\n  return styled(styles)(<SNull render=\"path\" d={d3Line(data)} hide={hide} />);\n}\n\nexport default createElement(AreaRoot, {\n  Dots,\n  Null,\n});\n"],"file":"Area.js"}
+{"version":3,"sources":["../../src/Area.js"],"names":["AreaRoot","asProps","x","y","color","data","d3Line","d3","SArea","Element","SAreaLine","styles","hide","uid","size","duration","rect","setAttribute","Component","style","y0","$rootProps","curve","curveLinear","scale","xScale","yScale","yRange","range","defined","p","y1","Null","props","SNull","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { area, curveLinear, line } from 'd3-shape';\nimport Dots from './Dots';\nimport { Component, sstyled } from '@semcore/core';\nimport createElement from './createElement';\nimport { definedData, scaleOfBandwidth, getNullData, definedNullData } from './utils';\nimport ClipPath from './ClipPath';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/area.shadow.css';\n\nclass AreaRoot extends Component {\n  static displayName = 'Area';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()];\n\n  static defaultProps = ({ x, y, y0, $rootProps, curve = curveLinear }) => {\n    const [xScale, yScale] = $rootProps.scale;\n    const yRange = yScale.range();\n\n    return {\n      d3: area()\n        .defined(definedData(x, y))\n        .curve(curve)\n        .x((p) => scaleOfBandwidth(xScale, p[x]))\n        .y0((p) => (p[y0] ? scaleOfBandwidth(yScale, p[y0]) : yRange[0]))\n        .y1((p) => scaleOfBandwidth(yScale, p[y])),\n      d3Line: line()\n        .defined(definedData(x, y))\n        .curve(curve)\n        .x((p) => scaleOfBandwidth(xScale, p[x]))\n        .y((p) => scaleOfBandwidth(yScale, p[y])),\n      color: '#50aef4',\n      duration: 500,\n    };\n  };\n\n  getDotsProps() {\n    const { x, y, color, data, d3Line } = this.asProps;\n\n    return {\n      x,\n      y,\n      data,\n      d3: d3Line,\n      color,\n    };\n  }\n\n  getNullProps() {\n    const { x, y, color, data, d3Line } = this.asProps;\n    return {\n      data: getNullData(data, definedNullData(x, y), y),\n      d3: d3Line,\n      color,\n    };\n  }\n\n  render() {\n    const SArea = this.Element;\n    const SAreaLine = 'path';\n    const { styles, hide, d3, d3Line, data, color, uid, size, duration } = this.asProps;\n    return sstyled(styles)(\n      <>\n        <SAreaLine\n          clipPath={`url(#${uid})`}\n          d={d3Line(data)}\n          color={color}\n          use:duration={`${duration}ms`}\n        />\n        <SArea\n          clipPath={`url(#${uid})`}\n          render=\"path\"\n          d={d3(data)}\n          hide={hide}\n          color={color}\n          use:duration={`${duration}ms`}\n        />\n        {duration && (\n          <ClipPath\n            setAttributeTag={(rect) => {\n              rect.setAttribute('width', size[0]);\n            }}\n            id={uid}\n            x=\"0\"\n            y=\"0\"\n            width={0}\n            height={size[1]}\n            transition={`width ${duration}ms ease-in-out`}\n          />\n        )}\n      </>,\n    );\n  }\n}\n\nfunction Null(props) {\n  const { Element: SNull, styles, d3, data, hide, color } = props;\n  return sstyled(styles)(<SNull render=\"path\" d={d3(data)} hide={hide} color={color} />);\n}\n\nexport default createElement(AreaRoot, {\n  Dots,\n  Null,\n});\n"],"file":"Area.js"}