vue-draxlr-embed

Embed Draxlr dashboards into Vue applications easily.

Installation

To install the package, run the following command:

npm i vue-draxlr-embed

Usage

<template>
  <DraxlrEmbed
      id="YOUR_EMBED_ID"
      apiKey="YOUR_EMBED_KEY"
      type="dashboard"
      :options="{
        filters: {
          filter1: { value: '1', hidden: true },
          filter2: { value: '2024-09-09', hidden: true },
        },
        configuration: { hideHeader: true },
      }"
      :iframeStyle="{ width: '100%', height: '600px' }"
      @onBeforeLoad="() => console.log('Loading...')"
      @onAfterLoad="() => console.log('Load complete')"
      @onError="(error) => console.error('Error:', error)"
    />
</template>

<script>
export default {
  name: 'your-component',
  components: { DraxlrEmbed },
}
</script>

Props

| Prop | Type | Description | |----------------------|------------------------------------|--------------------------------------------------------------------| | iframeStyle? | string | Custom styles to apply to the embed iframe | | type | "dashboard" / "dashboardGroup" | Type of embed dashboard | | id | string | The unique ID of the dashboard or dashboard group | | apiKey | string | The embed API key | | apiSecret | string | The embed API secret | | options? | Record<string, any> | Custom options like filters and configuration | | region | string | Specify the api region | | onBeforeLoad? | () => void | Function called just before the embed URLs called | | onAfterLoad? | () => void | Function called after the the embed URLs are called | | onError? | (error: Error) => void | Function called if an error occurs while fetching the embed URL |