@reltio/components 1.4.1916 → 1.4.1918

package/esm/AttributeSelector/AttributeSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeOption } from '../types';
 import { TEntityType } from '@reltio/mdm-sdk';
 type Props = {

package/esm/AttributeTitle/AttributeTitle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     label: string;
     isRequired?: boolean;

package/esm/AttributesErrorsPanel/AttributesErrorsPanel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeError } from '@reltio/mdm-sdk';
 type Props = {
     attributesWithErrors?: AttributeError[];

package/esm/AttributesFiltersButton/components/ActionButtons/ActionButtons.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     onClear: () => void;
     onCancel: () => void;

package/esm/AttributesView/AttributesView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Entity, Mode, PinnedAttribute } from '@reltio/mdm-sdk';
 export type AttributesViewProps = {
     attributesCount?: number;

package/esm/AvatarWithFallback/AvatarWithFallback.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     className?: string;
     icon?: string;

package/esm/BarChart/BarChart.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BarChartOptions, ChartType } from '@reltio/mdm-sdk';
 import { BaseChartProps } from '../types/charts';
 type Props = BaseChartProps & {

package/esm/BasicAttributeSelector/components/AttributeTitle/AttributeTitle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeSelectorItem } from '../../../types';
 type Value = {
     fieldName: string;

package/esm/BasicViewHeader/BasicViewHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToolbarProps } from '@mui/material/Toolbar';
 type Props = ToolbarProps & {
     title?: string;

package/esm/BooleanRadioEditor/BooleanRadioEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     value?: boolean;
     onChange?: (checked: boolean) => void;

package/esm/BooleanRadioEditor/components/BooleanEditor/BooleanEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CheckboxProps } from '@mui/material/Checkbox';
 type Props = Omit<CheckboxProps, 'checked' | 'onChange'> & {
     onChange?: (checked: boolean) => void;

package/esm/BubbleChart/BubbleChart.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BubbleChartOptions, ChartType } from '@reltio/mdm-sdk';
 import { BaseChartProps } from '../types/charts';
 type Props = BaseChartProps & {

package/esm/CardinalityMessage/CardinalityMessage.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Cardinality } from '@reltio/mdm-sdk';
 type Props = {
     cardinality?: Cardinality;

package/esm/ChartLegend/ChartLegend.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LegendProps } from 'recharts';
 type Props = LegendProps & {
     alignRight: boolean;

package/esm/ChartTooltip/ChartTooltip.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TooltipProps } from 'recharts';
 export declare const ChartTooltip: ({ payload, active }: TooltipProps<number, string>) => JSX.Element;

package/esm/CloudChart/CloudChart.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ChartType, CloudChartOptions } from '@reltio/mdm-sdk';
 import { BaseChartProps } from '../types/charts';
 type Props = BaseChartProps & {

package/esm/CollaborationItem/components/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AvatarProps } from '@mui/material/Avatar';
 type Props = Omit<AvatarProps, 'children'> & {
     children: string;

package/esm/CollaborationItem/components/Comment/Comment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Comment as CommentType } from '@reltio/mdm-sdk';
 type Props = {
     uri: string;

package/esm/CollaborationItem/components/CommentContent/CommentContent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Comment } from '@reltio/mdm-sdk';
 type Props = {
     className?: string;

package/esm/CollaborationItem/components/CommentTarget/CommentTarget.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Comment } from '@reltio/mdm-sdk';
 type Props = {
     comment: Pick<Comment, 'objectType' | 'objectId' | 'relatedObjectUris'>;

package/esm/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MentionsInputProps } from 'react-mentions';
 type Props = Omit<MentionsInputProps, 'children' | 'onChange'> & {
     onChange?: (value: string, plainTextValue: string, mentions: string[]) => void;

package/esm/CollapseRowButton/CollapseRowButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RowValue } from '../types/basicTable';
 type Props = {
     rowIndex: number;

package/esm/ColorBar/ColorBar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     className?: string;
     width?: number | string;

package/esm/ColumnsSettings/ColumnsSettings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ColumnData } from '../types/basicTable';
 type Props = {
     columnsData: ColumnData[];

package/esm/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GroupedColumnsData } from '../../../types/basicTable';
 type Props = {
     anchorEl: HTMLElement;

package/esm/CommentsContainer/CommentsContainer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Comment } from '@reltio/mdm-sdk';
 type Props = {
     className?: string;

package/esm/ConfirmDeleteDialog/ConfirmDeleteDialog.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     open: boolean;
     onClose: () => void;

package/esm/ConnectionEditor/ConnectionEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeItem, EditingConnection, Entity, ConnectionRelationType } from '@reltio/mdm-sdk';
 type Props = {
     connection: EditingConnection;

package/esm/ControlAttributeIcon/ControlAttributeIcon.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ControlAttributeIcon: () => JSX.Element;

package/esm/CreatableReactSelect/CreatableReactSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const CreatableReactSelect: {
     (props: any): JSX.Element;
     displayName: string;

package/esm/CustomDateRangeEditor/CustomDateRangeEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type DateValues = [Date, Date];
 type Props = {
     values: DateValues;

package/esm/DataTenantBadge/DataTenantBadge.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     dataTenantId: string;
     className?: string;

package/esm/DateEditor/DateEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Moment } from 'moment';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 type Props = Omit<DatePickerProps<Moment>, 'value' | 'minDate' | 'maxDate' | 'onChange'> & {

package/esm/DateIntervalSelector/DateIntervalSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     interval: [number, string];
     onChange: ([number, string]: [any, any]) => void;

package/esm/DeleteButton/DeleteButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     onClick: () => void;
 };

package/esm/DependentLookupEditor/DependentLookupEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Lookups, LookupValue } from '@reltio/mdm-sdk';
 import { TextFieldProps } from '@mui/material/TextField';
 export declare const DEBOUNCE_INTERVAL = 400;

package/esm/DescriptionIcon/DescriptionIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     className?: string;
     description?: string;

package/esm/Drawer/Drawer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DrawerProps } from '@mui/material/Drawer';
 type Props = DrawerProps;
 export declare const Drawer: {

package/esm/EditModeAttributesView/EditModeAttributesView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Entity, Mode, PinnedAttribute } from '@reltio/mdm-sdk';
 type Props = {
     caption?: string;

package/esm/EntityAvatar/EntityAvatar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Entity } from '@reltio/mdm-sdk';
 type Props = {
     entity: Entity;

package/esm/EntityCreator/EntityCreator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, Mode, TEntityType } from '@reltio/mdm-sdk';
 type Props = {
     entityUri: string;

package/esm/EntitySelector/EntitySelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ConnectionEntity, Mode, Metadata, GlobalSearchRequestOptions, TEntityType, AttributeType, PrimitiveValue } from '@reltio/mdm-sdk';
 import { TextFieldProps } from '@mui/material/TextField';
 import { EntityOption as EntityOptionType } from './types';

package/esm/EntitySelector/components/SingleValue/SingleValue.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TEntityType } from '@reltio/mdm-sdk';
 type Props = {
     selectProps: {

package/esm/EntityTypeBadge/EntityTypeBadge.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Entity } from '@reltio/mdm-sdk';
 type Props = {
     entity: Entity;

package/esm/EntityTypeIcon/EntityTypeIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TEntityType } from '@reltio/mdm-sdk';
 type Props = {
     entityType: TEntityType;

package/esm/ErrorMessage/ErrorMessage.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     message?: string;
     className?: string;

package/esm/ErrorPopup/ErrorPopup.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type AddError = (error: {
     title: string;
     message: string;

package/esm/ExpandableSearchInput/ExpandableSearchInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     query: string;
     onChange: (value: string) => void;

package/esm/FileTypeEditor/FileTypeEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FileValue } from '@reltio/mdm-sdk';
 type Props = {
     value?: FileValue;

package/esm/FilterButton/FilterButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     enabled: boolean;
     onClick: () => void;

package/esm/FilterValueEditor/FilterValueEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DataTypeDefinition, DatePeriod, SearchFilter, SearchValue } from '@reltio/mdm-sdk';
 import { TextFieldProps } from '@mui/material/TextField';
 type Props = {

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;
+};