complete conditional formatting

Author: nikitaeverywhere

example/index.html

@@ -104,6 +104,7 @@
             //, triggerEvent: "touchstart" // all "click" events will be replaced by this event
             //, caption: "My table" // if set, table basic caption will be replaced by this text
             , showSummary: true // show summary by columns
+            //, conditionalFormattingOn: true // enable conditional formatting rules
             //, drillDownTarget: "<dashboard name>" // undocumented, deepSee only
         };
 

gulpfile.js

@@ -35,7 +35,9 @@ gulp.task("gatherScripts", ["clean"], function () {
         .pipe(wrap("LightPivotTable = (function(){<%= contents %> return LightPivotTable;}());"))
         .pipe(uglify({
             output: {
-                ascii_only: true
+                ascii_only: true,
+                width: 30000,
+                max_line_len: 30000
             }
         }))
         .pipe(header(banner, { pkg: pkg }))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "LightPivotTable",
   "author": "ZitRo",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta.1",
   "description": "A lightweight pivot table for MDX2JSON source for InterSystems Cache",
   "main": "test/testServer.js",
   "repository": {

readme.md

@@ -55,6 +55,7 @@ var setup = { // Object that contain settings. Any setting may be missed.
         [ , triggerEvent: "touchstart" // all "click" events will be replaced by this event ]
         [ , caption: "My table" // if set, table basic caption will be replaced by this text ]
         [ , showSummary: true // show summary by columns ]
+        [ , conditionalFormattingOn: true // pass false to turn off conditional formatting ]
         [ , drillDownTarget: "<dashboard name>" // deepSee only - dashboard to open ]
     },
     lp = new LightPivotTable(setup);

source/js/DataController.js

@@ -90,7 +90,6 @@ DataController.prototype.setData = function (data) {
     this.resetDimensionProps();
     this.resetConditionalFormatting();
     this.resetRawData();
-    console.log("Data:", data);
 
     this._trigger();
     return data;
@@ -159,6 +158,9 @@ DataController.prototype.resetConditionalFormatting = function () {
     }
 
     ocfArr = this.controller.CONFIG.pivotProperties["formatRules"] || [];
+    if (ocfArr.length && typeof this.controller.CONFIG.conditionalFormattingOn === "undefined") {
+        this.controller.CONFIG.conditionalFormattingOn = true;
+    }
     for (var i in ocfArr) {
         // Warn: range ",2-3" is valid for standard pivot as ",2".
         // LPT will parse ",2-3" range as invalid.
@@ -426,6 +428,7 @@ DataController.prototype.resetRawData = function () {
 
     if (this.controller.CONFIG["showSummary"] && rawData.length - xh > 1 // xh - see above
         && (rawData[rawData.length - 1][0] || {})["isCaption"]) {
+        data.info.SUMMARY_SHOWN = true;
         this.SUMMARY_SHOWN = true;
         this._dataStack[this._dataStack.length - 1].SUMMARY_SHOWN = true;
         rawData.push(summary = []);

source/js/DataSource.js

@@ -162,7 +162,7 @@ DataSource.prototype.getCurrentData = function (callback) {
 
         var data = ready.data;
 
-        console.log("Retrieved data:", ready);
+        //console.log("Retrieved data:", ready);
 
         (data.Info || {}).action = _.ACTION;
         if (_.ACTION === "MDXDrillthrough") {

source/js/PivotView.js

@@ -266,6 +266,75 @@ PivotView.prototype.removeMessage = function () {
 
 };
 
+/**
+ * @param {*} value1
+ * @param {string} operator
+ * @param {*} value2 - fixed value
+ * @private
+ * @return {boolean}
+ */
+PivotView.prototype._matchCondition = function (value1, operator, value2) {
+
+    switch (operator) {
+        case "=": return value1 == value2;
+        case "<>": return value1 != value2;
+        case ">": return value1 > value2;
+        case ">=": return value1 >= value2;
+        case "<": return value1 < value2;
+        case "<=": return value1 <= value2;
+        case "IN": return value2.toString().indexOf(value1) !== -1; // how does it normally work?
+        case "BETWEEN": return value1 >= value2.split(",")[0] && value1 <= value2.split(",")[1];
+        case "IS NULL": return !value1;
+        default: {
+            console.error("Formatting error: unknown format operator \"" + operator + "\"");
+            return false;
+        }
+    }
+
+};
+
+/**
+ * Applies conditional formatting for element.
+ *
+ * @param {object} rules - Special object that contain formatting rules.
+ * @param {string} key - Position y,x separated by comma or empty string for global.
+ * @param {*} value - Original value to format (comparator).
+ * @param {HTMLElement} element - element to format.
+ */
+PivotView.prototype.applyConditionalFormatting = function (rules, key, value, element) {
+
+    var actualRules = rules[""] || [],
+        p, i, rule, html, xs, num;
+    actualRules = actualRules.concat(rules[key] || []);
+    if ((xs = key.split(",")).length === 2) {
+        actualRules = actualRules.concat(rules[xs[0] + ","] || [], rules["," + xs[1]] || []);
+    }
+
+    for (p in actualRules) {
+
+        rule = actualRules[p];
+        if (!this._matchCondition(value, rule["operator"], rule["value"])) continue;
+
+        // apply formatting
+        if (rule["style"])
+            element.setAttribute("style", (element.getAttribute("style") || "") + rule["style"]);
+        if (rule["icon"]) {
+            element.textContent = ""; html = "<div style=\"overflow: hidden; height: 16px;\">";
+            num = parseInt(rule["iconCount"]) || 1;
+            for (i = 0; i < num; i++) {
+                html += "<img alt=\"*\" style=\"padding-right:2px; height: 100%;\" " +
+                "src=\"" + rule["icon"] + "\"/>";
+            }
+            // LPT won't change default format (f.e. text-align) for content.
+            // element.className = (element.className || "") + " formatLeft";
+            element.innerHTML = html + "</div>";
+        }
+        if (rule["text"]) element.textContent = rule["text"];
+
+    }
+
+};
+
 /**
  * @param container
  */
@@ -534,6 +603,17 @@ PivotView.prototype.renderRawData = function (data) {
                 }
             }
             if (rawData[y][x].style) td.setAttribute("style", rawData[y][x].style);
+            if (
+                this.controller.CONFIG.conditionalFormattingOn // totals formatting present
+                && !(info.SUMMARY_SHOWN && rawData.length - 1 === y) // exclude totals formatting
+            ) {
+                this.applyConditionalFormatting(
+                    data["conditionalFormatting"],
+                    (y - info.topHeaderRowsNumber + 1) + "," + (x - info.leftHeaderColumnsNumber + 1),
+                    rawData[y][x].value,
+                    td
+                );
+            }
 
             // add handlers
             td.addEventListener(CLICK_EVENT, (function (x, y, cell) {