AFM Components

Warning! The AFM components are legacy elements from the previous GoodData.UI version and will be deprecated. Charts added after GoodData.UI Version 5.1.0 do not support the AFM components.

The AFM components use the AFM property instead of specific properties such as measures or viewBy that are used in the visual components.

Charts

Parameters

Name	Required?	Type	Description
afm	true	AFM	A combination of attributes, measures, and filters
projectId	true	string	The workspace ID
resultSpec	false	ResultSpec	The structure of the result data
config	false	ChartConfig	The chart configuration object
sdk	false	SDK	A configuration object where you can define a custom domain and other API options

Structure

import '@gooddata/react-components/styles/css/main.css';
import { AfmComponents } from '@gooddata/react-components';

const { BarChart } = AfmComponents; // replace BarChart with ColumnChart, LineChart, or PieChart whenever needed

<BarChart
    afm={<afm>}
    projectId="<workspace-id>"
    resultSpec={<resultSpec>}
    config={<chart-config>}
    sdk={<sdk>}
/>

Example

import '@gooddata/react-components/styles/css/main.css';
import { AfmComponents } from '@gooddata/react-components';

const { BarChart } = AfmComponents;

<BarChart
    afm={{
        measures: [
            {
                localIdentifier: 'CustomMeasureID',
                definition: {
                    measure: {
                        item: {
                            identifier: '<measure-identifier>' // can be referenced from the exported catalog
                        }
                    }
                },
                alias: 'My Measure'
            }
        ],
        attributes: [
            {
                localIdentifier: 'a1',
                displayForm: {
                    identifier: '<attribute-display-form-identifier>'
                }
            }
        ]
    }}
    projectId="<workspace-id>"
    resultSpec={}
/>

Table

Parameters

Name	Required?	Type	Description
afm	true	AFM	A combination of attributes, measures, and filters
projectId	true	string	The workspace ID
resultSpec	false	ResultSpec	The structure of the result data
sdk	false	SDK	A configuration object where you can define a custom domain and other API options

Structure

import '@gooddata/react-components/styles/css/main.css';
import { AfmComponents } from '@gooddata/react-components';

const { Table } = AfmComponents;

<Table
    afm={<afm>}
    projectId="<workspace-id>"
    resultSpec={<resultSpec>}
    sdk={<sdk>}
/>

Example

import '@gooddata/react-components/styles/css/main.css';
import { AfmComponents } from '@gooddata/react-components';

const { Table } = AfmComponents;

<Table
    afm={{
        measures: [
            {
                localIdentifier: 'CustomMeasureID',
                definition: {
                    measure: {
                        item: {
                            identifier: '<measure-identifier>' // can be referenced from the exported catalog
                        }
                    }
                },
                alias: 'My Measure'
            }
        ],
        attributes: [
            {
                localIdentifier: 'a1',
                displayForm: {
                    identifier: '<attribute-display-form-identifier>'
                }
            }
        ]
    }}
    projectId="<workspace-id>"
    resultSpec={}
/>