<commit_before>import React from "react";

import AbstractGraph from "../AbstractGraph";

import * as d3 from "d3";

import "./style.css";

import {properties} from "./default.config"


export default class GaugeGraph extends AbstractGraph {

    constructor(props) {
        super(props, properties);
    }

    deg2rad(deg) {
        return deg * Math.PI / 180;
    }

    componentDidMount() {
        const {
            configuration
        } = this.props;

        const {
            gaugePtrTransition,
            gaugeCtrFormat,
            gaugeCtrSuffix
        } = this.getConfiguredProperties();

        const format = d3.format(gaugeCtrFormat);
        const currentValue = this.currentValue;
        const minValue = this.minValue;

        d3.timeout(() => {
            d3.select(`#gauge-needle-${configuration.id}`)
                .transition()
                .ease(d3.easeLinear)
    			      .duration(gaugePtrTransition)
    			      .attr('transform', 'rotate(' + this.angle +')');

            d3.select(`#gauge-counter-${configuration.id}`)
                .transition()
                    .duration(gaugePtrTransition)
                    .on("start", function repeat() {
                        d3.active(this)
                            .tween("text", function() {
                                var that = d3.select(this),
                                i = d3.interpolateNumber(minValue, currentValue);
                                return function(t) { that.text(format(i(t)) + (gaugeCtrSuffix ? ' ' + gaugeCtrSuffix : '')); };
                             });
                    });
        }, 500);
    }

    render() {
        const {
            data,
            width,
            height,
            configuration
        } = this.props;

        let cData = data;

        if (!data)
            return;

        if(data.length)
            cData = data[0];

        const {
            minValue,
            maxValue,
            minColumn,
            maxColumn,
            currentColumn,
            margin,
            gaugePtrWidth,
            gaugePtrTailLength,
            gaugePtrHeadLengthPercent,
            gaugeLabelInset,
            gaugePtrColor,
            gaugeTicks,
            gaugeRingInset,
            gaugeRingWidth,
            gaugeCtrColor,
            gaugeCtrFontSize,
            labelFormat,
            fontColor,
            colors
        } = this.getConfiguredProperties();

        console.log('Data', this.getConfiguredProperties(), data);
        const angles = {
            min: -90,
            max: 90
        };

        let availableWidth     = width - (margin.left + margin.right);
        let availableHeight    = height - (margin.top + margin.bottom);


        const minRange         = cData[minColumn] ? cData[minColumn] : (minValue ? minValue : 0);
        const maxRange         = cData[maxColumn] ? cData[maxColumn] : (maxValue ? maxValue : 100);
        const currentValue     = cData[currentColumn] ? cData[currentColumn] : 20;

        const minRadius   = Math.min(availableWidth, availableHeight) / 2;

        const innerRadius = minRadius - gaugeRingInset - gaugeRingWidth;
        const outerRadius = minRadius - gaugeRingInset;

        const pointerHeadLength = Math.round(minRadius * gaugePtrHeadLengthPercent);

        const arcColor = d3.interpolateHsl(d3.rgb(colors[0] ? colors[0] : '#e8e2ca'), d3.rgb(colors[1] ? colors[1] : '#3e6c0a'))

        const range = angles.max - angles.min;

        const arc = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle((d, i) => {
    			      return this.deg2rad(angles.min + (d * i * range));
    			  })
            .endAngle((d, i) => {<commit_msg>0 value issue<commit_after>import React from "react";

import AbstractGraph from "../AbstractGraph";

import * as d3 from "d3";

import "./style.css";

import {properties} from "./default.config"


export default class GaugeGraph extends AbstractGraph {

    constructor(props) {
        super(props, properties);
    }

    deg2rad(deg) {
        return deg * Math.PI / 180;
    }

    componentDidMount() {
        const {
            configuration
        } = this.props;

        const {
            gaugePtrTransition,
            gaugeCtrFormat,
            gaugeCtrSuffix
        } = this.getConfiguredProperties();

        const format = d3.format(gaugeCtrFormat);
        const currentValue = this.currentValue;
        const minValue = this.minValue;

        d3.timeout(() => {
            d3.select(`#gauge-needle-${configuration.id}`)
                .transition()
                .ease(d3.easeLinear)
    			      .duration(gaugePtrTransition)
    			      .attr('transform', 'rotate(' + this.angle +')');

            d3.select(`#gauge-counter-${configuration.id}`)
                .transition()
                    .duration(gaugePtrTransition)
                    .on("start", function repeat() {
                        d3.active(this)
                            .tween("text", function() {
                                var that = d3.select(this),
                                i = d3.interpolateNumber(minValue, currentValue);
                                return function(t) { that.text(format(i(t)) + (gaugeCtrSuffix ? ' ' + gaugeCtrSuffix : '')); };
                             });
                    });
        }, 500);
    }

    render() {
        const {
            data,
            width,
            height,
            configuration
        } = this.props;

        let cData = data;

        if (!data)
            return;

        if(data.length)
            cData = data[0];

        const {
            minValue,
            maxValue,
            minColumn,
            maxColumn,
            currentColumn,
            margin,
            gaugePtrWidth,
            gaugePtrTailLength,
            gaugePtrHeadLengthPercent,
            gaugeLabelInset,
            gaugePtrColor,
            gaugeTicks,
            gaugeRingInset,
            gaugeRingWidth,
            gaugeCtrColor,
            gaugeCtrFontSize,
            labelFormat,
            fontColor,
            colors
        } = this.getConfiguredProperties();

        console.log('Data', this.getConfiguredProperties(), data);
        const angles = {
            min: -90,
            max: 90
        };

        let availableWidth     = width - (margin.left + margin.right);
        let availableHeight    = height - (margin.top + margin.bottom);


        const minRange         = cData[minColumn] ? cData[minColumn] : (minValue ? minValue : 0);
        const maxRange         = cData[maxColumn] ? cData[maxColumn] : (maxValue ? maxValue : 100);
        const currentValue     = cData[currentColumn] ? cData[currentColumn] : 0;

        const minRadius   = Math.min(availableWidth, availableHeight) / 2;

        const innerRadius = minRadius - gaugeRingInset - gaugeRingWidth;
        const outerRadius = minRadius - gaugeRingInset;

        const pointerHeadLength = Math.round(minRadius * gaugePtrHeadLengthPercent);

        const arcColor = d3.interpolateHsl(d3.rgb(colors[0] ? colors[0] : '#e8e2ca'), d3.rgb(colors[1] ? colors[1] : '#3e6c0a'))

        const range = angles.max - angles.min;

        const arc = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle((d, i) => {
    			      return this.deg2rad(angles.min + (d * i * range));
    			  })
            .endAngle((d, i) => {
{'fraction_non_alphanumeric': 0.10847367723113645, 'fraction_numerical': 0.011404323034080361, 'mean_word_length': 1.5300234820530023, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2754112', 'n_tokens_mistral': 2144, 'n_tokens_neox': 2008, 'n_words': 400}