Developing a New Visualization Type

Overview

Each visualization type follows a specific structure that allows it to plug-and-play in the Visualization Wizard and the Viewer in general.

Folder Structure

All visualizations are contained under src/components/menus/visualization-wizard/visualizations. Here, each visualization type has its own folder with the following files:

/viztype
  Descriptor.ts
  Config.vue
  Customize.vue
  Builder.ts
  Viztype.vue (Optional)

Where Viztype.vue is necessary when a custom Vue component is needed to render the visualization. For example, Chart and Video types have respective Chart.vue and Video.vue components, whereas Pointmarker and Lob do not.

In general, Map visualizations (Pointmarker, Lob, etc.) do not require a custom Vue component to render - they are handled in Map.vue.

Additional files may be included, depending on the visualization type, to handle extra display components, additional wizard steps, etc.

File Descriptions

• Descriptor.ts - contains "metadata" about the visualization type which is necessary to connect it to the wizard.
• Config.vue - Vue component for the configuration step in the wizard.
• Customize.vue - Vue component for the customization step in the wizard.
• Builder.ts - builds the VisualizationComponents needed to create a new OSHVisualization.
• Viztype.vue - Vue component to render the visualization. The name of the visualization type is used to name this component.

Integration

Once the visualization with all its required files is developed, it must be connected to the Visualization Wizard and the Viewer in order to work.

1. Follow Configuring Wizard Visualizations to include the new visualization type in the wizard.
2. Follow Rendering Visualizations to ensure the visualization is rendered in the viewer in the proper location.