@rcsb/rcsb-saguaro-app
Version:
RCSB 1D Saguaro Web App
40 lines (39 loc) • 3.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.GroupChartLayout = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const react_bootstrap_1 = require("react-bootstrap");
const uniqid_1 = tslib_1.__importDefault(require("uniqid"));
const ChartConfigInterface_1 = require("@rcsb/rcsb-charts/lib/RcsbChartComponent/ChartConfigInterface");
const HistogramChartComponent_1 = require("../../../RcsbChartWeb/HistogramChartComponent");
const BarChartComponent_1 = require("../../../RcsbChartWeb/BarChartComponent");
const ChartTools_1 = require("@rcsb/rcsb-charts/lib/RcsbChartDataProvider/ChartTools");
class GroupChartLayout extends react_1.default.Component {
render() {
return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Container, { fluid: "md", children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Row, { children: this.props.layout.filter(attr => {
var _a, _b;
return ((_b = (_a = this.props.chartMap.get(attr)) === null || _a === void 0 ? void 0 : _a.filter(ch => ch.data.length > 0)) !== null && _b !== void 0 ? _b : []).length > 0;
}).map((attr) => this.renderCell(attr)) }) }));
}
renderCell(attr) {
var _a;
const chart = this.props.chartMap.get(attr);
if (chart && chart.filter(ch => ch.data.length > 0).length > 0) {
const node = chart[0].chartType == ChartConfigInterface_1.ChartType.histogram ? histogramChart(attr, chart) : barChart(attr, chart);
return chartCell(node, chart[0].title, (_a = chart[0].chartConfig) === null || _a === void 0 ? void 0 : _a.chartDisplayConfig);
}
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
}
}
exports.GroupChartLayout = GroupChartLayout;
function chartCell(chartNode, title, chartDisplayConfig) {
return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Row, { className: "mb-md-5", children: (0, jsx_runtime_1.jsxs)(react_bootstrap_1.Col, { md: 12, children: [(0, jsx_runtime_1.jsx)(react_bootstrap_1.Row, { className: "mb-md-2", children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { md: 12, style: { paddingLeft: ChartTools_1.ChartTools.getConfig("paddingLeft", chartDisplayConfig) + ChartTools_1.ChartTools.getConfig("xDomainPadding", chartDisplayConfig) }, children: (0, jsx_runtime_1.jsx)("strong", { children: title }) }) }), (0, jsx_runtime_1.jsx)(react_bootstrap_1.Row, { children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { md: 12, children: chartNode }) })] }) }) }, `${title}_${(0, uniqid_1.default)()}`));
}
function histogramChart(attributeName, chart) {
return ((0, jsx_runtime_1.jsx)("div", { id: `chart:${chart[0].attributeName}`, children: (0, jsx_runtime_1.jsx)(HistogramChartComponent_1.HistogramChartComponent, { data: chart.map(c => c.data), chartConfig: chart[0].chartConfig, attributeName: attributeName }) }));
}
function barChart(attributeName, chart) {
return ((0, jsx_runtime_1.jsx)("div", { id: `chart:${chart[0].attributeName}`, children: (0, jsx_runtime_1.jsx)(BarChartComponent_1.BarChartComponent, { data: chart.map(c => c.data), chartConfig: chart[0].chartConfig, attributeName: attributeName }) }));
}