<commit_before>import { interpolateArray } from 'd3-interpolate';
import { timer } from 'd3-timer';
import { mouse, select } from 'd3-selection';
import { transition } from 'd3-transition';
import { easeCubic } from 'd3-ease';

import {
    Globals,
    mergeOptions
} from 'vizart-core';
import isUndefined from 'lodash-es/isUndefined';
import isNull from 'lodash-es/isNull';
import isFunction from 'lodash-es/isFunction';

import AbstractCanvasChart from '../../canvas/AbstractCanvasChart';
import createCartesianOpt from '../../options/createCartesianOpt';
import processCartesianData from '../../data/coordinates/cartesian';
import {getSortDef} from '../../data/helper';

const BarOpt = {
    chart: { type: 'bar_horizontal'}
};

const withinRect = (d, x, y)=> {
    return this.x <= x && x <= this.x + this.width
        && this.y <= y && y <= this.y + this.height;
}


const drawRects =  (context, selection, opt)=> {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);

    selection.each(function(d){
        const node = select(this);
        context.save();
        context.beginPath();
        context.fillStyle = node.attr('fill');
        context.globalAlpha = node.attr('opacity');
        context.rect(node.attr('x'), node.attr('y'), node.attr('width'), node.attr('height'));
        context.fill();


        context.translate(node.attr('x'), opt.chart.innerHeight);
        context.rotate(-Math.PI/2);
        context.textAlign = "bottom";
        context.textBaseline = 'middle';

        context.shadowColor = 'rgba(255,255,255,0.4)';
        context.shadowBlur = 30;

        context.fillStyle = 'black';

        context.fillText(node.attr('title'), 5, node.attr('width') / 2);
        context.restore();
    });
}

class Bar extends AbstractCanvasChart {

    constructor(canvasId, _userOptions) {
        super(canvasId, _userOptions);

        this._w = ()=>{
            if (isUndefined(this._getDimension().scale.bandwidth)
                || !isFunction(this._getDimension().scale.bandwidth)) {
                let evenWidth = Math.ceil(this._options.chart.innerWidth / this._data.length);

                return evenWidth > 1 ? evenWidth - 1 : 0.1
            } else {
                return this._getDimension().scale.bandwidth();
            }
        };
        this._h = d=>  this._options.chart.innerHeight - this._y(d);
        this._zero = ()=> this._getMetric().scale(0);
    }

    _animate() {
        this.drawDetachedBars();

        // timer((elapsed)=> {
        //     drawRects(this._frontContext, this._detachedContainer.selectAll('.bar'), this._options)
        // });
    }<commit_msg>draw text with transparent white outer stroke<commit_after>import { interpolateArray } from 'd3-interpolate';
import { timer } from 'd3-timer';
import { mouse, select } from 'd3-selection';
import { transition } from 'd3-transition';
import { easeCubic } from 'd3-ease';

import {
    Globals,
    mergeOptions
} from 'vizart-core';
import isUndefined from 'lodash-es/isUndefined';
import isNull from 'lodash-es/isNull';
import isFunction from 'lodash-es/isFunction';

import AbstractCanvasChart from '../../canvas/AbstractCanvasChart';
import createCartesianOpt from '../../options/createCartesianOpt';
import processCartesianData from '../../data/coordinates/cartesian';
import {getSortDef} from '../../data/helper';

const BarOpt = {
    chart: { type: 'bar_horizontal'}
};

const withinRect = (d, x, y)=> {
    return this.x <= x && x <= this.x + this.width
        && this.y <= y && y <= this.y + this.height;
}


const drawRects =  (context, selection, opt)=> {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);

    selection.each(function(d){
        const node = select(this);
        context.save();
        context.beginPath();
        context.fillStyle = node.attr('fill');
        context.globalAlpha = node.attr('opacity');
        context.rect(node.attr('x'), node.attr('y'), node.attr('width'), node.attr('height'));
        context.fill();


        context.translate(node.attr('x'), opt.chart.innerHeight);
        context.rotate(-Math.PI/2);
        context.textAlign = "bottom";
        context.textBaseline = 'middle';

        context.strokeStyle = 'rgba(255,255,255, 0.7)';
        context.lineWidth = 4;
        context.strokeText(node.attr('title'), 5, node.attr('width') / 2);

        context.fillStyle = 'black';
        context.fillText(node.attr('title'), 5, node.attr('width') / 2);

        context.restore();
    });
}

class Bar extends AbstractCanvasChart {

    constructor(canvasId, _userOptions) {
        super(canvasId, _userOptions);

        this._w = ()=>{
            if (isUndefined(this._getDimension().scale.bandwidth)
                || !isFunction(this._getDimension().scale.bandwidth)) {
                let evenWidth = Math.ceil(this._options.chart.innerWidth / this._data.length);

                return evenWidth > 1 ? evenWidth - 1 : 0.1
            } else {
                return this._getDimension().scale.bandwidth();
            }
        };
        this._h = d=>  this._options.chart.innerHeight - this._y(d);
        this._zero = ()=> this._getMetric().scale(0);
    }

    _animate() {
        this.drawDetachedBars();

        // timer((elapsed)=> {
        //     drawRects(this._frontContext, this._detachedContainer.selectAll('.bar'), this._options)
        // });
    }
{'fraction_non_alphanumeric': 0.15971196454948303, 'fraction_numerical': 0.010524372230428361, 'mean_word_length': 2.6875425459496256, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 17, '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': '6575809', 'n_tokens_mistral': 1678, 'n_tokens_neox': 1618, 'n_words': 319}