Merge pull request #416 from potaaaaaato/master

update echarts from v4 to v5

kafka-manager-console/package.json

@@ -3,7 +3,8 @@
   "version": "2.5.0",
   "description": "",
   "scripts": {
-    "start": "webpack-dev-server",
+    "prestart": "npm install --save-dev webpack-dev-server",
+    "start": "webpack serve",
     "daily-build": "cross-env NODE_ENV=production webpack",
     "pre-build": "cross-env NODE_ENV=production webpack",
     "prod-build": "cross-env NODE_ENV=production webpack",
@@ -13,18 +14,19 @@
   "license": "ISC",
   "devDependencies": {
     "@hot-loader/react-dom": "^16.8.6",
-    "@types/echarts": "^4.4.1",
+    "@types/events": "^3.0.0",
     "@types/lodash.debounce": "^4.0.6",
     "@types/react": "^16.8.8",
     "@types/react-dom": "^16.8.2",
     "@types/react-router-dom": "^4.3.1",
     "@types/spark-md5": "^3.0.2",
+    "@webpack-cli/serve": "^1.6.0",
     "antd": "^3.26.15",
     "clean-webpack-plugin": "^3.0.0",
     "clipboard": "^2.0.8",
     "cross-env": "^7.0.2",
     "css-loader": "^2.1.0",
-    "echarts": "^4.5.0",
+    "echarts": "^5.2.1",
     "file-loader": "^5.0.2",
     "html-webpack-plugin": "^3.2.0",
     "increase-memory-limit": "^1.0.7",
@@ -50,11 +52,10 @@
     "typescript": "^3.3.3333",
     "url-loader": "^4.1.1",
     "webpack": "^4.29.6",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.1",
+    "webpack-cli": "^4.9.1",
     "xlsx": "^0.16.1"
   },
   "dependencies": {
     "format-to-json": "^1.0.4"
   }
-}
\ No newline at end of file
+}

kafka-manager-console/src/component/chart/bar-chart.tsx

 import * as React from 'react';
 import { Spin, notification } from 'component/antd';
-import echarts, { EChartOption } from 'echarts/lib/echarts';
+import * as echarts from 'echarts/core';
 
 // 引入柱状图
-import 'echarts/lib/chart/bar';
+import { BarChart } from 'echarts/charts';
 
 // 引入提示框和标题组件
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { EChartsOption } from 'echarts';
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  BarChart,
+  GridComponent,
+  CanvasRenderer,
+]);
 
 interface IChartProps {
   getChartData: any;
@@ -38,7 +53,7 @@ export class BarChartComponet extends React.Component<IChartProps> {
     this.chart.resize();
   }
 
-  public isHasData = (data: EChartOption) => {
+  public isHasData = (data: any) => {
     const noData = !(data.series && data.series.length);
     this.setState({ noData });
     return !noData;
@@ -54,7 +69,7 @@ export class BarChartComponet extends React.Component<IChartProps> {
     const chartOptions = getChartData();
 
     if ((typeof chartOptions.then) === 'function') {
-      return chartOptions.then((data: EChartOption) => {
+      return chartOptions.then((data: EChartsOption) => {
         this.setState({ loading: false });
 
         if (this.isHasData(data)) {

kafka-manager-console/src/component/chart/date-picker-chart.tsx

@@ -3,16 +3,34 @@ import { DatePicker, notification, Spin } from 'component/antd';
 import moment, { Moment } from 'moment';
 import { timeStampStr } from 'constants/strategy';
 import { disabledDate } from 'lib/utils';
-import echarts from 'echarts';
+import * as echarts from 'echarts/core';
 
-// 引入柱状图和折线图
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/chart/line';
+// 引入柱状图
+import { BarChart, LineChart } from 'echarts/charts';
 
 // 引入提示框和标题组件
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  MarkLineComponent,
+  DatasetComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  DatasetComponent,
+  MarkLineComponent,
+]);
 import './index.less';
 
 const { RangePicker } = DatePicker;
@@ -61,11 +79,12 @@ export class ChartWithDatePicker extends React.Component<IChartProps> {
     const noData = options.series.length ? false : true;
     this.setState({ noData });
     options.tooltip.formatter = (params: any) => {
-      var res =
-        "<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;'><p>" +
+      let res =
+        '<div style=\'margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;\'><p>' +
         params[0].data.time +
-        " </p></div>";
-      for (var i = 0; i < params.length; i++) {
+        ' </p></div>';
+      // tslint:disable-next-line:prefer-for-of
+      for (let i = 0; i < params.length; i++) {
         res += `<div key=${params[i].seriesName} style="color: #fff;padding:0 12px;line-height: 24px">
                   <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${[
             params[i].color,
@@ -75,7 +94,7 @@ export class ChartWithDatePicker extends React.Component<IChartProps> {
                 </div>`;
       }
       return res;
-    }
+    };
     this.chart.setOption(options, true);
   }
 

kafka-manager-console/src/component/chart/doughnut-chart.tsx

 import * as React from 'react';
 import { Spin } from 'component/antd';
-import echarts from 'echarts/lib/echarts';
-// 引入饼状图
-import 'echarts/lib/chart/pie';
+import * as echarts from 'echarts/core';
+// 引入饼图
+import { PieChart } from 'echarts/charts';
+
 // 引入提示框和标题组件
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
 
+// 注册必须的组件
+echarts.use([
+  PieChart,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  GridComponent,
+  CanvasRenderer,
+]);
 interface IPieProps {
   getChartData: any;
 }

kafka-manager-console/src/component/chart/line-chart.tsx

 import React from 'react';
-import echarts, { EChartOption } from 'echarts/lib/echarts';
-import 'echarts/lib/chart/pie';
-import 'echarts/lib/chart/line';
-import 'echarts/lib/component/legend';
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/axis';
+import * as echarts from 'echarts/core';
 import './index.less';
 
+// 引入柱状图
+import { PieChart, LineChart } from 'echarts/charts';
+
+// 引入提示框和标题组件
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  ToolboxComponent,
+  DatasetComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use([
+  PieChart,
+  LineChart,
+  ToolboxComponent,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  CanvasRenderer,
+]);
 export interface IEchartsProps {
   width?: number;
   height?: number;
-  options?: EChartOption;
+  options?: any;
 }
 
-export const hasData = (options: EChartOption) => {
+export const hasData = (options: any) => {
   if (options && options.series && options.series.length) return true;
   return false;
 };
 
-export default class LineChart extends React.Component<IEchartsProps> {
+export default class LineCharts extends React.Component<IEchartsProps> {
   public id = null as HTMLDivElement;
 
   public myChart = null as echarts.ECharts;
@@ -27,7 +47,7 @@ export default class LineChart extends React.Component<IEchartsProps> {
   public componentDidMount() {
     const { options } = this.props;
     this.myChart = echarts.init(this.id);
-    this.myChart.setOption(options);
+    this.myChart.setOption(options, true);
     window.addEventListener('resize', this.resize);
   }
 
@@ -41,7 +61,7 @@ export default class LineChart extends React.Component<IEchartsProps> {
 
   public refresh = () => {
     const { options } = this.props;
-    this.myChart.setOption(options);
+    this.myChart.setOption(options, true);
   }
 
   public resize = () => {
@@ -50,6 +70,6 @@ export default class LineChart extends React.Component<IEchartsProps> {
 
   public render() {
     const { height, width } = this.props;
-    return <div ref={id => this.id = id} style={{width: `${width}px`, height: `${height}px`}} />;
+    return <div ref={id => this.id = id} style={{ width: `${width}px`, height: `${height}px` }} />;
   }
 }

kafka-manager-console/src/container/admin/data-curve/config.ts

-import { EChartOption } from 'echarts/lib/echarts';
 import moment from 'moment';
 import { ICurve } from 'container/common-curve/config';
 import { adminMonitor } from 'store/admin-monitor';
@@ -124,7 +123,7 @@ export interface ICurveType {
   type: curveType;
   title: string;
   curves: ICurve[];
-  parser: (option: ICurve, data: any[]) => EChartOption;
+  parser: (option: ICurve, data: any[]) => any;
 }
 
 export const byteTypeCurves: ICurveType[] = [

kafka-manager-console/src/container/admin/data-curve/parser.ts

 import moment from 'moment';
-import { EChartOption } from 'echarts';
+import { EChartsOption } from 'echarts';
 import { ICurve, ILineData, baseLineLegend, baseLineGrid, baseAxisStyle, noAxis, UNIT_HEIGHT } from 'container/common-curve/config';
 import { IClusterMetrics, ISeriesOption } from 'types/base-type';
 import { timeFormat } from 'constants/strategy';
@@ -48,20 +48,20 @@ export const getBaseOptions = (option: ICurve, data: ILineData[]) => {
         return Number(i.value);
       }),
     }],
-  } as EChartOption;
+  } as EChartsOption;
 };
 
-export const parseLine = (option: ICurve, data: ILineData[]): EChartOption => {
+export const parseLine = (option: ICurve, data: ILineData[]): EChartsOption => {
   return Object.assign({}, getBaseOptions(option, data), {
     legend: {
       ...baseLineLegend,
       bottom: '0',
       align: 'auto',
     },
-  }) as EChartOption;
+  }) as EChartsOption;
 };
 
-export const parseBrokerMetricOption = (option: ICurve, data: IClusterMetrics[]): EChartOption => {
+export const parseBrokerMetricOption = (option: ICurve, data: IClusterMetrics[]): EChartsOption => {
   let name;
   let series: ISeriesOption[];
   data = data || [];

kafka-manager-console/src/container/alarm/alarm-detail/history-detail.tsx

@@ -6,7 +6,7 @@ import { alarm } from 'store/alarm';
 import { observer } from 'mobx-react';
 import { handlePageBack } from 'lib/utils';
 import LineChart, { hasData } from 'component/chart/line-chart';
-import { EChartOption } from 'echarts';
+import { EChartsOption } from 'echarts';
 import { timeFormat } from 'constants/strategy';
 import Url from 'lib/url-parser';
 import moment = require('moment');
@@ -40,7 +40,7 @@ export class HistoryDetail extends React.Component {
     return <div className="no-data-info" style={{ ...style }} key="loading"><Spin /></div>;
   }
 
-  public renderEchart = (options: EChartOption, loading = false) => {
+  public renderEchart = (options: EChartsOption, loading = false) => {
     const data = hasData(options);
     if (loading) return this.renderLoading(400);
     if (!data) return this.renderNoData(400);
@@ -51,7 +51,7 @@ export class HistoryDetail extends React.Component {
   }
 
   public renderHistoricalTraffic(metric: IMonitorMetric) {
-    const option = this.getChartOption() as EChartOption;
+    const option = this.getChartOption() as EChartsOption;
 
     return (
       <>

kafka-manager-console/src/container/common-curve/config.ts

-import { EChartOption } from 'echarts/lib/echarts';
-import moment from 'moment';
+import { EChartsOption } from 'echarts';
 
 export interface ILineData {
   value: number;
@@ -9,7 +8,7 @@ export interface ICurve {
   title?: string;
   path: string;
   colors: string[];
-  parser?: (option: ICurve, data: ILineData) => EChartOption;
+  parser?: (option: ICurve, data: ILineData) => EChartsOption;
   message?: string;
   unit?: string;
   api?: any;
@@ -69,13 +68,13 @@ export const noAxis = {
   },
 };
 
-export const getHight = (options: EChartOption) => {
-  let grid = options ? options.grid as EChartOption.Grid : null;
+export const getHight = (options: any) => {
+  let grid = options ? options.grid : null;
   if (!options || !grid) grid = baseLineGrid;
   return Number(grid.height) + getLegendHight(options) + Number(grid.top) + LEGEND_PADDING + UNIT_HEIGHT;
 };
 
-export const getLegendHight = (options: EChartOption) => {
+export const getLegendHight = (options: any) => {
   if (!options) return 0;
   if (options.legend.show === false) return 0;
   const legendHight = options.legend.textStyle.lineHeight + defaultLegendPadding;

kafka-manager-console/src/container/common-curve/index.tsx

-import { EChartOption } from 'echarts';
+import { EChartsOption } from 'echarts';
 import { observer } from 'mobx-react';
 import React from 'react';
 import { curveInfo } from 'store/curve-info';
@@ -10,7 +10,7 @@ import LineChart, { hasData } from 'component/chart/line-chart';
 
 export interface ICommonCurveProps {
   options: ICurve;
-  parser?: (option: ICurve, data: any[]) => EChartOption;
+  parser?: (option: ICurve, data: any[]) => any;
 }
 
 @observer
@@ -41,7 +41,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
     fullScreen.show(this.renderCurve(options, loading, true));
   }
 
-  public renderOpBtns = (options: EChartOption, expand = false) => {
+  public renderOpBtns = (options: EChartsOption, expand = false) => {
     const data = hasData(options);
     return (
       <div className="charts-op" key="op">
@@ -85,7 +85,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
     return <div className="no-data-info" style={{ ...style }} key="loading"><Spin /></div>;
   }
 
-  public renderEchart = (options: EChartOption, loading = false) => {
+  public renderEchart = (options: EChartsOption, loading = false) => {
     const height = getHight(options);
     const data = hasData(options);
 
@@ -94,7 +94,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
     return <LineChart height={height} options={options} key="chart" />;
   }
 
-  public renderCurve = (options: EChartOption, loading: boolean, expand = false) => {
+  public renderCurve = (options: any, loading: boolean, expand = false) => {
     const data = hasData(options);
     return (
       <div className="common-chart-wrapper" >

kafka-manager-console/src/store/curve-info.ts

 import { observable, action } from 'mobx';
 import moment = require('moment');
-import { EChartOption } from 'echarts/lib/echarts';
+import { EChartsOption } from 'echarts';
 import { ICurve } from 'container/common-curve/config';
 import { curveKeys, PERIOD_RADIO_MAP } from 'container/admin/data-curve/config';
 import { timeFormat } from 'constants/strategy';
@@ -13,7 +13,7 @@ class CurveInfo {
   public timeRange: [moment.Moment, moment.Moment] = PERIOD_RADIO_MAP.get(this.periodKey).dateRange;
 
   @observable
-  public curveData: { [key: string]: EChartOption } = {};
+  public curveData: { [key: string]: EChartsOption } = {};
 
   @observable
   public curveLoading: { [key: string]: boolean } = {};
@@ -25,7 +25,7 @@ class CurveInfo {
   public currentOperator: string;
 
   @action.bound
-  public setCurveData(key: curveKeys | string, data: EChartOption) {
+  public setCurveData(key: curveKeys | string, data: EChartsOption) {
     this.curveData[key] = data;
   }
 
@@ -59,7 +59,7 @@ class CurveInfo {
 
   public getCommonCurveData = (
     options: ICurve,
-    parser: (option: ICurve, data: any[]) => EChartOption,
+    parser: (option: ICurve, data: any[]) => EChartsOption,
     reload?: boolean) => {
     const { path } = options;
     this.setCurveData(path, null);

kafka-manager-console/webpack.config.js

@@ -122,11 +122,11 @@ module.exports = {
     },
   },
   devServer: {
-    contentBase: outPath,
+    // contentBase: outPath,
     host: '127.0.0.1',
     port: 1025,
     hot: true,
-    disableHostCheck: true,
+    // disableHostCheck: true,
     historyApiFallback: true,
     proxy: {
       '/api/v1/': {