RT-Plot

This is a plotting module that uses Plotly.js and is made for quickly creating plots in various Rota Teknik projects. Currently uses Angular 12.

Table of contents

• Using in projects
• Inputs and outputs
• Public functions
• Interfaces

Using in projects

The module needs to be added to the Angular module that will be used in.

import { PlotModule } from '@rotateknik/plot';

@NgModule({
  // ...
  imports: [
    // ...
    PlotModule
    // ...
  ],
})
// ...

Then the module can be added to the DOM using the following tag;

<rt-plot></rt-plot>

Inputs and outputs

Plot ID

Every plot requires a unique string ID. This can be given using the following input;

<rt-plot [plotId]="someString"></rt-plot>

Plot Data

Every plot also requires data. Data can be given using the following input;

<rt-plot [data]="someData"></rt-plot>

Data input accepts an array written in the following format;

// Data interfaces can be imported like this
import { PlotData, TraceData } from '@rotateknik/plot';

// The data must be formatted like this.
const someTrace: TraceData = {
  x: [5, 7, 8],
  y: [15, 17, 19]
};

// This is the variable that should be given to the data input.
// Every member of the data array creates it's own axis.
const someData: PlotData[] = [{
  label: 'Trace', // This will be shown in the legend
  data: someTrace,
  color: '#000000' // Optional. Sets the color of the trace
}];

Dark mode

Optional. A boolean can be given in the following way to toggle dark mode.

<rt-plot [isDarkMode]="isDarkMode"></rt-plot>

Plot deletion

This event fires when the public removePlot() function gets executed. This event could be used for removing the plot from the component it is being used. The event returns the plot ID it was given.

<rt-plot (deletePlot)="handlePlotDeletion($event)"></rt-plot>

Plot interval selection

This event fires when the plot is in annotation mode. To toggle annotation mode, the public function toggleAnnotationMode() should be used. The event returns the min and max values in the selected area.

<rt-plot (chosenInterval)="handleIntervalSelection($event)"></rt-plot>
<script>
function handleIntervalSelection({ min: number, max: number }) {
  // ...
}
</script>

Plot annotation click

This event fires when there is a click on the plot. This event will be used when adding notes to the plot. This event may change name and outputs in the future. It currently returns the x and y coordinates of the click event.

<rt-plot (annotationClick)="handleAnnotationClick($event)"></rt-plot>
<script>
  function handleAnnotationClick({ x: number, y: number }) {
    // ...
  }
</script>

Public functions

Adding new data to an existing trace

The following function can be used for adding new data to an existing trace. It takes a trace index and a data object.

<rt-plot #plot [plotId]="plotId" [data]="plotData"></rt-plot>
<script>
  const data: TraceData = {
    x: [5, 6, 7],
    y: [10, 12, 11]
  }
  plot.addToTrace(0, data);
</script>

Adding a new trace

The following function can be used for adding a new trace to an axis. It takes an axis index, a label to identify, a data object and an optional color parameter.

<rt-plot #plot [plotId]="plotId" [data]="plotData"></rt-plot>
<script>
  const data: TraceData = {
    x: [5, 6, 7],
    y: [10, 12, 11]
  }
  plot.addNewTrace(0, 'New Trace', data, '#000000');
</script>

Adding a new axis

The following function can be used for adding a new trace to an axis.

<rt-plot #plot [plotId]="plotId" [data]="plotData"></rt-plot>
<script>
  plot.addNewAxis();
</script>

Resetting plot zoom

By default dragging the mouse while clicking on the plot zooms to the selected area. The following function can be used for resetting the zoom. One alternative is double clicking on the plot.

<rt-plot #plot [plotId]="plotId" [data]="plotData"></rt-plot>
<script>
  plot.resetPlotZoom();
</script>

Toggling annotation mode

By default the plot is on the zoom mode. By executing the following function the plot will go from zoom mode to annotation mode or visa verca. In annotation mode, the dragging creates a box on the selected area then returns the selected interval using an event. It takes a number as a parameter. 0 for annotation mode, anything else for zoom mode.

<rt-plot #plot [plotId]="plotId" [data]="plotData"></rt-plot>
<script>
  plot.toggleAnnotationMode(0);
</script>

Removing the plot

While this function doesn't removes the plot from the DOM, it fires an event for the parent to handle the deletion.

<rt-plot #plot [plotId]="plotId" [data]="plotData"></rt-plot>
<script>
  plot.removePlot();
</script>

Interfaces

Plot data

interface PlotData {
  label: string,
  data: TraceData,
  color?: string
}

Trace data

interface TraceData {
  x: number[],
  y: number[]
}

Version Update

Go to plot/projects/plot/package.json and change the version number. Then run the following script from that package.json file.

"build:dist": "ng build plot --prod"

Then go to plot/dist/plot and open terminal in folder. Run the following script

npm publish