@semcore/mini-chart 0.30.0-prerelease.4 → 0.30.0-prerelease.5

package/lib/cjs/component/trend/Bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_resolveColorEnhance","_Trend2","_flexBox","_ariaProps","style","_index","sstyled","insert","TrendBarRoot","_Trend","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","get","value","_this$asProps","asProps","data","loading","defaultData","render","_ref","_ref2","_this","STrendBar","Box","_this$asProps2","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","containerRef","concat","_toConsumableArray2","svgWidth","svgHeight","map","barItem","index","color","x","y","defaultHeight","width","height","fill","attributeName","values","dur","Trend","_defineProperty2","resolveColorEnhance","TrendBar","createComponent","exports","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';\nimport { extractAriaProps } from '@semcore/utils/lib/ariaProps';\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, typeof TrendBarRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\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    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendBar 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          {this.data.map((barItem, index) => {\n            let color = resolveColor('chart-palette-order-other-data');\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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"}
+{"version":3,"file":"Bar.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_react","_Trend2","style","sstyled","insert","TrendBarRoot","_Trend","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","get","value","_this$asProps","asProps","data","loading","defaultData","render","_ref","_ref2","_this","STrendBar","Box","_this$asProps2","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","containerRef","concat","_toConsumableArray2","svgWidth","svgHeight","map","barItem","index","color","x","y","defaultHeight","width","height","fill","attributeName","values","dur","Trend","_defineProperty2","resolveColorEnhance","TrendBar","exports","createComponent","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.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 React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\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\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\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    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendBar 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          {this.data.map((barItem, index) => {\n            let color = resolveColor('chart-palette-order-other-data');\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 = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(\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\nTrendHistogram.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,36 +9,34 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _index = require("@semcore/utils/lib/core/index");
-var _core = _interopRequireWildcard(require("@semcore/core"));
+var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
+var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
+var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
+var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
 var _react = _interopRequireDefault(require("react"));
-var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
-var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
 var _Trend2 = require("./Trend");
-var _flexBox = require("@semcore/flex-box");
-var _ariaProps = require("@semcore/utils/lib/ariaProps");
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_mylya{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_mylya_gg_.__loading_mylya_gg_,.___SLineGauge_mylya_gg_.__loading_mylya_gg_,.___STrendBar_mylya_gg_.__loading_mylya_gg_,.___STrendLine_mylya_gg_.__loading_mylya_gg_{animation-name:pulse_mylya;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"mylya_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1yrsa{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1yrsa_gg_.__loading_1yrsa_gg_,.___SLineGauge_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendBar_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendLine_1yrsa_gg_.__loading_1yrsa_gg_{animation-name:pulse_1yrsa;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1yrsa_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_mylya_gg_",
-  "_loading": "__loading_mylya_gg_",
-  "__SDonutContainer": "___SDonutContainer_mylya_gg_",
-  "__STrendLine": "___STrendLine_mylya_gg_",
-  "__STrendBar": "___STrendBar_mylya_gg_",
-  "@pulse": "pulse_mylya"
+  "__SLineGauge": "___SLineGauge_1yrsa_gg_",
+  "_loading": "__loading_1yrsa_gg_",
+  "__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
+  "__STrendLine": "___STrendLine_1yrsa_gg_",
+  "__STrendBar": "___STrendBar_1yrsa_gg_",
+  "@pulse": "pulse_1yrsa"
 });
 var TrendLineRoot = /*#__PURE__*/function (_Trend) {
-  (0, _inherits2["default"])(TrendLineRoot, _Trend);
-  var _super = (0, _createSuper2["default"])(TrendLineRoot);
   function TrendLineRoot() {
     (0, _classCallCheck2["default"])(this, TrendLineRoot);
-    return _super.apply(this, arguments);
+    return (0, _callSuper2["default"])(this, TrendLineRoot, arguments);
   }
-  (0, _createClass2["default"])(TrendLineRoot, [{
+  (0, _inherits2["default"])(TrendLineRoot, _Trend);
+  return (0, _createClass2["default"])(TrendLineRoot, [{
     key: "defaultData",
     get: function get() {
       return [15, 70, 20, 85, 20];
@@ -89,7 +86,7 @@ var TrendLineRoot = /*#__PURE__*/function (_Trend) {
     value: function render() {
       var _ref = this.asProps,
         _ref2;
-      var STrendLine = _flexBox.Box;
+      var STrendLine = _baseComponents.Box;
       var _this$asProps3 = this.asProps,
         uid = _this$asProps3.uid,
         withArea = _this$asProps3.withArea,
@@ -149,17 +146,15 @@ var TrendLineRoot = /*#__PURE__*/function (_Trend) {
       }))))));
     }
   }]);
-  return TrendLineRoot;
 }(_Trend2.Trend);
 (0, _defineProperty2["default"])(TrendLineRoot, "enhance", [(0, _resolveColorEnhance["default"])(), (0, _uniqueID["default"])()]);
 (0, _defineProperty2["default"])(TrendLineRoot, "style", style);
 (0, _defineProperty2["default"])(TrendLineRoot, "defaultProps", {
   animate: true
 });
-var TrendLine = (0, _core["default"])(TrendLineRoot);
-exports.TrendLine = TrendLine;
+var TrendLine = exports.TrendLine = (0, _core.createComponent)(TrendLineRoot);
 TrendLine.displayName = 'MiniChart.TrendLine';
-var TrendArea = (0, _core["default"])(TrendLineRoot, {}, {
+var TrendArea = exports.TrendArea = (0, _core.createComponent)(TrendLineRoot, {}, {
   enhancements: [function () {
     return {
       wrapperProps: function wrapperProps(props) {
@@ -170,6 +165,5 @@ var TrendArea = (0, _core["default"])(TrendLineRoot, {}, {
     };
   }]
 });
-exports.TrendArea = TrendArea;
 TrendArea.displayName = 'MiniChart.TrendArea';
 //# sourceMappingURL=Line.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Line.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_resolveColorEnhance","_uniqueID","_Trend2","_flexBox","_ariaProps","style","_index","sstyled","insert","TrendLineRoot","_Trend","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","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","Box","_this$asProps3","uid","withArea","animate","styles","points","length","step","i","push","concat","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","containerRef","_toConsumableArray2","svgWidth","svgHeight","join","Trend","_defineProperty2","resolveColorEnhance","uniqueIDEnhancement","TrendLine","createComponent","exports","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';\nimport { extractAriaProps } from '@semcore/utils/lib/ariaProps';\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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"}
+{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_uniqueID","_react","_Trend2","style","sstyled","insert","TrendLineRoot","_Trend","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","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","Box","_this$asProps3","uid","withArea","animate","styles","points","length","step","i","push","concat","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","containerRef","_toConsumableArray2","svgWidth","svgHeight","join","Trend","_defineProperty2","resolveColorEnhance","uniqueIDEnhancement","TrendLine","exports","createComponent","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/cjs/component/trend/Trend.js

@@ -1,36 +1,34 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Trend = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
 var _core = require("@semcore/core");
-var Trend = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Trend, _Component);
-  var _super = (0, _createSuper2["default"])(Trend);
+var _react = _interopRequireDefault(require("react"));
+var Trend = exports.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];
     }
     (0, _classCallCheck2["default"])(this, Trend);
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+    _this = (0, _callSuper2["default"])(this, Trend, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "state", {
       width: 200,
       height: 100
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "containerRef", /*#__PURE__*/_react["default"].createRef());
     return _this;
   }
-  (0, _createClass2["default"])(Trend, [{
+  (0, _inherits2["default"])(Trend, _Component);
+  return (0, _createClass2["default"])(Trend, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setSizes();
@@ -81,7 +79,5 @@ var Trend = /*#__PURE__*/function (_Component) {
       }
     }
   }]);
-  return Trend;
 }(_core.Component);
-exports.Trend = Trend;
 //# sourceMappingURL=Trend.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Trend.js","names":["_react","_interopRequireDefault","require","_core","Trend","_Component","_inherits2","_super","_createSuper2","_this","_len","arguments","length","args","Array","_key","_classCallCheck2","call","apply","concat","_defineProperty2","_assertThisInitialized2","width","height","React","createRef","_createClass2","key","value","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","get","_this$state","state","defaultHeight","defaultWidth","containerRef","current","boundingClientRect","getBoundingClientRect","setState","Component","exports"],"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<\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  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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAA0C,IAsBpBE,KAAK,0BAAAC,UAAA;EAAA,IAAAC,UAAA,aAAAF,KAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,OAAAC,aAAA,aAAAJ,KAAA;EAAA,SAAAA,MAAA;IAAA,IAAAK,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;IAAA,IAAAC,gBAAA,mBAAAZ,KAAA;IAAAK,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAN,IAAA;IAAA,IAAAO,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,YAIjB;MACNa,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAA,IAAAH,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,gCAEce,iBAAK,CAACC,SAAS,EAAkB;IAAA,OAAAhB,KAAA;EAAA;EAAA,IAAAiB,aAAA,aAAAtB,KAAA;IAAAuB,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;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,SAAA,EAAW;MACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;QAC7B,IAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,EAAE;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;EAAA,OAAAnB,KAAA;AAAA,EAjDO2C,eAAS;AAAAC,OAAA,CAAA5C,KAAA,GAAAA,KAAA"}
+{"version":3,"file":"Trend.js","names":["_core","require","_react","_interopRequireDefault","Trend","exports","_Component","_this","_len","arguments","length","args","Array","_key","_classCallCheck2","_callSuper2","concat","_defineProperty2","width","height","React","createRef","_inherits2","_createClass2","key","value","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","get","_this$state","state","defaultHeight","defaultWidth","containerRef","current","boundingClientRect","getBoundingClientRect","setState","Component"],"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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA0B,IAqBJG,KAAK,GAAAC,OAAA,CAAAD,KAAA,0BAAAE,UAAA;EAAA,SAAAF,MAAA;IAAA,IAAAG,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;IAAA,IAAAC,gBAAA,mBAAAV,KAAA;IAAAG,KAAA,OAAAQ,WAAA,mBAAAX,KAAA,KAAAY,MAAA,CAAAL,IAAA;IAAA,IAAAM,gBAAA,aAAAV,KAAA,WAIjB;MACNW,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAA,IAAAF,gBAAA,aAAAV,KAAA,+BAEca,iBAAK,CAACC,SAAS,CAAiB,CAAC;IAAA,OAAAd,KAAA;EAAA;EAAA,IAAAe,UAAA,aAAAlB,KAAA,EAAAE,UAAA;EAAA,WAAAiB,aAAA,aAAAnB,KAAA;IAAAoB,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;QAA5BlB,KAAK,GAAAiB,WAAA,CAALjB,KAAK;QAAEC,MAAM,GAAAgB,WAAA,CAANhB,MAAM;MAErB,OAAQD,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACkB,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,IAAQxB,KAAK,GAAauB,kBAAkB,CAApCvB,KAAK;UAAEC,MAAM,GAAKsB,kBAAkB,CAA7BtB,MAAM;QAErB,IAAID,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;UAC3B,IAAI,CAACwB,QAAQ,CAAC;YAAEzB,KAAK,EAALA,KAAK;YAAEC,MAAM,EAANA;UAAO,CAAC,CAAC;QAClC;MACF;IACF;EAAC;AAAA,EAlDOyB,eAAS","ignoreList":[]}

package/lib/cjs/component/trend/index.js

@@ -27,6 +27,6 @@ Object.defineProperty(exports, "TrendLine", {
     return _Line.TrendLine;
   }
 });
-var _Line = require("./Line");
 var _Bar = require("./Bar");
+var _Line = require("./Line");
 //# sourceMappingURL=index.js.map

package/lib/cjs/component/trend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Line","require","_Bar"],"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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA"}
+{"version":3,"file":"index.js","names":["_Bar","require","_Line"],"sources":["../../../../src/component/trend/index.ts"],"sourcesContent":["import { TrendBar, TrendHistogram } from './Bar';\nimport { TrendLine, TrendArea } from './Line';\n\nexport { TrendLine, TrendArea, TrendBar, TrendHistogram };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,IAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA","ignoreList":[]}

package/lib/cjs/index.js

@@ -15,6 +15,5 @@ var miniCharts = {
   ScoreDonut: _score.ScoreDonut,
   ScoreLine: _score.ScoreLine
 };
-var _default = miniCharts;
-exports["default"] = _default;
+var _default = exports["default"] = miniCharts;
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_score","require","_trend","miniCharts","TrendLine","TrendArea","TrendBar","TrendHistogram","ScoreSemiDonut","ScoreDonut","ScoreLine","_default","exports"],"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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAME,UAQL,GAAG;EACFC,SAAS,EAATA,gBAAS;EACTC,SAAS,EAATA,gBAAS;EACTC,QAAQ,EAARA,eAAQ;EACRC,cAAc,EAAdA,qBAAc;EACdC,cAAc,EAAdA,qBAAc;EACdC,UAAU,EAAVA,iBAAU;EACVC,SAAS,EAATA;AACF,CAAC;AAAC,IAAAC,QAAA,GAEaR,UAAU;AAAAS,OAAA,cAAAD,QAAA"}
+{"version":3,"file":"index.js","names":["_score","require","_trend","miniCharts","TrendLine","TrendArea","TrendBar","TrendHistogram","ScoreSemiDonut","ScoreDonut","ScoreLine","_default","exports"],"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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAME,UAQL,GAAG;EACFC,SAAS,EAATA,gBAAS;EACTC,SAAS,EAATA,gBAAS;EACTC,QAAQ,EAARA,eAAQ;EACRC,cAAc,EAAdA,qBAAc;EACdC,cAAc,EAAdA,qBAAc;EACdC,UAAU,EAAVA,iBAAU;EACVC,SAAS,EAATA;AACF,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEaT,UAAU","ignoreList":[]}

package/lib/cjs/utils/ScoreDonutUtils.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScoreDonutUtils = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var ScoreDonutUtils = exports.ScoreDonutUtils = /*#__PURE__*/function () {
+  function ScoreDonutUtils(value, isSemiDonut) {
+    (0, _classCallCheck2["default"])(this, ScoreDonutUtils);
+    (0, _defineProperty2["default"])(this, "isSemiDonut", void 0);
+    (0, _defineProperty2["default"])(this, "value", void 0);
+    (0, _defineProperty2["default"])(this, "radius", void 0);
+    this.isSemiDonut = isSemiDonut;
+    this.radius = isSemiDonut ? 9 : 10;
+    this.value = Math.max(Math.min(value, 100), 0);
+  }
+  return (0, _createClass2["default"])(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;
+    }
+  }]);
+}();
+//# sourceMappingURL=ScoreDonutUtils.js.map

package/lib/cjs/utils/ScoreDonutUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","exports","value","isSemiDonut","_classCallCheck2","_defineProperty2","radius","Math","max","min","_createClass2","key","get","PI","fullLength","valueLength","startMargin","endMargin","margin","point"],"sources":["../../../src/utils/ScoreDonutUtils.ts"],"sourcesContent":["export class ScoreDonutUtils {\n  private readonly isSemiDonut: boolean;\n  private readonly value: number;\n\n  public readonly radius: number;\n\n  constructor(value: number, isSemiDonut: boolean) {\n    this.isSemiDonut = isSemiDonut;\n    this.radius = isSemiDonut ? 9 : 10;\n    this.value = Math.max(Math.min(value, 100), 0);\n  }\n\n  public get viewBox() {\n    return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n  }\n\n  public get strokeWidth() {\n    return this.isSemiDonut ? 6 : 4;\n  }\n\n  public get fullLength() {\n    return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;\n  }\n\n  public get point() {\n    return this.isSemiDonut\n      ? this.fullLength / (100 / 3)\n      : this.fullLength / 100;\n  }\n\n  public get valueLength() {\n    return this.fullLength * (this.value / 100);\n  }\n\n  public get animatedValueLength() {\n    return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);\n  }\n\n  public get startMargin() {\n    let margin = 0;\n    if (this.value > 0) margin = this.point;\n    return margin;\n  }\n\n  public get endMargin() {\n    let margin = 0;\n    if (!this.isSemiDonut && this.value > 0) margin = this.point;\n    return margin;\n  }\n\n  public get baseOffset() {\n    return -1 * (this.valueLength + this.startMargin);\n  };\n\n  public get baseLength() {\n    return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);\n  }\n\n  public get animatedBaseLengthFrom() {\n    return this.fullLength - this.startMargin - this.endMargin;\n  }\n\n  public get animatedBaseLengthTo() {\n    return this.fullLength - this.valueLength - this.startMargin - this.endMargin;\n  }\n}\n"],"mappings":";;;;;;;;;;IAAaA,eAAe,GAAAC,OAAA,CAAAD,eAAA;EAM1B,SAAAA,gBAAYE,KAAa,EAAEC,WAAoB,EAAE;IAAA,IAAAC,gBAAA,mBAAAJ,eAAA;IAAA,IAAAK,gBAAA;IAAA,IAAAA,gBAAA;IAAA,IAAAA,gBAAA;IAC/C,IAAI,CAACF,WAAW,GAAGA,WAAW;IAC9B,IAAI,CAACG,MAAM,GAAGH,WAAW,GAAG,CAAC,GAAG,EAAE;IAClC,IAAI,CAACD,KAAK,GAAGK,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACP,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;EAChD;EAAC,WAAAQ,aAAA,aAAAV,eAAA;IAAAW,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAqB;MACnB,OAAO,IAAI,CAACT,WAAW,GAAG,WAAW,GAAG,WAAW;IACrD;EAAC;IAAAQ,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAyB;MACvB,OAAO,IAAI,CAACT,WAAW,GAAG,CAAC,GAAG,CAAC;IACjC;EAAC;IAAAQ,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAwB;MACtB,OAAO,IAAI,CAACT,WAAW,GAAGI,IAAI,CAACM,EAAE,GAAG,IAAI,CAACP,MAAM,GAAG,CAAC,GAAGC,IAAI,CAACM,EAAE,GAAG,IAAI,CAACP,MAAM;IAC7E;EAAC;IAAAK,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAmB;MACjB,OAAO,IAAI,CAACT,WAAW,GACnB,IAAI,CAACW,UAAU,IAAI,GAAG,GAAG,CAAC,CAAC,GAC3B,IAAI,CAACA,UAAU,GAAG,GAAG;IAC3B;EAAC;IAAAH,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAyB;MACvB,OAAO,IAAI,CAACE,UAAU,IAAI,IAAI,CAACZ,KAAK,GAAG,GAAG,CAAC;IAC7C;EAAC;IAAAS,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAiC;MAC/B,OAAOL,IAAI,CAACE,GAAG,CAAC,IAAI,CAACM,WAAW,EAAE,IAAI,CAACD,UAAU,GAAG,IAAI,CAACE,WAAW,GAAG,IAAI,CAACC,SAAS,CAAC;IACxF;EAAC;IAAAN,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAyB;MACvB,IAAIM,MAAM,GAAG,CAAC;MACd,IAAI,IAAI,CAAChB,KAAK,GAAG,CAAC,EAAEgB,MAAM,GAAG,IAAI,CAACC,KAAK;MACvC,OAAOD,MAAM;IACf;EAAC;IAAAP,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAuB;MACrB,IAAIM,MAAM,GAAG,CAAC;MACd,IAAI,CAAC,IAAI,CAACf,WAAW,IAAI,IAAI,CAACD,KAAK,GAAG,CAAC,EAAEgB,MAAM,GAAG,IAAI,CAACC,KAAK;MAC5D,OAAOD,MAAM;IACf;EAAC;IAAAP,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAwB;MACtB,OAAO,CAAC,CAAC,IAAI,IAAI,CAACG,WAAW,GAAG,IAAI,CAACC,WAAW,CAAC;IACnD;EAAC;IAAAL,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAwB;MACtB,OAAOL,IAAI,CAACC,GAAG,CAAC,IAAI,CAACM,UAAU,GAAG,IAAI,CAACC,WAAW,GAAG,IAAI,CAACC,WAAW,GAAG,IAAI,CAACC,SAAS,EAAE,CAAC,CAAC;IAC5F;EAAC;IAAAN,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAoC;MAClC,OAAO,IAAI,CAACE,UAAU,GAAG,IAAI,CAACE,WAAW,GAAG,IAAI,CAACC,SAAS;IAC5D;EAAC;IAAAN,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAkC;MAChC,OAAO,IAAI,CAACE,UAAU,GAAG,IAAI,CAACC,WAAW,GAAG,IAAI,CAACC,WAAW,GAAG,IAAI,CAACC,SAAS;IAC/E;EAAC;AAAA","ignoreList":[]}

package/lib/es6/component/score/Donut.js

@@ -1,38 +1,38 @@
 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 _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
+import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
+import { Box } from '@semcore/base-components';
+import { createComponent, Component, Root, sstyled, assignProps } from '@semcore/core';
+import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';
+import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
+import { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';
 import React from 'react';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
-import { assignProps } from '@semcore/core';
 /*!__reshadow-styles__:"./donut.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1clki{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1clki_gg_.__loading_1clki_gg_,.___SLineGauge_1clki_gg_.__loading_1clki_gg_,.___STrendBar_1clki_gg_.__loading_1clki_gg_,.___STrendLine_1clki_gg_.__loading_1clki_gg_{animation-name:pulse_1clki;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1clki_gg_.__semi_1clki_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1clki_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1clki_gg_.__animate_1clki_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"1clki_gg_"),
+var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_w54vj{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_w54vj_gg_.__loading_w54vj_gg_,.___SLineGauge_w54vj_gg_.__loading_w54vj_gg_,.___STrendBar_w54vj_gg_.__loading_w54vj_gg_,.___STrendLine_w54vj_gg_.__loading_w54vj_gg_{animation-name:pulse_w54vj;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_w54vj_gg_.__semi_w54vj_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_w54vj_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_w54vj_gg_.__animate_w54vj_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"w54vj_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_1clki_gg_",
-  "_loading": "__loading_1clki_gg_",
-  "__SDonutContainer": "___SDonutContainer_1clki_gg_",
-  "__STrendLine": "___STrendLine_1clki_gg_",
-  "__STrendBar": "___STrendBar_1clki_gg_",
-  "@pulse": "pulse_1clki",
-  "_animate": "__animate_1clki_gg_",
-  "_semi": "__semi_1clki_gg_"
+  "__SLineGauge": "___SLineGauge_w54vj_gg_",
+  "_loading": "__loading_w54vj_gg_",
+  "__SDonutContainer": "___SDonutContainer_w54vj_gg_",
+  "__STrendLine": "___STrendLine_w54vj_gg_",
+  "__STrendBar": "___STrendBar_w54vj_gg_",
+  "@pulse": "pulse_w54vj",
+  "_animate": "__animate_w54vj_gg_",
+  "_semi": "__semi_w54vj_gg_"
 });
-import { extractAriaProps } from '@semcore/utils/lib/ariaProps';
+import { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';
 var DonutRoot = /*#__PURE__*/function (_Component) {
-  _inherits(DonutRoot, _Component);
-  var _super = _createSuper(DonutRoot);
   function DonutRoot() {
     _classCallCheck(this, DonutRoot);
-    return _super.apply(this, arguments);
+    return _callSuper(this, DonutRoot, arguments);
   }
-  _createClass(DonutRoot, [{
+  _inherits(DonutRoot, _Component);
+  return _createClass(DonutRoot, [{
     key: "render",
     value: function render() {
       var _ref = this.asProps,
@@ -47,20 +47,10 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
         color = _this$asProps$color === void 0 ? 'chart-palette-order-1' : _this$asProps$color,
         resolveColor = _this$asProps.resolveColor,
         isSemiDonut = _this$asProps.isSemiDonut,
-        loading = _this$asProps.loading;
-      var strokeWidth = isSemiDonut ? 6 : 4;
-      var radius = isSemiDonut ? 9 : 10;
-      var baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;
-      var valueStrokeDasharray = baseStrokeDasharray * (value / 100);
-      var greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);
-      var offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;
-      var strokeDasharrayBetweenSpaces = "".concat(greyStrokeDasharray - 2 * offsetPoint, " ").concat(offsetPoint);
-      var spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 99 ? "".concat(strokeDasharrayBetweenSpaces) : '', " ").concat(baseStrokeDasharray);
-      if (isSemiDonut) {
-        spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 95 ? "".concat(strokeDasharrayBetweenSpaces) : '', " ").concat(baseStrokeDasharray);
-      }
-      var viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';
-      var strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));
+        loading = _this$asProps.loading,
+        animate = _this$asProps.animate,
+        duration = _this$asProps.duration;
+      var scoreDonut = new ScoreDonutUtils(value, isSemiDonut);
       var _extractAriaProps = extractAriaProps(this.asProps),
         __excludeProps = _extractAriaProps.__excludeProps,
         extractedAriaProps = _extractAriaProps.extractedAriaProps;
@@ -70,42 +60,51 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
       }, _ref))), /*#__PURE__*/React.createElement("svg", _ref2.cn("svg", _objectSpread({
         "width": '100%',
         "height": '100%',
-        "viewBox": viewBox,
+        "viewBox": scoreDonut.viewBox,
         "fill": 'none',
         "role": 'img'
       }, extractedAriaProps)), /*#__PURE__*/React.createElement("g", _ref2.cn("g", {}), /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
         "cx": '12',
         "cy": '12',
-        "r": radius,
-        "strokeWidth": strokeWidth,
+        "r": scoreDonut.radius,
+        "strokeWidth": scoreDonut.strokeWidth,
         "stroke": resolveColor(baseBgColor),
-        "strokeDasharray": loading ? undefined : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
-        "strokeDashoffset": strokeDashoffsetBase
-      })), !loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
-        "cx": '12',
-        "cy": '12',
-        "r": radius,
-        "strokeWidth": strokeWidth,
-        "stroke": resolveColor(color),
-        "strokeDasharray": "".concat(valueStrokeDasharray, " ").concat(baseStrokeDasharray),
-        "strokeDashoffset": valueStrokeDasharray
-      }), /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
+        "strokeDasharray": loading ? undefined : "".concat(scoreDonut.baseLength, " ").concat(scoreDonut.fullLength),
+        "strokeDashoffset": scoreDonut.baseOffset
+      }), animate && value > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
+        "attributeName": 'stroke-dasharray',
+        "from": "".concat(scoreDonut.animatedBaseLengthFrom, " ").concat(scoreDonut.fullLength),
+        "to": "".concat(scoreDonut.animatedBaseLengthTo, " ").concat(scoreDonut.fullLength),
+        "dur": duration + 'ms'
+      })), /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
         "attributeName": 'stroke-dashoffset',
-        "values": "0;".concat(valueStrokeDasharray)
-      }))), value !== 100 && !isSemiDonut && /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
+        "from": -1 * scoreDonut.startMargin,
+        "to": scoreDonut.baseOffset,
+        "dur": duration + 'ms'
+      })))), !loading && value > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
         "cx": '12',
         "cy": '12',
-        "r": radius,
-        "strokeWidth": strokeWidth,
-        "stroke": resolveColor('chart-grid-border'),
-        "strokeDasharray": spaceStrokeDasharray,
-        "strokeDashoffset": -1 * valueStrokeDasharray
-      }))))));
+        "r": scoreDonut.radius,
+        "strokeWidth": scoreDonut.strokeWidth,
+        "stroke": resolveColor(color),
+        "strokeDasharray": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength)
+      }), animate && /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
+        "attributeName": 'stroke-dasharray',
+        "from": "0 ".concat(scoreDonut.fullLength),
+        "to": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength),
+        "dur": duration + 'ms'
+      })))))));
     }
   }]);
-  return DonutRoot;
 }(Component);
-_defineProperty(DonutRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(DonutRoot, "enhance", [cssVariableEnhance({
+  variable: '--intergalactic-duration-extra-slow',
+  fallback: '500',
+  map: function map(v) {
+    return Number.parseInt(v, 10).toString();
+  },
+  prop: 'duration'
+}), resolveColorEnhance()]);
 _defineProperty(DonutRoot, "style", style);
 _defineProperty(DonutRoot, "defaultProps", {
   animate: true