@rcsb/rcsb-charts
Version:
78 lines • 5.78 kB
JavaScript
import * as React from "react";
import { ChartTools } from "../RcsbChartDataProvider/ChartTools";
import { UiButton } from "./Components/UiButton";
import { ChartUi } from "./Components/ChartUi";
import { UiText } from "./Components/UiText";
import { isEqual } from "lodash";
import BxPlusCircle from "./icons/bx-plus-circle.svg";
import BxMinusCircle from "./icons/bx-minus-circle.svg";
export class ChartComponent extends React.Component {
constructor() {
var _a;
super(...arguments);
this.state = {
chartConfig: (_a = this.props.chartConfig) !== null && _a !== void 0 ? _a : {}
};
this.EXPAND_NUMBER = 10;
}
render() {
var _a, _b, _c, _d;
this.props.dataProvider.setData(this.props.data, this.state.chartConfig);
const displayConfig = (_b = (_a = this.state.chartConfig) === null || _a === void 0 ? void 0 : _a.chartDisplayConfig) !== null && _b !== void 0 ? _b : {};
const { data, excludedData } = this.props.dataProvider.getChartData();
const width = ChartTools.getConfig("paddingLeft", displayConfig) + ChartTools.getConfig("constWidth", displayConfig) + ChartTools.getConfig("paddingRight", displayConfig);
const height = ChartTools.getConfig("paddingTopLarge", displayConfig) + ((_c = displayConfig.constHeight) !== null && _c !== void 0 ? _c : data.length * ChartTools.getConfig("xIncrement", displayConfig));
const ChartComponent = this.props.chartComponentImplementation;
return (React.createElement("div", { style: { width: width } },
React.createElement(ChartComponent, { width: width, height: height, chartConfig: this.props.chartConfig, dataProvider: this.props.dataProvider }),
this.chartUI((_d = excludedData === null || excludedData === void 0 ? void 0 : excludedData.length) !== null && _d !== void 0 ? _d : 0)));
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.chartConfig && !isEqual(prevProps.chartConfig, this.props.chartConfig))
this.setState({ chartConfig: this.props.chartConfig });
}
chartUI(excluded) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
if (!(excluded > 0 || ((_b = (_a = this.state.chartConfig) === null || _a === void 0 ? void 0 : _a.mostPopulatedGroups) !== null && _b !== void 0 ? _b : 0) > ((_d = (_c = this.props.chartConfig) === null || _c === void 0 ? void 0 : _c.mostPopulatedGroups) !== null && _d !== void 0 ? _d : 0)))
return (React.createElement(React.Fragment, null));
return (React.createElement(ChartUi, { fontFamily: ChartTools.getConfig("fontFamily", (_e = this.props.chartConfig) === null || _e === void 0 ? void 0 : _e.chartDisplayConfig) },
React.createElement(UiButton, { activeFlag: excluded > 0, title: "Shift-click to expand all", onCLick: (e) => {
if (e.shiftKey) {
this.updateCategories(excluded);
}
else {
this.updateCategories(this.EXPAND_NUMBER);
}
} },
React.createElement(BxPlusCircle, null)),
React.createElement(UiButton, { activeFlag: ((_g = (_f = this.state.chartConfig) === null || _f === void 0 ? void 0 : _f.mostPopulatedGroups) !== null && _g !== void 0 ? _g : 0) > ((_j = (_h = this.props.chartConfig) === null || _h === void 0 ? void 0 : _h.mostPopulatedGroups) !== null && _j !== void 0 ? _j : 0), title: "Shift-click to collapse all", onCLick: (e) => {
var _a, _b, _c, _d;
if (e.shiftKey) {
this.updateCategories(0);
}
else {
if (((_a = this.state.chartConfig) === null || _a === void 0 ? void 0 : _a.mostPopulatedGroups) && ((_b = this.props.chartConfig) === null || _b === void 0 ? void 0 : _b.mostPopulatedGroups) && ((_c = this.state.chartConfig) === null || _c === void 0 ? void 0 : _c.mostPopulatedGroups) - this.EXPAND_NUMBER >= ((_d = this.props.chartConfig) === null || _d === void 0 ? void 0 : _d.mostPopulatedGroups))
this.updateCategories(-this.EXPAND_NUMBER);
else
this.updateCategories(0);
}
} },
React.createElement(BxMinusCircle, null)),
React.createElement(UiText, { style: {
fontSize: ChartTools.getConfig("fontSize", (_k = this.props.chartConfig) === null || _k === void 0 ? void 0 : _k.chartDisplayConfig),
marginLeft: 5
}, text: `[ ${ChartTools.digitGrouping(excluded)}+ ]` })));
}
updateCategories(n) {
var _a, _b, _c, _d, _e, _f;
if (n === 0)
this.setState({
chartConfig: Object.assign(Object.assign({}, this.state.chartConfig), { mostPopulatedGroups: (_a = this.props.chartConfig) === null || _a === void 0 ? void 0 : _a.mostPopulatedGroups })
});
else if (((_b = this.state.chartConfig) === null || _b === void 0 ? void 0 : _b.mostPopulatedGroups) && ((_c = this.props.chartConfig) === null || _c === void 0 ? void 0 : _c.mostPopulatedGroups) && ((_d = this.state.chartConfig) === null || _d === void 0 ? void 0 : _d.mostPopulatedGroups) + n >= ((_e = this.props.chartConfig) === null || _e === void 0 ? void 0 : _e.mostPopulatedGroups))
this.setState({
chartConfig: Object.assign(Object.assign({}, this.state.chartConfig), { mostPopulatedGroups: ((_f = this.state.chartConfig) === null || _f === void 0 ? void 0 : _f.mostPopulatedGroups) + n })
});
}
}
//# sourceMappingURL=ChartComponent.js.map