backup

.gitignore

@@ -7,5 +7,6 @@
 /public
 /coverage
 /archives
+/backups
 
 yarn-error.log

README.md

@@ -32,20 +32,21 @@ See more example at draw.io
 ## [[0.6.0 SNAPSHOT]](https://algenty.github.io/flowcharting-repository/archives/agenty-flowcharting-panel-0.6.0-SNAPSHOT.zip) - 2019-12-08  
 ### Added  
   - Experimental implementation for table type data (Mysql, Postgres, Zabbix, Streaming, loki and other ...)
+  - PlaceHolder feature supported [see doc from draw.io](https://desk.draw.io/support/solutions/articles/16000051979)
   - Some optimization on : 
     - tooltips
     - States
   - Tooltip Graph :
     - Histogram ([See example](https://algenty.github.io/flowcharting-repository/images/histogram_ani.png))
   - Variables support in download input url ([See example](https://algenty.github.io/flowcharting-repository/images/url_download_variable_ani.png))
-  - Add graduate effect when color changed ([See example](https://video.twimg.com/tweet_video/EISkJwdWwAAi5Qh.mp4))
+  - Add graduate animation when color changed ([See example](https://video.twimg.com/tweet_video/EISkJwdWwAAi5Qh.mp4))
   - New rule design in editor ([See example](https://algenty.github.io/flowcharting-repository/images/rule_design.png))
-  - Typescript migration for best quality.
+  - Typescript migration for best quality code.
   - Build migration to grafana-toolkit (thanks Dominik and Ryan).
-  - New engine graph for best compatibility with draw.io
+  - New engine graph for best compatibility with draw.io.
   - Better Zoom for firefox and IE/edge.
-  - Add controls on edit mode for XML and URL.
-  - Regular expression for String type value implemented to define level state.
+  - Add checks/controls on edit mode for XML and URL.
+  - Regular expression for String type values implemented to define level state.
 ### Fixed
   - Fix download url on first load.
   - Fix value null for string [(issue #65)](https://github.com/algenty/grafana-flowcharting/issues/65)

src/graph_class.ts

@@ -64,7 +64,15 @@ export default class XGraph {
     this.initGraph();
   }
 
-  static isValidXml(source: string) {
+  /**
+   * Validate XML definition
+   *
+   * @static
+   * @param {string} source
+   * @returns {boolean}
+   * @memberof XGraph
+   */
+  static isValidXml(source: string): boolean {
     try {
       const div = document.createElement('div');
       const g = new Graph(div);
@@ -837,18 +845,18 @@ export default class XGraph {
    *
    * @param {mxCell} mxcell
    * @param {string} text - New label
-   * @returns {string} New label
+   * @returns {this}
    * @memberof XGraph
    */
-  setLabelCell(mxcell: mxCell, text: string): string {
-    let label: string = text;
-    if (mxUtils.isNode(mxcell.value)) {
-      label = mxcell.value.setAttribute('label', text);
-    } else {
-      mxcell.setValue(text);
-    }
-    this.graph.model.setValue(mxcell, text);
-    return label;
+  setLabelCell(mxcell: mxCell, text: string): this {
+    // if (mxUtils.isNode(mxcell.value)) {
+    //   label = mxcell.value.setAttribute('label', text);
+    // } else {
+    //   mxcell.setValue(text);
+    //   this.graph.model.setValue(mxcell, text);
+    // }
+    this.graph.cellLabelChanged(mxcell, text, false);
+    return this;
   }
 
   /**

src/libs/Graph_custom.js

@@ -129,4 +129,4 @@ mxEvent.addMouseWheelListener = function(func, container) {
         )
       : mxEvent.addListener(document, 'mousewheel', c);
   }
-};
+};

src/rule_class.ts

@@ -37,6 +37,13 @@ export default class Rule {
     this.states = new Map();
   }
 
+  /**
+   * Get default data
+   *
+   * @static
+   * @returns {gf.TIRuleData}
+   * @memberof Rule
+   */
   static getDefaultData(): gf.TIRuleData {
     return {
       order: 1,
@@ -109,53 +116,46 @@ export default class Rule {
    * @memberof Rule
    */
   import(obj: any): this {
-    this.data.unit = obj.unit || 'short';
-    this.data.type = obj.type || 'number';
-    this.data.metricType = obj.metricType || 'serie';
-    this.data.alias = obj.alias || 'No name';
-    this.data.refId = obj.refId || 'A';
-    this.data.column = obj.column || 'Time';
-    this.data.aggregation = obj.aggregation || 'current';
-    this.data.decimals = obj.decimals !== undefined ? obj.decimals : 2;
-    this.data.colors = obj.colors ? [...obj.colors] : ['rgba(245, 54, 54, 0.9)', 'rgba(237, 129, 40, 0.89)', 'rgba(50, 172, 45, 0.97)'];
-    this.data.reduce = true;
-    this.data.style = obj.style || obj.colorMode || 'fillColor';
-    this.data.colorOn = obj.colorOn || 'a';
-    this.data.link = obj.link !== undefined ? obj.link : false;
-    this.data.linkOn = obj.colorOn || 'a';
-    this.data.linkUrl = obj.linkUrl || '';
-    this.data.linkParams = obj.linkParams !== undefined ? obj.linkParams : false;
-    this.data.textOn = obj.textOn || 'wmd';
-    this.data.textReplace = obj.textReplace || 'content';
-    this.data.textPattern = obj.textPattern || '/.*/';
-    this.data.pattern = obj.pattern || this.data.pattern;
-    this.data.dateFormat = obj.dateFormat || 'YYYY-MM-DD HH:mm:ss';
-    this.data.thresholds = obj.thresholds !== undefined ? [...obj.thresholds] : [];
-    this.data.stringWarning = obj.stringWarning || '';
-    this.data.stringCritical = obj.stringCritical || '';
-    this.data.invert = obj.invert !== undefined ? obj.invert : false;
-    this.data.overlayIcon = obj.overlayIcon !== undefined ? obj.overlayIcon : false;
-    this.data.tooltip = obj.tooltip !== undefined ? obj.tooltip : false;
-    this.data.tooltipLabel = obj.tooltipLabel !== undefined ? obj.tooltipLabel : this.data.alias;
-    this.data.tooltipColors = obj.tooltipColors !== undefined ? obj.tooltipColors : false;
-    this.data.tooltipOn = obj.tooltipOn !== undefined ? obj.tooltipOn : 'a';
-    this.data.tpDirection = obj.tpDirection !== undefined ? obj.tpDirection : 'v';
-    this.data.tpGraph = obj.tpGraph !== undefined ? obj.tpGraph : false;
-    this.data.tpGraphSize = obj.tpGraphSize !== undefined ? obj.tpGraphSize : '100%';
-    this.data.tpGraphType = obj.tpGraphType !== undefined ? obj.tpGraphType : 'line';
-    if (obj.tpGraphLow !== undefined) {
-      this.data.tpGraphLow = obj.tpGraphLow;
-    }
-    if (obj.tpGraphHigh !== undefined) {
-      this.data.tpGraphHigh = obj.tpGraphHigh;
-    }
-    if (obj.tpGraphScale !== undefined) {
-      this.data.tpGraphScale = obj.tpGraphScale;
-    }
+    if (!!obj.unit) this.data.unit = obj.unit;
+    if (!!obj.type) this.data.type = obj.type;
+    if (!!obj.metricType) this.data.metricType = obj.metricType;
+    if (!!obj.alias) this.data.alias = obj.alias;
+    if (!!obj.refId) this.data.refId = obj.refId;
+    if (!!obj.column) this.data.column = obj.column;
+    if (!!obj.aggregation) this.data.aggregation = obj.aggregation;
+    if (!!obj.decimals || obj.decimals == 0) this.data.decimals = obj.decimals;
+    if (!!obj.colors) this.data.colors = obj.colors;
+    if (!!this.data.reduce) this.data.reduce = true;
+    if (!!obj.style) this.data.style = obj.style;
+    if (!!obj.colorOn) this.data.colorOn = obj.colorOn;
+    if (!!obj.link) this.data.link = obj.link;
+    if (!!obj.linkUrl) this.data.linkUrl;
+    if (!!obj.linkParams) this.data.linkParams = obj.linkParams;
+    if (!!obj.textOn) this.data.textOn = obj.textOn;
+    if (!!obj.textReplace) this.data.textReplace = obj.textReplace;
+    if (!!obj.textPattern) this.data.textPattern = obj.textPattern;
+    if (!!obj.pattern) this.data.pattern = obj.pattern;
+    if (!!obj.dateFormat) this.data.dateFormat = obj.dateFormat;
+    if (!!obj.thresholds) this.data.thresholds = obj.thresholds;
+    if (!!obj.stringWarning) this.data.stringWarning = obj.stringWarning;
+    if (!!obj.stringCritical) this.data.stringCritical = obj.stringCritical;
+    if (!!obj.invert) this.data.invert = obj.invert;
+    if (!!obj.overlayIcon) this.data.overlayIcon;
+    if (!!obj.tooltip) this.data.tooltip = obj.tooltip;
+    if (!!obj.tooltipLabel) this.data.tooltipLabel = obj.tooltipLabel;
+    if (!!obj.tooltipColors) this.data.tooltipColors = obj.tooltipColors;
+    if (!!obj.tooltipOn) this.data.tooltipOn = obj.tooltipOn;
+    if (!!obj.tpDirection) this.data.tpDirection = obj.tpDirection;
+    if (!!obj.tpGraph) this.data.tpGraph = obj.tpGraph !== undefined;
+    if (!!obj.tpGraphSize) this.data.tpGraphSize = obj.tpGraphSize;
+    if (!!obj.tpGraphType) this.data.tpGraphType = obj.tpGraphType;
+    if (!!obj.tpGraphLow) this.data.tpGraphLow = obj.tpGraphLow;
+    if (!!obj.tpGraphHigh) this.data.tpGraphHigh = obj.tpGraphHigh;
+    if (!!obj.tpGraphScale) this.data.tpGraphScale = obj.tpGraphScale;
     let maps: any = [];
 
     // SHAPES
-    this.data.shapeProp = obj.shapeProp || 'id';
+    if (!!obj.shapeProp) this.data.shapeProp = obj.shapeProp;
     this.data.shapeData = [];
 
     // For 0.2.0