Headline

Headline shows a single number or compares two numbers.

Headlines have two sections: Measure (primary) and Measure (secondary). You can add one item to each section. If you add two items, the headline also displays the change in percent.

Structure

import { Headline } from '@gooddata/react-components';

<Headline
    projectId={<workspace-id>}
    primaryMeasure={<measure>}
    sdk={<sdk>}
/>

Example

Headline with a single measure (primary measure)

const measure = {
    measure: {
        localIdentifier: 'franchiseFeesIdentifier',
        definition: {
            measureDefinition: {
                item: {
                    identifier: franchiseFeesIdentifier
                }
            }
        }
    }
};

<Headline
    projectId={workspaceId}
    primaryMeasure={measure}
/>

Headline with two measures (primary and secondary measures)

const measure = {
    measure: {
        localIdentifier: 'franchiseFeesIdentifier',
        definition: {
            measureDefinition: {
                item: {
                    identifier: franchiseFeesIdentifier
                }
            }
        }
    }
};

const secondaryMeasure = {
    measure: {
        localIdentifier: 'franchiseFeesAdRoyaltyIdentifier',
        definition: {
            measureDefinition: {
                item: {
                    identifier: franchiseFeesAdRoyaltyIdentifier
                }
            }
        }
    }
};

<Headline
    projectId={workspaceId}
    primaryMeasure={measure}
    secondaryMeasure={secondaryMeasure}
/>

Properties

Name	Required?	Type	Description
projectId	true	string	The workspace ID
primaryMeasure	true	Measure	The definition of the primary measure
secondaryMeasure	false	Measure	The definition of the secondary measure
filters	false	Filter[]	An array of filter definitions
locale	false	string	The localization of the chart. Defaults to en-US. For other languages, see the full list of available localizations.
drillableItems	false	DrillableItem[]	An array of points and attribute values to be drillable.
sdk	false	SDK	A configuration object where you can define a custom domain and other API options
ErrorComponent	false	Component	A component to be rendered if this component is in error state. See ErrorComponent.
LoadingComponent	false	Component	A component to be rendered if this component is in loading state. See LoadingComponent.
onError	false	Function	A callback when component updates its error state
onLoadingChanged	false	Function	A callback when component updates its loading state