apisearch-events-ui/src/components/SearchEffectiveness/SearchEffectivenessComponent.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 "./searchEffectivenessActions";
import {lineChartDefaultOptions} from "../defaults";
import {
    foundQueriesDatasetOptions,
    notFoundQueriesDatasetOptions
} from "./defaults";

import {
    getChartLabels,
    composeLabels,
    composeDatasets
} from "../helpers";

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

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

        let from = this.state.from.unix();
        let to = this.state.to.unix();

        /**
         * Dispatch actions
         */
        ['queries_with_results', 'queries_with_no_results']
            .forEach(queryType =>
                getLastQueriesAction(
                    {
                        eventType,
                        from,
                        to,
                        queryType
                    },
                    {
                        currentQuery,
                        client
                    }
                )
        )
    }

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

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

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


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

export default SearchEffectivenessComponent;