@lukeelmers I've added some code below of my component and where the visualisation is initialized. In my component self_changing_component.js, my plot uses a data variable which is currently set to some hard coded data. In this class, how can I extract the response from the courier call, and use the data from it instead? Are there examples/documentation of doing so I can follow?
My Code:
self_changing_vis.js
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import { SelfChangingEditor } from './self_changing_editor';
import { SelfChangingComponent } from './self_changing_components';
import { Schemas } from 'ui/vis/editors/default/schemas';
import optionsTemplate from './options_template.html';
function SelfChangingVisType(Private) {
const VisFactory = Private(VisFactoryProvider);
return VisFactory.createReactVisualization({
name: 'self_changing_vis',
title: 'Skyplot',
icon: 'visControls',
description: 'This visualization is able to change its own settings, that you could also set in the editor.',
visConfig: {
component: SelfChangingComponent,
defaults: {
counter: 0,
},
},
editor: 'default',
editorConfig: {
optionsTemplate: optionsTemplate,
schemas: new Schemas([
{
group: 'metrics',
name: 'metric',
title: 'Metric',
min: 1,
aggFilter: ['!derivative', '!geo_centroid'],
defaults: [
{ type: 'count', schema: 'metric' }
]
}, {
group: 'buckets',
name: 'segment',
title: 'Bucket Split',
min: 0,
max: 1,
aggFilter: ['!geohash_grid', '!filter']
}
]),
},
requestHandler: 'courier',
});
}
VisTypesRegistryProvider.register(SelfChangingVisType);
self_changing_component
import React from 'react';
import Plot from 'react-plotly.js';
import {
EuiPage,
EuiPageHeader,
EuiTitle,
EuiPageBody,
EuiPageContent,
EuiPageContentHeader,
EuiPageContentBody,
EuiText
} from '@elastic/eui';
const skyplotData = [
{
type: 'scatterpolar',
mode: 'lines+markers',
name: 'Sat 1',
r: [10, 25, 40, 50], //Elevation
theta: [6, 20, 35, 40], //Azimuth
line: {
color: '#4286f4'
},
marker: {
color: '#f44141',
symbol: 'circle',
size: 8
},
},
{
type: 'scatterpolar',
mode: 'lines+markers',
name: 'Sat 2',
r: [20, 30, 40, 50],
theta: [135, 140, 145, 150],
line: {
color: '#ff66ab'
},
marker: {
color: '#8090c7',
symbol: 'circle',
size: 8
},
},
{
type: 'scatterpolar',
mode: 'lines+markers',
name: 'Sat 3',
r: [50, 70, 85, 90],
theta: [220, 230, 240, 250],
line: {
color: '#ff66ab'
},
marker: {
color: '#8090c7',
symbol: 'circle',
size: 8
},
},
];
const plotLayout = {
showlegend: true,
width: 800, height: 800,
polar: {
radialaxis: {
range: [90, 0], //Sets x axis range. Default is 0 to largest value in the dataset
tickmode: 'array',
tickvals: [90, 75, 60, 45, 30, 15, 0], //Sets how many ticks to show on the plot
tickfont: {
size: 8
}
},
angularaxis: {
tickfont: {
size: 8
},
direction: 'clockwise'
}
}
};
const plotConfig = { displayModeBar: false }; //Hides options to zoom, screenshot etc.
export class SelfChangingComponent extends React.Component {
constructor(props) {
super(props);
this.state = { skyplotData, plotLayout, plotConfig }; //Set the skyplot data in the component state
}
onClick = () => {
this.props.vis.params.counter++;
this.props.vis.updateState();
}
render() {
return (
<EuiPage>
<EuiPageBody>
<EuiPageContent>
<EuiPageContentHeader>
<EuiTitle>
<h2>Skyplot</h2>
</EuiTitle>
</EuiPageContentHeader>
<EuiPageContentBody>
<Plot
data={this.state.skyplotData}
layout={this.state.plotLayout}
config={this.state.plotConfig}
/>
</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
);
}
componentDidMount() {
this.props.renderComplete();
}
componentDidUpdate() {
this.props.renderComplete();
}
}
