@semcore/mini-chart 0.25.0 → 0.25.1-prerelease.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [0.25.1] - 2024-11-01
+
+### Added
+
+- `baseBgColor` option to specify pass second color as background for TrendLine and ScoreDonut
+
 ## [0.25.0] - 2024-11-01
 
 ### Changed

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

@@ -18,15 +18,15 @@ var _react = _interopRequireDefault(require("react"));
 var _flexBox = require("@semcore/flex-box");
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
 /*__reshadow-styles__:"./donut.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1mtz1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1mtz1_gg_.__loading_1mtz1_gg_,.___SLineGauge_1mtz1_gg_.__loading_1mtz1_gg_,.___STrendBar_1mtz1_gg_.__loading_1mtz1_gg_,.___STrendLine_1mtz1_gg_.__loading_1mtz1_gg_{animation-name:pulse_1mtz1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1mtz1_gg_.__semi_1mtz1_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1mtz1_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1mtz1_gg_.__animate_1mtz1_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "1mtz1_gg_") /*__reshadow_css_end__*/, {
-  "__SLineGauge": "___SLineGauge_1mtz1_gg_",
-  "_loading": "__loading_1mtz1_gg_",
-  "__SDonutContainer": "___SDonutContainer_1mtz1_gg_",
-  "__STrendLine": "___STrendLine_1mtz1_gg_",
-  "__STrendBar": "___STrendBar_1mtz1_gg_",
-  "@pulse": "pulse_1mtz1",
-  "_animate": "__animate_1mtz1_gg_",
-  "_semi": "__semi_1mtz1_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_18pi1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_18pi1_gg_.__loading_18pi1_gg_,.___SLineGauge_18pi1_gg_.__loading_18pi1_gg_,.___STrendBar_18pi1_gg_.__loading_18pi1_gg_,.___STrendLine_18pi1_gg_.__loading_18pi1_gg_{animation-name:pulse_18pi1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_18pi1_gg_.__semi_18pi1_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_18pi1_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_18pi1_gg_.__animate_18pi1_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "18pi1_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_18pi1_gg_",
+  "_loading": "__loading_18pi1_gg_",
+  "__SDonutContainer": "___SDonutContainer_18pi1_gg_",
+  "__STrendLine": "___STrendLine_18pi1_gg_",
+  "__STrendBar": "___STrendBar_18pi1_gg_",
+  "@pulse": "pulse_18pi1",
+  "_animate": "__animate_18pi1_gg_",
+  "_semi": "__semi_18pi1_gg_"
 });
 var DonutRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(DonutRoot, _Component);
@@ -44,6 +44,8 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
       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,
@@ -73,7 +75,7 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
         "cy": '12',
         "r": radius,
         "strokeWidth": strokeWidth,
-        "stroke": resolveColor('chart-grid-bar-chart-base-bg'),
+        "stroke": resolveColor(baseBgColor),
         "strokeDasharray": loading ? undefined : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
         "strokeDashoffset": -1 * valueStrokeDasharray
       })), !loading && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {

package/lib/cjs/component/score/Donut.js.map

@@ -1 +1 @@
-{"version":3,"file":"Donut.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_resolveColorEnhance","style","_index","sstyled","insert","DonutRoot","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","render","_ref","asProps","_ref2","SDonutContainer","Box","_this$asProps","styles","_this$asProps$color","color","resolveColor","isSemiDonut","loading","strokeWidth","radius","baseStrokeDasharray","Math","PI","valueStrokeDasharray","greyStrokeDasharray","offsetPoint","strokeDasharrayBetweenSpaces","concat","spaceStrokeDasharray","viewBox","createElement","cn","_objectSpread2","assignProps","undefined","Fragment","Component","_defineProperty2","resolveColorEnhance","animate","ScoreDonut","createComponent","exports","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, ComponentType } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { assignProps } from '@semcore/core';\nimport { CommonScoreProps } from './Score';\n\nimport style from './donut.shadow.css';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n    } = this.asProps;\n\n    const strokeWidth = isSemiDonut ? 6 : 4;\n    const radius = isSemiDonut ? 9 : 10;\n    const baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;\n    const valueStrokeDasharray = baseStrokeDasharray * (value / 100);\n    const greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);\n    const offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;\n\n    const strokeDasharrayBetweenSpaces = `${greyStrokeDasharray - 2 * offsetPoint} ${offsetPoint}`;\n\n    let spaceStrokeDasharray = `${offsetPoint} ${\n      value < 99 ? `${strokeDasharrayBetweenSpaces}` : ''\n    } ${baseStrokeDasharray}`;\n\n    if (isSemiDonut) {\n      spaceStrokeDasharray = `${offsetPoint} ${\n        value < 95 ? `${strokeDasharrayBetweenSpaces}` : ''\n      } ${baseStrokeDasharray}`;\n    }\n\n    const viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut}>\n        <svg width='100%' height='100%' viewBox={viewBox} fill='none'>\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={radius}\n              strokeWidth={strokeWidth}\n              stroke={resolveColor('chart-grid-bar-chart-base-bg')}\n              strokeDasharray={\n                loading ? undefined : `${greyStrokeDasharray} ${baseStrokeDasharray}`\n              }\n              strokeDashoffset={-1 * valueStrokeDasharray}\n            />\n            {!loading && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={radius}\n                  strokeWidth={strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${valueStrokeDasharray} ${baseStrokeDasharray}`}\n                  strokeDashoffset={valueStrokeDasharray}\n                >\n                  <animate\n                    attributeName={'stroke-dashoffset'}\n                    values={`0;${valueStrokeDasharray}`}\n                  />\n                </circle>\n                {value !== 100 && (\n                  <circle\n                    cx='12'\n                    cy='12'\n                    r={radius}\n                    strokeWidth={strokeWidth}\n                    stroke={resolveColor('chart-grid-border')}\n                    strokeDasharray={spaceStrokeDasharray}\n                    strokeDashoffset={-1 * valueStrokeDasharray}\n                  />\n                )}\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\nexport const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> =\n  createComponent(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> = createComponent(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: ScoreDonutProps) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":";;;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAkF;AAAA,IAAAK,KAAA,+BAAAC,MAAA,CAAAC,OAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAa5EC,SAAS,0BAAAC,UAAA;EAAA,IAAAC,UAAA,aAAAF,SAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,OAAAC,aAAA,aAAAJ,SAAA;EAAA,SAAAA,UAAA;IAAA,IAAAK,gBAAA,mBAAAL,SAAA;IAAA,OAAAG,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAA,IAAAC,aAAA,aAAAR,SAAA;IAAAS,GAAA;IAAAC,KAAA,EASb,SAAAC,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,eAAe,GAgCMC,YAAG;MA/B9B,IAAAC,aAAA,GAOI,IAAI,CAACJ,OAAO;QANdH,KAAK,GAAAO,aAAA,CAALP,KAAK;QACLQ,MAAM,GAAAD,aAAA,CAANC,MAAM;QAAAC,mBAAA,GAAAF,aAAA,CACNG,KAAK;QAALA,KAAK,GAAAD,mBAAA,cAAG,uBAAuB,GAAAA,mBAAA;QAC/BE,YAAY,GAAAJ,aAAA,CAAZI,YAAY;QACZC,WAAW,GAAAL,aAAA,CAAXK,WAAW;QACXC,OAAO,GAAAN,aAAA,CAAPM,OAAO;MAGT,IAAMC,WAAW,GAAGF,WAAW,GAAG,CAAC,GAAG,CAAC;MACvC,IAAMG,MAAM,GAAGH,WAAW,GAAG,CAAC,GAAG,EAAE;MACnC,IAAMI,mBAAmB,GAAGJ,WAAW,GAAGK,IAAI,CAACC,EAAE,GAAGH,MAAM,GAAGE,IAAI,CAACC,EAAE,GAAG,CAAC,GAAGH,MAAM;MACjF,IAAMI,oBAAoB,GAAGH,mBAAmB,IAAIhB,KAAK,GAAG,GAAG,CAAC;MAChE,IAAMoB,mBAAmB,GAAGJ,mBAAmB,IAAI,CAAC,GAAG,GAAGhB,KAAK,IAAI,GAAG,CAAC;MACvE,IAAMqB,WAAW,GAAGT,WAAW,GAAGI,mBAAmB,IAAI,GAAG,GAAG,CAAC,CAAC,GAAGA,mBAAmB,GAAG,GAAG;MAE7F,IAAMM,4BAA4B,MAAAC,MAAA,CAAMH,mBAAmB,GAAG,CAAC,GAAGC,WAAW,OAAAE,MAAA,CAAIF,WAAW,CAAE;MAE9F,IAAIG,oBAAoB,MAAAD,MAAA,CAAMF,WAAW,OAAAE,MAAA,CACvCvB,KAAK,GAAG,EAAE,MAAAuB,MAAA,CAAMD,4BAA4B,IAAK,EAAE,OAAAC,MAAA,CACjDP,mBAAmB,CAAE;MAEzB,IAAIJ,WAAW,EAAE;QACfY,oBAAoB,MAAAD,MAAA,CAAMF,WAAW,OAAAE,MAAA,CACnCvB,KAAK,GAAG,EAAE,MAAAuB,MAAA,CAAMD,4BAA4B,IAAK,EAAE,OAAAC,MAAA,CACjDP,mBAAmB,CAAE;MAC3B;MAEA,IAAMS,OAAO,GAAGb,WAAW,GAAG,WAAW,GAAG,WAAW;MAEvD,OAAAR,KAAA,GAAO,IAAAhB,aAAO,EAACoB,MAAM,CAAC,eACpB1B,MAAA,YAAA4C,aAAA,CAACrB,eAAe,EAAAD,KAAA,CAAAuB,EAAA,wBAAAC,cAAA,qBAAAjD,KAAA,CAAAkD,WAAA;QAAA,QAAoBjB;MAAW,GAAAV,IAAA,kBAC7CpB,MAAA,YAAA4C,aAAA,QAAAtB,KAAA,CAAAuB,EAAA;QAAA,SAAW,MAAM;QAAA,UAAQ,MAAM;QAAA,WAAUF,OAAO;QAAA,QAAO;MAAM,iBAC3D3C,MAAA,YAAA4C,aAAA,MAAAtB,KAAA,CAAAuB,EAAA,wBACE7C,MAAA,YAAA4C,aAAA,WAAAtB,KAAA,CAAAuB,EAAA;QAAA,MACK,IAAI;QAAA,MACJ,IAAI;QAAA,KACJZ,MAAM;QAAA,eACID,WAAW;QAAA,UAChBH,YAAY,CAAC,8BAA8B,CAAC;QAAA,mBAElDE,OAAO,GAAGiB,SAAS,MAAAP,MAAA,CAAMH,mBAAmB,OAAAG,MAAA,CAAIP,mBAAmB,CAAE;QAAA,oBAErD,CAAC,CAAC,GAAGG;MAAoB,GAC3C,EACD,CAACN,OAAO,iBACP/B,MAAA,YAAA4C,aAAA,CAAA5C,MAAA,YAAAiD,QAAA,qBACEjD,MAAA,YAAA4C,aAAA,WAAAtB,KAAA,CAAAuB,EAAA;QAAA,MACK,IAAI;QAAA,MACJ,IAAI;QAAA,KACJZ,MAAM;QAAA,eACID,WAAW;QAAA,UAChBH,YAAY,CAACD,KAAK,CAAC;QAAA,sBAAAa,MAAA,CACPJ,oBAAoB,OAAAI,MAAA,CAAIP,mBAAmB;QAAA,oBAC7CG;MAAoB,iBAEtCrC,MAAA,YAAA4C,aAAA,YAAAtB,KAAA,CAAAuB,EAAA;QAAA,iBACiB,mBAAmB;QAAA,eAAAJ,MAAA,CACrBJ,oBAAoB;MAAA,GACjC,CACK,EACRnB,KAAK,KAAK,GAAG,iBACZlB,MAAA,YAAA4C,aAAA,WAAAtB,KAAA,CAAAuB,EAAA;QAAA,MACK,IAAI;QAAA,MACJ,IAAI;QAAA,KACJZ,MAAM;QAAA,eACID,WAAW;QAAA,UAChBH,YAAY,CAAC,mBAAmB,CAAC;QAAA,mBACxBa,oBAAoB;QAAA,oBACnB,CAAC,CAAC,GAAGL;MAAoB,GAE9C,CAEJ,CACC,CACA,CACU;IAEtB;EAAC;EAAA,OAAA7B,SAAA;AAAA,EAzFqB0C,eAAS;AAAA,IAAAC,gBAAA,aAA3B3C,SAAS,aACI,CAAC,IAAA4C,+BAAmB,GAAE,CAAC;AAAA,IAAAD,gBAAA,aADpC3C,SAAS,WAGEJ,KAAK;AAAA,IAAA+C,gBAAA,aAHhB3C,SAAS,kBAKS;EACpB6C,OAAO,EAAE;AACX,CAAC;AAqFI,IAAMC,UAA4D,GACvE,IAAAC,gBAAe,EAAC/C,SAAS,CAAC;AAACgD,OAAA,CAAAF,UAAA,GAAAA,UAAA;AAE7BA,UAAU,CAACG,WAAW,GAAG,sBAAsB;AAExC,IAAMC,cAAgE,GAAG,IAAAH,gBAAe,EAC7F/C,SAAS,EACT,CAAC,CAAC,EACF;EACEmD,YAAY,EAAE,CACZ,YAAM;IACJ,OAAO;MACLC,YAAY,EAAE,SAAAA,aAACC,KAAsB,EAAK;QACxC,OAAO,IAAAd,iBAAW,EAACc,KAAK,EAAE;UAAE/B,WAAW,EAAE;QAAK,CAAC,CAAC;MAClD;IACF,CAAC;EACH,CAAC;AAEL,CAAC,CACF;AAAC0B,OAAA,CAAAE,cAAA,GAAAA,cAAA;AAEFA,cAAc,CAACD,WAAW,GAAG,0BAA0B"}
+{"version":3,"file":"Donut.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_resolveColorEnhance","style","_index","sstyled","insert","DonutRoot","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","render","_ref","asProps","_ref2","SDonutContainer","Box","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","strokeWidth","radius","baseStrokeDasharray","Math","PI","valueStrokeDasharray","greyStrokeDasharray","offsetPoint","strokeDasharrayBetweenSpaces","concat","spaceStrokeDasharray","viewBox","createElement","cn","_objectSpread2","assignProps","undefined","Fragment","Component","_defineProperty2","resolveColorEnhance","animate","ScoreDonut","createComponent","exports","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, ComponentType } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { assignProps } from '@semcore/core';\nimport { CommonScoreProps } from './Score';\n\nimport style from './donut.shadow.css';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      baseBgColor = 'chart-grid-bar-chart-base-bg',\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n    } = this.asProps;\n\n    const strokeWidth = isSemiDonut ? 6 : 4;\n    const radius = isSemiDonut ? 9 : 10;\n    const baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;\n    const valueStrokeDasharray = baseStrokeDasharray * (value / 100);\n    const greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);\n    const offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;\n\n    const strokeDasharrayBetweenSpaces = `${greyStrokeDasharray - 2 * offsetPoint} ${offsetPoint}`;\n\n    let spaceStrokeDasharray = `${offsetPoint} ${\n      value < 99 ? `${strokeDasharrayBetweenSpaces}` : ''\n    } ${baseStrokeDasharray}`;\n\n    if (isSemiDonut) {\n      spaceStrokeDasharray = `${offsetPoint} ${\n        value < 95 ? `${strokeDasharrayBetweenSpaces}` : ''\n      } ${baseStrokeDasharray}`;\n    }\n\n    const viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut}>\n        <svg width='100%' height='100%' viewBox={viewBox} fill='none'>\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={radius}\n              strokeWidth={strokeWidth}\n              stroke={resolveColor(baseBgColor)}\n              strokeDasharray={\n                loading ? undefined : `${greyStrokeDasharray} ${baseStrokeDasharray}`\n              }\n              strokeDashoffset={-1 * valueStrokeDasharray}\n            />\n            {!loading && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={radius}\n                  strokeWidth={strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${valueStrokeDasharray} ${baseStrokeDasharray}`}\n                  strokeDashoffset={valueStrokeDasharray}\n                >\n                  <animate\n                    attributeName={'stroke-dashoffset'}\n                    values={`0;${valueStrokeDasharray}`}\n                  />\n                </circle>\n                {value !== 100 && (\n                  <circle\n                    cx='12'\n                    cy='12'\n                    r={radius}\n                    strokeWidth={strokeWidth}\n                    stroke={resolveColor('chart-grid-border')}\n                    strokeDasharray={spaceStrokeDasharray}\n                    strokeDashoffset={-1 * valueStrokeDasharray}\n                  />\n                )}\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\nexport const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> =\n  createComponent(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> = createComponent(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: ScoreDonutProps) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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"}

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

@@ -18,23 +18,24 @@ var _react = _interopRequireDefault(require("react"));
 var _flexBox = require("@semcore/flex-box");
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
 /*__reshadow-styles__:"./line.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1dnvw{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1dnvw{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1dnvw_gg_.__loading_1dnvw_gg_,.___SLineGauge_1dnvw_gg_.__loading_1dnvw_gg_,.___STrendBar_1dnvw_gg_.__loading_1dnvw_gg_,.___STrendLine_1dnvw_gg_.__loading_1dnvw_gg_{animation-name:pulse_1dnvw;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1dnvw_gg_{height:8px;background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1dnvw_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1dnvw_gg_.__percent_1dnvw_gg_{width:var(--percent_1dnvw)}.___SLineSegmentItem_1dnvw_gg_.__color_1dnvw_gg_,.___SLineValue_1dnvw_gg_.__color_1dnvw_gg_{background-color:var(--color_1dnvw, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1dnvw_gg_.__segments_1dnvw_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1dnvw_gg_,.___SLineGaugeSegment_1dnvw_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1dnvw_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1dnvw_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_1dnvw_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_1dnvw;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "1dnvw_gg_") /*__reshadow_css_end__*/, {
-  "__SLineGauge": "___SLineGauge_1dnvw_gg_",
-  "_loading": "__loading_1dnvw_gg_",
-  "__SDonutContainer": "___SDonutContainer_1dnvw_gg_",
-  "__STrendLine": "___STrendLine_1dnvw_gg_",
-  "__STrendBar": "___STrendBar_1dnvw_gg_",
-  "@pulse": "pulse_1dnvw",
-  "__SLineValue": "___SLineValue_1dnvw_gg_",
-  "_percent": "__percent_1dnvw_gg_",
-  "--percent": "--percent_1dnvw",
-  "_color": "__color_1dnvw_gg_",
-  "__SLineSegmentItem": "___SLineSegmentItem_1dnvw_gg_",
-  "--color": "--color_1dnvw",
-  "_segments": "__segments_1dnvw_gg_",
-  "__SLineGaugeSegment": "___SLineGaugeSegment_1dnvw_gg_",
-  "__SAnimationLine": "___SAnimationLine_1dnvw_gg_",
-  "@move-line": "move-line_1dnvw"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_8l49g{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_8l49g{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_8l49g_gg_.__loading_8l49g_gg_,.___SLineGauge_8l49g_gg_.__loading_8l49g_gg_,.___STrendBar_8l49g_gg_.__loading_8l49g_gg_,.___STrendLine_8l49g_gg_.__loading_8l49g_gg_{animation-name:pulse_8l49g;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_8l49g_gg_{height:8px;background-color:var(--base-bg-color_8l49g, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_8l49g_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_8l49g_gg_.__percent_8l49g_gg_{width:var(--percent_8l49g)}.___SLineSegmentItem_8l49g_gg_.__color_8l49g_gg_,.___SLineValue_8l49g_gg_.__color_8l49g_gg_{background-color:var(--color_8l49g, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_8l49g_gg_.__segments_8l49g_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_8l49g_gg_,.___SLineGaugeSegment_8l49g_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_8l49g_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_8l49g_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_8l49g_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_8l49g;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "8l49g_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_8l49g_gg_",
+  "_loading": "__loading_8l49g_gg_",
+  "__SDonutContainer": "___SDonutContainer_8l49g_gg_",
+  "__STrendLine": "___STrendLine_8l49g_gg_",
+  "__STrendBar": "___STrendBar_8l49g_gg_",
+  "@pulse": "pulse_8l49g",
+  "--base-bg-color": "--base-bg-color_8l49g",
+  "__SLineValue": "___SLineValue_8l49g_gg_",
+  "_percent": "__percent_8l49g_gg_",
+  "--percent": "--percent_8l49g",
+  "_color": "__color_8l49g_gg_",
+  "__SLineSegmentItem": "___SLineSegmentItem_8l49g_gg_",
+  "--color": "--color_8l49g",
+  "_segments": "__segments_8l49g_gg_",
+  "__SLineGaugeSegment": "___SLineGaugeSegment_8l49g_gg_",
+  "__SAnimationLine": "___SAnimationLine_8l49g_gg_",
+  "@move-line": "move-line_8l49g"
 });
 var LineRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(LineRoot, _Component);
@@ -76,6 +77,7 @@ var LineRoot = /*#__PURE__*/function (_Component) {
         styles = _this$asProps2.styles,
         _this$asProps2$color = _this$asProps2.color,
         color = _this$asProps2$color === void 0 ? 'chart-palette-order-1' : _this$asProps2$color,
+        baseBgColor = _this$asProps2.baseBgColor,
         resolveColor = _this$asProps2.resolveColor,
         loading = _this$asProps2.loading,
         children = _this$asProps2.children,
@@ -84,7 +86,8 @@ var LineRoot = /*#__PURE__*/function (_Component) {
       if (children !== undefined) {
         var _ref3;
         return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLineGauge, _ref3.cn("SLineGauge", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-          "segments": true
+          "segments": true,
+          "base-bg-color": resolveColor(baseBgColor)
         }, _ref))), /*#__PURE__*/_react["default"].createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {}))), animate && /*#__PURE__*/_react["default"].createElement(SAnimationLine, _ref3.cn("SAnimationLine", {})));
       }
       var segments = this.asProps.segments;
@@ -104,7 +107,9 @@ var LineRoot = /*#__PURE__*/function (_Component) {
       if (segments) {
         percent = "".concat(value / segments * 100, "%");
       }
-      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLineGauge, _ref5.cn("SLineGauge", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref))), !loading && /*#__PURE__*/_react["default"].createElement(SLineValue, _ref5.cn("SLineValue", {
+      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLineGauge, _ref5.cn("SLineGauge", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "base-bg-color": resolveColor(baseBgColor)
+      }, _ref))), !loading && /*#__PURE__*/_react["default"].createElement(SLineValue, _ref5.cn("SLineValue", {
         "w": percent,
         "color": resolveColor(color)
       })), Boolean(SegmentItems.length) && /*#__PURE__*/_react["default"].createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /*#__PURE__*/_react["default"].createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));

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

@@ -1 +1 @@
-{"version":3,"file":"Line.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_resolveColorEnhance","style","_index","sstyled","insert","LineRoot","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","getSegmentProps","segmentProps","_this$asProps","asProps","children","resolveColor","sum","React","Children","forEach","child","isValidElement","props","width","w","concat","color","render","_ref","_ref5","SLineGauge","Box","SLineValue","SAnimationLine","SLineGaugeSegment","Flex","SLineSegmentItem","_this$asProps2","styles","_this$asProps2$color","loading","animate","undefined","_ref3","createElement","cn","_objectSpread2","assignProps","segments","SegmentItems","i","_ref4","push","percent","Boolean","length","Component","_defineProperty2","resolveColorEnhance","Segment","_ref2","arguments[0]","_ref6","displayName","ScoreLine","createComponent","exports"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\n\nimport style from './line.shadow.css';\nimport {\n  ScoreLineComponent,\n  ScoreLineGaugeProps,\n  SegmentProps,\n  InnerSegmentProps,\n} from './Line.types';\n\nclass LineRoot extends Component<ScoreLineGaugeProps, {}, {}, typeof LineRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n  static displayName = 'ScoreLine';\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  getSegmentProps(segmentProps: SegmentProps) {\n    const { children, resolveColor } = this.asProps;\n\n    let sum = 0;\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement<SegmentProps>(child)) {\n        sum = sum + child.props.value;\n      }\n    });\n\n    const width = sum > 0 ? (100 * segmentProps.value) / sum : 0;\n\n    return {\n      w: `${width}%`,\n      'use:color': resolveColor(segmentProps.color),\n    };\n  }\n\n  render() {\n    const SLineGauge = Root;\n    const SLineValue = Box;\n    const SAnimationLine = Box;\n    const SLineGaugeSegment = Flex;\n    const SLineSegmentItem = Box;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      resolveColor,\n      loading,\n      children,\n      Children,\n      animate,\n    } = this.asProps;\n\n    if (children !== undefined) {\n      return sstyled(styles)(\n        <SLineGauge render={Box} segments>\n          <SLineGaugeSegment>\n            <Children />\n          </SLineGaugeSegment>\n          {animate && <SAnimationLine />}\n        </SLineGauge>,\n      );\n    }\n\n    const { segments } = this.asProps;\n\n    const SegmentItems = [];\n\n    if (segments) {\n      for (let i = 0; i < segments; i++) {\n        const width = `calc((100% - ${segments - 1}px) / ${segments})`;\n\n        SegmentItems.push(\n          sstyled(styles)(\n            <SLineSegmentItem\n              key={i}\n              color={i < value ? resolveColor(color) : undefined}\n              w={width}\n            />,\n          ),\n        );\n      }\n    }\n\n    let percent = `${value}%`;\n\n    if (segments) {\n      percent = `${(value / segments) * 100}%`;\n    }\n\n    return sstyled(styles)(\n      <SLineGauge render={Box}>\n        {!loading && <SLineValue w={percent} color={resolveColor(color)} />}\n        {Boolean(SegmentItems.length) && <SLineGaugeSegment>{SegmentItems}</SLineGaugeSegment>}\n        {animate && <SAnimationLine />}\n      </SLineGauge>,\n    );\n  }\n}\n\nfunction Segment(props: InnerSegmentProps) {\n  const { styles } = props;\n  const SLineSegmentItem = Root;\n\n  return sstyled(styles)(<SLineSegmentItem render={Box} />);\n}\nSegment.displayName = 'Segment';\n\nexport const ScoreLine: ScoreLineComponent = createComponent(LineRoot, {\n  Segment,\n});\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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"}
+{"version":3,"file":"Line.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_resolveColorEnhance","style","_index","sstyled","insert","LineRoot","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","getSegmentProps","segmentProps","_this$asProps","asProps","children","resolveColor","sum","React","Children","forEach","child","isValidElement","props","width","w","concat","color","render","_ref","_ref5","SLineGauge","Box","SLineValue","SAnimationLine","SLineGaugeSegment","Flex","SLineSegmentItem","_this$asProps2","styles","_this$asProps2$color","baseBgColor","loading","animate","undefined","_ref3","createElement","cn","_objectSpread2","assignProps","segments","SegmentItems","i","_ref4","push","percent","Boolean","length","Component","_defineProperty2","resolveColorEnhance","Segment","_ref2","arguments[0]","_ref6","displayName","ScoreLine","createComponent","exports"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\n\nimport style from './line.shadow.css';\nimport {\n  ScoreLineComponent,\n  ScoreLineGaugeProps,\n  SegmentProps,\n  InnerSegmentProps,\n} from './Line.types';\n\nclass LineRoot extends Component<ScoreLineGaugeProps, {}, {}, typeof LineRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n  static displayName = 'ScoreLine';\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  getSegmentProps(segmentProps: SegmentProps) {\n    const { children, resolveColor } = this.asProps;\n\n    let sum = 0;\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement<SegmentProps>(child)) {\n        sum = sum + child.props.value;\n      }\n    });\n\n    const width = sum > 0 ? (100 * segmentProps.value) / sum : 0;\n\n    return {\n      w: `${width}%`,\n      'use:color': resolveColor(segmentProps.color),\n    };\n  }\n\n  render() {\n    const SLineGauge = Root;\n    const SLineValue = Box;\n    const SAnimationLine = Box;\n    const SLineGaugeSegment = Flex;\n    const SLineSegmentItem = Box;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      baseBgColor,\n      resolveColor,\n      loading,\n      children,\n      Children,\n      animate,\n    } = this.asProps;\n\n    if (children !== undefined) {\n      return sstyled(styles)(\n        <SLineGauge render={Box} segments base-bg-color={resolveColor(baseBgColor)}>\n          <SLineGaugeSegment>\n            <Children />\n          </SLineGaugeSegment>\n          {animate && <SAnimationLine />}\n        </SLineGauge>,\n      );\n    }\n\n    const { segments } = this.asProps;\n\n    const SegmentItems = [];\n\n    if (segments) {\n      for (let i = 0; i < segments; i++) {\n        const width = `calc((100% - ${segments - 1}px) / ${segments})`;\n\n        SegmentItems.push(\n          sstyled(styles)(\n            <SLineSegmentItem\n              key={i}\n              color={i < value ? resolveColor(color) : undefined}\n              w={width}\n            />,\n          ),\n        );\n      }\n    }\n\n    let percent = `${value}%`;\n\n    if (segments) {\n      percent = `${(value / segments) * 100}%`;\n    }\n\n    return sstyled(styles)(\n      <SLineGauge render={Box} base-bg-color={resolveColor(baseBgColor)}>\n        {!loading && <SLineValue w={percent} color={resolveColor(color)} />}\n        {Boolean(SegmentItems.length) && <SLineGaugeSegment>{SegmentItems}</SLineGaugeSegment>}\n        {animate && <SAnimationLine />}\n      </SLineGauge>,\n    );\n  }\n}\n\nfunction Segment(props: InnerSegmentProps) {\n  const { styles } = props;\n  const SLineSegmentItem = Root;\n\n  return sstyled(styles)(<SLineSegmentItem render={Box} />);\n}\nSegment.displayName = 'Segment';\n\nexport const ScoreLine: ScoreLineComponent = createComponent(LineRoot, {\n  Segment,\n});\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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"}

package/lib/cjs/component/score/Score.js.map

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

package/lib/cjs/component/score/line.shadow.css

@@ -2,7 +2,7 @@
 
 SLineGauge {
   height: 8px;
-  background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);
+  background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));
   border-radius: var(--intergalactic-chart-rounded, 2px);
   overflow: hidden;
   position: relative;

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

@@ -19,13 +19,13 @@ var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/en
 var _Trend2 = require("./Trend");
 var _flexBox = require("@semcore/flex-box");
 /*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1j2j1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1j2j1_gg_.__loading_1j2j1_gg_,.___SLineGauge_1j2j1_gg_.__loading_1j2j1_gg_,.___STrendBar_1j2j1_gg_.__loading_1j2j1_gg_,.___STrendLine_1j2j1_gg_.__loading_1j2j1_gg_{animation-name:pulse_1j2j1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "1j2j1_gg_") /*__reshadow_css_end__*/, {
-  "__SLineGauge": "___SLineGauge_1j2j1_gg_",
-  "_loading": "__loading_1j2j1_gg_",
-  "__SDonutContainer": "___SDonutContainer_1j2j1_gg_",
-  "__STrendLine": "___STrendLine_1j2j1_gg_",
-  "__STrendBar": "___STrendBar_1j2j1_gg_",
-  "@pulse": "pulse_1j2j1"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_p8sbi{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_p8sbi_gg_.__loading_p8sbi_gg_,.___SLineGauge_p8sbi_gg_.__loading_p8sbi_gg_,.___STrendBar_p8sbi_gg_.__loading_p8sbi_gg_,.___STrendLine_p8sbi_gg_.__loading_p8sbi_gg_{animation-name:pulse_p8sbi;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "p8sbi_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_p8sbi_gg_",
+  "_loading": "__loading_p8sbi_gg_",
+  "__SDonutContainer": "___SDonutContainer_p8sbi_gg_",
+  "__STrendLine": "___STrendLine_p8sbi_gg_",
+  "__STrendBar": "___STrendBar_p8sbi_gg_",
+  "@pulse": "pulse_p8sbi"
 });
 var TrendBarRoot = /*#__PURE__*/function (_Trend) {
   (0, _inherits2["default"])(TrendBarRoot, _Trend);

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

@@ -20,13 +20,13 @@ var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
 var _Trend2 = require("./Trend");
 var _flexBox = require("@semcore/flex-box");
 /*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1j2j1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1j2j1_gg_.__loading_1j2j1_gg_,.___SLineGauge_1j2j1_gg_.__loading_1j2j1_gg_,.___STrendBar_1j2j1_gg_.__loading_1j2j1_gg_,.___STrendLine_1j2j1_gg_.__loading_1j2j1_gg_{animation-name:pulse_1j2j1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "1j2j1_gg_") /*__reshadow_css_end__*/, {
-  "__SLineGauge": "___SLineGauge_1j2j1_gg_",
-  "_loading": "__loading_1j2j1_gg_",
-  "__SDonutContainer": "___SDonutContainer_1j2j1_gg_",
-  "__STrendLine": "___STrendLine_1j2j1_gg_",
-  "__STrendBar": "___STrendBar_1j2j1_gg_",
-  "@pulse": "pulse_1j2j1"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_p8sbi{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_p8sbi_gg_.__loading_p8sbi_gg_,.___SLineGauge_p8sbi_gg_.__loading_p8sbi_gg_,.___STrendBar_p8sbi_gg_.__loading_p8sbi_gg_,.___STrendLine_p8sbi_gg_.__loading_p8sbi_gg_{animation-name:pulse_p8sbi;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "p8sbi_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_p8sbi_gg_",
+  "_loading": "__loading_p8sbi_gg_",
+  "__SDonutContainer": "___SDonutContainer_p8sbi_gg_",
+  "__STrendLine": "___STrendLine_p8sbi_gg_",
+  "__STrendBar": "___STrendBar_p8sbi_gg_",
+  "@pulse": "pulse_p8sbi"
 });
 var TrendLineRoot = /*#__PURE__*/function (_Trend) {
   (0, _inherits2["default"])(TrendLineRoot, _Trend);

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

@@ -12,15 +12,15 @@ 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_1mtz1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1mtz1_gg_.__loading_1mtz1_gg_,.___SLineGauge_1mtz1_gg_.__loading_1mtz1_gg_,.___STrendBar_1mtz1_gg_.__loading_1mtz1_gg_,.___STrendLine_1mtz1_gg_.__loading_1mtz1_gg_{animation-name:pulse_1mtz1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1mtz1_gg_.__semi_1mtz1_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1mtz1_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1mtz1_gg_.__animate_1mtz1_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "1mtz1_gg_") /*__reshadow_css_end__*/, {
-  "__SLineGauge": "___SLineGauge_1mtz1_gg_",
-  "_loading": "__loading_1mtz1_gg_",
-  "__SDonutContainer": "___SDonutContainer_1mtz1_gg_",
-  "__STrendLine": "___STrendLine_1mtz1_gg_",
-  "__STrendBar": "___STrendBar_1mtz1_gg_",
-  "@pulse": "pulse_1mtz1",
-  "_animate": "__animate_1mtz1_gg_",
-  "_semi": "__semi_1mtz1_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_18pi1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_18pi1_gg_.__loading_18pi1_gg_,.___SLineGauge_18pi1_gg_.__loading_18pi1_gg_,.___STrendBar_18pi1_gg_.__loading_18pi1_gg_,.___STrendLine_18pi1_gg_.__loading_18pi1_gg_{animation-name:pulse_18pi1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_18pi1_gg_.__semi_18pi1_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_18pi1_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_18pi1_gg_.__animate_18pi1_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "18pi1_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_18pi1_gg_",
+  "_loading": "__loading_18pi1_gg_",
+  "__SDonutContainer": "___SDonutContainer_18pi1_gg_",
+  "__STrendLine": "___STrendLine_18pi1_gg_",
+  "__STrendBar": "___STrendBar_18pi1_gg_",
+  "@pulse": "pulse_18pi1",
+  "_animate": "__animate_18pi1_gg_",
+  "_semi": "__semi_18pi1_gg_"
 });
 var DonutRoot = /*#__PURE__*/function (_Component) {
   _inherits(DonutRoot, _Component);
@@ -38,6 +38,8 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
       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,
@@ -67,7 +69,7 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
         "cy": '12',
         "r": radius,
         "strokeWidth": strokeWidth,
-        "stroke": resolveColor('chart-grid-bar-chart-base-bg'),
+        "stroke": resolveColor(baseBgColor),
         "strokeDasharray": loading ? undefined : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
         "strokeDashoffset": -1 * valueStrokeDasharray
       })), !loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {

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

@@ -1 +1 @@
-{"version":3,"file":"Donut.js","names":["React","createComponent","Component","Root","sstyled","Box","resolveColorEnhance","assignProps","style","_sstyled","insert","DonutRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","render","_ref","asProps","_ref2","SDonutContainer","_this$asProps","styles","_this$asProps$color","color","resolveColor","isSemiDonut","loading","strokeWidth","radius","baseStrokeDasharray","Math","PI","valueStrokeDasharray","greyStrokeDasharray","offsetPoint","strokeDasharrayBetweenSpaces","concat","spaceStrokeDasharray","viewBox","createElement","cn","_objectSpread","_assignProps","undefined","Fragment","_defineProperty","animate","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, ComponentType } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { assignProps } from '@semcore/core';\nimport { CommonScoreProps } from './Score';\n\nimport style from './donut.shadow.css';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n    } = this.asProps;\n\n    const strokeWidth = isSemiDonut ? 6 : 4;\n    const radius = isSemiDonut ? 9 : 10;\n    const baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;\n    const valueStrokeDasharray = baseStrokeDasharray * (value / 100);\n    const greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);\n    const offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;\n\n    const strokeDasharrayBetweenSpaces = `${greyStrokeDasharray - 2 * offsetPoint} ${offsetPoint}`;\n\n    let spaceStrokeDasharray = `${offsetPoint} ${\n      value < 99 ? `${strokeDasharrayBetweenSpaces}` : ''\n    } ${baseStrokeDasharray}`;\n\n    if (isSemiDonut) {\n      spaceStrokeDasharray = `${offsetPoint} ${\n        value < 95 ? `${strokeDasharrayBetweenSpaces}` : ''\n      } ${baseStrokeDasharray}`;\n    }\n\n    const viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut}>\n        <svg width='100%' height='100%' viewBox={viewBox} fill='none'>\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={radius}\n              strokeWidth={strokeWidth}\n              stroke={resolveColor('chart-grid-bar-chart-base-bg')}\n              strokeDasharray={\n                loading ? undefined : `${greyStrokeDasharray} ${baseStrokeDasharray}`\n              }\n              strokeDashoffset={-1 * valueStrokeDasharray}\n            />\n            {!loading && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={radius}\n                  strokeWidth={strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${valueStrokeDasharray} ${baseStrokeDasharray}`}\n                  strokeDashoffset={valueStrokeDasharray}\n                >\n                  <animate\n                    attributeName={'stroke-dashoffset'}\n                    values={`0;${valueStrokeDasharray}`}\n                  />\n                </circle>\n                {value !== 100 && (\n                  <circle\n                    cx='12'\n                    cy='12'\n                    r={radius}\n                    strokeWidth={strokeWidth}\n                    stroke={resolveColor('chart-grid-border')}\n                    strokeDasharray={spaceStrokeDasharray}\n                    strokeDashoffset={-1 * valueStrokeDasharray}\n                  />\n                )}\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\nexport const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> =\n  createComponent(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> = createComponent(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: ScoreDonutProps) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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"}
+{"version":3,"file":"Donut.js","names":["React","createComponent","Component","Root","sstyled","Box","resolveColorEnhance","assignProps","style","_sstyled","insert","DonutRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","render","_ref","asProps","_ref2","SDonutContainer","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","strokeWidth","radius","baseStrokeDasharray","Math","PI","valueStrokeDasharray","greyStrokeDasharray","offsetPoint","strokeDasharrayBetweenSpaces","concat","spaceStrokeDasharray","viewBox","createElement","cn","_objectSpread","_assignProps","undefined","Fragment","_defineProperty","animate","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, ComponentType } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { assignProps } from '@semcore/core';\nimport { CommonScoreProps } from './Score';\n\nimport style from './donut.shadow.css';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      baseBgColor = 'chart-grid-bar-chart-base-bg',\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n    } = this.asProps;\n\n    const strokeWidth = isSemiDonut ? 6 : 4;\n    const radius = isSemiDonut ? 9 : 10;\n    const baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;\n    const valueStrokeDasharray = baseStrokeDasharray * (value / 100);\n    const greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);\n    const offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;\n\n    const strokeDasharrayBetweenSpaces = `${greyStrokeDasharray - 2 * offsetPoint} ${offsetPoint}`;\n\n    let spaceStrokeDasharray = `${offsetPoint} ${\n      value < 99 ? `${strokeDasharrayBetweenSpaces}` : ''\n    } ${baseStrokeDasharray}`;\n\n    if (isSemiDonut) {\n      spaceStrokeDasharray = `${offsetPoint} ${\n        value < 95 ? `${strokeDasharrayBetweenSpaces}` : ''\n      } ${baseStrokeDasharray}`;\n    }\n\n    const viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut}>\n        <svg width='100%' height='100%' viewBox={viewBox} fill='none'>\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={radius}\n              strokeWidth={strokeWidth}\n              stroke={resolveColor(baseBgColor)}\n              strokeDasharray={\n                loading ? undefined : `${greyStrokeDasharray} ${baseStrokeDasharray}`\n              }\n              strokeDashoffset={-1 * valueStrokeDasharray}\n            />\n            {!loading && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={radius}\n                  strokeWidth={strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${valueStrokeDasharray} ${baseStrokeDasharray}`}\n                  strokeDashoffset={valueStrokeDasharray}\n                >\n                  <animate\n                    attributeName={'stroke-dashoffset'}\n                    values={`0;${valueStrokeDasharray}`}\n                  />\n                </circle>\n                {value !== 100 && (\n                  <circle\n                    cx='12'\n                    cy='12'\n                    r={radius}\n                    strokeWidth={strokeWidth}\n                    stroke={resolveColor('chart-grid-border')}\n                    strokeDasharray={spaceStrokeDasharray}\n                    strokeDashoffset={-1 * valueStrokeDasharray}\n                  />\n                )}\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\nexport const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> =\n  createComponent(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> = createComponent(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: ScoreDonutProps) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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"}

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

@@ -13,23 +13,24 @@ import createComponent, { Component, Root, sstyled } from '@semcore/core';
 import { Box, Flex } from '@semcore/flex-box';
 import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
 /*__reshadow-styles__:"./line.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1dnvw{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1dnvw{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1dnvw_gg_.__loading_1dnvw_gg_,.___SLineGauge_1dnvw_gg_.__loading_1dnvw_gg_,.___STrendBar_1dnvw_gg_.__loading_1dnvw_gg_,.___STrendLine_1dnvw_gg_.__loading_1dnvw_gg_{animation-name:pulse_1dnvw;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1dnvw_gg_{height:8px;background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1dnvw_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1dnvw_gg_.__percent_1dnvw_gg_{width:var(--percent_1dnvw)}.___SLineSegmentItem_1dnvw_gg_.__color_1dnvw_gg_,.___SLineValue_1dnvw_gg_.__color_1dnvw_gg_{background-color:var(--color_1dnvw, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1dnvw_gg_.__segments_1dnvw_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1dnvw_gg_,.___SLineGaugeSegment_1dnvw_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1dnvw_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1dnvw_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_1dnvw_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_1dnvw;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "1dnvw_gg_") /*__reshadow_css_end__*/, {
-  "__SLineGauge": "___SLineGauge_1dnvw_gg_",
-  "_loading": "__loading_1dnvw_gg_",
-  "__SDonutContainer": "___SDonutContainer_1dnvw_gg_",
-  "__STrendLine": "___STrendLine_1dnvw_gg_",
-  "__STrendBar": "___STrendBar_1dnvw_gg_",
-  "@pulse": "pulse_1dnvw",
-  "__SLineValue": "___SLineValue_1dnvw_gg_",
-  "_percent": "__percent_1dnvw_gg_",
-  "--percent": "--percent_1dnvw",
-  "_color": "__color_1dnvw_gg_",
-  "__SLineSegmentItem": "___SLineSegmentItem_1dnvw_gg_",
-  "--color": "--color_1dnvw",
-  "_segments": "__segments_1dnvw_gg_",
-  "__SLineGaugeSegment": "___SLineGaugeSegment_1dnvw_gg_",
-  "__SAnimationLine": "___SAnimationLine_1dnvw_gg_",
-  "@move-line": "move-line_1dnvw"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_8l49g{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_8l49g{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_8l49g_gg_.__loading_8l49g_gg_,.___SLineGauge_8l49g_gg_.__loading_8l49g_gg_,.___STrendBar_8l49g_gg_.__loading_8l49g_gg_,.___STrendLine_8l49g_gg_.__loading_8l49g_gg_{animation-name:pulse_8l49g;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_8l49g_gg_{height:8px;background-color:var(--base-bg-color_8l49g, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_8l49g_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_8l49g_gg_.__percent_8l49g_gg_{width:var(--percent_8l49g)}.___SLineSegmentItem_8l49g_gg_.__color_8l49g_gg_,.___SLineValue_8l49g_gg_.__color_8l49g_gg_{background-color:var(--color_8l49g, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_8l49g_gg_.__segments_8l49g_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_8l49g_gg_,.___SLineGaugeSegment_8l49g_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_8l49g_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_8l49g_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_8l49g_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_8l49g;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "8l49g_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_8l49g_gg_",
+  "_loading": "__loading_8l49g_gg_",
+  "__SDonutContainer": "___SDonutContainer_8l49g_gg_",
+  "__STrendLine": "___STrendLine_8l49g_gg_",
+  "__STrendBar": "___STrendBar_8l49g_gg_",
+  "@pulse": "pulse_8l49g",
+  "--base-bg-color": "--base-bg-color_8l49g",
+  "__SLineValue": "___SLineValue_8l49g_gg_",
+  "_percent": "__percent_8l49g_gg_",
+  "--percent": "--percent_8l49g",
+  "_color": "__color_8l49g_gg_",
+  "__SLineSegmentItem": "___SLineSegmentItem_8l49g_gg_",
+  "--color": "--color_8l49g",
+  "_segments": "__segments_8l49g_gg_",
+  "__SLineGaugeSegment": "___SLineGaugeSegment_8l49g_gg_",
+  "__SAnimationLine": "___SAnimationLine_8l49g_gg_",
+  "@move-line": "move-line_8l49g"
 });
 var LineRoot = /*#__PURE__*/function (_Component) {
   _inherits(LineRoot, _Component);
@@ -71,6 +72,7 @@ var LineRoot = /*#__PURE__*/function (_Component) {
         styles = _this$asProps2.styles,
         _this$asProps2$color = _this$asProps2.color,
         color = _this$asProps2$color === void 0 ? 'chart-palette-order-1' : _this$asProps2$color,
+        baseBgColor = _this$asProps2.baseBgColor,
         resolveColor = _this$asProps2.resolveColor,
         loading = _this$asProps2.loading,
         children = _this$asProps2.children,
@@ -79,7 +81,8 @@ var LineRoot = /*#__PURE__*/function (_Component) {
       if (children !== undefined) {
         var _ref3;
         return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, _assignProps({
-          "segments": true
+          "segments": true,
+          "base-bg-color": resolveColor(baseBgColor)
         }, _ref))), /*#__PURE__*/React.createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {}))), animate && /*#__PURE__*/React.createElement(SAnimationLine, _ref3.cn("SAnimationLine", {})));
       }
       var segments = this.asProps.segments;
@@ -99,7 +102,9 @@ var LineRoot = /*#__PURE__*/function (_Component) {
       if (segments) {
         percent = "".concat(value / segments * 100, "%");
       }
-      return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SLineGauge, _ref5.cn("SLineGauge", _objectSpread({}, _assignProps2({}, _ref))), !loading && /*#__PURE__*/React.createElement(SLineValue, _ref5.cn("SLineValue", {
+      return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SLineGauge, _ref5.cn("SLineGauge", _objectSpread({}, _assignProps2({
+        "base-bg-color": resolveColor(baseBgColor)
+      }, _ref))), !loading && /*#__PURE__*/React.createElement(SLineValue, _ref5.cn("SLineValue", {
         "w": percent,
         "color": resolveColor(color)
       })), Boolean(SegmentItems.length) && /*#__PURE__*/React.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /*#__PURE__*/React.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));

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

@@ -1 +1 @@
-{"version":3,"file":"Line.js","names":["React","createComponent","Component","Root","sstyled","Box","Flex","resolveColorEnhance","style","_sstyled","insert","LineRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","getSegmentProps","segmentProps","_this$asProps","asProps","children","resolveColor","sum","Children","forEach","child","isValidElement","props","width","w","concat","color","render","_ref","_ref5","SLineGauge","SLineValue","SAnimationLine","SLineGaugeSegment","SLineSegmentItem","_this$asProps2","styles","_this$asProps2$color","loading","animate","undefined","_ref3","createElement","cn","_objectSpread","_assignProps","segments","SegmentItems","i","_ref4","push","percent","_assignProps2","Boolean","length","_defineProperty","Segment","_ref2","arguments[0]","_ref6","_assignProps3","displayName","ScoreLine"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\n\nimport style from './line.shadow.css';\nimport {\n  ScoreLineComponent,\n  ScoreLineGaugeProps,\n  SegmentProps,\n  InnerSegmentProps,\n} from './Line.types';\n\nclass LineRoot extends Component<ScoreLineGaugeProps, {}, {}, typeof LineRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n  static displayName = 'ScoreLine';\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  getSegmentProps(segmentProps: SegmentProps) {\n    const { children, resolveColor } = this.asProps;\n\n    let sum = 0;\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement<SegmentProps>(child)) {\n        sum = sum + child.props.value;\n      }\n    });\n\n    const width = sum > 0 ? (100 * segmentProps.value) / sum : 0;\n\n    return {\n      w: `${width}%`,\n      'use:color': resolveColor(segmentProps.color),\n    };\n  }\n\n  render() {\n    const SLineGauge = Root;\n    const SLineValue = Box;\n    const SAnimationLine = Box;\n    const SLineGaugeSegment = Flex;\n    const SLineSegmentItem = Box;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      resolveColor,\n      loading,\n      children,\n      Children,\n      animate,\n    } = this.asProps;\n\n    if (children !== undefined) {\n      return sstyled(styles)(\n        <SLineGauge render={Box} segments>\n          <SLineGaugeSegment>\n            <Children />\n          </SLineGaugeSegment>\n          {animate && <SAnimationLine />}\n        </SLineGauge>,\n      );\n    }\n\n    const { segments } = this.asProps;\n\n    const SegmentItems = [];\n\n    if (segments) {\n      for (let i = 0; i < segments; i++) {\n        const width = `calc((100% - ${segments - 1}px) / ${segments})`;\n\n        SegmentItems.push(\n          sstyled(styles)(\n            <SLineSegmentItem\n              key={i}\n              color={i < value ? resolveColor(color) : undefined}\n              w={width}\n            />,\n          ),\n        );\n      }\n    }\n\n    let percent = `${value}%`;\n\n    if (segments) {\n      percent = `${(value / segments) * 100}%`;\n    }\n\n    return sstyled(styles)(\n      <SLineGauge render={Box}>\n        {!loading && <SLineValue w={percent} color={resolveColor(color)} />}\n        {Boolean(SegmentItems.length) && <SLineGaugeSegment>{SegmentItems}</SLineGaugeSegment>}\n        {animate && <SAnimationLine />}\n      </SLineGauge>,\n    );\n  }\n}\n\nfunction Segment(props: InnerSegmentProps) {\n  const { styles } = props;\n  const SLineSegmentItem = Root;\n\n  return sstyled(styles)(<SLineSegmentItem render={Box} />);\n}\nSegment.displayName = 'Segment';\n\nexport const ScoreLine: ScoreLineComponent = createComponent(LineRoot, {\n  Segment,\n});\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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"}
+{"version":3,"file":"Line.js","names":["React","createComponent","Component","Root","sstyled","Box","Flex","resolveColorEnhance","style","_sstyled","insert","LineRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","getSegmentProps","segmentProps","_this$asProps","asProps","children","resolveColor","sum","Children","forEach","child","isValidElement","props","width","w","concat","color","render","_ref","_ref5","SLineGauge","SLineValue","SAnimationLine","SLineGaugeSegment","SLineSegmentItem","_this$asProps2","styles","_this$asProps2$color","baseBgColor","loading","animate","undefined","_ref3","createElement","cn","_objectSpread","_assignProps","segments","SegmentItems","i","_ref4","push","percent","_assignProps2","Boolean","length","_defineProperty","Segment","_ref2","arguments[0]","_ref6","_assignProps3","displayName","ScoreLine"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\n\nimport style from './line.shadow.css';\nimport {\n  ScoreLineComponent,\n  ScoreLineGaugeProps,\n  SegmentProps,\n  InnerSegmentProps,\n} from './Line.types';\n\nclass LineRoot extends Component<ScoreLineGaugeProps, {}, {}, typeof LineRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n  static displayName = 'ScoreLine';\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  getSegmentProps(segmentProps: SegmentProps) {\n    const { children, resolveColor } = this.asProps;\n\n    let sum = 0;\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement<SegmentProps>(child)) {\n        sum = sum + child.props.value;\n      }\n    });\n\n    const width = sum > 0 ? (100 * segmentProps.value) / sum : 0;\n\n    return {\n      w: `${width}%`,\n      'use:color': resolveColor(segmentProps.color),\n    };\n  }\n\n  render() {\n    const SLineGauge = Root;\n    const SLineValue = Box;\n    const SAnimationLine = Box;\n    const SLineGaugeSegment = Flex;\n    const SLineSegmentItem = Box;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      baseBgColor,\n      resolveColor,\n      loading,\n      children,\n      Children,\n      animate,\n    } = this.asProps;\n\n    if (children !== undefined) {\n      return sstyled(styles)(\n        <SLineGauge render={Box} segments base-bg-color={resolveColor(baseBgColor)}>\n          <SLineGaugeSegment>\n            <Children />\n          </SLineGaugeSegment>\n          {animate && <SAnimationLine />}\n        </SLineGauge>,\n      );\n    }\n\n    const { segments } = this.asProps;\n\n    const SegmentItems = [];\n\n    if (segments) {\n      for (let i = 0; i < segments; i++) {\n        const width = `calc((100% - ${segments - 1}px) / ${segments})`;\n\n        SegmentItems.push(\n          sstyled(styles)(\n            <SLineSegmentItem\n              key={i}\n              color={i < value ? resolveColor(color) : undefined}\n              w={width}\n            />,\n          ),\n        );\n      }\n    }\n\n    let percent = `${value}%`;\n\n    if (segments) {\n      percent = `${(value / segments) * 100}%`;\n    }\n\n    return sstyled(styles)(\n      <SLineGauge render={Box} base-bg-color={resolveColor(baseBgColor)}>\n        {!loading && <SLineValue w={percent} color={resolveColor(color)} />}\n        {Boolean(SegmentItems.length) && <SLineGaugeSegment>{SegmentItems}</SLineGaugeSegment>}\n        {animate && <SAnimationLine />}\n      </SLineGauge>,\n    );\n  }\n}\n\nfunction Segment(props: InnerSegmentProps) {\n  const { styles } = props;\n  const SLineSegmentItem = Root;\n\n  return sstyled(styles)(<SLineSegmentItem render={Box} />);\n}\nSegment.displayName = 'Segment';\n\nexport const ScoreLine: ScoreLineComponent = createComponent(LineRoot, {\n  Segment,\n});\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,eAAe,IAAIC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,SAASC,GAAG,EAAEC,IAAI,QAAQ,mBAAmB;AAC7C,OAAOC,mBAAmB,MAAM,iDAAiD;AAAC;AAAA,IAAAC,KAAA,+BAAAC,QAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAU5EC,QAAQ,0BAAAC,UAAA;EAAAC,SAAA,CAAAF,QAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,QAAA;EAAA,SAAAA,SAAA;IAAAK,eAAA,OAAAL,QAAA;IAAA,OAAAG,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAAC,YAAA,CAAAR,QAAA;IAAAS,GAAA;IAAAC,KAAA,EAUZ,SAAAC,gBAAgBC,YAA0B,EAAE;MAC1C,IAAAC,aAAA,GAAmC,IAAI,CAACC,OAAO;QAAvCC,QAAQ,GAAAF,aAAA,CAARE,QAAQ;QAAEC,YAAY,GAAAH,aAAA,CAAZG,YAAY;MAE9B,IAAIC,GAAG,GAAG,CAAC;MACX5B,KAAK,CAAC6B,QAAQ,CAACC,OAAO,CAACJ,QAAQ,EAAE,UAACK,KAAK,EAAK;QAC1C,kBAAI/B,KAAK,CAACgC,cAAc,CAAeD,KAAK,CAAC,EAAE;UAC7CH,GAAG,GAAGA,GAAG,GAAGG,KAAK,CAACE,KAAK,CAACZ,KAAK;QAC/B;MACF,CAAC,CAAC;MAEF,IAAMa,KAAK,GAAGN,GAAG,GAAG,CAAC,GAAI,GAAG,GAAGL,YAAY,CAACF,KAAK,GAAIO,GAAG,GAAG,CAAC;MAE5D,OAAO;QACLO,CAAC,KAAAC,MAAA,CAAKF,KAAK,MAAG;QACd,WAAW,EAAEP,YAAY,CAACJ,YAAY,CAACc,KAAK;MAC9C,CAAC;IACH;EAAC;IAAAjB,GAAA;IAAAC,KAAA,EAED,SAAAiB,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAAd,OAAA;QAAAe,KAAA;MACP,IAAMC,UAAU,GAuDMpC,GAAG;MAtDzB,IAAMqC,UAAU,GAAGrC,GAAG;MACtB,IAAMsC,cAAc,GAAGtC,GAAG;MAC1B,IAAMuC,iBAAiB,GAAGtC,IAAI;MAC9B,IAAMuC,gBAAgB,GAAGxC,GAAG;MAC5B,IAAAyC,cAAA,GAUI,IAAI,CAACrB,OAAO;QATdJ,KAAK,GAAAyB,cAAA,CAALzB,KAAK;QACL0B,MAAM,GAAAD,cAAA,CAANC,MAAM;QAAAC,oBAAA,GAAAF,cAAA,CACNT,KAAK;QAALA,KAAK,GAAAW,oBAAA,cAAG,uBAAuB,GAAAA,oBAAA;QAC/BC,WAAW,GAAAH,cAAA,CAAXG,WAAW;QACXtB,YAAY,GAAAmB,cAAA,CAAZnB,YAAY;QACZuB,OAAO,GAAAJ,cAAA,CAAPI,OAAO;QACPxB,QAAQ,GAAAoB,cAAA,CAARpB,QAAQ;QACRG,QAAQ,GAAAiB,cAAA,CAARjB,QAAQ;QACRsB,OAAO,GAAAL,cAAA,CAAPK,OAAO;MAGT,IAAIzB,QAAQ,KAAK0B,SAAS,EAAE;QAAA,IAAAC,KAAA;QAC1B,OAAAA,KAAA,GAAOjD,OAAO,CAAC2C,MAAM,CAAC,eACpB/C,KAAA,CAAAsD,aAAA,CAACb,UAAU,EAAAY,KAAA,CAAAE,EAAA,eAAAC,aAAA,KAAAC,YAAA;UAAA;UAAA,iBAAsC9B,YAAY,CAACsB,WAAW;QAAC,GAAAV,IAAA,kBACxEvC,KAAA,CAAAsD,aAAA,CAACV,iBAAiB,EAAAS,KAAA,CAAAE,EAAA,wCAChBvD,KAAA,CAAAsD,aAAA,CAACzB,QAAQ,EAAAwB,KAAA,CAAAE,EAAA,iBAAG,CACM,EACnBJ,OAAO,iBAAInD,KAAA,CAAAsD,aAAA,CAACX,cAAc,EAAAU,KAAA,CAAAE,EAAA,uBAAG,CACnB;MAEjB;MAEA,IAAQG,QAAQ,GAAK,IAAI,CAACjC,OAAO,CAAzBiC,QAAQ;MAEhB,IAAMC,YAAY,GAAG,EAAE;MAEvB,IAAID,QAAQ,EAAE;QACZ,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,QAAQ,EAAEE,CAAC,EAAE,EAAE;UAAA,IAAAC,KAAA;UACjC,IAAM3B,KAAK,mBAAAE,MAAA,CAAmBsB,QAAQ,GAAG,CAAC,YAAAtB,MAAA,CAASsB,QAAQ,MAAG;UAE9DC,YAAY,CAACG,IAAI,EAAAD,KAAA,GACfzD,OAAO,CAAC2C,MAAM,CAAC,eACb/C,KAAA,CAAAsD,aAAA,CAACT,gBAAgB,EAAAgB,KAAA,CAAAN,EAAA;YAAA,OACVK,CAAC;YAAA,SACCA,CAAC,GAAGvC,KAAK,GAAGM,YAAY,CAACU,KAAK,CAAC,GAAGe,SAAS;YAAA,KAC/ClB;UAAK,GACR,EAEL;QACH;MACF;MAEA,IAAI6B,OAAO,MAAA3B,MAAA,CAAMf,KAAK,MAAG;MAEzB,IAAIqC,QAAQ,EAAE;QACZK,OAAO,MAAA3B,MAAA,CAAOf,KAAK,GAAGqC,QAAQ,GAAI,GAAG,MAAG;MAC1C;MAEA,OAAAlB,KAAA,GAAOpC,OAAO,CAAC2C,MAAM,CAAC,eACpB/C,KAAA,CAAAsD,aAAA,CAACb,UAAU,EAAAD,KAAA,CAAAe,EAAA,eAAAC,aAAA,KAAAQ,aAAA;QAAA,iBAA6BrC,YAAY,CAACsB,WAAW;MAAC,GAAAV,IAAA,KAC9D,CAACW,OAAO,iBAAIlD,KAAA,CAAAsD,aAAA,CAACZ,UAAU,EAAAF,KAAA,CAAAe,EAAA;QAAA,KAAIQ,OAAO;QAAA,SAASpC,YAAY,CAACU,KAAK;MAAC,GAAI,EAClE4B,OAAO,CAACN,YAAY,CAACO,MAAM,CAAC,iBAAIlE,KAAA,CAAAsD,aAAA,CAACV,iBAAiB,EAAAJ,KAAA,CAAAe,EAAA,2BAAEI,YAAY,CAAqB,EACrFR,OAAO,iBAAInD,KAAA,CAAAsD,aAAA,CAACX,cAAc,EAAAH,KAAA,CAAAe,EAAA,uBAAG,CACnB;IAEjB;EAAC;EAAA,OAAA5C,QAAA;AAAA,EA1FoBT,SAAS;AAAAiE,eAAA,CAA1BxD,QAAQ,aACK,CAACJ,mBAAmB,EAAE,CAAC;AAAA4D,eAAA,CADpCxD,QAAQ,iBAES,WAAW;AAAAwD,eAAA,CAF5BxD,QAAQ,WAIGH,KAAK;AAAA2D,eAAA,CAJhBxD,QAAQ,kBAMU;EACpBwC,OAAO,EAAE;AACX,CAAC;AAqFH,SAASiB,OAAOA,CAACnC,KAAwB,EAAE;EAAA,IAAAoC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACzC,IAAQxB,MAAM,GAAKd,KAAK,CAAhBc,MAAM;EACd,IAAMF,gBAAgB,GAE2BxC,GAAG;EAApD,OAAAkE,KAAA,GAAOnE,OAAO,CAAC2C,MAAM,CAAC,eAAC/C,KAAA,CAAAsD,aAAA,CAACT,gBAAgB,EAAA0B,KAAA,CAAAhB,EAAA,qBAAAC,aAAA,KAAAgB,aAAA,KAAAH,KAAA,IAAgB;AAC1D;AACAD,OAAO,CAACK,WAAW,GAAG,SAAS;AAE/B,OAAO,IAAMC,SAA6B,GAAGzE,eAAe,CAACU,QAAQ,EAAE;EACrEyD,OAAO,EAAPA;AACF,CAAC,CAAC;AAEFM,SAAS,CAACD,WAAW,GAAG,qBAAqB"}

package/lib/es6/component/score/Score.js.map

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

package/lib/es6/component/score/line.shadow.css

@@ -2,7 +2,7 @@
 
 SLineGauge {
   height: 8px;
-  background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);
+  background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));
   border-radius: var(--intergalactic-chart-rounded, 2px);
   overflow: hidden;
   position: relative;

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

@@ -12,13 +12,13 @@ import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance
 import { Trend } from './Trend';
 import { Box } from '@semcore/flex-box';
 /*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1j2j1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1j2j1_gg_.__loading_1j2j1_gg_,.___SLineGauge_1j2j1_gg_.__loading_1j2j1_gg_,.___STrendBar_1j2j1_gg_.__loading_1j2j1_gg_,.___STrendLine_1j2j1_gg_.__loading_1j2j1_gg_{animation-name:pulse_1j2j1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "1j2j1_gg_") /*__reshadow_css_end__*/, {
-  "__SLineGauge": "___SLineGauge_1j2j1_gg_",
-  "_loading": "__loading_1j2j1_gg_",
-  "__SDonutContainer": "___SDonutContainer_1j2j1_gg_",
-  "__STrendLine": "___STrendLine_1j2j1_gg_",
-  "__STrendBar": "___STrendBar_1j2j1_gg_",
-  "@pulse": "pulse_1j2j1"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_p8sbi{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_p8sbi_gg_.__loading_p8sbi_gg_,.___SLineGauge_p8sbi_gg_.__loading_p8sbi_gg_,.___STrendBar_p8sbi_gg_.__loading_p8sbi_gg_,.___STrendLine_p8sbi_gg_.__loading_p8sbi_gg_{animation-name:pulse_p8sbi;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "p8sbi_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_p8sbi_gg_",
+  "_loading": "__loading_p8sbi_gg_",
+  "__SDonutContainer": "___SDonutContainer_p8sbi_gg_",
+  "__STrendLine": "___STrendLine_p8sbi_gg_",
+  "__STrendBar": "___STrendBar_p8sbi_gg_",
+  "@pulse": "pulse_p8sbi"
 });
 var TrendBarRoot = /*#__PURE__*/function (_Trend) {
   _inherits(TrendBarRoot, _Trend);

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

@@ -13,13 +13,13 @@ import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 import { Trend } from './Trend';
 import { Box } from '@semcore/flex-box';
 /*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1j2j1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1j2j1_gg_.__loading_1j2j1_gg_,.___SLineGauge_1j2j1_gg_.__loading_1j2j1_gg_,.___STrendBar_1j2j1_gg_.__loading_1j2j1_gg_,.___STrendLine_1j2j1_gg_.__loading_1j2j1_gg_{animation-name:pulse_1j2j1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "1j2j1_gg_") /*__reshadow_css_end__*/, {
-  "__SLineGauge": "___SLineGauge_1j2j1_gg_",
-  "_loading": "__loading_1j2j1_gg_",
-  "__SDonutContainer": "___SDonutContainer_1j2j1_gg_",
-  "__STrendLine": "___STrendLine_1j2j1_gg_",
-  "__STrendBar": "___STrendBar_1j2j1_gg_",
-  "@pulse": "pulse_1j2j1"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_p8sbi{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_p8sbi_gg_.__loading_p8sbi_gg_,.___SLineGauge_p8sbi_gg_.__loading_p8sbi_gg_,.___STrendBar_p8sbi_gg_.__loading_p8sbi_gg_,.___STrendLine_p8sbi_gg_.__loading_p8sbi_gg_{animation-name:pulse_p8sbi;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "p8sbi_gg_") /*__reshadow_css_end__*/, {
+  "__SLineGauge": "___SLineGauge_p8sbi_gg_",
+  "_loading": "__loading_p8sbi_gg_",
+  "__SDonutContainer": "___SDonutContainer_p8sbi_gg_",
+  "__STrendLine": "___STrendLine_p8sbi_gg_",
+  "__STrendBar": "___STrendBar_p8sbi_gg_",
+  "@pulse": "pulse_p8sbi"
 });
 var TrendLineRoot = /*#__PURE__*/function (_Trend) {
   _inherits(TrendLineRoot, _Trend);

package/lib/types/component/score/Score.d.ts

@@ -7,6 +7,10 @@ export type CommonScoreProps = {
      * Color of value
      */
     color?: string;
+    /**
+     * Color of background
+     */
+    baseBgColor?: string;
     /**
      * Flag to enable skeleton
      * @default false

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/mini-chart",
   "description": "Semrush MiniChart Component",
-  "version": "0.25.0",
+  "version": "0.25.1-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,11 +9,11 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "dependencies": {
-    "@semcore/flex-box": "5.38.0",
-    "@semcore/utils": "4.43.0"
+    "@semcore/flex-box": "5.38.1-prerelease.0",
+    "@semcore/utils": "4.43.2-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.36.1-prerelease.0",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },