corrosion/src/utils/statistical.js

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

/**
 * 生成chart所需参数
 * @param {Object[]} data 服务端返回数据
 * @param {string} data[].time 时间 ms
 * @param {string} data[].so2 SO2
 * @param {string} data[].saltR 盐阻
 * @param {string} data[].saltT 盐温
 * @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: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], saltT: *[], saltR: *[], environmentHumidity: *[]}}
 */
function generateParams(data) {
  const result = {
    time: [],
    so2: [],
    saltR: [],
    saltT: [],
    environmentTemperature: [],
    environmentHumidity: [],
    corrosionXIN: [],
    corrosionTONG: [],
    corrosionLV: [],
    corrosionGANG: [],
  };
  data.forEach(item => {
    result.time.push(dayjs(new Date(+item.time)).format('YY/MM/DD HH:mm'));
    !isNaN(+item.so2) ? result.so2.push(+item.so2) : '';
    !isNaN(+item.saltR) ? result.saltR.push(+item.saltR) : '';
    !isNaN(+item.saltT) ? result.saltT.push(+item.saltT) : '';
    !isNaN(+item.environmentTemperature) ? result.environmentTemperature.push(+item.environmentTemperature) : '';
    !isNaN(+item.environmentHumidity) ? result.environmentHumidity.push(+item.environmentHumidity) : '';
    !isNaN(+item.corrosion1) ? result.corrosionXIN.push(+item.corrosion1) : '';
    !isNaN(+item.corrosion2) ? result.corrosionTONG.push(+item.corrosion2) : '';
    !isNaN(+item.corrosion3) ? result.corrosionLV.push(+item.corrosion3) : '';
    !isNaN(+item.corrosion4) ? result.corrosionGANG.push(+item.corrosion4) : '';
  });
  return result;
}

/**
 * 计算Y轴的显示
 * @param {string} yName Y轴的name
 * @param {Object} selectedLegend legends
 * @returns {boolean}
 */
export function computeYAxisShow(yName, selectedLegend) {
  // eslint-disable-next-line guard-for-in,no-restricted-syntax
  for (const key in selectedLegend) {
    if (key.includes(yName) && selectedLegend[key]) {
      return true;
    }
  }
  return false;
}

/**
 * 生产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 = computeYAxisShow(item.name, selectedLegend);
    if (item.show) {
      if (item.position === 'left') {
        item.offset = 100 * leftIndex;
        leftIndex += 1;
      } else {
        item.offset = 80 * 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 => {
    if (item.name.includes('电流')) {
      item.yAxisIndex = 0;
    } else if (item.name.includes('温度')) {
      item.yAxisIndex = 1;
    } else if (item.name.includes('湿度')) {
      item.yAxisIndex = 2;
    } else if (item.name.includes('SO2')) {
      item.yAxisIndex = 3;
    } else if (item.name.includes('阻抗')) {
      item.yAxisIndex = 4;
    }
  });
  return result || [];
}

/**
 * 计算图表grid left right值
 * @param {Object[]} yAxis
 * @returns {{left: number, right: number}}
 */
function generateGrid(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) + 100,
    right: max(right) + 80,
  };
}

/**
 * 生成chart参数
 * @param {Object[]} rawData 返回段返回的data数据
 * @param {Object} selected 选中的legend
 * @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})[], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: [string,string,string,string,string,string,string,string,string], grid: {left: number, right: number}, legend: {data: [string,string,string,string,string,string,string,string,string], type: string, selected}, series: (({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: [], name: string, type: string, yAxisIndex: number})[]|*[]), tooltip: {axisPointer: {type: string, snap: boolean}, trigger: string}, dataZoom: [{type: string},{type: string}]}}
 */
export function generateChartOption(rawData, selected) {
  const data = generateParams(rawData);
  const yAxis = generateYAxis(selected);
  const series = generateSeries(data, yAxis);
  const grid = generateGrid(yAxis);
  const option = {
    color: colors,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        snap: true,
      },
    },
    grid,
    legend: {
      type: 'scroll',
      selected,
      data: legendData,
    },
    dataZoom: [{ type: 'inside' }, { type: 'slider' }],
    xAxis: [
      {
        type: 'category',
        axisTick: { alignWithLabel: true },
        data: data.time,
      },
    ],
    yAxis,
    series,
  };
  return option;
}