apisearch-events-ui/src/widgets/lastQueries.js

Javascript User Interface to visualize all events data.

/**
 * @jsx h
 */

import { h, render } from 'preact';
import LastQueriesComponent from "../components/LastQueries/LastQueriesComponent";
import LastQueriesStore from "../stores/LastQueriesStore";

/**
 * Last Queries
 */
class LastQueries {
    constructor({
        target,
        boxWidth,
        boxHeight,
        chartOptions
    }) {
        this.target = target;
        this.component = <LastQueriesComponent
            target={target}
            boxWidth={boxWidth}
            boxHeight={boxHeight}
            chartOptions={{
                ...LastQueriesComponent.defaultProps.chartOptions,
                ...chartOptions
            }}
        />
    }

    initialize(client) {
        /**
         * Pass client to the component
         */
        this.component.attributes.client = client;

        /**
         * Create the store
         */
        this.store = new LastQueriesStore(
            client.query.create('')
        );

        /**
         * Register
         * a listener when a "render" event is emitted
         */
        this.store.on('render', () => this.render());
    }

    render() {
        let targetNode = document.querySelector(this.target);

        this.component.attributes.dirty = this.store.dirty;
        this.component.attributes.data = this.store.data;
        this.component.attributes.currentQuery = this.store.currentQuery;

        render(
            this.component,
            targetNode,
            targetNode.lastChild
        )
    }
}


/**
 * Last queries widget
 *
 * @param settings
 * @returns {LastQueries}
 */
export const lastQueries = settings => new LastQueries(settings);