DatAInsights Composer ComponentsPremium
This article describes the data visualization components, which the DatAInsights Composer renders, and how to configure them.
Visualization Components
A prompt produces a single visualization, which is one of the following KendoReact components:
The AI chooses the component and its configuration, based on the prompt and the metadata of the dataset. You can influence the result in the following ways:
- Fix specific settings through the
configSettingsproperty of theDatAInsightsComposer. - In controlled mode, change the generated configurations in the
onConfigChangeevent before you pass them back throughconfigs. The event is not cancelable, and its return value is ignored, so the component does not apply changes in uncontrolled mode. The event provides the configurations and thedatasetIdof each one, not the dataset descriptors. - Process the data of the visualization yourself in the
onDataProcessevent, for example, on the server.
Component Configuration Settings
To fix specific settings of the generated visualizations, use the configSettings property. A value that you set replaces the value that the AI generates. It is stored in the configuration, in the History, and in the JSON that the onConfirm event provides. The settings that you do not set stay AI-driven. The following sections list the available settings and the default behavior when a setting is not set.
The
configSettingsproperty does not change configurations that the app passes to the component through theconfigs,defaultConfigs, orhistoryproperties.
The following example demonstrates how to fix the Grid and Chart settings and shows the resulting configSettings object. Change a setting, and then generate or refine a component to see that the fixed value overrides what the AI returns.
Chart
A generated Chart can display one of the following series types:
- Area
- Bar
- Bubble
- Column
- Donut
- Line
- Pie
- Scatter
- ScatterLine
- Waterfall
The AI picks the series type from the prompt, for example, "show revenue by region as a pie chart". On a refinement, the type can change either because the user asks for a different chart or because the AI decides that another chart fits the data better.
The Chart settings, which the DatAInsightsComposerChartSettings interface describes, control the visibility of the legend and the tooltip.
The following example demonstrates how to fix the visibility of the Chart legend and tooltip.
<DatAInsightsComposer
datasets={datasets}
aiClient={aiClient}
configSettings={{
chart: {
legend: { visible: true },
tooltip: { visible: false }
}
}}
/>The following example demonstrates the tooltip of a generated Chart—the default one, a shared and formatted one, a formatted Pie slice, and a tooltip that is turned off. Hover the Chart to see the tooltip, or refine the Chart with a prompt.
Grid
The Grid displays the configured fields as columns and supports interactive sorting, filtering, grouping, and paging. It can show aggregate totals, while its optional toolbar adds CSV export.
The DatAInsightsComposerGridSettings interface lists the Grid options you can override.
The filterMode setting accepts 'None', 'Row', or 'Menu', as the DatAInsightsFilterMode type describes.
The following example demonstrates how to fix the Grid settings.
<DatAInsightsComposer
datasets={datasets}
aiClient={aiClient}
configSettings={{
grid: {
filterMode: 'Menu',
groupable: false,
reorderable: false,
resizable: false,
sortable: true,
showToolBar: false
}
}}
/>The following example demonstrates how a Grid with many columns behaves. By default, the Grid scrolls sideways at a readable column width. When the configuration sets fitColumns to true, the Grid fits all columns into its width. A width that a column sets is kept.
Gauge
A Gauge displays a single value instead of a row for each data item, for example, the total revenue against a target. The Gauge can be one of the following types:
- Arc
- Circular
- Linear
- Radial
The AI picks the Gauge type from the prompt, for example, "show the total revenue as a circular gauge". On a refinement, the type can change either because the user asks for a different gauge or because the AI decides that another gauge fits the data better.
The Gauge reduces a numeric field to one value using Sum, Average, Count, Min, or Max. Set the scale limits or use a targetField for a data-driven maximum; filters, color ranges, labels, and scale units further customize the display.
Gauge options are not available through configSettings but you can update them through onConfigChange. A Gauge applies its own filter and aggregation, including to rows returned by onDataProcess.
The following example compares the Gauge types and demonstrates common options. Refine a Gauge to see how a prompt can change it.