Merge branch 'ww' into 'main'

feat: implement chart component render && fix some problem

See merge request huang/thingskit-drawio!26

+<svg viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient-1-1" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#EEEFF3" offset="100%"></stop></linearGradient><linearGradient id="linearGradient-2-1" x1="0%" y1="9.5%" x2="100%" y2="90.5%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#E9EBEF" offset="100%"></stop></linearGradient><rect id="path-3-1" x="0" y="0" width="17" height="36"></rect></defs><g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="B-type" transform="translate(-1268.000000, -535.000000)"><g id="Group-2" transform="translate(1268.000000, 535.000000)"><path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC"></path><polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45"></polygon><g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"><polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7"></polygon><polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon><rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-1)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36"></rect><polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"></polygon></g><rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-1)" x="13" y="45" width="40" height="36"></rect><g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)"><mask id="mask-4-1" fill="white"><use xlink:href="#path-3-1"></use></mask><use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-1"></use><polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-1)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16"></polygon></g><polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58"></polygon></g></g></g></svg>

@@ -5030,6 +5030,9 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 			lastModifiedDate: new Date()
 			lastModifiedDate: new Date()
 		};
 		};
 		this.openFileHandle(Editor.defaultContent, Editor.configurationName, file, false, fileHandle);
 		this.openFileHandle(Editor.defaultContent, Editor.configurationName, file, false, fileHandle);
+		// TODO thingsKit 初始化图表
+		const graph = this.editor.graph
+		Sidebar.prototype.initChartInstance(graph)
 		//加载数据结束
 		//加载数据结束
 
 
 		// if (id == null || id.length == 0)
 		// if (id == null || id.length == 0)

@@ -8,10 +8,9 @@
  * @param {number} x X-coordinate of the point.
  * @param {number} x X-coordinate of the point.
  * @param {number} y Y-coordinate of the point.
  * @param {number} y Y-coordinate of the point.
  */
  */
-LocalFile = function(ui, data, title, temp, fileHandle, desc)
-{
+LocalFile = function (ui, data, title, temp, fileHandle, desc) {
 	DrawioFile.call(this, ui, data);
 	DrawioFile.call(this, ui, data);
-	
+
 	this.title = title;
 	this.title = title;
 	this.mode = (temp) ? null : App.MODE_DEVICE;
 	this.mode = (temp) ? null : App.MODE_DEVICE;
 	this.fileHandle = fileHandle;
 	this.fileHandle = fileHandle;
@@ -27,8 +26,7 @@ mxUtils.extend(LocalFile, DrawioFile);
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.isAutosave = function()
-{
+LocalFile.prototype.isAutosave = function () {
 	return this.fileHandle != null && !this.invalidFileHandle && DrawioFile.prototype.isAutosave.apply(this, arguments);
 	return this.fileHandle != null && !this.invalidFileHandle && DrawioFile.prototype.isAutosave.apply(this, arguments);
 };
 };
 
 
@@ -36,8 +34,7 @@ LocalFile.prototype.isAutosave = function()
  * Specifies if the autosave checkbox should be shown in the document
  * Specifies if the autosave checkbox should be shown in the document
  * properties dialog. Default is false.
  * properties dialog. Default is false.
  */
  */
-LocalFile.prototype.isAutosaveOptional = function()
-{
+LocalFile.prototype.isAutosaveOptional = function () {
 	return this.fileHandle != null;
 	return this.fileHandle != null;
 };
 };
 
 
@@ -47,8 +44,7 @@ LocalFile.prototype.isAutosaveOptional = function()
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.getMode = function()
-{
+LocalFile.prototype.getMode = function () {
 	return this.mode;
 	return this.mode;
 };
 };
 
 
@@ -58,8 +54,7 @@ LocalFile.prototype.getMode = function()
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.getTitle = function()
-{
+LocalFile.prototype.getTitle = function () {
 	return this.title;
 	return this.title;
 };
 };
 
 
@@ -69,8 +64,7 @@ LocalFile.prototype.getTitle = function()
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.isRenamable = function()
-{
+LocalFile.prototype.isRenamable = function () {
 	return true;
 	return true;
 };
 };
 
 
@@ -80,8 +74,7 @@ LocalFile.prototype.isRenamable = function()
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.save = function(revision, success, error)
-{
+LocalFile.prototype.save = function (revision, success, error) {
 	this.saveAs(this.title, success, error);
 	this.saveAs(this.title, success, error);
 };
 };
 
 
@@ -91,8 +84,7 @@ LocalFile.prototype.save = function(revision, success, error)
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.saveAs = function(title, success, error)
-{
+LocalFile.prototype.saveAs = function (title, success, error) {
 	this.saveFile(title, false, success, error);
 	this.saveFile(title, false, success, error);
 };
 };
 
 
@@ -102,24 +94,21 @@ LocalFile.prototype.saveAs = function(title, success, error)
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.saveAs = function(title, success, error)
-{
+LocalFile.prototype.saveAs = function (title, success, error) {
 	this.saveFile(title, false, success, error);
 	this.saveFile(title, false, success, error);
 };
 };
 
 
 /**
 /**
  * Adds all listeners.
  * Adds all listeners.
  */
  */
-LocalFile.prototype.getDescriptor = function()
-{
+LocalFile.prototype.getDescriptor = function () {
 	return this.desc;
 	return this.desc;
 };
 };
 
 
 /**
 /**
 * Updates the descriptor of this file with the one from the given file.
 * Updates the descriptor of this file with the one from the given file.
 */
 */
-LocalFile.prototype.setDescriptor = function(desc)
-{
+LocalFile.prototype.setDescriptor = function (desc) {
 	this.desc = desc;
 	this.desc = desc;
 };
 };
 
 
@@ -129,14 +118,11 @@ LocalFile.prototype.setDescriptor = function(desc)
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.getLatestVersion = function(success, error)
-{
-	if (this.fileHandle == null)
-	{
+LocalFile.prototype.getLatestVersion = function (success, error) {
+	if (this.fileHandle == null) {
 		success(null);
 		success(null);
 	}
 	}
-	else
-	{
+	else {
 		this.ui.loadFileSystemEntry(this.fileHandle, success, error);
 		this.ui.loadFileSystemEntry(this.fileHandle, success, error);
 	}
 	}
 };
 };
@@ -147,69 +133,60 @@ LocalFile.prototype.getLatestVersion = function(success, error)
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.saveFile = function(title, revision, success, error, useCurrentData)
-{
-	if (title != this.title)
-	{
+LocalFile.prototype.saveFile = function (title, revision, success, error, useCurrentData) {
+	if (title != this.title) {
 		this.fileHandle = null;
 		this.fileHandle = null;
 		this.desc = null;
 		this.desc = null;
 	}
 	}
-	
+
 	this.title = title;
 	this.title = title;
 
 
 	// Updates data after changing file name
 	// Updates data after changing file name
-	if (!useCurrentData)
-	{
+	if (!useCurrentData) {
 		this.updateFileData();
 		this.updateFileData();
 	}
 	}
-	
+
 	var binary = this.ui.useCanvasForExport && /(\.png)$/i.test(this.getTitle());
 	var binary = this.ui.useCanvasForExport && /(\.png)$/i.test(this.getTitle());
 	this.setShadowModified(false);
 	this.setShadowModified(false);
 	var savedData = this.getData();
 	var savedData = this.getData();
-	
-	var done = mxUtils.bind(this, function()
-	{
+
+	var done = mxUtils.bind(this, function () {
 		this.setModified(this.getShadowModified());
 		this.setModified(this.getShadowModified());
 		this.contentChanged();
 		this.contentChanged();
-		
-		if (success != null)
-		{
+
+		if (success != null) {
 			success();
 			success();
 		}
 		}
 	});
 	});
-	
-	var doSave = mxUtils.bind(this, function(data)
-	{
-		if (this.fileHandle != null)
-		{
+
+	var doSave = mxUtils.bind(this, function (data) {
+		if (this.fileHandle != null) {
 			// Sets shadow modified state during save
 			// Sets shadow modified state during save
-			if (!this.savingFile)
-			{
+			if (!this.savingFile) {
 				this.savingFileTime = new Date();
 				this.savingFileTime = new Date();
 				this.savingFile = true;
 				this.savingFile = true;
-				
-				var errorWrapper = mxUtils.bind(this, function(e)
-				{
+
+				var errorWrapper = mxUtils.bind(this, function (e) {
 					this.savingFile = false;
 					this.savingFile = false;
-					
-					if (error != null)
-					{
+
+					if (error != null) {
 						// Wraps error object to offer save status option
 						// Wraps error object to offer save status option
-						error({error: e});
+						error({ error: e });
 					}
 					}
 				});
 				});
-				
+
 				// Saves a copy as a draft while saving
 				// Saves a copy as a draft while saving
 				this.saveDraft();
 				this.saveDraft();
 				// 修改开始
 				// 修改开始
-				try
-				{
+				try {
 					//调用API,保存数据到数据库
 					//调用API,保存数据到数据库
-				var desc = {name: Editor.configurationName,
-					type: "",
-					webkitRelativePath: "",
-					lastModified: new Date().getTime(),
-					lastModifiedDate: new Date()};
+					var desc = {
+						name: Editor.configurationName,
+						type: "",
+						webkitRelativePath: "",
+						lastModified: new Date().getTime(),
+						lastModifiedDate: new Date()
+					};
 					this.savingFile = false;
 					this.savingFile = false;
 					this.desc = desc;
 					this.desc = desc;
 					this.fileSaved(savedData, this.desc, done, errorWrapper);
 					this.fileSaved(savedData, this.desc, done, errorWrapper);
@@ -217,17 +194,25 @@ LocalFile.prototype.saveFile = function(title, revision, success, error, useCurr
 					// Deletes draft after saving
 					// Deletes draft after saving
 					this.removeDraft();
 					this.removeDraft();
 					Editor.defaultContent = savedData;
 					Editor.defaultContent = savedData;
-					var configurationContentList=[];
-					var configurationContent = {"name":"第 1 页",
-					"id":Editor.configurationContentId,"content":savedData,"type":1};
+					var configurationContentList = [];
+					const basicAttr = Sidebar.prototype.enumCellBasicAttribute
+					const allCell = (this.ui.editor.graph.getDefaultParent().children || []).filter(item => item.getAttribute(basicAttr.COMPONENT_TYPE))
+					const contentId = this.ui.currentPage.node.id
+					var configurationContent = {
+						name: "第 1 页",
+						id: Editor.configurationContentId,
+						contentId,
+						content: savedData,
+						type: 1,
+						nodeIds: allCell.map(item => item.id)
+					};
 					configurationContentList.push(configurationContent);
 					configurationContentList.push(configurationContent);
-					var parmam = {"configurationId":Editor.configurationId,"configurationContentList":configurationContentList};
-					defHttp.put("/yt/configuration/content",parmam).then(res=>{
+					var parmam = { configurationId: Editor.configurationId, configurationContentList };
+					defHttp.put("/yt/configuration/content", parmam).then(res => {
 						console.log(res)
 						console.log(res)
 					})
 					})
 				}
 				}
-				catch (e)
-				{
+				catch (e) {
 					errorWrapper(e);
 					errorWrapper(e);
 				}
 				}
 				// 修改结束
 				// 修改结束
@@ -277,20 +262,16 @@ LocalFile.prototype.saveFile = function(title, revision, success, error, useCurr
 				// }), errorWrapper);
 				// }), errorWrapper);
 			}
 			}
 		}
 		}
-		else
-		{
-			if (this.ui.isOfflineApp() || this.ui.isLocalFileSave())
-			{
+		else {
+			if (this.ui.isOfflineApp() || this.ui.isLocalFileSave()) {
 				this.ui.doSaveLocalFile(data, title, (binary) ?
 				this.ui.doSaveLocalFile(data, title, (binary) ?
 					'image/png' : 'text/xml', binary);
 					'image/png' : 'text/xml', binary);
 			}
 			}
-			else
-			{
-				if (data.length < MAX_REQUEST_SIZE)
-				{
+			else {
+				if (data.length < MAX_REQUEST_SIZE) {
 					var dot = title.lastIndexOf('.');
 					var dot = title.lastIndexOf('.');
 					var format = (dot > 0) ? title.substring(dot + 1) : 'xml';
 					var format = (dot > 0) ? title.substring(dot + 1) : 'xml';
-	
+
 					// Do not update modified flag
 					// Do not update modified flag
 					new mxXmlRequest(SAVE_URL, 'format=' + format +
 					new mxXmlRequest(SAVE_URL, 'format=' + format +
 						'&xml=' + encodeURIComponent(data) +
 						'&xml=' + encodeURIComponent(data) +
@@ -298,31 +279,26 @@ LocalFile.prototype.saveFile = function(title, revision, success, error, useCurr
 						((binary) ? '&binary=1' : '')).
 						((binary) ? '&binary=1' : '')).
 						simulate(document, '_blank');
 						simulate(document, '_blank');
 				}
 				}
-				else
-				{
-					this.ui.handleError({message: mxResources.get('drawingTooLarge')}, mxResources.get('error'), mxUtils.bind(this, function()
-					{
+				else {
+					this.ui.handleError({ message: mxResources.get('drawingTooLarge') }, mxResources.get('error'), mxUtils.bind(this, function () {
 						mxUtils.popup(data);
 						mxUtils.popup(data);
 					}));
 					}));
 				}
 				}
 			}
 			}
-			
+
 			done();
 			done();
 		}
 		}
 	});
 	});
-	
-	if (binary)
-	{
+
+	if (binary) {
 		var p = this.ui.getPngFileProperties(this.ui.fileNode);
 		var p = this.ui.getPngFileProperties(this.ui.fileNode);
 
 
-		this.ui.getEmbeddedPng(mxUtils.bind(this, function(imageData)
-		{
+		this.ui.getEmbeddedPng(mxUtils.bind(this, function (imageData) {
 			doSave(imageData);
 			doSave(imageData);
 		}), error, (this.ui.getCurrentFile() != this) ?
 		}), error, (this.ui.getCurrentFile() != this) ?
 			savedData : null, p.scale, p.border);
 			savedData : null, p.scale, p.border);
 	}
 	}
-	else
-	{
+	else {
 		doSave(savedData);
 		doSave(savedData);
 	}
 	}
 };
 };
@@ -333,13 +309,11 @@ LocalFile.prototype.saveFile = function(title, revision, success, error, useCurr
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dx X-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  * @param {number} dy Y-coordinate of the translation.
  */
  */
-LocalFile.prototype.rename = function(title, success, error)
-{
+LocalFile.prototype.rename = function (title, success, error) {
 	this.title = title;
 	this.title = title;
 	this.descriptorChanged();
 	this.descriptorChanged();
-	
-	if (success != null)
-	{
+
+	if (success != null) {
 		success();
 		success();
 	}
 	}
 };
 };
@@ -348,8 +322,7 @@ LocalFile.prototype.rename = function(title, success, error)
  * Returns the location as a new object.
  * Returns the location as a new object.
  * @type mx.Point
  * @type mx.Point
  */
  */
-LocalFile.prototype.open = function()
-{
+LocalFile.prototype.open = function () {
 	this.ui.setFileData(this.getData());
 	this.ui.setFileData(this.getData());
 	this.installListeners();
 	this.installListeners();
 };
 };

@@ -993,6 +993,14 @@ EditorUi.prototype.selectPage = function(page, quiet, viewState)
 	catch (e)
 	catch (e)
 	{
 	{
 		this.handleError(e);
 		this.handleError(e);
+	} finally {
+		// TODO thingskit instance chart
+		Sidebar.prototype.chartsInstanceMapping.forEach(item => {
+			item.dispose()
+		})
+		Sidebar.prototype.chartsInstanceMapping.clear()
+		const graph = this.editor.graph
+		Sidebar.prototype.initChartInstance(graph)
 	}
 	}
 };
 };
 
 
@@ -2079,4 +2087,4 @@ EditorUi.prototype.createPageMenu = function(page, label)
 	};
 	};
 	
 	
 	mxCodecRegistry.register(codec);
 	mxCodecRegistry.register(codec);
-})();
+})();

@@ -166,7 +166,12 @@
 		/**
 		/**
 		 * @description 组件类型
 		 * @description 组件类型
 		 */
 		 */
-		COMPONENT_TYPE: 'componentType'
+		COMPONENT_TYPE: 'componentType',
+
+		/**
+		 * @description 图表实例ID
+		 */
+		CHART_INSTANCE_ID: 'chartInstanceId'
 	}
 	}
 
 
 	/**
 	/**
@@ -248,7 +253,9 @@
 	 */
 	 */
 	Sidebar.prototype.enumPermissionPanel = {
 	Sidebar.prototype.enumPermissionPanel = {
 		DATA_SOURCE: 'dataSource',
 		DATA_SOURCE: 'dataSource',
-		DISPLAY_TYPE: 'displayType',
+		// DISPLAY_TYPE: 'displayType',
+		LINE_CHART_EXPAND: 'lineChartExpandDataSource',
+		BAR_CHART_EXPAND: 'barChartExpandDataSource',
 		INTERACTION: 'interaction',
 		INTERACTION: 'interaction',
 		DYNAMIC_EFFECT: 'dynamicEffect',
 		DYNAMIC_EFFECT: 'dynamicEffect',
 		VAR_IMAGE: 'variableImage'
 		VAR_IMAGE: 'variableImage'
@@ -596,6 +603,7 @@
 		// Defines all entries for the sidebar. This is used in the MoreShapes dialog. Create screenshots using the savesidebar URL parameter and
 		// Defines all entries for the sidebar. This is used in the MoreShapes dialog. Create screenshots using the savesidebar URL parameter and
 		// http://www.alderg.com/merge.html for creating a vertical stack of PNG images if multiple sidebars are part of an entry.
 		// http://www.alderg.com/merge.html for creating a vertical stack of PNG images if multiple sidebars are part of an entry.
 		//更多图形里面的加载,可以加载自己定义的图形库，同时要提供对应的图片
 		//更多图形里面的加载,可以加载自己定义的图形库，同时要提供对应的图片
+		var stdEntries = []
 		// var stdEntries = [{title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png'},
 		// var stdEntries = [{title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png'},
 		// 	{title: mxResources.get('basic'), id: 'basic', image: IMAGE_PATH + '/sidebar-basic.png'},
 		// 	{title: mxResources.get('basic'), id: 'basic', image: IMAGE_PATH + '/sidebar-basic.png'},
 		// 	{title: mxResources.get('arrows'), id: 'arrows2', image: IMAGE_PATH + '/sidebar-arrows2.png'},
 		// 	{title: mxResources.get('arrows'), id: 'arrows2', image: IMAGE_PATH + '/sidebar-arrows2.png'},
@@ -604,7 +612,7 @@
 		//更多图形，显示出来的的标题跟id，同时包括图片
 		//更多图形，显示出来的的标题跟id，同时包括图片
 
 
 		// TODO thingsKit 设置数据绑定展示面板
 		// TODO thingsKit 设置数据绑定展示面板
-		const { DISPLAY_TYPE, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION } = this.enumPermissionPanel
+		const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION } = this.enumPermissionPanel
 		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART } = this.enumComponentType
 		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART } = this.enumComponentType
 		this.setComponentPermission(LINE, [DYNAMIC_EFFECT])
 		this.setComponentPermission(LINE, [DYNAMIC_EFFECT])
 		this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
 		this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
@@ -612,8 +620,8 @@
 		this.setComponentPermission(TITLE, [INTERACTION, DYNAMIC_EFFECT])
 		this.setComponentPermission(TITLE, [INTERACTION, DYNAMIC_EFFECT])
 		this.setComponentPermission(VAR_IMAGE, [DATA_SOURCE, INTERACTION, VAR_IMAGE])
 		this.setComponentPermission(VAR_IMAGE, [DATA_SOURCE, INTERACTION, VAR_IMAGE])
 		this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
 		this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
-		this.setComponentPermission(BAR_CHART, [DATA_SOURCE, DISPLAY_TYPE, DYNAMIC_EFFECT])
-		this.setComponentPermission(LINE_CHART, [DATA_SOURCE, DISPLAY_TYPE, DYNAMIC_EFFECT])
+		this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND, DYNAMIC_EFFECT])
+		this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND, DYNAMIC_EFFECT])
 
 
 		var thingskitEntries = [
 		var thingskitEntries = [
 			{ title: "风机", id: 'fan', image: IMAGE_PATH + '/thingskit/风机.png' },
 			{ title: "风机", id: 'fan', image: IMAGE_PATH + '/thingskit/风机.png' },

@@ -36,7 +36,7 @@
 				return this.createEdgeTemplateFromCells([ cell ], 60, 40, '线条');
 				return this.createEdgeTemplateFromCells([ cell ], 60, 40, '线条');
 			})),
 			})),
 			this.addEntry('real time', mxUtils.bind(this, function () {
 			this.addEntry('real time', mxUtils.bind(this, function () {
-				const template = `<div class="thingKit-component__real-time"><div class="real-time__date"></div> <div style="font-size:30px" class="real-time__now">时间</div></div>`
+				const template = `<div class="thingKit-component__real-time"><div class="real-time__date">%currentDate%</div> <div style="font-size:30px" class="real-time__now">HH:mm:ss</div></div>`
 				const cell = new mxCell(template, new mxGeometry(0, 0, 180, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
 				const cell = new mxCell(template, new mxGeometry(0, 0, 180, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
 				cell.vertex = true;
 				cell.vertex = true;
 				this.setCellAttributes(cell, {
 				this.setCellAttributes(cell, {

@@ -24,7 +24,7 @@
 		/**
 		/**
 		 * @description cell id key
 		 * @description cell id key
 		 */
 		 */
-		CHART_CELL_ID: 'chartInstanceId',
+		CHART_INSTANCE_ID: 'chartInstanceId',
 
 
 		/**
 		/**
 		 * @description 图表容器 class name
 		 * @description 图表容器 class name
@@ -143,7 +143,7 @@
 		const basicAttr = this.enumCellBasicAttribute
 		const basicAttr = this.enumCellBasicAttribute
 		this.setCellAttributes(cell, {
 		this.setCellAttributes(cell, {
 			[basicAttr.COMPONENT_TYPE]: chartType,
 			[basicAttr.COMPONENT_TYPE]: chartType,
-			[enumConst.CHART_CELL_ID]: id,
+			[basicAttr.CHART_INSTANCE_ID]: id,
 			[enumConst.CHART_CELL_WIDTH]: width,
 			[enumConst.CHART_CELL_WIDTH]: width,
 			[enumConst.CHART_CELL_HEIGHT]: height,
 			[enumConst.CHART_CELL_HEIGHT]: height,
 		})
 		})
@@ -194,6 +194,7 @@
 		const chartOptionMapping = this.chartOptionMapping
 		const chartOptionMapping = this.chartOptionMapping
 		const chartsInstanceMapping = this.chartsInstanceMapping
 		const chartsInstanceMapping = this.chartsInstanceMapping
 		const chartDom = document.getElementById(id);
 		const chartDom = document.getElementById(id);
+		if (!chartDom) return
 		chartDom.style.width = `${width}px`
 		chartDom.style.width = `${width}px`
 		chartDom.style.height = `${height}px`
 		chartDom.style.height = `${height}px`
 		const myChart = echarts.init(chartDom);
 		const myChart = echarts.init(chartDom);
@@ -208,7 +209,8 @@
 	 * @returns {*}
 	 * @returns {*}
 	 */
 	 */
 	Sidebar.prototype.getCellId = function (cell) {
 	Sidebar.prototype.getCellId = function (cell) {
-		return this.graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
+		const basicAttr = this.enumCellBasicAttribute
+		return this.graph.getAttributeForCell(cell, basicAttr.CHART_INSTANCE_ID)
 	}
 	}
 
 
 	/**
 	/**
@@ -238,7 +240,7 @@
 					const id = self.generatorChartsId()
 					const id = self.generatorChartsId()
 					const geo = Object.assign(graph.model.getGeometry(cell), { width: 400, height: 400 })
 					const geo = Object.assign(graph.model.getGeometry(cell), { width: 400, height: 400 })
 					cell.setGeometry(geo)
 					cell.setGeometry(geo)
-					self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
+					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_WIDTH, enumConst.CHART_CELL_DEFAULT_WIDTH);
 					self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, enumConst.CHART_CELL_DEFAULT_HEIGHT);
 					self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, enumConst.CHART_CELL_DEFAULT_HEIGHT);
 					self.graph.setAttributeForCell(cell, 'label', self.createChartsNode(id))
 					self.graph.setAttributeForCell(cell, 'label', self.createChartsNode(id))
@@ -281,7 +283,8 @@
 				self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
 				self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
 				self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
 				self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
 				const instance = chartsInstanceMapping.get(id)
 				const instance = chartsInstanceMapping.get(id)
-				instance.resize()
+
+				instance && instance.resize()
 			}
 			}
 			cellResized.apply(this, arguments)
 			cellResized.apply(this, arguments)
 		}
 		}
@@ -327,10 +330,10 @@
 	 */
 	 */
 	Sidebar.prototype.initChartInstance = function (graph) {
 	Sidebar.prototype.initChartInstance = function (graph) {
 		const basicAttr = this.enumCellBasicAttribute
 		const basicAttr = this.enumCellBasicAttribute
-		const allCell = graph.getDefaultParent().children
+		const allCell = graph.getDefaultParent().children || []
 		const domIdMapping = new Map()
 		const domIdMapping = new Map()
 		for (const cell of allCell) {
 		for (const cell of allCell) {
-			const chartInstanceId = graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
+			const chartInstanceId = graph.getAttributeForCell(cell, basicAttr.CHART_INSTANCE_ID)
 			if (Sidebar.prototype.isChartCell(cell) && chartInstanceId) {
 			if (Sidebar.prototype.isChartCell(cell) && chartInstanceId) {
 				const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)
 				const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)
 				const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)
 				const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)
@@ -352,15 +355,17 @@
 	/**
 	/**
 	 * @description 初始化图表
 	 * @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)
-		}
-	}
+	// const openFileHandle = EditorUi.prototype.openFileHandle
+	// EditorUi.prototype.openFileHandle = function () {
+	// 	console.log('enter open file')
+	// 	try {
+	// 		openFileHandle.apply(this, arguments)
+	// 	} finally {
+	// 		console.log('openFileHandle')
+	// 		const graph = this.editor.graph
+	// 		Sidebar.prototype.initChartInstance(graph)
+	// 	}
+	// }
 
 
 	/**
 	/**
 	 * @description 实例化 echarts
 	 * @description 实例化 echarts
@@ -372,5 +377,17 @@
 			Sidebar.prototype.initChartInstance(this)
 			Sidebar.prototype.initChartInstance(this)
 		}
 		}
 	}
 	}
+
+	// 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)
+	// 	}
+	// }
 })();
 })();
 
 

@@ -3379,6 +3379,8 @@ EditorUi.prototype.lightboxFit = function(maxHeight)
 		this.editor.graph.maxFitScale = this.lightboxMaxFitScale;
 		this.editor.graph.maxFitScale = this.lightboxMaxFitScale;
 		this.editor.graph.fit(border, null, null, null, null, null, maxHeight);
 		this.editor.graph.fit(border, null, null, null, null, null, maxHeight);
 		this.editor.graph.maxFitScale = null;
 		this.editor.graph.maxFitScale = null;
+		// TODO thingsKit lightbox 默认缩放为1 
+		this.editor.graph.view.setScale(1);
 	}
 	}
 };
 };