woby-billboard
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

@woby-chart

Voby component for billboard.js

Installation

# Install billboard.js together if you don't have it already
$ pnpm install billboard.js
$ pnpm install woby-billboard

How to use

ℹ️ The component will create a <div> element and append it to the parent element

Basic Usage

Refer to attached demo project folder

Using props passed to the component

When 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}
     />;
}

TypeScript Interfaces

// 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;
}

Readme

Keywords

Package Sidebar

Install

npm i woby-billboard

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

16.6 kB

Total Files

11

Last publish

Collaborators

  • wongchichong
  • sl1241