DataV tips teach you how to avoid pits

Now more and more projects use datav, but there are a lot of pits in datav, and you may not know some hidden features if you are new to datav. If you understand these features, you can avoid many pitfalls and save development time.

(PS) Grouping: A function of datav when grouping is to group multiple components or groups into groups. Equivalent to modularization, to achieve the effect of unified control and management. icon is the icon of a folder;
Blueprints: Similar to node programming.

1. Hidden feature 1: The newly added components can be grouped in the grouped chart position area without disrupting the grouped chart size and chart position
I think many students will encounter very bad things when they first come into contact with datav. That is, when you are editing a large screen and you have basically completed a module, a new requirement suddenly comes and you need to add components to it. However, no matter how you select and operate the layers and component layers on the left, the newly added components will not be added directly to your group, but directly on the outermost (top) layer of the layer. Well, at this time you think it doesn't matter, just drag and drop the newly added components into the group.

(dimensions and locations vary)

But at this time, something bad happened. The position and size of the group and the components in the group have all changed. This is not what you want. You are forced to modify it all over again. Do you feel bad? In fact, you can avoid this from happening just by remembering a little. That is, before you drag and drop a new component into the group, first move the new component to the area where the group is located and then drag it into the group, and the position and size of the group and the components in the group will not change.

2. Hidden feature 2: deletion cannot be rolled back, and rollback is not easy to use

Horses stumble, people stumble. People always make mistakes. When you accidentally make a mistake, you subconsciously press CTRL+Z, but fortunately, it goes back. You mistakenly think that datav has a fallback function. actually not. You'll find out when you hit CTRL+Z again. Components only change in these two steps, and only in position and size.
It's just little things. If you have experienced 4 requirements changes in one day, the components you deleted will not come back. Then you will definitely cry in pain or even anger and spit out fragrance, and you will have the heart to die. Therefore, deleting components is a high-risk operation and requires caution, especially when deleting large modules.

3. Hidden feature 3: The snapshot version only records the released version

When you see the above paragraph, you will question: Does datav have no version management? Yes, but not perfect. datav has a snapshot management feature that will record the nodes you publish, you can choose to overwrite the new node, or you can choose to be the latest node. You can choose any snapshot version to be the current release version. However, what you don't know is that snapshot versions are just released versions. And your edited status will always only record your latest status. If you delete it, it's gone. You can't cut to a certain historical version for editing like git. This means that you cannot go to a snapshot version for editing.

4. Hidden feature 4: Right-click on the blank space of the blueprint, and you can choose to cancel all print logs
In blueprint editing, it is inevitable to debug and preview an interaction and output the event log. And you may forget to cancel after debugging, and you always forget to delete the debugging statements console.log and System.out.print when writing code with you. Looking at such dense lines in this dense blueprint makes you dizzy. You have long forgotten which line you used the log output on, and there are no records or prompts on the interface. Don't panic, at this time, you can choose to cancel the printing log of all blueprint nodes by right-clicking on the blank space. No way? No way? You don't really look for it line by line, do you?

5. Hidden feature 5: Before executing the blueprint, the data filter must be executed first, if you have set the data filter

Sometimes, there are only front-end and data group students in the datav project you do. Yes, there is no back-end and no API interface. Don't be surprised, the data source of datav can actually be a static csv file or a database. It is not surprising that there is no backend and API. But there will always be gains and losses, saving manpower, and the data formatting work will inevitably be on the front end. A SQL sometimes doesn't directly give you the data format you can use, and it doesn't exactly match the format required by the component. At this time, you need to write data filters to perform data transformation. In complex interactions, you need to get an effect after interacting with a component, but import a different data format to another component. At this time, you will find that the data sources you interact with to get data are formatted by data filters. At this point, it's time for you to think about a new implementation.

6. Hidden feature six: data filter can write html

This does not seem to be mentioned in the datav documentation. Maybe many people mistakenly think that the filter is just a callback method for processing the data after requesting the data. In fact, you can still write html here, which means you can write styles. What are the benefits? For example, when the product manager asks you to implement a carousel list, a row or a column of the list should display different colors according to the value of a variable, but this component does not provide you with such an attribute set up. How to do it? Suppose the data returned by your SQL or interface is like this: [{ name: 'indicator name 1', value: 0}, {name: 'indicator name 2', value: 1 }], you want to implement when the value is 0 when the row turns red. Then your filter can be written like this:

7. Hidden feature 7: Import data interface action in blueprint does not receive html

After reading the sixth point, you must be overjoyed, thinking that datav is actually very useful. Then this next point will knock you back to where you were, you're still too young. If the product manager allows you to implement this list, it also requires you to link with another component when you click on a row. In the blueprint, the carousel list component does have this event method for clicking the row, as shown in the figure:

Also does get the data in the click event

OK, connect another component node to import interface data and preview the test. Okay, you are stunned at this time, haven't you already sent the data? Why isn't showing anything? Yes, the blueprint node import interface data action does not accept html. At this time, you have to complain: "What is it, it is nothing". After going around for a long time and returning to the origin, it is equivalent to not realizing it. To be honest, datav has a lot of limitations, so it can stimulate your divergent thinking and stimulate your potential. It's okay, there are always more ways than difficulties (official complaints: I almost believed it). In fact, you can add a key to the object when dealing with data filters, and assign the original data of this row to it.
Then, the filter can be written like this:

Then, the click event in the blueprint gets the data data.dataSource through serial data processing. ok, problem solved.

At this point, I have to say that this full text makes you feel that there are twists and turns when you read it, which is comparable to the ups and downs of the novel. So, I am asking here, what if it is not possible to implement a simple import data interface in the end, and also requires special style processing? How to do? How to do? Important things to ask three times.

To be honest, I don't know what to do. The only thing I can think of is the combination of blueprints and hooks. With blueprints, it doesn't mean that hooks can be completely abandoned. However, the "row" in the carousel list is not a sub-component. It has no component id, and there is no way to stage.get() in the hook to get the Dom node. Trouble is coming. Well, my saliva is dry, let's not talk.