@rcsb/rcsb-charts
Version:
109 lines • 5.48 kB
JavaScript
import * as React from "react";
import uniqid from "uniqid";
import Chart from 'chart.js/auto';
import { ChartTools } from "../../RcsbChartDataProvider/ChartTools";
import { DataContainer } from "../../Utils/DataContainer";
import { chartJsTooltip } from "./Components/TootlipComponent";
import { chartJsBarClick } from "./Components/BarComponent";
export class ChartJsBarComponent 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", { id: this.elementId, ref: this.rootRef, style: { position: "relative", width: this.props.width, height: this.props.height } },
React.createElement("canvas", { ref: this.canvasRef })));
}
componentDidMount() {
var _a, _b, _c, _d, _e;
const { data } = this.props.dataProvider.getChartData();
this.dataContainer.set(data);
const displayConfig = (_b = (_a = this.props.chartConfig) === null || _a === void 0 ? void 0 : _a.chartDisplayConfig) !== null && _b !== void 0 ? _b : {};
const ctx = (_c = this.canvasRef.current) === null || _c === void 0 ? void 0 : _c.getContext('2d');
if (!ctx)
return;
this.chart = new Chart(ctx, {
type: 'bar',
data: getChartJsData(data, this.props.chartConfig),
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y',
parsing: {
xAxisKey: 'y',
yAxisKey: 'x',
},
scales: {
x: {
stacked: true,
ticks: {
font: {
family: ChartTools.getConfig("fontFamily", displayConfig),
size: ChartTools.getConfig("fontSize", displayConfig)
}
}
},
y: {
stacked: true,
afterFit: function (axis) {
axis.width = ChartTools.getConfig("paddingLeft", displayConfig);
},
ticks: {
callback: function (value, index) {
return this.getLabelForValue(value).split("").reduce((prev, curr, index) => ctx.measureText(prev + curr).width + ChartJsBarComponent.AXIS_LABEL_THR < ChartTools.getConfig("paddingLeft", displayConfig) ? prev + curr : prev, "");
},
font: {
family: ChartTools.getConfig("fontFamily", displayConfig),
size: ChartTools.getConfig("fontSize", displayConfig)
}
}
}
},
plugins: {
legend: {
display: false
},
tooltip: chartJsTooltip((_d = this.props.chartConfig) === null || _d === void 0 ? void 0 : _d.tooltipText)
},
onClick: chartJsBarClick(this.dataContainer, "y", (_e = this.props.chartConfig) === null || _e === void 0 ? void 0 : _e.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;
}
}
ChartJsBarComponent.AXIS_LABEL_THR = 10;
function getChartJsData(data, chartConfig) {
if (!data || data.length == 0)
return {
datasets: []
};
const reverseData = data.reverse();
const N = reverseData[0].y.length;
return {
datasets: Array(N).fill(undefined).map((v, n) => ({
data: reverseData.filter(d => d.y[n].value > 0 || (chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.domainEmptyBins)).map(d => ({
x: d.x.toString(),
y: d.y[n].value == 0 ? null : d.y[n].value,
id: d.y[n].id
})),
backgroundColor: reverseData.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),
barThickness: ChartTools.getConfig("barWidth", chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.chartDisplayConfig)
}))
};
}
//# sourceMappingURL=ChartJsBarComponent.js.map