@reltio/components 1.4.874 → 1.4.878

package/components/charts/BubbleChart/BubbleChart.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,75 +9,50 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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.BubbleChart = void 0;
-var react_1 = __importStar(require("react"));
-var recharts_1 = require("recharts");
-var useBubbles_1 = __importDefault(require("./useBubbles"));
-var getLegendProps_1 = __importDefault(require("../CustomLegend/getLegendProps"));
-var helpers_1 = require("./helpers");
-var withPercents_1 = __importDefault(require("../HOCs/withPercents"));
-var ramda_1 = require("ramda");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
-var useTooltipState_1 = __importDefault(require("../hooks/useTooltipState"));
-var styles_1 = require("./styles");
-var useClickableStyle_1 = require("../hooks/useClickableStyle");
-var BubbleChart = function (_a) {
+import React, { useMemo, useState } from 'react';
+import { Legend, Tooltip } from 'recharts';
+import useBubbles from './useBubbles';
+import getLegendProps from '../CustomLegend/getLegendProps';
+import { adjustRectWithLegend } from './helpers';
+import withPercents from '../HOCs/withPercents';
+import { propOr } from 'ramda';
+import { getChartItemColor } from '@reltio/mdm-sdk';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
+import useTooltipState from '../hooks/useTooltipState';
+import { useStyles } from './styles';
+import { useClickableStyle } from '../hooks/useClickableStyle';
+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 = styles_1.useStyles();
+    var styles = useStyles();
     var _c = options.showLegend, showLegend = _c === void 0 ? true : _c, margin = options.margin;
     var initialRect = {
-        x: ramda_1.propOr(0, 'left', margin),
-        y: ramda_1.propOr(0, 'top', margin),
-        width: width - ramda_1.propOr(0, 'left', margin) - ramda_1.propOr(0, 'right', margin),
-        height: height - ramda_1.propOr(0, 'top', margin) - ramda_1.propOr(0, 'bottom', margin)
+        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_1.default(width);
-    var _d = react_1.useState({ width: 0, height: 0 }), legendBox = _d[0], setLegendBox = _d[1];
-    var _e = helpers_1.adjustRectWithLegend(initialRect, initialLegendProps, legendBox), rect = _e.rect, legendProps = _e.legendProps;
-    var bubbles = useBubbles_1.default({ data: data, width: rect.width, height: rect.height });
-    var _f = useTooltipState_1.default(), tooltipState = _f.tooltipState, showTooltip = _f.showTooltip, hideTooltip = _f.hideTooltip;
-    var clickable = useClickableStyle_1.useClickableStyle(onItemClick);
-    var circles = react_1.useMemo(function () {
+    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_1.default.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: mdm_sdk_1.getChartItemColor(bubble.data.label), className: clickable },
-                react_1.default.createElement("animate", { attributeName: 'r', from: 0, to: bubble.r, dur: "0.5s" })));
+            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_1.default.createElement("div", { className: styles.bubbleChart, style: { width: width, height: height } },
-        react_1.default.createElement("svg", { width: width, height: height }, circles),
-        showLegend && (react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps, { payload: (data || []).map(function (item) { return ({
+    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: mdm_sdk_1.getChartItemColor(item.label),
+                color: getChartItemColor(item.label),
                 value: item.label + " (" + item.percent + "%)"
             }); }), chartWidth: width, chartHeight: height, margin: margin, onBBoxUpdate: setLegendBox }))),
-        react_1.default.createElement(recharts_1.Tooltip, __assign({ viewBox: rect, content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) }, tooltipState))));
+        React.createElement(Tooltip, __assign({ viewBox: rect, content: React.createElement(CustomTooltip, null) }, tooltipState))));
 };
-exports.BubbleChart = BubbleChart;
-exports.default = withPercents_1.default(exports.BubbleChart);
+export default withPercents(BubbleChart);

package/components/charts/BubbleChart/helpers.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,8 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.adjustRectWithLegend = void 0;
 var adjustRectWithLegend = function (rect, legendProps, legendBox) {
     var layout = legendProps.layout;
     if (layout === 'vertical') {
@@ -25,4 +22,4 @@ var adjustRectWithLegend = function (rect, legendProps, legendBox) {
     }
     return { rect: rect, legendProps: legendProps };
 };
-exports.adjustRectWithLegend = adjustRectWithLegend;
+export { adjustRectWithLegend };

package/components/charts/BubbleChart/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     bubbleChart: {
         position: 'relative',
         cursor: 'default'

package/components/charts/BubbleChart/useBubbles.js

@@ -1,18 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var d3_hierarchy_1 = require("d3-hierarchy");
+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 react_1.useMemo(function () {
+    return useMemo(function () {
         if (width === 0 || height === 0) {
             return [];
         }
-        var bubblesLayout = d3_hierarchy_1.pack().size([width, height]).padding(2);
-        var bubblesData = d3_hierarchy_1.hierarchy({ children: data })
+        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]);
 };
-exports.default = useBubbles;
+export default useBubbles;

package/components/charts/ChartsFactory.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,48 +9,44 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 BarChart_1 = __importDefault(require("./BarChart/BarChart"));
-var PieChart_1 = __importDefault(require("./PieChart/PieChart"));
-var TreeChart_1 = __importDefault(require("./TreeChart/TreeChart"));
-var TableWithBars_1 = __importDefault(require("./TableWithBars/TableWithBars"));
-var BubbleChart_1 = __importDefault(require("./BubbleChart/BubbleChart"));
-var LineChart_1 = __importDefault(require("./LineChart/LineChart"));
-var MapChart_1 = __importDefault(require("./MapChart/MapChart"));
-var CloudChart_1 = __importDefault(require("./CloudChart/CloudChart"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
+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 { ChartTypes } from '@reltio/mdm-sdk';
 var ChartsFactory = /** @class */ (function () {
     function ChartsFactory() {
     }
     ChartsFactory.build = function (chartType, props) {
         if (props === void 0) { props = {}; }
         switch (chartType) {
-            case mdm_sdk_1.ChartTypes.BAR:
-                return react_1.default.createElement(BarChart_1.default, __assign({}, props));
-            case mdm_sdk_1.ChartTypes.DONUT:
-                return react_1.default.createElement(PieChart_1.default, __assign({}, props, { isDonut: true }));
-            case mdm_sdk_1.ChartTypes.PIE:
-                return react_1.default.createElement(PieChart_1.default, __assign({}, props));
-            case mdm_sdk_1.ChartTypes.TREE:
-                return react_1.default.createElement(TreeChart_1.default, __assign({}, props));
-            case mdm_sdk_1.ChartTypes.TABLE:
-                return react_1.default.createElement(TableWithBars_1.default, __assign({}, props));
-            case mdm_sdk_1.ChartTypes.BUBBLE:
-                return react_1.default.createElement(BubbleChart_1.default, __assign({}, props));
-            case mdm_sdk_1.ChartTypes.LINE:
-                return react_1.default.createElement(LineChart_1.default, __assign({}, props));
-            case mdm_sdk_1.ChartTypes.MAP:
-                return react_1.default.createElement(MapChart_1.default, __assign({}, props));
-            case mdm_sdk_1.ChartTypes.CLOUD:
-                return react_1.default.createElement(CloudChart_1.default, __assign({}, props));
+            case ChartTypes.BAR:
+                return React.createElement(BarChart, __assign({}, props));
+            case ChartTypes.DONUT:
+                return React.createElement(PieChart, __assign({}, props, { isDonut: true }));
+            case ChartTypes.PIE:
+                return React.createElement(PieChart, __assign({}, props));
+            case ChartTypes.TREE:
+                return React.createElement(TreeChart, __assign({}, props));
+            case ChartTypes.TABLE:
+                return React.createElement(TableWithBars, __assign({}, props));
+            case ChartTypes.BUBBLE:
+                return React.createElement(BubbleChart, __assign({}, props));
+            case ChartTypes.LINE:
+                return React.createElement(LineChart, __assign({}, props));
+            case ChartTypes.MAP:
+                return React.createElement(MapChart, __assign({}, props));
+            case ChartTypes.CLOUD:
+                return React.createElement(CloudChart, __assign({}, props));
             default:
-                return react_1.default.createElement("div", null);
+                return React.createElement("div", null);
         }
     };
     return ChartsFactory;
 }());
-exports.default = ChartsFactory;
+export default ChartsFactory;

package/components/charts/CloudChart/CloudChart.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,63 +9,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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.CloudChart = void 0;
-var react_1 = __importStar(require("react"));
-var recharts_1 = require("recharts");
-var useCloud_1 = __importDefault(require("./useCloud"));
-var withPercents_1 = __importDefault(require("../HOCs/withPercents"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var styles_1 = require("./styles");
-var useTooltipState_1 = __importDefault(require("../hooks/useTooltipState"));
-var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
-var useClickableStyle_1 = require("../hooks/useClickableStyle");
-var CloudChart = function (_a) {
+import React, { useMemo } from 'react';
+import { Tooltip } from 'recharts';
+import useCloud from './useCloud';
+import withPercents from '../HOCs/withPercents';
+import { getChartItemColor } from '@reltio/mdm-sdk';
+import { useStyles } from './styles';
+import useTooltipState from '../hooks/useTooltipState';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
+import { useClickableStyle } from '../hooks/useClickableStyle';
+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_1.default(), tooltipState = _c.tooltipState, showTooltip = _c.showTooltip, hideTooltip = _c.hideTooltip;
+    var _c = useTooltipState(), tooltipState = _c.tooltipState, showTooltip = _c.showTooltip, hideTooltip = _c.hideTooltip;
     var maxFontSize = options.maxFontSize;
-    var styles = styles_1.useStyles();
-    var clickable = useClickableStyle_1.useClickableStyle(onItemClick);
-    var rect = react_1.useMemo(function () { return ({
+    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_1.default({ data: data, width: width, height: height, maxFontSize: maxFontSize });
-    var cloudWords = react_1.useMemo(function () {
+    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_1.default.createElement("g", { transform: "translate(" + cx + "," + cy + ")" }, words.map(function (_a) {
+        return (React.createElement("g", { transform: "translate(" + cx + "," + cy + ")" }, words.map(function (_a) {
             var text = _a.text, data = _a.data, x = _a.x, y = _a.y, size = _a.size;
-            return (react_1.default.createElement("text", { key: text, onMouseEnter: function () { return showTooltip(data, { x: cx + x, y: cy + y }); }, onMouseLeave: function () { return hideTooltip(); }, fill: mdm_sdk_1.getChartItemColor(text), textAnchor: "middle", transform: "translate(" + x + "," + y + ")", fontSize: size, className: clickable, onClick: onItemClick && (function () { return onItemClick(data.group); }) }, text));
+            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(" + x + "," + y + ")", fontSize: size, className: clickable, onClick: onItemClick && (function () { return onItemClick(data.group); }) }, text));
         })));
     }, [rect.width, rect.height, words, clickable, onItemClick, showTooltip, hideTooltip]);
-    return (react_1.default.createElement("div", { className: styles.container },
-        react_1.default.createElement("svg", { width: rect.width, height: rect.height }, cloudWords),
-        react_1.default.createElement(recharts_1.Tooltip, __assign({ offset: 5, viewBox: rect, content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) }, tooltipState))));
+    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))));
 };
-exports.CloudChart = CloudChart;
-exports.default = withPercents_1.default(exports.CloudChart);
+export default withPercents(CloudChart);

package/components/charts/CloudChart/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     container: {
         position: 'relative',
         '& text': {

package/components/charts/CloudChart/useCloud.js

@@ -1,13 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var d3_cloud_1 = __importDefault(require("d3-cloud"));
-var react_1 = require("react");
+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 react_1.useMemo(function () {
+    return useMemo(function () {
         if (!width || !height)
             return [];
         var dataValues = data.map(function (item) { return item.value; });
@@ -17,7 +12,7 @@ var useCloud = function (_a) {
         var maxFont = Math.log(maxFontSize);
         var valDiff = maxDataValue - minDataValue;
         var scale = (maxFont - minFont) / (valDiff || 1);
-        var layout = d3_cloud_1.default()
+        var layout = d3Cloud()
             .size([width, height])
             .words(data.map(function (item) { return ({
             text: item.label,
@@ -33,4 +28,4 @@ var useCloud = function (_a) {
         return layout.words();
     }, [data, width, height, maxFontSize]);
 };
-exports.default = useCloud;
+export default useCloud;

package/components/charts/CustomLegend/CustomLegend.js

@@ -1,17 +1,12 @@
-"use strict";
-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 classnames_1 = __importDefault(require("classnames"));
-var styles_1 = require("./styles");
+import React from 'react';
+import classnames from 'classnames';
+import { useStyles } from './styles';
 var CustomLegend = function (_a) {
     var payload = _a.payload, alignRight = _a.alignRight;
     var isTwoCols = payload.length > 8;
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: classnames_1.default(styles.wrapper, { isTwoCols: isTwoCols }, { alignRight: alignRight }) }, payload.map(function (item) { return (react_1.default.createElement("div", { key: item.id, className: styles.item },
-        react_1.default.createElement("div", { style: { background: item.color }, className: styles.itemColor }),
-        react_1.default.createElement("span", { className: styles.value }, item.value))); })));
+    var styles = useStyles();
+    return (React.createElement("div", { className: classnames(styles.wrapper, { isTwoCols: isTwoCols }, { alignRight: alignRight }) }, payload.map(function (item) { return (React.createElement("div", { key: item.id, className: styles.item },
+        React.createElement("div", { style: { background: item.color }, className: styles.itemColor }),
+        React.createElement("span", { className: styles.value }, item.value))); })));
 };
-exports.default = CustomLegend;
+export default CustomLegend;

package/components/charts/CustomLegend/getLegendProps.js

@@ -1,10 +1,5 @@
-"use strict";
-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 CustomLegend_1 = __importDefault(require("./CustomLegend"));
+import React from 'react';
+import CustomLegend from './CustomLegend';
 var getLegendProps = function (width) {
     var alignRight = width > 550;
     return {
@@ -17,7 +12,7 @@ var getLegendProps = function (width) {
             maxHeight: alignRight ? '100%' : '50%',
             maxWidth: alignRight ? '50%' : '100%'
         },
-        content: react_1.default.createElement(CustomLegend_1.default, { alignRight: alignRight })
+        content: React.createElement(CustomLegend, { alignRight: alignRight })
     };
 };
-exports.default = getLegendProps;
+export default getLegendProps;

package/components/charts/CustomLegend/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     wrapper: {
         width: '100%',
         display: 'flex',

package/components/charts/CustomTooltip/CustomTooltip.js

@@ -1,29 +1,22 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomTooltip = void 0;
-var styles_1 = require("./styles");
-var react_1 = __importDefault(require("react"));
-var ramda_1 = require("ramda");
-var CustomTooltip = function (_a) {
+import { useStyles } from './styles';
+import React from 'react';
+import { isNil } from 'ramda';
+export var CustomTooltip = function (_a) {
     var _b;
     var payload = _a.payload, active = _a.active;
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var tooltipPayload = (_b = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _b === void 0 ? void 0 : _b.payload;
     var localizedValue = (tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.localizedValue) || (tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.value);
     var tooltipLabel = tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.label;
     var percent = tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.percent;
-    return (active && (react_1.default.createElement("div", { className: styles.tooltipWrapper },
-        react_1.default.createElement("p", { className: styles.tooltipTitle }, tooltipLabel),
-        ramda_1.isNil(percent) ? (react_1.default.createElement("p", { className: styles.tooltipValue },
+    return (active && (React.createElement("div", { className: styles.tooltipWrapper },
+        React.createElement("p", { className: styles.tooltipTitle }, tooltipLabel),
+        isNil(percent) ? (React.createElement("p", { className: styles.tooltipValue },
             "Value: ",
-            localizedValue)) : (react_1.default.createElement("p", { className: styles.tooltipValueBold },
+            localizedValue)) : (React.createElement("p", { className: styles.tooltipValueBold },
             localizedValue,
-            react_1.default.createElement("span", { className: styles.tooltipPercent },
+            React.createElement("span", { className: styles.tooltipPercent },
                 " (",
                 percent,
                 "%)"))))));
 };
-exports.CustomTooltip = CustomTooltip;

package/components/charts/CustomTooltip/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     tooltipWrapper: {
         borderRadius: '4px',
         background: 'rgba(0, 0, 0, 0.54)',

package/components/charts/HOCs/withPercents.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,25 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -40,21 +20,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var ramda_1 = require("ramda");
+import React, { useMemo } from 'react';
+import { countPercents } from '@reltio/mdm-sdk';
+import { pluck } from 'ramda';
 var enrichDataWithPercents = function (data) {
-    var percents = mdm_sdk_1.countPercents(ramda_1.pluck('value', data), 1);
+    var percents = countPercents(pluck('value', data), 1);
     return data.map(function (item, i) { return (__assign(__assign({}, item), { percent: percents[i] })); });
 };
 var withPercents = function (Component) {
     var WithPercents = function (_a) {
         var data = _a.data, otherProps = __rest(_a, ["data"]);
-        var dataWithPercents = react_1.useMemo(function () { return data && enrichDataWithPercents(data); }, [data]);
-        return react_1.default.createElement(Component, __assign({ data: dataWithPercents }, otherProps));
+        var dataWithPercents = useMemo(function () { return data && enrichDataWithPercents(data); }, [data]);
+        return React.createElement(Component, __assign({ data: dataWithPercents }, otherProps));
     };
     WithPercents.displayName = 'WithPercents';
     return WithPercents;
 };
-exports.default = withPercents;
+export default withPercents;