diff --git a/kafka-manager-console/package.json b/kafka-manager-console/package.json index d768bc73..c3c94acc 100644 --- a/kafka-manager-console/package.json +++ b/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 +} diff --git a/kafka-manager-console/src/component/chart/bar-chart.tsx b/kafka-manager-console/src/component/chart/bar-chart.tsx index c2f67099..d31fcfd7 100644 --- a/kafka-manager-console/src/component/chart/bar-chart.tsx +++ b/kafka-manager-console/src/component/chart/bar-chart.tsx @@ -1,14 +1,29 @@ 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 { 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 { 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)) { diff --git a/kafka-manager-console/src/component/chart/date-picker-chart.tsx b/kafka-manager-console/src/component/chart/date-picker-chart.tsx index cda4a6d0..39878805 100644 --- a/kafka-manager-console/src/component/chart/date-picker-chart.tsx +++ b/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 { const noData = options.series.length ? false : true; this.setState({ noData }); options.tooltip.formatter = (params: any) => { - var res = - "

" + + let res = + '

' + params[0].data.time + - "

"; - for (var i = 0; i < params.length; i++) { + '

'; + // tslint:disable-next-line:prefer-for-of + for (let i = 0; i < params.length; i++) { res += `
; } - 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 ( <> diff --git a/kafka-manager-console/src/container/common-curve/config.ts b/kafka-manager-console/src/container/common-curve/config.ts index b5206f4f..79b0d1fe 100644 --- a/kafka-manager-console/src/container/common-curve/config.ts +++ b/kafka-manager-console/src/container/common-curve/config.ts @@ -1,5 +1,4 @@ -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; diff --git a/kafka-manager-console/src/container/common-curve/index.tsx b/kafka-manager-console/src/container/common-curve/index.tsx index 910aa70d..6dc09b90 100644 --- a/kafka-manager-console/src/container/common-curve/index.tsx +++ b/kafka-manager-console/src/container/common-curve/index.tsx @@ -1,4 +1,4 @@ -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 { fullScreen.show(this.renderCurve(options, loading, true)); } - public renderOpBtns = (options: EChartOption, expand = false) => { + public renderOpBtns = (options: EChartsOption, expand = false) => { const data = hasData(options); return (
@@ -85,7 +85,7 @@ export class CommonCurve extends React.Component { return
; } - 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 { return ; } - public renderCurve = (options: EChartOption, loading: boolean, expand = false) => { + public renderCurve = (options: any, loading: boolean, expand = false) => { const data = hasData(options); return (
diff --git a/kafka-manager-console/src/store/curve-info.ts b/kafka-manager-console/src/store/curve-info.ts index 9531c849..fc4c57a9 100644 --- a/kafka-manager-console/src/store/curve-info.ts +++ b/kafka-manager-console/src/store/curve-info.ts @@ -1,6 +1,6 @@ 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); diff --git a/kafka-manager-console/webpack.config.js b/kafka-manager-console/webpack.config.js index a07d9990..d6d12fa8 100644 --- a/kafka-manager-console/webpack.config.js +++ b/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/': {