feat: add SimpleGraph class

[heming6666]

This PR implements the SimpleGraph class based on Echarts. Fix #4.

How to use

First, we need to prepare a DOM container with width and height for ECharts.

graphIdAndClass = "hypertrons-graph-div";
insertLineChart() {
    const root = this.getRoot();
    if (root) {
      root.append(
        `<div id="${this.graphIdAndClass}" class="${this.graphIdAndClass}"></div>`
      );
    }
  }

Then we can initialize an SimpleGraph instance to create a simple chart:

var lineChart = new SimpleGraph(this.graphIdAndClass,this.getLineChartOption());

API

render(option)

This is the most powerful interface. All parameters and data can all be passed and modified through option. ECharts will merge new parameters and data, and then refresh chart. The function can be used to:

Dynamic Data Updating

Implementing dynamic data updating is extremely easy. You only need to get data as you wish, fill in data to option, then pass it to render().

Asynchronous Loading

The same as Dynamic Data Updating. You can pass the option to render() once the data is ready after asynchronous loading.

Loading Animation

showLoading() is used to show the simple loading animation, and hideLoading() is used to hide it after data loading.

Theme

Besides the original default theme, you can use 'light' and 'dark' theme:

var lineChart = new SimpleGraph(this.graphIdAndClass, this.getLineChartOption(), 'dark');

You can also call updateTheme(theme) to update the theme color.

Events

bindEvent(eventName, func) is provided to bind some events on the chart and handle accordingly through callback functions. You can refer to Events and Actions in ECharts for more information.

Actions

dispatchAction() is provided to trigger certain actions in the program, such as showing tooltip, or selecting legend. You can refer to action for more information.

Signed-off-by: LinHaiming lhming23@outlook.com

[heming6666]

Please @frank-zsy help look into this and see if there are anything needed but not implemented yet, or totally unnecessary.

The line graph should be configurable, like title, graph style and theme color.

In the current implementation, theme color can be configured when initializing SimpleGraph, and can be updated by updateTheme(theme).

While title and graph style, I think they can be configured in option and then passed to SimpleGraph.

BTW, is it necessary to move the SimpleGraph and SimpleTable class to another file?

WDYT @frank-zsy ?

[frank-zsy]

We may use single quotes rather than double quotes for strings, is there a certain reason you change all quotes to double quotes?

[frank-zsy]

Please @frank-zsy help look into this and see if there are anything needed but not implemented yet, or totally unnecessary.

And I think besides the SimpleGraph class, you also need to implement addGraph function into HypertronsDashboard class so users can use it to add graph into dashboard?

BTW, is it necessary to move the SimpleGraph and SimpleTable class to another file?

I think it is all good, if you move the class into another file, need to add it to mainfest.json too.

[heming6666]

I have updated the PR, please @frank-zsy have a look.

We may use single quotes rather than double quotes for strings, is there a certain reason you change all quotes to double quotes?

Because I used prettier to format the code and it automatically replaced double quotes with single quotes. I have changed the prettier configuration and changed it all back.

BTW, maybe we can specify the lint tool and configuration to avoid this problem.

And I think besides the SimpleGraph class, you also need to implement addGraph function...

I have added that to this pr, please review it again.

I think it is all good, if you move the class into another file, need to add it to mainfest.json too.

Yes. I have moved the SimpleGraph class into simple-graph.js and added it to mainfest.json.

[frank-zsy]

I will approve this PR now and refactor later on default styles.

/approve