<commit_before>/*
 *  Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 *  WSO2 Inc. licenses this file to you under the Apache License,
 *  Version 2.0 (the "License"); you may not use this file except
 *  in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing,
 *  software distributed under the License is distributed on an
 *  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 *  KIND, either express or implied.  See the License for the
 *  specific language governing permissions and limitations
 *  under the License.
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import {
    VictoryChart,
    VictoryTheme,
    VictoryAxis,
    VictoryTooltip,
    VictoryLabel,
    VictoryLine,
    VictoryScatter,
    VictoryGroup,

} from 'victory';
import Moment from 'moment';
import { FormattedMessage } from 'react-intl';
import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';

const colorScale = ['green', 'orange', 'gold', 'red', 'blue'];

class APIViewErrorTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            successSelected: true,
            _4xxSelected: true,
            _5xxSelected: true,
            faultySelected: true,
            throttleSelected: true,
        };
        this.handleSuccessSelectChange = this.handleSuccessSelectChange.bind(this);
        this.handle4XXSelectChange = this.handle4XXSelectChange.bind(this);
        this.handle5XXSelectChange = this.handle5XXSelectChange.bind(this);
        this.handleFaultySelectChange = this.handleFaultySelectChange.bind(this);
        this.handleThrottlingSelectChange = this.handleThrottlingSelectChange.bind(this);
        this.getPieChartForAPI = this.getPieChartForAPI.bind(this);
        this.renderLineAndScatter = this.renderLineAndScatter.bind(this);

        const { themeName } = this.props;
        this.styles = {
            paper: {
                background: themeName === 'dark' ? '#152638' : '#E8E8E8',
                padding: '4%',
            },
            paperWrapper: {
                height: '75%',
                paddingTop: 35,
                margin: 'auto',
                width: '90%',
            },
        };
    }

    getPieChartForAPI() {
        const { perValue } = this.props;
        let { data } = this.props;
        const {
            successSelected, _4xxSelected, _5xxSelected, faultySelected, throttleSelected,
        } = this.state;
        const timeFormat = 'MMM DD, YYYY hh:mm:ss A';
        let unit;
        let label;
        if (perValue === 'day') {
            unit = 'days';
            label = 'Time (Day)';
        } else if (perValue === 'hour') {
            unit = 'hour';
            label = 'Time (Hour)';
        } else if (perValue === 'minute') {
            unit = 'minutes';
            label = 'Time (Minute)';
        } else if (perValue === 'second') {
            unit = 'seconds';
            label = 'Time (Second)';
        } else if (perValue === 'month') {
            unit = 'months';
            label = 'Time (Month)';
        } else if (perValue === 'year') {
            unit = 'years';
            label = 'Time (Year)';
        }

        data = data.map((item) => {
            item.from = Moment(item.AGG_TIMESTAMP).format(timeFormat);
            item.to = Moment(item.AGG_TIMESTAMP).add(1, unit).format(timeFormat);
            return item;
        });
        return (
            <div>
                <VictoryChart
                    responsive={false}
                    domainPadding={{ x: [20, 20] }}
                    theme={VictoryTheme.material}
                    height={400}
                    width={800}
                    padding={{
                        top: 50, bottom: 100, right: 50, left: 50,
                    }}
                >
                    <VictoryAxi
                        label={label}
                        tickFormat={(time) => {
                            const moment = Moment(Number(time));
                            return moment.format(timeFormat);
                        }}
                        tickCount={10}
                        tickLabelComponent={<VictoryLabel angle={45} />}<commit_msg>Fix typo<commit_after>/*
 *  Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 *  WSO2 Inc. licenses this file to you under the Apache License,
 *  Version 2.0 (the "License"); you may not use this file except
 *  in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing,
 *  software distributed under the License is distributed on an
 *  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 *  KIND, either express or implied.  See the License for the
 *  specific language governing permissions and limitations
 *  under the License.
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import {
    VictoryChart,
    VictoryTheme,
    VictoryAxis,
    VictoryTooltip,
    VictoryLabel,
    VictoryLine,
    VictoryScatter,
    VictoryGroup,

} from 'victory';
import Moment from 'moment';
import { FormattedMessage } from 'react-intl';
import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';

const colorScale = ['green', 'orange', 'gold', 'red', 'blue'];

class APIViewErrorTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            successSelected: true,
            _4xxSelected: true,
            _5xxSelected: true,
            faultySelected: true,
            throttleSelected: true,
        };
        this.handleSuccessSelectChange = this.handleSuccessSelectChange.bind(this);
        this.handle4XXSelectChange = this.handle4XXSelectChange.bind(this);
        this.handle5XXSelectChange = this.handle5XXSelectChange.bind(this);
        this.handleFaultySelectChange = this.handleFaultySelectChange.bind(this);
        this.handleThrottlingSelectChange = this.handleThrottlingSelectChange.bind(this);
        this.getPieChartForAPI = this.getPieChartForAPI.bind(this);
        this.renderLineAndScatter = this.renderLineAndScatter.bind(this);

        const { themeName } = this.props;
        this.styles = {
            paper: {
                background: themeName === 'dark' ? '#152638' : '#E8E8E8',
                padding: '4%',
            },
            paperWrapper: {
                height: '75%',
                paddingTop: 35,
                margin: 'auto',
                width: '90%',
            },
        };
    }

    getPieChartForAPI() {
        const { perValue } = this.props;
        let { data } = this.props;
        const {
            successSelected, _4xxSelected, _5xxSelected, faultySelected, throttleSelected,
        } = this.state;
        const timeFormat = 'MMM DD, YYYY hh:mm:ss A';
        let unit;
        let label;
        if (perValue === 'day') {
            unit = 'days';
            label = 'Time (Day)';
        } else if (perValue === 'hour') {
            unit = 'hour';
            label = 'Time (Hour)';
        } else if (perValue === 'minute') {
            unit = 'minutes';
            label = 'Time (Minute)';
        } else if (perValue === 'second') {
            unit = 'seconds';
            label = 'Time (Second)';
        } else if (perValue === 'month') {
            unit = 'months';
            label = 'Time (Month)';
        } else if (perValue === 'year') {
            unit = 'years';
            label = 'Time (Year)';
        }

        data = data.map((item) => {
            item.from = Moment(item.AGG_TIMESTAMP).format(timeFormat);
            item.to = Moment(item.AGG_TIMESTAMP).add(1, unit).format(timeFormat);
            return item;
        });
        return (
            <div>
                <VictoryChart
                    responsive={false}
                    domainPadding={{ x: [20, 20] }}
                    theme={VictoryTheme.material}
                    height={400}
                    width={800}
                    padding={{
                        top: 50, bottom: 100, right: 50, left: 50,
                    }}
                >
                    <VictoryAxis
                        label={label}
                        tickFormat={(time) => {
                            const moment = Moment(Number(time));
                            return moment.format(timeFormat);
                        }}
                        tickCount={10}
                        tickLabelComponent={<VictoryLabel angle={45} />}
{'fraction_non_alphanumeric': 0.1151199165797706, 'fraction_numerical': 0.012304483837330552, 'mean_word_length': 1.9098907766990292, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, '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': '4560031', 'n_tokens_mistral': 2742, 'n_tokens_neox': 2630, 'n_words': 669}