@reltio/components 1.4.1917 → 1.4.1918

package/cjs/GaugeChart/GaugeChart.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { GaugeItem } from './types';
+type Props = {
+    width: number;
+    height: number;
+    data: GaugeItem[];
+    value: number;
+    label?: React.ReactNode;
+    renderValue?: (value: number) => React.ReactNode;
+    isAnimationActive?: boolean;
+};
+export declare const GaugeChart: ({ width, height, data, value, label, renderValue, isAnimationActive }: Props) => JSX.Element;
+export {};

package/cjs/GaugeChart/GaugeChart.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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");
+var GaugeChart = function (_a) {
+    var width = _a.width, height = _a.height, data = _a.data, value = _a.value, label = _a.label, _b = _a.renderValue, renderValue = _b === void 0 ? ramda_1.identity : _b, _c = _a.isAnimationActive, isAnimationActive = _c === void 0 ? true : _c;
+    var styles = (0, styles_1.useStyles)();
+    var labelElRef = (0, react_1.useRef)();
+    var _d = (0, react_1.useState)(!isAnimationActive), animationIsEnd = _d[0], setAnimationIsEnd = _d[1];
+    var _e = (0, react_1.useState)({ bottom: 0, top: 0, left: 0, right: 0 }), margin = _e[0], setMargin = _e[1];
+    var _f = (0, react_1.useState)(0), textOffset = _f[0], setTextOffset = _f[1];
+    var widthWithoutMargin = width - margin.left - margin.right;
+    var heightWithoutMargin = height - margin.top - margin.bottom - (textOffset > 0 ? textOffset : 0);
+    var outerRadius = Math.min(widthWithoutMargin / 2, heightWithoutMargin, constants_1.MAX_RADIUS);
+    var innerRadius = outerRadius - constants_1.ARC_WIDTH_AS_PERCENTAGES * outerRadius;
+    var cx = widthWithoutMargin / 2 + margin.left;
+    var cy = heightWithoutMargin / 2 + outerRadius / 2 + margin.top;
+    var chartData = data.map(function (item, name) { return (__assign(__assign({}, item), { name: name })); });
+    var _g = (0, helpers_1.getGaugeIndicatorCoords)(value, chartData, cx, cy, outerRadius, innerRadius), x1 = _g.x1, y1 = _g.y1, x2 = _g.x2, y2 = _g.y2, x3 = _g.x3, y3 = _g.y3;
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (animationIsEnd) {
+            var clientHeight = ((_a = labelElRef === null || labelElRef === void 0 ? void 0 : labelElRef.current) !== null && _a !== void 0 ? _a : { clientHeight: 0 }).clientHeight;
+            var textOffset_1 = Math.ceil(clientHeight) - 16;
+            var verticalMargin_1 = Math.ceil(constants_1.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * outerRadius);
+            setTextOffset(textOffset_1);
+            setMargin(function (prevMargin) { return (__assign(__assign({}, prevMargin), { bottom: verticalMargin_1, top: verticalMargin_1 })); });
+        }
+    }, [width, height, animationIsEnd]);
+    return (react_1.default.createElement("div", { "data-reltio-id": "gauge-chart", className: styles.root, style: { width: width, height: height } },
+        react_1.default.createElement(recharts_1.PieChart, { margin: { top: 0, bottom: 0, left: 0, right: 0 }, width: width, height: height },
+            react_1.default.createElement(recharts_1.Pie, { className: styles.pie, dataKey: "value", startAngle: 180, endAngle: 0, data: chartData, cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius, stroke: "none", isAnimationActive: isAnimationActive, onAnimationEnd: function () { return setAnimationIsEnd(true); } }, data.map(function (entry, idx) { return (react_1.default.createElement(recharts_1.Cell, { key: idx, fill: entry.color })); })),
+            react_1.default.createElement("path", { "data-reltio-id": "gauge-chart-indicator", className: styles.indicator, style: { opacity: animationIsEnd ? 1 : 0 }, d: "M".concat(x1, " ").concat(y1, "L").concat(x2, " ").concat(y2, " L").concat(x3, " ").concat(y3, " L").concat(x1, " ").concat(y1) })),
+        react_1.default.createElement("div", { "data-reltio-id": "gauge-chart-text", className: styles.text, style: {
+                top: "".concat(((cy - innerRadius) / height) * 100, "%"),
+                bottom: "calc(".concat(((height - cy) / height) * 100, "% - ").concat(textOffset, "px)"),
+                left: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
+                right: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
+                opacity: animationIsEnd ? 1 : 0
+            } },
+            react_1.default.createElement(Typography_1.default, { className: styles.value }, renderValue(value)),
+            label && (react_1.default.createElement("div", { ref: labelElRef, className: styles.label }, label)))));
+};
+exports.GaugeChart = GaugeChart;

package/cjs/GaugeChart/GaugeChart.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/GaugeChart/GaugeChart.test.js

@@ -0,0 +1,193 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var GaugeChart_1 = require("./GaugeChart");
+var defaultProps = {
+    width: 400,
+    height: 300,
+    data: [
+        { color: 'rgba(241, 35, 35, 1)', value: 30 },
+        { color: 'rgba(255, 109, 26, 1)', value: 40 },
+        { color: 'rgba(255, 238, 54, 1)', value: 20 },
+        { color: 'rgba(147, 244, 87, 1)', value: 10 }
+    ],
+    value: 50,
+    label: 'Label',
+    isAnimationActive: false
+};
+var removeExtraSpaces = function (str) { return str.replace(/\s{2,}/g, ' '); };
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var result = (0, react_2.render)(react_1.default.createElement(GaugeChart_1.GaugeChart, __assign({}, props)));
+    return __assign(__assign({}, result), { rerender: function (newProps) { return result.rerender(react_1.default.createElement(GaugeChart_1.GaugeChart, __assign({}, props, newProps))); } });
+};
+describe('Gauge chart behaviour', function () {
+    it('should render chart correctly in basic scenario', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender, text, gaugeChart, pieChart, pie, sectors, indicator, firstSector, secondSector, thirdSector, fourthSector;
+        return __generator(this, function (_a) {
+            rerender = setUp(__assign(__assign({}, defaultProps), { width: 0, height: 0 })).rerender;
+            text = react_2.screen.getByTestId('gauge-chart-text');
+            Object.defineProperty((0, react_2.within)(text).getByText('Label'), 'clientHeight', { configurable: true, value: 16 });
+            rerender(defaultProps);
+            gaugeChart = react_2.screen.getByTestId('gauge-chart');
+            pieChart = gaugeChart.querySelector('.recharts-wrapper');
+            expect(gaugeChart).toHaveStyle({ width: '400px', height: '300px' });
+            expect(pieChart).toHaveStyle({ width: '400px', height: '300px' });
+            pie = gaugeChart.querySelector('.recharts-surface');
+            expect(pie).toHaveStyle({ width: '100%', height: '100%' });
+            expect(pie).toHaveAttribute('width', '400');
+            expect(pie).toHaveAttribute('height', '300');
+            expect(pie).toHaveAttribute('cx', '50%');
+            expect(pie).toHaveAttribute('cy', '50%');
+            sectors = gaugeChart.querySelectorAll('.recharts-pie-sector');
+            indicator = react_2.screen.getByTestId('gauge-chart-indicator');
+            expect(sectors).toHaveLength(4);
+            firstSector = sectors[0].querySelector('.recharts-sector');
+            expect(firstSector).toHaveAttribute('fill', 'rgba(241, 35, 35, 1)');
+            expect(firstSector).toHaveAttribute('cx', '200');
+            expect(firstSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(firstSector.getAttribute('d'))).toBe('M 0,249.99999999999997 A 200,200,0, 0,1, 82.4429495415054,88.19660112501052 L 105.95435963320432,120.55728090000841 A 160,160,0, 0,0, 40,249.99999999999997 Z');
+            secondSector = sectors[1].querySelector('.recharts-sector');
+            expect(secondSector).toHaveAttribute('fill', 'rgba(255, 109, 26, 1)');
+            expect(secondSector).toHaveAttribute('cx', '200');
+            expect(secondSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(secondSector.getAttribute('d'))).toBe('M 82.4429495415054,88.19660112501052 A 200,200,0, 0,1, 317.55705045849464,88.19660112501052 L 294.04564036679574,120.55728090000841 A 160,160,0, 0,0, 105.95435963320432,120.55728090000841 Z');
+            thirdSector = sectors[2].querySelector('.recharts-sector');
+            expect(thirdSector).toHaveAttribute('fill', 'rgba(255, 238, 54, 1)');
+            expect(thirdSector).toHaveAttribute('cx', '200');
+            expect(thirdSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(thirdSector.getAttribute('d'))).toBe('M 317.55705045849464,88.19660112501052 A 200,200,0, 0,1, 390.21130325903073,188.19660112501052 L 352.1690426072246,200.5572809000084 A 160,160,0, 0,0, 294.04564036679574,120.55728090000841 Z');
+            fourthSector = sectors[3].querySelector('.recharts-sector');
+            expect(fourthSector).toHaveAttribute('fill', 'rgba(147, 244, 87, 1)');
+            expect(fourthSector).toHaveAttribute('cx', '200');
+            expect(fourthSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(fourthSector.getAttribute('d'))).toBe('M 390.21130325903073,188.19660112501052 A 200,200,0, 0,1, 400,250 L 360,250 A 160,160,0, 0,0, 352.1690426072246,200.5572809000084 Z');
+            expect(indicator).toHaveStyle({ opacity: 1 });
+            expect(indicator).toHaveAttribute('d', 'M198 98L202 98 L200 36 L198 98');
+            expect(text).toHaveStyle({ top: '30%', bottom: 'calc(16.666666666666664% - 0px)', left: '10%', right: '10%' });
+            (0, react_2.within)(text).getByText('50');
+            (0, react_2.within)(text).getByText('Label');
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render chart correctly if the label height is more than 16 pixels', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender, text, gaugeChart, indicator, sectors, firstSector, secondSector, thirdSector, fourthSector;
+        return __generator(this, function (_a) {
+            rerender = setUp(__assign(__assign({}, defaultProps), { width: 0, height: 0 })).rerender;
+            text = react_2.screen.getByTestId('gauge-chart-text');
+            Object.defineProperty((0, react_2.within)(text).getByText('Label'), 'clientHeight', { configurable: true, value: 48 });
+            rerender(defaultProps);
+            gaugeChart = react_2.screen.getByTestId('gauge-chart');
+            indicator = react_2.screen.getByTestId('gauge-chart-indicator');
+            sectors = gaugeChart.querySelectorAll('.recharts-pie-sector');
+            firstSector = sectors[0].querySelector('.recharts-sector');
+            expect(firstSector).toHaveAttribute('cx', '200');
+            expect(firstSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(firstSector.getAttribute('d'))).toBe('M 0,233.99999999999997 A 200,200,0, 0,1, 82.4429495415054,72.19660112501052 L 105.95435963320432,104.55728090000841 A 160,160,0, 0,0, 40,233.99999999999997 Z');
+            secondSector = sectors[1].querySelector('.recharts-sector');
+            expect(secondSector).toHaveAttribute('cx', '200');
+            expect(secondSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(secondSector.getAttribute('d'))).toBe('M 82.4429495415054,72.19660112501052 A 200,200,0, 0,1, 317.55705045849464,72.19660112501052 L 294.04564036679574,104.55728090000841 A 160,160,0, 0,0, 105.95435963320432,104.55728090000841 Z');
+            thirdSector = sectors[2].querySelector('.recharts-sector');
+            expect(thirdSector).toHaveAttribute('cx', '200');
+            expect(thirdSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(thirdSector.getAttribute('d'))).toBe('M 317.55705045849464,72.19660112501052 A 200,200,0, 0,1, 390.21130325903073,172.19660112501052 L 352.1690426072246,184.5572809000084 A 160,160,0, 0,0, 294.04564036679574,104.55728090000841 Z');
+            fourthSector = sectors[3].querySelector('.recharts-sector');
+            expect(fourthSector).toHaveAttribute('cx', '200');
+            expect(fourthSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(fourthSector.getAttribute('d'))).toBe('M 390.21130325903073,172.19660112501052 A 200,200,0, 0,1, 400,234 L 360,234 A 160,160,0, 0,0, 352.1690426072246,184.5572809000084 Z');
+            expect(indicator).toHaveAttribute('d', 'M198 82L202 82 L200 20 L198 82');
+            expect(text).toHaveStyle({ top: '24.666666666666668%', bottom: 'calc(22% - 32px)', left: '10%', right: '10%' });
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render chart correctly if the label height is less than 16 pixels', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender, text, gaugeChart, indicator, sectors, firstSector, secondSector, thirdSector, fourthSector;
+        return __generator(this, function (_a) {
+            rerender = setUp(__assign(__assign({}, defaultProps), { width: 0, height: 0 })).rerender;
+            text = react_2.screen.getByTestId('gauge-chart-text');
+            Object.defineProperty((0, react_2.within)(text).getByText('Label'), 'clientHeight', { configurable: true, value: 6 });
+            rerender(defaultProps);
+            gaugeChart = react_2.screen.getByTestId('gauge-chart');
+            indicator = react_2.screen.getByTestId('gauge-chart-indicator');
+            sectors = gaugeChart.querySelectorAll('.recharts-pie-sector');
+            firstSector = sectors[0].querySelector('.recharts-sector');
+            expect(firstSector).toHaveAttribute('cx', '200');
+            expect(firstSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(firstSector.getAttribute('d'))).toBe('M 0,249.99999999999997 A 200,200,0, 0,1, 82.4429495415054,88.19660112501052 L 105.95435963320432,120.55728090000841 A 160,160,0, 0,0, 40,249.99999999999997 Z');
+            secondSector = sectors[1].querySelector('.recharts-sector');
+            expect(secondSector).toHaveAttribute('cx', '200');
+            expect(secondSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(secondSector.getAttribute('d'))).toBe('M 82.4429495415054,88.19660112501052 A 200,200,0, 0,1, 317.55705045849464,88.19660112501052 L 294.04564036679574,120.55728090000841 A 160,160,0, 0,0, 105.95435963320432,120.55728090000841 Z');
+            thirdSector = sectors[2].querySelector('.recharts-sector');
+            expect(thirdSector).toHaveAttribute('cx', '200');
+            expect(thirdSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(thirdSector.getAttribute('d'))).toBe('M 317.55705045849464,88.19660112501052 A 200,200,0, 0,1, 390.21130325903073,188.19660112501052 L 352.1690426072246,200.5572809000084 A 160,160,0, 0,0, 294.04564036679574,120.55728090000841 Z');
+            fourthSector = sectors[3].querySelector('.recharts-sector');
+            expect(fourthSector).toHaveAttribute('cx', '200');
+            expect(fourthSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(fourthSector.getAttribute('d'))).toBe('M 390.21130325903073,188.19660112501052 A 200,200,0, 0,1, 400,250 L 360,250 A 160,160,0, 0,0, 352.1690426072246,200.5572809000084 Z');
+            expect(indicator).toHaveAttribute('d', 'M198 98L202 98 L200 36 L198 98');
+            expect(text).toHaveStyle({ top: '30%', bottom: 'calc(16.666666666666664% - -10px)', left: '10%', right: '10%' });
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render custom label correctly', function () {
+        var props = __assign(__assign({}, defaultProps), { value: 78.4, renderValue: function (value) { return react_1.default.createElement("span", { "data-reltio-id": "custom-label" },
+                Math.round(value),
+                "%"); } });
+        setUp(props);
+        expect(react_2.screen.getByTestId('custom-label')).toHaveTextContent('78%');
+    });
+});

package/cjs/GaugeChart/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const MAX_RADIUS = 200;
+export declare const RADIAN: number;
+export declare const ARC_WIDTH_AS_PERCENTAGES = 0.2;
+export declare const BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;
+export declare const TOP_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.07;
+export declare const INDICATOR_WIDTH_AS_PERCENTAGES = 0.01;

package/cjs/GaugeChart/constants.js

@@ -0,0 +1,9 @@
+"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.MAX_RADIUS = 200;
+exports.RADIAN = Math.PI / 180;
+exports.ARC_WIDTH_AS_PERCENTAGES = 0.2;
+exports.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;
+exports.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.07;
+exports.INDICATOR_WIDTH_AS_PERCENTAGES = 0.01;

package/cjs/GaugeChart/helpers.d.ts

@@ -0,0 +1,9 @@
+import { GaugeItem } from './types';
+export declare const getGaugeIndicatorCoords: (value: number, data: GaugeItem[], cx: number, cy: number, oR: number, iR: number) => {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    x3: number;
+    y3: number;
+};

package/cjs/GaugeChart/helpers.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGaugeIndicatorCoords = void 0;
+var constants_1 = require("./constants");
+var getGaugeIndicatorCoords = function (value, data, cx, cy, oR, iR) {
+    var total = data.reduce(function (sum, _a) {
+        var value = _a.value;
+        return sum + value;
+    }, 0);
+    var angle = 180.0 * (1 - 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);
+    var x1 = cx + (iR - constants_1.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * cos + width * sin;
+    var y1 = cy + (iR - constants_1.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * sin - width * cos;
+    var x2 = cx + (iR - constants_1.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * cos - width * sin;
+    var y2 = cy + (iR - constants_1.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * sin + width * cos;
+    var x3 = cx + (oR + constants_1.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * cos;
+    var y3 = cy + (oR + constants_1.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * sin;
+    return { x1: x1, y1: y1, x2: x2, y2: y2, x3: x3, y3: y3 };
+};
+exports.getGaugeIndicatorCoords = getGaugeIndicatorCoords;

package/cjs/GaugeChart/helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/GaugeChart/helpers.test.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var helpers_1 = require("./helpers");
+describe('gauge chart helpers behaviour', function () {
+    it('should calc gauge indicator coordinates correctly', function () {
+        expect((0, helpers_1.getGaugeIndicatorCoords)(75, [
+            { color: 'rgba(241, 35, 35, 1)', value: 30 },
+            { color: 'rgba(255, 109, 26, 1)', value: 40 },
+            { color: 'rgba(255, 238, 54, 1)', value: 20 },
+            { color: 'rgba(147, 244, 87, 1)', value: 10 }
+        ], 200, 250, 200, 180)).toEqual({
+            x1: 320.2081528017131,
+            x2: 323.0365799264593,
+            x3: 351.32085117392114,
+            y1: 126.96342007354075,
+            y2: 129.79184719828694,
+            y3: 98.67914882607883
+        });
+        expect((0, helpers_1.getGaugeIndicatorCoords)(30, [
+            { color: 'rgba(241, 35, 35, 1)', value: 50 },
+            { color: 'rgba(255, 109, 26, 1)', value: 50 }
+        ], 300, 360, 120, 130)).toEqual({
+            x1: 225.43846601973246,
+            x2: 227.38010680623233,
+            x3: 224.52837360564646,
+            y1: 259.41641460700754,
+            y2: 258.0057300015056,
+            y3: 256.1222179222567
+        });
+        expect((0, helpers_1.getGaugeIndicatorCoords)(30, [
+            { color: 'rgba(241, 35, 35, 1)', value: 40 },
+            { color: 'rgba(255, 109, 26, 1)', value: 50 },
+            { color: 'rgba(147, 244, 87, 1)', value: 70 }
+        ], 200, 200, 180, 150)).toEqual({
+            x1: 80.26611294376123,
+            x2: 82.2661657826318,
+            x3: 39.85895267052976,
+            y1: 122.16121602694538,
+            y2: 119.16792542265621,
+            y3: 92.99717312042462
+        });
+    });
+});

package/cjs/GaugeChart/index.d.ts

@@ -0,0 +1 @@
+export { GaugeChart } from './GaugeChart';

package/cjs/GaugeChart/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeChart = void 0;
+var GaugeChart_1 = require("./GaugeChart");
+Object.defineProperty(exports, "GaugeChart", { enumerable: true, get: function () { return GaugeChart_1.GaugeChart; } });

package/cjs/GaugeChart/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"text" | "value" | "label" | "root" | "pie" | "indicator">;

package/cjs/GaugeChart/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    root: {
+        position: 'relative',
+        display: 'flex'
+    },
+    pie: {
+        '& .recharts-sector:focus': {
+            outline: 'none'
+        }
+    },
+    text: {
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: '0 10px',
+        transition: 'opacity 0.5s',
+        textAlign: 'center'
+    },
+    indicator: {
+        fill: 'rgb(0, 0, 102)',
+        stroke: 'none',
+        transition: 'opacity 0.5s'
+    },
+    value: {
+        marginBottom: '2px',
+        fontSize: '28px',
+        lineHeight: '33px',
+        fontWeight: 400,
+        color: theme.palette.text.primary
+    },
+    label: {
+        width: '100%',
+        fontSize: '14px',
+        lineHeight: '16px',
+        fontWeight: 400,
+        color: theme.palette.text.secondary
+    }
+}); });

package/cjs/GaugeChart/types.d.ts

@@ -0,0 +1,5 @@
+export type GaugeItem = {
+    name?: string | number;
+    color: string;
+    value: number;
+};

package/cjs/GaugeChart/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/index.d.ts

@@ -172,6 +172,7 @@ export { LightArrowTooltip } from './LightArrowTooltip';
 export { Marginator } from './Marginator';
 export { ReltioMap } from './ReltioMap';
 export { RelationEditor } from './RelationEditor';
+export { GaugeChart } from './GaugeChart';
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';
 export { withDragHandle } from './HOCs/withDragHandle';

package/cjs/index.js

@@ -17,10 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PieChart = exports.OvIcon = exports.NestedAttributeEditor = exports.NestedAttribute = exports.MoreAttributesButton = exports.InlineReferenceAttribute = exports.InlineNestedAttribute = exports.InlineImageAttribute = exports.InlineAttributesPager = exports.EditableImageAttributesLine = exports.FilterButton = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.EntitySelector = exports.EntityCreator = exports.AttributesPager = exports.AttributesList = exports.EditableAttribute = exports.DropDownMenuButton = exports.DescriptionIcon = exports.DefaultCellValueRenderer = exports.ControlAttributeIcon = exports.ColumnsSettingsPopup = exports.ColumnsSettings = exports.ColorBar = exports.CollapseRowButton = exports.ChartsFactory = exports.CardinalityMessage = exports.BranchDecorator = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.BasicTablePagination = exports.basicTableViewState = exports.BasicTable = exports.BasicAttributeSelector = exports.BarChart = exports.AvatarWithFallback = exports.AutoSizeList = exports.AttributesView = exports.AttributesValuesEditor = exports.AttributesFiltersButton = exports.AttributesFiltersBuilder = exports.AttributesFilterSelector = exports.AttributesErrorsPanel = exports.AttributeListItem = exports.AttributeGroupIcon = exports.ArrowExpandButton = exports.ActionsPanel = exports.ActionButton = void 0;
 exports.ErrorMessage = exports.ConfigureColumnsPopup = exports.ConnectionEditor = exports.DropDownSelector = exports.ReactSelectOptionWithCheckIcon = exports.ReactSelectMenuWithPopper = exports.ReactSelectMenuList = exports.ReactSelectLoadMoreButton = exports.ReactSelectDropdownIndicatorWithIconButton = exports.ReactSelectDropdownIndicator = exports.Highlighter = exports.HierarchyNodeTitle = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.ExpandableSearchInput = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.Drawer = exports.DataTypeValue = exports.DataTenantBadge = exports.ConnectionRelationTypeSelector = exports.CollaborationItem = exports.ConfirmationDialog = exports.CommentsContainer = exports.ColoredSourceIcon = exports.CollapseButton = exports.TreeChart = exports.TableWithBars = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleAttributeEditor = exports.SimpleAttribute = exports.RowCellAutoSizer = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.ReferenceAttribute = exports.ImageAttributesLine = exports.ReadOnlyAttributesPager = exports.ReadOnlyAttributesList = exports.ReadOnlyAttribute = exports.ReadOnlyAttributeValuesBlock = void 0;
 exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.SimpleMatchRules = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportButton = exports.ReadableSearchQuery = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.RelevanceScoreBadge = exports.RequiredMark = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.ProfilesList = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.ImageGalleryDialog = exports.RelationTypesSelector = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.EmptyStub = exports.SaveSegmentDialog = exports.MaskingSwitcher = exports.FileTypeEditor = exports.EmptySearchResult = exports.DropDownEditor = exports.FilterValueEditor = exports.MultiValueChip = exports.TextEditor = exports.DateRangeEditor = exports.NumberEditor = exports.DataTypeValueEditor = exports.DateEditor = exports.ErrorWrapper = void 0;
-exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = void 0;
-exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.SegmentationContext = exports.useReloadData = exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = void 0;
-exports.TestPerspectivesSettingsProvider = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsFilter = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = void 0;
-exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = void 0;
+exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = void 0;
+exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.SegmentationContext = exports.useReloadData = exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = void 0;
+exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsFilter = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.HiddenAttributesContext = void 0;
+exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = void 0;
 // components
 var ActionButton_1 = require("./ActionButton");
 Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
@@ -376,6 +376,8 @@ var ReltioMap_1 = require("./ReltioMap");
 Object.defineProperty(exports, "ReltioMap", { enumerable: true, get: function () { return ReltioMap_1.ReltioMap; } });
 var RelationEditor_1 = require("./RelationEditor");
 Object.defineProperty(exports, "RelationEditor", { enumerable: true, get: function () { return RelationEditor_1.RelationEditor; } });
+var GaugeChart_1 = require("./GaugeChart");
+Object.defineProperty(exports, "GaugeChart", { enumerable: true, get: function () { return GaugeChart_1.GaugeChart; } });
 // HOCs
 var withTooltip_1 = require("./HOCs/withTooltip");
 Object.defineProperty(exports, "withTooltip", { enumerable: true, get: function () { return withTooltip_1.withTooltip; } });

package/esm/GaugeChart/GaugeChart.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { GaugeItem } from './types';
+type Props = {
+    width: number;
+    height: number;
+    data: GaugeItem[];
+    value: number;
+    label?: React.ReactNode;
+    renderValue?: (value: number) => React.ReactNode;
+    isAnimationActive?: boolean;
+};
+export declare const GaugeChart: ({ width, height, data, value, label, renderValue, isAnimationActive }: Props) => JSX.Element;
+export {};

package/esm/GaugeChart/GaugeChart.js

@@ -0,0 +1,57 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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';
+export var GaugeChart = function (_a) {
+    var width = _a.width, height = _a.height, data = _a.data, value = _a.value, label = _a.label, _b = _a.renderValue, renderValue = _b === void 0 ? identity : _b, _c = _a.isAnimationActive, isAnimationActive = _c === void 0 ? true : _c;
+    var styles = useStyles();
+    var labelElRef = useRef();
+    var _d = useState(!isAnimationActive), animationIsEnd = _d[0], setAnimationIsEnd = _d[1];
+    var _e = useState({ bottom: 0, top: 0, left: 0, right: 0 }), margin = _e[0], setMargin = _e[1];
+    var _f = useState(0), textOffset = _f[0], setTextOffset = _f[1];
+    var widthWithoutMargin = width - margin.left - margin.right;
+    var heightWithoutMargin = height - margin.top - margin.bottom - (textOffset > 0 ? textOffset : 0);
+    var outerRadius = Math.min(widthWithoutMargin / 2, heightWithoutMargin, MAX_RADIUS);
+    var innerRadius = outerRadius - ARC_WIDTH_AS_PERCENTAGES * outerRadius;
+    var cx = widthWithoutMargin / 2 + margin.left;
+    var cy = heightWithoutMargin / 2 + outerRadius / 2 + margin.top;
+    var chartData = data.map(function (item, name) { return (__assign(__assign({}, item), { name: name })); });
+    var _g = getGaugeIndicatorCoords(value, chartData, cx, cy, outerRadius, innerRadius), x1 = _g.x1, y1 = _g.y1, x2 = _g.x2, y2 = _g.y2, x3 = _g.x3, y3 = _g.y3;
+    useEffect(function () {
+        var _a;
+        if (animationIsEnd) {
+            var clientHeight = ((_a = labelElRef === null || labelElRef === void 0 ? void 0 : labelElRef.current) !== null && _a !== void 0 ? _a : { clientHeight: 0 }).clientHeight;
+            var textOffset_1 = Math.ceil(clientHeight) - 16;
+            var verticalMargin_1 = Math.ceil(TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * outerRadius);
+            setTextOffset(textOffset_1);
+            setMargin(function (prevMargin) { return (__assign(__assign({}, prevMargin), { bottom: verticalMargin_1, top: verticalMargin_1 })); });
+        }
+    }, [width, height, animationIsEnd]);
+    return (React.createElement("div", { "data-reltio-id": "gauge-chart", className: styles.root, style: { width: width, height: height } },
+        React.createElement(PieChart, { margin: { top: 0, bottom: 0, left: 0, right: 0 }, width: width, height: height },
+            React.createElement(Pie, { className: styles.pie, dataKey: "value", startAngle: 180, endAngle: 0, data: chartData, cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius, stroke: "none", isAnimationActive: isAnimationActive, onAnimationEnd: function () { return setAnimationIsEnd(true); } }, data.map(function (entry, idx) { return (React.createElement(Cell, { key: idx, fill: entry.color })); })),
+            React.createElement("path", { "data-reltio-id": "gauge-chart-indicator", className: styles.indicator, style: { opacity: animationIsEnd ? 1 : 0 }, d: "M".concat(x1, " ").concat(y1, "L").concat(x2, " ").concat(y2, " L").concat(x3, " ").concat(y3, " L").concat(x1, " ").concat(y1) })),
+        React.createElement("div", { "data-reltio-id": "gauge-chart-text", className: styles.text, style: {
+                top: "".concat(((cy - innerRadius) / height) * 100, "%"),
+                bottom: "calc(".concat(((height - cy) / height) * 100, "% - ").concat(textOffset, "px)"),
+                left: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
+                right: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
+                opacity: animationIsEnd ? 1 : 0
+            } },
+            React.createElement(Typography, { className: styles.value }, renderValue(value)),
+            label && (React.createElement("div", { ref: labelElRef, className: styles.label }, label)))));
+};

package/esm/GaugeChart/GaugeChart.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/GaugeChart/GaugeChart.test.js

@@ -0,0 +1,188 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { GaugeChart } from './GaugeChart';
+var defaultProps = {
+    width: 400,
+    height: 300,
+    data: [
+        { color: 'rgba(241, 35, 35, 1)', value: 30 },
+        { color: 'rgba(255, 109, 26, 1)', value: 40 },
+        { color: 'rgba(255, 238, 54, 1)', value: 20 },
+        { color: 'rgba(147, 244, 87, 1)', value: 10 }
+    ],
+    value: 50,
+    label: 'Label',
+    isAnimationActive: false
+};
+var removeExtraSpaces = function (str) { return str.replace(/\s{2,}/g, ' '); };
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var result = render(React.createElement(GaugeChart, __assign({}, props)));
+    return __assign(__assign({}, result), { rerender: function (newProps) { return result.rerender(React.createElement(GaugeChart, __assign({}, props, newProps))); } });
+};
+describe('Gauge chart behaviour', function () {
+    it('should render chart correctly in basic scenario', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender, text, gaugeChart, pieChart, pie, sectors, indicator, firstSector, secondSector, thirdSector, fourthSector;
+        return __generator(this, function (_a) {
+            rerender = setUp(__assign(__assign({}, defaultProps), { width: 0, height: 0 })).rerender;
+            text = screen.getByTestId('gauge-chart-text');
+            Object.defineProperty(within(text).getByText('Label'), 'clientHeight', { configurable: true, value: 16 });
+            rerender(defaultProps);
+            gaugeChart = screen.getByTestId('gauge-chart');
+            pieChart = gaugeChart.querySelector('.recharts-wrapper');
+            expect(gaugeChart).toHaveStyle({ width: '400px', height: '300px' });
+            expect(pieChart).toHaveStyle({ width: '400px', height: '300px' });
+            pie = gaugeChart.querySelector('.recharts-surface');
+            expect(pie).toHaveStyle({ width: '100%', height: '100%' });
+            expect(pie).toHaveAttribute('width', '400');
+            expect(pie).toHaveAttribute('height', '300');
+            expect(pie).toHaveAttribute('cx', '50%');
+            expect(pie).toHaveAttribute('cy', '50%');
+            sectors = gaugeChart.querySelectorAll('.recharts-pie-sector');
+            indicator = screen.getByTestId('gauge-chart-indicator');
+            expect(sectors).toHaveLength(4);
+            firstSector = sectors[0].querySelector('.recharts-sector');
+            expect(firstSector).toHaveAttribute('fill', 'rgba(241, 35, 35, 1)');
+            expect(firstSector).toHaveAttribute('cx', '200');
+            expect(firstSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(firstSector.getAttribute('d'))).toBe('M 0,249.99999999999997 A 200,200,0, 0,1, 82.4429495415054,88.19660112501052 L 105.95435963320432,120.55728090000841 A 160,160,0, 0,0, 40,249.99999999999997 Z');
+            secondSector = sectors[1].querySelector('.recharts-sector');
+            expect(secondSector).toHaveAttribute('fill', 'rgba(255, 109, 26, 1)');
+            expect(secondSector).toHaveAttribute('cx', '200');
+            expect(secondSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(secondSector.getAttribute('d'))).toBe('M 82.4429495415054,88.19660112501052 A 200,200,0, 0,1, 317.55705045849464,88.19660112501052 L 294.04564036679574,120.55728090000841 A 160,160,0, 0,0, 105.95435963320432,120.55728090000841 Z');
+            thirdSector = sectors[2].querySelector('.recharts-sector');
+            expect(thirdSector).toHaveAttribute('fill', 'rgba(255, 238, 54, 1)');
+            expect(thirdSector).toHaveAttribute('cx', '200');
+            expect(thirdSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(thirdSector.getAttribute('d'))).toBe('M 317.55705045849464,88.19660112501052 A 200,200,0, 0,1, 390.21130325903073,188.19660112501052 L 352.1690426072246,200.5572809000084 A 160,160,0, 0,0, 294.04564036679574,120.55728090000841 Z');
+            fourthSector = sectors[3].querySelector('.recharts-sector');
+            expect(fourthSector).toHaveAttribute('fill', 'rgba(147, 244, 87, 1)');
+            expect(fourthSector).toHaveAttribute('cx', '200');
+            expect(fourthSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(fourthSector.getAttribute('d'))).toBe('M 390.21130325903073,188.19660112501052 A 200,200,0, 0,1, 400,250 L 360,250 A 160,160,0, 0,0, 352.1690426072246,200.5572809000084 Z');
+            expect(indicator).toHaveStyle({ opacity: 1 });
+            expect(indicator).toHaveAttribute('d', 'M198 98L202 98 L200 36 L198 98');
+            expect(text).toHaveStyle({ top: '30%', bottom: 'calc(16.666666666666664% - 0px)', left: '10%', right: '10%' });
+            within(text).getByText('50');
+            within(text).getByText('Label');
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render chart correctly if the label height is more than 16 pixels', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender, text, gaugeChart, indicator, sectors, firstSector, secondSector, thirdSector, fourthSector;
+        return __generator(this, function (_a) {
+            rerender = setUp(__assign(__assign({}, defaultProps), { width: 0, height: 0 })).rerender;
+            text = screen.getByTestId('gauge-chart-text');
+            Object.defineProperty(within(text).getByText('Label'), 'clientHeight', { configurable: true, value: 48 });
+            rerender(defaultProps);
+            gaugeChart = screen.getByTestId('gauge-chart');
+            indicator = screen.getByTestId('gauge-chart-indicator');
+            sectors = gaugeChart.querySelectorAll('.recharts-pie-sector');
+            firstSector = sectors[0].querySelector('.recharts-sector');
+            expect(firstSector).toHaveAttribute('cx', '200');
+            expect(firstSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(firstSector.getAttribute('d'))).toBe('M 0,233.99999999999997 A 200,200,0, 0,1, 82.4429495415054,72.19660112501052 L 105.95435963320432,104.55728090000841 A 160,160,0, 0,0, 40,233.99999999999997 Z');
+            secondSector = sectors[1].querySelector('.recharts-sector');
+            expect(secondSector).toHaveAttribute('cx', '200');
+            expect(secondSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(secondSector.getAttribute('d'))).toBe('M 82.4429495415054,72.19660112501052 A 200,200,0, 0,1, 317.55705045849464,72.19660112501052 L 294.04564036679574,104.55728090000841 A 160,160,0, 0,0, 105.95435963320432,104.55728090000841 Z');
+            thirdSector = sectors[2].querySelector('.recharts-sector');
+            expect(thirdSector).toHaveAttribute('cx', '200');
+            expect(thirdSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(thirdSector.getAttribute('d'))).toBe('M 317.55705045849464,72.19660112501052 A 200,200,0, 0,1, 390.21130325903073,172.19660112501052 L 352.1690426072246,184.5572809000084 A 160,160,0, 0,0, 294.04564036679574,104.55728090000841 Z');
+            fourthSector = sectors[3].querySelector('.recharts-sector');
+            expect(fourthSector).toHaveAttribute('cx', '200');
+            expect(fourthSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(fourthSector.getAttribute('d'))).toBe('M 390.21130325903073,172.19660112501052 A 200,200,0, 0,1, 400,234 L 360,234 A 160,160,0, 0,0, 352.1690426072246,184.5572809000084 Z');
+            expect(indicator).toHaveAttribute('d', 'M198 82L202 82 L200 20 L198 82');
+            expect(text).toHaveStyle({ top: '24.666666666666668%', bottom: 'calc(22% - 32px)', left: '10%', right: '10%' });
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render chart correctly if the label height is less than 16 pixels', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender, text, gaugeChart, indicator, sectors, firstSector, secondSector, thirdSector, fourthSector;
+        return __generator(this, function (_a) {
+            rerender = setUp(__assign(__assign({}, defaultProps), { width: 0, height: 0 })).rerender;
+            text = screen.getByTestId('gauge-chart-text');
+            Object.defineProperty(within(text).getByText('Label'), 'clientHeight', { configurable: true, value: 6 });
+            rerender(defaultProps);
+            gaugeChart = screen.getByTestId('gauge-chart');
+            indicator = screen.getByTestId('gauge-chart-indicator');
+            sectors = gaugeChart.querySelectorAll('.recharts-pie-sector');
+            firstSector = sectors[0].querySelector('.recharts-sector');
+            expect(firstSector).toHaveAttribute('cx', '200');
+            expect(firstSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(firstSector.getAttribute('d'))).toBe('M 0,249.99999999999997 A 200,200,0, 0,1, 82.4429495415054,88.19660112501052 L 105.95435963320432,120.55728090000841 A 160,160,0, 0,0, 40,249.99999999999997 Z');
+            secondSector = sectors[1].querySelector('.recharts-sector');
+            expect(secondSector).toHaveAttribute('cx', '200');
+            expect(secondSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(secondSector.getAttribute('d'))).toBe('M 82.4429495415054,88.19660112501052 A 200,200,0, 0,1, 317.55705045849464,88.19660112501052 L 294.04564036679574,120.55728090000841 A 160,160,0, 0,0, 105.95435963320432,120.55728090000841 Z');
+            thirdSector = sectors[2].querySelector('.recharts-sector');
+            expect(thirdSector).toHaveAttribute('cx', '200');
+            expect(thirdSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(thirdSector.getAttribute('d'))).toBe('M 317.55705045849464,88.19660112501052 A 200,200,0, 0,1, 390.21130325903073,188.19660112501052 L 352.1690426072246,200.5572809000084 A 160,160,0, 0,0, 294.04564036679574,120.55728090000841 Z');
+            fourthSector = sectors[3].querySelector('.recharts-sector');
+            expect(fourthSector).toHaveAttribute('cx', '200');
+            expect(fourthSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(fourthSector.getAttribute('d'))).toBe('M 390.21130325903073,188.19660112501052 A 200,200,0, 0,1, 400,250 L 360,250 A 160,160,0, 0,0, 352.1690426072246,200.5572809000084 Z');
+            expect(indicator).toHaveAttribute('d', 'M198 98L202 98 L200 36 L198 98');
+            expect(text).toHaveStyle({ top: '30%', bottom: 'calc(16.666666666666664% - -10px)', left: '10%', right: '10%' });
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render custom label correctly', function () {
+        var props = __assign(__assign({}, defaultProps), { value: 78.4, renderValue: function (value) { return React.createElement("span", { "data-reltio-id": "custom-label" },
+                Math.round(value),
+                "%"); } });
+        setUp(props);
+        expect(screen.getByTestId('custom-label')).toHaveTextContent('78%');
+    });
+});

package/esm/GaugeChart/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const MAX_RADIUS = 200;
+export declare const RADIAN: number;
+export declare const ARC_WIDTH_AS_PERCENTAGES = 0.2;
+export declare const BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;
+export declare const TOP_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.07;
+export declare const INDICATOR_WIDTH_AS_PERCENTAGES = 0.01;

package/esm/GaugeChart/constants.js

@@ -0,0 +1,6 @@
+export var MAX_RADIUS = 200;
+export var RADIAN = Math.PI / 180;
+export var ARC_WIDTH_AS_PERCENTAGES = 0.2;
+export var BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;
+export var TOP_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.07;
+export var INDICATOR_WIDTH_AS_PERCENTAGES = 0.01;

package/esm/GaugeChart/helpers.d.ts

@@ -0,0 +1,9 @@
+import { GaugeItem } from './types';
+export declare const getGaugeIndicatorCoords: (value: number, data: GaugeItem[], cx: number, cy: number, oR: number, iR: number) => {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    x3: number;
+    y3: number;
+};

package/esm/GaugeChart/helpers.js

@@ -0,0 +1,18 @@
+import { RADIAN, BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES, TOP_INDICATOR_HEIGHT_AS_PERCENTAGES, INDICATOR_WIDTH_AS_PERCENTAGES } from './constants';
+export var getGaugeIndicatorCoords = function (value, data, cx, cy, oR, iR) {
+    var total = data.reduce(function (sum, _a) {
+        var value = _a.value;
+        return sum + value;
+    }, 0);
+    var angle = 180.0 * (1 - value / total);
+    var width = INDICATOR_WIDTH_AS_PERCENTAGES * oR;
+    var sin = Math.sin(-RADIAN * angle);
+    var cos = Math.cos(-RADIAN * angle);
+    var x1 = cx + (iR - BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * cos + width * sin;
+    var y1 = cy + (iR - BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * sin - width * cos;
+    var x2 = cx + (iR - BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * cos - width * sin;
+    var y2 = cy + (iR - BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * sin + width * cos;
+    var x3 = cx + (oR + TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * cos;
+    var y3 = cy + (oR + TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * sin;
+    return { x1: x1, y1: y1, x2: x2, y2: y2, x3: x3, y3: y3 };
+};

package/esm/GaugeChart/helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/GaugeChart/helpers.test.js

@@ -0,0 +1,41 @@
+import { getGaugeIndicatorCoords } from './helpers';
+describe('gauge chart helpers behaviour', function () {
+    it('should calc gauge indicator coordinates correctly', function () {
+        expect(getGaugeIndicatorCoords(75, [
+            { color: 'rgba(241, 35, 35, 1)', value: 30 },
+            { color: 'rgba(255, 109, 26, 1)', value: 40 },
+            { color: 'rgba(255, 238, 54, 1)', value: 20 },
+            { color: 'rgba(147, 244, 87, 1)', value: 10 }
+        ], 200, 250, 200, 180)).toEqual({
+            x1: 320.2081528017131,
+            x2: 323.0365799264593,
+            x3: 351.32085117392114,
+            y1: 126.96342007354075,
+            y2: 129.79184719828694,
+            y3: 98.67914882607883
+        });
+        expect(getGaugeIndicatorCoords(30, [
+            { color: 'rgba(241, 35, 35, 1)', value: 50 },
+            { color: 'rgba(255, 109, 26, 1)', value: 50 }
+        ], 300, 360, 120, 130)).toEqual({
+            x1: 225.43846601973246,
+            x2: 227.38010680623233,
+            x3: 224.52837360564646,
+            y1: 259.41641460700754,
+            y2: 258.0057300015056,
+            y3: 256.1222179222567
+        });
+        expect(getGaugeIndicatorCoords(30, [
+            { color: 'rgba(241, 35, 35, 1)', value: 40 },
+            { color: 'rgba(255, 109, 26, 1)', value: 50 },
+            { color: 'rgba(147, 244, 87, 1)', value: 70 }
+        ], 200, 200, 180, 150)).toEqual({
+            x1: 80.26611294376123,
+            x2: 82.2661657826318,
+            x3: 39.85895267052976,
+            y1: 122.16121602694538,
+            y2: 119.16792542265621,
+            y3: 92.99717312042462
+        });
+    });
+});

package/esm/GaugeChart/index.d.ts

@@ -0,0 +1 @@
+export { GaugeChart } from './GaugeChart';

package/esm/GaugeChart/index.js

@@ -0,0 +1 @@
+export { GaugeChart } from './GaugeChart';

package/esm/GaugeChart/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"text" | "value" | "label" | "root" | "pie" | "indicator">;

package/esm/GaugeChart/styles.js

@@ -0,0 +1,41 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    root: {
+        position: 'relative',
+        display: 'flex'
+    },
+    pie: {
+        '& .recharts-sector:focus': {
+            outline: 'none'
+        }
+    },
+    text: {
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: '0 10px',
+        transition: 'opacity 0.5s',
+        textAlign: 'center'
+    },
+    indicator: {
+        fill: 'rgb(0, 0, 102)',
+        stroke: 'none',
+        transition: 'opacity 0.5s'
+    },
+    value: {
+        marginBottom: '2px',
+        fontSize: '28px',
+        lineHeight: '33px',
+        fontWeight: 400,
+        color: theme.palette.text.primary
+    },
+    label: {
+        width: '100%',
+        fontSize: '14px',
+        lineHeight: '16px',
+        fontWeight: 400,
+        color: theme.palette.text.secondary
+    }
+}); });

package/esm/GaugeChart/types.d.ts

@@ -0,0 +1,5 @@
+export type GaugeItem = {
+    name?: string | number;
+    color: string;
+    value: number;
+};

package/esm/GaugeChart/types.js

@@ -0,0 +1 @@
+export {};

package/esm/index.d.ts

@@ -172,6 +172,7 @@ export { LightArrowTooltip } from './LightArrowTooltip';
 export { Marginator } from './Marginator';
 export { ReltioMap } from './ReltioMap';
 export { RelationEditor } from './RelationEditor';
+export { GaugeChart } from './GaugeChart';
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';
 export { withDragHandle } from './HOCs/withDragHandle';

package/esm/index.js

@@ -173,6 +173,7 @@ export { LightArrowTooltip } from './LightArrowTooltip';
 export { Marginator } from './Marginator';
 export { ReltioMap } from './ReltioMap';
 export { RelationEditor } from './RelationEditor';
+export { GaugeChart } from './GaugeChart';
 // HOCs
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1917",
+  "version": "1.4.1918",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",