Repeater

The Repeater component in the GoodData UI SDK, similar to sparklines, excels in displaying a singular visualization over several rows, with each row varying by a key attribute. This arrangement aids in neatly comparing data changes in a grid format, making it easier to spot trends quickly. Additionally, it allows for the inclusion of images and links, which enhances interactivity and narrative capabilities.

Repeater is currently in the beta stage.

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Repeater } from "@gooddata/sdk-ui-charts";

<Repeater
    attribute={<primaryAttribute>}
    columns={<attributesOrMeasures>}
    viewBy={<viewByAttribute>}
    config={<chart-config>}
    …
/>

Examples

The following code sample shows an arrangement for a typical repeater:

import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import { Repeater } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <Repeater
        attribute={Md.LocationState}
        columns={[Md.LocationState, Md.$FranchiseFees]}
        viewBy={Md.DateDatasets.OrderDate.OrderDateMonthYear.Default}
        config={{
            inlineVisualizations: {
                [measureLocalId(Md.$FranchiseFees)]: {
                    type: "line",
                },
            },
        }}
    />
</div>;

The following code sample shows an arrangement for a repeater with advanced configuration

import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import { Repeater } from "@gooddata/sdk-ui-charts";
import { attributeLocalId, measureLocalId } from "@gooddata/sdk-model";
import * as Md from "./md/full";

const style = { height: 300 };

<div style={style}>
    <Repeater
        attribute={Md.LocationState}
        columns={[Md.LocationHyperlink, Md.$FranchiseFees]}
        viewBy={Md.DateDatasets.OrderDate.OrderDateMonthYear.Default}
        config={{
            hyperLinks: {
                [attributeLocalId(Md.LocationHyperlink)]: {
                    // Configure custom text to show for the hyperlink label
                    staticElementsText: "See location details",
                },
            },
            inlineVisualizations: {
                [measureLocalId(Md.$FranchiseFees)]: {
                    // Configure inline visualization type
                    type: "line",
                },
            },
            // Configure image sizing
            cellImageSizing: "fill",
            // Configure text wrapping
            cellTextWrapping: "wrap",
            // Configure vertical alignment of the repeater cells
            cellVerticalAlign: "middle",
        }}
    />
</div>;

Properties

NameRequired?TypeDescription
attributetrueIAttribute[]The primary attribute used for unique rows
columnsfalseIAttributeOrMeasure[]An array of attributes or measures to be displayed as columns of the repeater.
viewByfalseIAttributeThe attribute by which inline visualizations are sliced.
filtersfalseIFilter[]An array of filter definitions
configfalseIChartConfigThe chart configuration object
backendfalseIAnalyticalBackendThe object with the configuration related to communication with the backend and access to analytical workspaces
workspacefalsestringThe workspace ID
localefalsestringThe localization of the chart. Defaults to en-US.
drillableItemsfalseIDrillableItem[]An array of attribute values to be drillable, only attributes in columns can be drilled now
onDrillfalseFunctionA callback when a drill is triggered on the component
ErrorComponentfalseComponentA component to be rendered if this component is in error state
LoadingComponentfalseComponentA component to be rendered if this component is in loading state