Перечисление месяца XAxis расчет с эпохи - PullRequest
Новая
       70

Перечисление месяца XAxis расчет с эпохи

0 голосов
/ 30 апреля 2020

Мне удалось сгенерировать XAxis за месяц в recharts из epoch данных, как показано в примере ниже: 

const MonthChart = ({ data, domain, ...restProps }) => {
  const xFormatter = (seconds) =>
    new Date(seconds * 1000).toLocaleDateString("en-US", { month: "short" });

  return (
    <ResponsiveContainer width="99%" height={400}>
      <ComposedChart
        data={data}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <XAxis
          dataKey="epoch"
          type="number"
          domain={domain}
          interval={0}
          tickFormatter={xFormatter}
          tickCount={12}
        />
        <YAxis />
        <Area
          type="monotone"
          dataKey="range"
          fill="#b2b2b2 "
          stroke="#b2b2b2 "
          strokeDasharray="3 3"
        />
        <Line
          type="monotone"
          dataKey="average"
          stroke="#000"
          strokeDasharray="3 3"
        />
      </ComposedChart>
    </ResponsiveContainer>
  );
};

Но по какой-то причине "Sep" (сентябрь) не используется отображается, даже если в наборе данных есть записи, содержащие эпоху этого месяца.

Можете ли вы заметить что-то не так с моим подходом?

Спасибо

Также здесь есть codepen , который воспроизводит проблему.

1 Ответ

0 голосов
/ 07 мая 2020

Я решил эту проблему, передав ручные отметки «месяц» вручную ticks в XAxis. По какой-то причине tickFormatter не обрабатывал все эпохи.

Возможно, есть лучший подход, но этот помог мне.

Предоставленный codepen вопрос обновляется с помощью обходного пути.

Также это небольшой фрагмент кода XAxis: 

<XAxis
  dataKey="epoch"
  type="number"
  domain={domain}
  interval={0}
  tickFormatter={xFormatter}
  tickCount={12}
  ticks={manualTicks}
/>

ticks: 

const manualTicks = [
  epochGenerator(new Date(YEAR, 1, 1)),
  epochGenerator(new Date(YEAR, 2, 1)),
  epochGenerator(new Date(YEAR, 3, 1)),
  epochGenerator(new Date(YEAR, 4, 1)),
  epochGenerator(new Date(YEAR, 5, 1)),
  epochGenerator(new Date(YEAR, 6, 1)),
  epochGenerator(new Date(YEAR, 7, 1)),
  epochGenerator(new Date(YEAR, 8, 1)),
  epochGenerator(new Date(YEAR, 9, 1)),
  epochGenerator(new Date(YEAR, 10, 1)),
  epochGenerator(new Date(YEAR, 11, 1)),
  epochGenerator(new Date(YEAR, 12, 1)),
]

и epochGenerator: 

const epochGenerator = (date) => date.getTime() / 1000;
...