@rcsb/rcsb-charts/lib/RcsbChartImplementations/ChatJsImplementations/ChartJsHistogramComponent.js

RCSB Charts

import * as React from "react";
import uniqid from "uniqid";
import Chart from 'chart.js/auto';
import { DataContainer } from "../../Utils/DataContainer";
import { chartJsTooltip } from "./Components/TootlipComponent";
import { chartJsBarClick } from "./Components/BarComponent";
import { ChartTools } from "../../RcsbChartDataProvider/ChartTools";
export class ChartJsHistogramComponent extends React.Component {
    constructor() {
        super(...arguments);
        this.elementId = uniqid("canvas_");
        this.dataContainer = new DataContainer();
        this.canvasRef = React.createRef();
        this.rootRef = React.createRef();
    }
    render() {
        return (React.createElement("div", { ref: this.rootRef, id: this.elementId, style: { position: "relative", width: this.props.width, height: this.props.height } },
            React.createElement("canvas", { ref: this.canvasRef })));
    }
    componentDidMount() {
        var _a, _b, _c, _d, _e, _f, _g;
        const { data } = this.props.dataProvider.getChartData();
        this.dataContainer.set(data);
        const chartConfig = this.props.chartConfig;
        const displayConfig = (_a = chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.chartDisplayConfig) !== null && _a !== void 0 ? _a : {};
        const ctx = (_b = this.canvasRef.current) === null || _b === void 0 ? void 0 : _b.getContext('2d');
        if (!ctx)
            return;
        this.chart = new Chart(ctx, {
            type: 'bar',
            data: getChartJsData(data, this.props.chartConfig),
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'x',
                parsing: {
                    xAxisKey: 'x',
                    yAxisKey: 'y',
                },
                scales: {
                    x: {
                        type: 'linear',
                        title: {
                            display: true,
                            text: (_c = this.props.chartConfig) === null || _c === void 0 ? void 0 : _c.axisLabel
                        },
                        stacked: true,
                        ticks: {
                            callback: function (value, index) {
                                var _a;
                                if ((_a = chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.tickFormat) === null || _a === void 0 ? void 0 : _a.domAxis)
                                    return chartConfig.tickFormat.domAxis(this.getLabelForValue(value));
                                return this.getLabelForValue(value);
                            },
                            font: {
                                family: ChartTools.getConfig("fontFamily", displayConfig),
                                size: ChartTools.getConfig("fontSize", displayConfig)
                            }
                        },
                        suggestedMin: (_d = this.props.chartConfig) === null || _d === void 0 ? void 0 : _d.domainMinValue,
                        suggestedMax: (_e = this.props.chartConfig) === null || _e === void 0 ? void 0 : _e.domainMaxValue
                    },
                    y: {
                        stacked: true,
                        afterFit: function (axis) {
                            axis.width = ChartTools.getConfig("paddingLeft", displayConfig);
                        },
                        ticks: {
                            font: {
                                family: ChartTools.getConfig("fontFamily", displayConfig),
                                size: ChartTools.getConfig("fontSize", displayConfig)
                            }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: chartJsTooltip((_f = this.props.chartConfig) === null || _f === void 0 ? void 0 : _f.tooltipText)
                },
                onClick: chartJsBarClick(this.dataContainer, "x", (_g = this.props.chartConfig) === null || _g === void 0 ? void 0 : _g.barClickCallback)
            }
        });
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        const { data } = nextProps.dataProvider.getChartData();
        this.dataContainer.set(data);
        this.chart.data = getChartJsData(data, this.props.chartConfig);
        this.chart.update();
        if (this.rootRef.current && this.rootRef.current.style.width != nextProps.width.toString())
            this.rootRef.current.style.width = nextProps.width.toString();
        if (this.rootRef.current && this.rootRef.current.style.height != nextProps.height.toString()) {
            this.rootRef.current.style.height = nextProps.height.toString() + "px";
        }
        return false;
    }
}
function getChartJsData(data, chartConfig) {
    if (!data || data.length == 0)
        return {
            datasets: []
        };
    const N = data[0].y.length;
    return {
        datasets: Array(N).fill(undefined).map((v, n) => ({
            data: data.filter(d => d.y[n].value > 0 || (chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.domainEmptyBins)).map(d => ({
                x: d.x,
                y: d.y[n].value == 0 ? null : d.y[n].value,
                id: d.y[n].id
            })),
            backgroundColor: data.filter(d => d.y[n].value > 0 || (chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.domainEmptyBins)).map(d => { var _a; return (_a = d.y[n].color) !== null && _a !== void 0 ? _a : "#999"; }),
            minBarLength: ChartTools.getConfig("minBarLength", chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.chartDisplayConfig)
        }))
    };
}
//# sourceMappingURL=ChartJsHistogramComponent.js.map