(function () {
	const enumConst = {

		/**
		 * @description 图表cell 默认宽度
		 */
		CHART_CELL_DEFAULT_WIDTH: 400,

		/**
		 * @description 图表cell 默认高度
		 */
		CHART_CELL_DEFAULT_HEIGHT: 400,

		/**
		 * @description 图表cell的 width attribute
		 */
		CHART_CELL_WIDTH: 'width',

		/**
		 * @description 图表cell的 height attribute
		 */
		CHART_CELL_HEIGHT: 'height',

		/**
		 * @description cell id key
		 */
		CHART_INSTANCE_ID: 'chartInstanceId',

		/**
		 * @description 图表容器 class name
		 */
		CHART_CONTAINER_CLS: 'echarts__instance',

		/**
		 * @description 图表容器  id 前缀
		 */
		CHART_CONTAINER_ID_PREFIX: 'echarts__instance__',

		/**
		 * @description 图表图片占位符大小
		 */
		CHART_IMG_PLACEHOLDER_SIZE: 30,
	}

	Sidebar.prototype.enumFlowmeterAttr = {
		WIDTH: 'width',
		HEIGHT: 'height',
		VALUE: 'value',
		TYPE: 'type',
		UUID: 'uuid',
		BG_COLOR: 'bgColor',
		WAVE_FIRST_COLOR: 'waveFirstColor',
		WAVE_SECOND_COLOR: 'waveSecondColor',
		WAVE_THIRD_COLOR: 'waveThirdColor',
	}

	Sidebar.prototype.enumFlowmeterType = {
		RECT: 'rect',
		CIRCLE: 'circle',
		THERMOMETER: 'thermometer'
	}

	// Adds Atlassian shapes
	// 图表
	Sidebar.prototype.addChartsPalette = function () {
		this.chartsComponentInit()

		const self = this
		const componentType = this.enumComponentType
		const { DATA_SOURCE, DYNAMIC_EFFECT, DISPLAY_TYPE } = this.enumPermissionPanel

		const s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
		const s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
		const s3 = mxConstants.STYLE_STROKEWIDTH + '=1;shadow=0;dashed=0;align=center;html=1;' + mxConstants.STYLE_SHAPE + "=mxgraph.mockup.";
		const gn = 'mxgraph.charts';
		const dt = 'charts ';
		const sb = this;

		this.setCurrentSearchEntryLibrary('charts');

		const fns = [
			this.addEntry('line chart', mxUtils.bind(this, function () {
				const id = self.generatorChartsId()
				const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.LINE_CHART)
				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '折线图');
			})),
			this.addEntry('bar chart', mxUtils.bind(this, function () {
				const id = self.generatorChartsId()
				const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.BAR_CHART, `${Proxy_Prefix}/images/thingskit/bar-chart.png`)
				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '柱状图');
			})),
			this.addEntry('dashboard chart', mxUtils.bind(this, function () {
				const id = self.generatorChartsId()
				const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.DASHBOARD_CHART, `${Proxy_Prefix}/images/thingskit/dashboard-chart.png`)
				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '仪表盘');
			})),
			this.addEntry('flowmeter-circle', mxUtils.bind(this, function () {
				const cell = self.generateFlowmeterCell(100, 100, Sidebar.prototype.enumFlowmeterType.CIRCLE)
				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '流量计');
			})),
			this.addEntry('flowmeter-rect', mxUtils.bind(this, function () {
				const cell = self.generateFlowmeterCell(100, 100, Sidebar.prototype.enumFlowmeterType.RECT)
				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '流量计');
			})),
			this.addEntry('flowmeter-thermometer', mxUtils.bind(this, function () {
				const cell = self.generateFlowmeterCell(100, 100, Sidebar.prototype.enumFlowmeterType.THERMOMETER)
				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '流量计');
			})),
		];

		this.addPaletteFunctions('charts', '图表', false, fns);

		this.setCurrentSearchEntryLibrary();
	};

	/**
	 * @description echarts 实例映射
	 * @type {Map<any, any>}
	 */
	Sidebar.prototype.chartsInstanceMapping = new Map()

	/**
	 * @description 图表options 映射
	 * @type {{[p: string]: (function(): {yAxis: {type: string}, xAxis: {data, type: string}, series: [{data, type: string}]})|(function(): {yAxis: {type: string}, xAxis: {data, type: string}, series: [{data, showBackground: boolean, backgroundStyle: {color: string}, type: string}]})}}
	 */
	Sidebar.prototype.chartOptionMapping = {
		[Sidebar.prototype.enumComponentType.LINE_CHART]: function () {
			return getLineChartDefaultOption()
		},
		[Sidebar.prototype.enumComponentType.BAR_CHART]: function () {
			return getBarChartDefaultOption();
		},
		[Sidebar.prototype.enumComponentType.DASHBOARD_CHART]: function () {
			return getDashboardDefaultOption()
		},
	}

	/**
	 * @description 创建cell
	 * @param id
	 * @param width
	 * @param height
	 * @param chartType
	 * @param placeholderPath
	 * @returns {*}
	 */
	Sidebar.prototype.generatorCell = function (id, width, height, chartType, placeholderPath) {
		const cell = new mxCell(this.createChartsNode(id, width, height, placeholderPath), new mxGeometry(0, 0, width, height), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
		cell.setVertex(true)
		const basicAttr = this.enumCellBasicAttribute
		this.setCellAttributes(cell, {
			[basicAttr.COMPONENT_TYPE]: chartType,
			[basicAttr.CHART_INSTANCE_ID]: id,
			[enumConst.CHART_CELL_WIDTH]: width,
			[enumConst.CHART_CELL_HEIGHT]: height,
		})
		return cell
	}


	/**
	 * @description 生成图表 id
	 * @returns {string}
	 */
	Sidebar.prototype.generatorChartsId = function () {
		return `${enumConst.CHART_CONTAINER_ID_PREFIX}${Date.now()}`
	}

	/**
	 * @description 创建图表节点
	 * @param id
	 * @param width
	 * @param height
	 * @param placeholderPath
	 * @returns {string}
	 */
	Sidebar.prototype.createChartsNode = function (id, width = 400, height = 400, placeholderPath = `${Proxy_Prefix}/images/thingskit/line-chart.png`) {
		return `<div class="echarts__instance" style="width: ${width}px; height: ${height}px" id="${id}"><img src="${placeholderPath}" alt=""></div>`
	}

	/**
	 * @description 是否是图表cell
	 * @param cell
	 * @returns {boolean}
	 */
	Sidebar.prototype.isChartCell = function (cell) {
		const basicAttr = this.enumCellBasicAttribute
		const componentType = this.enumComponentType
		const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = componentType
		const currentType = cell.getAttribute(basicAttr.COMPONENT_TYPE)
		return !!(currentType && ([LINE_CHART, BAR_CHART, DASHBOARD_CHART].includes(currentType)))
	}

	/**
	 * @description 创建图表实例 并 保存实例到map中
	 * @param id
	 * @param width
	 * @param height
	 * @param chartType
	 */
	Sidebar.prototype.generatorEChartInstance = function (id, width, height, chartType) {
		const chartOptionMapping = this.chartOptionMapping
		const chartsInstanceMapping = this.chartsInstanceMapping
		const chartDom = document.getElementById(id);
		if (!chartDom) return
		chartDom.style.width = `${width}px`
		chartDom.style.height = `${height}px`
		try {
			const myChart = echarts.init(chartDom);
			const option = chartOptionMapping[chartType] ? chartOptionMapping[chartType]() : {}
			option && myChart.setOption(option);
			chartsInstanceMapping.set(id, myChart)
		} catch (error) {

		}

	}

	/**
	 * @description 获取charts cell 的id
	 * @param cell
	 * @returns {*}
	 */
	Sidebar.prototype.getCellId = function (cell) {
		const basicAttr = this.enumCellBasicAttribute
		return this.graph.getAttributeForCell(cell, basicAttr.CHART_INSTANCE_ID)
	}

	/**
	 * @description 图表组件 拓展处理
	 */
	Sidebar.prototype.chartsComponentInit = function () {
		const chartsInstanceMapping = this.chartsInstanceMapping
		const graph = this.graph
		const self = this
		const basicAttr = this.enumCellBasicAttribute
		/**
		 * @description 拓展添加charts 实例方法
		 */
		const addClickHandler = Sidebar.prototype.addClickHandler
		Sidebar.prototype.addClickHandler = function (elt, ds, cells) {
			const cell = cells[0]
			const cellValue = cell.value
			const validateChart = cellValue && cellValue.nodeName === 'UserObject' && this.isChartCell(cell)
			const validateFlowmeter = cellValue && cellValue.nodeName === 'UserObject' && this.isFlowmeter(cell)

			/**
			 * @description 拓展Sidebar鼠标按下
			 * @type {ds.mouseDown | Function}
			 */
			const mouseDown = ds.mouseDown
			ds.mouseDown = function (evt) {
				if (validateChart) {
					const id = self.generatorChartsId()
					const geo = Object.assign(graph.model.getGeometry(cell), { width: 400, height: 400 })
					cell.setGeometry(geo)
					self.graph.setAttributeForCell(cell, basicAttr.CHART_INSTANCE_ID, id);
					self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, enumConst.CHART_CELL_DEFAULT_WIDTH);
					self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, enumConst.CHART_CELL_DEFAULT_HEIGHT);
					self.graph.setAttributeForCell(cell, 'label', self.createChartsNode(id))
				}

				if (validateFlowmeter) {
					const { UUID, TYPE } = getFlowmeterAttrKey()
					const id = uuid()
					const type = self.graph.getAttributeForCell(cell, TYPE)
					self.graph.setAttributeForCell(cell, UUID, id);
					self.graph.setAttributeForCell(cell, 'label', Sidebar.prototype.generateFlowmeterTemplate(id, type));
				}
				mouseDown.apply(this, arguments)
			};

			/**
			 * @description 拓展放置图表
			 * @type {ds.mouseUp | Function}
			 */
			const mouseUp = ds.mouseUp
			ds.mouseUp = function () {
				try {
					mouseUp.apply(this, arguments)
				} finally {
					if (validateChart) {
						const id = self.getCellId(cell)
						const chartType = cell.getAttribute(basicAttr.COMPONENT_TYPE)
						self.generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)

					}
				}
			}
			addClickHandler.apply(this, arguments)
		}

		/**
		 * @description charts cell发生resize时改变charts size
		 * @type {Function}
		 */
		const cellResized = mxGraph.prototype.cellResized
		mxGraph.prototype.cellResized = function (cell, rect) {
			if (Sidebar.prototype.isChartCell(cell)) {
				const { width, height } = rect
				const id = self.getCellId(cell)
				const chartDom = document.getElementById(id)
				chartDom.style.width = `${width}px`
				chartDom.style.height = `${height}px`
				self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
				self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
				const instance = chartsInstanceMapping.get(id)

				instance && instance.resize()
			}
			cellResized.apply(this, arguments)
		}

		/**
		 * @description 删除charts cell 时 删除保存的charts 实例
		 */
		const deleteCells = Graph.prototype.deleteCells
		Graph.prototype.deleteCells = function (cell) {
			const id = self.getCellId(cell)
			chartsInstanceMapping.delete(id)
			return deleteCells.apply(this, arguments)
		}


		/**
		 * @description 拓展Sidebar 提示框
		 */
		const createTooltip = Sidebar.prototype.createTooltip
		Sidebar.prototype.createTooltip = function (elt, cells) {
			const id = self.generatorChartsId()
			const validateFlag = self.isChartCell(cells[0])

			const chartType = graph.getAttributeForCell(cells[0], basicAttr.COMPONENT_TYPE)
			try {
				if (validateFlag) {
					const cell = self.generatorCell(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
					const _arguments = Array.prototype.slice.call(arguments, 0)
					_arguments.splice(1, 1, [cell])
					createTooltip.apply(this, _arguments)
				} else {
					createTooltip.apply(this, arguments)
				}
			} finally {
				if (validateFlag) self.generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
			}
		}
	}

	/**
	 * @description 实例化echarts
	 * @param graph
	 */
	Sidebar.prototype.initChartInstance = function (graph) {
		const basicAttr = this.enumCellBasicAttribute
		const allCell = Object.entries(((graph || {}).getModel() || {}).cells || {}).map(([_, item]) => item) || []
		const domIdMapping = new Map()
		for (const cell of allCell) {
			const chartInstanceId = graph.getAttributeForCell(cell, basicAttr.CHART_INSTANCE_ID)
			if (Sidebar.prototype.isChartCell(cell) && chartInstanceId) {
				const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)
				const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)
				const chartType = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
				domIdMapping.set(chartInstanceId, { width, height, chartType })
			}
		}

		const chartsDomList = document.querySelectorAll(`.${enumConst.CHART_CONTAINER_CLS}`)
		for (const chartDom of chartsDomList) {
			const id = chartDom.getAttribute('id')
			if (!domIdMapping.has(id)) {
				continue
			}
			const { width, height, chartType } = domIdMapping.get(id)
			Sidebar.prototype.generatorEChartInstance(id, width, height, chartType)
		}
		// Sidebar.prototype.initFlowmeter(graph)
	}

	/**
	 * @description 初始化图表
	 */
	const openFileHandle = EditorUi.prototype.openFileHandle
	EditorUi.prototype.openFileHandle = function () {
		try {
			openFileHandle.apply(this, arguments)
		} finally {
			const graph = this.editor.graph
			Sidebar.prototype.initChartInstance(graph)
		}
	}

	/**
	 * @description 实例化 echarts
	 */
	const refresh = Graph.prototype.refresh
	Graph.prototype.refresh = function () {
		refresh.apply(this, arguments)
		if (!arguments.length) {
			Sidebar.prototype.initChartInstance(this)
			Sidebar.prototype.resetFlowmeter(this)
		}
	}

	/**
	 * @description 导入文件时初始化图表
	 */
	const setFileData = EditorUi.prototype.setFileData
	EditorUi.prototype.setFileData = function () {
		setFileData.apply(this, arguments)
		Sidebar.prototype.initChartInstance(this.editor.graph)
		Sidebar.prototype.resetFlowmeter(this.editor.graph)
	}

	// const selectPage = EditorUi.prototype.selectPage
	// EditorUi.prototype.selectPage = function () {
	// 	try {
	// 		selectPage.apply(this, arguments)
	// 	} finally {
	// 		Sidebar.prototype.chartsInstanceMapping.clear()
	// 		const graph = this.editor.graph
	// 		Sidebar.prototype.initChartInstance(graph)
	// 	}
	// }
	function getLineChartDefaultOption() {
		var isLightBox = !!(urlParams || {})['lightbox']
		return {
			title: isLightBox ? {
				text: '暂无数据',
				x: 'center',
				y: 'center',
				subtextStyle: {
					fontSize: 16
				}
			} : {},
			xAxis: {
				type: 'category',
				data: isLightBox ? [] : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			},
			yAxis: {
				type: 'value',
			},
			series: [
				{
					data: isLightBox ? [] : [150, 230, 224, 218, 135, 147, 260],
					type: 'line',
				},
			],
		}
	}

	function getBarChartDefaultOption() {
		var isLightBox = !!(urlParams || {})['lightbox']
		return {
			title: isLightBox ? {
				text: '暂无数据',
				x: 'center',
				y: 'center',
				subtextStyle: {
					fontSize: 16
				}
			} : {},
			xAxis: {
				type: 'category',
				data: isLightBox ? [] : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			},
			yAxis: {
				type: 'value',
			},
			series: [
				{
					data: isLightBox ? [] : [120, 200, 150, 80, 70, 110, 130],
					type: 'bar',
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(180, 180, 180, 0.2)',
					},
				},
			],
		}
	}

	function getDashboardDefaultOption() {
		return {
			series: [
				{
					type: 'gauge',
					center: ['50%', '60%'],
					radius: '100%',
					startAngle: 200,
					endAngle: -20,
					min: 0,
					max: 100,
					splitNumber: 10,
					itemStyle: {
						color: '#5479c6'
						// color: '#FFAB91'
					},
					progress: {
						show: true,
						width: 30
					},
					pointer: {
						show: false
					},
					axisLine: {
						lineStyle: {
							width: 30
						}
					},
					axisTick: {
						distance: 0,
						splitNumber: 5,
						lineStyle: {
							width: 2,
							color: '#999'
						}
					},
					splitLine: {
						distance: 0,
						length: 14,
						lineStyle: {
							width: 3,
							color: '#999'
						}
					},
					axisLabel: {
						distance: 35,
						color: '#999',
						fontSize: 20
					},
					anchor: {
						show: false
					},
					title: {
						show: false
					},
					detail: {
						valueAnimation: true,
						width: '60%',
						lineHeight: 40,
						borderRadius: 8,
						offsetCenter: [0, '-15%'],
						fontSize: 25,
						fontWeight: 'bolder',
						formatter: '{value} °C',
						color: 'inherit'
					},
					data: [
						{
							value: 20
						}
					]
				},
			]
		}
	}

	function uuid() {
		return Number(Math.random().toString().substring(2)).toString(32)
	}

	/**
	 * @description 生成流量计模版
	 */
	Sidebar.prototype.generateFlowmeterTemplate = function (id = uuid(), type) {
		const flowmeterType = Sidebar.prototype.enumFlowmeterType
		const typeGenFn = {
			[flowmeterType.CIRCLE]: Sidebar.prototype.generateFlowmeterCircle,
			[flowmeterType.RECT]: Sidebar.prototype.generateFlowmeterRect,
			[flowmeterType.THERMOMETER]: Sidebar.prototype.generateFlowmeterThermometer,
		}
		const template = `<div class="flowmeter" style="transform: scale(0.9);font-size: 0;" id="${id}">${typeGenFn[type] && typeGenFn[type]()}</div>`
		return template
	}

	Sidebar.prototype.generateFlowmeterCell = function (width = 100, height = 100, type) {
		const id = uuid()
		const template = Sidebar.prototype.generateFlowmeterTemplate(id, type)
		const cell = new mxCell(template, new mxGeometry(0, 0, width, height), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
		cell.setVertex(true)
		const componentType = Sidebar.prototype.enumComponentType
		const { WIDTH, HEIGHT, VALUE, TYPE, COMPONENT_TYPE, UUID } = getFlowmeterAttrKey()
		this.graph.setAttributeForCell(cell, WIDTH, width);
		this.graph.setAttributeForCell(cell, HEIGHT, height);
		this.graph.setAttributeForCell(cell, VALUE, 20);
		this.graph.setAttributeForCell(cell, TYPE, type);
		this.graph.setAttributeForCell(cell, UUID, id);
		this.graph.setAttributeForCell(cell, COMPONENT_TYPE, componentType.FLOWMETER);
		return cell
	}

	Sidebar.prototype.generateFlowmeterRect = function () {
		return `
		<svg class="waves-rect" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  style="--width: 100; --height: 100; --value: 20; --play-state: running; --full-flag: clamp(0, calc(100 - var(--value)), 1); --over-min-flag: clamp(0, calc(calc(var(--value) - 1) * -1), 1);">
  <defs>
    <style>
      .waves-rect {
        width: calc(var(--width) * 1px);
        height: calc(var(--height) * 1px);
      }

      @keyframes move {
        from {
          transform: translate(-90px, 0%);
        }

        to {
          transform: translate(85px, 0%);
        }
      }

      .wave {
        animation: move 3s linear infinite;
        animation-play-state: running;
      }

      .wave:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 9s;
      }

      .wave:nth-child(2) {
        animation-delay: -4s;
        animation-duration: 6s;
      }

      .wave:nth-child(3) {
        animation-delay: -6s;
        animation-duration: 3s;
      }

      .waves-rect>g+rect {
        transform: translateY(calc(calc(100 - var(--value)) * var(--full-flag) * 1% + var(--full-flag) * 15%));
        transition: transform linear 1s;
      }

      .height {
        transform: translateY(calc(var(--value) * -1% - 10% + var(--over-min-flag) * 10%));
        transition: transform linear 1s;
      }

      .waves-rect .text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
      }

      .waves-rect .text::after {
        counter-reset: value var(--value);
        content: counter(value) ' %';
      }
    </style>
    <path id="wave" d="M-160 118c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v100h-352z" />
  </defs>
  <rect class="bgColor" x="0" y="0" width="100" height="100" fill="#8badcb"></rect>
  <g class="height">
    <use class="wave waveFirst" xlink:href="#wave" fill="#4579e2" x="0" y="0"></use>
    <use class="wave waveSecond" xlink:href="#wave" fill="#3461c1" x="0" y="2"></use>
    <use class="wave waveThird" xlink:href="#wave" fill="#2d55aa" x="0" y="4"></use>
  </g>
  <rect class="waveThird" x="0" y="0" width="100" height="100" fill="#2d55aa"></rect>
  <foreignObject x="0" y="0" width="100" height="100" text-anchor="middle" dominant-baseline="middle">
    <div xmlns="http://www.w3.org/1999/xhtml" class="text"></div>
  </foreignObject>
</svg>
		`.replace(/\n/g, '')
	}

	Sidebar.prototype.generateFlowmeterCircle = function () {
		return `
		<svg class="waves-circle" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		style="--width: 100; --height: 100; --value: 20; --play-state: running; --full-flag: clamp(0, calc(100 - var(--value)), 1); --over-min-flag: clamp(0, calc(calc(var(--value) - 1) * -1), 1)">
		<style>
			.waves-circle {
				width: calc(min(var(--width), var(--height)) * 1px);
				height: calc(min(var(--width), var(--height)) * 1px);
				clip-path: circle(calc(min(var(--width), var(--height)) / 2 * 1px));
			}
	
			@keyframes move {
				from {
					transform: translate(-90px, 0%);
				}
	
				to {
					transform: translate(85px, 0%);
				}
			}
	
			.wave {
				animation: move 3s linear infinite;
				animation-play-state: var(--play-state);
			}
	
			.wave:nth-child(1) {
				animation-delay: -2s;
				animation-duration: 9s;
			}
	
			.wave:nth-child(2) {
				animation-delay: -4s;
				animation-duration: 6s;
			}
	
			.wave:nth-child(3) {
				animation-delay: -6s;
				animation-duration: 3s;
			}
	
			.height {
				transform: translateY(calc(var(--value) * -1% - 10% + var(--over-min-flag) * 10%));
				transition: transform linear 1s;
			}
	
			.waves-circle>g+rect {
				transform: translateY(calc(calc(100 - var(--value)) * var(--full-flag) * 1% + var(--full-flag) * 15%));
				transition: transform linear 1s;
			}
	
			.waves-circle .text {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				color: #fff;
				font-size: 18px;
				font-weight: 700;
			}
	
			.waves-circle .text::after {
				counter-reset: value var(--value);
				content: counter(value) ' %';
			}
		</style>
		<defs>
			<path id="wave" d="M-160 118c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v100h-352z" />
		</defs>
		<circle class="bgColor"  cx="50" cy="50" r="50" fill="#8badcb" />
		<g class="height">
			<use class="wave waveFirst" xlink:href="#wave" fill="#4579e2" x="0" y="0"></use>
			<use class="wave waveSecond" xlink:href="#wave" fill="#3461c1" x="0" y="2"></use>
			<use class="wave waveThird" xlink:href="#wave" fill="#2d55aa" x="0" y="4"></use>
		</g>
		<rect class="waveThird" x="0" y="0" width="100" height="100" fill="#2d55aa"></rect>
		<foreignObject x="0" y="0" width="100" height="100" text-anchor="middle" dominant-baseline="middle">
			<div xmlns="http://www.w3.org/1999/xhtml" class="text"></div>
		</foreignObject>
	</svg>	
		`.replace(/\n/g, '')
	}

	Sidebar.prototype.generateFlowmeterThermometer = function () {
		return `
			<svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg"
		style="--range: 4; --min: 50; --max: 70; --width: 100; --height: 100; --value: 50;">
		<style>
			.flowmeter-thermometer {
				width: calc(min(var(--width), var(--height)) * 1px);
				height: calc(min(var(--width), var(--height)) * 1px);
			}

			.thermometer-mercury-column {
				y: var(--value);
			}

			.tick-label {
				font-size: 12px;
				text-align: right;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #5b6b73;
			}

			.thermometer-mercury-column {
				transition: y .5s cubic-bezier(0.52, 0.05, 0.47, 0.99);
			}
		</style>
		<defs>
			<radialGradient id="thermometerdiv_meter_2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
				<stop offset="0%" style="stop-color: rgb(230, 200, 200);"></stop>
				<stop offset="90%" style="stop-color: rgb(230, 0, 0);"></stop>
			</radialGradient>
			<clipPath id="over">
				<rect width="100" height="190" x="100" y="10" />
			</clipPath>
		</defs>
		<circle r="9.25" cx="109" cy="14.25" style="fill: rgb(255, 255, 255); stroke: rgb(136, 136, 136); stroke-width: 1px;">
		</circle>
		<rect x="99.75" y="14.25" height="192.75" width="18.5"
			style="shape-rendering: crispedges; fill: rgb(255, 255, 255); stroke: rgb(136, 136, 136); stroke-width: 1px;">
		</rect>
		<circle r="8.75" cx="109" cy="14.25" style="fill: rgb(255, 255, 255); stroke: none;"></circle>
		<circle r="18" cx="109" cy="207" style="fill: rgb(255, 255, 255); stroke: rgb(136, 136, 136);"></circle>
		<rect x="100.25" y="14.25" height="192.75" width="17.5"
			style="shape-rendering: crispedges; fill: rgb(255, 255, 255); stroke: none;"></rect>
		<line class="thermometer-min-line" x1="99.75" x2="140.25" y1="165" y2="165"
			style="stroke: rgb(136, 136, 136); stroke-width: 1px; shape-rendering: crispedges;"></line>
		<text class="thermometer-min-label" x="120.25" y="168.46428571428572" dy="0.72em"
			style="fill: rgb(0, 0, 230); font-size: 10px;">min</text>
		<line class="thermometer-max-line" x1="99.75" x2="140.25" y1="40" y2="40"
			style="stroke: rgb(136, 136, 136); stroke-width: 1px; shape-rendering: crispedges;"></line>
		<text class="thermometer-max-label" x="120.25" y="35.285714285714306"
			style="fill: rgb(230, 0, 0); font-size: 10px;">max</text>
		<rect class="thermometer-mercury-column" x="104" y="15" width="10.5" height="190"
			style="shape-rendering: crispedges; fill: rgb(230, 0, 0);" clip-path="url(#over)"></rect>
		<circle r="13" cx="109" cy="207"
			style="fill: url(&quot;#thermometerdiv_meter_2&quot;); stroke: rgb(230, 0, 0); stroke-width: 2px;"></circle>
		<g class="thermometer-temperature-axis" transform="translate(99.75,0)" fill="none" font-size="10"
			font-family="sans-serif" text-anchor="end">
			<g class="tick" opacity="1" transform="translate(0,190)">
				<line stroke="currentColor" x2="-7"
					style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
				<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
					<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">-20</div>
				</foreignObject>
			</g>
			<g class="tick" opacity="1" transform="translate(0,165)">
				<line stroke="currentColor" x2="-7"
					style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
				<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
					<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">0</div>
				</foreignObject>
			</g>
			<g class="tick" opacity="1" transform="translate(0,140)">
				<line stroke="currentColor" x2="-7"
					style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
				<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
					<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">20</div>
				</foreignObject>
			</g>
			<g class="tick" opacity="1" transform="translate(0,115)">
				<line stroke="currentColor" x2="-7"
					style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
				<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
					<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">40</div>
				</foreignObject>
			</g>
			<g class="tick" opacity="1" transform="translate(0,90)">
				<line stroke="currentColor" x2="-7"
					style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
				<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
					<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">60</div>
				</foreignObject>
			</g>
			<g class="tick" opacity="1" transform="translate(0,65)">
				<line stroke="currentColor" x2="-7"
					style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
				<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
					<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">80</div>
				</foreignObject>
			</g>
			<g class="tick" opacity="1" transform="translate(0,40)">
				<line stroke="currentColor" x2="-7"
					style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
				<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
					<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">100</div>
				</foreignObject>
			</g>
			<g class="tick" opacity="1" transform="translate(0,15)">
				<line stroke="currentColor" x2="-7"
					style="stroke: rgb(136, 136, 136); shape-rendering: crispedges; stroke-width: 1px;"></line>
				<foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
					<div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">120</div>
				</foreignObject>
			</g>
		</g>
	</svg>
		`.replace(/\n/g, '')
	}

	Sidebar.prototype.resetFlowmeter = function (graph) {
		const { COMPONENT_TYPE, UUID, WIDTH, HEIGHT } = getFlowmeterAttrKey()
		const componentType = Sidebar.prototype.enumComponentType
		const cells = Object.entries(graph.getModel().cells || {}).map(([_, item]) => item) || []
		const needReset = cells.filter(item => item.value && item.getAttribute(COMPONENT_TYPE) === componentType.FLOWMETER)

		needReset.forEach(item => {
			const id = item.getAttribute(UUID)
			const element = document.getElementById(id).querySelector('svg')
			if (element) {
				const width = item.getAttribute(WIDTH)
				const height = item.getAttribute(HEIGHT)

				element.style.setProperty('--width', width)
				element.style.setProperty('--height', height)
			}
		})
	}

	Sidebar.prototype.isFlowmeter = function (cell) {
		const basicAttr = Sidebar.prototype.enumCellBasicAttribute
		const componentType = Sidebar.prototype.enumComponentType
		return cell.getAttribute(basicAttr.COMPONENT_TYPE) === componentType.FLOWMETER
	}

	Sidebar.prototype.updateFlowmeterCell = function (cell, { width, height, value, type }) {
		const { WIDTH, HEIGHT, VALUE, TYPE, UUID } = getFlowmeterAttrKey()
		const id = cell.getAttribute(UUID)
		const element = document.getElementById(id).querySelector('svg')
		if (element) {
			width && element.style.setProperty('--width', width)
			height && element.style.setProperty('--height', height)
			value && element.style.setProperty('--value', value)
			width && cell.setAttribute(WIDTH, width)
			height && cell.setAttribute(HEIGHT, height)
			value && cell.setAttribute(VALUE, value)
			type && cell.setAttribute(TYPE, type)
		}
	}

	/**
	* @description charts cell发生resize时改变charts size
	* @type {Function}
	*/
	const cellResized = mxGraph.prototype.cellResized
	mxGraph.prototype.cellResized = function (cell, rect) {

		if (Sidebar.prototype.isFlowmeter(cell)) {
			const { width, height } = rect
			Sidebar.prototype.updateFlowmeterCell(cell, { width, height })
		}
		cellResized.apply(this, arguments)
	}
})();

/**
 * @description 获取流量计属性key
 * @returns {{WIDTH: 'width', HEIGHT: 'height', VALUE: 'value', TYPE: 'type', UUID: 'uuid', COMPONENT_TYPE: 'componentType', BG_COLOR: 'bgColor', WAVE_FIRST_COLOR: 'waveFirstColor', WAVE_SECOND_COLOR: 'waveSecondColor', WAVE_THIRD_COLOR: 'waveThirdColor'}}
 */
function getFlowmeterAttrKey() {
	const basicAttr = Sidebar.prototype.enumCellBasicAttribute
	const flowmeterAttr = Sidebar.prototype.enumFlowmeterAttr
	return {
		WIDTH: flowmeterAttr.WIDTH,
		HEIGHT: flowmeterAttr.HEIGHT,
		VALUE: flowmeterAttr.VALUE,
		TYPE: flowmeterAttr.TYPE,
		UUID: flowmeterAttr.UUID,
		BG_COLOR: flowmeterAttr.BG_COLOR,
		WAVE_FIRST_COLOR: flowmeterAttr.WAVE_FIRST_COLOR,
		WAVE_SECOND_COLOR: flowmeterAttr.WAVE_SECOND_COLOR,
		WAVE_THIRD_COLOR: flowmeterAttr.WAVE_THIRD_COLOR,
		COMPONENT_TYPE: basicAttr.COMPONENT_TYPE,
	}
}

/**
 * @description 获取流量计类型
 * @returns {{RECT: 'rect', CIRCLE: 'circle'}}
 */
function getFlowmeterType() {
	const type = Sidebar.prototype.enumFlowmeterType
	return {
		RECT: type.RECT,
		CIRCLE: type.CIRCLE
	}
}