<commit_before>var R         = require("ramda");
var Radium    = require("radium");
var React     = require("react");
var Loader    = require("halogen/PacmanLoader");
var bootstrap = require("react-bootstrap");
var moment    = require("moment");

var AppPropTypes     = require("lib/app-prop-types.js");
var dygraphExport    = require("lib/dygraph-export.js");
var DygraphCSVExport = require("lib/dygraph-export-csv.js");
var colors           = require("lib/colors");

var styles = {
    graphContainer: {
        width: ENVIRONMENT === "cordova" ? "calc(100vw - 100px)" : "calc(100vw - 130px)",
        height: "calc(100vh - 350px)",
        margin: "20px 20px 30px 20px"
    }
};

const oneMonthInMilliseconds = moment.duration(1, "months").asMilliseconds();

var TemporalLineGraph = React.createClass({
    propTypes: {
        alarms: React.PropTypes.arrayOf(React.PropTypes.number),
        colors: React.PropTypes.arrayOf(React.PropTypes.string),
        coordinates: React.PropTypes.arrayOf(
            AppPropTypes.DygraphCoordinate
        ).isRequired,
        dateFilter: React.PropTypes.oneOfType([
            React.PropTypes.object,
            React.PropTypes.string
        ]),
        dateWindow: React.PropTypes.arrayOf(React.PropTypes.number),
        labels: React.PropTypes.array,
        lockInteraction: React.PropTypes.bool,
        showRangeSelector: React.PropTypes.bool,
        sito: React.PropTypes.object,
        xLabel: React.PropTypes.string,
        xLegendFormatter: React.PropTypes.func,
        xTicker: React.PropTypes.func,
        yLabel: React.PropTypes.string
    },
    componentDidMount: function () {
        this.drawGraph();
    },
    componentWillReceiveProps: function (nextProps) {
        var options = this.getOptionsFromProps(nextProps);
        this.graph.updateOptions(R.merge(options, {
            file: this.getCoordinatesFromProps(nextProps)
        }));
        this.drawAnnotations();
    },
    getCoordinatesFromProps: function (props) {
        return (
            R.isEmpty(props.coordinates) ?
            [[0]] :
            props.coordinates
        );
    },
    getOptionsFromProps: function (props) {
        var options = {
            drawPoints: true,
            errorBars: true,
            hideOverlayOnMouseOut: false,
            labels: this.getLabelsFromProps(props),
            labelsSeparateLines: true,
            legend: "always",
            sigma: 2,
            strokeWidth: 1.5,
            xlabel: props.xLabel,
            ylabel: props.yLabel,
            axes: {
                x: {},
                y: {}
            }
        };
        if (props.coordinates.length !== 0) {
            var lastDate;
            options.underlayCallback = function (canvas, area, g) {
                props.coordinates.map(value => {
                    var date = value[0];
                    if (moment(lastDate).date() !== moment(date).date() && R.equals(moment(date), moment(date).day(6))) {
                        lastDate = date;
                        var bottomLeft = g.toDomCoords(moment(date).startOf("day"), -20);
                        var topRight = g.toDomCoords(moment(date).add(1, "days").endOf("day"), +20);
                        var left = bottomLeft[0];
                        var right = topRight[0];

                        canvas.fillStyle = colors.greyBackground;
                        canvas.fillRect(left, area.y, right - left, area.h);
                    }
                });
            };
        }
        if (props.colors) {
            options.colors = props.colors;
        }
        if (props.dateWindow) {<commit_msg>Added an options for display the second y label<commit_after>var R         = require("ramda");
var Radium    = require("radium");
var React     = require("react");
var Loader    = require("halogen/PacmanLoader");
var bootstrap = require("react-bootstrap");
var moment    = require("moment");

var AppPropTypes     = require("lib/app-prop-types.js");
var dygraphExport    = require("lib/dygraph-export.js");
var DygraphCSVExport = require("lib/dygraph-export-csv.js");
var colors           = require("lib/colors");

var styles = {
    graphContainer: {
        width: ENVIRONMENT === "cordova" ? "calc(100vw - 100px)" : "calc(100vw - 130px)",
        height: "calc(100vh - 350px)",
        margin: "20px 20px 30px 20px"
    }
};

const oneMonthInMilliseconds = moment.duration(1, "months").asMilliseconds();

var TemporalLineGraph = React.createClass({
    propTypes: {
        alarms: React.PropTypes.arrayOf(React.PropTypes.number),
        colors: React.PropTypes.arrayOf(React.PropTypes.string),
        coordinates: React.PropTypes.arrayOf(
            AppPropTypes.DygraphCoordinate
        ).isRequired,
        dateFilter: React.PropTypes.oneOfType([
            React.PropTypes.object,
            React.PropTypes.string
        ]),
        dateWindow: React.PropTypes.arrayOf(React.PropTypes.number),
        labels: React.PropTypes.array,
        lockInteraction: React.PropTypes.bool,
        showRangeSelector: React.PropTypes.bool,
        sito: React.PropTypes.object,
        xLabel: React.PropTypes.string,
        xLegendFormatter: React.PropTypes.func,
        xTicker: React.PropTypes.func,
        yLabel: React.PropTypes.string
    },
    componentDidMount: function () {
        this.drawGraph();
    },
    componentWillReceiveProps: function (nextProps) {
        var options = this.getOptionsFromProps(nextProps);
        this.graph.updateOptions(R.merge(options, {
            file: this.getCoordinatesFromProps(nextProps)
        }));
        this.drawAnnotations();
    },
    getCoordinatesFromProps: function (props) {
        return (
            R.isEmpty(props.coordinates) ?
            [[0]] :
            props.coordinates
        );
    },
    getOptionsFromProps: function (props) {
        var options = {
            drawPoints: true,
            errorBars: true,
            hideOverlayOnMouseOut: false,
            labels: this.getLabelsFromProps(props),
            labelsSeparateLines: true,
            legend: "always",
            sigma: 2,
            strokeWidth: 1.5,
            xlabel: props.xLabel || "Data",
            ylabel: props.yLabel,
            y2label: props.y2label || "Temperatura",
            axes: {
                x: {},
                y: {}
            }
        };
        if (props.series) {
            var labels = this.getLabelsFromProps(props);
            var externalLabel = labels[2];
            options.series[externalLabel] = {axis: "y2"};
        }
        if (props.coordinates.length !== 0) {
            var lastDate;
            options.underlayCallback = function (canvas, area, g) {
                props.coordinates.map(value => {
                    var date = value[0];
                    if (moment(lastDate).date() !== moment(date).date() && R.equals(moment(date), moment(date).day(6))) {
                        lastDate = date;
                        var bottomLeft = g.toDomCoords(moment(date).startOf("day"), -20);
                        var topRight = g.toDomCoords(moment(date).add(1, "days").endOf("day"), +20);
                        var left = bottomLeft[0];
                        var right = topRight[0];

                        canvas.fillStyle = colors.greyBackground;
                        canvas.fillRect(left, area.y, right - left, area.h);
                    }
                });
            };
        }
        if (props.colors) {
            options.colors = props.colors;
        }
        if (props.dateWindow) {
{'fraction_non_alphanumeric': 0.12238176788301937, 'fraction_numerical': 0.011329205638255829, 'mean_word_length': 1.8921904761904762, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '1778927', 'n_tokens_mistral': 2205, 'n_tokens_neox': 2113, 'n_words': 389}