synapse-react-client/dist/containers/widgets/themes-plot/BarPlot.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var plotly_js_basic_dist_1 = (0, tslib_1.__importDefault)(require("plotly.js-basic-dist"));
var factory_1 = (0, tslib_1.__importDefault)(require("react-plotly.js/factory"));
var lodash_es_1 = (0, tslib_1.__importDefault)(require("lodash-es"));
var Plot = (0, factory_1.default)(plotly_js_basic_dist_1.default);
function getBarPlotDataPoints(data, filter, colors) {
    if (filter) {
        data = data.filter(function (item) { return item.y === filter; });
    }
    var groups = lodash_es_1.default.uniq(data.map(function (item) { return item['group']; })).sort();
    var result = [];
    var defaultColors = ["(28,118,175,1)", "rgba(91,176,181,1)"];
    groups.forEach(function (group, i) {
        var items = data.filter(function (item) { return item.group === group; });
        result.push({
            x: items.map(function (item) { return item.x; }),
            y: items.map(function (item) { return item.y; }),
            name: group,
            orientation: 'h',
            marker: {
                color: colors ? colors[group] : defaultColors[i],
                width: 1,
            },
            text: [group],
            hovertemplate: "%{x} %{text}<extra></extra>",
            type: 'bar',
        });
    });
    return result;
}
function getLayout(layoutConfig, _a) {
    var isTop = _a.isTop, maxValue = _a.maxValue, backgroundColor = _a.backgroundColor;
    var layout = lodash_es_1.default.cloneDeep(layoutConfig);
    layout.xaxis = {
        visible: false,
        range: [0, maxValue],
    };
    if (backgroundColor) {
        layout.plot_bgcolor = backgroundColor;
        layout.paper_bgcolor = backgroundColor;
    }
    if (!isTop) {
        layout.hoverlabel = {
            font: {
                size: 10,
            },
        };
    }
    layout.showlegend = false;
    layout.height = isTop ? 40 : 20;
    return layout;
}
var BarPlot = function (_a) {
    var plotData = _a.plotData, optionsConfig = _a.optionsConfig, isTop = _a.isTop, layoutConfig = _a.layoutConfig, label = _a.label, xMax = _a.xMax, colors = _a.colors, _b = _a.plotStyle, plotStyle = _b === void 0 ? { backgroundColor: 'transparent' } : _b, _c = _a.style, style = _c === void 0 ? { width: '100%', height: '100%' } : _c, onClick = _a.onClick;
    return (react_1.default.createElement(Plot, { style: style, layout: getLayout(layoutConfig, {
            isTop: isTop,
            maxValue: xMax,
            backgroundColor: plotStyle.backgroundColor,
        }), config: optionsConfig, data: getBarPlotDataPoints(plotData, label, colors), onClick: function (e) { return (onClick ? onClick(e) : lodash_es_1.default.noop); } }));
};
exports.default = BarPlot;
//# sourceMappingURL=BarPlot.js.map