Support coordinate form data in Area and LineAreaCombo Charts

Version

3.11.2

Development Environment

Firefox 77.0.1 on Fedora 32, using create-react-app and https://github.com/nhn/toast-ui.react-chart

(I am opening the issue here because it does not seem related to the react wrapper)

Current Behavior

Trying to use coordinate-style data in an AreaChart or LineAreaComboChart produces a crash.

I tested that the snippets below will reproduce the bug in a fresh create-react-app environment, which I put here: https://github.com/smichel17/tui-combo-bug-example/

AreaChart

This line:

https://github.com/nhn/tui.chart/blob/796da15d48ef4be3a7eed9f2ab103fd1ff7ce507/src/js/models/data/dataProcessor.js#L139

Produces a TypeError: seriesData is undefined

Minimal example to reproduce

import React from 'react';

import { AreaChart } from "@toast-ui/react-chart";
import 'tui-chart/dist/tui-chart.css'

function App() {
  let data = {
    series: [
      {
        name: "Goal",
        data: [
          { x: 1, y: 3, },
          { x: 2, y: 3, },
          { x: 3, y: 3, },
          { x: 4, y: 3, },
          { x: 5, y: 3, },
        ],
      },
    ],
  };

  return <AreaChart data={data} />;
}

export default App;

LineAreaComboChart

This line:

https://github.com/nhn/tui.chart/blob/5aa555a9681e8294f24ad6fecc25e27997b463a7/src/js/components/mouseEventDetectors/tickBaseCoordinateModel.js#L76

Produces a TypeError: ranges[(tickCount - 1)] is undefined

Minimal example to reproduce

import React from 'react';

import { ComboChart } from "@toast-ui/react-chart";
import 'tui-chart/dist/tui-chart.css'

function App() {
  let data = {
    series: {
      area: [
        {
          name: "Goal",
          data: [
            { x: 1, y: 3, },
            { x: 2, y: 3, },
            { x: 3, y: 3, },
            { x: 4, y: 3, },
            { x: 5, y: 3, },
          ],
        },
      ],
      line: [
        {
          name: "Data",
          data: [
            { x: 1, y: 5, },
            { x: 2, y: 4, },
            { x: 3, y: 3, },
            { x: 3, y: 2, },
            { x: 3, y: 1, },
          ],
        },
      ],
    },
  };

  return <ComboChart data={data} />;
}

export default App;

Expected Behavior

An area chart is basically a line chart with the area under the series filled in. Also, your line and area charts share a wiki page. So, I expected that coordinate data would also work with area charts.

I was initially going to file this as a bug report, but while I was writing it, I noticed that the wiki page never actually says that coordinate data will work with area charts (only line charts), so I guess this is a feature request, instead 😃

[jung-han]

@smichel17 Thanks for the details! Currently, major updates are being prepared, so adding new features to chart3 can be a bit difficult. We will review the features in the new major version. Thanks for posting the issue!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!