<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import * as d3 from 'd3';

class ArcProgress extends Component {
    static propTypes = {
        id: PropTypes.string,
        height: PropTypes.number,
        width: PropTypes.number,
        innerRadius: PropTypes.number,
        outerRadius: PropTypes.number,
        backgroundColor: PropTypes.string,
        foregroundColor: PropTypes.string,
        percentComplete: PropTypes.number
    }

    render() {
        return (
            <div ref="arc" />
        );
    }

    tau = Math.PI * 2;

    arc() {
        return d3.arc()
            .innerRadius(this.props.innerRadius)
            .outerRadius(this.props.outerRadius)
            .startAngle(0);
    }

    componentDidMount() {
        this.drawArc();
    }

    componentDidUpdate() {
        this.redrawArc();
    }

    drawArc() {
        const context = this.setContext();
        this.setBackground(context);
        this.setForeground(context);
    }

    redrawArc() {
        const context = d3.select('#d3-arc');
        context.remove();
        this.drawArc();
    }

    setContext() {
        const { height, width, id } = this.props;
        return d3.select(this.refs.arc).append('svg')
            .attr('height', height)
            .attr('width', width)
            .attr('id', id)
            .append('g')
            .attr('transform', `translate(${height / 2}, ${width / 2})`);
    }

    setBackground(context) {
        return context.append('path')
        .datum({ endAngle: this.tau })
        .style('fill', this.props.backgroundColor)
        .attr('d', this.arc());
    }

    setForeground(context) {
        return context.append('path')
        .datum({ endAngle: this.tau * this.props.percentComplete })
        .style('fill', this.props.foregroundColor)
        .attr('d', this.arc());
    }

}

export default ArcProgress;<commit_msg>Add label to arc progress.<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import * as d3 from 'd3';

class ArcProgress extends Component {
    static propTypes = {
        id: PropTypes.string,
        height: PropTypes.number,
        width: PropTypes.number,
        innerRadius: PropTypes.number,
        outerRadius: PropTypes.number,
        backgroundColor: PropTypes.string,
        foregroundColor: PropTypes.string,
        percentComplete: PropTypes.number
    }

    render() {
        return (
            <div ref="arc" />
        );
    }

    tau = Math.PI * 2;

    arc() {
        return d3.arc()
            .innerRadius(this.props.innerRadius)
            .outerRadius(this.props.outerRadius)
            .startAngle(0);
    }

    componentDidMount() {
        this.drawArc();
    }

    componentDidUpdate() {
        this.redrawArc();
    }

    drawArc() {
        const context = this.setContext();
        this.setBackground(context);
        this.setForeground(context);
        this.setLabel(context);
    }

    redrawArc() {
        const context = d3.select('#d3-arc');
        context.remove();
        this.drawArc();
    }

    setContext() {
        const { height, width, id } = this.props;
        return d3.select(this.refs.arc).append('svg')
            .attr('height', height)
            .attr('width', width)
            .attr('id', id)
            .append('g')
            .attr('transform', `translate(${height / 2}, ${width / 2})`);
    }

    setBackground(context) {
        return context.append('path')
        .datum({ endAngle: this.tau })
        .style('fill', this.props.backgroundColor)
        .attr('d', this.arc());
    }

    setForeground(context) {
        return context.append('path')
        .datum({ endAngle: this.tau * this.props.percentComplete })
        .style('fill', this.props.foregroundColor)
        .attr('d', this.arc());
    }

    setLabel(context) {
        return context.append('text')
            .attr('transform', `translate(${height / 2}, ${width / 2})`)
            .attr('text-anchor', 'middle')
            .text('English Diagnostic');
    }

}

export default ArcProgress;
{'fraction_non_alphanumeric': 0.14351292582749456, 'fraction_numerical': 0.005315293549166465, 'mean_word_length': 2.0, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, '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': '3173582', 'n_tokens_mistral': 1213, 'n_tokens_neox': 1197, 'n_words': 234}