Documentation

Full documentation can be found here

Demo

A live demo can be found here

Components

DataMessenger

Deliver the power of AutoQL to your users through Data Messenger, a state-of-the-art conversational interface you can easily build into your existing application.

Dashboard

Democratize the data in your application and deliver extended reporting and analytics capabilities to all your users with Dashboards you can build and deploy in a snap.

QueryInput

Query Input is an input box component that can be placed anywhere in the DOM. The QueryInput component works together with the QueryOutput component to automatically handle certain interactions with the data.

QueryOutput

Query Output is a data visualization widget that accepts the response from our API's query endpoint.

Quick Start

Using npm:

$ npm install react-autoql

Using yarn:

$ yarn add react-autoql

Import the component and the stylesheet

import { DataMessenger } from 'react-autoql';

import 'react-autoql/dist/autoql.esm.css'

Render the component and control the visibility

export default class App extends Component {
  state = {
    isVisible: false
  }

  onHandleClick = () => {
    this.setState({
      isVisible: !this.state.isVisible
    })
  }

  render = () => {
    return (
      <DataMessenger
        isVisible={this.state.isVisible}
        onHandleClick={this.onHandleClick}
        authentication={{
          apiKey: "your-api-key"
          domain: "https://yourdomain.com"
          token: "yourToken"
        }}
      />
    )
  }
}

Billing hooks

Authenticated applications can compose their own billing UI with the package's billing hooks:

import { useBillingCustomerKey, useBillingHistory, useBillingQuotaUpdate, useBillingUsage } from 'react-autoql'

const { billingCustomerKey } = useBillingCustomerKey({ authentication })
const { data: usage, state: usageState } = useBillingUsage({
  authentication,
  billingCustomerKey,
})
const { items: history } = useBillingHistory({ authentication, billingCustomerKey })
const { updateQuota, isSaving } = useBillingQuotaUpdate({
  authentication,
  billingCustomerKey,
})

The current-period usage response includes gross usage_to_date_micros plus free_allowance_micros, allowance_applied_to_date_micros, allowance_remaining_micros, and estimated_billable_usage_micros. These are integer micros. The estimated billable value uses the current allowance configuration; final invoicing uses the allowance snapshotted by Billing Service. Allowance is an invoice credit and remains separate from the gross-usage quota, remaining quota, and quota status.

The package root also includes billing period/currency formatting helpers and opt-in billing customer key storage helpers. The storage helpers are not used automatically by the hooks.