FVS Expansion Component

This document applies to users who have installed the FineVis Data Visualization plugin to learn related functions of FineVis.

Version

Application Scenario

The expansion component, combined with the dynamic value function of the title component or rich text component, dynamically generates a series of indicator cards based on dataset fields, each presenting different data.

Function Description

The expansion component is a container that only allows you to drag title components currently, rich text components, image components, and a combination of these three components to the container.

After you drag components to the expansion component, the expansion component will be expanded according to Expansion Basis to generate multiple components quickly. (The expansion basis must be the field source of the dynamic value.)

Note:

This document introduces only the unique functions of the expansion component.

The expansion component does not support component interaction events.

For details about the component animation, see FVS Cross-page Component Animation.

For details about the component attribute, see FVS Component Style and Attribute.

Adding an Expansion Component

Click Container, and click Expansion Component or drag it to the canvas to add the expansion component to the canvas.

Expansion Template

A pre-set expansion template exists in the expansion component for carrying components/combinations.

An expansion component only has one expansion template which cannot be added. If you delete the expansion template, the corresponding expansion component will also be deleted.

1. The rules for dragging components/combinations to the expansion template are shown as follows:

You can only drag title components, rich text components, image components, and a combination of these three components to the expansion template.

Directly drag the component/combination in the component area or on the page to the expansion template, and release the mouse when the prompt "Release to enter the Expansion Template." is displayed.

Component/combination sizes do not change after you drag the component/combination to the expansion template.

When you release the component, if its position exceeds the left/top edge of the extension template, the dragged component will automatically align the left/top edge. If the position does not exceed the above edges, the dragged component position will be where it is released.

If the component exceeds the right/bottom edge of the extension template, the component display will be cut off.

You can also drag the component layer in the component layer list to the extension template. The component position is in the center of the extension template by default.

2. The method of moving components/combinations out of the expansion template is shown as follows:

Directly drag the component out of the expansion template, and release the mouse when the prompt "Release to move out of Expansion Template." is displayed. The position of the moved-out component is where the component is released.

In the component layer list or extension component list, directly change the component layer order by dragging the tab to move the component out of the extension component layer. The position of the moved-out component does not change.

In the expansion component list, click the  icon beside the corresponding component, and click Move Out. The moved-out component is displayed to the right of the extension component by default.

3. Expansion Template supports name and size setting. When you enable Lock Resizing, the size of an expansion template changes proportionally to that of the internal component.

Note:

When you drag the edge of the expansion template to resize the expansion template, you can only drag the right/bottom edge.

Expansion Component Content Setting

The expansion component allows you to set the layout, component gap, and expansion basis.

1. Layout: You can select Fixed Column Quantity or Fixed Row Quantity. The rows or columns are displayed according to the expansion template size. If the size is exceeded, you can scroll to view the components.

2. Component Gap: You can set the row spacing and column spacing respectively.

3. Expansion Basis:

Expansion Basis provides a source table based on the dynamic values within the current extension component as an option. If no dataset is available for the current extension component, a prompt "No data." will be displayed.

After you set the expansion basis, the number of expansion components is defined based on the number of data items in the dataset. The dynamic value that has the dataset is extracted in rows based on the extension sequence.

If the component has no dynamic values or the dynamic values are formulas, the content will not be changed during the expansion. If the component has dynamic values that are dataset fields but do not accord with the expansion basis, the component data will be extracted based on the extension sequence.

If the expansion basis has been set, the previously set expansion will not be affected even if the follow-up expansion component does not contain the basis until the expansion basis is reselected.

Note:

The expanded components have no entity but still inherit all the interaction capabilities of the components in the expansion template.

Creating a Template

1. In the FineReport designer, Choose File > New FineVis Visualization Dashboard.

2. You can customize the template name, canvas size, and template style by clicking Create Blank FVS Dashboard.

3. Click Create Dashboard.

Data Preparation

Create a database query ds1 and enter the SQL query statement: SELECT Product,sum(Sales_Volume) as "Sales_Volume" FROM Sales_Volume group by Product.

Explanation: Group the data by product, get the sum of the sales volume for each product, and return the name of each product and the sum of the sales volume for that product.

Designing the Indicator Card

Designing the Indicator Card Background

1. Choose Media > Image in the component area and add the image component to the canvas.

2. Save the following image to your local computer.

3. Select the image component, set Type to Custome Upload, and upload the saved image to set the image to be the indicator card background.

Setting the Dynamic Value of the Product Name

1. Choose Text > Title in the component area, add the title component to the canvas, and set the appropriate position and size according the the indicator card background.

2. Set Dynamic to Title Content and click Edit Dynamic Value to go to the Edit Dynamic Value page.

3. The source of the dynamic value is the dataset. Select ds1 and Product.

4. Click OK to finish the edit. You can customize the content style, such as font and color.

Setting the Dynamic Value of the Product Sales Volume

1. Copy and paste the title component set in section "Setting the Dynamic Value of the Product Name" and click Edit Dynamic Value to go to the Edit Dynamic Value page.

2. Modify the field to Sales_Volume.

3. Click Add Condition Style, click Condition Setting, set the value to be less than the string 4000, and click OK.

4. On the component style setting page, set the color to red. Click OK.

Combining Components

Drag-select the designed components and click Combine on the toolbar above the canvas to group them.

Setting the Indicator Card Expansion

1. Choose Container > Expansion Component in the component area to add the expansion component to the canvas.

2. Select the combination and drag it to the expansion template of the expansion component.

3. Select the expansion template and resize it according to the content.

4. Select the expansion component, set Layout to Fixed Column Quantity and 2, and Expansion Basis to ds1.

You can view 5 different indicator cards expanded, and the sales volume that is less than 4000 is displayed in red.

Effect Display

On PC

Save the template and click Preview. The following figure shows the effect.

On Mobile Terminals

For details about the preview method, see FVS Template Preview and Mounting. The following figure shows the effect.

You can download the template: FVS Expansion Indicator Card.fvs.