Сплит массив объектов, для работы с точками данных - PullRequest
Новая
       6

Сплит массив объектов, для работы с точками данных

0 голосов
/ 26 февраля 2020

У меня есть эта функция внутри компонента: 

import React, { Component } from 'react';
import CanvasJSReact from '../../assets/canvasjs.react';
import _ from 'lodash';

class MyChart extends Component {
  constructor() {
  super();
  this.generateDataPoints = this.generateDataPoints.bind(this);
  }

  generateDataPoints(noOfDps) {
    var xVal = 1, yVal = 100;
    var dps = [];
    for(var i = 0; i < noOfDps; i++) {
      yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
      dps.push({x: xVal,y: yVal});  
      xVal++;
    }
    return dps;
  }

  render() {
    var dataPoints = this.generateDataPoints(100);
    console.log("dataPoints", dataPoints);

    let yFirst = _.first(dataPoints);
    let yLast = _.last(dataPoints);
    let yMax = _.pick(dataPoints, 'y');
    //console.log("Fisrt", yFirst, "Last:", yLast);

    const {x: first, y: second } = dataPoints;
    //let yMax = array.pick(dataPoints, 'y');
    console.log("y", second);
}
  return (...);
    }
}
export default MyChart;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Мой dataSet - график по времени (x), я хочу вычислить минимальное и максимальное значения y и сгенерировать третье свойство для эти точки, например: 

{ x: 40, y: 65 },
{ x: 50, y: 85, indexLabel: "highest"},
{ x: 60, y: 68 },

Я пытался отделить массив от dps в два раза, чтобы найти min и max, но это никогда не работает. Я пробую это с библиотекой loda sh.

1 Ответ

2 голосов
/ 26 февраля 2020

Вы можете использовать вспомогательную функцию, чтобы определить, какое из dataPoint имеет наибольшее значение (если я правильно понял, это то, которое y больше), тогда вы установите это свойство indexLabel = "highest" для этого объекта.

Тот же лог c используется для самого низкого, как вы можете видеть в примере кода ниже 

let dataPoints = [{x: 40,  y: 65}, {x: 50,  y: 85}, {x: 60,  y: 68}]

function setHighestLowest(dtPoints) {
  let highestIndex = -1;
  let minimumIndex = -1;
  let highestValue = 0;  
  let lowestValue = 0;


  for (let i = 0; i < dtPoints.length; i++) {
    let obj = dtPoints[i]
    if (obj.y > highestValue) {
      highestIndex = i;
      highestValue = obj.y;
    }
    if (obj.y < lowestValue || i == 0) {
      minimumIndex = i;
      lowestValue = obj.y;
    }
  }

  if (highestIndex > -1) {
    dtPoints[highestIndex].indexLabel = "highest"
  }
  if (minimumIndex > -1) {
    dtPoints[minimumIndex].indexLabel = "lowest"
  }
}

setHighestLowest(dataPoints)
console.log(dataPoints)
...