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

Javascript User Interface to visualize all events data.

/**
 * @jsx h
 */

import { h, render } from 'preact';
import SearchEffectivenessComponent from "../components/SearchEffectiveness/SearchEffectivenessComponent";
import SearchEffectivenessStore from "../stores/SearchEffectivenessStore";

/**
 * Found Versus NotFound
 */
class SearchEffectiveness {
    constructor({
        target,
        boxWidth,
        boxHeight,
        chartOptions
    }) {
        this.target = target;
        this.component = <SearchEffectivenessComponent
            target={target}
            boxWidth={boxWidth}
            boxHeight={boxHeight}
            chartOptions={{
                ...SearchEffectivenessComponent.defaultProps.chartOptions,
                ...chartOptions
            }}
        />
    }

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

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

        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 searchEffectiveness = settings => new SearchEffectiveness(settings);