apisearch-events-ui/src/components/LastQueries/LastQueriesComponent.js

Javascript User Interface to visualize all events data.

/**
 * @jsx h
 */

import { h, Component } from 'preact';
import {Line} from 'preact-chartjs-2';
import moment from "moment";

import {getLastQueriesAction} from "./lastQueriesActions";
import {lineChartDefaultOptions} from "../defaults";
import {
    getChartLabels,
    composeLabels,
    composeDatasets
} from "../helpers";
import {datasetDefaultOptions} from "./defaults";

/**
 * RawEvents Component
 */
class LastQueriesComponent extends Component {
    constructor() {
        super();
        this.state = {
            days: 31,
            from: moment().subtract(1, "month"),
            to: moment()
        }
    }

    componentWillMount() {
        const {
            eventType,
            currentQuery,
            client
        } = this.props;

        const {
            from,
            to
        } = this.state;

        /**
         * Dispatch action
         */
        getLastQueriesAction(
            {
                eventType,
                from: from.unix(),
                to: to.unix()
            },
            {
                currentQuery,
                client
            }
        );
    }

    render() {
        const {
            boxWidth,
            boxHeight,
            chartOptions: customUserChartOptions,
            data: {
                lastQueries
            }
        } = this.props;

        let chartLabels = getChartLabels(
            this.state.to,
            this.state.days
        );
        let data = {
            labels: composeLabels(chartLabels, 'DD MMM'),
            datasets: composeDatasets(
                chartLabels,
                [
                    {...datasetDefaultOptions, data: lastQueries}
                ]
            )
        };

        return <Line
            data={data}
            width={boxWidth}
            height={boxHeight}
            options={{
                ...customUserChartOptions
            }}
        />
    }
}

LastQueriesComponent.defaultProps = {
    eventType: 'QueryWasMade',
    boxWidth: 200,
    boxHeight: 300,
    chartOptions: lineChartDefaultOptions
};

export default LastQueriesComponent;