OneCX GroupByCountDiagram

Overview

This document aims to showcase how to manage GroupByCountDiagram component.

This component displays the search result data as a diagram. Please, visit the storybook page for the GroupByCountDiagram component and interact with the examples to find out if the component is suitable for the desired use-case.

Customization

The GroupByCountDiagram component allows for content customization:

render different types of diagrams
enable switching between diagram types
set custom colors

To find out how to work with the GroupByCountDiagram component, please visit the storybook page and interact with the examples to find out the required features. For more in-depth information on the GroupByCountDiagram component interface, please read the further documentation.

Inputs

Table 1. GroupByCountDiagram inputs
Property name	Type	Default	Description
`sumKey`	`string`	`FEATURE_SEARCH.DIAGRAM.SUM`	Translation key for label below the chart.
`diagramType`	`DiagramType`	`DiagramType.PIE`	Type of the chart to be displayed as.
`supportedDiagramTypes`	`DiagramType[]`	`[]`	Add multiple Diagram types to be able to switch between them.
`data`	`unknown[]`	-	Data to be displayed as a diagram.
`columnType`	`ColumnType`	`ColumnType.STRING`	Defines the type of the column.
`columnField`	`string`	`''`	Defines which column data field to be displayed.
`column`	`DiagramColumn`	-	Defines which columns and its type to be displayed.
`fillMissingColors`	`boolean`	`true`	Determines if diagram should generate the colors for the data that does not have any set. Set to false will result in using the provided colors only if every data item has one. When at least one item does not have a color set, diagram will generate all colors.
`colors`	`Record<string, string>`	`{}`	Defines custom color for data items.

Outputs

Table 2. GroupByCountDiagram outputs
Property name	Type	Description
`dataSelected`	`EventEmitter<any>`	Emits data object upon clicking a diagram element.
`diagramTypeChanged`	`EventEmitter<DiagramType>`	Emits the `DiagramType` when one of the supported diagram types is selected to switch the type.
`componentStateChanged`	`EventEmitter<GroupByCountDiagramComponentState>`	Emits the selected `DiagramType` to ensure consistent component state.

Types

DiagramType

DiagramType enum

    export const enum DiagramType {
        PIE = 'PIE',
        VERTICAL_BAR = 'VERTICAL_BAR',
        HORIZONTAL_BAR = 'HORIZONTAL_BAR',
    }

ColumnType

ColumnType enum

    export const enum ColumnType {
        STRING = 'STRING',
        NUMBER = 'NUMBER',
        DATE = 'DATE',
        RELATIVE_DATE = 'RELATIVE_DATE',
        TRANSLATION_KEY = 'TRANSLATION_KEY',
    }

DiagramColumn

DiagramColumn type

    export type DiagramColumn = { columnType: ColumnType; id: string }

GroupByCountDiagramComponentState

GroupByCountDiagramComponentState interface

    export interface GroupByCountDiagramComponentState {
        activeDiagramType?: DiagramType
    }