intergalactic 15.51.0-prerelease.0-prerelease-677bb0c2 → 15.52.0-prerelease-e6d2b891

package/mini-chart/lib/es6/component/score/Line.js

@@ -0,0 +1,87 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from 'intergalactic/core';
+import { assignProps as _assignProps } from 'intergalactic/core';
+import React from 'react';
+import createComponent, { Component, Root, sstyled } from 'intergalactic/core';
+import { Box, Flex } from 'intergalactic/flex-box';
+import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
+/*__reshadow-styles__:"./line.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_5kfd2{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_5kfd2{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.___SDonutContainer_5kfd2_gg_.__loading_5kfd2_gg_,.___SLineGauge_5kfd2_gg_.__loading_5kfd2_gg_,.___STrendBar_5kfd2_gg_.__loading_5kfd2_gg_,.___STrendLine_5kfd2_gg_.__loading_5kfd2_gg_{animation-name:pulse_5kfd2;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_5kfd2_gg_{height:8px;background-color:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineGauge_5kfd2_gg_.__animate_5kfd2_gg_ .___SLineValue_5kfd2_gg_{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_5kfd2;animation-duration:.5s;animation-timing-function:ease-in-out}.___SLineValue_5kfd2_gg_{height:8px;background-color:var(--intergalactic-chart-palette-order-1, #2bb3ff);border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_5kfd2_gg_.__percent_5kfd2_gg_{width:var(--percent_5kfd2)}.___SLineValue_5kfd2_gg_.__color_5kfd2_gg_{background-color:var(--color_5kfd2, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_5kfd2_gg_.__segments_5kfd2_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SLineGauge_5kfd2_gg_.__segments_5kfd2_gg_ .___SLineValue_5kfd2_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)0 0 var(--intergalactic-progress-bar-rounded, 6px)}.___SLineGaugeSegment_5kfd2_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_5kfd2_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_5kfd2_gg_{height:8px;background:0 0;margin-right:1px;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}" /*__inner_css_end__*/, "5kfd2_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_5kfd2_gg_",
+  "_loading": "__loading_5kfd2_gg_",
+  "__SDonutContainer": "___SDonutContainer_5kfd2_gg_",
+  "__STrendLine": "___STrendLine_5kfd2_gg_",
+  "__STrendBar": "___STrendBar_5kfd2_gg_",
+  "@pulse": "pulse_5kfd2",
+  "_animate": "__animate_5kfd2_gg_",
+  "__SLineValue": "___SLineValue_5kfd2_gg_",
+  "_percent": "__percent_5kfd2_gg_",
+  "--percent": "--percent_5kfd2",
+  "_color": "__color_5kfd2_gg_",
+  "--color": "--color_5kfd2",
+  "_segments": "__segments_5kfd2_gg_",
+  "__SLineGaugeSegment": "___SLineGaugeSegment_5kfd2_gg_",
+  "__SLineSegmentItem": "___SLineSegmentItem_5kfd2_gg_",
+  "@move-line": "move-line_5kfd2"
+});
+var LineRoot = /*#__PURE__*/function (_Component) {
+  _inherits(LineRoot, _Component);
+  var _super = _createSuper(LineRoot);
+  function LineRoot() {
+    _classCallCheck(this, LineRoot);
+    return _super.apply(this, arguments);
+  }
+  _createClass(LineRoot, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref3;
+      var SLineGauge = Box;
+      var SLineValue = Box;
+      var SLineGaugeSegment = Flex;
+      var SLineSegmentItem = Box;
+      var _this$asProps = this.asProps,
+        value = _this$asProps.value,
+        styles = _this$asProps.styles,
+        _this$asProps$color = _this$asProps.color,
+        color = _this$asProps$color === void 0 ? 'chart-palette-order-1' : _this$asProps$color,
+        resolveColor = _this$asProps.resolveColor,
+        segments = _this$asProps.segments,
+        loading = _this$asProps.loading;
+      var SegmentItems = [];
+      if (segments) {
+        for (var i = 0; i < segments; i++) {
+          var _ref2;
+          var width = "calc((100% - ".concat(segments - 1, "px) / ").concat(segments, ")");
+          SegmentItems.push((_ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SLineSegmentItem, _ref2.cn("SLineSegmentItem", {
+            "key": i,
+            "color": i < value ? resolveColor(color) : undefined,
+            "w": width
+          }))));
+        }
+      }
+      var percent = "".concat(value, "%");
+      if (segments) {
+        percent = "".concat(value / segments * 100, "%");
+      }
+      return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, _assignProps({}, _ref))), !loading && /*#__PURE__*/React.createElement(SLineValue, _ref3.cn("SLineValue", {
+        "w": percent,
+        "color": resolveColor(color)
+      })), Boolean(SegmentItems.length) && /*#__PURE__*/React.createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), SegmentItems));
+    }
+  }]);
+  return LineRoot;
+}(Component);
+_defineProperty(LineRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(LineRoot, "style", style);
+_defineProperty(LineRoot, "defaultProps", {
+  animate: true
+});
+export var ScoreLine = createComponent(LineRoot);
+ScoreLine.displayName = 'MiniChart.ScoreLine';
+//# sourceMappingURL=Line.js.map

package/mini-chart/lib/es6/component/score/Line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.js","names":["React","createComponent","Component","Root","sstyled","Box","Flex","resolveColorEnhance","style","_sstyled","insert","LineRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","render","_ref","asProps","_ref3","SLineGauge","SLineValue","SLineGaugeSegment","SLineSegmentItem","_this$asProps","styles","_this$asProps$color","color","resolveColor","segments","loading","SegmentItems","i","_ref2","width","concat","push","createElement","cn","undefined","percent","_objectSpread","_assignProps","Boolean","length","_defineProperty","animate","ScoreLine","displayName"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, ComponentType } from '@semcore/core';\nimport { Box, Flex, BoxProps } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { CommonScoreProps } from './Score';\n\nimport style from './line.shadow.css';\n\nexport type ScoreLineGaugeProps = BoxProps &\n  CommonScoreProps & {\n    /**\n     * Count of line segments\n     */\n    segments?: number;\n  };\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n};\n\nclass LineRoot extends Component<ScoreLineGaugeProps, {}, {}, Enhances> {\n  static enhance = [resolveColorEnhance()];\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  render() {\n    const SLineGauge = Root;\n    const SLineValue = Box;\n    const SLineGaugeSegment = Flex;\n    const SLineSegmentItem = Box;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      resolveColor,\n      segments,\n      loading,\n    } = this.asProps;\n\n    const SegmentItems = [];\n\n    if (segments) {\n      for (let i = 0; i < segments; i++) {\n        const width = `calc((100% - ${segments - 1}px) / ${segments})`;\n\n        SegmentItems.push(\n          sstyled(styles)(\n            <SLineSegmentItem\n              key={i}\n              color={i < value ? resolveColor(color) : undefined}\n              w={width}\n            />,\n          ),\n        );\n      }\n    }\n\n    let percent = `${value}%`;\n\n    if (segments) {\n      percent = `${(value / segments) * 100}%`;\n    }\n\n    return sstyled(styles)(\n      <SLineGauge render={Box}>\n        {!loading && <SLineValue w={percent} color={resolveColor(color)} />}\n        {Boolean(SegmentItems.length) && <SLineGaugeSegment>{SegmentItems}</SLineGaugeSegment>}\n      </SLineGauge>,\n    );\n  }\n}\n\nexport const ScoreLine: ComponentType<ScoreLineGaugeProps, {}, {}, Enhances> =\n  createComponent(LineRoot);\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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"}

package/mini-chart/lib/es6/component/score/Score.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Score.js.map

package/mini-chart/lib/es6/component/score/Score.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Score.js","names":[],"sources":["../../../../src/component/score/Score.ts"],"sourcesContent":["export type CommonScoreProps = {\n  /**\n   * Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)\n   */\n  value: number;\n\n  /**\n   * Color of value\n   */\n  color?: string;\n\n  /**\n   * Flag to enable skeleton\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Flag to enable animate of charts\n   * @default true\n   */\n  animate?: boolean;\n};\n"],"mappings":""}

package/mini-chart/lib/es6/component/score/donut.shadow.css

@@ -0,0 +1,17 @@
+@import '../skeleton/skeleton.shadow.css';
+
+SDonutContainer[semi] {
+  g {
+    transform: rotate(180deg) translate(-24px, -24px);
+  }
+}
+
+SDonutContainer {
+  g {
+    transform: rotate(-90deg) translate(-24px)
+  }
+}
+
+SDonutContainer[animate] circle {
+  transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out;
+}

package/mini-chart/lib/es6/component/score/index.js

@@ -0,0 +1,4 @@
+import { ScoreDonut, ScoreSemiDonut } from './Donut';
+import { ScoreLine } from './Line';
+export { ScoreDonut, ScoreSemiDonut, ScoreLine };
+//# sourceMappingURL=index.js.map

package/mini-chart/lib/es6/component/score/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ScoreDonut","ScoreSemiDonut","ScoreLine"],"sources":["../../../../src/component/score/index.ts"],"sourcesContent":["import { ScoreDonut, ScoreSemiDonut } from './Donut';\nimport { ScoreLine } from './Line';\n\nexport { ScoreDonut, ScoreSemiDonut, ScoreLine };\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,cAAc,QAAQ,SAAS;AACpD,SAASC,SAAS,QAAQ,QAAQ;AAElC,SAASF,UAAU,EAAEC,cAAc,EAAEC,SAAS"}

package/mini-chart/lib/es6/component/score/line.shadow.css

@@ -0,0 +1,66 @@
+@import '../skeleton/skeleton.shadow.css';
+
+SLineGauge {
+  height: 8px;
+  background-color: var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8));
+  border-radius: var(--intergalactic-chart-rounded, 2px);
+  overflow: hidden;
+  position: relative;
+}
+
+SLineGauge[animate] SLineValue {
+  transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out;
+  animation-name: move-line;
+  animation-duration: 0.5s;
+  animation-timing-function: ease-in-out;
+}
+
+SLineValue {
+  height: 8px;
+  background-color: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  border-radius: var(--intergalactic-chart-rounded, 2px) 0 0 var(--intergalactic-chart-rounded, 2px);
+}
+
+SLineValue[percent] {
+  width: var(--percent);
+}
+
+SLineValue[color] {
+  background-color: var(--color, var(--intergalactic-chart-palette-order-1, #2bb3ff));
+}
+
+SLineGauge[segments] {
+  border-radius: var(--intergalactic-progress-bar-rounded, 6px);
+}
+
+SLineGauge[segments] SLineValue {
+  border-radius: var(--intergalactic-progress-bar-rounded, 6px) 0 0 var(--intergalactic-progress-bar-rounded, 6px);
+}
+
+SLineGaugeSegment {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+SLineSegmentItem:last-child {
+  margin-right: 0;
+  border-right: none;
+}
+
+SLineSegmentItem {
+  height: 8px;
+  background: transparent;
+  margin-right: 1px;
+  border-right-color: var(--intergalactic-chart-grid-border, #ffffff);
+  border-right-style: solid;
+  border-right-width: 1px;
+  box-sizing: content-box;
+}
+
+@keyframes move-line {
+  0% {transform: translateX(-100%);}
+  100% {transform: translateX(0);}
+}

package/mini-chart/lib/es6/component/skeleton/skeleton.shadow.css

@@ -0,0 +1,24 @@
+SLineGauge[loading],
+SDonutContainer[loading],
+STrendLine[loading],
+STrendBar[loading] {
+  animation-name: pulse;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  animation-duration: 1.6s;
+  will-change: opacity;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/mini-chart/lib/es6/component/trend/Bar.js

@@ -0,0 +1,116 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from 'intergalactic/core';
+import { assignProps as _assignProps } from 'intergalactic/core';
+import React from 'react';
+import createComponent, { assignProps, Root, sstyled } from 'intergalactic/core';
+import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
+import { Trend } from './Trend';
+import { Box } from 'intergalactic/flex-box';
+/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_179om{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_179om_gg_.__loading_179om_gg_,.___SLineGauge_179om_gg_.__loading_179om_gg_,.___STrendBar_179om_gg_.__loading_179om_gg_,.___STrendLine_179om_gg_.__loading_179om_gg_{animation-name:pulse_179om;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "179om_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_179om_gg_",
+  "_loading": "__loading_179om_gg_",
+  "__SDonutContainer": "___SDonutContainer_179om_gg_",
+  "__STrendLine": "___STrendLine_179om_gg_",
+  "__STrendBar": "___STrendBar_179om_gg_",
+  "@pulse": "pulse_179om"
+});
+var TrendBarRoot = /*#__PURE__*/function (_Trend) {
+  _inherits(TrendBarRoot, _Trend);
+  var _super = _createSuper(TrendBarRoot);
+  function TrendBarRoot() {
+    _classCallCheck(this, TrendBarRoot);
+    return _super.apply(this, arguments);
+  }
+  _createClass(TrendBarRoot, [{
+    key: "defaultData",
+    get: function get() {
+      return [{
+        value: 20
+      }, {
+        value: 80
+      }, {
+        value: 45
+      }, {
+        value: 10
+      }];
+    }
+  }, {
+    key: "data",
+    get: function get() {
+      var _this$asProps = this.asProps,
+        data = _this$asProps.data,
+        loading = _this$asProps.loading;
+      if (loading) {
+        return this.defaultData;
+      }
+      return data;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2,
+        _this = this;
+      var STrendBar = Box;
+      var _this$asProps2 = this.asProps,
+        styles = _this$asProps2.styles,
+        resolveColor = _this$asProps2.resolveColor,
+        isHistogram = _this$asProps2.isHistogram,
+        animate = _this$asProps2.animate,
+        loading = _this$asProps2.loading;
+      var step = this.defaultWidth / this.data.length;
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(STrendBar, _ref2.cn("STrendBar", _objectSpread({}, _assignProps({
+        "ref": this.containerRef,
+        "__excludeProps": ['data']
+      }, _ref))), /*#__PURE__*/React.createElement("svg", _ref2.cn("svg", {
+        "width": '100%',
+        "height": '100%',
+        "viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight)
+      }), this.data.map(function (barItem, index) {
+        var color = resolveColor('skeleton-bg');
+        if (barItem.color) {
+          color = resolveColor(barItem.color);
+        }
+        return /*#__PURE__*/React.createElement("rect", {
+          key: index,
+          x: step * index,
+          y: _this.defaultHeight - barItem.value,
+          width: isHistogram ? step : step * 0.8,
+          height: barItem.value,
+          fill: color
+        }, animate && !loading && /*#__PURE__*/React.createElement("animate", {
+          attributeName: 'y',
+          values: "".concat(_this.defaultHeight, ";").concat(_this.defaultHeight - barItem.value),
+          dur: '500ms'
+        }));
+      })));
+    }
+  }]);
+  return TrendBarRoot;
+}(Trend);
+_defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(TrendBarRoot, "style", style);
+_defineProperty(TrendBarRoot, "defaultProps", {
+  animate: true
+});
+export var TrendBar = createComponent(TrendBarRoot);
+TrendBar.displayName = 'MiniChart.TrendBar';
+export var TrendHistogram = createComponent(TrendBarRoot, {}, {
+  enhancements: [function () {
+    return {
+      wrapperProps: function wrapperProps(props) {
+        return assignProps(props, {
+          isHistogram: true
+        });
+      }
+    };
+  }]
+});
+TrendBar.displayName = 'MiniChart.TrendHistogram';
+//# sourceMappingURL=Bar.js.map

package/mini-chart/lib/es6/component/trend/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","names":["React","createComponent","assignProps","Root","sstyled","resolveColorEnhance","Trend","Box","style","_sstyled","insert","TrendBarRoot","_Trend","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","get","value","_this$asProps","asProps","data","loading","defaultData","render","_ref","_ref2","_this","STrendBar","_this$asProps2","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","createElement","cn","_objectSpread","_assignProps","containerRef","concat","svgWidth","svgHeight","map","barItem","index","color","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty","TrendBar","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { ComponentType, assignProps, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { Trend, CommonTrendProps } from './Trend';\nimport { Box } from '@semcore/flex-box';\n\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n  /**\n   * Value\n   */\n  value: number;\n  /**\n   * Color of value\n   */\n  color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n  /**\n   * Data to bar chart\n   */\n  data: BarItem[];\n};\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  isHistogram?: true;\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, Enhances> {\n  static enhance = [resolveColorEnhance()];\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  get defaultData(): BarItem[] {\n    return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n  }\n\n  get data(): BarItem[] {\n    const { data, loading } = this.asProps;\n\n    if (loading) {\n      return this.defaultData;\n    }\n\n    return data;\n  }\n\n  render() {\n    const STrendBar = Root;\n    const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n    const step = this.defaultWidth / this.data.length;\n\n    return sstyled(styles)(\n      <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data']}>\n        <svg width='100%' height='100%' viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}>\n          {this.data.map((barItem, index) => {\n            let color = resolveColor('skeleton-bg');\n\n            if (barItem.color) {\n              color = resolveColor(barItem.color);\n            }\n\n            return (\n              <rect\n                key={index}\n                x={step * index}\n                y={this.defaultHeight - barItem.value}\n                width={isHistogram ? step : step * 0.8}\n                height={barItem.value}\n                fill={color}\n              >\n                {animate && !loading && (\n                  <animate\n                    attributeName={'y'}\n                    values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n                    dur={'500ms'}\n                  />\n                )}\n              </rect>\n            );\n          })}\n        </svg>\n      </STrendBar>,\n    );\n  }\n}\n\nexport const TrendBar: ComponentType<TrendBarProps, {}, {}, Enhances> =\n  createComponent(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram: ComponentType<TrendBarProps, {}, {}, Enhances> = createComponent(\n  TrendBarRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: TrendBarProps) => {\n            return assignProps(props, { isHistogram: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nTrendBar.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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"}

package/mini-chart/lib/es6/component/trend/Line.js

@@ -0,0 +1,158 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from 'intergalactic/core';
+import { assignProps as _assignProps } from 'intergalactic/core';
+import React from 'react';
+import createComponent, { assignProps, Root, sstyled } from 'intergalactic/core';
+import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
+import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
+import { Trend } from './Trend';
+import { Box } from 'intergalactic/flex-box';
+/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_179om{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_179om_gg_.__loading_179om_gg_,.___SLineGauge_179om_gg_.__loading_179om_gg_,.___STrendBar_179om_gg_.__loading_179om_gg_,.___STrendLine_179om_gg_.__loading_179om_gg_{animation-name:pulse_179om;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "179om_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_179om_gg_",
+  "_loading": "__loading_179om_gg_",
+  "__SDonutContainer": "___SDonutContainer_179om_gg_",
+  "__STrendLine": "___STrendLine_179om_gg_",
+  "__STrendBar": "___STrendBar_179om_gg_",
+  "@pulse": "pulse_179om"
+});
+var TrendLineRoot = /*#__PURE__*/function (_Trend) {
+  _inherits(TrendLineRoot, _Trend);
+  var _super = _createSuper(TrendLineRoot);
+  function TrendLineRoot() {
+    _classCallCheck(this, TrendLineRoot);
+    return _super.apply(this, arguments);
+  }
+  _createClass(TrendLineRoot, [{
+    key: "defaultData",
+    get: function get() {
+      return [15, 70, 20, 85, 20];
+    }
+  }, {
+    key: "lastPointRadius",
+    get: function get() {
+      var _this$asProps$lastPoi;
+      return (_this$asProps$lastPoi = this.asProps.lastPointRadius) !== null && _this$asProps$lastPoi !== void 0 ? _this$asProps$lastPoi : 6;
+    }
+  }, {
+    key: "data",
+    get: function get() {
+      var _this$asProps = this.asProps,
+        data = _this$asProps.data,
+        loading = _this$asProps.loading;
+      if (loading) {
+        return this.defaultData;
+      }
+      return data;
+    }
+  }, {
+    key: "svgWidth",
+    get: function get() {
+      return this.asProps.lastPointColor ? this.defaultWidth + this.lastPointRadius : this.defaultWidth;
+    }
+  }, {
+    key: "svgHeight",
+    get: function get() {
+      return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
+    }
+  }, {
+    key: "color",
+    get: function get() {
+      var _this$asProps2 = this.asProps,
+        resolveColor = _this$asProps2.resolveColor,
+        _this$asProps2$color = _this$asProps2.color,
+        color = _this$asProps2$color === void 0 ? 'chart-palette-order-1' : _this$asProps2$color,
+        loading = _this$asProps2.loading;
+      if (loading) {
+        return resolveColor('skeleton-bg');
+      }
+      return resolveColor(color);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2;
+      var STrendLine = Box;
+      var _this$asProps3 = this.asProps,
+        uid = _this$asProps3.uid,
+        withArea = _this$asProps3.withArea,
+        animate = _this$asProps3.animate,
+        lastPointColor = _this$asProps3.lastPointColor,
+        resolveColor = _this$asProps3.resolveColor,
+        loading = _this$asProps3.loading,
+        styles = _this$asProps3.styles;
+      var points = [];
+      var length = this.data.length;
+      var step = this.defaultWidth / (length - 1);
+      for (var i = 0; i < length; i++) {
+        points.push("".concat(step * i, ",").concat(this.defaultHeight - this.data[i]));
+      }
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, _assignProps({
+        "ref": this.containerRef,
+        "__excludeProps": ['data']
+      }, _ref))), /*#__PURE__*/React.createElement("svg", _ref2.cn("svg", {
+        "width": '100%',
+        "height": '100%',
+        "viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight)
+      }), /*#__PURE__*/React.createElement("polyline", _ref2.cn("polyline", {
+        "points": points.join(' '),
+        "stroke": this.color,
+        "strokeWidth": '4',
+        "fill": 'none',
+        "clipPath": "url(#".concat(uid, ")")
+      })), withArea && /*#__PURE__*/React.createElement("polyline", _ref2.cn("polyline", {
+        "points": "0,".concat(this.defaultHeight, " ").concat(points.join(' '), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
+        "fill": this.color,
+        "fillOpacity": 0.2,
+        "clipPath": "url(#".concat(uid, ")")
+      })), lastPointColor && !loading && /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
+        "cx": step * (length - 1),
+        "cy": this.defaultHeight - this.data[length - 1],
+        "r": this.lastPointRadius,
+        "fill": resolveColor(lastPointColor),
+        "stroke": resolveColor('chart-grid-border'),
+        "strokeWidth": 4,
+        "clipPath": "url(#".concat(uid, ")")
+      })), animate && !loading && /*#__PURE__*/React.createElement("clipPath", _ref2.cn("clipPath", {
+        "id": uid
+      }), /*#__PURE__*/React.createElement("rect", _ref2.cn("rect", {
+        "x": '0',
+        "y": '0',
+        "width": '100%',
+        "height": '100%',
+        "fill": 'black'
+      }), /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
+        "dur": '500ms',
+        "attributeName": 'width',
+        "values": '0;100%'
+      }))))));
+    }
+  }]);
+  return TrendLineRoot;
+}(Trend);
+_defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
+_defineProperty(TrendLineRoot, "style", style);
+_defineProperty(TrendLineRoot, "defaultProps", {
+  animate: true
+});
+export var TrendLine = createComponent(TrendLineRoot);
+TrendLine.displayName = 'MiniChart.TrendLine';
+export var TrendArea = createComponent(TrendLineRoot, {}, {
+  enhancements: [function () {
+    return {
+      wrapperProps: function wrapperProps(props) {
+        return assignProps(props, {
+          withArea: true
+        });
+      }
+    };
+  }]
+});
+TrendArea.displayName = 'MiniChart.TrendArea';
+//# sourceMappingURL=Line.js.map

package/mini-chart/lib/es6/component/trend/Line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.js","names":["React","createComponent","assignProps","Root","sstyled","resolveColorEnhance","uniqueIDEnhancement","Trend","Box","style","_sstyled","insert","TrendLineRoot","_Trend","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","get","_this$asProps$lastPoi","asProps","lastPointRadius","_this$asProps","data","loading","defaultData","lastPointColor","defaultWidth","defaultHeight","_this$asProps2","resolveColor","_this$asProps2$color","color","value","render","_ref","_ref2","STrendLine","_this$asProps3","uid","withArea","animate","styles","points","length","step","i","push","concat","createElement","cn","_objectSpread","_assignProps","containerRef","svgWidth","svgHeight","join","_defineProperty","TrendLine","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Line.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { ComponentType, assignProps, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport { Trend, CommonTrendProps } from './Trend';\nimport { Box } from '@semcore/flex-box';\n\nimport style from '../skeleton/skeleton.shadow.css';\n\nexport type TrendLineProps = CommonTrendProps & {\n  /**\n   * List of values\n   */\n  data: number[];\n\n  /**\n   * Color of line\n   */\n  color?: string;\n\n  /**\n   * Color of last point in chart\n   */\n  lastPointColor?: string;\n\n  /**\n   * Radius for last point item\n   */\n  lastPointRadius?: number;\n};\n\ntype Enhances = {\n  uid: string;\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  withArea?: true;\n};\n\nclass TrendLineRoot extends Trend<TrendLineProps, Enhances> {\n  static enhance = [resolveColorEnhance(), uniqueIDEnhancement()];\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  get defaultData(): number[] {\n    return [15, 70, 20, 85, 20];\n  }\n\n  get lastPointRadius(): number {\n    return this.asProps.lastPointRadius ?? 6;\n  }\n\n  get data(): number[] {\n    const { data, loading } = this.asProps;\n\n    if (loading) {\n      return this.defaultData;\n    }\n\n    return data;\n  }\n\n  override get svgWidth(): number {\n    return this.asProps.lastPointColor\n      ? this.defaultWidth + this.lastPointRadius\n      : this.defaultWidth;\n  }\n\n  override get svgHeight(): number {\n    return this.asProps.lastPointColor\n      ? this.defaultHeight + this.lastPointRadius\n      : this.defaultHeight;\n  }\n\n  get color() {\n    const { resolveColor, color = 'chart-palette-order-1', loading } = this.asProps;\n\n    if (loading) {\n      return resolveColor('skeleton-bg');\n    }\n\n    return resolveColor(color);\n  }\n\n  render() {\n    const STrendLine = Root;\n    const { uid, withArea, animate, lastPointColor, resolveColor, loading, styles } = this.asProps;\n\n    const points: string[] = [];\n    const length = this.data.length;\n    const step = this.defaultWidth / (length - 1);\n\n    for (let i = 0; i < length; i++) {\n      points.push(`${step * i},${this.defaultHeight - this.data[i]}`);\n    }\n\n    return sstyled(styles)(\n      <STrendLine render={Box} ref={this.containerRef} __excludeProps={['data']}>\n        <svg width='100%' height='100%' viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}>\n          <polyline\n            points={points.join(' ')}\n            stroke={this.color}\n            strokeWidth='4'\n            fill={'none'}\n            clipPath={`url(#${uid})`}\n          />\n          {withArea && (\n            <polyline\n              points={`0,${this.defaultHeight} ${points.join(' ')} ${this.defaultWidth},${\n                this.defaultHeight\n              }`}\n              fill={this.color}\n              fillOpacity={0.2}\n              clipPath={`url(#${uid})`}\n            />\n          )}\n          {lastPointColor && !loading && (\n            <circle\n              cx={step * (length - 1)}\n              cy={this.defaultHeight - this.data[length - 1]}\n              r={this.lastPointRadius}\n              fill={resolveColor(lastPointColor)}\n              stroke={resolveColor('chart-grid-border')}\n              strokeWidth={4}\n              clipPath={`url(#${uid})`}\n            />\n          )}\n\n          {animate && !loading && (\n            <clipPath id={uid}>\n              <rect x='0' y='0' width='100%' height='100%' fill={'black'}>\n                <animate dur='500ms' attributeName='width' values='0;100%' />\n              </rect>\n            </clipPath>\n          )}\n        </svg>\n      </STrendLine>,\n    );\n  }\n}\n\nexport const TrendLine: ComponentType<TrendLineProps, {}, {}, Enhances> =\n  createComponent(TrendLineRoot);\n\nTrendLine.displayName = 'MiniChart.TrendLine';\n\nexport const TrendArea: ComponentType<TrendLineProps, {}, {}, Enhances> = createComponent(\n  TrendLineRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: TrendLineProps) => {\n            return assignProps(props, { withArea: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nTrendArea.displayName = 'MiniChart.TrendArea';\n"],"mappings":"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"}

package/mini-chart/lib/es6/component/trend/Trend.js

@@ -0,0 +1,79 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { Component } from 'intergalactic/core';
+export var Trend = /*#__PURE__*/function (_Component) {
+  _inherits(Trend, _Component);
+  var _super = _createSuper(Trend);
+  function Trend() {
+    var _this;
+    _classCallCheck(this, Trend);
+    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));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      width: 200,
+      height: 100
+    });
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
+    return _this;
+  }
+  _createClass(Trend, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setSizes();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.w !== this.props.w || prevProps.h !== this.props.h || prevProps.data !== this.props.data) {
+        this.setSizes();
+      }
+    }
+  }, {
+    key: "defaultWidth",
+    get: function get() {
+      var _this$state = this.state,
+        width = _this$state.width,
+        height = _this$state.height;
+      return width / height * this.defaultHeight;
+    }
+  }, {
+    key: "defaultHeight",
+    get: function get() {
+      return 100;
+    }
+  }, {
+    key: "svgWidth",
+    get: function get() {
+      return this.defaultWidth;
+    }
+  }, {
+    key: "svgHeight",
+    get: function get() {
+      return this.defaultHeight;
+    }
+  }, {
+    key: "setSizes",
+    value: function setSizes() {
+      if (this.containerRef.current) {
+        var boundingClientRect = this.containerRef.current.getBoundingClientRect();
+        var width = boundingClientRect.width,
+          height = boundingClientRect.height;
+        if (width > 0 && height > 0) {
+          this.setState({
+            width: width,
+            height: height
+          });
+        }
+      }
+    }
+  }]);
+  return Trend;
+}(Component);
+//# sourceMappingURL=Trend.js.map

package/mini-chart/lib/es6/component/trend/Trend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trend.js","names":["React","Component","Trend","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","width","height","createRef","_createClass","key","value","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","get","_this$state","state","defaultHeight","defaultWidth","containerRef","current","boundingClientRect","getBoundingClientRect","setState"],"sources":["../../../../src/component/trend/Trend.tsx"],"sourcesContent":["import React from 'react';\nimport { Component } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\n\nexport type CommonTrendProps = BoxProps & {\n  /**\n   * Flag to enable animate of charts\n   * @default true\n   */\n  animate?: boolean;\n\n  /**\n   * Flag to enable skeleton\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Data for chart\n   */\n  data: any[];\n};\n\nexport abstract class Trend<P extends CommonTrendProps, E> extends Component<\n  P,\n  {},\n  { width: number; height: number },\n  E\n> {\n  state = {\n    width: 200,\n    height: 100,\n  };\n\n  containerRef = React.createRef<HTMLDivElement>();\n\n  componentDidMount() {\n    this.setSizes();\n  }\n  componentDidUpdate(prevProps: P) {\n    if (\n      prevProps.w !== this.props.w ||\n      prevProps.h !== this.props.h ||\n      prevProps.data !== this.props.data\n    ) {\n      this.setSizes();\n    }\n  }\n\n  get defaultWidth(): number {\n    const { width, height } = this.state;\n\n    return (width / height) * this.defaultHeight;\n  }\n\n  get defaultHeight(): number {\n    return 100;\n  }\n\n  get svgWidth(): number {\n    return this.defaultWidth;\n  }\n\n  get svgHeight(): number {\n    return this.defaultHeight;\n  }\n\n  setSizes() {\n    if (this.containerRef.current) {\n      const boundingClientRect = this.containerRef.current.getBoundingClientRect();\n\n      const { width, height } = boundingClientRect;\n\n      if (width > 0 && height > 0) {\n        this.setState({ width, height });\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,eAAe;AAsBzC,WAAsBC,KAAK,0BAAAC,UAAA;EAAAC,SAAA,CAAAF,KAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,KAAA;EAAA,SAAAA,MAAA;IAAA,IAAAK,KAAA;IAAAC,eAAA,OAAAN,KAAA;IAAA,SAAAO,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAAM,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,YAMjB;MACNa,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAAH,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,gCAEcP,KAAK,CAACsB,SAAS,EAAkB;IAAA,OAAAf,KAAA;EAAA;EAAAgB,YAAA,CAAArB,KAAA;IAAAsB,GAAA;IAAAC,KAAA,EAEhD,SAAAC,kBAAA,EAAoB;MAClB,IAAI,CAACC,QAAQ,EAAE;IACjB;EAAC;IAAAH,GAAA;IAAAC,KAAA,EACD,SAAAG,mBAAmBC,SAAY,EAAE;MAC/B,IACEA,SAAS,CAACC,CAAC,KAAK,IAAI,CAACC,KAAK,CAACD,CAAC,IAC5BD,SAAS,CAACG,CAAC,KAAK,IAAI,CAACD,KAAK,CAACC,CAAC,IAC5BH,SAAS,CAACI,IAAI,KAAK,IAAI,CAACF,KAAK,CAACE,IAAI,EAClC;QACA,IAAI,CAACN,QAAQ,EAAE;MACjB;IACF;EAAC;IAAAH,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAA2B;MACzB,IAAAC,WAAA,GAA0B,IAAI,CAACC,KAAK;QAA5BhB,KAAK,GAAAe,WAAA,CAALf,KAAK;QAAEC,MAAM,GAAAc,WAAA,CAANd,MAAM;MAErB,OAAQD,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACgB,aAAa;IAC9C;EAAC;IAAAb,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAA4B;MAC1B,OAAO,GAAG;IACZ;EAAC;IAAAV,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAAuB;MACrB,OAAO,IAAI,CAACI,YAAY;IAC1B;EAAC;IAAAd,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAAwB;MACtB,OAAO,IAAI,CAACG,aAAa;IAC3B;EAAC;IAAAb,GAAA;IAAAC,KAAA,EAED,SAAAE,SAAA,EAAW;MACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;QAC7B,IAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,EAAE;QAE5E,IAAQtB,KAAK,GAAaqB,kBAAkB,CAApCrB,KAAK;UAAEC,MAAM,GAAKoB,kBAAkB,CAA7BpB,MAAM;QAErB,IAAID,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;UAC3B,IAAI,CAACsB,QAAQ,CAAC;YAAEvB,KAAK,EAALA,KAAK;YAAEC,MAAM,EAANA;UAAO,CAAC,CAAC;QAClC;MACF;IACF;EAAC;EAAA,OAAAnB,KAAA;AAAA,EAtDgED,SAAS"}

package/mini-chart/lib/es6/component/trend/index.js

@@ -0,0 +1,4 @@
+import { TrendLine, TrendArea } from './Line';
+import { TrendBar, TrendHistogram } from './Bar';
+export { TrendLine, TrendArea, TrendBar, TrendHistogram };
+//# sourceMappingURL=index.js.map

package/mini-chart/lib/es6/component/trend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["TrendLine","TrendArea","TrendBar","TrendHistogram"],"sources":["../../../../src/component/trend/index.ts"],"sourcesContent":["import { TrendLine, TrendArea } from './Line';\nimport { TrendBar, TrendHistogram } from './Bar';\n\nexport { TrendLine, TrendArea, TrendBar, TrendHistogram };\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAQ,QAAQ;AAC7C,SAASC,QAAQ,EAAEC,cAAc,QAAQ,OAAO;AAEhD,SAASH,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc"}