@semcore/mini-chart 17.2.2 → 18.0.0-prerelease.0
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 +8 -0
- package/lib/cjs/component/score/line.shadow.css +4 -4
- package/lib/cjs/{component → components}/score/Donut.js +10 -10
- package/lib/cjs/components/score/Donut.js.map +1 -0
- package/lib/cjs/{component → components}/score/Line.js +24 -23
- package/lib/cjs/components/score/Line.js.map +1 -0
- package/lib/cjs/components/score/index.js.map +1 -0
- package/lib/cjs/{component → components}/trend/Bar.js +8 -8
- package/lib/cjs/components/trend/Bar.js.map +1 -0
- package/lib/cjs/{component → components}/trend/Line.js +8 -8
- package/lib/cjs/components/trend/Line.js.map +1 -0
- package/lib/cjs/components/trend/Trend.js.map +1 -0
- package/lib/cjs/components/trend/index.js.map +1 -0
- package/lib/cjs/index.js +3 -4
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/{component/score → styles}/donut.shadow.css +1 -1
- package/lib/cjs/styles/line.shadow.css +62 -0
- package/lib/cjs/types.js +2 -0
- package/lib/cjs/types.js.map +1 -0
- package/lib/es6/component/score/line.shadow.css +4 -4
- package/lib/es6/{component → components}/score/Donut.js +10 -10
- package/lib/es6/components/score/Donut.js.map +1 -0
- package/lib/es6/{component → components}/score/Line.js +24 -23
- package/lib/es6/components/score/Line.js.map +1 -0
- package/lib/es6/components/score/index.js +3 -0
- package/lib/es6/components/score/index.js.map +1 -0
- package/lib/es6/{component → components}/trend/Bar.js +8 -8
- package/lib/es6/components/trend/Bar.js.map +1 -0
- package/lib/es6/{component → components}/trend/Line.js +8 -8
- package/lib/es6/components/trend/Line.js.map +1 -0
- package/lib/es6/components/trend/Trend.js.map +1 -0
- package/lib/es6/components/trend/index.js +3 -0
- package/lib/es6/components/trend/index.js.map +1 -0
- package/lib/es6/index.js +3 -4
- package/lib/es6/index.js.map +1 -1
- package/lib/{esm/component/score → es6/styles}/donut.shadow.css +1 -1
- package/lib/es6/styles/line.shadow.css +62 -0
- package/lib/es6/types.js +2 -0
- package/lib/es6/types.js.map +1 -0
- package/lib/esm/component/score/line.shadow.css +4 -4
- package/lib/esm/{component → components}/score/Donut.mjs +11 -11
- package/lib/esm/{component → components}/score/Line.mjs +22 -24
- package/lib/esm/{component → components}/trend/Bar.mjs +9 -9
- package/lib/esm/{component → components}/trend/Line.mjs +9 -9
- package/lib/esm/index.mjs +8 -8
- package/lib/{es6/component/score → esm/styles}/donut.shadow.css +1 -1
- package/lib/esm/styles/line.shadow.css +62 -0
- package/lib/types/components/score/Donut.d.ts +14 -0
- package/lib/types/components/score/Donut.d.ts.map +1 -0
- package/lib/types/{component → components}/score/Line.d.ts +2 -2
- package/lib/types/components/score/Line.d.ts.map +1 -0
- package/lib/types/components/score/index.d.ts +3 -0
- package/lib/types/components/score/index.d.ts.map +1 -0
- package/lib/types/components/trend/Bar.d.ts +14 -0
- package/lib/types/components/trend/Bar.d.ts.map +1 -0
- package/lib/types/components/trend/Line.d.ts +14 -0
- package/lib/types/components/trend/Line.d.ts.map +1 -0
- package/lib/types/components/trend/Trend.d.ts +19 -0
- package/lib/types/components/trend/Trend.d.ts.map +1 -0
- package/lib/types/components/trend/index.d.ts +3 -0
- package/lib/types/components/trend/index.d.ts.map +1 -0
- package/lib/types/index.d.ts +11 -13
- package/lib/types/index.d.ts.map +1 -1
- package/lib/types/types.d.ts +153 -0
- package/lib/types/types.d.ts.map +1 -0
- package/package.json +5 -5
- package/lib/cjs/component/score/Donut.js.map +0 -1
- package/lib/cjs/component/score/Line.js.map +0 -1
- package/lib/cjs/component/score/Line.types.js +0 -2
- package/lib/cjs/component/score/Line.types.js.map +0 -1
- package/lib/cjs/component/score/Score.js +0 -2
- package/lib/cjs/component/score/Score.js.map +0 -1
- package/lib/cjs/component/score/index.js.map +0 -1
- package/lib/cjs/component/trend/Bar.js.map +0 -1
- package/lib/cjs/component/trend/Line.js.map +0 -1
- package/lib/cjs/component/trend/Trend.js.map +0 -1
- package/lib/cjs/component/trend/index.js.map +0 -1
- package/lib/es6/component/score/Donut.js.map +0 -1
- package/lib/es6/component/score/Line.js.map +0 -1
- package/lib/es6/component/score/Line.types.js +0 -2
- package/lib/es6/component/score/Line.types.js.map +0 -1
- package/lib/es6/component/score/Score.js +0 -2
- package/lib/es6/component/score/Score.js.map +0 -1
- package/lib/es6/component/score/index.js +0 -4
- package/lib/es6/component/score/index.js.map +0 -1
- package/lib/es6/component/trend/Bar.js.map +0 -1
- package/lib/es6/component/trend/Line.js.map +0 -1
- package/lib/es6/component/trend/Trend.js.map +0 -1
- package/lib/es6/component/trend/index.js +0 -4
- package/lib/es6/component/trend/index.js.map +0 -1
- package/lib/types/component/score/Donut.d.ts +0 -36
- package/lib/types/component/score/Donut.d.ts.map +0 -1
- package/lib/types/component/score/Line.d.ts.map +0 -1
- package/lib/types/component/score/Line.types.d.ts +0 -57
- package/lib/types/component/score/Line.types.d.ts.map +0 -1
- package/lib/types/component/score/Score.d.ts +0 -25
- package/lib/types/component/score/Score.d.ts.map +0 -1
- package/lib/types/component/score/index.d.ts +0 -4
- package/lib/types/component/score/index.d.ts.map +0 -1
- package/lib/types/component/trend/Bar.d.ts +0 -49
- package/lib/types/component/trend/Bar.d.ts.map +0 -1
- package/lib/types/component/trend/Line.d.ts +0 -57
- package/lib/types/component/trend/Line.d.ts.map +0 -1
- package/lib/types/component/trend/Trend.d.ts +0 -40
- package/lib/types/component/trend/Trend.d.ts.map +0 -1
- package/lib/types/component/trend/index.d.ts +0 -4
- package/lib/types/component/trend/index.d.ts.map +0 -1
- /package/lib/cjs/{component → components}/score/index.js +0 -0
- /package/lib/cjs/{component → components}/trend/Trend.js +0 -0
- /package/lib/cjs/{component → components}/trend/index.js +0 -0
- /package/lib/cjs/{component/skeleton → styles}/skeleton.shadow.css +0 -0
- /package/lib/es6/{component → components}/trend/Trend.js +0 -0
- /package/lib/es6/{component/skeleton → styles}/skeleton.shadow.css +0 -0
- /package/lib/esm/{component → components}/score/index.mjs +0 -0
- /package/lib/esm/{component → components}/trend/Trend.mjs +0 -0
- /package/lib/esm/{component → components}/trend/index.mjs +0 -0
- /package/lib/esm/{component/skeleton → styles}/skeleton.shadow.css +0 -0
package/lib/esm/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import "./
|
|
2
|
-
import "./
|
|
3
|
-
import { ScoreLine } from "./
|
|
4
|
-
import { ScoreDonut, ScoreSemiDonut } from "./
|
|
5
|
-
import { TrendHistogram, TrendBar } from "./
|
|
6
|
-
import { TrendArea, TrendLine } from "./
|
|
7
|
-
const
|
|
1
|
+
import "./components/score/index.mjs";
|
|
2
|
+
import "./components/trend/index.mjs";
|
|
3
|
+
import { ScoreLine } from "./components/score/Line.mjs";
|
|
4
|
+
import { ScoreDonut, ScoreSemiDonut } from "./components/score/Donut.mjs";
|
|
5
|
+
import { TrendHistogram, TrendBar } from "./components/trend/Bar.mjs";
|
|
6
|
+
import { TrendArea, TrendLine } from "./components/trend/Line.mjs";
|
|
7
|
+
const index = {
|
|
8
8
|
TrendLine,
|
|
9
9
|
TrendArea,
|
|
10
10
|
TrendBar,
|
|
@@ -14,5 +14,5 @@ const miniCharts = {
|
|
|
14
14
|
ScoreLine
|
|
15
15
|
};
|
|
16
16
|
export {
|
|
17
|
-
|
|
17
|
+
index as default
|
|
18
18
|
};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
@import './skeleton.shadow.css';
|
|
2
|
+
|
|
3
|
+
SLineGauge {
|
|
4
|
+
height: 8px;
|
|
5
|
+
background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180)));
|
|
6
|
+
border-radius: var(--intergalactic-chart-rounded, 2px);
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
SLineValue {
|
|
12
|
+
height: 8px;
|
|
13
|
+
border-radius: var(--intergalactic-chart-rounded, 2px) 0 0 var(--intergalactic-chart-rounded, 2px);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
SLineValue[percent] {
|
|
17
|
+
width: var(--percent);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
SLineValue[color], SLineSegmentItem[color] {
|
|
21
|
+
background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)));
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
SLineGauge[segments] {
|
|
25
|
+
border-radius: var(--intergalactic-progress-bar-rounded, 6px);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
SLineGaugeSegment, SAnimationLine {
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: 0;
|
|
31
|
+
left: 0;
|
|
32
|
+
right: 0;
|
|
33
|
+
bottom: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
SLineSegmentItem:last-child {
|
|
37
|
+
margin-right: 0;
|
|
38
|
+
border-right: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
SLineSegmentItem {
|
|
42
|
+
height: 8px;
|
|
43
|
+
background: transparent;
|
|
44
|
+
border-right-color: var(--intergalactic-chart-grid-border, #ffffff);
|
|
45
|
+
border-right-style: solid;
|
|
46
|
+
border-right-width: 1px;
|
|
47
|
+
box-sizing: content-box;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
SAnimationLine {
|
|
51
|
+
background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180));
|
|
52
|
+
transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out;
|
|
53
|
+
animation-name: move-line;
|
|
54
|
+
animation-duration: 0.5s;
|
|
55
|
+
animation-timing-function: ease-in-out;
|
|
56
|
+
animation-fill-mode: forwards;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@keyframes move-line {
|
|
60
|
+
0% {transform: translateX(0);}
|
|
61
|
+
100% {transform: translateX(100%);}
|
|
62
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { NSMiniChart } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* MiniCharts.ScoreDount
|
|
4
|
+
*
|
|
5
|
+
* {@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}
|
|
6
|
+
*/
|
|
7
|
+
export declare const ScoreDonut: NSMiniChart.Score.Donut.Component;
|
|
8
|
+
/**
|
|
9
|
+
* MiniCharts.ScoreSemiDount
|
|
10
|
+
*
|
|
11
|
+
* {@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}
|
|
12
|
+
*/
|
|
13
|
+
export declare const ScoreSemiDonut: NSMiniChart.Score.Donut.Component;
|
|
14
|
+
//# sourceMappingURL=Donut.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../../../src/components/score/Donut.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAiH/C;;;;GAIG;AACH,eAAO,MAAM,UAAU,mCAGX,CAAC;AAIb;;;;GAIG;AACH,eAAO,MAAM,cAAc,mCAiB1B,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { NSMiniChart } from '../../types';
|
|
2
2
|
/**
|
|
3
3
|
* MiniCharts.ScoreLine
|
|
4
4
|
*
|
|
5
5
|
* {@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}
|
|
6
6
|
*/
|
|
7
|
-
export declare const ScoreLine:
|
|
7
|
+
export declare const ScoreLine: NSMiniChart.Score.Line.Component;
|
|
8
8
|
//# sourceMappingURL=Line.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../src/components/score/Line.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAiH/C;;;;GAIG;AACH,eAAO,MAAM,SAAS,kCAGE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/score/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { NSMiniChart } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* MiniCharts.TrendBar
|
|
4
|
+
*
|
|
5
|
+
* {@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}
|
|
6
|
+
*/
|
|
7
|
+
export declare const TrendBar: NSMiniChart.Trend.Bar.Component;
|
|
8
|
+
/**
|
|
9
|
+
* MiniCharts.TrendHistogram
|
|
10
|
+
*
|
|
11
|
+
* {@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}
|
|
12
|
+
*/
|
|
13
|
+
export declare const TrendHistogram: NSMiniChart.Trend.Bar.Component;
|
|
14
|
+
//# sourceMappingURL=Bar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../../src/components/trend/Bar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA4E/C;;;;GAIG;AACH,eAAO,MAAM,QAAQ,iCAGN,CAAC;AAIhB;;;;GAIG;AACH,eAAO,MAAM,cAAc,iCAiB1B,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { NSMiniChart } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* MiniCharts.TrendLine
|
|
4
|
+
*
|
|
5
|
+
* {@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}
|
|
6
|
+
*/
|
|
7
|
+
export declare const TrendLine: NSMiniChart.Trend.Line.Component;
|
|
8
|
+
/**
|
|
9
|
+
* MiniCharts.TrendArea
|
|
10
|
+
*
|
|
11
|
+
* {@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}
|
|
12
|
+
*/
|
|
13
|
+
export declare const TrendArea: NSMiniChart.Trend.Line.Component;
|
|
14
|
+
//# sourceMappingURL=Line.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../src/components/trend/Line.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAuH/C;;;;GAIG;AACH,eAAO,MAAM,SAAS,kCAAyF,CAAC;AAIhH;;;;GAIG;AACH,eAAO,MAAM,SAAS,kCAcrB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { Intergalactic } from '@semcore/core';
|
|
2
|
+
import { Component } from '@semcore/core';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import type { NSMiniChart } from '../../types';
|
|
5
|
+
export declare abstract class Trend<P extends Record<string, any>, E extends readonly ((...args: any[]) => any)[], DP extends Intergalactic.InternalTypings.ValidDefaultProps<DP, P> = never> extends Component<P, E, Readonly<{}>, {}, NSMiniChart.Trend.CommonState, DP> {
|
|
6
|
+
state: {
|
|
7
|
+
width: number;
|
|
8
|
+
height: number;
|
|
9
|
+
};
|
|
10
|
+
containerRef: React.RefObject<HTMLDivElement>;
|
|
11
|
+
componentDidMount(): void;
|
|
12
|
+
componentDidUpdate(prevProps: P): void;
|
|
13
|
+
get defaultWidth(): number;
|
|
14
|
+
get defaultHeight(): number;
|
|
15
|
+
get svgWidth(): number;
|
|
16
|
+
get svgHeight(): number;
|
|
17
|
+
setSizes(): void;
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=Trend.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Trend.d.ts","sourceRoot":"","sources":["../../../../src/components/trend/Trend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,8BAAsB,KAAK,CACzB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,SAAS,SAAS,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,EAAE,EAC9C,EAAE,SAAS,aAAa,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,CACzE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;IAC5E,KAAK;;;MAGH;IAEF,YAAY,kCAAqC;IAEjD,iBAAiB;IAIjB,kBAAkB,CAAC,SAAS,EAAE,CAAC;IAU/B,IAAI,YAAY,IAAI,MAAM,CAIzB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,QAAQ;CAWT"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/trend/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
ScoreDonut: typeof ScoreDonut;
|
|
11
|
-
ScoreLine: typeof ScoreLine;
|
|
1
|
+
import type { SegmentColor, NSMiniChart } from './types';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
TrendLine: NSMiniChart.Trend.Line.Component;
|
|
4
|
+
TrendArea: NSMiniChart.Trend.Line.Component;
|
|
5
|
+
TrendBar: NSMiniChart.Trend.Bar.Component;
|
|
6
|
+
TrendHistogram: NSMiniChart.Trend.Bar.Component;
|
|
7
|
+
ScoreSemiDonut: NSMiniChart.Score.Donut.Component;
|
|
8
|
+
ScoreDonut: NSMiniChart.Score.Donut.Component;
|
|
9
|
+
ScoreLine: NSMiniChart.Score.Line.Component;
|
|
12
10
|
};
|
|
13
|
-
export default
|
|
14
|
-
export type { SegmentColor, };
|
|
11
|
+
export default _default;
|
|
12
|
+
export type { SegmentColor, NSMiniChart, };
|
|
15
13
|
//# sourceMappingURL=index.d.ts.map
|
package/lib/types/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;AAEzD,wBAQE;AAEF,YAAY,EACV,YAAY,EACZ,WAAW,GACZ,CAAC"}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import type { NSBox } from '@semcore/base-components';
|
|
2
|
+
import type { Intergalactic } from '@semcore/core';
|
|
3
|
+
type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
|
|
4
|
+
type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
|
|
5
|
+
declare namespace NSMiniChart {
|
|
6
|
+
namespace Score {
|
|
7
|
+
type CommonProps = {
|
|
8
|
+
/**
|
|
9
|
+
* Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)
|
|
10
|
+
*/
|
|
11
|
+
value: number;
|
|
12
|
+
/**
|
|
13
|
+
* Color of value
|
|
14
|
+
*/
|
|
15
|
+
color?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Color of background
|
|
18
|
+
*/
|
|
19
|
+
baseBgColor?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Flag to enable skeleton
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
loading?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Flag to enable animate of charts
|
|
27
|
+
* @default true
|
|
28
|
+
*/
|
|
29
|
+
animate?: boolean;
|
|
30
|
+
};
|
|
31
|
+
namespace Donut {
|
|
32
|
+
type Props = NSBox.Props & NSMiniChart.Score.CommonProps;
|
|
33
|
+
type DefaultProps = {
|
|
34
|
+
animate: true;
|
|
35
|
+
};
|
|
36
|
+
type Component = Intergalactic.Component<'svg', Props>;
|
|
37
|
+
}
|
|
38
|
+
namespace Line {
|
|
39
|
+
type Props = NSBox.Props & Intergalactic.InternalTypings.EfficientOmit<NSMiniChart.Score.CommonProps, 'value' | 'color'> & ({
|
|
40
|
+
/**
|
|
41
|
+
* Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)
|
|
42
|
+
*/
|
|
43
|
+
value: number;
|
|
44
|
+
/**
|
|
45
|
+
* Color of value
|
|
46
|
+
*/
|
|
47
|
+
color?: NSMiniChart.Score.Line.Segment.Color;
|
|
48
|
+
/**
|
|
49
|
+
* Count of line segments
|
|
50
|
+
*/
|
|
51
|
+
segments?: number;
|
|
52
|
+
/**
|
|
53
|
+
* We don't accept children in this way
|
|
54
|
+
*/
|
|
55
|
+
children?: never;
|
|
56
|
+
} | {
|
|
57
|
+
value?: never;
|
|
58
|
+
segments?: never;
|
|
59
|
+
color?: never;
|
|
60
|
+
children: React.ReactNode;
|
|
61
|
+
});
|
|
62
|
+
type DefaultProps = {
|
|
63
|
+
animate: true;
|
|
64
|
+
};
|
|
65
|
+
namespace Segment {
|
|
66
|
+
type Color = `chart-palette-order-${Range<1, 24>}`;
|
|
67
|
+
type Props = {
|
|
68
|
+
value: number;
|
|
69
|
+
/**
|
|
70
|
+
* Color of value
|
|
71
|
+
*/
|
|
72
|
+
color: NSMiniChart.Score.Line.Segment.Color;
|
|
73
|
+
};
|
|
74
|
+
type Component = Intergalactic.Component<NSBox.Component, Props>;
|
|
75
|
+
}
|
|
76
|
+
type Component = ((props: Props) => Intergalactic.InternalTypings.ComponentRenderingResults & Intergalactic.InternalTypings.ComponentAdditive<'svg', 'svg', Props>) & {
|
|
77
|
+
Segment: Segment.Component;
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
namespace Trend {
|
|
82
|
+
type CommonProps = NSBox.Props & {
|
|
83
|
+
/**
|
|
84
|
+
* Flag to enable animate of charts
|
|
85
|
+
* @default true
|
|
86
|
+
*/
|
|
87
|
+
animate?: boolean;
|
|
88
|
+
/**
|
|
89
|
+
* Flag to enable skeleton
|
|
90
|
+
* @default false
|
|
91
|
+
*/
|
|
92
|
+
loading?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* Data for chart
|
|
95
|
+
*/
|
|
96
|
+
data: any[];
|
|
97
|
+
};
|
|
98
|
+
type CommonState = {
|
|
99
|
+
width: number;
|
|
100
|
+
height: number;
|
|
101
|
+
};
|
|
102
|
+
namespace Line {
|
|
103
|
+
type Props = NSMiniChart.Trend.CommonProps & {
|
|
104
|
+
/**
|
|
105
|
+
* List of values
|
|
106
|
+
*/
|
|
107
|
+
data: number[];
|
|
108
|
+
/**
|
|
109
|
+
* Color of line
|
|
110
|
+
*/
|
|
111
|
+
color?: string;
|
|
112
|
+
/**
|
|
113
|
+
* Color of last point in chart
|
|
114
|
+
*/
|
|
115
|
+
lastPointColor?: string;
|
|
116
|
+
/**
|
|
117
|
+
* Radius for last point item
|
|
118
|
+
*/
|
|
119
|
+
lastPointRadius?: number;
|
|
120
|
+
};
|
|
121
|
+
type DefaultProps = {
|
|
122
|
+
animate: true;
|
|
123
|
+
};
|
|
124
|
+
type Component = Intergalactic.Component<'svg', Props>;
|
|
125
|
+
}
|
|
126
|
+
namespace Bar {
|
|
127
|
+
type Item = {
|
|
128
|
+
/**
|
|
129
|
+
* Value
|
|
130
|
+
*/
|
|
131
|
+
value: number;
|
|
132
|
+
/**
|
|
133
|
+
* Color of value
|
|
134
|
+
*/
|
|
135
|
+
color?: string;
|
|
136
|
+
};
|
|
137
|
+
type Props = NSMiniChart.Trend.CommonProps & {
|
|
138
|
+
/**
|
|
139
|
+
* Data to bar chart
|
|
140
|
+
*/
|
|
141
|
+
data: NSMiniChart.Trend.Bar.Item[];
|
|
142
|
+
};
|
|
143
|
+
type DefaultProps = {
|
|
144
|
+
animate: true;
|
|
145
|
+
};
|
|
146
|
+
type Component = Intergalactic.Component<'svg', Props>;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
export type { NSMiniChart };
|
|
151
|
+
/** @deprecated It will be removed in v19. */
|
|
152
|
+
export type SegmentColor = NSMiniChart.Score.Line.Segment.Color;
|
|
153
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/mini-chart",
|
|
3
3
|
"description": "Semrush MiniChart Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "18.0.0-prerelease.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"require": "./lib/cjs/index.js"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
|
-
"@semcore/base-components": "^
|
|
17
|
+
"@semcore/base-components": "^18.0.0-prerelease.0"
|
|
18
18
|
},
|
|
19
19
|
"repository": {
|
|
20
20
|
"type": "git",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"directory": "semcore/mini-chart"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@semcore/
|
|
26
|
-
"@semcore/base-components": "
|
|
27
|
-
"@semcore/
|
|
25
|
+
"@semcore/testing-utils": "1.0.0",
|
|
26
|
+
"@semcore/base-components": "18.0.0-prerelease.0",
|
|
27
|
+
"@semcore/core": "18.0.0-prerelease.0"
|
|
28
28
|
},
|
|
29
29
|
"scripts": {
|
|
30
30
|
"build": "pnpm semcore-builder --source=ts && pnpm vite build"
|
|
@@ -1 +0,0 @@
|
|
|
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 } from '@semcore/base-components';\nimport type { NSBox } 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 = NSBox.Props & 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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA,IAAAC,eAAA,GAAAD,OAAA;AAIA,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":[]}
|
|
@@ -1 +0,0 @@
|
|
|
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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Line.types.js","names":[],"sources":["../../../../src/component/score/Line.types.ts"],"sourcesContent":["import type { NSBox } 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 = NSBox.Props &\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<NSBox.Component, SegmentProps>;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
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 * 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":"","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Donut","require","_Line"],"sources":["../../../../src/component/score/index.ts"],"sourcesContent":["import { ScoreDonut, ScoreSemiDonut } from './Donut';\nimport { ScoreLine } from './Line';\n\nexport { ScoreDonut, ScoreSemiDonut, ScoreLine };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
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":[]}
|
|
@@ -1 +0,0 @@
|
|
|
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 +0,0 @@
|
|
|
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 { NSBox } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Component } from '@semcore/core';\nimport React from 'react';\n\nexport type CommonTrendProps = NSBox.Props & {\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":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Bar","require","_Line"],"sources":["../../../../src/component/trend/index.ts"],"sourcesContent":["import { TrendBar, TrendHistogram } from './Bar';\nimport { TrendLine, TrendArea } from './Line';\n\nexport { TrendLine, TrendArea, TrendBar, TrendHistogram };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,IAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
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 } from '@semcore/base-components';\nimport type { NSBox } 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 = NSBox.Props & 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":[]}
|