@reltio/components 1.4.701 → 1.4.702

package/components/charts/BubbleChart/BubbleChart.js

@@ -0,0 +1,84 @@
+"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.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) {
+    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 _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)
+    };
+    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 () {
+        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" })));
+        });
+    }, [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 ({
+                id: item.label,
+                type: 'square',
+                color: mdm_sdk_1.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))));
+};
+exports.BubbleChart = BubbleChart;
+exports.default = withPercents_1.default(exports.BubbleChart);

package/components/charts/BubbleChart/helpers.js

@@ -0,0 +1,28 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adjustRectWithLegend = void 0;
+var adjustRectWithLegend = function (rect, legendProps, legendBox) {
+    var layout = legendProps.layout;
+    if (layout === 'vertical') {
+        return { rect: __assign(__assign({}, rect), { width: rect.width - legendBox.width }), legendProps: legendProps };
+    }
+    if (layout === 'horizontal') {
+        return {
+            rect: __assign(__assign({}, rect), { height: rect.height - legendBox.height }),
+            legendProps: __assign(__assign({}, legendProps), { width: rect.width })
+        };
+    }
+    return { rect: rect, legendProps: legendProps };
+};
+exports.adjustRectWithLegend = adjustRectWithLegend;

package/components/charts/BubbleChart/styles.js

@@ -0,0 +1,10 @@
+"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({
+    bubbleChart: {
+        position: 'relative',
+        cursor: 'default'
+    }
+});

package/components/charts/BubbleChart/useBubbles.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var d3_hierarchy_1 = require("d3-hierarchy");
+var useBubbles = function (_a) {
+    var data = _a.data, width = _a.width, height = _a.height;
+    return react_1.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 })
+            .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;

package/components/charts/ChartsFactory.js

@@ -0,0 +1,57 @@
+"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 __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");
+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));
+            default:
+                return react_1.default.createElement("div", null);
+        }
+    };
+    return ChartsFactory;
+}());
+exports.default = ChartsFactory;

package/components/charts/CloudChart/CloudChart.js

@@ -0,0 +1,72 @@
+"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.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) {
+    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 maxFontSize = options.maxFontSize;
+    var styles = styles_1.useStyles();
+    var clickable = useClickableStyle_1.useClickableStyle(onItemClick);
+    var rect = react_1.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 cx = rect.width / 2;
+        var cy = rect.height / 2;
+        return (react_1.default.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));
+        })));
+    }, [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))));
+};
+exports.CloudChart = CloudChart;
+exports.default = withPercents_1.default(exports.CloudChart);

package/components/charts/CloudChart/styles.js

@@ -0,0 +1,34 @@
+"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({
+    container: {
+        position: 'relative',
+        '& text': {
+            transition: 'transform .5s',
+            userSelect: 'none',
+            animation: '$fadeInOpacity ease-in',
+            '&:nth-child(4n+1)': {
+                animationDuration: '0.25s'
+            },
+            '&:nth-child(4n+2)': {
+                animationDuration: '1.5s'
+            },
+            '&:nth-child(4n+3)': {
+                animationDuration: '1s'
+            },
+            '&:nth-child(4n+4)': {
+                animationDuration: '0.5s'
+            }
+        }
+    },
+    '@keyframes fadeInOpacity': {
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 1
+        }
+    }
+});

package/components/charts/CloudChart/useCloud.js

@@ -0,0 +1,36 @@
+"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");
+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 () {
+        if (!width || !height)
+            return [];
+        var dataValues = data.map(function (item) { return item.value; });
+        var minDataValue = Math.min.apply(Math, dataValues);
+        var maxDataValue = Math.max.apply(Math, dataValues);
+        var minFont = Math.log(12);
+        var maxFont = Math.log(maxFontSize);
+        var valDiff = maxDataValue - minDataValue;
+        var scale = (maxFont - minFont) / (valDiff || 1);
+        var layout = d3_cloud_1.default()
+            .size([width, height])
+            .words(data.map(function (item) { return ({
+            text: item.label,
+            size: Math.floor(Math.exp(minFont + scale * (item.value - minDataValue))),
+            font: 'Roboto',
+            data: item
+        }); }))
+            .random(function () { return 0.5; })
+            .fontSize(function (word) { return word.size; })
+            .rotate(0)
+            .padding(3)
+            .start();
+        return layout.words();
+    }, [data, width, height, maxFontSize]);
+};
+exports.default = useCloud;

package/components/charts/CustomLegend/CustomLegend.js

@@ -0,0 +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 classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./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))); })));
+};
+exports.default = CustomLegend;

package/components/charts/CustomLegend/getLegendProps.js

@@ -0,0 +1,23 @@
+"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"));
+var getLegendProps = function (width) {
+    var alignRight = width > 550;
+    return {
+        layout: alignRight ? 'vertical' : 'horizontal',
+        align: alignRight ? 'right' : 'center',
+        verticalAlign: alignRight ? 'middle' : 'bottom',
+        wrapperStyle: {
+            display: 'flex',
+            overflowY: 'auto',
+            maxHeight: alignRight ? '100%' : '50%',
+            maxWidth: alignRight ? '50%' : '100%'
+        },
+        content: react_1.default.createElement(CustomLegend_1.default, { alignRight: alignRight })
+    };
+};
+exports.default = getLegendProps;

package/components/charts/CustomLegend/styles.js

@@ -0,0 +1,41 @@
+"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({
+    wrapper: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        margin: 'auto',
+        flexWrap: 'wrap',
+        '&.alignRight': {
+            display: 'grid',
+            gridAutoRows: 'min-content',
+            gridTemplateColumns: '1fr',
+            '&.isTwoCols': {
+                gridTemplateColumns: '1fr 1fr',
+                minWidth: '141px',
+                maxWidth: '282px'
+            }
+        }
+    },
+    item: {
+        display: 'flex',
+        alignItems: 'baseline',
+        '&:not(:last-child)': {
+            marginRight: 10
+        }
+    },
+    itemColor: {
+        width: 12,
+        height: 12,
+        marginRight: 10,
+        flexShrink: 0
+    },
+    value: {
+        fontSize: '14px',
+        lineHeight: '27px',
+        letterSpacing: '0.5px'
+    }
+});

package/components/charts/CustomTooltip/CustomTooltip.js

@@ -0,0 +1,29 @@
+"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) {
+    var _b;
+    var payload = _a.payload, active = _a.active;
+    var styles = styles_1.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 },
+            "Value: ",
+            localizedValue)) : (react_1.default.createElement("p", { className: styles.tooltipValueBold },
+            localizedValue,
+            react_1.default.createElement("span", { className: styles.tooltipPercent },
+                " (",
+                percent,
+                "%)"))))));
+};
+exports.CustomTooltip = CustomTooltip;

package/components/charts/CustomTooltip/styles.js

@@ -0,0 +1,31 @@
+"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({
+    tooltipWrapper: {
+        borderRadius: '4px',
+        background: 'rgba(0, 0, 0, 0.54)',
+        padding: '6px 8px 7px 8px',
+        textAlign: 'center',
+        color: '#FFFFFF',
+        '& p': {
+            fontSize: '12px',
+            lineHeight: '14px',
+            padding: 0,
+            margin: 0
+        }
+    },
+    tooltipTitle: {
+        fontWeight: 500
+    },
+    tooltipValue: {
+        fontWeight: 'normal'
+    },
+    tooltipValueBold: {
+        fontWeight: 500
+    },
+    tooltipPercent: {
+        fontWeight: 'normal'
+    }
+});

package/components/charts/HOCs/withPercents.js

@@ -0,0 +1,60 @@
+"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 __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;
+};
+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");
+var enrichDataWithPercents = function (data) {
+    var percents = mdm_sdk_1.countPercents(ramda_1.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));
+    };
+    WithPercents.displayName = 'WithPercents';
+    return WithPercents;
+};
+exports.default = withPercents;

package/components/charts/LineChart/LineChart.js

@@ -0,0 +1,48 @@
+"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 recharts_1 = require("recharts");
+var getLineChartSettings_1 = __importDefault(require("./getLineChartSettings"));
+var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
+var useClickableStyle_1 = require("../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 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 })) }))));
+};
+exports.default = LineChart;