JChart/src/plugins/overlayer/Legend.js at main · wt911122/JChart · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import colorString from 'color-string';

function getDefaultLegendContent(container, disableselect) {
    const element = document.createElement('div');
    element.setAttribute('style', `
        z-index: 1;
        max-height: 35%;
        overflow-y: scroll;
        line-height: 1em;
        padding: 5px 20px;
    `);
    let focused;
    function createLegendElem(meta, legendMeta) {
        const elem = document.createElement('div');
        elem.setAttribute('style', `
            white-space: nowrap;
            cursor: pointer;
            user-select: none;
            font-size: .8em;
            line-height: 1em;
            display: inline-block;
            padding: 0 .5em;
        `);
        elem.setAttribute('active', meta.legend.disabled);
        const span = document.createElement('span');
        span.setAttribute('style', `
            display:inline-block;
            width:.5em;
            height:.5em;
            border-radius:100%;
            margin-right: .1em;
            vertical-align: middle;
            background: ${meta.color[meta.legend.disabled ? 'disable' : 'enable']}
        `);

        const name = document.createElement('span');
        name.innerText = meta.legend.name;

        elem.appendChild(span);
        elem.appendChild(name);

        elem.addEventListener('click', () => {
            if(disableselect) {
                meta.legend.disabled = !meta.legend.disabled;
                elem.setAttribute('active', meta.legend.disabled);
                span.style.background = meta.color[meta.legend.disabled ? 'disable' : 'enable'];
            } else {
                if (focused && focused.name === meta.legend.name) {
                    legendMeta.forEach(l => {
                        l.legend.disabled = false;
                        elem.setAttribute('active', false);
                        span.style.background = meta.color.enable;
                    });
                    focused = null;
                } else {
                    focused = meta.legend;
                    legendMeta.forEach(l => {
                        l.legend.disabled = (focused.name !== l.legend.name);
                        elem.setAttribute('active', l.legend.disabled);
                        span.style.background = meta.color[l.legend.disabled ? 'disable' : 'enable'];
                    });
                }
            }

        });

        return elem;
    }

    container.appendChild(element);
    return function (legendMeta) {
        element.innerHTML = '';
        console.log(legendMeta);
        legendMeta.forEach(meta => {
            const elem = createLegendElem(meta, legendMeta);
            element.appendChild(elem);
        });
        return element;
    };
}

class Legend {
    constructor(options = {}) {
        this.name = 'LegendPlugin';
        this.options = options;
    }

    apply(globalCtx) {
        globalCtx.hooks.beforeInitGlobalLayout.tap(this.name, (container, layoutContext) =>{
            this.legendContentCallback = this.options.callback || getDefaultLegendContent(container, this.options.disableselect);
            this.init(container, globalCtx, layoutContext);
        });
        // globalCtx.Overlayer.hooks.initOverlayer.tap(this.name, container => {
        //     this.init(container, globalCtx);
        // });
    }

    init(container, globalCtx, layoutContext) {
        globalCtx.effect(() => {
            const {
                legend,
            } = globalCtx.globalData.source;
            const getColor = globalCtx.theme.getColor;
            const legendMeta = legend.map((l, idx) => ({
                legend: l,
                color: {
                    enable: colorString.to.rgb(getColor(idx).color),
                    disable: colorString.to.rgb(getColor(idx).disabledColor),
                },
            }));
            const elem = this.legendContentCallback && this.legendContentCallback(legendMeta);
            layoutContext.legendWrapper = elem;
        });
    }
}

export default Legend;