Renderer

The Renderer is a companion React component for the widget-editor. It's only task is to render a widget for display.

Though the chart widgets could be potentially rendered directly with the Vega runtime and the map widgets with Leaflet, the Renderer is an out-of-the-box solution that doesn't require further code. In addition, it is compatible with the chart widgets' custom legend and tooltip format.

Table of content

• Installation
• Props

Installation

As the widget-editor, the Renderer needs an adapter. In this example, we'll use the Resource Watch one.

Please note it needs a React environment.

The first step is to install the dependencies:

yarn add @widget-editor/renderer @widget-editor/rw-adapter

The second, to render the widget:

import Renderer from '@widget-editor/renderer';
import RwAdapter from '@widget-editor/rw-adapter';

// The widgetConfig is an object that contains the widget's configuration. It is part of the widget-editor's output.
const widgetConfig = {};

const App = () => <Renderer adapter={RwAdapter} widgetConfig={widgetConfig} />;

export default App;

Props

Below is the list of props the Renderer component accepts:

Name	Mandatory	Default value	Description
adapter: Adapter	Yes	−	The adapter is an essential part of the Renderer.
widgetConfig: widgetConfig	Yes	−	The widgetConfig object of the widget.
thumbnail: boolean	No	false	For charts widgets only. It removes some elements of the visualization such as the tooltip and axes in order to generate a thumbnail.
interactionEnabled: boolean	No	true	For map widgets only. When set to false, the map can't be panned, dragged or zoomed.