Как перевернуть / убрать / отсортировать данные по оси X в реакции

Question

Я не смог найти это, просматривая документацию. Я хотел бы показать график с датой оси X с датами и временем с самыми последними данными слева. Я надеялся, что простое обращение к массиву свойств данных сделает это, но библиотека реагирует на это умнее.

Я бы подумал, что информация находится на этой странице документации.

Итак, как мне отсортировать по оси X по убыванию?

Пример кода

function ExampleGraph(props) {
  const {
    data,
    x, y,
  } = props

  // const keys = Object.keys(data)
  // if(keys.length>2){
  //   console.error({data}, "has too many dimensions for x-y")
  // }
  const keys=[x,y]

  const xyData = (()=> {
    const xKey = keys[0]
    const yKey = keys[1]

    const xArgs = data.map(r => (r[xKey]))
    const yArgs = data.map(r => (r[yKey]))

    const coords = xArgs.map((x, i) => ({
      x: x,
      y: yArgs[i] 
    }))

    return coords
  })()

  return (
    <XYPlot
    width={1000}
    height={640}>
      <HorizontalGridLines />
      <LineSeries
        data={xyData}
      />
      <XAxis />
      <YAxis />
    </XYPlot>
  )
}

Шаблон BlazeJS (MeteorJS), который отображает компонент

<template name="stepCountsGraph">
  <div>
    {{> React
      component=ExampleGraph
      data=stepCounts
      y="step_count"
      x="time"
    }}
  </div>
</template>

Answer 1

Вы должны иметь возможность отменить xDomain, указав его! response-vis принимает различные реквизиты для каждого измерения (например, xDomain/xRange/xType и yDomain/yRange/yType), поэтому, если вы хотите контролировать точный макет диаграммы, вы можете указать некоторые или все эти свойства. Для достижения эффекта обратного домена, который вы описываете, вы можете изменить свой фрагмент так, чтобы он был примерно таким:

function ExampleGraph() {
const xKey = this.props.x;
const yKey = this.props.y;
const xyData = data.map(r => ({x: r[xKey], y: r[yKey]}));
const xDomain = data.reduce((res, row) => {
    return {max: Math.max(res.max, row[xKey]), min: Math.min(res.min, row[xKey])};
}, {min: Infinity, max: -Infinity});

return (
<XYPlot
    xDomain={[xDomain.max, xDomain.min]}
    width={1000}
    height={640}>
      <HorizontalGridLines />
      <LineSeries data={xyData} />
      <XAxis />
      <YAxis />
    </XYPlot>
   )
}

Я надеюсь, что это отвечает на ваш вопрос! Я открыл вопрос, чтобы добавить этот тип разъяснения в документы здесь.