@joskii/jchart NPM

JChart

JChart consist of line chart, bar chart and pie chart which designed for basic data visualization.

install

npm i @joskii/jchart

Features

Reactive Data
Plugin based
3 canvas layers
auto layout (y-axis margin adaptive)

Conceptions

Layer

JChart include 3 layers from bottom to top, one layer corresponds to a canvas element:

Coodinate Layer
- Calculate basic transform matric based on layout, global DPR, origin data and axis.
- Paint axis
- Reactive to mouse pointer event
Chart Layer
- Calculate chart point based on coordinate transform matric and origin data.
- Paint Chart
- Reactive to mouse pointer event
Over Layer
- Handle mouse event and emit to Coodinate and Chart
- Paint Indicator

Data

Data is reactive. Every Layer will react to data change in fixed order.

Plugins

Plugins devided into 4 parts: 1. Data

Configure

Data Configure

2d-data BarChart and LineChart use 2d data

{
    reference: {
        // data x dimension type [continuous | discrete]
        type: 'continuous', 
    },
    series: [
        {
            name: 'foo',
            values: [
                [1626150094.407, 40],
                [1626150694.407, 30],
                [1626151294.407, 10],
                ...
            ],
        },
        {
            name: 'bar',
            values: [
                [1626150094.407, 20],
                [1626150694.407, 70],
                [1626151294.407, 50],
                ...
            ],
        },
        ...
    ],
    stack: true, // stack mode or not
    xAxis: {
        span: 6, // display in 6 parts
        format(value) {
            // x dimension formatter
            const datetime = new Date(value);
            return dataFormatter.format(datetime);
        },
    },
    yAxis: {
        min: 0, // min is 0
        format(value) {
            // y dimension formatter
            return NumberFormatter.format(value);
        },
    },

1d-data PieChart use 1d data

{
    series: [
        {
            name: 'foo',
            value: 4
        },
        {
            name: 'bar',
            value: 8
        },
        ...
    ]
}

LineChart Configure

{
    smooth: Boolean,
    fill: Boolean,
}

Legend Configure

{
    /*
        @parameter
        legendMeta is Array of { legend, color }

        legend : {
            disabled: Boolean, 
            name: String,
        }
        color: {
            enable: String,
            disable: String
        }

        legend is reactive, change disabled will trigger change

        this is usefull when customiz legend style
    */
    callback(legendMeta) {
        ...
    }
}

LineIndicator Configure

{
    /*
        @parameter
        meta: {
            display: Boolean,
            x: Number,
            y: Number,
            xDimension: String,
            series: Array of {
                name: String<legend name>, 
                color: String<legend color>, 
                data: String<fomatted legend data>, 
                rawData: Number<legend data>, 
            }
        }

        this is usefull when customiz Indicator style
    */
    callback(meta) {
        ...
    },

    bar: Boolean, // appear line or bar shape
}

Additional Configure

Global chart layout

{
    layout: {
        left: 0,
        top: 20,
        bottom: 40,
        right: 30,
        xFloat: 20 // chart Layer padding 
    }
}

Global chart theme

{
    theme: {
        colors: [
            // [r, g, b]
            [ 103, 170, 245 ],
            [ 255, 174, 60 ],
            [ 78, 201, 171 ],
            ... 
        ],
        disabledOpacity: 0.1 // disabled legend opacity
        fadeOpacity: 0.4     // not focus serie opacity 
    }
}