<commit_before>﻿var React = require("react");
var ReactDOM = require("react-dom");
var LineChart = require("./charts.jsx").LineChart;
var ReactFauxDOM = require("react-faux-dom");

var Metrics = React.createClass({
    getInitialState: function() {
        return {
            error: undefined,
            data: undefined,
            selectedMetric: ""
        }
    },

    componentDidMount: function() {
        this.loadData();
    },

    loadData: function() {
        var url = "/api/instances/" + this.props.instanceName + "/metrics";
        d3.json(url, this.dataLoaded);
    },

    dataLoaded: function(err, data) {
        if (err) {
            this.setState({ error: err });
        } else {
            this.setState({ data: data });
        }
    },

    metricChanged: function(event) {
        this.setState({ selectedMetric: event.target.value });
    },

    mapMeasurement: function (name) {
        var metric = _.find(this.state.data, function(x) {
            return x.Name === name;
        });
        var windowSize = metric.WindowSize;
        var measurements = [];
        for (var i = metric.Measurements.length - 1; i >= 0; i--) {
            measurements.push(metric.Measurements[i]);
        }
        var duration = moment.duration(windowSize / 2);
        var elements = [];
        measurements.forEach(function (e, i, array) {
            var time = moment(e.StartTime).add(duration);
            elements.push({ x: time.toDate(), y: e.Average });
            var nextIndex = i + 1;
            if (array.length <= nextIndex) { return; }
            var nextElement = array[nextIndex];
            var nextStartTime = moment(nextElement.StartTime);
            var firstEmptyPointTime = moment(e.EndTime).add(duration);
            if (firstEmptyPointTime.isBefore(nextStartTime)) {
                elements.push({ x: firstEmptyPointTime.toDate(), y: 0 });
                var lastEmptyPointTime = nextStartTime.subtract(duration);
                if (lastEmptyPointTime.isAfter(firstEmptyPointTime)) {
                    elements.push({ x: lastEmptyPointTime.toDate(), y: 0 });
                }
            }
        });
        var max = d3.max(elements, function (d) { return d.x; });
        var current = new Date();
        if (max < current) {
            var time = moment(max).add(duration).toDate();
            elements.push({ x: time, y: 0 }, { x: current, y: 0 });
        }
        return elements;
    },

    render: function() {
        var error = this.state.error,
            data = this.state.data;

        if (error !== undefined) {
            return (
                <div className="alert alert-danger" role="alert">
                    {error}
                </div>
            );
        }

        if (data === undefined) {
            return (
                <p>Loading...</p>
            );
        }

        if (_.isEmpty(data)) {
            return (
                <div className="alert alert-warning">No metrics defined or used yet</div>
            );
        }

        var metricOptionTags = _.map(data, function(x) {
            return (<option value={x.Name} key={x.Name}>{x.Name}</option>);
        });

        var chart = null;
        if (this.state.selectedMetric !== "") {
            var measurements = this.mapMeasurement(this.state.selectedMetric);
            var margin = { top: 10, right: 20, left: 50, bottom: 30 };
            var height = 600 - margin.top - margin.bottom;
            var width = 1000 - margin.left - margin.right;

            var xScale = d3.time.scale()
                .range([0, width])
                .domain(d3.extent(measurements, function (d) { return d.x; }));

            var yScale = d3.scale.linear()
                .range([height, 0])
                .domain(d3.extent(measurements, function (d) { return d.y; }));

            var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");

            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

            var lineFunction = d3.svg.line()
                .x(function(d) { return xScale(d.x); })
                .y(function (d) { return yScale(d.y); });

            var svg = d3.select(ReactFauxDOM.createElement("svg"))
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom);

            var chart2 = svg.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            chart2.append("rect")
                .attr("class", "overlay")
                .attr("width", width)
                .attr("height", height);

            chart2.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            chart2.append("g")
                .attr("class", "y axis")
                .call(yAxis);

            chart2.append("path")
                .attr("class", "line")
                .datum(measurements)
                .attr("d", lineFunction);
<commit_msg>fixup! Add axes to chart<commit_after>﻿var React = require("react");
var ReactDOM = require("react-dom");
var LineChart = require("./charts.jsx").LineChart;
var ReactFauxDOM = require("react-faux-dom");

var Metrics = React.createClass({
    getInitialState: function() {
        return {
            error: undefined,
            data: undefined,
            selectedMetric: ""
        }
    },

    componentDidMount: function() {
        this.loadData();
    },

    loadData: function() {
        var url = "/api/instances/" + this.props.instanceName + "/metrics";
        d3.json(url, this.dataLoaded);
    },

    dataLoaded: function(err, data) {
        if (err) {
            this.setState({ error: err });
        } else {
            this.setState({ data: data });
        }
    },

    metricChanged: function(event) {
        this.setState({ selectedMetric: event.target.value });
    },

    mapMeasurement: function (name) {
        var metric = _.find(this.state.data, function(x) {
            return x.Name === name;
        });
        var windowSize = metric.WindowSize;
        var measurements = [];
        for (var i = metric.Measurements.length - 1; i >= 0; i--) {
            measurements.push(metric.Measurements[i]);
        }
        var duration = moment.duration(windowSize / 2);
        var elements = [];
        measurements.forEach(function (e, i, array) {
            var time = moment(e.StartTime).add(duration);
            elements.push({ x: time.toDate(), y: e.Average });
            var nextIndex = i + 1;
            if (array.length <= nextIndex) { return; }
            var nextElement = array[nextIndex];
            var nextStartTime = moment(nextElement.StartTime);
            var firstEmptyPointTime = moment(e.EndTime).add(duration);
            if (firstEmptyPointTime.isBefore(nextStartTime)) {
                elements.push({ x: firstEmptyPointTime.toDate(), y: 0 });
                var lastEmptyPointTime = nextStartTime.subtract(duration);
                if (lastEmptyPointTime.isAfter(firstEmptyPointTime)) {
                    elements.push({ x: lastEmptyPointTime.toDate(), y: 0 });
                }
            }
        });
        var max = d3.max(elements, function (d) { return d.x; });
        var current = new Date();
        if (max < current) {
            var time = moment(max).add(duration).toDate();
            elements.push({ x: time, y: 0 }, { x: current, y: 0 });
        }
        return elements;
    },

    render: function() {
        var error = this.state.error,
            data = this.state.data;

        if (error !== undefined) {
            return (
                <div className="alert alert-danger" role="alert">
                    {error}
                </div>
            );
        }

        if (data === undefined) {
            return (
                <p>Loading...</p>
            );
        }

        if (_.isEmpty(data)) {
            return (
                <div className="alert alert-warning">No metrics defined or used yet</div>
            );
        }

        var metricOptionTags = _.map(data, function(x) {
            return (<option value={x.Name} key={x.Name}>{x.Name}</option>);
        });

        var chart = null;
        if (this.state.selectedMetric !== "") {
            var measurements = this.mapMeasurement(this.state.selectedMetric);
            var margin = { top: 10, right: 20, left: 50, bottom: 30 };
            var height = 600 - margin.top - margin.bottom;
            var width = 1000 - margin.left - margin.right;

            var xScale = d3.time.scale()
                .range([0, width])
                .domain(d3.extent(measurements, function (d) { return d.x; }));

            var yScale = d3.scale.linear()
                .range([height, 0])
                .domain(d3.extent(measurements, function (d) { return d.y; }));

            var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");

            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

            var lineFunction = d3.svg.line()
                .x(function(d) { return xScale(d.x); })
                .y(function (d) { return yScale(d.y); });

            var svg = d3.select(ReactFauxDOM.createElement("svg"))
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom);

            var chart2 = svg.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            chart2.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            chart2.append("g")
                .attr("class", "y axis")
                .call(yAxis);

            chart2.append("path")
                .attr("class", "line")
                .datum(measurements)
                .attr("d", lineFunction);

{'fraction_non_alphanumeric': 0.14488328572835615, 'fraction_numerical': 0.007977937555402345, 'mean_word_length': 1.5975952929137887, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 21, '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': '1071738', 'n_tokens_mistral': 2925, 'n_tokens_neox': 2779, 'n_words': 615}