Preswald Logopreswald

JavaScript Client Library

Build interactive web applications with the Preswald JavaScript client.

Table of Contents

Installation

Install the Preswald JavaScript client via npm:

npm install @preswald/client

Or include it directly in your HTML:

<script src="https://cdn.preswald.com/client/v1/preswald.min.js"></script>

Initialization

Initialize the Preswald client with your API key:

import Preswald from '@preswald/client';

const preswald = new Preswald({
  apiKey: 'your-api-key-here',
  baseUrl: 'https://api.preswald.com/v1' // Optional
});

Embedding Apps

Embed Preswald apps directly into your web pages:

// Embed an app by ID
preswald.embed({
  appId: 'app_123456',
  container: '#dashboard-container',
  width: '100%',
  height: '600px',
  theme: 'light'
});

// Embed with custom filters
preswald.embed({
  appId: 'app_123456',
  container: '#dashboard-container',
  filters: {
    date_range: ['2023-01-01', '2023-12-31'],
    region: 'US'
  }
});

Event Handling

Listen to events from embedded apps:

const app = preswald.embed({
  appId: 'app_123456',
  container: '#dashboard-container'
});

// Listen for data point clicks
app.on('dataPointClick', (event) => {
  console.log('Data point clicked:', event.data);
});

// Listen for filter changes
app.on('filterChange', (event) => {
  console.log('Filter changed:', event.filter, event.value);
});

// Listen for app load
app.on('load', () => {
  console.log('App loaded successfully');
});

Customization

Customize the appearance and behavior of embedded apps:

preswald.embed({
  appId: 'app_123456',
  container: '#dashboard-container',
  options: {
    showHeader: false,
    showFilters: true,
    allowExport: true,
    customCSS: `
      .preswald-chart {
        border-radius: 8px;
      }
    `
  }
});

Examples

React Integration

import React, { useEffect, useRef } from 'react';
import Preswald from '@preswald/client';

function Dashboard({ appId }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const preswald = new Preswald({
      apiKey: process.env.REACT_APP_PRESWALD_API_KEY
    });

    const app = preswald.embed({
      appId,
      container: containerRef.current,
      width: '100%',
      height: '500px'
    });

    return () => app.destroy();
  }, [appId]);

  return <div ref={containerRef} />;
}

Vue.js Integration

<template>
  <div ref="dashboardContainer"></div>
</template>

<script>
import Preswald from '@preswald/client';

export default {
  props: ['appId'],
  mounted() {
    const preswald = new Preswald({
      apiKey: process.env.VUE_APP_PRESWALD_API_KEY
    });

    this.app = preswald.embed({
      appId: this.appId,
      container: this.$refs.dashboardContainer,
      width: '100%',
      height: '500px'
    });
  },
  beforeDestroy() {
    if (this.app) {
      this.app.destroy();
    }
  }
};
</script>