<commit_before>import React from 'react'
import * as d3 from "d3"
import dc from 'dc'
import crossfilter from 'crossfilter'
import '../../../node_modules/dc/dc.css'

export default class LabelByChartComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            chartSection : null
        };
    }

    componentWillMount() {
        this.makeChartDOM();
    }

    componentDidMount() { //after DOM make D3 Chart
        this.makeChart();
    }

    componentDidUpdate() { 
        if(this.state.chartSection == null){
            this.makeChartDOM();
        }
        this.makeChart();
    }

    makeChart(){ 
        const chartSection1 = [];
        let section = d3.keys(this.props.data);
        for (const numSection of section){
            this.createChart(numSection, this.props.data);
        }
    }

    makeChartDOM(){
        const chartSection1 = [];
        let section = d3.keys(this.props.data);
        for (const numSection of section){
            chartSection1.push(<dl className='data-box' key = {numSection}>
                                <dt><span>{numSection}</span></dt>
                                <dd id={"_" + numSection}></dd>
                            </dl>);
        }
        this.setState({chartSection: chartSection1});   
    }

    createChart(section, allData){
            let data = allData[section];
            let chart = dc.pieChart('#_' + section,'_' + section);
            let ndx           = crossfilter(data);
            let Dimension  = ndx.dimension(function(d) {return d.label;});
            let dataGroup = Dimension.group().reduceSum(function(d) {return d.value;});

            chart
                .width(200)
                .height(200)
                .innerRadius(0)
                .dimension(Dimension)
                .ordinalColors(['#2E8B57', '#DC143C'])
                .transitionDuration(1500) //add animation speed
                .group(dataGroup);
            chart.render('_' + section);
    }

    render() {
        return (   
                    <article>
                        {this.state.chartSection}
                    </article>
        )
    }
}<commit_msg>modify : set colors on pie chart<commit_after>import React from 'react'
import * as d3 from "d3"
import dc from 'dc'
import crossfilter from 'crossfilter'
import '../../../node_modules/dc/dc.css'

export default class LabelByChartComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            chartSection : null
        };
    }

    componentWillMount() {
        this.makeChartDOM();
    }

    componentDidMount() { //after DOM make D3 Chart
        this.makeChart();
    }

    componentDidUpdate() { 
        if(this.state.chartSection == null){
            this.makeChartDOM();
        }
        this.makeChart();
    }

    makeChart(){ 
        const chartSection1 = [];
        let section = d3.keys(this.props.data);
        for (const numSection of section){
            this.createChart(numSection, this.props.data);
        }
    }

    makeChartDOM(){
        const chartSection1 = [];
        let section = d3.keys(this.props.data);
        for (const numSection of section){
            chartSection1.push(<dl className='data-box' key = {numSection}>
                                <dt><span>{numSection}</span></dt>
                                <dd id={"_" + numSection}></dd>
                            </dl>);
        }
        this.setState({chartSection: chartSection1});   
    }

    createChart(section, allData){
            let data = allData[section];
            let domianList = this.arraySwap(section, allData);
            let colorList = this.createColorArray(section, allData);
            let chart = dc.pieChart('#_' + section,'_' + section);
            let ndx = crossfilter(data);
            let Dimension  = ndx.dimension(function(d) {return d.label;});
            let dataGroup = Dimension.group().reduceSum(function(d) {return d.value;});
            let colorScale = d3.scale.ordinal().domain(domianList).range(colorList);

            chart
                .width(200)
                .height(200)
                .innerRadius(0)
                .dimension(Dimension)
                .colors(function(d){
                    return colorScale(d)
                })
                .transitionDuration(1500) 
                .group(dataGroup);
            chart.render('_' + section);
    }

    arraySwap(section, allData){
        let selData = allData[section];
        let temp = selData[0];
        let domain = []

        for(let i = 0 ; i < selData.length ; i++){
            if(selData[i].label == section){
                selData[0] = selData[i]
                selData[i] = temp
            } 
        }
        for(let data of selData){
            domain.push(data.label)
        }
        return domain;
    }

    createColorArray(section, allData){
        let data = allData[section]
        let color = ['#6699FF'];
        let wrong = ['#B3B0B0', '#CCCCCC'] 
        for(let i = 1 ; i < data.length; i++){
            if(i%2 == 0){
                color.push(wrong[0])
            }else{
                color.push(wrong[1])
            }
        }
        return color;
    }

    render() {
        return (   
                    <article>
                        {this.state.chartSection}
                    </article>
        )
    }
}
{'fraction_non_alphanumeric': 0.12465778426720205, 'fraction_numerical': 0.011498448622011315, 'mean_word_length': 1.5276752767527675, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5529548', 'n_tokens_mistral': 1571, 'n_tokens_neox': 1487, 'n_words': 310}