zz-chart/lib/components/header.js

Alauda Chart components by Alauda Frontend Team

import { StyleSheet, css } from 'aphrodite/no-important.js';
import { DIRECTION } from '../types/index.js';
import { generateName } from '../utils/index.js';
const styles = StyleSheet.create({
    top: {
        alignItems: 'center',
        flexDirection: 'column',
    },
    'top-left': {
        alignItems: 'flex-start',
        flexDirection: 'column',
    },
    'top-right': {
        flexDirection: 'row',
    },
});
export class Header {
    constructor(ctrl, position = DIRECTION.TOP_RIGHT) {
        this.ctrl = ctrl;
        this.position = position;
        this.render();
        // this.sizeObserver = resizeObserver(this.container, () => {
        //   this.ctrl.render();
        // });
    }
    get name() {
        return 'header';
    }
    render() {
        this.create();
    }
    create() {
        const headerName = generateName('header');
        const header = this.ctrl.chartContainer.querySelector(`.${headerName}`);
        if (!this.container) {
            this.container = header || document.createElement('div');
            if (header) {
                header.style.wordBreak = 'break-all;';
            }
            this.container.style.display = 'flex';
            this.container.style.justifyContent = 'flex-end';
            if (!header) {
                this.ctrl.chartContainer.append(this.container);
            }
        }
        this.container.className = `${generateName('header')} ${css(styles[this.position])}`;
    }
    destroy() {
        this.sizeObserver.disconnect();
    }
}
//# sourceMappingURL=header.js.map