<commit_before>import { LitElement, html, svg } from 'lit-element';
import { BaseGetProps, propDef, getProp, setProp, getPropFunction, dispatchUpdates, getIFrameFunction } from './InkDynamicProps.js';

const Selection = require('d3-selection');
// const d3scale = require('d3-scale');
import * as scale from 'd3-scale'
const d3axis = require('d3-axis');
const d3array = require('d3-array');
const d3shape = require('d3-shape');
const Drag = require('d3-drag');

const d3ScaleChromatic = require('d3-scale-chromatic');

let CURSOR_MOVE_CLASS = 'ink-drag-move';

class InkChart extends BaseGetProps {
    static get properties() {
        return {
            width: Number,
            height: Number,
            ...propDef('xlim', Array),
            ...propDef('ylim', Array),
            xlabel: String,
            ylabel: String,
            xAxisLocation: {
                type: String,
                attribute: 'x-axis-location'
            },
            yAxisLocation: {
                type: String,
                attribute: 'y-axis-location'
            },
        };
    }
    setDefaults() {
        this.width = 700;
        this.height = 400;
        this.xlim = [0, 1];
        this.ylim = [0, 1];
        this.xlabel = '';
        this.ylabel = '';
        this.xAxisLocation = 'bottom';
        this.yAxisLocation = 'left';
    }

    firstUpdated(){
        super.firstUpdated();
        this._initialized = true;

        // Not sure why, but on other pages this doesn't actually work.
        setTimeout(()=>{
            this.requestUpdate()
        }, 100);
    }

    get margin(){
        let margin = {
            top: 20, right: 20, bottom: 40, left: 50
        };
        margin.width = this.width - margin.left - margin.right;
        margin.height = this.height - margin.top - margin.bottom;
        return margin;
    }

    updateDomainAndRange(margin){

        this.x = scale.scaleLinear()
            .range([0, margin.width])
            .domain(this.xlim);

        this.y = scale.scaleLinear()
            .range([margin.height, 0])
            .domain(this.ylim);

    }

    renderXAxis(margin){

        let xAxis = d3axis.axisBottom()
            .scale(this.x);

        this.gXAxis = Selection.select(this.shadowRoot.children[1].children[0].children[1]);
        this.gXAxis.html(null);
        this.gXAxis
            .attr("class", "x axis")
            .attr("transform", "translate(0," + ((this.xAxisLocation === 'bottom')? margin.height : this.y(0)) + ")")
            .call(xAxis);

        let label = this.gXAxis.append("text")
            .style("text-anchor", "middle")
            .attr("fill", "#333")
            .text(this.xlabel);
        if(this.xAxisLocation === 'bottom'){
            label.attr("dy", 30).attr("x", margin.width / 2);
        }else{
            label.attr("dy", -5).attr("x", margin.width)
            .style("text-anchor", "end");
        }

    }

    renderYAxis(margin){

        let yAxis = d3axis.axisLeft()
            .scale(this.y);

        this.gYAxis = Selection.select(this.shadowRoot.children[1].children[0].children[2]);
        this.gYAxis.html(null);
        this.gYAxis
            .attr("class", "y axis")
            .attr("transform", "translate(" + ((this.yAxisLocation === 'left')? 0 : this.x(0)) + ", 0)")
            .call(yAxis);
        let label = this.gYAxis.append("text")
            .attr("transform", "rotate(-90)")
            .style("text-anchor", "middle")
            .attr("fill", "#333")
            .text(this.ylabel);

        if(this.yAxisLocation === 'left'){
            label.attr("dy", -35).attr("x", -margin.height / 2);
        }else{
            label.attr("dy", 15).attr("x", 0)
            .style("text-anchor", "end");
        }
    }

    get xlim() { return getProp(this, 'xlim'); }
    set xlim(val) { return setProp(this, 'xlim', val); }
    get xlimFunction() { return getPropFunction(this, 'xlim'); }

    // ylim
    get ylim() { return getProp(this, 'ylim'); }
    set ylim(val) { return setProp(this, 'ylim', val); }
    get ylimFunction() { return getPropFunction(this, 'ylim'); }

    render() {
        let margin = this.margin;

        if(this._initialized){
            this.updateDomainAndRange(margin);
            this.renderXAxis(margin);
            this.renderYAxis(margin);
        }

        return html`
            <style>
                svg {
                  font: 11px sans-serif;
                }
                .axis path,
                .axis line {
                  fill: none;<commit_msg>Ink chart is a block<commit_after>import { LitElement, html, svg } from 'lit-element';
import { BaseGetProps, propDef, getProp, setProp, getPropFunction, dispatchUpdates, getIFrameFunction } from './InkDynamicProps.js';

const Selection = require('d3-selection');
// const d3scale = require('d3-scale');
import * as scale from 'd3-scale'
const d3axis = require('d3-axis');
const d3array = require('d3-array');
const d3shape = require('d3-shape');
const Drag = require('d3-drag');

const d3ScaleChromatic = require('d3-scale-chromatic');

let CURSOR_MOVE_CLASS = 'ink-drag-move';

class InkChart extends BaseGetProps {
    static get properties() {
        return {
            width: Number,
            height: Number,
            ...propDef('xlim', Array),
            ...propDef('ylim', Array),
            xlabel: String,
            ylabel: String,
            xAxisLocation: {
                type: String,
                attribute: 'x-axis-location'
            },
            yAxisLocation: {
                type: String,
                attribute: 'y-axis-location'
            },
        };
    }
    setDefaults() {
        this.width = 700;
        this.height = 400;
        this.xlim = [0, 1];
        this.ylim = [0, 1];
        this.xlabel = '';
        this.ylabel = '';
        this.xAxisLocation = 'bottom';
        this.yAxisLocation = 'left';
    }

    firstUpdated(){
        super.firstUpdated();
        this._initialized = true;

        // Not sure why, but on other pages this doesn't actually work.
        setTimeout(()=>{
            this.requestUpdate()
        }, 100);
    }

    get margin(){
        let margin = {
            top: 20, right: 20, bottom: 40, left: 50
        };
        margin.width = this.width - margin.left - margin.right;
        margin.height = this.height - margin.top - margin.bottom;
        return margin;
    }

    updateDomainAndRange(margin){

        this.x = scale.scaleLinear()
            .range([0, margin.width])
            .domain(this.xlim);

        this.y = scale.scaleLinear()
            .range([margin.height, 0])
            .domain(this.ylim);

    }

    renderXAxis(margin){

        let xAxis = d3axis.axisBottom()
            .scale(this.x);

        this.gXAxis = Selection.select(this.shadowRoot.children[1].children[0].children[1]);
        this.gXAxis.html(null);
        this.gXAxis
            .attr("class", "x axis")
            .attr("transform", "translate(0," + ((this.xAxisLocation === 'bottom')? margin.height : this.y(0)) + ")")
            .call(xAxis);

        let label = this.gXAxis.append("text")
            .style("text-anchor", "middle")
            .attr("fill", "#333")
            .text(this.xlabel);
        if(this.xAxisLocation === 'bottom'){
            label.attr("dy", 30).attr("x", margin.width / 2);
        }else{
            label.attr("dy", -5).attr("x", margin.width)
            .style("text-anchor", "end");
        }

    }

    renderYAxis(margin){

        let yAxis = d3axis.axisLeft()
            .scale(this.y);

        this.gYAxis = Selection.select(this.shadowRoot.children[1].children[0].children[2]);
        this.gYAxis.html(null);
        this.gYAxis
            .attr("class", "y axis")
            .attr("transform", "translate(" + ((this.yAxisLocation === 'left')? 0 : this.x(0)) + ", 0)")
            .call(yAxis);
        let label = this.gYAxis.append("text")
            .attr("transform", "rotate(-90)")
            .style("text-anchor", "middle")
            .attr("fill", "#333")
            .text(this.ylabel);

        if(this.yAxisLocation === 'left'){
            label.attr("dy", -35).attr("x", -margin.height / 2);
        }else{
            label.attr("dy", 15).attr("x", 0)
            .style("text-anchor", "end");
        }
    }

    get xlim() { return getProp(this, 'xlim'); }
    set xlim(val) { return setProp(this, 'xlim', val); }
    get xlimFunction() { return getPropFunction(this, 'xlim'); }

    // ylim
    get ylim() { return getProp(this, 'ylim'); }
    set ylim(val) { return setProp(this, 'ylim', val); }
    get ylimFunction() { return getPropFunction(this, 'ylim'); }

    render() {
        let margin = this.margin;

        if(this._initialized){
            this.updateDomainAndRange(margin);
            this.renderXAxis(margin);
            this.renderYAxis(margin);
        }

        return html`
            <style>
                svg {
                  font: 11px sans-serif;
                  display: block;
                }
                .axis path,
                .axis line {
                  fill: none;
{'fraction_non_alphanumeric': 0.1557421747191624, 'fraction_numerical': 0.015050714363616534, 'mean_word_length': 1.8, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 7, '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': '1017135', 'n_tokens_mistral': 2889, 'n_tokens_neox': 2746, 'n_words': 561}