Data filtering interaction requirements for DataV charts and implementation examples

I. Overview

DataV data visualization can analyze and display complex data products through visual application, which can meet the display needs of various businesses. Among the various data visualization display requirements, the display of components such as data tables, maps, and floppers appears frequently. Under the premise of these basic components, some differentiated and customized display requirements follow. Among them, customers are in the work order. The most frequent feedback and consultation is the screening, interaction and display of specific (or some) locations (provinces and cities), category-related data tables or bubble maps.

This paper mainly conducts a simple sorting and sample implementation of the screening and interaction requirements of datav large-screen data table, bubble map and other components, including single-field single-selection screening, single-field multi-selection screening, multi-field joint screening, field cascade and Query button configuration.

2. Sort out the interactive requirements related to data screening

1. Single field radio filter
a. Through the "interaction" module
b. Implemented through the "Blueprint Editor" module

2. Single field multi-select filter
a. The difference between the two implementation methods and customer usage
ⅰ. Implemented by "multi-select drop-down box"
ii. Implemented by "multi-check box"
ⅲ. Differences in customer usage
b. datav premium components support limited solutions
ⅰ. Alternatives to some scenarios - alternative implementations of multiple components with dynamic sql

3. Multi-field filtering
a. Temporary variable initialization settings
b. where condition of splicing dynamic sql
c. Configuration of the blueprint editor
d. Cascaded configuration

4. Query button
a. Cancel the callback ID trigger and change it to only the button trigger

3. Sample requirements realization plan

1. Sample implementation background
The example of the implementation plan uses the traffic (pv) number of visitors (uv) and the "rotation list" of an APP in different regions as display indicators and means
a. Data Schedule Overview
The source data table structure and data details displayed by the data table are as follows:
-- The table structure and comments are as follows
create table syf.datav_province_valuetest(
province varchar(50) comment 'province'
,city varchar(50) COMMENT 'city'
,pv INT comment 'Visits'
,uv int comment 'Number of unique visitors'
);
-- View the detailed data sample of the table
select * from `datav_province_value`
b. Data dimension table overview
-- Dimension code table metadata information
create table syf.datav_province(
province varchar(50) COMMENT 'province'
,city varchar(50) COMMENT 'city'
);
-- View the data sample of the dimension code table
select * from syf.`datav_province`
c. Configure the basic carousel

2. Implementation: Single Field Radio Filter
The single-field single-selection filtering function is relatively basic, and can also meet most data filtering interaction scenarios. datav provides two implementation methods, the first is through the "interaction" module of the "drop-down box", and the second is through " Dropdown Box" Blueprint Editor module implementation.
Before this, you need to configure the dimension options of the radio "drop-down box" as follows, and change the filter conditions and receiving parameters of the indicator "Carousel List", related operations and codes:

a. Implemented through interactive modules
Enable the interaction event of the "Interaction" module, and throw the content of the value field with the name of the province as a parameter when the "drop-down box content is selected"
b. Implemented through the blueprint editor module
Using the Blueprint Editor feature requires the required components to be "exported to the Blueprint Editor"
Perform the following three steps in the Blueprint Editor:
1. Configure the interaction rules, "When the drop-down box content is selected" -> request the data interface of "Carousel List"
2. In "Serial Data Processing", check the upstream component parameter field prompt
3. Pass parameter province through js code
function func (data, getCallBackValue, getLocalValue) {
return { province: data.title};
}

3. Implementation: Single-field multi-selection filtering
The single-field multi-selection filtering function is more difficult to implement than single-selection, because multiple-selection needs to cooperate with the SQL statement of the database to implement the in (:xxx) function, and the callback event of the component's "interaction" module cannot throw complex objects. , which requires the "Blueprint Editor" to cooperate with the js code to return an array format similar to {xxx:['value1','value2','value3']} to pass related parameters. datav provides two implementation methods , the first is through the "multi-select drop-down box" component, and the second is through the "multi-select box" component.
a. Implemented through a multi-select drop-down box
Do the following in the Canvas Editor:
1. Add a "multi-select drop-down box", export the component to the "Blueprint Editor", and drag it to the appropriate location
2. Configure the component data source and drop-down data
In the "Blueprint Editor" interface, you need to configure the following:
1. Configure the interactive connection between components: multi-select drop-down box "when the content of the drop-down box is selected" -> carousel list "request data interface"
2. Convert the parameter province_list to the form of {x:['value1','value2']} through js code in the "serial data processing" module
3. Right-click the connection between components and configure the log when data transfer between components is convenient for debugging
function func (data, getCallBackValue, getLocalValue) {
const result = data.map((item, index, data) => { return item.title })
return { province_list: result };
}
The debugging preview interface can view the parameter transmission and response during the entire interaction process
1. When we select Guangdong Province and Shandong Province in the "multi-select drop-down box"
2. You can see whether the parameters passed to the "Rotation List" are normal in the "Blueprint Log"
3. The parameters are normal, and the corresponding list display is as expected
b. Implemented through multiple checkboxes
The operation in the "Canvas Editor" is the same as the "Multi-select drop-down box"
1. Add a "checkbox", export the component to the "Blueprint Editor", and drag it to the appropriate location
2. Configure the component data source and drop-down data
Configure the following in the "Blueprint Editor"
1. "Multi-select box" is different from "multi-select drop-down box" in the data passed in the middle of component interaction
2. In the "Serial data processing" module, process the data according to the data sample of the upstream component "multi-select box", and throw the parameter province_list:['value1','value2'] for the SQL statement of the downstream carousel list component. Dynamic parameter transfer

The debugging preview interface can view the parameter transmission and response during the entire interaction process
1. When we select Guangdong and Beijing in the multi-select drop-down box
2. See if the parameters passed to the carousel list are normal in the blueprint log
3. The parameters are normal, and the corresponding list display is as expected
c. Differences in customer usage: multi-select drop-down box and multi-select box
1. The data format of upstream components in the blueprint editor is different, and the js processing code for parameter passing is different
2. The multi-select box will list all the values, which takes up a lot of space.
3. The multi-select box contains a select all button, which is more convenient to use in some scenarios
Premium DataV components support limited solutions
Restricted by the use of advanced components, "multi-select box" and "multi-select drop-down box" are not supported. Some customers seek alternative solutions for related functions in the work order. The alternative solutions for some scenarios are given below. This solution is only applicable to There are few categories, and it is convenient to list the scenes. The result picture is as follows:
1. The multi-select box is realized by the combination of the general title and the switch button, and the function configuration of the multi-select can be realized with the blueprint editor.
2. Displayed through a carousel list, corresponding to other charts such as histograms or map bubble charts
The relevant implementation steps are as follows:
1. Add related components, drag and drop them to the relevant positions of the canvas editor and export the switch and carousel list to the blueprint editor
2. Configure the carousel list database and dynamic sql to meet the needs of multiple selections. The dynamic sql contains N (3 in this example) parameters to identify different categories, and pass the parameters in the way of: province_xx, and It is realized by combining the case when statement and the judgment sentence pattern of 1=0 with or

3. Set the initialization parameters of the temporary variables to display the default data when the large screen is turned on, which must be consistent with the default states of the three "switch" components. Add global nodes, initialize temporary variables, and set temporary parameters for large screen initialization in the "Serial Data Processing" module. For the relevant content of temporary variables, please refer to the official website

4. This solution requires the use of the "Sequence Execution" component in the "Blueprint Editor". When the state of each "Switch" component changes, the value of the "Temporary Variable" is first synchronized to the "Global Node", and then according to each The latest "temporary variable" of a category initiates a filtering action on the "carousel list"

5. Set the "Temporary Variable" according to the latest state of the "Switch" component

6. After the synchronization of the "Temporary Variables" of the "Switch" component is completed, obtain the latest values ​​of "Temporary Variables" of all categories and initiate a request to the database through the "Carousel List" to achieve the effect of dynamic filtering

7. Make the same configuration for all categories of switches

4. Implementation: Multi-field filtering

The implementation method of multi-field filtering can learn from the method of dynamic splicing sql of multi-component combined display charts used because the advanced version of DataV does not support multi-select components, but the relevant details need to be refactored.
The interaction requirements and results to be realized are as follows:
• Three conditional filters work together, namely: whether it is a municipality directly under the central government, province or city filter
• Realize cascading of query conditions between provinces and cities
• Displayed through a carousel list, corresponding to other charts such as bar charts or map bubble charts
1. Add related components and export the components that need to configure interaction actions to the "Blueprint Editor", drag and drop to the specified location, and change the default display settings of the "General Title", "Drop-down Box", and "Switch" components
2. Set the initial shutdown of "Switch" in "When all components are initialized" of "Global Node", the initial value variable is_zhixia=0 (whether it is a municipality directly under the central government), and the "multiple selection drop-down box" of "province" and "city" dimensions Array of values ​​and array length.
3. According to the temporary variables generated by the three screening components, the dynamic sql for configuring the carousel list is as follows. Since the js array cannot be directly configured in the sql to determine whether it is empty, two variables of xxx_len are introduced to check whether the array is empty. When the array is not empty, the corresponding filtering is performed. When the array is empty, the identity 1=1 is thrown, and the dynamic filter condition of multiple fields is connected with the and condition.

4. Taking the "multi-select drop-down box" of "Province" as an example, the configuration of "City" and "Municipality directly under the Central Government" is the same as that of "Province"
a. Use the "Sequence Execution" component to interact "when the drop-down box content is selected"
b. Change the temporary variable according to the value of the "multi-select drop-down box"
c. According to the latest values ​​of all temporary variables, initiate a request for the carousel list to filter the data

5. The cascade of filtering can be passed to the sql statement of the database query in the drop-down box component of "city" when a temporary variable is thrown from the "multi-select drop-down box" component of "province".

5. Implementation: Implementation of the query button
The "query button" is actually similar to a "carousel list" trigger for querying SQL with parameters. On the basis of multi-field filtering, only the following steps are required to achieve this function. Compared with the implementation of multi-field filtering, the implementation of adding buttons can significantly reduce the number of queries, reduce the pressure on the database, and filter only when all field conditions are configured, instead of interacting with the drop-down box every time Every time a database check operation is performed. The effect after configuration is as follows:
• Add a button component and export it to the blueprint editor, drag it to the corresponding canvas position, and set the text content to "filter" in the global style
• "When the button is clicked", request the data interface of the "Carousel List", and transfer the temporary variables in the current state in the automatic pop-up serial data processing. At the same time, cancel the trigger request of the previous three drop-down box components to the "Carousel List" request data interface, and you can use the "Query Button" to control the timing of filtering.