synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
115 lines • 4.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react")); // importing FunctionComponent
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 getLayout(dotPlotLayoutConfig, layoutOptions) {
var result = lodash_es_1.default.cloneDeep(dotPlotLayoutConfig);
if (!layoutOptions) {
return result;
}
if (layoutOptions.backgroundColor) {
result.plot_bgcolor = layoutOptions.backgroundColor;
}
result.yaxis.showticklabels = false;
result.xaxis.range = [-5, layoutOptions.maxValue + 30];
result.xaxis.visible = layoutOptions.isXAxis;
result.showlegend = layoutOptions.isLegend;
result.margin = {
t: 0,
b: layoutOptions.isXAxis ? 50 : 0,
l: 0,
r: 0,
pad: 15,
};
var height = 30;
if (layoutOptions.isLegend) {
height = 35;
result.margin.pad = 0;
result.xaxis = {
visible: false,
zeroline: false,
showgrid: false,
showline: false,
range: [0, 1],
};
result.yaxis = {
visible: false,
showline: false,
};
}
if (layoutOptions.isXAxis) {
result.yaxis = {
visible: false,
showgrid: false,
showline: false,
};
height = 50;
}
result.height = height;
return result;
}
function createArrayOfGroupValues(headers, items) {
var result = new Array(headers.length);
items.forEach(function (item) {
var index = headers.indexOf(item.y);
result[index] = item.x;
});
return result;
}
function getPlotDataPoints(graphItems, plotStyle, ySorted, markerSymbols) {
var isFakeData = ySorted === undefined;
var groups = lodash_es_1.default.uniq(graphItems.map(function (item) { return item.group; }));
var data = [];
var defaultSymbols = [
'y-down',
'triangle-up',
'cross-thin-open',
'triangle-up-open-dot',
'star-square-open',
'diamond-x',
];
groups.forEach(function (group, i) {
data.push({
type: 'scatter',
x: isFakeData
? [-10] // fake datavalue outside of the bounds
: createArrayOfGroupValues(ySorted, graphItems.filter(function (row) { return row.group === group; })),
y: ySorted,
text: [group],
hovertemplate: "%{x} %{text}<extra></extra>",
mode: 'markers',
name: group,
marker: {
color: plotStyle.markerFill,
line: {
color: plotStyle.markerLine,
width: 1,
},
symbol: markerSymbols ? markerSymbols[group] : defaultSymbols[i],
size: plotStyle.markerSize,
},
});
});
return data;
}
var DotPlot = function (_a) {
var plotData = _a.plotData, optionsConfig = _a.optionsConfig, layoutConfig = _a.layoutConfig, label = _a.label, id = _a.id, xMax = _a.xMax, _b = _a.style, style = _b === void 0 ? { width: '100%', height: '100%' } : _b, markerSymbols = _a.markerSymbols, _c = _a.plotStyle, plotStyle = _c === void 0 ? {
markerFill: '#515359',
markerLine: '#515359',
markerSize: 9,
backgroundColor: 'transparent',
} : _c, onClick = _a.onClick, _d = _a.isLegend, isLegend = _d === void 0 ? false : _d, _e = _a.isXAxis, isXAxis = _e === void 0 ? false : _e;
var pointsTypes = label ? [label] : undefined;
return (react_1.default.createElement(Plot, { key: "dotPlot_" + id, layout: getLayout(layoutConfig, {
isLegend: isLegend,
isXAxis: isXAxis,
maxValue: xMax,
backgroundColor: plotStyle.backgroundColor,
}), style: style, data: getPlotDataPoints(plotData, plotStyle, pointsTypes, markerSymbols), config: optionsConfig, onClick: function (e) { return (onClick ? onClick(e) : lodash_es_1.default.noop); } }));
};
exports.default = DotPlot;
//# sourceMappingURL=DotPlot.js.map