Introduction to the component tree

In the Klip Editor, when you add a component to a Klip, the structure of that component is outlined in the component tree on the left. You interact with the component tree to populate and align your data and to customize your Klip.  Each component you add to your Klip will display in the component tree in the same order in which it displays in your Klip.

The subcomponents available to you depend on the component type you select. 

The following example shows the component tree for a bar/line chart, but all component trees follow this basic structure.

Here is a high-level description of the elements that make up the component tree:

  • Klip: This is the first level of the component tree. Click it to open the Klip Properties panel. Click the 3-dot menu to paste components, clear all components from your Klip, or view source code for your Klip.
  • Component name: The component name displays on the second level of the component tree. Click on the component name to collapse or expand the list of subcomponents (for example, series, columns, or axes) that make up your component. Clicking also opens the Properties panel for the component and may also display the Indicators or Drill Down panels. From the 3-dot menu, you can rename your component, and cut, copy, paste over, or remove it. The 3-dot menu also displays additional options specific to each component type.
  • Subcomponents: Subcomponents display on the third level of the component tree. Depending on the subcomponent, clicking the subcomponent name will open the Data, Properties, or Indicators panels. Clicking the 3-dot menu enables you to rename the subcomponent and may provide additional options based on which subcomponent is selected.

Aggregating, sorting, and filtering

Components and subcomponents can be further modified using filtering, sorting, and aggregating.  Accessing these options from the subcomponent's 3-dot menu is a quick way to drill down to your essential data. 

Below is an example of the options (applied actions) available to you when you click the 3-dot menu for a subcomponent:

Whenever an applied action is in effect, the appropriate icon will display next to the related component or subcomponent. In the following example, the "filter" action has been applied to the "Series" called "Vancouver".

To view a list of the applied actions you have enabled, click the * next to a component or subcomponent name. From the menu that displays you can optionally edit or delete the applied action. (See the following example.)

Have more questions? Submit a request