<commit_before>import React from "react";

import tabify from "../../utils/tabify";
import * as d3 from "d3";

export default class PieGraph extends React.Component {
    constructor(){
        super();

        // These properties can be overridden from the configuration.
        // TODO unify these at a base class inherited by both bar chart and line chart.
        this.defaults = {
            pieInnerRadius: 0, // The inner radius of the pie chart as a percentage of min(width, height)
            pieOuterRadius: 0.8 // The outer radius of the pie chart as a percentage of min(width, height)
        };
    }

    // Gets the object containing all configured properties.
    // Uses properties from the configuration,
    // falling back to defaults for unspecified properties.
    // TODO move this to a base class
    getConfiguredProperties() {
        return Object.assign({}, this.defaults, this.props.configuration.data);
    }

    render() {

        const { response, width, height } = this.props;

        if (!response || response.error)
            return;

        const data = tabify(response.results);

        const {
          sliceColumn,
          pieInnerRadius,
          pieOuterRadius
        } = this.getConfiguredProperties();

        const side = Math.min(width, height);
        const innerRadius = pieInnerRadius * side;
        const outerRadius = pieOuterRadius * side;

        const top = 0; // TODO compute top and left
        const left = 0;

        const pie = d3.pie()
            .value(function (d){ return d[sliceColumn] });

        const arc = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

        const slices = pie(data)
        console.log(data)
        console.log(slices)
        console.log(arc(slices[0]))
        return (
            <div className="pie-graph">
                <svg width={side} height={side}>
                    <g transform={ `translate(${left},${top})` } >
                        {
                            slices.map((slice) => (
                                <path d={arc(slice)} />
                            ))
                        }
                    </g>
                </svg>
            </div>
        );
    }
}
PieGraph.propTypes = {
  configuration: React.PropTypes.object,
  response: React.PropTypes.object
};<commit_msg>Got first pie chart to render<commit_after>import React from "react";

import tabify from "../../utils/tabify";
import * as d3 from "d3";

export default class PieGraph extends React.Component {
    constructor(){
        super();

        // These properties can be overridden from the configuration.
        // TODO unify these at a base class inherited by both bar chart and line chart.
        this.defaults = {
            pieInnerRadius: 0, // The inner radius of the pie chart as a percentage of min(width, height)
            pieOuterRadius: 0.8, // The outer radius of the pie chart as a percentage of min(width, height)
            sliceStyle: {
                stroke: "black",
                strokeWidth: "1px",
                fill: "rgba(0,0,0,0.2"
            }
        };
    }

    // Gets the object containing all configured properties.
    // Uses properties from the configuration,
    // falling back to defaults for unspecified properties.
    // TODO move this to a base class
    getConfiguredProperties() {
        return Object.assign({}, this.defaults, this.props.configuration.data);
    }

    render() {

        const { response, width, height } = this.props;

        if (!response || response.error)
            return;

        const data = tabify(response.results);

        const {
          sliceColumn,
          pieInnerRadius,
          pieOuterRadius,
          sliceStyle
        } = this.getConfiguredProperties();

        const side = Math.min(width, height);
        const innerRadius = pieInnerRadius * side / 2;
        const outerRadius = pieOuterRadius * side / 2;

        const top = side / 2; // TODO compute top and left
        const left = side / 2;

        const pie = d3.pie()
            .value(function (d){ return d[sliceColumn] });

        const arc = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

        const slices = pie(data)

        return (
            <div className="pie-graph">
                <svg width={side} height={side}>
                    <g transform={ `translate(${left},${top})` } >
                        {
                            slices.map((slice) => (
                                <path d={arc(slice)} style={sliceStyle} />
                            ))
                        }
                    </g>
                </svg>
            </div>
        );
    }
}
PieGraph.propTypes = {
  configuration: React.PropTypes.object,
  response: React.PropTypes.object
};
{'fraction_non_alphanumeric': 0.10391473662635786, 'fraction_numerical': 0.005533920885427342, 'mean_word_length': 1.6449864498644986, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 19, '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': '3377837', 'n_tokens_mistral': 1287, 'n_tokens_neox': 1227, 'n_words': 385}