Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom series enhancement (outline) #11870

Open
100pah opened this issue Dec 18, 2019 · 1 comment
Open

Custom series enhancement (outline) #11870

100pah opened this issue Dec 18, 2019 · 1 comment
Labels
discussion-required Further discussion is required before we decide if this issue should be fixed.
Milestone

Comments

@100pah
Copy link
Member

100pah commented Dec 18, 2019

custom animation

Like the issue #5988 mentioned, support custom animation in custom series.
custom animation should not only be able to applied on shape but probably
also on transform and style(e.g., opacity, and x, y of text).

For example, if we want the init animation to be "the radius increases from 0
and the opacity increase from 0",
the proposed option can be as follows:

renderItem: function () {
    return {
        type: 'group',
        children: [{
            type: 'circle',
            shape: {
                cx: 100,
                cy: 100,
                // The final radius is 50
                r: 50
            },
            style: {
                // The final opacity is 1
                opacity: 1,
                fill: 'red'
            },
            // Set all initial props there. Notice only needed props
            // will appear here. Then the initial animation will be
            // performed on these props. The arguments of the initial
            // animation will follow the settings like `animationEasing`,
            // `animationDuration` on seriesModel as other series did.
            initProps: {
                // The intial radius is 0
                shape: {
                    r: 0
                },
                // The initial opacify is 0
                style: {
                    opacity: 0
                }
            }
        }, {
            type: 'rect',
            shape: {
                x: 50, y: 50, width: 50, height: 50
            },
            style: {
                fill: 'red'
            }
        }]
    };
}

But firstly we need to solve this issue:
If start an animation on an element by calling graphic.updateProp (el.animateTo),
the previous ongoing animation will be terminated firstly. That is probably not expected.
For example, when we dragging the "dataZoom" or some components, we want an element appears
with a "opacity fade-in" effect, and then the subsequent continuous user operations make
it animate to another position. The "fade-in animation" and the "move animation" would have
been independent, that is, the destination of the moving element can be changed at any time
without terminating the "fade-in" animation. But currently we seems unable to to do that.
If we change the destination of moving, the ongoing fade-in animation will be terminated.
Because "fade-in animation" and the "move animation" are both created by graphic.updateProp/initProp.

I am attampting to modify the logic of el.animateTo to resolve this issue:
Define a new class LiteAnimator dedicated for el.animateTo. Each time the el.animateTo
called, a new instance of LiteAnimator (say, liteAnimator) is created and the clips are
create directly add added to the liteAnimator, in which clips are organized by using linked
list. Each clip mapped to a unique "attr path" on the el. If a new calling of el.animateTo
occurs on the same el, liteAnimator is responsible to check the unfinished clips on the el
by the given "attr path" and terminate them. The unfinished clips that are not relevant to this
new calling of el.animateTo will continue to work. The different between LiteAnimator and
the original Animator is that the latter one create and dispose all of its clips all together
while the former one can dispose part of them on demand.

About the transition animation, the new graphic element should be able to linked to the previous one render at the last round of renderItem calling. The link can be based on the name on graphic element or something. For example: if the display of graphic elements controlled by legend, when legend deselect some items to check the details clearly, some of them disappeared, and the remaining need to re-layout, where the transition animation probably necessary to avoid uses to loose focus.

Support custom series on bmap

Support a better clip path

The current clipPointsByPoints is not corrent.
Now that the clip feature has be enhanced since 4.4.0, we can make this feature support custom series.
[Related test case]: /test/custom-feature.html

Get category value in api of renderItem

If a dimension in data is type ordinal (category), how to get the original category value
via api (a parameter of renderItem). Current we can only get the ordinal number via api.
But the original value is probably needed to be printed as labels.

Enable legend provider

See:
#11869

Custom culling

suppport set culling on element. That might be good for performance in some cases.

About "merge"

Should we make $mergeChildren public?

Bugs

Performance optimization (Text)

Try to remove this restriction in custom.js to enhance the performance in SVG map.

elOptionType === 'text'
    && hasOwn(elOptionShape, 'text') && elOptionStyle.text !== el.__customText

Performance optimization (Roam)

Whether to try updateTransform.
Or setting invisible in some opportunities.
Example: test/custom-hexbin.html
The performance of the roam is not good.

Variable length of entries

See #5987

Support custom series in parallel coordinate system

Not sure.

Enable renderItem in treemap and tree

See: #6172
Not sure.

@100pah 100pah added this to the TBD milestone Dec 18, 2019
@100pah 100pah added the discussion-required Further discussion is required before we decide if this issue should be fixed. label Dec 18, 2019
@pissang pissang modified the milestones: TBD, 5.0.0 Mar 19, 2020
@benlongo
Copy link
Contributor

benlongo commented Apr 6, 2022

I'm interested in custom series for the parallel coordinate system and would be willing to take a shot at implementing it - would it make sense to break it off into a separate issue first?

@Ovilia Ovilia modified the milestones: 5.x, TBD Sep 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion-required Further discussion is required before we decide if this issue should be fixed.
Projects
None yet
Development

No branches or pull requests

4 participants