@rcsb/rcsb-charts
Version:
92 lines • 2.47 kB
JavaScript
import * as React from "react";
import { createRoot } from "react-dom/client";
import { ChartComponent } from "../RcsbChartComponent/ChartComponent";
import { BarChartDataProvider } from "../RcsbChartDataProvider/BarChartDataProvider";
import { ChartJsBarComponent } from "../RcsbChartImplementations/ChatJsImplementations/ChartJsBarComponent";
import { largeData } from "./Data/LargeData";
const node = document.getElementById("chart-element");
if (node == null)
throw `ERROR: HTML element not found`;
const data = [{
label: "AAAAAAAA",
population: 1,
objectConfig: {
color: "#bb0",
objectId: "Yellow"
}
}, {
label: "BBBB",
population: 2,
objectConfig: {
color: "#0b0"
}
}, {
label: "CCC",
population: 3,
objectConfig: {
color: "#00b"
}
}, {
label: "DDDDD",
population: 1,
objectConfig: {
color: "#00b"
}
}, {
label: "EE",
population: 6,
objectConfig: {
color: "#00b",
objectId: "Blue"
}
}];
const moreData = [{
label: "AAAAAAAA",
population: 1,
objectConfig: {
color: "#b00"
}
}, {
label: "BBBB",
population: 1,
objectConfig: {
color: "#b00"
}
}, {
label: "CCC",
population: 1,
objectConfig: {
color: "#b00"
}
}, {
label: "DDDDD",
population: 2,
objectConfig: {
color: "#b00"
}
}, {
label: "EE",
population: 4,
objectConfig: {
color: "#b00",
objectId: "Red"
}
}];
const evenMoreData = [{
label: "EE",
population: 2,
objectConfig: {
color: "#e9c",
objectId: "Pink"
}
}];
const root = createRoot(node);
root.render(React.createElement(ChartComponent, { data: largeData, chartComponentImplementation: ChartJsBarComponent, dataProvider: new BarChartDataProvider(), chartConfig: {
mostPopulatedGroups: 20,
tooltipText: (a) => { var _a; return (_a = a.id) === null || _a === void 0 ? void 0 : _a.join(" - "); },
barClickCallback: (e, f) => console.log(e),
chartDisplayConfig: {
constWidth: 800
}
} }));
//# sourceMappingURL=ChartJsBars.js.map