synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
141 lines (140 loc) • 3.72 kB
JavaScript
import { jsx as h, Fragment as d } from "react/jsx-runtime";
import * as m from "../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import "@sage-bionetworks/synapse-types";
import "../utils/functions/EntityTypeUtils.js";
import "../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import { SynapseContext as f } from "../utils/context/SynapseContext.js";
import { Component as u } from "react";
import { Plot as x } from "./Plot/Plot.js";
const g = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
class k extends u {
static contextType = f;
constructor(e) {
super(e), this.state = {
isLoaded: !1,
plotData: {}
};
}
componentDidMount() {
this.fetchPlotlyData();
}
/**
* Get data for plotly
*
* @returns data corresponding to plotly widget
*/
fetchPlotlyData = async () => {
const { request: e } = this.props;
return m.getProjectStatistics(e, this.context.accessToken).then((o) => {
this.setState({
isLoaded: !0,
plotData: o
});
}).catch((o) => {
console.log("Error on call to get statistics ", o);
});
};
getTrace = (e, o, a, n) => {
const t = {
orientation: a,
x: [],
y: [],
name: e,
type: "bar",
marker: { color: n },
hovertemplate: (
// see S3 Formatting options: https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format
`%{y:n} <br><extra>${e}</extra>`
)
};
for (const s of o) {
const i = new Date(s.rangeStart);
t.x.push(
`${g[i.getUTCMonth()]} ${i.getUTCFullYear()}`
), t.y.push(s.filesCount);
}
return t;
};
showPlot = () => {
if (!this.state.isLoaded || !this.state.plotData)
return;
const { title: e, xtitle: o, ytitle: a, isHorizontal: n, xaxistype: l, showlegend: p } = this.props, t = this.state.plotData, s = {
showlegend: p,
title: e,
barmode: "stack",
hovermode: "x"
}, i = {
displayModeBar: !0,
displaylogo: !1,
// 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"
]
};
o && (s.xaxis = {
title: o
}), l && (s.xaxis = {
...s.xaxis,
xaxistype: l.toLowerCase()
}), a && (s.yaxis = {
title: a
});
const c = n ? "h" : "v", r = [];
return t.fileDownloads && t.fileDownloads.months && t.fileDownloads.months.length > 0 && r.push(
this.getTrace(
"File Downloads",
t.fileDownloads.months,
c,
"#7CC0C4"
)
), t.fileUploads && t.fileUploads.months && t.fileUploads.months.length > 0 && r.push(
this.getTrace(
"File Uploads",
t.fileUploads.months,
c,
"#D4689A"
)
), r.length > 0 ? /* @__PURE__ */ h(
x,
{
layout: s,
data: r,
config: i,
className: "SRC-fullWidth",
useResizeHandler: !0
}
) : /* @__PURE__ */ h(d, {});
};
render() {
return this.state.isLoaded ? this.showPlot() : null;
}
}
export {
k as default
};
//# sourceMappingURL=StatisticsPlot.js.map