platform-bi-web/src/components/chartDesigner/charts/indicatorView.jsx

/**
 * 指标板
 */
import React from 'react';
import EmptyContent from '../../common/emptyContent/index';
import './indicatorView.less';

class IndicatorView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        this.autoLayout();
        window.addEventListener('resize', this.addAutoLayoutEvent);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.addAutoLayoutEvent);
    }

    addAutoLayoutEvent = () => {
        window.clearTimeout(this.resizeKey);
        this.resizeKey = window.setTimeout(() => {
            this.autoLayout()
        }, 300);
    }

    autoLayout = () => {
        const { chartOption } = this.props;
        const { data } = chartOption;
        if(!data || data.length === 0) {
            return;
        }
        let extraRowCount = data[0].others.length;
        let  cardMinHeight = extraRowCount === 0 ? 100 : (100 + 10 + (extraRowCount-1) * 21);
        let container = this.containerRef;
        if(!container) return;
        let body = container.getElementsByClassName('indicator-body')[0];
        let cards = body.getElementsByClassName('indicator-box');
        let cardCount = cards.length;
        let bodyBox = body.getBoundingClientRect();
        
        let maxColNum = cardCount > 4 ? 4 : cardCount; // 列数
        let maxRowNum = Math.ceil(cardCount / maxColNum); // 行数
        let cardHeight = bodyBox.height / maxRowNum - 8;
        cardHeight = cardHeight < cardMinHeight ? cardMinHeight : cardHeight;
        let inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
        let cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
        while(cardWidth < 180 && maxColNum > 1) {
            maxColNum--;
            maxRowNum = Math.ceil(cardCount / maxColNum);
            cardHeight = bodyBox.height / maxRowNum - 8;
            cardHeight = cardHeight < cardMinHeight ? cardMinHeight : cardHeight;
            inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
            cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
        }
        while(cardWidth > 300 && maxColNum < cardCount) {
            maxColNum++;
            maxRowNum = Math.ceil(cardCount / maxColNum);
            cardHeight = bodyBox.height / maxRowNum - 8;
            cardHeight = cardHeight < cardMinHeight ? cardMinHeight : cardHeight;
            inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
            cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
        }
        body.style.overflow = inScroll ? 'auto' : 'visible';

        if(cardCount === 1) {
            cards[0].style.border = 'none';
        }
        let fun = function(els, width) {
            for(let j = 0; j < els.length; j++) {
                let wrap = els[j].getElementsByClassName('over-wrapper')[0];
                wrap.style.width = width + 'px';
            }
        };
        for(let i = 0; i < cards.length; i++) {
            cards[i].style.width = cardWidth + 'px';
            cards[i].style.height = cardHeight + 'px';
            let cells = cards[i].getElementsByClassName('cell');
            let w = cardWidth - 9 * 2;
            fun(cells, w);
        }
    }

    generateExtra = (data) => {
        return data.map((d, i) => (
            <div className='row indicator-extra' key={i}>
                <div className='cell c-extra'>
                    <div className='over-wrapper'>
                        <span className='til' title={d.name}>{d.name === null ? '空' : d.name}</span>
                        <span className='val' title={d.value}>{d.value === null ? '--' : d.value}</span>
                    </div>
                </div>
            </div>
        ));
    }

    render() {
        const { chartOption } = this.props;
        const { data, themeConfig } = chartOption;
        const { name: themeName } = themeConfig || {};
        if(!data || data.length === 0) {
            return <div className='indicator-container empty' ref={ node => this.containerRef = node }>
                <div className='indicator-body'>
                    <EmptyContent />
                </div>
            </div>
        }
        return <div className={`indicator-container ${themeName}`} ref={ node => this.containerRef = node }>
            <div className='indicator-body'>
                {
                    data.map((d, i) => (
                        <div className={`indicator-box`} key={i}>
                            {d.name !== undefined && <div className='row indicator-name'>
                                <div className='cell c-name'>
                                    <div className='over-wrapper' title={d.name}>{d.name === null ? '空' : d.name}</div>
                                </div>
                            </div>}
                            {d.name !== undefined && <div className='row indicator-key'>
                                <div className='cell c-key'>
                                    <div className='over-wrapper' title={d.key}>{d.key === null ? '空': d.key}</div>
                                </div>
                            </div>}
                            {d.name === undefined && <div className='row indicator-name'>
                                <div className='cell c-name'>
                                    <div className='over-wrapper' title={d.key}>{d.key === null ? '空' : d.key}</div>
                                </div>
                            </div>}
                            <div className='row indicator-value'>
                                <div className='cell c-value'>
                                    <div className='over-wrapper' title={d.value}>{d.value === null ? '--' : d.value}</div>
                                </div>
                            </div>
                            {d.others && d.others.length > 0 && this.generateExtra(d.others)}
                        </div>
                    ))
                }
            </div>
        </div>
    }
}

export default IndicatorView