Voby component for billboard.js
# Install billboard.js together if you don't have it already
$ pnpm install billboard.js
$ pnpm install woby-billboardℹ️ The component will create a
<div>element and append it to the parent element
Refer to attached demo project folderWhen the options are passed to the "chart" component.
// index.tsx
import App from "./App.tsx";
const options = {
data: {
columns: [
["data1", 300, 350, 300]
],
type: "bar"
}
};
<App {...options} />
// or
// <App data={
// columns: [
// ["data1", 300, 350, 300]
// ],
// type: "bar"
// } />
// App.tsx
import * as Chart from "billboard.js";
import "billboard.js/dist/billboard.css"; // default css
import BillboardJS, {IChart, IChartOptions} from "../src/index";
export function App(props: IChartOptions) {
const chartComponent = $<IChart>(null);
// when chart "type" is passed from props, chart types need to be initialized separately.
// in this scenario, can't be "tree-shaken" only used chart type modules.
Chart[props.data.type]();
useEffect(() => {
const chart = chartComponent.current?.instance;
if (chart) {
chart.load( ... );
}
})
return <BillboardJS
bb={Chart.bb}
options={props}
ref={chartComponent}
/>;
}// chart options
interface IChartOptions;
interface IProp extends Pick<JSX.ViewAttributes<HTMLDivElement>, "className" | "style"> {
bb: typeof bb;
options: ChartOptions;
chartRef: JSX.Ref
}
// Chart instance
interface IChart {
instance: Chart;
}