Dimensions in Custom Executions

Example usage of useExecutionDataView() hook

When working with GoodData.UI, the most common way to render a chart on a page looks something like this:

import { ColumnChart } from "@gooddata/sdk-ui-charts";
import * as Md from "../md/full";

const metric = Md.AveragePriceOfProducts;
const viewBy = Md.ProductBrand;
const stackBy = Md.ProductCategory;
const filters = [];

<div style={{ height: 400 }}>
    <ColumnChart
        measures={[metric]}
        viewBy={viewBy}
        stackBy={stackBy}
        filters={filters}
    />
</div>

The <ColumnChart /> component knows you want to slice the measure by two attributes. Under the hood it builds a corresponding request that once executed returns results where each row is one category, and each number within the row is an average price of products by brand.

// B1,    B2,   B3,   B4,  B5 Brands
[ 123,   123,  123, null, 123] // Category C1
[ 456,   456, null,  456, 456] // Category C2
[ null, null,  789,  789, 789] // Category C3

If you only want the raw data without rendering the insight, there’s a handy useExecutionDataView() that can be imported from the @gooddata/sdk-ui package. It can be used like this:

import { useExecutionDataView } from "@gooddata/sdk-ui";
import * as Md from "../md/full";

const metric = Md.AveragePriceOfProducts;
const viewBy = Md.ProductBrand;
const stackBy = Md.ProductCategory;
const filters = [];

const { result, error, status } = useExecutionDataView({
    execution: {
        seriesBy: [metric],
        slicesBy: [viewBy, stackBy],
        filters
    }
});

console.log(result);

The problem is that since viewBy and stackBy are no longer dedicated properties to a React component but rather indifferent attributes in an array, the result looks like this:

// numbers for Categories and Brands are mixed together
[123, 123, 123, 123, 456, 456, 456, 456, 789, 789, 789]

We received all the values in one big array. The numbers are still correct and we could simply transpose the data on the frontend by applying some JavaScript logic, but that could be time consuming and lead to potential mistakes. It is best to leave it up to the platform by defining the execution context with appropriate dimensions information:

import { MeasureGroupIdentifier, newTwoDimensional } from "@gooddata/sdk-model";
import { useBackend } from "../contexts/Auth";
import { workspace } from "../constants";

const backend = useBackend();

const execution = backend
    .workspace(workspace)
    .execution()
    .forItems(
        [metric, viewBy, stackBy],
        filters // [] for no filters
    )
    .withDimensions(
        ...newTwoDimensional(
            [stackBy],
            [MeasureGroupIdentifier, viewBy]
        )
    );

const { result, error, status } = useExecutionDataView({ execution });

console.log(result);

This way we let the GoodData platform know how we want our data sliced, according to what dimensions. The data now arrive as intended in the very first example with the <ColumnChart /> component:

// B1,    B2,   B3,   B4,  B5 Brands
[ 123,   123,  123, null, 123] // Category C1
[ 456,   456, null,  456, 456] // Category C2
[ null, null,  789,  789, 789] // Category C3

For more information visit the sections Custom Executions and Specify the Result Structure of the GoodData.UI documentation.