@semcore/mini-chart 16.0.9 → 16.1.0-prerelease.3

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":["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":[]}

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

@@ -1,11 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/callSuper";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 import { Component } from '@semcore/core';
 import React from 'react';
 export var Trend = /*#__PURE__*/function (_Component) {

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","_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":[]}

package/lib/es6/utils/ScoreDonutUtils.js

@@ -9,14 +9,9 @@ export var ScoreDonutUtils = /*#__PURE__*/function () {
     _defineProperty(this, "radius", void 0);
     this.isSemiDonut = isSemiDonut;
     this.radius = isSemiDonut ? 9 : 10;
-    this.value = value;
+    this.value = Math.max(Math.min(value, 100), 0);
   }
   return _createClass(ScoreDonutUtils, [{
-    key: "hasDivider",
-    get: function get() {
-      return ![0, 100].includes(this.value);
-    }
-  }, {
     key: "viewBox",
     get: function get() {
       return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';
@@ -27,45 +22,58 @@ export var ScoreDonutUtils = /*#__PURE__*/function () {
       return this.isSemiDonut ? 6 : 4;
     }
   }, {
-    key: "baseStrokeDashArray",
+    key: "fullLength",
     get: function get() {
       return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
     }
   }, {
-    key: "valueStrokeDashArray",
+    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() {
-      return this.baseStrokeDashArray * (this.value / 100);
+      var margin = 0;
+      if (!this.isSemiDonut && this.value > 0) margin = this.point;
+      return margin;
     }
   }, {
-    key: "greyStrokeDashArray",
+    key: "baseOffset",
     get: function get() {
-      return this.baseStrokeDashArray - this.valueStrokeDashArray;
+      return -1 * (this.valueLength + this.startMargin);
     }
   }, {
-    key: "offsetPoint",
+    key: "baseLength",
     get: function get() {
-      return this.isSemiDonut ? this.baseStrokeDashArray / (100 / 3) : this.baseStrokeDashArray / 100;
+      return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);
     }
   }, {
-    key: "strokeDashArrayParts",
+    key: "animatedBaseLengthFrom",
     get: function get() {
-      var greyStroke = this.greyStrokeDashArray;
-      var offsetPoint = this.offsetPoint;
-      var greyStrokeDash = greyStroke - 2 * offsetPoint;
-      var strokeDashArrayBetweenSpaces = "".concat(greyStrokeDash, " ").concat(offsetPoint);
-      if (this.isSemiDonut) {
-        return "".concat(offsetPoint, " ").concat(this.value < 95 ? strokeDashArrayBetweenSpaces : '', " ").concat(this.baseStrokeDashArray);
-      }
-      return "".concat(offsetPoint, " ").concat(greyStrokeDash >= 0 ? strokeDashArrayBetweenSpaces : '', " ").concat(this.baseStrokeDashArray);
+      return this.fullLength - this.startMargin - this.endMargin;
     }
   }, {
-    key: "strokeDashOffsetBase",
+    key: "animatedBaseLengthTo",
     get: function get() {
-      var hasDivider = this.hasDivider;
-      if (!hasDivider) return 0;
-      var valueStroke = this.valueStrokeDashArray;
-      var offsetPoint = this.offsetPoint;
-      return -1 * (valueStroke + (this.isSemiDonut ? offsetPoint : 0));
+      return this.fullLength - this.valueLength - this.startMargin - this.endMargin;
     }
   }]);
 }();

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

@@ -1 +1 @@
-{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","value","isSemiDonut","_classCallCheck","_defineProperty","radius","_createClass","key","get","includes","Math","PI","baseStrokeDashArray","valueStrokeDashArray","greyStroke","greyStrokeDashArray","offsetPoint","greyStrokeDash","strokeDashArrayBetweenSpaces","concat","hasDivider","valueStroke"],"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 = value;\n  }\n\n  public get hasDivider() {\n    return ![0, 100].includes(this.value);\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 baseStrokeDashArray() {\n    return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;\n  }\n\n  public get valueStrokeDashArray() {\n    return this.baseStrokeDashArray * (this.value / 100);\n  }\n\n  public get greyStrokeDashArray() {\n    return this.baseStrokeDashArray - this.valueStrokeDashArray;\n  }\n\n  public get offsetPoint() {\n    return this.isSemiDonut ? this.baseStrokeDashArray / (100 / 3) : this.baseStrokeDashArray / 100;\n  }\n\n  public get strokeDashArrayParts() {\n    const greyStroke = this.greyStrokeDashArray;\n    const offsetPoint = this.offsetPoint;\n\n    const greyStrokeDash = greyStroke - 2 * offsetPoint;\n    const strokeDashArrayBetweenSpaces = `${greyStrokeDash} ${offsetPoint}`;\n\n    if (this.isSemiDonut) {\n      return `${offsetPoint} ${this.value < 95 ? strokeDashArrayBetweenSpaces : ''} ${this.baseStrokeDashArray}`;\n    }\n\n    return `${offsetPoint} ${greyStrokeDash >= 0 ? strokeDashArrayBetweenSpaces : ''} ${this.baseStrokeDashArray}`;\n  }\n\n  public get strokeDashOffsetBase() {\n    const hasDivider = this.hasDivider;\n\n    if (!hasDivider) return 0;\n\n    const valueStroke = this.valueStrokeDashArray;\n    const offsetPoint = this.offsetPoint;\n\n    return -1 * (valueStroke + (this.isSemiDonut ? offsetPoint : 0));\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","value","isSemiDonut","_classCallCheck","_defineProperty","radius","Math","max","min","_createClass","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":"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","ignoreList":[]}

package/lib/esm/component/score/Donut.mjs

@@ -1,38 +1,34 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps, Component } 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 { Box } from "@semcore/flex-box";
 import React from "react";
 import { ScoreDonutUtils } from "../../utils/ScoreDonutUtils.mjs";
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 /*!__reshadow-styles__:"./donut.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_14jjd{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_14jjd_gg_.__loading_14jjd_gg_,.___SLineGauge_14jjd_gg_.__loading_14jjd_gg_,.___STrendBar_14jjd_gg_.__loading_14jjd_gg_,.___STrendLine_14jjd_gg_.__loading_14jjd_gg_{animation-name:pulse_14jjd;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_14jjd_gg_.__semi_14jjd_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_14jjd_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_14jjd_gg_.__animate_14jjd_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
+    "@keyframes pulse_19y2a{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_19y2a_gg_.__loading_19y2a_gg_,.___SLineGauge_19y2a_gg_.__loading_19y2a_gg_,.___STrendBar_19y2a_gg_.__loading_19y2a_gg_,.___STrendLine_19y2a_gg_.__loading_19y2a_gg_{animation-name:pulse_19y2a;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_19y2a_gg_.__semi_19y2a_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_19y2a_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_19y2a_gg_.__animate_19y2a_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
     /*__inner_css_end__*/
-    "14jjd_gg_"
+    "19y2a_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_14jjd_gg_",
-    "_loading": "__loading_14jjd_gg_",
-    "__SDonutContainer": "___SDonutContainer_14jjd_gg_",
-    "__STrendLine": "___STrendLine_14jjd_gg_",
-    "__STrendBar": "___STrendBar_14jjd_gg_",
-    "@pulse": "pulse_14jjd",
-    "_animate": "__animate_14jjd_gg_",
-    "_semi": "__semi_14jjd_gg_"
+    "__SLineGauge": "___SLineGauge_19y2a_gg_",
+    "_loading": "__loading_19y2a_gg_",
+    "__SDonutContainer": "___SDonutContainer_19y2a_gg_",
+    "__STrendLine": "___STrendLine_19y2a_gg_",
+    "__STrendBar": "___STrendBar_19y2a_gg_",
+    "@pulse": "pulse_19y2a",
+    "_animate": "__animate_19y2a_gg_",
+    "_semi": "__semi_19y2a_gg_"
   })
 );
 var DonutRoot = /* @__PURE__ */ function(_Component) {
@@ -46,7 +42,7 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
     value: function render() {
       var _ref = this.asProps, _ref2;
       var SDonutContainer = Box;
-      var _this$asProps = this.asProps, value = _this$asProps.value, styles = _this$asProps.styles, _this$asProps$baseBgC = _this$asProps.baseBgColor, baseBgColor = _this$asProps$baseBgC === void 0 ? "chart-grid-bar-chart-base-bg" : _this$asProps$baseBgC, _this$asProps$color = _this$asProps.color, 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 _this$asProps = this.asProps, value = _this$asProps.value, styles = _this$asProps.styles, _this$asProps$baseBgC = _this$asProps.baseBgColor, baseBgColor = _this$asProps$baseBgC === void 0 ? "chart-grid-bar-chart-base-bg" : _this$asProps$baseBgC, _this$asProps$color = _this$asProps.color, 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, 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;
       return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, assignProps({
@@ -64,32 +60,42 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
         "r": scoreDonut.radius,
         "strokeWidth": scoreDonut.strokeWidth,
         "stroke": resolveColor(baseBgColor),
-        "strokeDasharray": loading ? void 0 : "".concat(scoreDonut.greyStrokeDashArray, " ").concat(scoreDonut.baseStrokeDashArray),
-        "strokeDashoffset": scoreDonut.strokeDashOffsetBase
-      })), !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
-        "cx": "12",
-        "cy": "12",
-        "r": scoreDonut.radius,
-        "strokeWidth": scoreDonut.strokeWidth,
-        "stroke": resolveColor(color),
-        "strokeDasharray": "".concat(scoreDonut.valueStrokeDashArray, " ").concat(scoreDonut.baseStrokeDashArray),
-        "strokeDashoffset": scoreDonut.valueStrokeDashArray
-      }), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
+        "strokeDasharray": loading ? void 0 : "".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(scoreDonut.valueStrokeDashArray)
-      }))), scoreDonut.hasDivider && !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": scoreDonut.radius,
         "strokeWidth": scoreDonut.strokeWidth,
-        "stroke": resolveColor("chart-grid-border"),
-        "strokeDasharray": scoreDonut.strokeDashArrayParts,
-        "strokeDashoffset": -1 * scoreDonut.valueStrokeDashArray
-      }))))));
+        "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"
+      })))))));
     }
   }]);
 }(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

package/lib/esm/component/score/Line.mjs

@@ -1,45 +1,40 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
 import { Box, Flex } from "@semcore/flex-box";
 import React from "react";
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 /*!__reshadow-styles__:"./line.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_57xz9{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_57xz9{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_57xz9_gg_.__loading_57xz9_gg_,.___SLineGauge_57xz9_gg_.__loading_57xz9_gg_,.___STrendBar_57xz9_gg_.__loading_57xz9_gg_,.___STrendLine_57xz9_gg_.__loading_57xz9_gg_{animation-name:pulse_57xz9;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_57xz9_gg_{height:8px;background-color:var(--base-bg-color_57xz9, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_57xz9_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_57xz9_gg_.__percent_57xz9_gg_{width:var(--percent_57xz9)}.___SLineSegmentItem_57xz9_gg_.__color_57xz9_gg_,.___SLineValue_57xz9_gg_.__color_57xz9_gg_{background-color:var(--color_57xz9, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_57xz9_gg_.__segments_57xz9_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_57xz9_gg_,.___SLineGaugeSegment_57xz9_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_57xz9_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_57xz9_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_57xz9_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_57xz9;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
+    "@keyframes pulse_1tspb{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1tspb{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1tspb_gg_.__loading_1tspb_gg_,.___SLineGauge_1tspb_gg_.__loading_1tspb_gg_,.___STrendBar_1tspb_gg_.__loading_1tspb_gg_,.___STrendLine_1tspb_gg_.__loading_1tspb_gg_{animation-name:pulse_1tspb;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1tspb_gg_{height:8px;background-color:var(--base-bg-color_1tspb, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1tspb_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1tspb_gg_.__percent_1tspb_gg_{width:var(--percent_1tspb)}.___SLineSegmentItem_1tspb_gg_.__color_1tspb_gg_,.___SLineValue_1tspb_gg_.__color_1tspb_gg_{background-color:var(--color_1tspb, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1tspb_gg_.__segments_1tspb_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1tspb_gg_,.___SLineGaugeSegment_1tspb_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1tspb_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1tspb_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_1tspb_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_1tspb;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
     /*__inner_css_end__*/
-    "57xz9_gg_"
+    "1tspb_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_57xz9_gg_",
-    "_loading": "__loading_57xz9_gg_",
-    "__SDonutContainer": "___SDonutContainer_57xz9_gg_",
-    "__STrendLine": "___STrendLine_57xz9_gg_",
-    "__STrendBar": "___STrendBar_57xz9_gg_",
-    "@pulse": "pulse_57xz9",
-    "--base-bg-color": "--base-bg-color_57xz9",
-    "__SLineValue": "___SLineValue_57xz9_gg_",
-    "_percent": "__percent_57xz9_gg_",
-    "--percent": "--percent_57xz9",
-    "_color": "__color_57xz9_gg_",
-    "__SLineSegmentItem": "___SLineSegmentItem_57xz9_gg_",
-    "--color": "--color_57xz9",
-    "_segments": "__segments_57xz9_gg_",
-    "__SLineGaugeSegment": "___SLineGaugeSegment_57xz9_gg_",
-    "__SAnimationLine": "___SAnimationLine_57xz9_gg_",
-    "@move-line": "move-line_57xz9"
+    "__SLineGauge": "___SLineGauge_1tspb_gg_",
+    "_loading": "__loading_1tspb_gg_",
+    "__SDonutContainer": "___SDonutContainer_1tspb_gg_",
+    "__STrendLine": "___STrendLine_1tspb_gg_",
+    "__STrendBar": "___STrendBar_1tspb_gg_",
+    "@pulse": "pulse_1tspb",
+    "--base-bg-color": "--base-bg-color_1tspb",
+    "__SLineValue": "___SLineValue_1tspb_gg_",
+    "_percent": "__percent_1tspb_gg_",
+    "--percent": "--percent_1tspb",
+    "_color": "__color_1tspb_gg_",
+    "__SLineSegmentItem": "___SLineSegmentItem_1tspb_gg_",
+    "--color": "--color_1tspb",
+    "_segments": "__segments_1tspb_gg_",
+    "__SLineGaugeSegment": "___SLineGaugeSegment_1tspb_gg_",
+    "__SAnimationLine": "___SAnimationLine_1tspb_gg_",
+    "@move-line": "move-line_1tspb"
   })
 );
 var LineRoot = /* @__PURE__ */ function(_Component) {

package/lib/esm/component/trend/Bar.mjs

@@ -2,9 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, assignProps, sstyled } from "@semcore/core";
@@ -13,25 +11,22 @@ import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEn
 import { Box } from "@semcore/flex-box";
 import React from "react";
 import { Trend } from "./Trend.mjs";
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1d47w{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1d47w_gg_.__loading_1d47w_gg_,.___SLineGauge_1d47w_gg_.__loading_1d47w_gg_,.___STrendBar_1d47w_gg_.__loading_1d47w_gg_,.___STrendLine_1d47w_gg_.__loading_1d47w_gg_{animation-name:pulse_1d47w;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1rcp7{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1rcp7_gg_.__loading_1rcp7_gg_,.___SLineGauge_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendBar_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendLine_1rcp7_gg_.__loading_1rcp7_gg_{animation-name:pulse_1rcp7;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1d47w_gg_"
+    "1rcp7_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1d47w_gg_",
-    "_loading": "__loading_1d47w_gg_",
-    "__SDonutContainer": "___SDonutContainer_1d47w_gg_",
-    "__STrendLine": "___STrendLine_1d47w_gg_",
-    "__STrendBar": "___STrendBar_1d47w_gg_",
-    "@pulse": "pulse_1d47w"
+    "__SLineGauge": "___SLineGauge_1rcp7_gg_",
+    "_loading": "__loading_1rcp7_gg_",
+    "__SDonutContainer": "___SDonutContainer_1rcp7_gg_",
+    "__STrendLine": "___STrendLine_1rcp7_gg_",
+    "__STrendBar": "___STrendBar_1rcp7_gg_",
+    "@pulse": "pulse_1rcp7"
   })
 );
 var TrendBarRoot = /* @__PURE__ */ function(_Trend) {

package/lib/esm/component/trend/Line.mjs

@@ -2,9 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, assignProps, sstyled } from "@semcore/core";
@@ -14,25 +12,22 @@ import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { Box } from "@semcore/flex-box";
 import React from "react";
 import { Trend } from "./Trend.mjs";
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1d47w{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1d47w_gg_.__loading_1d47w_gg_,.___SLineGauge_1d47w_gg_.__loading_1d47w_gg_,.___STrendBar_1d47w_gg_.__loading_1d47w_gg_,.___STrendLine_1d47w_gg_.__loading_1d47w_gg_{animation-name:pulse_1d47w;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1rcp7{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1rcp7_gg_.__loading_1rcp7_gg_,.___SLineGauge_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendBar_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendLine_1rcp7_gg_.__loading_1rcp7_gg_{animation-name:pulse_1rcp7;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1d47w_gg_"
+    "1rcp7_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1d47w_gg_",
-    "_loading": "__loading_1d47w_gg_",
-    "__SDonutContainer": "___SDonutContainer_1d47w_gg_",
-    "__STrendLine": "___STrendLine_1d47w_gg_",
-    "__STrendBar": "___STrendBar_1d47w_gg_",
-    "@pulse": "pulse_1d47w"
+    "__SLineGauge": "___SLineGauge_1rcp7_gg_",
+    "_loading": "__loading_1rcp7_gg_",
+    "__SDonutContainer": "___SDonutContainer_1rcp7_gg_",
+    "__STrendLine": "___STrendLine_1rcp7_gg_",
+    "__STrendBar": "___STrendBar_1rcp7_gg_",
+    "@pulse": "pulse_1rcp7"
   })
 );
 var TrendLineRoot = /* @__PURE__ */ function(_Trend) {

package/lib/esm/component/trend/Trend.mjs

@@ -1,15 +1,10 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Component } from "@semcore/core";
 import React from "react";
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 var Trend = /* @__PURE__ */ function(_Component) {
   function Trend2() {
     var _this;