@reltio/components 1.4.1933 → 1.4.1935

package/cjs/EmptyState/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "root" | "root_small" | "embedded" | "full" | "textBox" | "secondaryText">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "root_small" | "embedded" | "full" | "textBox" | "secondaryText">;

package/cjs/EmptyState/styles.js

@@ -38,6 +38,10 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         }
     },
     root_small: {},
+    small: {
+        width: '88px',
+        height: '88px'
+    },
     embedded: {
         flexShrink: 0,
         width: '190px',

package/cjs/GaugeChart/GaugeChart.js

@@ -33,15 +33,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GaugeChart = void 0;
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
 var recharts_1 = require("recharts");
-var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var helpers_1 = require("./helpers");
 var constants_1 = require("./constants");
 var styles_1 = require("./styles");
@@ -81,7 +77,7 @@ var GaugeChart = function (_a) {
                 right: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
                 opacity: animationIsEnd ? 1 : 0
             } },
-            react_1.default.createElement(Typography_1.default, { className: styles.value }, renderValue(value)),
+            react_1.default.createElement("div", { className: styles.value }, renderValue(value)),
             label && (react_1.default.createElement("div", { ref: labelElRef, className: styles.label }, label)))));
 };
 exports.GaugeChart = GaugeChart;

package/cjs/GaugeChart/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const MAX_RADIUS = 200;
+export declare const MIN_RADIUS = 120;
 export declare const RADIAN: number;
 export declare const ARC_WIDTH_AS_PERCENTAGES = 0.2;
 export declare const BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;

package/cjs/GaugeChart/constants.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.INDICATOR_WIDTH_AS_PERCENTAGES = exports.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES = exports.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = exports.ARC_WIDTH_AS_PERCENTAGES = exports.RADIAN = exports.MAX_RADIUS = void 0;
+exports.INDICATOR_WIDTH_AS_PERCENTAGES = exports.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES = exports.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = exports.ARC_WIDTH_AS_PERCENTAGES = exports.RADIAN = exports.MIN_RADIUS = exports.MAX_RADIUS = void 0;
 exports.MAX_RADIUS = 200;
+exports.MIN_RADIUS = 120;
 exports.RADIAN = Math.PI / 180;
 exports.ARC_WIDTH_AS_PERCENTAGES = 0.2;
 exports.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;

package/cjs/GaugeChart/helpers.js

@@ -7,7 +7,7 @@ var getGaugeIndicatorCoords = function (value, data, cx, cy, oR, iR) {
         var value = _a.value;
         return sum + value;
     }, 0);
-    var angle = 180.0 * (1 - value / total);
+    var angle = 180.0 * (1 - Math.min(total, value) / total);
     var width = constants_1.INDICATOR_WIDTH_AS_PERCENTAGES * oR;
     var sin = Math.sin(-constants_1.RADIAN * angle);
     var cos = Math.cos(-constants_1.RADIAN * angle);

package/cjs/GaugeChart/styles.js

@@ -28,6 +28,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         transition: 'opacity 0.5s'
     },
     value: {
+        width: '100%',
         marginBottom: '2px',
         fontSize: '28px',
         lineHeight: '33px',

package/esm/EmptyState/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "root" | "root_small" | "embedded" | "full" | "textBox" | "secondaryText">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "root_small" | "embedded" | "full" | "textBox" | "secondaryText">;

package/esm/EmptyState/styles.js

@@ -35,6 +35,10 @@ export var useStyles = makeStyles(function (theme) { return ({
         }
     },
     root_small: {},
+    small: {
+        width: '88px',
+        height: '88px'
+    },
     embedded: {
         flexShrink: 0,
         width: '190px',

package/esm/GaugeChart/GaugeChart.js

@@ -12,7 +12,6 @@ var __assign = (this && this.__assign) || function () {
 import React, { useEffect, useRef, useState } from 'react';
 import { identity } from 'ramda';
 import { PieChart, Pie, Cell } from 'recharts';
-import Typography from '@mui/material/Typography';
 import { getGaugeIndicatorCoords } from './helpers';
 import { MAX_RADIUS, ARC_WIDTH_AS_PERCENTAGES, TOP_INDICATOR_HEIGHT_AS_PERCENTAGES } from './constants';
 import { useStyles } from './styles';
@@ -52,6 +51,6 @@ export var GaugeChart = function (_a) {
                 right: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
                 opacity: animationIsEnd ? 1 : 0
             } },
-            React.createElement(Typography, { className: styles.value }, renderValue(value)),
+            React.createElement("div", { className: styles.value }, renderValue(value)),
             label && (React.createElement("div", { ref: labelElRef, className: styles.label }, label)))));
 };

package/esm/GaugeChart/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const MAX_RADIUS = 200;
+export declare const MIN_RADIUS = 120;
 export declare const RADIAN: number;
 export declare const ARC_WIDTH_AS_PERCENTAGES = 0.2;
 export declare const BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;

package/esm/GaugeChart/constants.js

@@ -1,4 +1,5 @@
 export var MAX_RADIUS = 200;
+export var MIN_RADIUS = 120;
 export var RADIAN = Math.PI / 180;
 export var ARC_WIDTH_AS_PERCENTAGES = 0.2;
 export var BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;

package/esm/GaugeChart/helpers.js

@@ -4,7 +4,7 @@ export var getGaugeIndicatorCoords = function (value, data, cx, cy, oR, iR) {
         var value = _a.value;
         return sum + value;
     }, 0);
-    var angle = 180.0 * (1 - value / total);
+    var angle = 180.0 * (1 - Math.min(total, value) / total);
     var width = INDICATOR_WIDTH_AS_PERCENTAGES * oR;
     var sin = Math.sin(-RADIAN * angle);
     var cos = Math.cos(-RADIAN * angle);

package/esm/GaugeChart/styles.js

@@ -25,6 +25,7 @@ export var useStyles = makeStyles(function (theme) { return ({
         transition: 'opacity 0.5s'
     },
     value: {
+        width: '100%',
         marginBottom: '2px',
         fontSize: '28px',
         lineHeight: '33px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1933",
+  "version": "1.4.1935",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1848",
+    "@reltio/mdm-sdk": "^1.4.1849",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
     "d3-hierarchy": "^2.0.0",
@@ -49,7 +49,7 @@
     "prop-types": "^15.6.2",
     "ramda": "^0.28.0",
     "react": "^17.0.2",
-    "react-components": "bitbucket:reltio-ondemand/react-components#v3.27.1",
+    "react-components": "bitbucket:reltio-ondemand/react-components#v3.27.2",
     "react-resize-detector": "^9.1.1",
     "ui-i18n": "bitbucket:reltio-ondemand/ui-i18n#v1.4.0"
   },