<commit_before>import React from "react";
import Immutable from "immutable";
import Highcharts from "react-highcharts";

// var config = {

//     xAxis: {
//         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
//     },

//     series: [{
//         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
//     }]

// };

class DepthHighChart extends React.Component {
    constructor() {
        super();
        this.state = {
            parentWidth: 0
        };
    }

    shouldComponentUpdate(nextProps) {
        return !Immutable.is(nextProps.orders, this.props.orders);
    }

    render() {
        let {flat_bids, flat_asks, quoteSymbol, baseSymbol} = this.props;
        if (flat_bids.length === 0) {
            console.log("flat_bids:", flat_bids);
        }
        if (flat_asks.length === 0) {
            console.log("flat_asks:", flat_asks);
        }
        let priceSymbol = `${baseSymbol}/${quoteSymbol}`;

        let config = {
            chart: {
                type: "area",
                backgroundColor: "rgba(255, 0, 0, 0)"
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            legend: {
                itemStyle: {
                    color: "#FFFFFF"
                }
            },
            tooltip: {
                formatter: function() {
                    return `<b>${this.series.name}</b><br/>Price: ${this.x} ${priceSymbol}<br/>Amount: ${this.y} ${quoteSymbol}`;
                }
            },
            series: [
                {
                    name: `Buy ${quoteSymbol}`,
                    data: flat_bids,
                    color: "#50D2C2"
                },
                {
                    name: `Sell ${quoteSymbol}`,
                    data: flat_asks,
                    color: "#E3745B"
                }
            ],
            yAxis: {
                labels: {
                    style: {
                        color: "#FFFFFF"
                    }
                },
                title: {
                    text: `Amount (${quoteSymbol})`,
                    style: {
                        color: "#FFFFFF"
                    }
                }
            },
            xAxis: {
                labels: {
                    style: {
                        color: "#FFFFFF"
                    }
                },
                title: {
                    text: `Price (${priceSymbol})`,
                    style: {
                        color: "#FFFFFF"
                    }
                }
            },
            plotOptions: {
                area: {
                    animation: false,
                    marker: {
                        enabled: false
                    },
                    series: {
                        fillOpacity: 0.25
                    }
                }
            }


        };
        // data = [
        //     {
        //     label: "somethingA",
        //     values: [{x: 0, y: 2}, {x: 1.3, y: 5}, {x: 3, y: 6}, {x: 3.5, y: 6.5}, {x: 4, y: 6}, {x: 4.5, y: 6}, {x: 5, y: 7}, {x: 5.5, y: 8}, {x: 10, y: 0}]
        //     },
        //     {
        //     label: "somethingB",
        //     values: [{x: 1.3, y: 4}, {x: 3, y: 7}, {x: 3.5, y: 8}, {x: 4, y: 7}, {x: 4.5, y: 7}, {x: 5, y: 7.8}, {x: 7, y: 9}, {x: 10, y: 9}, {x: 15, y: 9}]
        //     }
        // ];

        // if(orders.size > 0 && base && quote) {
           
        //     data = [
        //     {
        //         label: "Bids",
        //         values: this.props.flat_bids
        //     },
        //     {
        //         label: "Asks",
        //         values: this.props.flat_asks
        //     }];

        //     console.log("depth data:", data);

        // }


        return (
            <div className="grid-content">
                <div className="card">
                    {flat_bids && flat_asks ? <Highcharts config={config}/> : null}
                    </div>
            </div>
        );
    }
}

DepthHighChart.defaultProps = {
    width: "100%",
    height: 300,
    margin: { left: -1, top: 10, bottom: 0, right: 1 }
};

export default DepthHighChart;<commit_msg>Update props and remove old code<commit_after>import React from "react";
import {PropTypes} from "react";
import Immutable from "immutable";
import Highcharts from "react-highcharts";

class DepthHighChart extends React.Component {

    shouldComponentUpdate(nextProps) {
        return !Immutable.is(nextProps.orders, this.props.orders);
    }

    render() {
        let {flat_bids, flat_asks, quoteSymbol, baseSymbol} = this.props;

        let priceSymbol = `${baseSymbol}/${quoteSymbol}`;

        let config = {
            chart: {
                type: "area",
                backgroundColor: "rgba(255, 0, 0, 0)"
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            legend: {
                itemStyle: {
                    color: "#FFFFFF"
                }
            },
            tooltip: {
                formatter: function() {
                    return `<b>${this.series.name}</b><br/>Price: ${this.x} ${priceSymbol}<br/>Amount: ${this.y} ${quoteSymbol}`;
                }
            },
            series: [
                {
                    name: `Buy ${quoteSymbol}`,
                    data: flat_bids,
                    color: "#50D2C2"
                },
                {
                    name: `Sell ${quoteSymbol}`,
                    data: flat_asks,
                    color: "#E3745B"
                }
            ],
            yAxis: {
                labels: {
                    style: {
                        color: "#FFFFFF"
                    }
                },
                title: {
                    text: `Amount (${quoteSymbol})`,
                    style: {
                        color: "#FFFFFF"
                    }
                }
            },
            xAxis: {
                labels: {
                    style: {
                        color: "#FFFFFF"
                    }
                },
                title: {
                    text: `Price (${priceSymbol})`,
                    style: {
                        color: "#FFFFFF"
                    }
                }
            },
            plotOptions: {
                area: {
                    animation: false,
                    marker: {
                        enabled: false
                    },
                    series: {
                        fillOpacity: 0.25
                    }
                }
            }


        };

        return (
            <div className="grid-content">
                <div className="card">
                    {flat_bids && flat_asks ? <Highcharts config={config}/> : null}
                    </div>
            </div>
        );
    }
}

DepthHighChart.defaultProps = {
    flat_bids: [],
    flat_asks: [],
    orders: {},
    quoteSymbol: "",
    baseSymbol: ""
};

DepthHighChart.propTypes = {
    flat_bids: PropTypes.array.isRequired,
    flat_asks: PropTypes.array.isRequired,
    orders: PropTypes.object.isRequired,
    baseSymbol: PropTypes.string.isRequired,
    quoteSymbol: PropTypes.string.isRequired
};

export default DepthHighChart;
{'fraction_non_alphanumeric': 0.13566768739182533, 'fraction_numerical': 0.018772467048329116, 'mean_word_length': 0.9177942302782742, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 22, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5003990', 'n_tokens_mistral': 2253, 'n_tokens_neox': 2006, 'n_words': 425}