Panel Visualizations

Overview

panel visualizations are rendered in the "Visualizations" tab of the viewer. They are automatically detected as panel visualizations in VisualizationSidebar.vue and are then passed to VisualizationWrapper.vue to be rendered as individual panels.

Add Visualization

1. In the template, add the visualization's Vue component (e.g. Chart.vue) and pass any required props.
2. Add conditional logic to render the component for a specific visualization type

v-if="viz.type === 'chart'"

Remove Visualization

To remove a visualization type, simply remove the associated Vue component from the template.

VisualizationWrapper.vue

Below is a basic configuration for VisualizationWrapper.vue:

<script setup lang="ts">
import { OSHVisualization } from '@/lib/OSHConnectDataStructs';
import Chart from './menus/visualization-wizard/visualizations/chart/Chart.vue';
import Video from './menus/visualization-wizard/visualizations/video/Video.vue';
import GeoPTZ from './menus/visualization-wizard/visualizations/geoptz/GeoPTZ.vue';
import Text from './menus/visualization-wizard/visualizations/text/Text.vue';
import FlightPath from './menus/visualization-wizard/visualizations/flightpath/FlightPath.vue';
import { IChartViewProperties, ICurveLayerProperties, IVideoLayerProperties, IVideoViewProperties } from '@/lib/VisualizationHelpers';

const { viz, customClass = '' } = defineProps<{
  viz: OSHVisualization,
  customClass?: string,
}>()

</script>

<template>
  <div :class="[customClass]">
    <slot name="before" />
      <Chart :visualization="viz" :datasource="viz.visualizationComponents.dataSource"
        :curve-layer="(viz.visualizationComponents.dataLayer as ICurveLayerProperties)"
        :chart-view="(viz.visualizationComponents.dataView as IChartViewProperties)" v-if="viz.type === 'chart'"></Chart>
      <Video :visualization="viz" :datasource="viz.visualizationComponents.dataSource"
        :video-layer="(viz.visualizationComponents.dataLayer as IVideoLayerProperties)"
        :video-view="(viz.visualizationComponents.dataView as IVideoViewProperties)"
        :controlstream="(viz.controlstream ? viz.controlstream[0] : undefined)" v-if="viz.type === 'video'"></Video>
      <Text :visualization="viz" :datasource="viz.visualizationComponents.dataSource[0]"
        v-if="viz.type === 'text'"></Text>
      <slot name="after" />
      <slot name="overlay" />
    </div>
</template>