corrosion/src/utils/statistical.js

/* eslint-disable max-len,object-curly-newline */
import dayjs from 'dayjs';
import max from 'lodash/max';
import { colors, defaultSelectedLegend, generateDefaultSeries, yAxisData } from '@/config/chart';

/**
 * 生成chart所需参数
 * @param {Object[]} data 服务端返回数据
 * @param {string} data[].time 时间 ms
 * @param {string} data[].so2 SO2
 * @param {string} data[].salt 盐阻
 * @param {string} data[].environmentTemperature 环温
 * @param {string} data[].environmentHumidity 环湿
 * @param {string} data[].corrosion1 锌
 * @param {string} data[].corrosion2 铜
 * @param {string} data[].corrosion3 铝
 * @param {string} data[].corrosion4 钢
 * @returns {{environmentTemperature: *[], corrosionXIN: *[], corrosionGANG: *[], salt: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], environmentHumidity: *[]}}
 */
function generateParams(data) {
  const result = {
    time: [],
    so2: [],
    salt: [],
    environmentTemperature: [],
    environmentHumidity: [],
    corrosionXIN: [],
    corrosionTONG: [],
    corrosionLV: [],
    corrosionGANG: [],
  };
  data.forEach(item => {
    result.time.push(dayjs(+item.time).format('YY/MM/MM HH:mm'));
    result.so2.push(+item.so2);
    result.salt.push(+item.salt);
    result.environmentTemperature.push(+item.environmentTemperature);
    result.environmentHumidity.push(+item.environmentHumidity);
    result.corrosionXIN.push(+item.corrosion1);
    result.corrosionTONG.push(+item.corrosion2);
    result.corrosionLV.push(+item.corrosion3);
    result.corrosionGANG.push(+item.corrosion4);
  });
  return result;
}

/**
 * 生产y轴内容
 * @param {Object} selectedLegend
 * @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]}
 */
export function generateYAxis(selectedLegend) {
  let leftIndex = 0;
  let rightIndex = 0;
  yAxisData.forEach(item => {
    item.show = selectedLegend[item.name];
    if (item.show) {
      if (item.position === 'left') {
        item.offset = 70 * leftIndex;
        leftIndex += 1;
      } else {
        item.offset = 85 * rightIndex;
        rightIndex += 1;
      }
    }
  });
  return yAxisData;
}

/**
 * 生成series数据
 * @param {Object} data
 * @param {Object[]} yAxis
 * @returns {({data: ([]|number|string|*), name: string, type: string}|{data: ([]|number|BufferSource|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: [], name: string, type: string, yAxisIndex: number})[]|*[]}
 */
function generateSeries(data, yAxis) {
  const seriesArr = generateDefaultSeries(data);
  const showArr = seriesArr.filter(item => yAxis.find(y => y.name === item.name));
  const hideArr = seriesArr.filter(item => !yAxis.find(y => y.name === item.name));
  const result = [...showArr, ...hideArr];
  result.forEach((item, index) => {
    item.yAxisIndex = index;
  });
  return result || [];
}

/**
 * 计算图表grid left right值
 * @param {Object[]} yAxis
 * @returns {{left: number, right: number}}
 */
function genereteGrid(yAxis) {
  const left = [];
  const right = [];
  yAxis.forEach(item => {
    if (item.show) {
      if (item.position === 'left') {
        left.push(item.offset || 0);
      } else {
        right.push(item.offset || 0);
      }
    }
  });
  return {
    left: max(left) + 45,
    right: max(right) + 45,
  };
}

/**
 * 生成chart参数
 * @param {Object[]} rawData 返回段返回的data数据
 * @param {Object[]} yAxis
 * @returns {{yAxis: [{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},null,null,null], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: string[], grid: {right: string}, legend: {data: string[]}, series: [{data: *[], name: string, type: string},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},null,null,null], tooltip: {axisPointer: {type: string}, trigger: string}, toolbox: {feature: {saveAsImage: {show: boolean}, restore: {show: boolean}, dataView: {show: boolean, readOnly: boolean}}}}}
 */
// eslint-disable-next-line import/prefer-default-export
export function generateChartOption(rawData, selected = defaultSelectedLegend) {
  const data = generateParams(rawData);
  const yAxis = generateYAxis(selected);
  const series = generateSeries(data, yAxis);
  const grid = genereteGrid(yAxis);
  const option = {
    color: colors,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        snap: true,
      },
    },
    grid,
    legend: {
      selected,
      data: ['SO2(ppb)', '盐分阻抗(Ω)', '环温(℃)', '环湿(RH%)', '锌腐蚀电流(nA)', '铜腐蚀电流(nA)', '铝腐蚀电流(nA)', '钢腐蚀电流(nA)'],
    },
    dataZoom: [{ type: 'inside' }, { type: 'slider' }],
    xAxis: [
      {
        type: 'category',
        axisTick: { alignWithLabel: true },
        data: data.time,
      },
    ],
    yAxis,
    series,
  };
  return option;
}