{"size": 1879, "ext": "js", "max_stars_repo_path": "src/pages/AllCharts/echart/gaugechart.js", "max_stars_repo_name": "shfeefrazak/seedkaro", "max_stars_repo_stars_event_min_datetime": "2020-10-14T07:45:08.000Z", "max_stars_repo_stars_event_max_datetime": "2021-10-01T08:19:56.000Z", "max_issues_repo_path": "src/pages/AllCharts/echart/gaugechart.js", "max_issues_repo_name": "shfeefrazak/seedkaro", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/AllCharts/echart/gaugechart.js", "max_forks_repo_name": "shfeefrazak/seedkaro", "max_forks_repo_forks_event_min_datetime": "2020-11-09T05:16:42.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-28T08:04:33.000Z"}
{"max_stars_count": 13, "max_issues_count": null, "max_forks_count": 17, "avg_line_length": 26.0972222222, "max_line_length": 88, "alphanum_fraction": 0.4209686003}
import React, { Component } from 'react';
import cloneDeep from 'lodash.clonedeep';
import ReactEcharts from 'echarts-for-react';

class Guage extends Component {

    constructor(props) {
        super(props);
        this.state = this.getInitialState();
    }

    getOption = () => {
        return {

            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: 'Business indicator',
                    type: 'gauge',
                    detail: { formatter: '{value}%' },
                    axisLine: {
                        lineStyle: {
                            color: [[0.2, '#02a499'], [0.8, '#3c4ccf'], [1, '#ec4561']],
                            width: 20
                        }
                    },
                    data: [{ value: 50, name: 'Completion rate' }]
                }
            ]
        };
    };


    timeTicket = null;
    getInitialState = () => ({ option: this.getOption() });

    componentDidMount() {
        if (this.timeTicket) {
            clearInterval(this.timeTicket);
        }
        this.timeTicket = setInterval(() => {
            const option = cloneDeep(this.state.option);
            option.series[0].data.value = (Math.random() * 100).toFixed(2) - 0;
            this.setState({ option: option });
        }, 2000);
    };

    componentWillUnmount() {
        if (this.timeTicket) {
            clearInterval(this.timeTicket);
        }
    };

    render() {
        return (
            <React.Fragment>
                <ReactEcharts style={{ height: "350px" }} option={this.getOption()} />
            </React.Fragment>
        );
    }
}
export default Guage;

