synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
151 lines • 5.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(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 utils_1 = require("../utils");
var SynapseContext_1 = require("../utils/SynapseContext");
var Plot = (0, factory_1.default)(plotly_js_basic_dist_1.default);
var months = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
];
var StatisticsPlot = /** @class */ (function (_super) {
(0, tslib_1.__extends)(StatisticsPlot, _super);
function StatisticsPlot(props) {
var _this = _super.call(this, props) || this;
/**
* Get data for plotly
*
* @returns data corresponding to plotly widget
*/
_this.fetchPlotlyData = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var request;
var _this = this;
return (0, tslib_1.__generator)(this, function (_a) {
request = this.props.request;
return [2 /*return*/, utils_1.SynapseClient.getProjectStatistics(request, this.context.accessToken)
.then(function (data) {
_this.setState({
isLoaded: true,
plotData: data,
});
})
.catch(function (err) {
console.log('Error on call to get statistics ', err);
})];
});
}); };
_this.getTrace = function (traceName, stats, orientation, markerColor) {
var x = [];
var y = [];
var trace = {
orientation: orientation,
x: x,
y: y,
name: traceName,
type: 'bar',
marker: { color: markerColor },
hovertemplate:
// see S3 Formatting options: https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format
"%{y:n} <br><extra>" + traceName + "</extra>",
};
for (var _i = 0, stats_1 = stats; _i < stats_1.length; _i++) {
var statPoint = stats_1[_i];
var statPointDate = new Date(statPoint.rangeStart);
trace.x.push(months[statPointDate.getUTCMonth()] + " " + statPointDate.getUTCFullYear());
trace.y.push(statPoint.filesCount);
}
return trace;
};
_this.showPlot = function () {
if (!_this.state.isLoaded || !_this.state.plotData) {
return;
}
var _a = _this.props, title = _a.title, xtitle = _a.xtitle, ytitle = _a.ytitle, isHorizontal = _a.isHorizontal, xaxistype = _a.xaxistype, showlegend = _a.showlegend;
var plotData = _this.state.plotData;
var layout = {
showlegend: showlegend,
title: title,
barmode: 'stack',
hovermode: 'x',
};
var config = {
displayModeBar: true,
displaylogo: false,
// options found here: https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js
modeBarButtonsToRemove: [
'sendDataToCloud',
'hoverCompareCartesian',
'select2d',
'lasso2d',
'zoom2d',
'resetScale2d',
'hoverClosestCartesian',
'toggleSpikelines',
],
};
if (xtitle) {
layout.xaxis = {
title: xtitle,
};
}
if (xaxistype) {
layout.xaxis = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, layout.xaxis), { xaxistype: xaxistype.toLowerCase() });
}
if (ytitle) {
layout.yaxis = {
title: ytitle,
};
}
// init plot_data
var orientation = isHorizontal ? 'h' : 'v';
var traces = [];
if (plotData.fileDownloads &&
plotData.fileDownloads.months &&
plotData.fileDownloads.months.length > 0) {
// add file downloads trace
traces.push(_this.getTrace('File Downloads', plotData.fileDownloads.months, orientation, '#7CC0C4'));
}
if (plotData.fileUploads &&
plotData.fileUploads.months &&
plotData.fileUploads.months.length > 0) {
// add file uploads trace
traces.push(_this.getTrace('File Uploads', plotData.fileUploads.months, orientation, '#D4689A'));
}
if (traces.length > 0)
return (React.createElement(Plot, { layout: layout, data: traces, config: config, className: "SRC-fullWidth", useResizeHandler: true }));
else
return React.createElement(React.Fragment, null);
};
_this.state = {
isLoaded: false,
plotData: {},
};
return _this;
}
StatisticsPlot.prototype.componentDidMount = function () {
this.fetchPlotlyData();
};
StatisticsPlot.prototype.render = function () {
if (!this.state.isLoaded) {
return null;
}
return this.showPlot();
};
StatisticsPlot.contextType = SynapseContext_1.SynapseContext;
return StatisticsPlot;
}(React.Component));
exports.default = StatisticsPlot;
//# sourceMappingURL=StatisticsPlot.js.map