chart.san

<template>
    <div class="visual-dl-charts">
        <div class="visual-dl-chart-box" style="{{computedStyle}}">
        </div>
        <div class="visual-dl-chart-actions">
            <ui-dropdown-menu
                hintText="download type"
                items="{{runsItems}}"
                value="{=downloadType=}"
            />
            <san-button on-click="handleDownLoad">
                <san-icon>file_download</san-icon>
            </san-button>
        </div>
    </div>
</template>
<script>
import Button from 'san-mui/Button';
import Icon from 'san-mui/Icon';
import DropDownMenu from '../../../common/ui/DropDownMenu';
import {generateJsonAndDownload} from '../../../common/util/downLoadFile';
import echarts from 'echarts';
import axios from 'axios';
import {getPluginScalarsScalars} from '../../../service';
export default {
    components: {
        'ui-dropdown-menu': DropDownMenu,
        'san-button': Button,
        'san-icon': Icon
    },
    computed: {
        computedStyle() {
            let width = this.data.get('width');
            let height = this.data.get('height');
            return 'height:' + height + 'px;'
                + 'width:' + width + 'px;';
        }
    },
    initData() {
        return {
            width: 400,
            height: 300,
            // line config
            options: {},
            data: [
                {
                    name: 'train',
                    value: []
                }
            ],
            // choose run type for download file
            downloadType: ''
        };
    },
    inited() {
        this.watch('runsItems', val => {
            this.initDownloadType();
        });
    },

    attached() {
        let tagInfo = this.data.get('tagInfo');
        this.initCharts(tagInfo);
    },

    initDownloadType() {
        let runsItems = this.data.get('runsItems') || [];
        if (runsItems.length === 0) {
            return;
        }
        this.data.set('downloadType', runsItems.find((item, index) => index === 0).value);
    },

    initCharts(tagInfo) {
        this.createChart();
        this.setChartsOptions(tagInfo);
        this.setChartsData(tagInfo);
    },

    createChart() {
        let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
        this.myChart = echarts.init(el);
    },
    setChartsOptions({tagList, tag}) {
        let seriesOption = tagList.map(item => {
            return {
                name: item.run,
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: [],
                smooth: true
            };
        });
        let legendOptions = tagList.map(item => item.run);
        let option = {
            title: {
                text: tag,
                textStyle: {
                    fontSize: '12'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                },
                position: [10, 300]
            },
            toolbox: {
                show: true,
                showTitle: true,
                feature: {
                    dataZoom: {},
                    restore: {},
                    saveAsImage: {}
                },
                left: 40,
                top: 270
            },
            legend: {
                data: legendOptions,
                top: 30
            },
            grid: {
                top: 70,
                bottom: 50
            },
            xAxis: [
                {
                    type: 'value',
                    boundaryGap: false
                },
                {
                    type: 'value',
                    boundaryGap: false
                }
            ],
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                min(value) {
                    return value.min;
                },
                max(value) {
                    return value.max;
                },
                axisLabel: {
                    formatter(value, index) {
                        // keep 0.11111 to 0.111
                        return value.toString().slice(0, 5);
                    }
                }
            },
            series: seriesOption
        };
        this.myChart.setOption(option);
    },
    setChartsData({tagList, tag}) {
        let requestList = tagList.map(item => {
            let params = {
                run: item.run,
                tag: tag
            };
            return getPluginScalarsScalars(params);
        });
        axios.all(requestList).then(resArray => {
            let seriesData = resArray.map(res => {
                return {
                    data: res.data,
                    encode: {
                        // map 1 to xAixs。
                        x: [1],
                        // map 2 to yAixs。
                        y: [2]
                    }
                };
            });
            this.myChart.setOption({
                series: seriesData
            });
        });
    },
    getChartOptions() {
        return this.myChart.getOption() || {};
    },
    handleDownLoad() {
        let options = this.getChartOptions();
        let series = options.series || [];
        let downloadType = this.data.get('downloadType');
        let sery = series.find(item => item.name === downloadType) || {};
        let tagInfo = this.data.get('tagInfo');
        let fileName = tagInfo.tag.replace(/\//g, '-');
        generateJsonAndDownload(sery.data, fileName);
    }
};
</script>
<style lang="stylus">
    .visual-dl-charts
        float left
        .visual-dl-chart-actions
            .sm-form-item
                width 300px
                display inline-block
</style>