@rcsb/rcsb-saguaro-app/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/GroupChartLayout.js

RCSB 1D Saguaro Web App

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import uniqid from "uniqid";
import { ChartType } from "@rcsb/rcsb-charts/lib/RcsbChartComponent/ChartConfigInterface";
import { HistogramChartComponent } from "../../../RcsbChartWeb/HistogramChartComponent";
import { BarChartComponent } from "../../../RcsbChartWeb/BarChartComponent";
import { ChartTools } from "@rcsb/rcsb-charts/lib/RcsbChartDataProvider/ChartTools";
export class GroupChartLayout extends React.Component {
    render() {
        return (_jsx(Container, { fluid: "md", children: _jsx(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 == 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 _jsx(_Fragment, {});
    }
}
function chartCell(chartNode, title, chartDisplayConfig) {
    return (_jsx(Col, { children: _jsx(Row, { className: "mb-md-5", children: _jsxs(Col, { md: 12, children: [_jsx(Row, { className: "mb-md-2", children: _jsx(Col, { md: 12, style: { paddingLeft: ChartTools.getConfig("paddingLeft", chartDisplayConfig) + ChartTools.getConfig("xDomainPadding", chartDisplayConfig) }, children: _jsx("strong", { children: title }) }) }), _jsx(Row, { children: _jsx(Col, { md: 12, children: chartNode }) })] }) }) }, `${title}_${uniqid()}`));
}
function histogramChart(attributeName, chart) {
    return (_jsx("div", { id: `chart:${chart[0].attributeName}`, children: _jsx(HistogramChartComponent, { data: chart.map(c => c.data), chartConfig: chart[0].chartConfig, attributeName: attributeName }) }));
}
function barChart(attributeName, chart) {
    return (_jsx("div", { id: `chart:${chart[0].attributeName}`, children: _jsx(BarChartComponent, { data: chart.map(c => c.data), chartConfig: chart[0].chartConfig, attributeName: attributeName }) }));
}
//# sourceMappingURL=GroupChartLayout.js.map