@reltio/components 1.4.699 → 1.4.703

package/components/charts/LineChart/getLineChartSettings.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getLineChartSettings = function (_a) {
+    var margin = _a.margin, isLabelRotated = _a.isLabelRotated;
+    return {
+        lineChart: {
+            layout: 'horizontal',
+            margin: margin
+        },
+        xAxis: {
+            type: 'category',
+            dataKey: 'label',
+            tick: {
+                fill: '#000',
+                opacity: '0.54'
+            },
+            angle: isLabelRotated ? -45 : 0,
+            textAnchor: isLabelRotated ? 'end' : 'middle',
+            stroke: '#666'
+        },
+        yAxis: {
+            dataKey: '',
+            type: 'number',
+            tick: {
+                fill: '#000',
+                opacity: '0.54',
+                width: undefined
+            },
+            stroke: '#666',
+            tickCount: 8
+        },
+        cartesianGrid: {
+            strokeDasharray: '3 3',
+            stroke: '#666',
+            strokeOpacity: '0.4'
+        },
+        tooltip: {
+            cursor: {
+                fill: '#000',
+                opacity: '0.1'
+            }
+        },
+        line: {
+            type: 'linear',
+            dataKey: 'value',
+            stroke: '#4BAFFF',
+            strokeWidth: 3,
+            dot: {
+                strokeWidth: 2,
+                r: 5
+            },
+            activeDot: {
+                strokeWidth: 2,
+                r: 5,
+                stroke: '#4BAFFF'
+            }
+        }
+    };
+};
+exports.default = getLineChartSettings;

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

@@ -0,0 +1,22 @@
+"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");
+var Legend = function (_a) {
+    var minValue = _a.minValue, maxValue = _a.maxValue, colors = _a.colors, width = _a.width;
+    var styles = styles_1.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))));
+};
+exports.default = Legend;

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var barWidth = 15;
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    legendContainer: function (_a) {
+        var width = _a.width;
+        return ({
+            width: width + "px",
+            top: '5%',
+            height: '90%',
+            position: 'relative'
+        });
+    },
+    alignTop: {
+        top: 0
+    },
+    alignBottom: {
+        bottom: 0
+    },
+    legendBar: function (_a) {
+        var colors = _a.colors;
+        return ({
+            background: "linear-gradient(to top, " + colors.join(', ') + ")",
+            width: barWidth + "px",
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0
+        });
+    },
+    legendLabel: function (_a) {
+        var width = _a.width;
+        return ({
+            position: 'absolute',
+            fontSize: '13px',
+            lineHeight: '15px',
+            fontWeight: 'normal',
+            color: theme.palette.text.primary,
+            width: width - barWidth + "px",
+            textAlign: 'right',
+            right: barWidth + "px",
+            paddingRight: '10px',
+            boxSizing: 'border-box',
+            overflowWrap: 'break-word'
+        });
+    }
+}); });

package/components/charts/MapChart/MapChart.js

@@ -0,0 +1,115 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    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");
+var USA_MAP = 'https://s3.amazonaws.com/reltio-ui-files/map_resources/us-albers.json';
+var MAP_COLORS = [
+    '#9BC1FE',
+    '#84B5F7',
+    '#65A6EE',
+    '#3C91E1',
+    '#388EDF',
+    '#1B80D7',
+    '#1D72BB',
+    '#146CB7',
+    '#0F69B4',
+    '#0160AD'
+];
+exports.LEGEND_WIDTH = 75;
+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 _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 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 projection = geoUrl ? options.projection : 'geoAlbersUsa';
+    var projectionFunc = react_1.useMemo(function () {
+        return geography
+            ? d3Geo[projection || 'geoEqualEarth']().fitSize([mapWidth, height], topojson_client_1.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 geographies = _a.geographies;
+                return geographies.map(function (geo) {
+                    var geoId = geo.properties[geoIdName || 'name'];
+                    var geoLabel = geo.properties.name;
+                    var cur = data.find(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) {
+                            var data = cur || { label: geoLabel, value: 0, percent: 0, group: geoId };
+                            var mapRect = event.target.parentElement.parentElement.getBoundingClientRect();
+                            var coordinate = {
+                                x: event.clientX - mapRect.x,
+                                y: event.clientY - mapRect.y
+                            };
+                            showTooltip(data, coordinate);
+                        }, 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: {
+                x: 0,
+                y: 0,
+                width: mapWidth,
+                height: height
+            }, content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) }, tooltipState))));
+};
+exports.MapChart = MapChart;
+exports.default = withPercents_1.default(exports.MapChart);

package/components/charts/MapChart/styles.js

@@ -0,0 +1,16 @@
+"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({
+    mapChart: {
+        position: 'relative',
+        cursor: 'default',
+        display: 'flex'
+    },
+    geography: {
+        '&:focus': {
+            outline: 'none'
+        }
+    }
+});

package/components/charts/MapChart/useGeography.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useGeography = function (geoUrl) {
+    var _a = react_1.useState(null), geography = _a[0], setGeography = _a[1];
+    react_1.useEffect(function () {
+        fetch(geoUrl)
+            .then(function (res) {
+            if (!res.ok) {
+                throw Error(res.statusText);
+            }
+            return res.json();
+        })
+            .then(function (geography) {
+            setGeography(geography);
+        })
+            .catch(function (error) {
+            console.warn("Could not load map " + geoUrl + " :", error);
+        });
+    }, []); // eslint-disable-line
+    return geography;
+};
+exports.default = useGeography;

package/components/charts/PieChart/PieChart.js

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    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) {
+    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 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 ({
+                id: item.label,
+                type: 'square',
+                color: mdm_sdk_1.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 })); }))));
+};
+exports.PieChart = PieChart;
+exports.default = withPercents_1.default(exports.PieChart);

package/components/charts/TableWithBars/TableWithBars.js

@@ -0,0 +1,71 @@
+"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");
+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 _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([
+        {
+            id: 'label',
+            label: labelHeader || ui_i18n_1.default.text('Attributes'),
+            resizable: false,
+            headCellRenderer: HeadCellRenderer_1.default,
+            rowCellValueRenderer: AttributeCellRenderer_1.default,
+            initialWidth: width * 0.4
+        }
+    ], (showValues
+        ? [
+            {
+                id: 'value',
+                label: valueHeader || ui_i18n_1.default.text('No of Profiles'),
+                resizable: false,
+                headCellRenderer: HeadCellRenderer_1.default,
+                rowCellValueRenderer: NumberCellValueRenderer_1.default,
+                maxValue: maxValue,
+                initialWidth: width * 0.6
+            }
+        ]
+        : [])); }, [maxValue, width, valueHeader, labelHeader, showValues]);
+    var context = react_1.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 })));
+};
+exports.default = TableWithBars;

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

@@ -0,0 +1,30 @@
+"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) {
+    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)));
+};
+exports.AttributeCellRenderer = AttributeCellRenderer;
+exports.default = BasicTableView_1.withTableContext(function (_a, _b) {
+    var onItemClick = _a.onItemClick;
+    var group = _b.rowValue.group;
+    return {
+        onClick: onItemClick &&
+            (function () {
+                onItemClick(group);
+            })
+    };
+})(exports.AttributeCellRenderer);

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

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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");
+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))) }) }))));
+};
+exports.default = HeadCellRenderer;

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

@@ -0,0 +1,20 @@
+"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");
+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 })))));
+};
+exports.default = NumberCellValueRenderer;

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var textOverflow = {
+    content: '""',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: '40px',
+    height: '100%',
+    background: 'linear-gradient(to right, rgba(255, 255, 255, 0.2), #fff 100%)',
+    pointerEvents: 'none'
+};
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    headCell: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        '&>div': {
+            padding: '0 16px'
+        }
+    },
+    headLabel: {
+        color: theme.palette.text.primary,
+        fontSize: '12px',
+        fontWeight: 500,
+        lineHeight: '16px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        '&:after': textOverflow
+    },
+    attribute: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        fontWeight: 'normal',
+        lineHeight: '15px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        padding: '0 16px',
+        '&:after': textOverflow
+    },
+    numberContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: '0 16px',
+        height: '100%'
+    },
+    number: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        fontWeight: 'normal',
+        color: theme.palette.text.primary,
+        width: '40px',
+        flexShrink: 0
+    },
+    colorBarContainer: {
+        position: 'relative',
+        width: '100%',
+        marginLeft: '16px',
+        height: '20px',
+        '&>div': {
+            opacity: 1,
+            backgroundColor: '#0072CE'
+        }
+    }
+}); });

package/components/charts/TableWithBars/styles.js

@@ -0,0 +1,19 @@
+"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({
+    tableContainer: function (_a) {
+        var width = _a.width, height = _a.height;
+        return ({
+            height: height,
+            width: width,
+            display: 'flex',
+            flexDirection: 'column'
+        });
+    },
+    cellBorder: {
+        borderLeft: 'none',
+        borderRight: 'none'
+    }
+});