@semcore/mini-chart 17.1.0 → 17.2.0-prerelease.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/component/score/Donut.js +21 -9
- package/lib/cjs/component/score/Donut.js.map +1 -1
- package/lib/cjs/component/score/Line.js +24 -18
- package/lib/cjs/component/score/Line.js.map +1 -1
- package/lib/cjs/component/score/Line.types.js.map +1 -1
- package/lib/cjs/component/trend/Bar.js +19 -7
- package/lib/cjs/component/trend/Bar.js.map +1 -1
- package/lib/cjs/component/trend/Line.js +19 -7
- package/lib/cjs/component/trend/Line.js.map +1 -1
- package/lib/cjs/component/trend/Trend.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/component/score/Donut.js +21 -9
- package/lib/es6/component/score/Donut.js.map +1 -1
- package/lib/es6/component/score/Line.js +24 -18
- package/lib/es6/component/score/Line.js.map +1 -1
- package/lib/es6/component/score/Line.types.js.map +1 -1
- package/lib/es6/component/trend/Bar.js +19 -7
- package/lib/es6/component/trend/Bar.js.map +1 -1
- package/lib/es6/component/trend/Line.js +19 -7
- package/lib/es6/component/trend/Line.js.map +1 -1
- package/lib/es6/component/trend/Trend.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/esm/component/score/Donut.mjs +11 -11
- package/lib/esm/component/score/Line.mjs +20 -20
- package/lib/esm/component/trend/Bar.mjs +9 -9
- package/lib/esm/component/trend/Line.mjs +9 -9
- package/lib/esm/component/trend/Trend.mjs +1 -1
- package/lib/esm/utils/ScoreDonutUtils.mjs +1 -1
- package/lib/types/component/score/Donut.d.ts +32 -6
- package/lib/types/component/score/Line.d.ts +5 -0
- package/lib/types/component/score/Line.types.d.ts +6 -0
- package/lib/types/component/trend/Bar.d.ts +31 -3
- package/lib/types/component/trend/Line.d.ts +38 -7
- package/lib/types/component/trend/Trend.d.ts +5 -2
- package/lib/types/index.d.ts +2 -0
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -14,17 +14,17 @@ var _useCssVariable = require("@semcore/core/lib/utils/useCssVariable");
|
|
|
14
14
|
var _react = _interopRequireDefault(require("react"));
|
|
15
15
|
var _ScoreDonutUtils = require("../../utils/ScoreDonutUtils");
|
|
16
16
|
/*!__reshadow-styles__:"./donut.shadow.css"*/
|
|
17
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"
|
|
17
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1k8k3_gg_.__loading_1k8k3_gg_,.___SLineGauge_1k8k3_gg_.__loading_1k8k3_gg_,.___STrendBar_1k8k3_gg_.__loading_1k8k3_gg_,.___STrendLine_1k8k3_gg_.__loading_1k8k3_gg_{animation-name:pulse_1k8k3;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1k8k3{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SDonutContainer_1k8k3_gg_.__semi_1k8k3_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1k8k3_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1k8k3_gg_.__animate_1k8k3_gg_ circle{transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out}", /*__inner_css_end__*/"1k8k3_gg_"),
|
|
18
18
|
/*__reshadow_css_end__*/
|
|
19
19
|
{
|
|
20
|
-
"__SLineGauge": "
|
|
21
|
-
"_loading": "
|
|
22
|
-
"__SDonutContainer": "
|
|
23
|
-
"__STrendLine": "
|
|
24
|
-
"__STrendBar": "
|
|
25
|
-
"@pulse": "
|
|
26
|
-
"_animate": "
|
|
27
|
-
"_semi": "
|
|
20
|
+
"__SLineGauge": "___SLineGauge_1k8k3_gg_",
|
|
21
|
+
"_loading": "__loading_1k8k3_gg_",
|
|
22
|
+
"__SDonutContainer": "___SDonutContainer_1k8k3_gg_",
|
|
23
|
+
"__STrendLine": "___STrendLine_1k8k3_gg_",
|
|
24
|
+
"__STrendBar": "___STrendBar_1k8k3_gg_",
|
|
25
|
+
"@pulse": "pulse_1k8k3",
|
|
26
|
+
"_animate": "__animate_1k8k3_gg_",
|
|
27
|
+
"_semi": "__semi_1k8k3_gg_"
|
|
28
28
|
});
|
|
29
29
|
class DonutRoot extends _core.Component {
|
|
30
30
|
render() {
|
|
@@ -92,6 +92,12 @@ class DonutRoot extends _core.Component {
|
|
|
92
92
|
})))))));
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* MiniCharts.ScoreDount
|
|
98
|
+
*
|
|
99
|
+
* {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
|
|
100
|
+
*/
|
|
95
101
|
(0, _defineProperty2.default)(DonutRoot, "enhance", [(0, _useCssVariable.cssVariableEnhance)({
|
|
96
102
|
variable: '--intergalactic-duration-extra-slow',
|
|
97
103
|
fallback: '500',
|
|
@@ -104,6 +110,12 @@ class DonutRoot extends _core.Component {
|
|
|
104
110
|
});
|
|
105
111
|
const ScoreDonut = exports.ScoreDonut = (0, _core.createComponent)(DonutRoot);
|
|
106
112
|
ScoreDonut.displayName = 'MiniChart.ScoreDonut';
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* MiniCharts.ScoreSemiDount
|
|
116
|
+
*
|
|
117
|
+
* {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
|
|
118
|
+
*/
|
|
107
119
|
const ScoreSemiDonut = exports.ScoreSemiDonut = (0, _core.createComponent)(DonutRoot, {}, {
|
|
108
120
|
enhancements: [() => {
|
|
109
121
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Donut.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_useCssVariable","_react","_ScoreDonutUtils","style","sstyled","insert","DonutRoot","Component","render","_ref","asProps","_ref2","SDonutContainer","Box","value","styles","baseBgColor","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","ScoreDonutUtils","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","viewBox","radius","strokeWidth","undefined","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","_defineProperty2","cssVariableEnhance","variable","fallback","map","v","Number","parseInt","toString","prop","resolveColorEnhance","ScoreDonut","exports","createComponent","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled, assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport React from 'react';\n\nimport style from './donut.shadow.css';\nimport type { CommonScoreProps } from './Score';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\
|
|
1
|
+
{"version":3,"file":"Donut.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_useCssVariable","_react","_ScoreDonutUtils","style","sstyled","insert","DonutRoot","Component","render","_ref","asProps","_ref2","SDonutContainer","Box","value","styles","baseBgColor","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","ScoreDonutUtils","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","viewBox","radius","strokeWidth","undefined","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","_defineProperty2","cssVariableEnhance","variable","fallback","map","v","Number","parseInt","toString","prop","resolveColorEnhance","ScoreDonut","exports","createComponent","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled, assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport React from 'react';\n\nimport style from './donut.shadow.css';\nimport type { CommonScoreProps } from './Score';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype ScoreDonutDefaultProps = {\n animate: true;\n};\n\ntype ScoreDonutComponent = Intergalactic.Component<'svg', ScoreDonutProps, {}, typeof DonutRoot.enhance>;\nclass DonutRoot extends Component<\n ScoreDonutProps,\n typeof DonutRoot.enhance,\n {},\n {},\n {},\n ScoreDonutDefaultProps\n> {\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-extra-slow',\n fallback: '500',\n map: (v: string) => Number.parseInt(v, 10).toString(),\n prop: 'duration',\n }),\n resolveColorEnhance(),\n ] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n } as const;\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 animate,\n duration,\n } = this.asProps;\n\n const scoreDonut = new ScoreDonutUtils(value, isSemiDonut);\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <SDonutContainer render={Box} semi={isSemiDonut} __excludeProps={__excludeProps}>\n <svg\n width='100%'\n height='100%'\n viewBox={scoreDonut.viewBox}\n fill='none'\n role='img'\n {...extractedAriaProps}\n >\n <g>\n <circle\n cx='12'\n cy='12'\n r={scoreDonut.radius}\n strokeWidth={scoreDonut.strokeWidth}\n stroke={resolveColor(baseBgColor)}\n strokeDasharray={\n loading\n ? undefined\n : `${scoreDonut.baseLength} ${scoreDonut.fullLength}`\n }\n strokeDashoffset={scoreDonut.baseOffset}\n >\n {animate && value > 0 && (\n <>\n <animate\n attributeName='stroke-dasharray'\n from={`${scoreDonut.animatedBaseLengthFrom} ${scoreDonut.fullLength}`}\n to={`${scoreDonut.animatedBaseLengthTo} ${scoreDonut.fullLength}`}\n dur={duration + 'ms'}\n />\n <animate\n attributeName='stroke-dashoffset'\n from={-1 * scoreDonut.startMargin}\n to={scoreDonut.baseOffset}\n dur={duration + 'ms'}\n />\n </>\n )}\n </circle>\n {!loading && value > 0 && (\n <>\n <circle\n cx='12'\n cy='12'\n r={scoreDonut.radius}\n strokeWidth={scoreDonut.strokeWidth}\n stroke={resolveColor(color)}\n strokeDasharray={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n >\n {animate && (\n <animate\n attributeName='stroke-dasharray'\n from={`0 ${scoreDonut.fullLength}`}\n to={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n dur={duration + 'ms'}\n />\n )}\n </circle>\n </>\n )}\n </g>\n </svg>\n </SDonutContainer>,\n );\n }\n}\n\n/**\n * MiniCharts.ScoreDount\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreDonut = createComponent<\n ScoreDonutComponent,\n typeof DonutRoot\n>(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\n/**\n * MiniCharts.ScoreSemiDount\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreSemiDonut = createComponent<\n ScoreDonutComponent,\n typeof DonutRoot\n>(\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":";;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AAFA,IAAAC,eAAA,GAAAD,OAAA;AAGA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAF,sBAAA,CAAAJ,OAAA;AAIA,IAAAO,gBAAA,GAAAP,OAAA;AAA8D;AAAA,MAAAQ,KAAA,8BAAAT,KAAA,CAAAU,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAS9D,MAAMC,SAAS,SAASC,eAAS,CAO/B;EAiBAC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,eAAe,GAiBMC,mBAAG;IAhB9B,MAAM;MACJC,KAAK;MACLC,MAAM;MACNC,WAAW,GAAG,8BAA8B;MAC5CC,KAAK,GAAG,uBAAuB;MAC/BC,YAAY;MACZC,WAAW;MACXC,OAAO;MACPC,OAAO;MACPC;IACF,CAAC,GAAG,IAAI,CAACZ,OAAO;IAEhB,MAAMa,UAAU,GAAG,IAAIC,gCAAe,CAACV,KAAK,EAAEK,WAAW,CAAC;IAC1D,MAAM;MAAEM,cAAc;MAAEC;IAAmB,CAAC,GAAG,IAAAC,2BAAgB,EAAC,IAAI,CAACjB,OAAO,CAAC;IAE7E,OAAAC,KAAA,GAAO,IAAAP,aAAO,EAACW,MAAM,CAAC,eACpBd,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACjB,eAAe,EAAAD,KAAA,CAAAmB,EAAA;MAAA,OAAApC,KAAA,CAAAqC,WAAA;QAAA,QAAoBZ,WAAW;QAAA,kBAAkBM;MAAc,GAAAhB,IAAA;IAAA,iBAC7ER,MAAA,CAAA2B,OAAA,CAAAC,aAAA,QAAAlB,KAAA,CAAAmB,EAAA;MAAA,SACQ,MAAM;MAAA,UACL,MAAM;MAAA,WACJP,UAAU,CAACS,OAAO;MAAA,QACtB,MAAM;MAAA,QACN,KAAK;MAAA,GACNN;IAAkB,iBAEtBzB,MAAA,CAAA2B,OAAA,CAAAC,aAAA,MAAAlB,KAAA,CAAAmB,EAAA,wBACE7B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,WAAAlB,KAAA,CAAAmB,EAAA;MAAA,MACK,IAAI;MAAA,MACJ,IAAI;MAAA,KACJP,UAAU,CAACU,MAAM;MAAA,eACPV,UAAU,CAACW,WAAW;MAAA,UAC3BhB,YAAY,CAACF,WAAW,CAAC;MAAA,mBAE/BI,OAAO,GACHe,SAAS,GACT,GAAGZ,UAAU,CAACa,UAAU,IAAIb,UAAU,CAACc,UAAU,EAAE;MAAA,oBAEvCd,UAAU,CAACe;IAAU,IAEtCjB,OAAO,IAAIP,KAAK,GAAG,CAAC,iBACnBb,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAAA5B,MAAA,CAAA2B,OAAA,CAAAW,QAAA,qBACEtC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,YAAAlB,KAAA,CAAAmB,EAAA;MAAA,iBACgB,kBAAkB;MAAA,QAC1B,GAAGP,UAAU,CAACiB,sBAAsB,IAAIjB,UAAU,CAACc,UAAU,EAAE;MAAA,MACjE,GAAGd,UAAU,CAACkB,oBAAoB,IAAIlB,UAAU,CAACc,UAAU,EAAE;MAAA,OAC5Df,QAAQ,GAAG;IAAI,EACrB,CAAC,eACFrB,MAAA,CAAA2B,OAAA,CAAAC,aAAA,YAAAlB,KAAA,CAAAmB,EAAA;MAAA,iBACgB,mBAAmB;MAAA,QAC3B,CAAC,CAAC,GAAGP,UAAU,CAACmB,WAAW;MAAA,MAC7BnB,UAAU,CAACe,UAAU;MAAA,OACpBhB,QAAQ,GAAG;IAAI,EACrB,CACD,CAEE,CAAC,EACR,CAACF,OAAO,IAAIN,KAAK,GAAG,CAAC,iBACpBb,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAAA5B,MAAA,CAAA2B,OAAA,CAAAW,QAAA,qBACEtC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,WAAAlB,KAAA,CAAAmB,EAAA;MAAA,MACK,IAAI;MAAA,MACJ,IAAI;MAAA,KACJP,UAAU,CAACU,MAAM;MAAA,eACPV,UAAU,CAACW,WAAW;MAAA,UAC3BhB,YAAY,CAACD,KAAK,CAAC;MAAA,mBACV,GAAGM,UAAU,CAACoB,WAAW,IAAIpB,UAAU,CAACc,UAAU;IAAE,IAEpEhB,OAAO,iBACNpB,MAAA,CAAA2B,OAAA,CAAAC,aAAA,YAAAlB,KAAA,CAAAmB,EAAA;MAAA,iBACgB,kBAAkB;MAAA,QAC1B,KAAKP,UAAU,CAACc,UAAU,EAAE;MAAA,MAC9B,GAAGd,UAAU,CAACoB,WAAW,IAAIpB,UAAU,CAACc,UAAU,EAAE;MAAA,OACnDf,QAAQ,GAAG;IAAI,EACrB,CAEG,CACR,CAEH,CACA,CACU,CAAC;EAEtB;AACF;;AAEA;AACA;AACA;AACA;AACA;AAJA,IAAAsB,gBAAA,CAAAhB,OAAA,EA9GMtB,SAAS,aAQI,CACf,IAAAuC,kCAAkB,EAAC;EACjBC,QAAQ,EAAE,qCAAqC;EAC/CC,QAAQ,EAAE,KAAK;EACfC,GAAG,EAAGC,CAAS,IAAKC,MAAM,CAACC,QAAQ,CAACF,CAAC,EAAE,EAAE,CAAC,CAACG,QAAQ,CAAC,CAAC;EACrDC,IAAI,EAAE;AACR,CAAC,CAAC,EACF,IAAAC,4BAAmB,EAAC,CAAC,CACtB;AAAA,IAAAV,gBAAA,CAAAhB,OAAA,EAhBGtB,SAAS,WAkBEH,KAAK;AAAA,IAAAyC,gBAAA,CAAAhB,OAAA,EAlBhBtB,SAAS,kBAoBS;EACpBe,OAAO,EAAE;AACX,CAAC;AA6FI,MAAMkC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,IAAAE,qBAAe,EAGvCnD,SAAS,CAAC;AAEZiD,UAAU,CAACG,WAAW,GAAG,sBAAsB;;AAE/C;AACA;AACA;AACA;AACA;AACO,MAAMC,cAAc,GAAAH,OAAA,CAAAG,cAAA,GAAG,IAAAF,qBAAe,EAI3CnD,SAAS,EACT,CAAC,CAAC,EACF;EACEsD,YAAY,EAAE,CACZ,MAAM;IACJ,OAAO;MACLC,YAAY,EAAGC,KAAsB,IAAK;QACxC,OAAO,IAAA/B,iBAAW,EAAC+B,KAAK,EAAE;UAAE3C,WAAW,EAAE;QAAK,CAAC,CAAC;MAClD;IACF,CAAC;EACH,CAAC;AAEL,CACF,CAAC;AAEDwC,cAAc,CAACD,WAAW,GAAG,0BAA0B","ignoreList":[]}
|
|
@@ -11,26 +11,26 @@ var _baseComponents = require("@semcore/base-components");
|
|
|
11
11
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
12
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
/*!__reshadow-styles__:"./line.shadow.css"*/
|
|
14
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"
|
|
14
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_fb95t_gg_.__loading_fb95t_gg_,.___SLineGauge_fb95t_gg_.__loading_fb95t_gg_,.___STrendBar_fb95t_gg_.__loading_fb95t_gg_,.___STrendLine_fb95t_gg_.__loading_fb95t_gg_{animation-name:pulse_fb95t;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_fb95t{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SLineGauge_fb95t_gg_{height:8px;background-color:var(--base-bg-color_fb95t,var(--intergalactic-chart-grid-bar-chart-base-bg,#f1f2f2));border-radius:var(--intergalactic-chart-rounded,2px);overflow:hidden;position:relative}.___SLineValue_fb95t_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded,2px) 0 0 var(--intergalactic-chart-rounded,2px)}.___SLineValue_fb95t_gg_.__percent_fb95t_gg_{width:var(--percent_fb95t)}.___SLineSegmentItem_fb95t_gg_.__color_fb95t_gg_,.___SLineValue_fb95t_gg_.__color_fb95t_gg_{background-color:var(--color_fb95t,var(--intergalactic-chart-palette-order-1,#666bdb))}.___SLineGauge_fb95t_gg_.__segments_fb95t_gg_{border-radius:var(--intergalactic-progress-bar-rounded,6px)}.___SAnimationLine_fb95t_gg_,.___SLineGaugeSegment_fb95t_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_fb95t_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_fb95t_gg_{height:8px;background:#0000;border-right:1px solid var(--intergalactic-chart-grid-border,#fff);box-sizing:initial}.___SAnimationLine_fb95t_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg,#f1f2f2);transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out;animation-name:move-line_fb95t;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes move-line_fb95t{0%{transform:translateX(0)}to{transform:translateX(100%)}}", /*__inner_css_end__*/"fb95t_gg_"),
|
|
15
15
|
/*__reshadow_css_end__*/
|
|
16
16
|
{
|
|
17
|
-
"__SLineGauge": "
|
|
18
|
-
"_loading": "
|
|
19
|
-
"__SDonutContainer": "
|
|
20
|
-
"__STrendLine": "
|
|
21
|
-
"__STrendBar": "
|
|
22
|
-
"@pulse": "
|
|
23
|
-
"__SLineValue": "
|
|
24
|
-
"_percent": "
|
|
25
|
-
"--percent": "--
|
|
26
|
-
"_color": "
|
|
27
|
-
"__SLineSegmentItem": "
|
|
28
|
-
"_segments": "
|
|
29
|
-
"__SLineGaugeSegment": "
|
|
30
|
-
"__SAnimationLine": "
|
|
31
|
-
"@move-line": "move-
|
|
32
|
-
"--base-bg-color": "--base-bg-
|
|
33
|
-
"--color": "--
|
|
17
|
+
"__SLineGauge": "___SLineGauge_fb95t_gg_",
|
|
18
|
+
"_loading": "__loading_fb95t_gg_",
|
|
19
|
+
"__SDonutContainer": "___SDonutContainer_fb95t_gg_",
|
|
20
|
+
"__STrendLine": "___STrendLine_fb95t_gg_",
|
|
21
|
+
"__STrendBar": "___STrendBar_fb95t_gg_",
|
|
22
|
+
"@pulse": "pulse_fb95t",
|
|
23
|
+
"__SLineValue": "___SLineValue_fb95t_gg_",
|
|
24
|
+
"_percent": "__percent_fb95t_gg_",
|
|
25
|
+
"--percent": "--percent_fb95t",
|
|
26
|
+
"_color": "__color_fb95t_gg_",
|
|
27
|
+
"__SLineSegmentItem": "___SLineSegmentItem_fb95t_gg_",
|
|
28
|
+
"_segments": "__segments_fb95t_gg_",
|
|
29
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_fb95t_gg_",
|
|
30
|
+
"__SAnimationLine": "___SAnimationLine_fb95t_gg_",
|
|
31
|
+
"@move-line": "move-line_fb95t",
|
|
32
|
+
"--base-bg-color": "--base-bg-color_fb95t",
|
|
33
|
+
"--color": "--color_fb95t"
|
|
34
34
|
});
|
|
35
35
|
class LineRoot extends _core.Component {
|
|
36
36
|
getSegmentProps(segmentProps) {
|
|
@@ -127,6 +127,12 @@ function Segment(props) {
|
|
|
127
127
|
}));
|
|
128
128
|
}
|
|
129
129
|
Segment.displayName = 'Segment';
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* MiniCharts.ScoreLine
|
|
133
|
+
*
|
|
134
|
+
* {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
|
|
135
|
+
*/
|
|
130
136
|
const ScoreLine = exports.ScoreLine = (0, _core.createComponent)(LineRoot, {
|
|
131
137
|
Segment
|
|
132
138
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","LineRoot","Component","getSegmentProps","segmentProps","children","resolveColor","asProps","sum","React","Children","forEach","child","isValidElement","props","value","width","color","render","_ref","_ref5","SLineGauge","Box","SLineValue","SAnimationLine","SLineGaugeSegment","Flex","SLineSegmentItem","styles","baseBgColor","loading","animate","undefined","_ref3","default","createElement","cn","assignProps","segments","SegmentItems","i","_ref4","push","percent","Boolean","length","_defineProperty2","resolveColorEnhance","Segment","_ref2","arguments[0]","_ref6","displayName","ScoreLine","exports","createComponent"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import { Box, Flex } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from './line.shadow.css';\nimport type {\n ScoreLineComponent,\n ScoreLineGaugeProps,\n SegmentProps,\n InnerSegmentProps,\n} from './Line.types';\n\nclass LineRoot extends Component
|
|
1
|
+
{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","LineRoot","Component","getSegmentProps","segmentProps","children","resolveColor","asProps","sum","React","Children","forEach","child","isValidElement","props","value","width","color","render","_ref","_ref5","SLineGauge","Box","SLineValue","SAnimationLine","SLineGaugeSegment","Flex","SLineSegmentItem","styles","baseBgColor","loading","animate","undefined","_ref3","default","createElement","cn","assignProps","segments","SegmentItems","i","_ref4","push","percent","Boolean","length","_defineProperty2","resolveColorEnhance","Segment","_ref2","arguments[0]","_ref6","displayName","ScoreLine","exports","createComponent"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import { Box, Flex } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from './line.shadow.css';\nimport type {\n ScoreLineComponent,\n ScoreLineGaugeProps,\n SegmentProps,\n InnerSegmentProps,\n ScoreLineGaugeDefaultProps,\n} from './Line.types';\n\nclass LineRoot extends Component<\n ScoreLineGaugeProps,\n typeof LineRoot.enhance,\n {},\n {},\n {},\n ScoreLineGaugeDefaultProps\n> {\n static enhance = [resolveColorEnhance()] as const;\n static displayName = 'ScoreLine';\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n } as const;\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, value } = props;\n const SLineSegmentItem = Root;\n\n if (!value) return null;\n\n return sstyled(styles)(<SLineSegmentItem render={Box} />);\n}\nSegment.displayName = 'Segment';\n\n/**\n * MiniCharts.ScoreLine\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreLine = createComponent<\n ScoreLineComponent,\n typeof LineRoot\n>(LineRoot, { Segment });\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.types.js","names":[],"sources":["../../../../src/component/score/Line.types.ts"],"sourcesContent":["import type { BoxProps, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport type React from 'react';\n\nimport type { CommonScoreProps } from './Score';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\nexport type SegmentColor = `chart-palette-order-${Range<1, 24>}`;\n\nexport type SegmentProps = {\n value: number;\n /**\n * Color of value\n */\n color: SegmentColor;\n};\n\ntype SegmentComponent = React.FC<SegmentProps>;\n\nexport type InnerSegmentProps = SegmentProps & {\n styles: React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>;\n};\n\ntype ValuedScoreProps = {\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 * Color of value\n */\n color?: SegmentColor;\n /**\n * Count of line segments\n */\n segments?: number;\n /**\n * We don't accept children in this way\n */\n children?: never;\n};\n\ntype CustomRenderScoreProps = {\n children: SegmentComponent[];\n};\n\nexport type ScoreLineGaugeProps = BoxProps &\n Intergalactic.InternalTypings.EfficientOmit<CommonScoreProps, 'value' | 'color'> &\n (ValuedScoreProps | CustomRenderScoreProps);\n\nexport type Enhances = [() => {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n}];\n\nexport type ScoreLineComponent = Intergalactic.Component<'svg', ScoreLineGaugeProps, {}, Enhances> & {\n Segment: Intergalactic.Component<typeof Box, SegmentProps>;\n};\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Line.types.js","names":[],"sources":["../../../../src/component/score/Line.types.ts"],"sourcesContent":["import type { BoxProps, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport type React from 'react';\n\nimport type { CommonScoreProps } from './Score';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\nexport type SegmentColor = `chart-palette-order-${Range<1, 24>}`;\n\nexport type SegmentProps = {\n value: number;\n /**\n * Color of value\n */\n color: SegmentColor;\n};\n\ntype SegmentComponent = React.FC<SegmentProps>;\n\nexport type InnerSegmentProps = SegmentProps & {\n styles: React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>;\n};\n\ntype ValuedScoreProps = {\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 * Color of value\n */\n color?: SegmentColor;\n /**\n * Count of line segments\n */\n segments?: number;\n /**\n * We don't accept children in this way\n */\n children?: never;\n};\n\ntype CustomRenderScoreProps = {\n value?: never;\n segments?: never;\n color?: never;\n children: SegmentComponent[];\n};\n\nexport type ScoreLineGaugeProps = BoxProps &\n Intergalactic.InternalTypings.EfficientOmit<CommonScoreProps, 'value' | 'color'> &\n (ValuedScoreProps | CustomRenderScoreProps);\n\nexport type ScoreLineGaugeDefaultProps = {\n animate: true;\n};\n\nexport type Enhances = [() => {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n}];\n\nexport type ScoreLineComponent = Intergalactic.Component<'svg', ScoreLineGaugeProps, {}, Enhances> & {\n Segment: Intergalactic.Component<typeof Box, SegmentProps>;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -13,15 +13,15 @@ var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/uti
|
|
|
13
13
|
var _react = _interopRequireDefault(require("react"));
|
|
14
14
|
var _Trend = require("./Trend");
|
|
15
15
|
/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
16
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"
|
|
16
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1b4gu_gg_.__loading_1b4gu_gg_,.___SLineGauge_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendBar_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendLine_1b4gu_gg_.__loading_1b4gu_gg_{animation-name:pulse_1b4gu;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1b4gu{0%{opacity:1}50%{opacity:.4}to{opacity:1}}", /*__inner_css_end__*/"1b4gu_gg_"),
|
|
17
17
|
/*__reshadow_css_end__*/
|
|
18
18
|
{
|
|
19
|
-
"__SLineGauge": "
|
|
20
|
-
"_loading": "
|
|
21
|
-
"__SDonutContainer": "
|
|
22
|
-
"__STrendLine": "
|
|
23
|
-
"__STrendBar": "
|
|
24
|
-
"@pulse": "
|
|
19
|
+
"__SLineGauge": "___SLineGauge_1b4gu_gg_",
|
|
20
|
+
"_loading": "__loading_1b4gu_gg_",
|
|
21
|
+
"__SDonutContainer": "___SDonutContainer_1b4gu_gg_",
|
|
22
|
+
"__STrendLine": "___STrendLine_1b4gu_gg_",
|
|
23
|
+
"__STrendBar": "___STrendBar_1b4gu_gg_",
|
|
24
|
+
"@pulse": "pulse_1b4gu"
|
|
25
25
|
});
|
|
26
26
|
class TrendBarRoot extends _Trend.Trend {
|
|
27
27
|
get defaultData() {
|
|
@@ -92,6 +92,12 @@ class TrendBarRoot extends _Trend.Trend {
|
|
|
92
92
|
})));
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* MiniCharts.TrendBar
|
|
98
|
+
*
|
|
99
|
+
* {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
|
|
100
|
+
*/
|
|
95
101
|
(0, _defineProperty2.default)(TrendBarRoot, "enhance", [(0, _resolveColorEnhance.default)()]);
|
|
96
102
|
(0, _defineProperty2.default)(TrendBarRoot, "style", style);
|
|
97
103
|
(0, _defineProperty2.default)(TrendBarRoot, "defaultProps", {
|
|
@@ -99,6 +105,12 @@ class TrendBarRoot extends _Trend.Trend {
|
|
|
99
105
|
});
|
|
100
106
|
const TrendBar = exports.TrendBar = (0, _core.createComponent)(TrendBarRoot);
|
|
101
107
|
TrendBar.displayName = 'MiniChart.TrendBar';
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* MiniCharts.TrendHistogram
|
|
111
|
+
*
|
|
112
|
+
* {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
|
|
113
|
+
*/
|
|
102
114
|
const TrendHistogram = exports.TrendHistogram = (0, _core.createComponent)(TrendBarRoot, {}, {
|
|
103
115
|
enhancements: [() => {
|
|
104
116
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bar.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_react","_Trend","style","sstyled","insert","TrendBarRoot","Trend","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","Box","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty2","resolveColorEnhance","TrendBar","exports","createComponent","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n /**\n * Value\n */\n value: number;\n /**\n * Color of value\n */\n color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n /**\n * Data to bar chart\n */\n data: BarItem[];\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance> {\n static enhance = [resolveColorEnhance()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n get defaultData(): BarItem[] {\n return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n }\n\n get data(): BarItem[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n render() {\n const STrendBar = Root;\n const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n const step = this.defaultWidth / this.data.length;\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n <svg\n width='100%'\n height='100%'\n viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n role='img'\n {...extractedAriaProps}\n >\n {this.data.map((barItem, index) => {\n let color = resolveColor('chart-palette-order-other-data');\n\n if (barItem.color) {\n color = resolveColor(barItem.color);\n }\n\n return (\n <rect\n key={index}\n x={step * index}\n y={this.defaultHeight - barItem.value}\n width={isHistogram ? step : step * 0.8}\n height={barItem.value}\n fill={color}\n >\n {animate && !loading && (\n <animate\n attributeName='y'\n values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n dur='500ms'\n />\n )}\n </rect>\n );\n })}\n </svg>\n </STrendBar>,\n );\n }\n}\n\
|
|
1
|
+
{"version":3,"file":"Bar.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_react","_Trend","style","sstyled","insert","TrendBarRoot","Trend","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","Box","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty2","resolveColorEnhance","TrendBar","exports","createComponent","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n /**\n * Value\n */\n value: number;\n /**\n * Color of value\n */\n color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n /**\n * Data to bar chart\n */\n data: BarItem[];\n};\n\ntype TrendBarComponent = Intergalactic.Component<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>;\n\ntype TrendBarDefaultProps = {\n animate: true;\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance, TrendBarDefaultProps> {\n static enhance = [resolveColorEnhance()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n } as const;\n\n get defaultData(): BarItem[] {\n return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n }\n\n get data(): BarItem[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n render() {\n const STrendBar = Root;\n const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n const step = this.defaultWidth / this.data.length;\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n <svg\n width='100%'\n height='100%'\n viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n role='img'\n {...extractedAriaProps}\n >\n {this.data.map((barItem, index) => {\n let color = resolveColor('chart-palette-order-other-data');\n\n if (barItem.color) {\n color = resolveColor(barItem.color);\n }\n\n return (\n <rect\n key={index}\n x={step * index}\n y={this.defaultHeight - barItem.value}\n width={isHistogram ? step : step * 0.8}\n height={barItem.value}\n fill={color}\n >\n {animate && !loading && (\n <animate\n attributeName='y'\n values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n dur='500ms'\n />\n )}\n </rect>\n );\n })}\n </svg>\n </STrendBar>,\n );\n }\n}\n\n/**\n * MiniCharts.TrendBar\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendBar = createComponent<\n TrendBarComponent,\n typeof TrendBarRoot\n>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\n/**\n * MiniCharts.TrendHistogram\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendHistogram = createComponent<\n TrendBarComponent,\n typeof TrendBarRoot\n>(\n TrendBarRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: TrendBarProps) => {\n return assignProps(props, { isHistogram: true });\n },\n };\n },\n ],\n },\n);\n\nTrendHistogram.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -14,15 +14,15 @@ var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID
|
|
|
14
14
|
var _react = _interopRequireDefault(require("react"));
|
|
15
15
|
var _Trend = require("./Trend");
|
|
16
16
|
/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
17
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"
|
|
17
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1b4gu_gg_.__loading_1b4gu_gg_,.___SLineGauge_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendBar_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendLine_1b4gu_gg_.__loading_1b4gu_gg_{animation-name:pulse_1b4gu;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1b4gu{0%{opacity:1}50%{opacity:.4}to{opacity:1}}", /*__inner_css_end__*/"1b4gu_gg_"),
|
|
18
18
|
/*__reshadow_css_end__*/
|
|
19
19
|
{
|
|
20
|
-
"__SLineGauge": "
|
|
21
|
-
"_loading": "
|
|
22
|
-
"__SDonutContainer": "
|
|
23
|
-
"__STrendLine": "
|
|
24
|
-
"__STrendBar": "
|
|
25
|
-
"@pulse": "
|
|
20
|
+
"__SLineGauge": "___SLineGauge_1b4gu_gg_",
|
|
21
|
+
"_loading": "__loading_1b4gu_gg_",
|
|
22
|
+
"__SDonutContainer": "___SDonutContainer_1b4gu_gg_",
|
|
23
|
+
"__STrendLine": "___STrendLine_1b4gu_gg_",
|
|
24
|
+
"__STrendBar": "___STrendBar_1b4gu_gg_",
|
|
25
|
+
"@pulse": "pulse_1b4gu"
|
|
26
26
|
});
|
|
27
27
|
class TrendLineRoot extends _Trend.Trend {
|
|
28
28
|
get defaultData() {
|
|
@@ -126,6 +126,12 @@ class TrendLineRoot extends _Trend.Trend {
|
|
|
126
126
|
}))))));
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* MiniCharts.TrendLine
|
|
132
|
+
*
|
|
133
|
+
* {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
|
|
134
|
+
*/
|
|
129
135
|
(0, _defineProperty2.default)(TrendLineRoot, "enhance", [(0, _resolveColorEnhance.default)(), (0, _uniqueID.default)()]);
|
|
130
136
|
(0, _defineProperty2.default)(TrendLineRoot, "style", style);
|
|
131
137
|
(0, _defineProperty2.default)(TrendLineRoot, "defaultProps", {
|
|
@@ -133,6 +139,12 @@ class TrendLineRoot extends _Trend.Trend {
|
|
|
133
139
|
});
|
|
134
140
|
const TrendLine = exports.TrendLine = (0, _core.createComponent)(TrendLineRoot);
|
|
135
141
|
TrendLine.displayName = 'MiniChart.TrendLine';
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* MiniCharts.TrendArea
|
|
145
|
+
*
|
|
146
|
+
* {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
|
|
147
|
+
*/
|
|
136
148
|
const TrendArea = exports.TrendArea = (0, _core.createComponent)(TrendLineRoot, {}, {
|
|
137
149
|
enhancements: [() => {
|
|
138
150
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_uniqueID","_react","_Trend","style","sstyled","insert","TrendLineRoot","Trend","defaultData","lastPointRadius","asProps","data","loading","svgWidth","lastPointColor","defaultWidth","svgHeight","defaultHeight","color","resolveColor","render","_ref","_ref2","STrendLine","Box","uid","withArea","animate","styles","points","length","step","i","push","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","containerRef","join","_defineProperty2","resolveColorEnhance","uniqueIDEnhancement","TrendLine","exports","createComponent","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Line.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\nexport type TrendLineProps = CommonTrendProps & {\n /**\n * List of values\n */\n data: number[];\n\n /**\n * Color of line\n */\n color?: string;\n\n /**\n * Color of last point in chart\n */\n lastPointColor?: string;\n\n /**\n * Radius for last point item\n */\n lastPointRadius?: number;\n};\n\nclass TrendLineRoot extends Trend<TrendLineProps, typeof TrendLineRoot.enhance> {\n static enhance = [resolveColorEnhance(), uniqueIDEnhancement()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n get defaultData(): number[] {\n return [15, 70, 20, 85, 20];\n }\n\n get lastPointRadius(): number {\n return this.asProps.lastPointRadius ?? 6;\n }\n\n get data(): number[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n override get svgWidth(): number {\n return this.asProps.lastPointColor\n ? this.defaultWidth + this.lastPointRadius\n : this.defaultWidth;\n }\n\n override get svgHeight(): number {\n return this.asProps.lastPointColor\n ? this.defaultHeight + this.lastPointRadius\n : this.defaultHeight;\n }\n\n get color() {\n const { resolveColor, color = 'chart-palette-order-1', loading } = this.asProps;\n\n if (loading) {\n return resolveColor('skeleton-bg');\n }\n\n return resolveColor(color);\n }\n\n render() {\n const STrendLine = Root;\n const { uid, withArea, animate, lastPointColor, resolveColor, loading, styles } = this.asProps;\n\n const points: string[] = [];\n const length = this.data.length;\n const step = this.defaultWidth / (length - 1);\n\n for (let i = 0; i < length; i++) {\n points.push(`${step * i},${this.defaultHeight - this.data[i]}`);\n }\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendLine render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n <svg\n width='100%'\n height='100%'\n viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n role='img'\n {...extractedAriaProps}\n >\n <polyline\n points={points.join(' ')}\n stroke={this.color}\n strokeWidth='4'\n fill='none'\n clipPath={`url(#${uid})`}\n />\n {withArea && (\n <polyline\n points={`0,${this.defaultHeight} ${points.join(' ')} ${this.defaultWidth},${\n this.defaultHeight\n }`}\n fill={this.color}\n fillOpacity={0.2}\n clipPath={`url(#${uid})`}\n />\n )}\n {lastPointColor && !loading && (\n <circle\n cx={step * (length - 1)}\n cy={this.defaultHeight - this.data[length - 1]}\n r={this.lastPointRadius}\n fill={resolveColor(lastPointColor)}\n stroke={resolveColor('chart-grid-border')}\n strokeWidth={4}\n clipPath={`url(#${uid})`}\n />\n )}\n\n {animate && !loading && (\n <clipPath id={uid}>\n <rect x='0' y='0' width='100%' height='100%' fill='black'>\n <animate dur='500ms' attributeName='width' values='0;100%' />\n </rect>\n </clipPath>\n )}\n </svg>\n </STrendLine>,\n );\n }\n}\n\nexport const TrendLine = createComponent<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>(TrendLineRoot);\n\nTrendLine.displayName = 'MiniChart.TrendLine';\n\nexport const TrendArea = createComponent<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>(\n TrendLineRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: TrendLineProps) => {\n return assignProps(props, { withArea: true });\n },\n };\n },\n ],\n },\n);\n\nTrendArea.displayName = 'MiniChart.TrendArea';\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_uniqueID","_react","_Trend","style","sstyled","insert","TrendLineRoot","Trend","defaultData","lastPointRadius","asProps","data","loading","svgWidth","lastPointColor","defaultWidth","svgHeight","defaultHeight","color","resolveColor","render","_ref","_ref2","STrendLine","Box","uid","withArea","animate","styles","points","length","step","i","push","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","containerRef","join","_defineProperty2","resolveColorEnhance","uniqueIDEnhancement","TrendLine","exports","createComponent","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Line.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\nexport type TrendLineProps = CommonTrendProps & {\n /**\n * List of values\n */\n data: number[];\n\n /**\n * Color of line\n */\n color?: string;\n\n /**\n * Color of last point in chart\n */\n lastPointColor?: string;\n\n /**\n * Radius for last point item\n */\n lastPointRadius?: number;\n};\n\ntype TrendLineComponent = Intergalactic.Component<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>;\n\ntype TrendLineDefaultProps = {\n animate: true;\n};\n\nclass TrendLineRoot extends Trend<TrendLineProps, typeof TrendLineRoot.enhance, TrendLineDefaultProps> {\n static enhance = [resolveColorEnhance(), uniqueIDEnhancement()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n } as const;\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\n/**\n * MiniCharts.TrendLine\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendLine = createComponent<TrendLineComponent, typeof TrendLineRoot>(TrendLineRoot);\n\nTrendLine.displayName = 'MiniChart.TrendLine';\n\n/**\n * MiniCharts.TrendArea\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendArea = createComponent<TrendLineComponent, typeof TrendLineRoot>(\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":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Trend.js","names":["_core","require","_react","_interopRequireDefault","Trend","Component","constructor","args","_defineProperty2","default","width","height","React","createRef","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","defaultWidth","state","defaultHeight","svgWidth","svgHeight","containerRef","current","boundingClientRect","getBoundingClientRect","setState","exports"],"sources":["../../../../src/component/trend/Trend.tsx"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport { Component } from '@semcore/core';\nimport React from 'react';\n\nexport type CommonTrendProps = BoxProps & {\n /**\n * Flag to enable animate of charts\n * @default true\n */\n animate?: boolean;\n\n /**\n * Flag to enable skeleton\n * @default false\n */\n loading?: boolean;\n\n /**\n * Data for chart\n */\n data: any[];\n};\n\nexport abstract class Trend<\n P extends CommonTrendProps,\n E extends readonly ((...args: any[]) => any)[],\n> extends Component<P, E, Readonly<{}>, {
|
|
1
|
+
{"version":3,"file":"Trend.js","names":["_core","require","_react","_interopRequireDefault","Trend","Component","constructor","args","_defineProperty2","default","width","height","React","createRef","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","defaultWidth","state","defaultHeight","svgWidth","svgHeight","containerRef","current","boundingClientRect","getBoundingClientRect","setState","exports"],"sources":["../../../../src/component/trend/Trend.tsx"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Component } from '@semcore/core';\nimport React from 'react';\n\nexport type CommonTrendProps = BoxProps & {\n /**\n * Flag to enable animate of charts\n * @default true\n */\n animate?: boolean;\n\n /**\n * Flag to enable skeleton\n * @default false\n */\n loading?: boolean;\n\n /**\n * Data for chart\n */\n data: any[];\n};\n\ntype CommonTrendState = { width: number; height: number };\n\nexport abstract class Trend<\n P extends CommonTrendProps,\n E extends readonly ((...args: any[]) => any)[],\n DP extends Intergalactic.InternalTypings.ValidDefaultProps<DP, P> = never,\n> extends Component<P, E, Readonly<{}>, {}, CommonTrendState, DP> {\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":";;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAuBO,MAAeG,KAAK,SAIjBC,eAAS,CAA+C;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,iBACxD;MACNC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,qCAEcG,cAAK,CAACC,SAAS,CAAiB,CAAC;EAAA;EAEhDC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACC,QAAQ,CAAC,CAAC;EACjB;EAEAC,kBAAkBA,CAACC,SAAY,EAAE;IAC/B,IACEA,SAAS,CAACC,CAAC,KAAK,IAAI,CAACC,KAAK,CAACD,CAAC,IAC5BD,SAAS,CAACG,CAAC,KAAK,IAAI,CAACD,KAAK,CAACC,CAAC,IAC5BH,SAAS,CAACI,IAAI,KAAK,IAAI,CAACF,KAAK,CAACE,IAAI,EAClC;MACA,IAAI,CAACN,QAAQ,CAAC,CAAC;IACjB;EACF;EAEA,IAAIO,YAAYA,CAAA,EAAW;IACzB,MAAM;MAAEZ,KAAK;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACY,KAAK;IAEpC,OAAQb,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACa,aAAa;EAC9C;EAEA,IAAIA,aAAaA,CAAA,EAAW;IAC1B,OAAO,GAAG;EACZ;EAEA,IAAIC,QAAQA,CAAA,EAAW;IACrB,OAAO,IAAI,CAACH,YAAY;EAC1B;EAEA,IAAII,SAASA,CAAA,EAAW;IACtB,OAAO,IAAI,CAACF,aAAa;EAC3B;EAEAT,QAAQA,CAAA,EAAG;IACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;MAC7B,MAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,CAAC,CAAC;MAE5E,MAAM;QAAEpB,KAAK;QAAEC;MAAO,CAAC,GAAGkB,kBAAkB;MAE5C,IAAInB,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;QAC3B,IAAI,CAACoB,QAAQ,CAAC;UAAErB,KAAK;UAAEC;QAAO,CAAC,CAAC;MAClC;IACF;EACF;AACF;AAACqB,OAAA,CAAA5B,KAAA,GAAAA,KAAA","ignoreList":[]}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_score","require","_trend","miniCharts","TrendLine","TrendArea","TrendBar","TrendHistogram","ScoreSemiDonut","ScoreDonut","ScoreLine","_default","exports","default"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n TrendLine: typeof TrendLine;\n TrendArea: typeof TrendArea;\n TrendBar: typeof TrendBar;\n TrendHistogram: typeof TrendHistogram;\n ScoreSemiDonut: typeof ScoreSemiDonut;\n ScoreDonut: typeof ScoreDonut;\n ScoreLine: typeof ScoreLine;\n} = {\n TrendLine,\n TrendArea,\n TrendBar,\n TrendHistogram,\n ScoreSemiDonut,\n ScoreDonut,\n ScoreLine,\n};\n\nexport default miniCharts;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;
|
|
1
|
+
{"version":3,"file":"index.js","names":["_score","require","_trend","miniCharts","TrendLine","TrendArea","TrendBar","TrendHistogram","ScoreSemiDonut","ScoreDonut","ScoreLine","_default","exports","default"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport type { SegmentColor } from './component/score/Line.types';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n TrendLine: typeof TrendLine;\n TrendArea: typeof TrendArea;\n TrendBar: typeof TrendBar;\n TrendHistogram: typeof TrendHistogram;\n ScoreSemiDonut: typeof ScoreSemiDonut;\n ScoreDonut: typeof ScoreDonut;\n ScoreLine: typeof ScoreLine;\n} = {\n TrendLine,\n TrendArea,\n TrendBar,\n TrendHistogram,\n ScoreSemiDonut,\n ScoreDonut,\n ScoreLine,\n};\n\nexport default miniCharts;\n\nexport type {\n SegmentColor,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEA,MAAME,UAQL,GAAG;EACFC,SAAS,EAATA,gBAAS;EACTC,SAAS,EAATA,gBAAS;EACTC,QAAQ,EAARA,eAAQ;EACRC,cAAc,EAAdA,qBAAc;EACdC,cAAc,EAAdA,qBAAc;EACdC,UAAU,EAAVA,iBAAU;EACVC,SAAS,EAATA;AACF,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,UAAU","ignoreList":[]}
|
|
@@ -8,17 +8,17 @@ import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEn
|
|
|
8
8
|
import { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';
|
|
9
9
|
import React from 'react';
|
|
10
10
|
/*!__reshadow-styles__:"./donut.shadow.css"*/
|
|
11
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"
|
|
11
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1k8k3_gg_.__loading_1k8k3_gg_,.___SLineGauge_1k8k3_gg_.__loading_1k8k3_gg_,.___STrendBar_1k8k3_gg_.__loading_1k8k3_gg_,.___STrendLine_1k8k3_gg_.__loading_1k8k3_gg_{animation-name:pulse_1k8k3;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1k8k3{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SDonutContainer_1k8k3_gg_.__semi_1k8k3_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1k8k3_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1k8k3_gg_.__animate_1k8k3_gg_ circle{transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out}", /*__inner_css_end__*/"1k8k3_gg_"),
|
|
12
12
|
/*__reshadow_css_end__*/
|
|
13
13
|
{
|
|
14
|
-
"__SLineGauge": "
|
|
15
|
-
"_loading": "
|
|
16
|
-
"__SDonutContainer": "
|
|
17
|
-
"__STrendLine": "
|
|
18
|
-
"__STrendBar": "
|
|
19
|
-
"@pulse": "
|
|
20
|
-
"_animate": "
|
|
21
|
-
"_semi": "
|
|
14
|
+
"__SLineGauge": "___SLineGauge_1k8k3_gg_",
|
|
15
|
+
"_loading": "__loading_1k8k3_gg_",
|
|
16
|
+
"__SDonutContainer": "___SDonutContainer_1k8k3_gg_",
|
|
17
|
+
"__STrendLine": "___STrendLine_1k8k3_gg_",
|
|
18
|
+
"__STrendBar": "___STrendBar_1k8k3_gg_",
|
|
19
|
+
"@pulse": "pulse_1k8k3",
|
|
20
|
+
"_animate": "__animate_1k8k3_gg_",
|
|
21
|
+
"_semi": "__semi_1k8k3_gg_"
|
|
22
22
|
});
|
|
23
23
|
import { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';
|
|
24
24
|
class DonutRoot extends Component {
|
|
@@ -87,6 +87,12 @@ class DonutRoot extends Component {
|
|
|
87
87
|
})))))));
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* MiniCharts.ScoreDount
|
|
93
|
+
*
|
|
94
|
+
* {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
|
|
95
|
+
*/
|
|
90
96
|
_defineProperty(DonutRoot, "enhance", [cssVariableEnhance({
|
|
91
97
|
variable: '--intergalactic-duration-extra-slow',
|
|
92
98
|
fallback: '500',
|
|
@@ -99,6 +105,12 @@ _defineProperty(DonutRoot, "defaultProps", {
|
|
|
99
105
|
});
|
|
100
106
|
export const ScoreDonut = createComponent(DonutRoot);
|
|
101
107
|
ScoreDonut.displayName = 'MiniChart.ScoreDonut';
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* MiniCharts.ScoreSemiDount
|
|
111
|
+
*
|
|
112
|
+
* {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
|
|
113
|
+
*/
|
|
102
114
|
export const ScoreSemiDonut = createComponent(DonutRoot, {}, {
|
|
103
115
|
enhancements: [() => {
|
|
104
116
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Donut.js","names":["Box","createComponent","Component","Root","sstyled","assignProps","extractAriaProps","resolveColorEnhance","cssVariableEnhance","React","style","_sstyled","insert","ScoreDonutUtils","DonutRoot","render","_ref","asProps","_ref2","SDonutContainer","value","styles","baseBgColor","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","viewBox","radius","strokeWidth","undefined","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","_defineProperty","variable","fallback","map","v","Number","parseInt","toString","prop","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled, assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport React from 'react';\n\nimport style from './donut.shadow.css';\nimport type { CommonScoreProps } from './Score';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\
|
|
1
|
+
{"version":3,"file":"Donut.js","names":["Box","createComponent","Component","Root","sstyled","assignProps","extractAriaProps","resolveColorEnhance","cssVariableEnhance","React","style","_sstyled","insert","ScoreDonutUtils","DonutRoot","render","_ref","asProps","_ref2","SDonutContainer","value","styles","baseBgColor","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","viewBox","radius","strokeWidth","undefined","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","_defineProperty","variable","fallback","map","v","Number","parseInt","toString","prop","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled, assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport React from 'react';\n\nimport style from './donut.shadow.css';\nimport type { CommonScoreProps } from './Score';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype ScoreDonutDefaultProps = {\n animate: true;\n};\n\ntype ScoreDonutComponent = Intergalactic.Component<'svg', ScoreDonutProps, {}, typeof DonutRoot.enhance>;\nclass DonutRoot extends Component<\n ScoreDonutProps,\n typeof DonutRoot.enhance,\n {},\n {},\n {},\n ScoreDonutDefaultProps\n> {\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-extra-slow',\n fallback: '500',\n map: (v: string) => Number.parseInt(v, 10).toString(),\n prop: 'duration',\n }),\n resolveColorEnhance(),\n ] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n } as const;\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 animate,\n duration,\n } = this.asProps;\n\n const scoreDonut = new ScoreDonutUtils(value, isSemiDonut);\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <SDonutContainer render={Box} semi={isSemiDonut} __excludeProps={__excludeProps}>\n <svg\n width='100%'\n height='100%'\n viewBox={scoreDonut.viewBox}\n fill='none'\n role='img'\n {...extractedAriaProps}\n >\n <g>\n <circle\n cx='12'\n cy='12'\n r={scoreDonut.radius}\n strokeWidth={scoreDonut.strokeWidth}\n stroke={resolveColor(baseBgColor)}\n strokeDasharray={\n loading\n ? undefined\n : `${scoreDonut.baseLength} ${scoreDonut.fullLength}`\n }\n strokeDashoffset={scoreDonut.baseOffset}\n >\n {animate && value > 0 && (\n <>\n <animate\n attributeName='stroke-dasharray'\n from={`${scoreDonut.animatedBaseLengthFrom} ${scoreDonut.fullLength}`}\n to={`${scoreDonut.animatedBaseLengthTo} ${scoreDonut.fullLength}`}\n dur={duration + 'ms'}\n />\n <animate\n attributeName='stroke-dashoffset'\n from={-1 * scoreDonut.startMargin}\n to={scoreDonut.baseOffset}\n dur={duration + 'ms'}\n />\n </>\n )}\n </circle>\n {!loading && value > 0 && (\n <>\n <circle\n cx='12'\n cy='12'\n r={scoreDonut.radius}\n strokeWidth={scoreDonut.strokeWidth}\n stroke={resolveColor(color)}\n strokeDasharray={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n >\n {animate && (\n <animate\n attributeName='stroke-dasharray'\n from={`0 ${scoreDonut.fullLength}`}\n to={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n dur={duration + 'ms'}\n />\n )}\n </circle>\n </>\n )}\n </g>\n </svg>\n </SDonutContainer>,\n );\n }\n}\n\n/**\n * MiniCharts.ScoreDount\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreDonut = createComponent<\n ScoreDonutComponent,\n typeof DonutRoot\n>(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\n/**\n * MiniCharts.ScoreSemiDount\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreSemiDonut = createComponent<\n ScoreDonutComponent,\n typeof DonutRoot\n>(\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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","ignoreList":[]}
|