@semcore/mini-chart 16.1.1 → 17.0.0-prerelease.17

package/lib/es6/component/trend/Line.js

@@ -1,158 +1,137 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
+import { Box } from '@semcore/base-components';
 import { createComponent, assignProps, Root, sstyled } from '@semcore/core';
 import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
-import { Box } from '@semcore/flex-box';
 import React from 'react';
 import { Trend } from './Trend';
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1wd8q{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1wd8q_gg_.__loading_1wd8q_gg_,.___SLineGauge_1wd8q_gg_.__loading_1wd8q_gg_,.___STrendBar_1wd8q_gg_.__loading_1wd8q_gg_,.___STrendLine_1wd8q_gg_.__loading_1wd8q_gg_{animation-name:pulse_1wd8q;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1wd8q_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1ydx6{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1ydx6_gg_.__loading_1ydx6_gg_,.___SLineGauge_1ydx6_gg_.__loading_1ydx6_gg_,.___STrendBar_1ydx6_gg_.__loading_1ydx6_gg_,.___STrendLine_1ydx6_gg_.__loading_1ydx6_gg_{animation-name:pulse_1ydx6;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1ydx6_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_1wd8q_gg_",
-  "_loading": "__loading_1wd8q_gg_",
-  "__SDonutContainer": "___SDonutContainer_1wd8q_gg_",
-  "__STrendLine": "___STrendLine_1wd8q_gg_",
-  "__STrendBar": "___STrendBar_1wd8q_gg_",
-  "@pulse": "pulse_1wd8q"
+  "__SLineGauge": "___SLineGauge_1ydx6_gg_",
+  "_loading": "__loading_1ydx6_gg_",
+  "__SDonutContainer": "___SDonutContainer_1ydx6_gg_",
+  "__STrendLine": "___STrendLine_1ydx6_gg_",
+  "__STrendBar": "___STrendBar_1ydx6_gg_",
+  "@pulse": "pulse_1ydx6"
 });
-var TrendLineRoot = /*#__PURE__*/function (_Trend) {
-  function TrendLineRoot() {
-    _classCallCheck(this, TrendLineRoot);
-    return _callSuper(this, TrendLineRoot, arguments);
+class TrendLineRoot extends Trend {
+  get defaultData() {
+    return [15, 70, 20, 85, 20];
   }
-  _inherits(TrendLineRoot, _Trend);
-  return _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;
+  get lastPointRadius() {
+    return this.asProps.lastPointRadius ?? 6;
+  }
+  get data() {
+    const {
+      data,
+      loading
+    } = this.asProps;
+    if (loading) {
+      return this.defaultData;
     }
-  }, {
-    key: "svgHeight",
-    get: function get() {
-      return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
+    return data;
+  }
+  get svgWidth() {
+    return this.asProps.lastPointColor ? this.defaultWidth + this.lastPointRadius : this.defaultWidth;
+  }
+  get svgHeight() {
+    return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
+  }
+  get color() {
+    const {
+      resolveColor,
+      color = 'chart-palette-order-1',
+      loading
+    } = this.asProps;
+    if (loading) {
+      return resolveColor('skeleton-bg');
     }
-  }, {
-    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);
+    return resolveColor(color);
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref2;
+    const STrendLine = Box;
+    const {
+      uid,
+      withArea,
+      animate,
+      lastPointColor,
+      resolveColor,
+      loading,
+      styles
+    } = this.asProps;
+    const points = [];
+    const length = this.data.length;
+    const step = this.defaultWidth / (length - 1);
+    for (let i = 0; i < length; i++) {
+      points.push(`${step * i},${this.defaultHeight - this.data[i]}`);
     }
-  }, {
-    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]));
-      }
-      var _extractAriaProps = extractAriaProps(this.asProps),
-        __excludeProps = _extractAriaProps.__excludeProps,
-        extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, _assignProps({
+    const {
+      __excludeProps,
+      extractedAriaProps
+    } = extractAriaProps(this.asProps);
+    return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(STrendLine, _ref2.cn("STrendLine", {
+      ..._assignProps({
         "ref": this.containerRef,
-        "__excludeProps": ['data'].concat(_toConsumableArray(__excludeProps))
-      }, _ref))), /*#__PURE__*/React.createElement("svg", _ref2.cn("svg", _objectSpread({
-        "width": '100%',
-        "height": '100%',
-        "viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
-        "role": 'img'
-      }, extractedAriaProps)), /*#__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%'
-      }))))));
-    }
-  }]);
-}(Trend);
+        "__excludeProps": ['data', ...__excludeProps]
+      }, _ref)
+    }), /*#__PURE__*/React.createElement("svg", _ref2.cn("svg", {
+      "width": '100%',
+      "height": '100%',
+      "viewBox": `0 0 ${this.svgWidth} ${this.svgHeight}`,
+      "role": 'img',
+      ...extractedAriaProps
+    }), /*#__PURE__*/React.createElement("polyline", _ref2.cn("polyline", {
+      "points": points.join(' '),
+      "stroke": this.color,
+      "strokeWidth": '4',
+      "fill": 'none',
+      "clipPath": `url(#${uid})`
+    })), withArea && /*#__PURE__*/React.createElement("polyline", _ref2.cn("polyline", {
+      "points": `0,${this.defaultHeight} ${points.join(' ')} ${this.defaultWidth},${this.defaultHeight}`,
+      "fill": this.color,
+      "fillOpacity": 0.2,
+      "clipPath": `url(#${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(#${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%'
+    }))))));
+  }
+}
 _defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
 _defineProperty(TrendLineRoot, "style", style);
 _defineProperty(TrendLineRoot, "defaultProps", {
   animate: true
 });
-export var TrendLine = createComponent(TrendLineRoot);
+export const TrendLine = createComponent(TrendLineRoot);
 TrendLine.displayName = 'MiniChart.TrendLine';
-export var TrendArea = createComponent(TrendLineRoot, {}, {
-  enhancements: [function () {
+export const TrendArea = createComponent(TrendLineRoot, {}, {
+  enhancements: [() => {
     return {
-      wrapperProps: function wrapperProps(props) {
+      wrapperProps: props => {
         return assignProps(props, {
           withArea: true
         });

package/lib/es6/component/trend/Line.js.map

@@ -1 +1 @@
-{"version":3,"file":"Line.js","names":["createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","uniqueIDEnhancement","Box","React","Trend","style","_sstyled","insert","TrendLineRoot","_Trend","_classCallCheck","_callSuper","arguments","_inherits","_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","_extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread","_assignProps","containerRef","_toConsumableArray","svgWidth","svgHeight","join","_defineProperty","TrendLine","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Line.tsx"],"sourcesContent":["import { createComponent, type ComponentType, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport { Box } from '@semcore/flex-box';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\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, typeof TrendLineRoot.enhance> {\n  static enhance = [resolveColorEnhance(), uniqueIDEnhancement()] as const;\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    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendLine render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n          role='img'\n          {...extractedAriaProps}\n        >\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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","ignoreList":[]}
+{"version":3,"file":"Line.js","names":["Box","createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","uniqueIDEnhancement","React","Trend","style","_sstyled","insert","TrendLineRoot","defaultData","lastPointRadius","asProps","data","loading","svgWidth","lastPointColor","defaultWidth","svgHeight","defaultHeight","color","resolveColor","render","_ref","_ref2","STrendLine","uid","withArea","animate","styles","points","length","step","i","push","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","containerRef","join","_defineProperty","TrendLine","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Line.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\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\nclass TrendLineRoot extends Trend<TrendLineProps, typeof TrendLineRoot.enhance> {\n  static enhance = [resolveColorEnhance(), uniqueIDEnhancement()] as const;\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    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendLine render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n          role='img'\n          {...extractedAriaProps}\n        >\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 = createComponent<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>(TrendLineRoot);\n\nTrendLine.displayName = 'MiniChart.TrendLine';\n\nexport const TrendArea = createComponent<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>(\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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","ignoreList":[]}

package/lib/es6/component/trend/Trend.js

@@ -1,76 +1,53 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Component } from '@semcore/core';
 import React from 'react';
-export var Trend = /*#__PURE__*/function (_Component) {
-  function Trend() {
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _classCallCheck(this, Trend);
-    _this = _callSuper(this, Trend, [].concat(args));
-    _defineProperty(_this, "state", {
+export class Trend extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
       width: 200,
       height: 100
     });
-    _defineProperty(_this, "containerRef", /*#__PURE__*/React.createRef());
-    return _this;
+    _defineProperty(this, "containerRef", /*#__PURE__*/React.createRef());
+  }
+  componentDidMount() {
+    this.setSizes();
   }
-  _inherits(Trend, _Component);
-  return _createClass(Trend, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
+  componentDidUpdate(prevProps) {
+    if (prevProps.w !== this.props.w || prevProps.h !== this.props.h || prevProps.data !== this.props.data) {
       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
-          });
-        }
+  }
+  get defaultWidth() {
+    const {
+      width,
+      height
+    } = this.state;
+    return width / height * this.defaultHeight;
+  }
+  get defaultHeight() {
+    return 100;
+  }
+  get svgWidth() {
+    return this.defaultWidth;
+  }
+  get svgHeight() {
+    return this.defaultHeight;
+  }
+  setSizes() {
+    if (this.containerRef.current) {
+      const boundingClientRect = this.containerRef.current.getBoundingClientRect();
+      const {
+        width,
+        height
+      } = boundingClientRect;
+      if (width > 0 && height > 0) {
+        this.setState({
+          width,
+          height
+        });
       }
     }
-  }]);
-}(Component);
+  }
+}
 //# sourceMappingURL=Trend.js.map

package/lib/es6/component/trend/Trend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trend.js","names":["Component","React","Trend","_Component","_this","_len","arguments","length","args","Array","_key","_classCallCheck","_callSuper","concat","_defineProperty","width","height","createRef","_inherits","_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 { Component } from '@semcore/core';\nimport type { BoxProps } from '@semcore/flex-box';\nimport React from 'react';\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<\n  P extends CommonTrendProps,\n  E extends readonly ((...args: any[]) => any)[],\n> extends Component<P, {}, { width: number; height: number }, E> {\n  state = {\n    width: 200,\n    height: 100,\n  };\n\n  containerRef = React.createRef<HTMLDivElement>();\n\n  componentDidMount() {\n    this.setSizes();\n  }\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,SAASA,SAAS,QAAQ,eAAe;AAEzC,OAAOC,KAAK,MAAM,OAAO;AAqBzB,WAAsBC,KAAK,0BAAAC,UAAA;EAAA,SAAAD,MAAA;IAAA,IAAAE,KAAA;IAAA,SAAAC,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;IAAAC,eAAA,OAAAT,KAAA;IAAAE,KAAA,GAAAQ,UAAA,OAAAV,KAAA,KAAAW,MAAA,CAAAL,IAAA;IAAAM,eAAA,CAAAV,KAAA,WAIjB;MACNW,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAAF,eAAA,CAAAV,KAAA,+BAEcH,KAAK,CAACgB,SAAS,CAAiB,CAAC;IAAA,OAAAb,KAAA;EAAA;EAAAc,SAAA,CAAAhB,KAAA,EAAAC,UAAA;EAAA,OAAAgB,YAAA,CAAAjB,KAAA;IAAAkB,GAAA;IAAAC,KAAA,EAEhD,SAAAC,iBAAiBA,CAAA,EAAG;MAClB,IAAI,CAACC,QAAQ,CAAC,CAAC;IACjB;EAAC;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAG,kBAAkBA,CAACC,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,CAAC,CAAC;MACjB;IACF;EAAC;IAAAH,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAA2B;MACzB,IAAAC,WAAA,GAA0B,IAAI,CAACC,KAAK;QAA5BjB,KAAK,GAAAgB,WAAA,CAALhB,KAAK;QAAEC,MAAM,GAAAe,WAAA,CAANf,MAAM;MAErB,OAAQD,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACiB,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,QAAQA,CAAA,EAAG;MACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;QAC7B,IAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,CAAC,CAAC;QAE5E,IAAQvB,KAAK,GAAasB,kBAAkB,CAApCtB,KAAK;UAAEC,MAAM,GAAKqB,kBAAkB,CAA7BrB,MAAM;QAErB,IAAID,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;UAC3B,IAAI,CAACuB,QAAQ,CAAC;YAAExB,KAAK,EAALA,KAAK;YAAEC,MAAM,EAANA;UAAO,CAAC,CAAC;QAClC;MACF;IACF;EAAC;AAAA,EAlDOhB,SAAS","ignoreList":[]}
+{"version":3,"file":"Trend.js","names":["Component","React","Trend","constructor","args","_defineProperty","width","height","createRef","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","defaultWidth","state","defaultHeight","svgWidth","svgHeight","containerRef","current","boundingClientRect","getBoundingClientRect","setState"],"sources":["../../../../src/component/trend/Trend.tsx"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport { Component } from '@semcore/core';\nimport React from 'react';\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<\n  P extends CommonTrendProps,\n  E extends readonly ((...args: any[]) => any)[],\n> extends Component<P, E, Readonly<{}>, { width: number; height: number }> {\n  state = {\n    width: 200,\n    height: 100,\n  };\n\n  containerRef = React.createRef<HTMLDivElement>();\n\n  componentDidMount() {\n    this.setSizes();\n  }\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":";AACA,SAASA,SAAS,QAAQ,eAAe;AACzC,OAAOC,KAAK,MAAM,OAAO;AAqBzB,OAAO,MAAeC,KAAK,SAGjBF,SAAS,CAAwD;EAAAG,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gBACjE;MACNC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAAF,eAAA,oCAEcJ,KAAK,CAACO,SAAS,CAAiB,CAAC;EAAA;EAEhDC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACC,QAAQ,CAAC,CAAC;EACjB;EAEAC,kBAAkBA,CAACC,SAAY,EAAE;IAC/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;MACA,IAAI,CAACN,QAAQ,CAAC,CAAC;IACjB;EACF;EAEA,IAAIO,YAAYA,CAAA,EAAW;IACzB,MAAM;MAAEX,KAAK;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACW,KAAK;IAEpC,OAAQZ,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACY,aAAa;EAC9C;EAEA,IAAIA,aAAaA,CAAA,EAAW;IAC1B,OAAO,GAAG;EACZ;EAEA,IAAIC,QAAQA,CAAA,EAAW;IACrB,OAAO,IAAI,CAACH,YAAY;EAC1B;EAEA,IAAII,SAASA,CAAA,EAAW;IACtB,OAAO,IAAI,CAACF,aAAa;EAC3B;EAEAT,QAAQA,CAAA,EAAG;IACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;MAC7B,MAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,CAAC,CAAC;MAE5E,MAAM;QAAEnB,KAAK;QAAEC;MAAO,CAAC,GAAGiB,kBAAkB;MAE5C,IAAIlB,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;QAC3B,IAAI,CAACmB,QAAQ,CAAC;UAAEpB,KAAK;UAAEC;QAAO,CAAC,CAAC;MAClC;IACF;EACF;AACF","ignoreList":[]}

package/lib/es6/index.js

@@ -1,13 +1,13 @@
 import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';
 import { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';
-var miniCharts = {
-  TrendLine: TrendLine,
-  TrendArea: TrendArea,
-  TrendBar: TrendBar,
-  TrendHistogram: TrendHistogram,
-  ScoreSemiDonut: ScoreSemiDonut,
-  ScoreDonut: ScoreDonut,
-  ScoreLine: ScoreLine
+const miniCharts = {
+  TrendLine,
+  TrendArea,
+  TrendBar,
+  TrendHistogram,
+  ScoreSemiDonut,
+  ScoreDonut,
+  ScoreLine
 };
 export default miniCharts;
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ScoreLine","ScoreDonut","ScoreSemiDonut","TrendLine","TrendArea","TrendBar","TrendHistogram","miniCharts"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n  TrendLine: typeof TrendLine;\n  TrendArea: typeof TrendArea;\n  TrendBar: typeof TrendBar;\n  TrendHistogram: typeof TrendHistogram;\n  ScoreSemiDonut: typeof ScoreSemiDonut;\n  ScoreDonut: typeof ScoreDonut;\n  ScoreLine: typeof ScoreLine;\n} = {\n  TrendLine,\n  TrendArea,\n  TrendBar,\n  TrendHistogram,\n  ScoreSemiDonut,\n  ScoreDonut,\n  ScoreLine,\n};\n\nexport default miniCharts;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,EAAEC,cAAc,QAAQ,mBAAmB;AACzE,SAASC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc,QAAQ,mBAAmB;AAElF,IAAMC,UAQL,GAAG;EACFJ,SAAS,EAATA,SAAS;EACTC,SAAS,EAATA,SAAS;EACTC,QAAQ,EAARA,QAAQ;EACRC,cAAc,EAAdA,cAAc;EACdJ,cAAc,EAAdA,cAAc;EACdD,UAAU,EAAVA,UAAU;EACVD,SAAS,EAATA;AACF,CAAC;AAED,eAAeO,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":["ScoreLine","ScoreDonut","ScoreSemiDonut","TrendLine","TrendArea","TrendBar","TrendHistogram","miniCharts"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n  TrendLine: typeof TrendLine;\n  TrendArea: typeof TrendArea;\n  TrendBar: typeof TrendBar;\n  TrendHistogram: typeof TrendHistogram;\n  ScoreSemiDonut: typeof ScoreSemiDonut;\n  ScoreDonut: typeof ScoreDonut;\n  ScoreLine: typeof ScoreLine;\n} = {\n  TrendLine,\n  TrendArea,\n  TrendBar,\n  TrendHistogram,\n  ScoreSemiDonut,\n  ScoreDonut,\n  ScoreLine,\n};\n\nexport default miniCharts;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,EAAEC,cAAc,QAAQ,mBAAmB;AACzE,SAASC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc,QAAQ,mBAAmB;AAElF,MAAMC,UAQL,GAAG;EACFJ,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdJ,cAAc;EACdD,UAAU;EACVD;AACF,CAAC;AAED,eAAeO,UAAU","ignoreList":[]}

package/lib/es6/utils/ScoreDonutUtils.js

@@ -1,9 +1,6 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-export var ScoreDonutUtils = /*#__PURE__*/function () {
-  function ScoreDonutUtils(value, isSemiDonut) {
-    _classCallCheck(this, ScoreDonutUtils);
+export class ScoreDonutUtils {
+  constructor(value, isSemiDonut) {
     _defineProperty(this, "isSemiDonut", void 0);
     _defineProperty(this, "value", void 0);
     _defineProperty(this, "radius", void 0);
@@ -11,70 +8,45 @@ export var ScoreDonutUtils = /*#__PURE__*/function () {
     this.radius = isSemiDonut ? 9 : 10;
     this.value = Math.max(Math.min(value, 100), 0);
   }
-  return _createClass(ScoreDonutUtils, [{
-    key: "viewBox",
-    get: function get() {
-      return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';
-    }
-  }, {
-    key: "strokeWidth",
-    get: function get() {
-      return this.isSemiDonut ? 6 : 4;
-    }
-  }, {
-    key: "fullLength",
-    get: function get() {
-      return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
-    }
-  }, {
-    key: "point",
-    get: function get() {
-      return this.isSemiDonut ? this.fullLength / (100 / 3) : this.fullLength / 100;
-    }
-  }, {
-    key: "valueLength",
-    get: function get() {
-      return this.fullLength * (this.value / 100);
-    }
-  }, {
-    key: "animatedValueLength",
-    get: function get() {
-      return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);
-    }
-  }, {
-    key: "startMargin",
-    get: function get() {
-      var margin = 0;
-      if (this.value > 0) margin = this.point;
-      return margin;
-    }
-  }, {
-    key: "endMargin",
-    get: function get() {
-      var margin = 0;
-      if (!this.isSemiDonut && this.value > 0) margin = this.point;
-      return margin;
-    }
-  }, {
-    key: "baseOffset",
-    get: function get() {
-      return -1 * (this.valueLength + this.startMargin);
-    }
-  }, {
-    key: "baseLength",
-    get: function get() {
-      return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);
-    }
-  }, {
-    key: "animatedBaseLengthFrom",
-    get: function get() {
-      return this.fullLength - this.startMargin - this.endMargin;
-    }
-  }, {
-    key: "animatedBaseLengthTo",
-    get: function get() {
-      return this.fullLength - this.valueLength - this.startMargin - this.endMargin;
-    }
-  }]);
-}();
+  get viewBox() {
+    return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';
+  }
+  get strokeWidth() {
+    return this.isSemiDonut ? 6 : 4;
+  }
+  get fullLength() {
+    return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
+  }
+  get point() {
+    return this.isSemiDonut ? this.fullLength / (100 / 3) : this.fullLength / 100;
+  }
+  get valueLength() {
+    return this.fullLength * (this.value / 100);
+  }
+  get animatedValueLength() {
+    return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);
+  }
+  get startMargin() {
+    let margin = 0;
+    if (this.value > 0) margin = this.point;
+    return margin;
+  }
+  get endMargin() {
+    let margin = 0;
+    if (!this.isSemiDonut && this.value > 0) margin = this.point;
+    return margin;
+  }
+  get baseOffset() {
+    return -1 * (this.valueLength + this.startMargin);
+  }
+  get baseLength() {
+    return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);
+  }
+  get animatedBaseLengthFrom() {
+    return this.fullLength - this.startMargin - this.endMargin;
+  }
+  get animatedBaseLengthTo() {
+    return this.fullLength - this.valueLength - this.startMargin - this.endMargin;
+  }
+}
 //# sourceMappingURL=ScoreDonutUtils.js.map