Bizchart+slider to realize grouping histogram

Use bizchart Achieve grouping histogram , With slider selection . The renderings are as follows ：

Environmental Science

be based on bizchart3.x

npm install [email protected]
npm install [email protected]

Chart-Slider Component encapsulation

Chart and Slider yes 2 A component , For ease of use , We are encapsulated together , Return with a function .

import DataSet from '@antv/data-set';
import {
     Axis, Chart, Geom, Legend, Tooltip } from "bizcharts";
import Slider from "bizcharts-plugin-slider";
import React, {
     Component } from 'react';

function getGroupChartWithSliderComponent(data) {
    

    const ds = new DataSet({
    
        state: {
    
            start: data[0] ? data[0].timestamp : '',
            end: data[0] ? data[data.length - 1].timestamp : '$'
        }
    });

    const dv = ds.createView('origin').source(data);
    dv.transform({
    
        type: 'filter',
        callback(item) {
    
            const r = item.timestamp;
            return r >= ds.state.start && r <= ds.state.end;
        }
    });


    class GroupChartWithSlider extends React.Component {
    

        handleTimeSliderChange(e) {
    
            const {
     startValue, endValue } = e;
            ds.setState('start', startValue);
            ds.setState('end', endValue);
        }

        render() {
    
            const chartScale = {
    
                'timestamp': {
    
                    alias: ' Time '
                },
                'count': {
    
                    alias: ' frequency '
                }
            };
            return (
                <div>
                    <Chart height={
    200} data={
    dv} forceFit padding='auto' scale={
    chartScale}>
                        <Legend position="top-center" />
                        <Axis name="timestamp" />
                        <Axis name="count" />
                        <Tooltip />
                        <Geom
                            type="interval"
                            position="timestamp*count"
                            color={
    ["tag"]}
                            // color={["tag", ["#f5222d", "#ec6740", "#ffa39e"]]}
                            adjust={
    [
                                {
    
                                    type: "dodge",
                                    marginRatio: 1 / 32
                                }]}
                            style={
    {
    
                                stroke: "#fff",
                                lineWidth: 1
                            }}
                        />
                    </Chart>
                    <Slider data={
    data} padding={
    10} xAxis="timestamp" yAxis="count"
                        scales={
    {
    
                            //  Do not display text 
                            timestamp: {
    
                                formatter: () => ''
                            }
                        }}
                        onChange={
    this.handleTimeSliderChange.bind(this)} />
                </div>
            );
        }
    }

    return GroupChartWithSlider;
}

Use

To generate a grouping histogram , Just the same one X There are multiple values for the axis Y value , below X The axis is timestamp, Y The axis is count.

class MyApp extends Component {
    

    state = {
    
        //  Aggregate group histogram data 
        groupErrorData: [/* { "timestamp": '2022-6-22T11:43', "count": 15, "tag": " egg ", }, { "timestamp": '2022-6-22T11:43', "count": 3, "tag": " Banana ", }, { "timestamp": '2022-6-22T11:43', "count": 19, "tag": " pumpkin ", }, { "timestamp": '2022-6-22T11:43', "count": 5, "tag": " Southwest flower ", }, { "timestamp": '2022-6-22T11:45', "count": 6, "tag": " Wax gourd ", }, { "timestamp": '2022-6-22T11:45', "count": 20, "tag": " celery ", }], }; render() { const GroupChartWithSlider = getGroupChartWithSliderComponent(this.state.groupErrorData); return ( <div> <GroupChartWithSlider /> </div > ); } } export default MyApp; 

Slider effect

Slider You can drag , Show the trend of the data .