@reltio/components 1.4.1790 → 1.4.1824-hf

package/esm/components/attributes/readMode/SpecialAttributes/Roles/Roles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    className?: string;
+    values: string[];
+};
+declare const Roles: ({ className, values }: Props) => JSX.Element;
+export default Roles;

package/esm/components/attributes/readMode/SpecialAttributes/Roles/Roles.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import SpecialAttributesArray from '../SpecialAttributesArray';
+import Role from './Role';
+var Roles = function (_a) {
+    var className = _a.className, values = _a.values;
+    return (React.createElement(SpecialAttributesArray, { values: values, className: className, dataReltioId: "reltio-attribute-value", Component: Role }));
+};
+export default Roles;

package/esm/components/attributes/readMode/SpecialAttributes/Roles/index.d.ts

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

package/esm/components/attributes/readMode/SpecialAttributes/Roles/index.js

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

package/esm/components/attributes/readMode/SpecialAttributes/SpecialAttributesArray.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    className?: string;
+    values: string[];
+    Component: React.ElementType;
+    dataReltioId?: string;
+};
+declare const SpecialAttributesArray: ({ className, values, Component, dataReltioId }: Props) => JSX.Element;
+export default SpecialAttributesArray;

package/esm/components/attributes/readMode/SpecialAttributes/SpecialAttributesArray.js

@@ -0,0 +1,8 @@
+import React, { Fragment } from 'react';
+var SpecialAttributesArray = function (_a) {
+    var className = _a.className, values = _a.values, Component = _a.Component, dataReltioId = _a.dataReltioId;
+    return (React.createElement("div", { className: className, "data-reltio-id": dataReltioId }, values.map(function (value, index) { return (React.createElement(Fragment, { key: value },
+        React.createElement(Component, { value: value }),
+        index < values.length - 1 && ', ')); })));
+};
+export default SpecialAttributesArray;

package/esm/components/attributes/readMode/SpecialAttributes/Tags/Tag.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    value: string;
+};
+declare const Tag: ({ value }: Props) => JSX.Element;
+export default Tag;

package/esm/components/attributes/readMode/SpecialAttributes/Tags/Tag.js

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import InternalLink from '../../../../InternalLink/InternalLink';
+import { getDataTenantEntityUri, getHistoryAppearanceBySpecialAttributeValue, getHistoryAttributeClassName } from '@reltio/mdm-sdk';
+import { EntityContext, HistoryDiffContext, UrlGeneratorsContext, useMdmEntity, useMdmUiPath } from '../../../../../contexts';
+import { useCommonStyles } from '../styles';
+var Tag = function (_a) {
+    var value = _a.value;
+    var styles = useCommonStyles();
+    var ownEntity = useContext(EntityContext);
+    var appearance = useContext(HistoryDiffContext).appearance;
+    var generateTagUrl = useContext(UrlGeneratorsContext).generateTagUrl;
+    var currentEntity = useMdmEntity();
+    var uiPath = useMdmUiPath();
+    var attributeAppearance = getHistoryAppearanceBySpecialAttributeValue('tags', value, appearance);
+    var historyClassName = getHistoryAttributeClassName(attributeAppearance);
+    var entity = ownEntity || currentEntity;
+    return (React.createElement(InternalLink, { className: classnames(styles.attributeValue, styles[historyClassName]), href: generateTagUrl({
+            uiPath: uiPath,
+            tag: value,
+            entityUri: entity.dataTenant ? getDataTenantEntityUri(entity) : entity.uri
+        }) }, value));
+};
+export default Tag;

package/esm/components/attributes/readMode/SpecialAttributes/Tags/Tags.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    className?: string;
+    values: string[];
+    dataReltioId?: string;
+};
+declare const Tags: ({ className, values }: Props) => JSX.Element;
+export default Tags;

package/esm/components/attributes/readMode/SpecialAttributes/Tags/Tags.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import SpecialAttributesArray from '../SpecialAttributesArray';
+import Tag from './Tag';
+var Tags = function (_a) {
+    var className = _a.className, values = _a.values;
+    return (React.createElement(SpecialAttributesArray, { values: values, className: className, dataReltioId: "reltio-attribute-value", Component: Tag }));
+};
+export default Tags;

package/esm/components/attributes/readMode/SpecialAttributes/Tags/index.d.ts

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

package/esm/components/attributes/readMode/SpecialAttributes/Tags/index.js

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

package/esm/components/attributes/readMode/helpers/commonStyles.d.ts

@@ -0,0 +1 @@
+export declare const useOvValueStyles: (props?: any) => import("@mui/styles").ClassNameMap<"ovFalse">;

package/esm/components/attributes/readMode/helpers/commonStyles.js

@@ -0,0 +1,4 @@
+import { makeStyles } from '@mui/styles';
+export var useOvValueStyles = makeStyles(function (theme) { return ({
+    ovFalse: theme.inactive
+}); });

package/esm/components/attributes/types/attributes.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { AttributeError, AttributeItem, AttributeType, Crosswalk, Mode } from '@reltio/mdm-sdk';
+import { ScrollToElementContext } from '../../../contexts';
+export type ComplexAttributeProps<T> = {
+    attributeValue: T;
+    attributeType: AttributeType;
+    showEmptyEditors: boolean;
+    lazy?: boolean;
+    ownError?: AttributeError;
+    errors?: AttributeError[];
+    mode?: Mode;
+    crosswalks?: Crosswalk[];
+    showNonOv?: boolean;
+    onAddAttributes: (params: AttributeItem[]) => void;
+    onAddOneMore: (params: AttributeItem) => void;
+    onDeleteAttribute: (param: AttributeItem) => void;
+    onChangeAttribute: (param: AttributeItem) => void;
+    additionalControlsRenderer?: (props: any) => JSX.Element;
+    hideDeleteButton?: boolean;
+    highlightedError?: React.ContextType<typeof ScrollToElementContext>;
+    highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
+    state?: 'deleted' | 'edited';
+    expanded?: boolean;
+};

package/esm/components/attributes/types/attributesView.d.ts

@@ -0,0 +1,11 @@
+import { Entity, Mode, PinnedAttribute } from '@reltio/mdm-sdk';
+export type AttributesViewProps = {
+    attributesCount?: number;
+    caption?: string;
+    className?: string;
+    entity?: Entity;
+    excludeUris?: string[];
+    includeUris?: string[];
+    pinnedAttributes?: PinnedAttribute[];
+    mode?: Mode;
+};

package/esm/components/attributes/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './attributesView';
+export * from './attributes';

package/esm/components/attributes/types/index.js

@@ -0,0 +1,2 @@
+export * from './attributesView';
+export * from './attributes';

package/esm/components/charts/ActiveShape/ActiveShape.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PieLabelRenderProps } from 'recharts';
+type ActiveShapeProps = PieLabelRenderProps & {
+    cx: number;
+    cy: number;
+    innerRadius: number;
+    outerRadius: number;
+};
+declare const ActiveShape: ({ cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, percent, value, label }: ActiveShapeProps) => JSX.Element;
+export default ActiveShape;

package/esm/components/charts/ActiveShape/ActiveShape.js

@@ -0,0 +1,47 @@
+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 from 'react';
+import { Sector } from 'recharts';
+var ActiveShape = function (_a) {
+    var cx = _a.cx, cy = _a.cy, midAngle = _a.midAngle, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, startAngle = _a.startAngle, endAngle = _a.endAngle, fill = _a.fill, percent = _a.percent, value = _a.value, label = _a.label;
+    var RADIAN = Math.PI / 180;
+    var sin = Math.sin(-RADIAN * midAngle);
+    var cos = Math.cos(-RADIAN * midAngle);
+    var sx = cx + (outerRadius + 10) * cos;
+    var sy = cy + (outerRadius + 10) * sin;
+    var mx = cx + (outerRadius + 30) * cos;
+    var my = cy + (outerRadius + 30) * sin;
+    var circleX = mx + (cos >= 0 ? 1 : -1) * 20;
+    var circleY = my;
+    var textX = circleX + (cos >= 0 ? 1 : -1) * 12;
+    var textAnchor = cos >= 0 ? 'start' : 'end';
+    var linePath = "M".concat(sx, ",").concat(sy, "L").concat(mx, ",").concat(my, "L").concat(circleX, ",").concat(circleY);
+    var sectorProps = {
+        cx: cx,
+        cy: cy,
+        innerRadius: innerRadius,
+        outerRadius: outerRadius,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        fill: fill
+    };
+    return (React.createElement("g", null,
+        React.createElement(Sector, __assign({}, sectorProps)),
+        React.createElement(Sector, __assign({}, sectorProps, { innerRadius: outerRadius + 6, outerRadius: outerRadius + 10 })),
+        React.createElement("path", { d: linePath, stroke: fill, fill: "none" }),
+        React.createElement("circle", { cx: circleX, cy: circleY, r: 2, fill: fill }),
+        React.createElement("text", { x: textX, y: circleY, textAnchor: textAnchor, fill: "#444", fontSize: 12, fontWeight: 500 }, label),
+        React.createElement("text", { x: textX, y: circleY, dy: 14, textAnchor: textAnchor, fill: "#000", opacity: 0.6, fontSize: 12 },
+            React.createElement("tspan", { fontWeight: 500 }, value),
+            React.createElement("tspan", { fontWeight: 400 }, " (".concat(percent, "%)")))));
+};
+export default ActiveShape;

package/esm/components/charts/BarChart/BarChart.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BarChartProps } from '../types';
+declare const BarChart: ({ width, height, data, options, onItemClick }: BarChartProps) => JSX.Element;
+export default BarChart;

package/esm/components/charts/BarChart/BarChart.js

@@ -0,0 +1,32 @@
+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 from 'react';
+import { Bar, Rectangle, BarChart as BarChartWidget, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
+import getBarChartSettings from './getBarChartSettings';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
+import { useClickableStyle } from '../hooks/useClickableStyle';
+var BarChart = function (_a) {
+    var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
+    var _c = getBarChartSettings(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
+    var onBarClick = onItemClick && (function (_a) {
+        var group = _a.group;
+        return onItemClick(group);
+    });
+    var clickable = useClickableStyle(onBarClick);
+    return (React.createElement(BarChartWidget, __assign({ width: width, height: height, data: data }, barChart),
+        React.createElement(CartesianGrid, __assign({}, cartesianGrid)),
+        React.createElement(Tooltip, __assign({ content: React.createElement(CustomTooltip, null) }, tooltip)),
+        React.createElement(Bar, __assign({}, bar, { shape: React.createElement(Rectangle, { className: clickable }), onClick: onBarClick })),
+        React.createElement(XAxis, __assign({}, xAxis)),
+        React.createElement(YAxis, __assign({}, yAxis))));
+};
+export default BarChart;

package/esm/components/charts/BarChart/getBarChartSettings.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BarChart, BarProps, CartesianGridProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
+import { BarChartOptions } from '@reltio/mdm-sdk';
+type BarChartSettings = {
+    barChart: React.ComponentProps<typeof BarChart>;
+    bar: Omit<BarProps, 'ref'>;
+    xAxis: XAxisProps;
+    yAxis: YAxisProps;
+    cartesianGrid: Omit<CartesianGridProps, 'ref'>;
+    tooltip: TooltipProps<number, string>;
+};
+declare const getBarChartSettings: ({ margin, isHorizontal, isLabelRotated }: BarChartOptions) => BarChartSettings;
+export default getBarChartSettings;

package/esm/components/charts/BarChart/getBarChartSettings.js

@@ -0,0 +1,52 @@
+import { formatNumberAsMetric } from '@reltio/mdm-sdk';
+var getBarChartSettings = function (_a) {
+    var margin = _a.margin, isHorizontal = _a.isHorizontal, isLabelRotated = _a.isLabelRotated;
+    return {
+        barChart: {
+            layout: isHorizontal ? 'vertical' : 'horizontal',
+            barCategoryGap: '30%',
+            margin: margin
+        },
+        bar: {
+            dataKey: 'value',
+            fill: isHorizontal ? '#9FC3FF' : '#0072CE'
+        },
+        xAxis: {
+            type: isHorizontal ? 'number' : 'category',
+            dataKey: isHorizontal ? '' : 'label',
+            tick: {
+                fill: '#000',
+                opacity: '0.54'
+            },
+            angle: isLabelRotated ? -45 : 0,
+            textAnchor: isLabelRotated ? 'end' : 'middle',
+            stroke: '#666'
+        },
+        yAxis: {
+            dataKey: isHorizontal ? 'label' : '',
+            type: isHorizontal ? 'category' : 'number',
+            tick: {
+                fill: '#000',
+                opacity: isHorizontal ? '0.87' : '0.54',
+                width: isHorizontal ? 150 : undefined
+            },
+            tickFormatter: function (value) { return formatNumberAsMetric(value); },
+            stroke: '#666',
+            tickCount: 8,
+            mirror: isHorizontal
+        },
+        cartesianGrid: {
+            strokeDasharray: '3 3',
+            stroke: '#666',
+            strokeOpacity: '0.4',
+            vertical: !isHorizontal
+        },
+        tooltip: {
+            cursor: {
+                fill: '#000',
+                opacity: '0.1'
+            }
+        }
+    };
+};
+export default getBarChartSettings;

package/esm/components/charts/BubbleChart/BubbleChart.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BubbleChartProps } from '../types';
+export declare const BubbleChart: ({ width, height, data, options, onItemClick }: BubbleChartProps) => JSX.Element;
+declare const _default: {
+    ({ data, ...otherProps }: import("../types/charts").BaseChartProps & {
+        chartType?: import("@reltio/mdm-sdk").ChartType.BUBBLE;
+        options?: import("@reltio/mdm-sdk").BubbleChartOptions;
+    }): JSX.Element;
+    displayName: string;
+};
+export default _default;

package/esm/components/charts/BubbleChart/BubbleChart.js

@@ -0,0 +1,58 @@
+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, { useMemo, useState } from 'react';
+import { propOr } from 'ramda';
+import { getChartItemColor } from '@reltio/mdm-sdk';
+import { Legend, Tooltip } from 'recharts';
+import getLegendProps from '../CustomLegend/getLegendProps';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
+import { adjustRectWithLegend } from './helpers';
+import withPercents from '../HOCs/withPercents';
+import useTooltipState from '../hooks/useTooltipState';
+import { useClickableStyle } from '../hooks/useClickableStyle';
+import useBubbles from './useBubbles';
+import { useStyles } from './styles';
+export var BubbleChart = function (_a) {
+    var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
+    var styles = useStyles();
+    var _c = options.showLegend, showLegend = _c === void 0 ? true : _c, margin = options.margin;
+    var initialRect = {
+        x: propOr(0, 'left', margin),
+        y: propOr(0, 'top', margin),
+        width: width - propOr(0, 'left', margin) - propOr(0, 'right', margin),
+        height: height - propOr(0, 'top', margin) - propOr(0, 'bottom', margin)
+    };
+    var initialLegendProps = getLegendProps(width);
+    var _d = useState({ width: 0, height: 0 }), legendBox = _d[0], setLegendBox = _d[1];
+    var _e = adjustRectWithLegend(initialRect, initialLegendProps, legendBox), rect = _e.rect, legendProps = _e.legendProps;
+    var bubbles = useBubbles({ data: data, width: rect.width, height: rect.height });
+    var _f = useTooltipState(), tooltipState = _f.tooltipState, showTooltip = _f.showTooltip, hideTooltip = _f.hideTooltip;
+    var clickable = useClickableStyle(onItemClick);
+    var circles = useMemo(function () {
+        return bubbles.map(function (bubble) {
+            var cx = rect.x + bubble.x;
+            var cy = rect.y + bubble.y;
+            return (React.createElement("circle", { key: bubble.data.label, cx: cx, cy: cy, r: bubble.r, onMouseEnter: function () { return showTooltip(bubble.data, { x: cx, y: cy }); }, onMouseLeave: function () { return hideTooltip(); }, onClick: onItemClick && (function () { return onItemClick(bubble.data.group); }), fill: getChartItemColor(bubble.data.label), className: clickable },
+                React.createElement("animate", { attributeName: 'r', from: 0, to: bubble.r, dur: "0.5s" })));
+        });
+    }, [bubbles, hideTooltip, rect.x, rect.y, showTooltip, onItemClick, clickable]);
+    return (React.createElement("div", { className: styles.bubbleChart, style: { width: width, height: height } },
+        React.createElement("svg", { width: width, height: height }, circles),
+        showLegend && (React.createElement(Legend, __assign({}, legendProps, { payload: (data || []).map(function (item) { return ({
+                id: item.label,
+                type: 'square',
+                color: getChartItemColor(item.label),
+                value: "".concat(item.label, " (").concat(item.percent, "%)")
+            }); }), chartWidth: width, chartHeight: height, margin: margin, onBBoxUpdate: setLegendBox }))),
+        React.createElement(Tooltip, __assign({ viewBox: rect, content: React.createElement(CustomTooltip, null) }, tooltipState))));
+};
+export default withPercents(BubbleChart);

package/esm/components/charts/BubbleChart/helpers.d.ts

@@ -0,0 +1,7 @@
+import { CartesianAxisProps, LegendProps } from 'recharts';
+type ViewBox = CartesianAxisProps['viewBox'];
+declare const adjustRectWithLegend: (rect: ViewBox, legendProps: Omit<LegendProps, 'ref'>, legendBox: ViewBox) => {
+    rect: import("recharts/types/util/types").CartesianViewBox;
+    legendProps: Omit<LegendProps, "ref">;
+};
+export { adjustRectWithLegend };

package/esm/components/charts/BubbleChart/helpers.js

@@ -0,0 +1,25 @@
+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 adjustRectWithLegend = function (rect, legendProps, legendBox) {
+    var layout = legendProps.layout;
+    if (layout === 'vertical') {
+        return { rect: __assign(__assign({}, rect), { width: rect.width - legendBox.width }), legendProps: legendProps };
+    }
+    if (layout === 'horizontal') {
+        return {
+            rect: __assign(__assign({}, rect), { height: rect.height - legendBox.height }),
+            legendProps: __assign(__assign({}, legendProps), { width: rect.width })
+        };
+    }
+    return { rect: rect, legendProps: legendProps };
+};
+export { adjustRectWithLegend };

package/esm/components/charts/BubbleChart/useBubbles.d.ts

@@ -0,0 +1,14 @@
+import { ChartData } from '../types';
+type Props = {
+    width: number;
+    height: number;
+    data: ChartData[];
+};
+export type Bubble = {
+    data: ChartData;
+    r: number;
+    x: number;
+    y: number;
+};
+declare const useBubbles: ({ data, width, height }: Props) => Bubble[];
+export default useBubbles;

package/esm/components/charts/BubbleChart/useBubbles.js

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { hierarchy, pack } from 'd3-hierarchy';
+var useBubbles = function (_a) {
+    var data = _a.data, width = _a.width, height = _a.height;
+    return useMemo(function () {
+        if (width === 0 || height === 0) {
+            return [];
+        }
+        var bubblesLayout = pack().size([width, height]).padding(2);
+        var bubblesData = hierarchy({ children: data })
+            .sum(function (d) { return d.value; })
+            .sort(function (a, b) { return b.value - a.value; });
+        return bubblesLayout(bubblesData).leaves();
+    }, [data, height, width]);
+};
+export default useBubbles;

package/esm/components/charts/ChartsFactory.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ChartProps } from './types';
+export default class ChartsFactory {
+    static build(props: ChartProps): JSX.Element;
+}

package/esm/components/charts/ChartsFactory.js

@@ -0,0 +1,51 @@
+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 from 'react';
+import BarChart from './BarChart/BarChart';
+import PieChart from './PieChart/PieChart';
+import TreeChart from './TreeChart/TreeChart';
+import TableWithBars from './TableWithBars/TableWithBars';
+import BubbleChart from './BubbleChart/BubbleChart';
+import LineChart from './LineChart/LineChart';
+import MapChart from './MapChart/MapChart';
+import CloudChart from './CloudChart/CloudChart';
+import { ChartType } from '@reltio/mdm-sdk';
+var ChartsFactory = /** @class */ (function () {
+    function ChartsFactory() {
+    }
+    ChartsFactory.build = function (props) {
+        switch (props.chartType) {
+            case ChartType.BAR:
+                return React.createElement(BarChart, __assign({}, props));
+            case ChartType.DONUT:
+                return React.createElement(PieChart, __assign({ isDonut: true }, props));
+            case ChartType.PIE:
+                return React.createElement(PieChart, __assign({}, props));
+            case ChartType.TREE:
+                return React.createElement(TreeChart, __assign({}, props));
+            case ChartType.TABLE:
+                return React.createElement(TableWithBars, __assign({}, props));
+            case ChartType.BUBBLE:
+                return React.createElement(BubbleChart, __assign({}, props));
+            case ChartType.LINE:
+                return React.createElement(LineChart, __assign({}, props));
+            case ChartType.MAP:
+                return React.createElement(MapChart, __assign({}, props));
+            case ChartType.CLOUD:
+                return React.createElement(CloudChart, __assign({}, props));
+            default:
+                return React.createElement("div", null);
+        }
+    };
+    return ChartsFactory;
+}());
+export default ChartsFactory;

package/esm/components/charts/CloudChart/CloudChart.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CloudChartProps } from '../types';
+export declare const CloudChart: ({ width, height, data, options, onItemClick }: CloudChartProps) => JSX.Element;
+declare const _default: {
+    ({ data, ...otherProps }: import("../types/charts").BaseChartProps & {
+        chartType?: import("@reltio/mdm-sdk").ChartType.CLOUD;
+        options?: import("@reltio/mdm-sdk").CloudChartOptions;
+    }): JSX.Element;
+    displayName: string;
+};
+export default _default;

package/esm/components/charts/CloudChart/CloudChart.js

@@ -0,0 +1,46 @@
+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, { useMemo } from 'react';
+import { getChartItemColor } from '@reltio/mdm-sdk';
+import { Tooltip } from 'recharts';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
+import useTooltipState from '../hooks/useTooltipState';
+import { useClickableStyle } from '../hooks/useClickableStyle';
+import useCloud from './useCloud';
+import withPercents from '../HOCs/withPercents';
+import { useStyles } from './styles';
+export var CloudChart = function (_a) {
+    var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
+    var _c = useTooltipState(), tooltipState = _c.tooltipState, showTooltip = _c.showTooltip, hideTooltip = _c.hideTooltip;
+    var maxFontSize = options.maxFontSize;
+    var styles = useStyles();
+    var clickable = useClickableStyle(onItemClick);
+    var rect = useMemo(function () { return ({
+        x: 0,
+        y: 0,
+        width: width || 0,
+        height: height || 0
+    }); }, [width, height]);
+    var words = useCloud({ data: data, width: width, height: height, maxFontSize: maxFontSize });
+    var cloudWords = useMemo(function () {
+        var cx = rect.width / 2;
+        var cy = rect.height / 2;
+        return (React.createElement("g", { transform: "translate(".concat(cx, ",").concat(cy, ")") }, words.map(function (_a) {
+            var text = _a.text, data = _a.data, x = _a.x, y = _a.y, size = _a.size;
+            return (React.createElement("text", { key: text, onMouseEnter: function () { return showTooltip(data, { x: cx + x, y: cy + y }); }, onMouseLeave: function () { return hideTooltip(); }, fill: getChartItemColor(text), textAnchor: "middle", transform: "translate(".concat(x, ",").concat(y, ")"), fontSize: size, className: clickable, onClick: onItemClick && (function () { return onItemClick(data.group); }) }, text));
+        })));
+    }, [rect.width, rect.height, words, clickable, onItemClick, showTooltip, hideTooltip]);
+    return (React.createElement("div", { className: styles.container },
+        React.createElement("svg", { width: rect.width, height: rect.height }, cloudWords),
+        React.createElement(Tooltip, __assign({ offset: 5, viewBox: rect, content: React.createElement(CustomTooltip, null) }, tooltipState))));
+};
+export default withPercents(CloudChart);

package/esm/components/charts/CloudChart/useCloud.d.ts

@@ -0,0 +1,13 @@
+import { Word } from 'd3-cloud';
+import { ChartData } from '../types';
+type Props = {
+    data: ChartData[];
+    width: number;
+    height: number;
+    maxFontSize: number;
+};
+export type CloudWord = Word & {
+    data?: ChartData;
+};
+declare const useCloud: ({ data, width, height, maxFontSize }: Props) => CloudWord[];
+export default useCloud;

package/esm/components/charts/CloudChart/useCloud.js

@@ -0,0 +1,31 @@
+import d3Cloud from 'd3-cloud';
+import { useMemo } from 'react';
+var useCloud = function (_a) {
+    var data = _a.data, width = _a.width, height = _a.height, _b = _a.maxFontSize, maxFontSize = _b === void 0 ? 40 : _b;
+    return useMemo(function () {
+        if (!width || !height)
+            return [];
+        var dataValues = data.map(function (item) { return item.value; });
+        var minDataValue = Math.min.apply(Math, dataValues);
+        var maxDataValue = Math.max.apply(Math, dataValues);
+        var minFont = Math.log(12);
+        var maxFont = Math.log(maxFontSize);
+        var valDiff = maxDataValue - minDataValue;
+        var scale = (maxFont - minFont) / (valDiff || 1);
+        var layout = d3Cloud()
+            .size([width, height])
+            .words(data.map(function (item) { return ({
+            text: item.label,
+            size: Math.floor(Math.exp(minFont + scale * (item.value - minDataValue))),
+            font: 'Roboto',
+            data: item
+        }); }))
+            .random(function () { return 0.5; })
+            .fontSize(function (word) { return word.size; })
+            .rotate(0)
+            .padding(3)
+            .start();
+        return layout.words();
+    }, [data, width, height, maxFontSize]);
+};
+export default useCloud;

package/esm/components/charts/CustomLegend/CustomLegend.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { LegendProps } from 'recharts';
+type CustomLegendProps = LegendProps & {
+    alignRight: boolean;
+};
+declare const CustomLegend: ({ payload, alignRight }: CustomLegendProps) => JSX.Element;
+export default CustomLegend;