intergalactic 15.52.0-prerelease.0-prerelease-3f2a94a7 → 15.53.0-prerelease-77cebec3

package/d3-chart/lib/es6/RadialTree.js

@@ -18,18 +18,20 @@ import assignProps from 'intergalactic/utils/lib/assignProps';
 import getOriginChildren from 'intergalactic/utils/lib/getOriginChildren';
 import canUseDOM from 'intergalactic/utils/lib/canUseDOM';
 import createElement from './createElement';
-import { measureText } from './utils';
+import { getChartDefaultColorName, measureText } from './utils';
+import { PatternSymbol, getPatternSymbolSize } from './Pattern';
 /*__reshadow-styles__:"./style/radial-tree.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SRadian_1d7ox_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1d7ox_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1d7ox_gg_.__color_1d7ox_gg_{stroke:var(--color_1d7ox)}.___SCap_1d7ox_gg_.__transparent_1d7ox_gg_,.___SIcon_1d7ox_gg_.__transparent_1d7ox_gg_,.___SLabel_1d7ox_gg_.__transparent_1d7ox_gg_,.___SLine_1d7ox_gg_.__transparent_1d7ox_gg_{opacity:.3}.___SCap_1d7ox_gg_{transition:r .1s}.___SLabel_1d7ox_gg_{fill:var(--color_1d7ox)}@media (hover:hover){.___SRadian_1d7ox_gg_:hover .___SLabel_1d7ox_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_1d7ox_gg_{transition:none}}" /*__inner_css_end__*/, "1d7ox_gg_") /*__reshadow_css_end__*/, {
-  "__SRadian": "___SRadian_1d7ox_gg_",
-  "__SLine": "___SLine_1d7ox_gg_",
-  "_color": "__color_1d7ox_gg_",
-  "--color": "--color_1d7ox",
-  "_transparent": "__transparent_1d7ox_gg_",
-  "__SCap": "___SCap_1d7ox_gg_",
-  "__SIcon": "___SIcon_1d7ox_gg_",
-  "__SLabel": "___SLabel_1d7ox_gg_",
-  "__SLineCap": "___SLineCap_1d7ox_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SRadian_1xdaq_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1xdaq_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1xdaq_gg_.__color_1xdaq_gg_{stroke:var(--color_1xdaq)}.___SLine_1xdaq_gg_.__transparent_1xdaq_gg_{opacity:.3}.___SCap_1xdaq_gg_{transition:r .1s}.___SCap_1xdaq_gg_.__pattern_1xdaq_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:1px}.___SCap_1xdaq_gg_.__transparent_1xdaq_gg_,.___SIcon_1xdaq_gg_.__transparent_1xdaq_gg_,.___SLabel_1xdaq_gg_.__transparent_1xdaq_gg_{opacity:.3}.___SLabel_1xdaq_gg_{fill:var(--color_1xdaq)}@media (hover:hover){.___SRadian_1xdaq_gg_:hover .___SLabel_1xdaq_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_1xdaq_gg_{transition:none}}" /*__inner_css_end__*/, "1xdaq_gg_") /*__reshadow_css_end__*/, {
+  "__SRadian": "___SRadian_1xdaq_gg_",
+  "__SLine": "___SLine_1xdaq_gg_",
+  "_color": "__color_1xdaq_gg_",
+  "--color": "--color_1xdaq",
+  "_transparent": "__transparent_1xdaq_gg_",
+  "__SCap": "___SCap_1xdaq_gg_",
+  "_pattern": "__pattern_1xdaq_gg_",
+  "__SIcon": "___SIcon_1xdaq_gg_",
+  "__SLabel": "___SLabel_1xdaq_gg_",
+  "__SLineCap": "___SLineCap_1xdaq_gg_"
 });
 var baseAngle = -Math.PI / 2; // The top vertical line
 var RadialTreeBase = /*#__PURE__*/function (_Component) {
@@ -193,8 +195,8 @@ var RadialTreeBase = /*#__PURE__*/function (_Component) {
       var _this$asProps2 = this.asProps,
         data = _this$asProps2.data,
         textSize = _this$asProps2.textSize;
-      var widths = data.map(function (_ref9) {
-        var label = _ref9.label;
+      var widths = data.map(function (_ref10) {
+        var label = _ref10.label;
         return measureText(label, textSize);
       });
       return Math.max.apply(Math, _toConsumableArray(widths));
@@ -274,9 +276,9 @@ var RadialTreeRadian = /*#__PURE__*/function (_Component2) {
   }
   _createClass(RadialTreeRadian, [{
     key: "getInteractiveAreaProps",
-    value: function getInteractiveAreaProps(_ref11, index) {
+    value: function getInteractiveAreaProps(_ref12, index) {
       var _$rootProps$data;
-      var $rootProps = _ref11.$rootProps;
+      var $rootProps = _ref12.$rootProps;
       var data = (_$rootProps$data = $rootProps.data) === null || _$rootProps$data === void 0 ? void 0 : _$rootProps$data[index];
       var _this$computeRadianPo = this.computeRadianPosition(data, index),
         xStart = _this$computeRadianPo.xStart,
@@ -294,9 +296,9 @@ var RadialTreeRadian = /*#__PURE__*/function (_Component2) {
     }
   }, {
     key: "getLineProps",
-    value: function getLineProps(_ref12, index) {
-      var _$rootProps$data2, _color, _ref13;
-      var $rootProps = _ref12.$rootProps;
+    value: function getLineProps(_ref13, index) {
+      var _$rootProps$data2, _color, _ref14;
+      var $rootProps = _ref13.$rootProps;
       var data = (_$rootProps$data2 = $rootProps.data) === null || _$rootProps$data2 === void 0 ? void 0 : _$rootProps$data2[index];
       var _this$computeRadianPo2 = this.computeRadianPosition(data, index),
         xStart = _this$computeRadianPo2.xStart,
@@ -308,7 +310,7 @@ var RadialTreeRadian = /*#__PURE__*/function (_Component2) {
         transparent = _this$asProps5.transparent,
         resolveColor = _this$asProps5.resolveColor;
       var color = (_color = data.color) !== null && _color !== void 0 ? _color : this.asProps.color;
-      return _ref13 = {
+      return _ref14 = {
         x1: xStart,
         y1: yStart,
         x2: xEnd,
@@ -316,13 +318,13 @@ var RadialTreeRadian = /*#__PURE__*/function (_Component2) {
         stroke: color,
         resolveColor: resolveColor,
         transparent: transparent
-      }, _defineProperty(_ref13, 'data-x1', xStart), _defineProperty(_ref13, 'data-y1', yStart), _defineProperty(_ref13, 'data-x2', xEnd), _defineProperty(_ref13, 'data-y2', yEnd), _defineProperty(_ref13, 'data-radial-animation', "".concat(uid, "-line")), _defineProperty(_ref13, 'data-radian-index', index), _ref13;
+      }, _defineProperty(_ref14, 'data-x1', xStart), _defineProperty(_ref14, 'data-y1', yStart), _defineProperty(_ref14, 'data-x2', xEnd), _defineProperty(_ref14, 'data-y2', yEnd), _defineProperty(_ref14, 'data-radial-animation', "".concat(uid, "-line")), _defineProperty(_ref14, 'data-radian-index', index), _ref14;
     }
   }, {
     key: "getCapProps",
-    value: function getCapProps(_ref14, index) {
-      var _$rootProps$data3, _color2, _ref15;
-      var $rootProps = _ref14.$rootProps;
+    value: function getCapProps(_ref15, index) {
+      var _$rootProps$data3, _color2, _ref16;
+      var $rootProps = _ref15.$rootProps;
       var data = (_$rootProps$data3 = $rootProps.data) === null || _$rootProps$data3 === void 0 ? void 0 : _$rootProps$data3[index];
       var _this$computeRadianPo3 = this.computeRadianPosition(data, index),
         xEnd = _this$computeRadianPo3.xEnd,
@@ -331,18 +333,19 @@ var RadialTreeRadian = /*#__PURE__*/function (_Component2) {
       var _this$asProps6 = this.asProps,
         uid = _this$asProps6.uid,
         transparent = _this$asProps6.transparent,
-        resolveColor = _this$asProps6.resolveColor;
+        resolveColor = _this$asProps6.resolveColor,
+        patterns = _this$asProps6.patterns;
       var color = (_color2 = data.color) !== null && _color2 !== void 0 ? _color2 : this.asProps.color;
-      return _ref15 = {
+      return _ref16 = {
         x: xEnd,
         y: yEnd
-      }, _defineProperty(_ref15, 'data-cx', xEnd), _defineProperty(_ref15, 'data-cy', yEnd), _defineProperty(_ref15, "radius", capSize), _defineProperty(_ref15, "color", color), _defineProperty(_ref15, "resolveColor", resolveColor), _defineProperty(_ref15, "transparent", transparent), _defineProperty(_ref15, 'data-radial-animation', "".concat(uid, "-cap-circle")), _defineProperty(_ref15, 'data-radian-index', index), _ref15;
+      }, _defineProperty(_ref16, 'data-cx', xEnd), _defineProperty(_ref16, 'data-cy', yEnd), _defineProperty(_ref16, "radius", capSize), _defineProperty(_ref16, "color", color), _defineProperty(_ref16, "resolveColor", resolveColor), _defineProperty(_ref16, "transparent", transparent), _defineProperty(_ref16, "patterns", patterns), _defineProperty(_ref16, "uid", "".concat(uid, "-cap-").concat(index)), _defineProperty(_ref16, 'data-radial-animation', "".concat(uid, "-cap-circle")), _defineProperty(_ref16, 'data-radian-index', index), _ref16;
     }
   }, {
     key: "getIconProps",
-    value: function getIconProps(_ref16, index) {
-      var _$rootProps$data4, _iconColor, _iconSize, _icon, _ref17;
-      var $rootProps = _ref16.$rootProps;
+    value: function getIconProps(_ref17, index) {
+      var _$rootProps$data4, _iconColor, _iconSize, _icon, _ref18;
+      var $rootProps = _ref17.$rootProps;
       var data = (_$rootProps$data4 = $rootProps.data) === null || _$rootProps$data4 === void 0 ? void 0 : _$rootProps$data4[index];
       var _this$computeRadianPo4 = this.computeRadianPosition(data, index),
         xEnd = _this$computeRadianPo4.xEnd,
@@ -356,16 +359,16 @@ var RadialTreeRadian = /*#__PURE__*/function (_Component2) {
       var icon = (_icon = data.icon) !== null && _icon !== void 0 ? _icon : this.asProps.icon;
       var x = xEnd - iconSize / 2;
       var y = yEnd - iconSize / 2;
-      return _ref17 = {
+      return _ref18 = {
         x: x,
         y: y
-      }, _defineProperty(_ref17, 'data-x', x), _defineProperty(_ref17, 'data-y', y), _defineProperty(_ref17, "iconSize", iconSize), _defineProperty(_ref17, "color", iconColor !== null && iconColor !== void 0 ? iconColor : '#fff'), _defineProperty(_ref17, "resolveColor", resolveColor), _defineProperty(_ref17, 'data-radial-animation', "".concat(uid, "-cap-icon")), _defineProperty(_ref17, 'data-radian-index', index), _defineProperty(_ref17, "icon", icon), _defineProperty(_ref17, "tag", icon), _defineProperty(_ref17, "isActive", isActive), _ref17;
+      }, _defineProperty(_ref18, 'data-x', x), _defineProperty(_ref18, 'data-y', y), _defineProperty(_ref18, "iconSize", iconSize), _defineProperty(_ref18, "color", iconColor !== null && iconColor !== void 0 ? iconColor : '#fff'), _defineProperty(_ref18, "resolveColor", resolveColor), _defineProperty(_ref18, 'data-radial-animation', "".concat(uid, "-cap-icon")), _defineProperty(_ref18, 'data-radian-index', index), _defineProperty(_ref18, "icon", icon), _defineProperty(_ref18, "tag", icon), _defineProperty(_ref18, "isActive", isActive), _ref18;
     }
   }, {
     key: "getLabelProps",
-    value: function getLabelProps(_ref18, index) {
-      var _$rootProps$data5, _color3, _ref20;
-      var $rootProps = _ref18.$rootProps;
+    value: function getLabelProps(_ref19, index) {
+      var _$rootProps$data5, _color3, _ref21;
+      var $rootProps = _ref19.$rootProps;
       var data = (_$rootProps$data5 = $rootProps.data) === null || _$rootProps$data5 === void 0 ? void 0 : _$rootProps$data5[index];
       var _this$computeRadianPo5 = this.computeRadianPosition(data, index),
         xLabelCenter = _this$computeRadianPo5.xLabelCenter,
@@ -377,14 +380,14 @@ var RadialTreeRadian = /*#__PURE__*/function (_Component2) {
         textSize = _this$asProps8.textSize,
         transparent = _this$asProps8.transparent,
         resolveColor = _this$asProps8.resolveColor;
-      var _ref19 = data,
-        label = _ref19.label;
+      var _ref20 = data,
+        label = _ref20.label;
       var color = (_color3 = data.color) !== null && _color3 !== void 0 ? _color3 : this.asProps.color;
-      return _ref20 = {
+      return _ref21 = {
         x: xLabelCenter,
         y: yLabelCenter,
         angle: labelAngle
-      }, _defineProperty(_ref20, 'data-radial-animation', "".concat(uid, "-label")), _defineProperty(_ref20, 'data-radian-index', index), _defineProperty(_ref20, "label", label), _defineProperty(_ref20, "color", color), _defineProperty(_ref20, "resolveColor", resolveColor), _defineProperty(_ref20, "isHorizontal", isHorizontal), _defineProperty(_ref20, "textSize", textSize), _defineProperty(_ref20, "transparent", transparent), _ref20;
+      }, _defineProperty(_ref21, 'data-radial-animation', "".concat(uid, "-label")), _defineProperty(_ref21, 'data-radian-index', index), _defineProperty(_ref21, "label", label), _defineProperty(_ref21, "color", color), _defineProperty(_ref21, "resolveColor", resolveColor), _defineProperty(_ref21, "isHorizontal", isHorizontal), _defineProperty(_ref21, "textSize", textSize), _defineProperty(_ref21, "transparent", transparent), _ref21;
     }
   }, {
     key: "getRadianKey",
@@ -494,10 +497,10 @@ _defineProperty(RadialTreeRadian, "defaultProps", {
   iconSize: 16,
   textSize: 14
 });
-var InteractiveArea = function InteractiveArea(_ref21) {
+var InteractiveArea = function InteractiveArea(_ref22) {
   var _ref4;
-  var SInteractiveArea = _ref21.Element,
-    styles = _ref21.styles;
+  var SInteractiveArea = _ref22.Element,
+    styles = _ref22.styles;
   return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SInteractiveArea, _ref4.cn("SInteractiveArea", {
     "stroke": 'transparent',
     "render": 'line'
@@ -506,13 +509,13 @@ var InteractiveArea = function InteractiveArea(_ref21) {
 
 /** @deprecated */
 
-var Line = function Line(_ref22) {
+var Line = function Line(_ref23) {
   var _ref5;
-  var SLine = _ref22.Element,
-    styles = _ref22.styles,
-    stroke = _ref22.stroke,
-    resolveColor = _ref22.resolveColor,
-    transparent = _ref22.transparent;
+  var SLine = _ref23.Element,
+    styles = _ref23.styles,
+    stroke = _ref23.stroke,
+    resolveColor = _ref23.resolveColor,
+    transparent = _ref23.transparent;
   return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SLine, _ref5.cn("SLine", {
     "render": 'line',
     "stroke": resolveColor(stroke),
@@ -522,42 +525,65 @@ var Line = function Line(_ref22) {
 
 /** @deprecated */
 
-var Cap = function Cap(_ref23) {
-  var _ref6;
-  var SCap = _ref23.Element,
-    styles = _ref23.styles,
-    x = _ref23.x,
-    y = _ref23.y,
-    radius = _ref23.radius,
-    color = _ref23.color,
-    resolveColor = _ref23.resolveColor,
-    transparent = _ref23.transparent;
-  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SCap, _ref6.cn("SCap", {
-    "render": 'circle',
-    "cx": x,
-    "cy": y,
-    "r": radius,
+var Cap = function Cap(_ref24) {
+  var _ref7;
+  var SCap = _ref24.Element,
+    styles = _ref24.styles,
+    _ref24$x = _ref24.x,
+    x = _ref24$x === void 0 ? 0 : _ref24$x,
+    _ref24$y = _ref24.y,
+    y = _ref24$y === void 0 ? 0 : _ref24$y,
+    radius = _ref24.radius,
+    color = _ref24.color,
+    resolveColor = _ref24.resolveColor,
+    transparent = _ref24.transparent,
+    patterns = _ref24.patterns;
+  if (!patterns) {
+    var _ref6;
+    return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SCap, _ref6.cn("SCap", {
+      "render": 'circle',
+      "cx": x,
+      "cy": y,
+      "r": radius,
+      "fill": resolveColor(color),
+      "transparent": transparent
+    }));
+  }
+  var patternKey = color || getChartDefaultColorName(0);
+  var _getPatternSymbolSize = getPatternSymbolSize({
+      patternKey: patternKey,
+      patterns: patterns
+    }),
+    _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2),
+    width = _getPatternSymbolSize2[0],
+    height = _getPatternSymbolSize2[1];
+  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SCap, _ref7.cn("SCap", {
+    "render": PatternSymbol,
+    "patternKey": color,
+    "x": x - (width || 0) / 2,
+    "y": y - (height || 0) / 2,
     "fill": resolveColor(color),
-    "transparent": transparent
+    "transparent": transparent,
+    "pattern": true
   }));
 };
 
 /** @deprecated */
 
-var Icon = function Icon(_ref24) {
-  var _ref7;
-  var SIcon = _ref24.Element,
-    styles = _ref24.styles,
-    isActive = _ref24.isActive,
-    tag = _ref24.tag,
-    x = _ref24.x,
-    y = _ref24.y,
-    iconSize = _ref24.iconSize,
-    transparent = _ref24.transparent;
+var Icon = function Icon(_ref25) {
+  var _ref8;
+  var SIcon = _ref25.Element,
+    styles = _ref25.styles,
+    isActive = _ref25.isActive,
+    tag = _ref25.tag,
+    x = _ref25.x,
+    y = _ref25.y,
+    iconSize = _ref25.iconSize,
+    transparent = _ref25.transparent;
   if (!(isActive && tag)) return null;
   var width = iconSize;
   var height = iconSize;
-  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SIcon, _ref7.cn("SIcon", {
+  return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SIcon, _ref8.cn("SIcon", {
     "x": x,
     "y": y,
     "width": width,
@@ -569,19 +595,19 @@ var Icon = function Icon(_ref24) {
 
 /** @deprecated */
 
-var Label = function Label(_ref25) {
-  var SLabel = _ref25.Element,
-    Children = _ref25.Children,
-    styles = _ref25.styles,
-    label = _ref25.label,
-    color = _ref25.color,
-    resolveColor = _ref25.resolveColor,
-    isHorizontal = _ref25.isHorizontal,
-    x = _ref25.x,
-    y = _ref25.y,
-    textSize = _ref25.textSize,
-    angle = _ref25.angle,
-    transparent = _ref25.transparent;
+var Label = function Label(_ref26) {
+  var SLabel = _ref26.Element,
+    Children = _ref26.Children,
+    styles = _ref26.styles,
+    label = _ref26.label,
+    color = _ref26.color,
+    resolveColor = _ref26.resolveColor,
+    isHorizontal = _ref26.isHorizontal,
+    x = _ref26.x,
+    y = _ref26.y,
+    textSize = _ref26.textSize,
+    angle = _ref26.angle,
+    transparent = _ref26.transparent;
   var lines = String(label).split('\n');
   var linesCount = lines.length;
   var SLabelLine = 'tspan';
@@ -622,22 +648,22 @@ var Radian = createElement(RadialTreeRadian, {
 
 /** @deprecated */
 
-var Title = function Title(_ref26) {
-  var _ref8;
-  var STitle = _ref26.Element,
-    Children = _ref26.Children,
-    children = _ref26.children,
-    styles = _ref26.styles,
-    textSize = _ref26.textSize,
-    color = _ref26.color,
-    resolveColor = _ref26.resolveColor,
-    x = _ref26.x,
-    y = _ref26.y,
-    dataHintsHandler = _ref26.dataHintsHandler;
+var Title = function Title(_ref27) {
+  var _ref9;
+  var STitle = _ref27.Element,
+    Children = _ref27.Children,
+    children = _ref27.children,
+    styles = _ref27.styles,
+    textSize = _ref27.textSize,
+    color = _ref27.color,
+    resolveColor = _ref27.resolveColor,
+    x = _ref27.x,
+    y = _ref27.y,
+    dataHintsHandler = _ref27.dataHintsHandler;
   if (typeof children === 'string') {
     dataHintsHandler.setTitle('vertical', children);
   }
-  return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(STitle, _ref8.cn("STitle", {
+  return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(STitle, _ref9.cn("STitle", {
     "aria-hidden": true,
     "render": 'text',
     "textAnchor": 'middle',
@@ -646,7 +672,7 @@ var Title = function Title(_ref26) {
     "fill": resolveColor(color),
     "x": x,
     "y": y
-  }), /*#__PURE__*/React.createElement(Children, _ref8.cn("Children", {})));
+  }), /*#__PURE__*/React.createElement(Children, _ref9.cn("Children", {})));
 };
 var RadialTree = createElement(RadialTreeBase, {
   Title: Title,