@reltio/components 1.4.873 → 1.4.877

package/components/charts/LineChart/LineChart.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++) {
@@ -21,28 +20,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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 recharts_1 = require("recharts");
-var getLineChartSettings_1 = __importDefault(require("./getLineChartSettings"));
-var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
-var useClickableStyle_1 = require("../hooks/useClickableStyle");
+import React from 'react';
+import { CartesianGrid, Dot, Line, LineChart as LineChartWidget, Tooltip, XAxis, YAxis } from 'recharts';
+import getLineChartSettings from './getLineChartSettings';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
+import { useClickableStyle } from '../hooks/useClickableStyle';
 var CustomDot = function (_a) {
     var payload = _a.payload, onClick = _a.onClick, otherProps = __rest(_a, ["payload", "onClick"]);
-    var clickable = useClickableStyle_1.useClickableStyle(onClick);
-    return (react_1.default.createElement(recharts_1.Dot, __assign({ className: clickable, payload: payload, onClick: onClick && (function () { return onClick(payload.group); }) }, otherProps)));
+    var clickable = useClickableStyle(onClick);
+    return (React.createElement(Dot, __assign({ className: clickable, payload: payload, onClick: onClick && (function () { return onClick(payload.group); }) }, otherProps)));
 };
 var LineChart = 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 = getLineChartSettings_1.default(options), cartesianGrid = _c.cartesianGrid, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis, lineChart = _c.lineChart, line = _c.line;
-    return (react_1.default.createElement(recharts_1.LineChart, __assign({ width: width, height: height, data: data }, lineChart),
-        react_1.default.createElement(recharts_1.CartesianGrid, __assign({}, cartesianGrid)),
-        react_1.default.createElement(recharts_1.XAxis, __assign({}, xAxis)),
-        react_1.default.createElement(recharts_1.YAxis, __assign({}, yAxis)),
-        react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) }, tooltip)),
-        react_1.default.createElement(recharts_1.Line, __assign({}, line, { activeDot: react_1.default.createElement(CustomDot, __assign({}, line.activeDot, { onClick: onItemClick })) }))));
+    var _c = getLineChartSettings(options), cartesianGrid = _c.cartesianGrid, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis, lineChart = _c.lineChart, line = _c.line;
+    return (React.createElement(LineChartWidget, __assign({ width: width, height: height, data: data }, lineChart),
+        React.createElement(CartesianGrid, __assign({}, cartesianGrid)),
+        React.createElement(XAxis, __assign({}, xAxis)),
+        React.createElement(YAxis, __assign({}, yAxis)),
+        React.createElement(Tooltip, __assign({ content: React.createElement(CustomTooltip, null) }, tooltip)),
+        React.createElement(Line, __assign({}, line, { activeDot: React.createElement(CustomDot, __assign({}, line.activeDot, { onClick: onItemClick })) }))));
 };
-exports.default = LineChart;
+export default LineChart;

package/components/charts/LineChart/getLineChartSettings.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 var getLineChartSettings = function (_a) {
     var margin = _a.margin, isLabelRotated = _a.isLabelRotated;
     return {
@@ -57,4 +55,4 @@ var getLineChartSettings = function (_a) {
         }
     };
 };
-exports.default = getLineChartSettings;
+export default getLineChartSettings;

package/components/charts/MapChart/Legend/Legend.js

@@ -1,22 +1,17 @@
-"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 Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var classnames_1 = __importDefault(require("classnames"));
-var styles_1 = require("./styles");
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { formatNumberAsMetric } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import { useStyles } from './styles';
 var Legend = function (_a) {
     var minValue = _a.minValue, maxValue = _a.maxValue, colors = _a.colors, width = _a.width;
-    var styles = styles_1.useStyles({
+    var styles = useStyles({
         colors: colors,
         width: width
     });
-    return (react_1.default.createElement("div", { className: styles.legendContainer },
-        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.legendLabel, styles.alignTop) }, mdm_sdk_1.formatNumberAsMetric(maxValue)),
-        react_1.default.createElement("div", { className: styles.legendBar }),
-        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.legendLabel, styles.alignBottom) }, mdm_sdk_1.formatNumberAsMetric(minValue))));
+    return (React.createElement("div", { className: styles.legendContainer },
+        React.createElement(Typography, { className: classnames(styles.legendLabel, styles.alignTop) }, formatNumberAsMetric(maxValue)),
+        React.createElement("div", { className: styles.legendBar }),
+        React.createElement(Typography, { className: classnames(styles.legendLabel, styles.alignBottom) }, formatNumberAsMetric(minValue))));
 };
-exports.default = Legend;
+export default Legend;

package/components/charts/MapChart/Legend/styles.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+import { makeStyles } from '@material-ui/core/styles';
 var barWidth = 15;
-exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+export var useStyles = makeStyles(function (theme) { return ({
     legendContainer: function (_a) {
         var width = _a.width;
         return ({

package/components/charts/MapChart/MapChart.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,45 +9,21 @@ 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.MapChart = exports.LEGEND_WIDTH = void 0;
-var react_1 = __importStar(require("react"));
-var withPercents_1 = __importDefault(require("../HOCs/withPercents"));
-var react_simple_maps_1 = require("react-simple-maps");
-var d3_scale_1 = require("d3-scale");
-var d3Geo = __importStar(require("d3-geo"));
-var topojson_client_1 = require("topojson-client");
-var useGeography_1 = __importDefault(require("./useGeography"));
-var ramda_1 = require("ramda");
-var Legend_1 = __importDefault(require("./Legend/Legend"));
-var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
-var recharts_1 = require("recharts");
-var useTooltipState_1 = __importDefault(require("../hooks/useTooltipState"));
-var classnames_1 = __importDefault(require("classnames"));
-var styles_1 = require("./styles");
-var useClickableStyle_1 = require("../hooks/useClickableStyle");
+import React, { useMemo } from 'react';
+import withPercents from '../HOCs/withPercents';
+import { ComposableMap, Geographies, Geography } from 'react-simple-maps';
+import { scaleQuantize } from 'd3-scale';
+import * as d3Geo from 'd3-geo';
+import { feature } from 'topojson-client';
+import useGeography from './useGeography';
+import { pluck } from 'ramda';
+import Legend from './Legend/Legend';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
+import { Tooltip } from 'recharts';
+import useTooltipState from '../hooks/useTooltipState';
+import classnames from 'classnames';
+import { useStyles } from './styles';
+import { useClickableStyle } from '../hooks/useClickableStyle';
 var USA_MAP = 'https://s3.amazonaws.com/reltio-ui-files/map_resources/us-albers.json';
 var MAP_COLORS = [
     '#9BC1FE',
@@ -62,28 +37,28 @@ var MAP_COLORS = [
     '#0F69B4',
     '#0160AD'
 ];
-exports.LEGEND_WIDTH = 75;
-var MapChart = function (_a) {
+export var LEGEND_WIDTH = 75;
+export var MapChart = function (_a) {
     var data = _a.data, width = _a.width, height = _a.height, options = _a.options, onItemClick = _a.onItemClick;
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var _b = options || {}, geoUrl = _b.geoUrl, geoIdName = _b.geoIdName, _c = _b.showLegend, showLegend = _c === void 0 ? true : _c;
-    var values = ramda_1.pluck('value', data);
+    var values = pluck('value', data);
     var minValue = Math.min.apply(Math, values);
     var maxValue = Math.max.apply(Math, values);
-    var mapWidth = width < exports.LEGEND_WIDTH ? 0 : width - (showLegend ? 1 : 0) * exports.LEGEND_WIDTH;
-    var colorScale = d3_scale_1.scaleQuantize().domain([minValue, maxValue]).range(MAP_COLORS);
-    var geography = useGeography_1.default(geoUrl || USA_MAP);
+    var mapWidth = width < LEGEND_WIDTH ? 0 : width - (showLegend ? 1 : 0) * LEGEND_WIDTH;
+    var colorScale = scaleQuantize().domain([minValue, maxValue]).range(MAP_COLORS);
+    var geography = useGeography(geoUrl || USA_MAP);
     var projection = geoUrl ? options.projection : 'geoAlbersUsa';
-    var projectionFunc = react_1.useMemo(function () {
+    var projectionFunc = useMemo(function () {
         return geography
-            ? d3Geo[projection || 'geoEqualEarth']().fitSize([mapWidth, height], topojson_client_1.feature(geography, geography.objects[Object.keys(geography.objects)[0]]))
+            ? d3Geo[projection || 'geoEqualEarth']().fitSize([mapWidth, height], feature(geography, geography.objects[Object.keys(geography.objects)[0]]))
             : undefined;
     }, [geography, mapWidth, height, projection]);
-    var _d = useTooltipState_1.default(), tooltipState = _d.tooltipState, showTooltip = _d.showTooltip, hideTooltip = _d.hideTooltip;
-    var clickable = useClickableStyle_1.useClickableStyle(onItemClick);
-    return (react_1.default.createElement("div", { className: styles.mapChart, style: { width: width, height: height } },
-        react_1.default.createElement(react_simple_maps_1.ComposableMap, { width: mapWidth, height: height, projection: projectionFunc },
-            react_1.default.createElement(react_simple_maps_1.Geographies, { geography: geography }, function (_a) {
+    var _d = useTooltipState(), tooltipState = _d.tooltipState, showTooltip = _d.showTooltip, hideTooltip = _d.hideTooltip;
+    var clickable = useClickableStyle(onItemClick);
+    return (React.createElement("div", { className: styles.mapChart, style: { width: width, height: height } },
+        React.createElement(ComposableMap, { width: mapWidth, height: height, projection: projectionFunc },
+            React.createElement(Geographies, { geography: geography }, function (_a) {
                 var geographies = _a.geographies;
                 return geographies.map(function (geo) {
                     var geoId = geo.properties[geoIdName || 'name'];
@@ -92,7 +67,7 @@ var MapChart = function (_a) {
                         var group = _a.group;
                         return group === geoId;
                     });
-                    return (react_1.default.createElement(react_simple_maps_1.Geography, { key: geo.rsmKey, geography: geo, fill: cur ? colorScale(cur.value) : '#EEE', stroke: '#FFF', className: classnames_1.default(styles.geography, clickable), onMouseEnter: function (event) {
+                    return (React.createElement(Geography, { key: geo.rsmKey, geography: geo, fill: cur ? colorScale(cur.value) : '#EEE', stroke: '#FFF', className: classnames(styles.geography, clickable), onMouseEnter: function (event) {
                             var data = cur || { label: geoLabel, value: 0, percent: 0, group: geoId };
                             var mapRect = event.target.parentElement.parentElement.getBoundingClientRect();
                             var coordinate = {
@@ -103,13 +78,12 @@ var MapChart = function (_a) {
                         }, onMouseLeave: function () { return hideTooltip(); }, onClick: onItemClick && (function () { return onItemClick(geoId); }) }));
                 });
             })),
-        showLegend && react_1.default.createElement(Legend_1.default, { width: exports.LEGEND_WIDTH, minValue: minValue, maxValue: maxValue, colors: MAP_COLORS }),
-        react_1.default.createElement(recharts_1.Tooltip, __assign({ viewBox: {
+        showLegend && React.createElement(Legend, { width: LEGEND_WIDTH, minValue: minValue, maxValue: maxValue, colors: MAP_COLORS }),
+        React.createElement(Tooltip, __assign({ viewBox: {
                 x: 0,
                 y: 0,
                 width: mapWidth,
                 height: height
-            }, content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) }, tooltipState))));
+            }, content: React.createElement(CustomTooltip, null) }, tooltipState))));
 };
-exports.MapChart = MapChart;
-exports.default = withPercents_1.default(exports.MapChart);
+export default withPercents(MapChart);

package/components/charts/MapChart/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({
     mapChart: {
         position: 'relative',
         cursor: 'default',

package/components/charts/MapChart/useGeography.js

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
+import { useEffect, useState } from 'react';
 var useGeography = function (geoUrl) {
-    var _a = react_1.useState(null), geography = _a[0], setGeography = _a[1];
-    react_1.useEffect(function () {
+    var _a = useState(null), geography = _a[0], setGeography = _a[1];
+    useEffect(function () {
         fetch(geoUrl)
             .then(function (res) {
             if (!res.ok) {
@@ -20,4 +18,4 @@ var useGeography = function (geoUrl) {
     }, []); // eslint-disable-line
     return geography;
 };
-exports.default = useGeography;
+export default useGeography;

package/components/charts/PieChart/PieChart.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,58 +9,33 @@ 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.PieChart = void 0;
-var react_1 = __importStar(require("react"));
-var recharts_1 = require("recharts");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var withPercents_1 = __importDefault(require("../HOCs/withPercents"));
-var getLegendProps_1 = __importDefault(require("../CustomLegend/getLegendProps"));
-var ActiveShape_1 = __importDefault(require("../ActiveShape/ActiveShape"));
-var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
-var useClickableStyle_1 = require("../hooks/useClickableStyle");
-var PieChart = function (_a) {
+import React, { useState } from 'react';
+import { Cell, Legend, Pie, PieChart as PieChartWidget, Tooltip } from 'recharts';
+import { getChartItemColor } from '@reltio/mdm-sdk';
+import withPercents from '../HOCs/withPercents';
+import getLegendProps from '../CustomLegend/getLegendProps';
+import ActiveShape from '../ActiveShape/ActiveShape';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
+import { useClickableStyle } from '../hooks/useClickableStyle';
+export var PieChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, isDonut = _a.isDonut, onItemClick = _a.onItemClick;
     var _c = options.showLegend, showLegend = _c === void 0 ? true : _c, margin = options.margin, showActiveShape = options.showActiveShape;
-    var _d = react_1.useState(-1), activeId = _d[0], setActiveId = _d[1];
+    var _d = useState(-1), activeId = _d[0], setActiveId = _d[1];
     var onPieEnter = function (_, index) { return setActiveId(index); };
     var onPieLeave = function () { return setActiveId(-1); };
     var onPieClick = onItemClick && (function (_a) {
         var group = _a.group;
         return onItemClick(group);
     });
-    var clickable = useClickableStyle_1.useClickableStyle(onPieClick);
-    return (react_1.default.createElement(recharts_1.PieChart, { width: width, height: height, margin: margin },
-        !showActiveShape && react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) }),
-        showLegend && (react_1.default.createElement(recharts_1.Legend, __assign({}, getLegendProps_1.default(width), { payload: (data || []).map(function (item) { return ({
+    var clickable = useClickableStyle(onPieClick);
+    return (React.createElement(PieChartWidget, { width: width, height: height, margin: margin },
+        !showActiveShape && React.createElement(Tooltip, { content: React.createElement(CustomTooltip, null) }),
+        showLegend && (React.createElement(Legend, __assign({}, getLegendProps(width), { 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 + "%)"
             }); }) }))),
-        react_1.default.createElement(recharts_1.Pie, { dataKey: "value", data: data, activeIndex: activeId, activeShape: showActiveShape ? ActiveShape_1.default : undefined, onMouseEnter: showActiveShape ? onPieEnter : undefined, onMouseLeave: showActiveShape ? onPieLeave : undefined, innerRadius: isDonut ? (showActiveShape ? '50%' : '60%') : 0, outerRadius: showActiveShape ? '70%' : '80%', onClick: onPieClick }, (data || []).map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: index, fill: mdm_sdk_1.getChartItemColor(entry.label), className: clickable })); }))));
+        React.createElement(Pie, { dataKey: "value", data: data, activeIndex: activeId, activeShape: showActiveShape ? ActiveShape : undefined, onMouseEnter: showActiveShape ? onPieEnter : undefined, onMouseLeave: showActiveShape ? onPieLeave : undefined, innerRadius: isDonut ? (showActiveShape ? '50%' : '60%') : 0, outerRadius: showActiveShape ? '70%' : '80%', onClick: onPieClick }, (data || []).map(function (entry, index) { return (React.createElement(Cell, { key: index, fill: getChartItemColor(entry.label), className: clickable })); }))));
 };
-exports.PieChart = PieChart;
-exports.default = withPercents_1.default(exports.PieChart);
+export default withPercents(PieChart);

package/components/charts/TableWithBars/TableWithBars.js

@@ -1,71 +1,47 @@
-"use strict";
-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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
     for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
         to[j] = from[i];
     return to;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var BasicTableView_1 = require("../../BasicTableView");
-var HeadCellRenderer_1 = __importDefault(require("./cell-renderers/HeadCellRenderer"));
-var AttributeCellRenderer_1 = __importDefault(require("./cell-renderers/AttributeCellRenderer"));
-var NumberCellValueRenderer_1 = __importDefault(require("./cell-renderers/NumberCellValueRenderer"));
-var styles_1 = require("./styles");
+import React, { useMemo } from 'react';
+import i18n from 'ui-i18n';
+import { BasicTable } from '../../BasicTableView';
+import HeadCellRenderer from './cell-renderers/HeadCellRenderer';
+import AttributeCellRenderer from './cell-renderers/AttributeCellRenderer';
+import NumberCellValueRenderer from './cell-renderers/NumberCellValueRenderer';
+import { useStyles } from './styles';
 var TableWithBars = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, basicTableRef = _a.basicTableRef, onItemClick = _a.onItemClick;
-    var styles = styles_1.useStyles({ width: width, height: height });
+    var styles = useStyles({ width: width, height: height });
     var _c = options.headers, _d = _c === void 0 ? [] : _c, labelHeader = _d[0], valueHeader = _d[1], _e = options.showValues, showValues = _e === void 0 ? true : _e;
-    var tableClasses = react_1.useMemo(function () { return ({ cellBorder: styles.cellBorder }); }, [styles]);
-    var maxValue = react_1.useMemo(function () { return Math.max.apply(Math, data.map(function (item) { return item.value; })); }, [data]);
-    var headData = react_1.useMemo(function () { return __spreadArray([
+    var tableClasses = useMemo(function () { return ({ cellBorder: styles.cellBorder }); }, [styles]);
+    var maxValue = useMemo(function () { return Math.max.apply(Math, data.map(function (item) { return item.value; })); }, [data]);
+    var headData = useMemo(function () { return __spreadArray([
         {
             id: 'label',
-            label: labelHeader || ui_i18n_1.default.text('Attributes'),
+            label: labelHeader || i18n.text('Attributes'),
             resizable: false,
-            headCellRenderer: HeadCellRenderer_1.default,
-            rowCellValueRenderer: AttributeCellRenderer_1.default,
+            headCellRenderer: HeadCellRenderer,
+            rowCellValueRenderer: AttributeCellRenderer,
             initialWidth: width * 0.4
         }
     ], (showValues
         ? [
             {
                 id: 'value',
-                label: valueHeader || ui_i18n_1.default.text('No of Profiles'),
+                label: valueHeader || i18n.text('No of Profiles'),
                 resizable: false,
-                headCellRenderer: HeadCellRenderer_1.default,
-                rowCellValueRenderer: NumberCellValueRenderer_1.default,
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: NumberCellValueRenderer,
                 maxValue: maxValue,
                 initialWidth: width * 0.6
             }
         ]
         : [])); }, [maxValue, width, valueHeader, labelHeader, showValues]);
-    var context = react_1.useMemo(function () { return ({
+    var context = useMemo(function () { return ({
         onItemClick: onItemClick
     }); }, [onItemClick]);
-    return (react_1.default.createElement("div", { className: styles.tableContainer },
-        react_1.default.createElement(BasicTableView_1.BasicTable, { columnsData: headData, rowsData: data, headRowHeight: 48, getRowCellHeight: null, classes: tableClasses, defaultColumnWidth: 100, defaultColumnMinWidth: 100, ref: basicTableRef, context: context })));
+    return (React.createElement("div", { className: styles.tableContainer },
+        React.createElement(BasicTable, { columnsData: headData, rowsData: data, headRowHeight: 48, getRowCellHeight: null, classes: tableClasses, defaultColumnWidth: 100, defaultColumnMinWidth: 100, ref: basicTableRef, context: context })));
 };
-exports.default = TableWithBars;
+export default TableWithBars;

package/components/charts/TableWithBars/cell-renderers/AttributeCellRenderer.js

@@ -1,24 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AttributeCellRenderer = void 0;
-var react_1 = __importDefault(require("react"));
-var ExpandedValueTooltip_1 = __importDefault(require("../../../ExpandedValueTooltip/ExpandedValueTooltip"));
-var BasicTableView_1 = require("../../../BasicTableView");
-var classnames_1 = __importDefault(require("classnames"));
-var styles_1 = require("./styles");
-var useClickableStyle_1 = require("../../hooks/useClickableStyle");
-var AttributeCellRenderer = function (_a) {
+import React from 'react';
+import ExpandedValueTooltip from '../../../ExpandedValueTooltip/ExpandedValueTooltip';
+import { withTableContext } from '../../../BasicTableView';
+import classnames from 'classnames';
+import { useStyles } from './styles';
+import { useClickableStyle } from '../../hooks/useClickableStyle';
+export var AttributeCellRenderer = function (_a) {
     var _b = _a.value, value = _b === void 0 ? '' : _b, onClick = _a.onClick;
-    var styles = styles_1.useStyles();
-    var clickable = useClickableStyle_1.useClickableStyle(onClick);
-    return (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: value },
-        react_1.default.createElement("div", { className: classnames_1.default(styles.attribute, clickable), onClick: onClick }, value)));
+    var styles = useStyles();
+    var clickable = useClickableStyle(onClick);
+    return (React.createElement(ExpandedValueTooltip, { value: value },
+        React.createElement("div", { className: classnames(styles.attribute, clickable), onClick: onClick }, value)));
 };
-exports.AttributeCellRenderer = AttributeCellRenderer;
-exports.default = BasicTableView_1.withTableContext(function (_a, _b) {
+export default withTableContext(function (_a, _b) {
     var onItemClick = _a.onItemClick;
     var group = _b.rowValue.group;
     return {
@@ -27,4 +20,4 @@ exports.default = BasicTableView_1.withTableContext(function (_a, _b) {
                 onItemClick(group);
             })
     };
-})(exports.AttributeCellRenderer);
+})(AttributeCellRenderer);

package/components/charts/TableWithBars/cell-renderers/HeadCellRenderer.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++) {
@@ -21,20 +20,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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 DefaultHeadCellRenderer_1 = __importDefault(require("react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer"));
-var ExpandedValueTooltip_1 = __importDefault(require("../../../ExpandedValueTooltip/ExpandedValueTooltip"));
-var styles_1 = require("./styles");
+import React from 'react';
+import classnames from 'classnames';
+import DefaultHeadCellRenderer from 'react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer';
+import ExpandedValueTooltip from '../../../ExpandedValueTooltip/ExpandedValueTooltip';
+import { useStyles } from './styles';
 var HeadCellRenderer = function (_a) {
     var className = _a.className, headCellData = _a.headCellData, otherProps = __rest(_a, ["className", "headCellData"]);
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: classnames_1.default(styles.headCell, className) },
-        react_1.default.createElement(DefaultHeadCellRenderer_1.default, __assign({}, otherProps, { headCellData: __assign(__assign({}, headCellData), { label: (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: headCellData.label },
-                    react_1.default.createElement("div", { className: styles.headLabel }, headCellData.label))) }) }))));
+    var styles = useStyles();
+    return (React.createElement("div", { className: classnames(styles.headCell, className) },
+        React.createElement(DefaultHeadCellRenderer, __assign({}, otherProps, { headCellData: __assign(__assign({}, headCellData), { label: (React.createElement(ExpandedValueTooltip, { value: headCellData.label },
+                    React.createElement("div", { className: styles.headLabel }, headCellData.label))) }) }))));
 };
-exports.default = HeadCellRenderer;
+export default HeadCellRenderer;

package/components/charts/TableWithBars/cell-renderers/NumberCellValueRenderer.js

@@ -1,20 +1,15 @@
-"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 ramda_1 = require("ramda");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var ColorBar_1 = __importDefault(require("../../../ColorBar/ColorBar"));
-var styles_1 = require("./styles");
+import React from 'react';
+import { isNil } from 'ramda';
+import { formatNumberAsMetric } from '@reltio/mdm-sdk';
+import Typography from '@material-ui/core/Typography';
+import ColorBar from '../../../ColorBar/ColorBar';
+import { useStyles } from './styles';
 var NumberCellValueRenderer = function (_a) {
     var value = _a.value, maxValue = _a.columnData.maxValue;
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: styles.numberContainer },
-        react_1.default.createElement(Typography_1.default, { className: styles.number }, mdm_sdk_1.formatNumberAsMetric(value, 9999)),
-        !ramda_1.isNil(maxValue) && (react_1.default.createElement("div", { className: styles.colorBarContainer },
-            react_1.default.createElement(ColorBar_1.default, { width: value, maxWidth: maxValue })))));
+    var styles = useStyles();
+    return (React.createElement("div", { className: styles.numberContainer },
+        React.createElement(Typography, { className: styles.number }, formatNumberAsMetric(value, 9999)),
+        !isNil(maxValue) && (React.createElement("div", { className: styles.colorBarContainer },
+            React.createElement(ColorBar, { width: value, maxWidth: maxValue })))));
 };
-exports.default = NumberCellValueRenderer;
+export default NumberCellValueRenderer;

package/components/charts/TableWithBars/cell-renderers/styles.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+import { makeStyles } from '@material-ui/core/styles';
 var textOverflow = {
     content: '""',
     position: 'absolute',
@@ -12,7 +9,7 @@ var textOverflow = {
     background: 'linear-gradient(to right, rgba(255, 255, 255, 0.2), #fff 100%)',
     pointerEvents: 'none'
 };
-exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+export var useStyles = makeStyles(function (theme) { return ({
     headCell: {
         display: 'flex',
         alignItems: 'center',

package/components/charts/TableWithBars/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({
     tableContainer: function (_a) {
         var width = _a.width, height = _a.height;
         return ({