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

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

@@ -1,29 +1,27 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from "react";
 import { Component } from "@semcore/core";
-var Trend = /* @__PURE__ */ function(_Component) {
-  _inherits(Trend2, _Component);
-  var _super = _createSuper(Trend2);
+import React from "react";
+var Trend = /* @__PURE__ */ (function(_Component) {
   function Trend2() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     _classCallCheck(this, Trend2);
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _this = _callSuper(this, Trend2, [].concat(args));
+    _defineProperty(_this, "state", {
       width: 200,
       height: 100
     });
-    _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
     return _this;
   }
-  _createClass(Trend2, [{
+  _inherits(Trend2, _Component);
+  return _createClass(Trend2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setSizes();
@@ -71,8 +69,7 @@ var Trend = /* @__PURE__ */ function(_Component) {
       }
     }
   }]);
-  return Trend2;
-}(Component);
+})(Component);
 export {
   Trend
 };

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

@@ -0,0 +1,8 @@
+import { TrendBar, TrendHistogram } from "./Bar.mjs";
+import { TrendArea, TrendLine } from "./Line.mjs";
+export {
+  TrendArea,
+  TrendBar,
+  TrendHistogram,
+  TrendLine
+};

package/lib/esm/index.mjs

@@ -1,7 +1,9 @@
-import { ScoreSemiDonut, ScoreDonut } from "./component/score/Donut.mjs";
+import "./component/score/index.mjs";
+import "./component/trend/index.mjs";
 import { ScoreLine } from "./component/score/Line.mjs";
-import { TrendLine, TrendArea } from "./component/trend/Line.mjs";
-import { TrendBar, TrendHistogram } from "./component/trend/Bar.mjs";
+import { ScoreDonut, ScoreSemiDonut } from "./component/score/Donut.mjs";
+import { TrendHistogram, TrendBar } from "./component/trend/Bar.mjs";
+import { TrendArea, TrendLine } from "./component/trend/Line.mjs";
 var miniCharts = {
   TrendLine,
   TrendArea,

package/lib/esm/utils/ScoreDonutUtils.mjs

@@ -0,0 +1,82 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var ScoreDonutUtils = /* @__PURE__ */ (function() {
+  function ScoreDonutUtils2(value, isSemiDonut) {
+    _classCallCheck(this, ScoreDonutUtils2);
+    _defineProperty(this, "isSemiDonut", void 0);
+    _defineProperty(this, "value", void 0);
+    _defineProperty(this, "radius", void 0);
+    this.isSemiDonut = isSemiDonut;
+    this.radius = isSemiDonut ? 9 : 10;
+    this.value = Math.max(Math.min(value, 100), 0);
+  }
+  return _createClass(ScoreDonutUtils2, [{
+    key: "viewBox",
+    get: function get() {
+      return this.isSemiDonut ? "0 0 24 12" : "0 0 24 24";
+    }
+  }, {
+    key: "strokeWidth",
+    get: function get() {
+      return this.isSemiDonut ? 6 : 4;
+    }
+  }, {
+    key: "fullLength",
+    get: function get() {
+      return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
+    }
+  }, {
+    key: "point",
+    get: function get() {
+      return this.isSemiDonut ? this.fullLength / (100 / 3) : this.fullLength / 100;
+    }
+  }, {
+    key: "valueLength",
+    get: function get() {
+      return this.fullLength * (this.value / 100);
+    }
+  }, {
+    key: "animatedValueLength",
+    get: function get() {
+      return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);
+    }
+  }, {
+    key: "startMargin",
+    get: function get() {
+      var margin = 0;
+      if (this.value > 0) margin = this.point;
+      return margin;
+    }
+  }, {
+    key: "endMargin",
+    get: function get() {
+      var margin = 0;
+      if (!this.isSemiDonut && this.value > 0) margin = this.point;
+      return margin;
+    }
+  }, {
+    key: "baseOffset",
+    get: function get() {
+      return -1 * (this.valueLength + this.startMargin);
+    }
+  }, {
+    key: "baseLength",
+    get: function get() {
+      return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);
+    }
+  }, {
+    key: "animatedBaseLengthFrom",
+    get: function get() {
+      return this.fullLength - this.startMargin - this.endMargin;
+    }
+  }, {
+    key: "animatedBaseLengthTo",
+    get: function get() {
+      return this.fullLength - this.valueLength - this.startMargin - this.endMargin;
+    }
+  }]);
+})();
+export {
+  ScoreDonutUtils
+};

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

@@ -1,12 +1,9 @@
-import { ComponentType } from '@semcore/core';
-import { BoxProps } from '@semcore/flex-box';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
-import { CommonScoreProps } from './Score';
+import { type BoxProps } from '@semcore/base-components';
+import type { CommonScoreProps } from './Score';
 export type ScoreDonutProps = BoxProps & CommonScoreProps;
-type Enhances = {
-    resolveColor: ReturnType<typeof resolveColorEnhance>;
-    isSemiDonut?: true;
-};
-export declare const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances>;
-export declare const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances>;
-export {};
+export declare const ScoreDonut: import("@semcore/core").Intergalactic.Component<"svg", ScoreDonutProps, {}, readonly [<T extends {}>(props: T) => T & {
+    duration: string;
+}, (props: any) => any]>;
+export declare const ScoreSemiDonut: import("@semcore/core").Intergalactic.Component<"svg", ScoreDonutProps, {}, readonly [<T extends {}>(props: T) => T & {
+    duration: string;
+}, (props: any) => any]>;

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

@@ -1,2 +1,2 @@
-import { ScoreLineComponent } from './Line.types';
+import type { ScoreLineComponent } from './Line.types';
 export declare const ScoreLine: ScoreLineComponent;

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

@@ -1,8 +1,8 @@
-import { Intergalactic, ComponentType } from '@semcore/utils/lib/core';
-import { CommonScoreProps } from './Score';
-import React from 'react';
-import { BoxProps, Box } from '@semcore/flex-box';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import type { BoxProps, Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
+import type React from 'react';
+import type { CommonScoreProps } from './Score';
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
 export type SegmentColor = `chart-palette-order-${Range<1, 24>}`;
@@ -39,10 +39,12 @@ type CustomRenderScoreProps = {
     children: SegmentComponent[];
 };
 export type ScoreLineGaugeProps = BoxProps & Intergalactic.InternalTypings.EfficientOmit<CommonScoreProps, 'value' | 'color'> & (ValuedScoreProps | CustomRenderScoreProps);
-export type Enhances = {
-    resolveColor: ReturnType<typeof resolveColorEnhance>;
-};
-export type ScoreLineComponent = ComponentType<ScoreLineGaugeProps, {}, {}, Enhances> & {
+export type Enhances = [
+    () => {
+        resolveColor: ReturnType<typeof resolveColorEnhance>;
+    }
+];
+export type ScoreLineComponent = Intergalactic.Component<'svg', ScoreLineGaugeProps, {}, Enhances> & {
     Segment: Intergalactic.Component<typeof Box, SegmentProps>;
 };
 export {};

package/lib/types/component/trend/Bar.d.ts

@@ -1,6 +1,4 @@
-import { ComponentType } from '@semcore/core';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
-import { CommonTrendProps } from './Trend';
+import { type CommonTrendProps } from './Trend';
 type BarItem = {
     /**
      * Value
@@ -17,10 +15,6 @@ export type TrendBarProps = CommonTrendProps & {
      */
     data: BarItem[];
 };
-type Enhances = {
-    resolveColor: ReturnType<typeof resolveColorEnhance>;
-    isHistogram?: true;
-};
-export declare const TrendBar: ComponentType<TrendBarProps, {}, {}, Enhances>;
-export declare const TrendHistogram: ComponentType<TrendBarProps, {}, {}, Enhances>;
+export declare const TrendBar: import("@semcore/core").Intergalactic.Component<"svg", TrendBarProps, {}, readonly [(props: any) => any]>;
+export declare const TrendHistogram: import("@semcore/core").Intergalactic.Component<"svg", TrendBarProps, {}, readonly [(props: any) => any]>;
 export {};

package/lib/types/component/trend/Line.d.ts

@@ -1,6 +1,4 @@
-import { ComponentType } from '@semcore/core';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
-import { CommonTrendProps } from './Trend';
+import { type CommonTrendProps } from './Trend';
 export type TrendLineProps = CommonTrendProps & {
     /**
      * List of values
@@ -19,11 +17,9 @@ export type TrendLineProps = CommonTrendProps & {
      */
     lastPointRadius?: number;
 };
-type Enhances = {
-    uid: string;
-    resolveColor: ReturnType<typeof resolveColorEnhance>;
-    withArea?: true;
-};
-export declare const TrendLine: ComponentType<TrendLineProps, {}, {}, Enhances>;
-export declare const TrendArea: ComponentType<TrendLineProps, {}, {}, Enhances>;
-export {};
+export declare const TrendLine: import("@semcore/core").Intergalactic.Component<"svg", TrendLineProps, {}, readonly [(props: any) => any, (props: any) => {
+    uid: ReturnType<typeof import("@semcore/core/lib/utils/uniqueID").useUID>;
+}]>;
+export declare const TrendArea: import("@semcore/core").Intergalactic.Component<"svg", TrendLineProps, {}, readonly [(props: any) => any, (props: any) => {
+    uid: ReturnType<typeof import("@semcore/core/lib/utils/uniqueID").useUID>;
+}]>;

package/lib/types/component/trend/Trend.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import type { BoxProps } from '@semcore/base-components';
 import { Component } from '@semcore/core';
-import { BoxProps } from '@semcore/flex-box';
+import React from 'react';
 export type CommonTrendProps = BoxProps & {
     /**
      * Flag to enable animate of charts
@@ -17,10 +17,10 @@ export type CommonTrendProps = BoxProps & {
      */
     data: any[];
 };
-export declare abstract class Trend<P extends CommonTrendProps, E extends readonly ((...args: any[]) => any)[]> extends Component<P, {}, {
+export declare abstract class Trend<P extends CommonTrendProps, E extends readonly ((...args: any[]) => any)[]> extends Component<P, E, Readonly<{}>, {
     width: number;
     height: number;
-}, E> {
+}> {
     state: {
         width: number;
         height: number;

package/lib/types/component/trend/index.d.ts

@@ -1,3 +1,3 @@
-import { TrendLine, TrendArea } from './Line';
 import { TrendBar, TrendHistogram } from './Bar';
+import { TrendLine, TrendArea } from './Line';
 export { TrendLine, TrendArea, TrendBar, TrendHistogram };

package/lib/types/utils/ScoreDonutUtils.d.ts

@@ -0,0 +1,18 @@
+export declare class ScoreDonutUtils {
+    private readonly isSemiDonut;
+    private readonly value;
+    readonly radius: number;
+    constructor(value: number, isSemiDonut: boolean);
+    get viewBox(): "0 0 24 12" | "0 0 24 24";
+    get strokeWidth(): 6 | 4;
+    get fullLength(): number;
+    get point(): number;
+    get valueLength(): number;
+    get animatedValueLength(): number;
+    get startMargin(): number;
+    get endMargin(): number;
+    get baseOffset(): number;
+    get baseLength(): number;
+    get animatedBaseLengthFrom(): number;
+    get animatedBaseLengthTo(): number;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/mini-chart",
   "description": "Semrush MiniChart Component",
-  "version": "0.30.0-prerelease.4",
+  "version": "0.30.0-prerelease.5",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,11 +14,11 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "5.42.0-prerelease.4",
-    "@semcore/utils": "4.49.0-prerelease.4"
+    "@semcore/flex-box": "5.42.0-prerelease.5",
+    "@semcore/utils": "4.49.0-prerelease.5"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.4",
+    "@semcore/core": "^2.40.0-prerelease.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },