tsviewer

tsviewer is a Vue 3 component library that provides an embeddable viewer component, backed by a Pinia store. This README will guide you through installation, setup, and usage.

📦 Installation

Install the package via npm or yarn:

npm install tsviewer
# or
yarn add tsviewer

🚀 Usage

1. Import the Component, Styles and Pinia store module

In your Vue 3 component or layout setup:

import { useViewerStore, tsviewer } from 'tsviewer'
import 'tsviewer/style'

2. Initialize the Viewer Store

Before rendering <tsviewer />, you must initialize it by calling fetchAndSetActiveViewer() from the store. This ensures the viewer has the correct context. Also we need to load the config for the viewer, and pass the param with following interface

interface ViewerConfig {
  timeseriesDiscoverApi: string;
  apiUrl: string;
  timeSeriesApi: string;
}
viewerStore.setViewerConfig(viewerConfig)

You need to provide the following string parameter:

• packageId: The unique identifier for the package to load.

const viewerStore = useViewerStore()

await viewerStore.fetchAndSetActiveViewer({
  packageId: packageId.value,
})

⚠️ This is an async function. You must await it before using the component.

3. Use the Component

Once the store is initialized, you can render the component:

<template>
  <tsviewer />
</template>

✅ Full Example (Vue 3 + Composition API)

<script setup>
import { ref, onMounted } from 'vue'
import { useViewerStore, TSViewer } from 'tsviewer'
import 'tsviewer/style'

const packageId = ref('your-package-id')
const isViewerReady = ref(false)

const viewerStore = useViewerStore()

onMounted(async () => {
  const viewerConfig = {
    timeseriesDiscoverApi: runtimeConfig.public.ts_streaming_host_websocket,
    apiUrl: runtimeConfig.public.api_host,
    timeSeriesApi: runtimeConfig.public.ts_streaming_host_http,
  }
  viewerStore.setViewerConfig(viewerConfig)
  await viewerStore.fetchAndSetActiveViewer({
    packageId: packageId.value,
  })
  isViewerReady.value = true
})
</script>

<template>
  <tsviewer v-if="isViewerReady"/>
</template>

⚙️ Requirements

• Vue 3
• Pinia (state management)

🛠️ Development & Contributing

Coming soon.

📄 License

MIT License.

Feel free to open issues or pull requests if you'd like to contribute or report bugs.