Merge pull request #76 from nzzdev/release-3.1.1

Release 3.1.1
nzzdev · Nov 8, 2018 · c5b4253 · c5b4253
2 parents 41efea7 + c5d67ed
commit c5b4253
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 114 deletions.
diff --git a/helpers/minibars.js b/helpers/minibars.js
@@ -1,6 +1,5 @@
 const clone = require("clone");
 const isNumeric = require("./data.js").isNumeric;
-
 const miniBarTypes = {
   positive: "positive",
   negative: "negative",
@@ -47,6 +46,44 @@ function getMinibarNumbersWithType(data, selectedColumnIndex) {
   return minibarsWithType;
 }
 
+function getMinibarContext(options, itemDataCopy) {
+  let minibar = {};
+  // if minibars active
+  if (options.minibar !== null && options.minibar !== undefined) {
+    if (
+      options.minibar.selectedColumn !== null &&
+      options.minibar.selectedColumn !== undefined
+    ) {
+      // get minibar
+      minibar = getMinibarData(itemDataCopy, options.minibar);
+      if (
+        minibar.barColor.positive.className === "" &&
+        minibar.barColor.positive.colorCode === ""
+      ) {
+        minibar.barColor.positive.className = getPositiveColor(minibar.type);
+      } else if (minibar.barColor.positive.className !== "") {
+        minibar.barColor.positive.colorCode = "";
+      }
+
+      if (
+        minibar.barColor.negative.className === "" &&
+        minibar.barColor.negative.colorCode === ""
+      ) {
+        minibar.barColor.negative.className = getNegativeColor(minibar.type);
+      } else if (minibar.barColor.negative.className !== "") {
+        minibar.barColor.negative.colorCode = "";
+      }
+
+      if (options.minibar.invertColors) {
+        let color = minibar.barColor.negative;
+        minibar.barColor.negative = minibar.barColor.positive;
+        minibar.barColor.positive = color;
+      }
+    }
+  }
+  return minibar;
+}
+
 function getMinibarValue(type, value, min, max) {
   if (type === miniBarTypes.positive) {
     return Math.abs((value * 100) / max);
@@ -67,8 +104,11 @@ function getMinibarType(types) {
   }
 }
 
-function getMinibarData(data, selectedColumnIndex) {
-  let dataColumn = getMinibarNumbersWithType(data, selectedColumnIndex);
+function getMinibarData(data, minibarOptions) {
+  let dataColumn = getMinibarNumbersWithType(
+    data,
+    minibarOptions.selectedColumn
+  );
   let minValue = Math.min(...dataColumn.numbers);
   let maxValue = Math.max(...dataColumn.numbers);
 
@@ -81,11 +121,32 @@ function getMinibarData(data, selectedColumnIndex) {
 
   return {
     values: values,
-    type: dataColumn.type
+    type: dataColumn.type,
+    barColor: minibarOptions.barColor
   };
 }
 
+function getPositiveColor(type) {
+  let color;
+  if (type === "mixed") {
+    color = "s-viz-color-diverging-2-2";
+  } else {
+    color = "s-viz-color-one-5";
+  }
+  return color;
+}
+
+function getNegativeColor(type) {
+  let color;
+  if (type === "mixed") {
+    color = "s-viz-color-diverging-2-1";
+  } else {
+    color = "s-viz-color-one-5";
+  }
+  return color;
+}
+
 module.exports = {
   getMinibarNumbersWithType: getMinibarNumbersWithType,
-  getMinibarData: getMinibarData
+  getMinibarContext: getMinibarContext
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "q-table",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/resources/fixtures/data/four-column.json b/resources/fixtures/data/four-column.json
@@ -59,20 +59,6 @@
   "sources": [],
   "options": {
     "cardLayout": false,
-    "cardLayoutIfSmall": true,
-    "minibar": {
-      "invertColors": false,
-      "barColor": {
-        "positive": {
-          "className": "",
-          "colorCode": ""
-        },
-        "negative": {
-          "className": "",
-          "colorCode": ""
-        }
-      },
-      "selectedColumn": null
-    }
+    "cardLayoutIfSmall": true
   }
 }
diff --git a/routes/rendering-info/web.js b/routes/rendering-info/web.js
@@ -49,26 +49,6 @@ function validateAgainstSchema(item, options) {
   }
 }
 
-function getPositiveColor(type) {
-  let color;
-  if (type === "mixed") {
-    color = "s-viz-color-diverging-2-2";
-  } else {
-    color = "s-viz-color-one-5";
-  }
-  return color;
-}
-
-function getNegativeColor(type) {
-  let color;
-  if (type === "mixed") {
-    color = "s-viz-color-diverging-2-1";
-  } else {
-    color = "s-viz-color-one-5";
-  }
-  return color;
-}
-
 async function validatePayload(payload, options, next) {
   if (typeof payload !== "object") {
     return next(Boom.badRequest(), payload);
@@ -116,6 +96,7 @@ module.exports = {
         footnotes,
         item.options
       ),
+      minibar: minibarHelpers.getMinibarContext(item.options, itemDataCopy),
       footnotes: footnotes,
       numberOfRows: item.data.table.length - 1, // do not count the header
       displayOptions: request.payload.toolRuntimeConfig.displayOptions || {},
@@ -153,56 +134,10 @@ module.exports = {
       context.numberOfRowsToHide = undefined;
     }
 
-    // if minibars active
-    if (item.options.minibar !== null && item.options.minibar !== undefined) {
-      if (
-        item.options.minibar.selectedColumn !== null &&
-        item.options.minibar.selectedColumn !== undefined
-      ) {
-        context.minibar = minibarHelpers.getMinibarData(
-          itemDataCopy,
-          item.options.minibar.selectedColumn
-        );
-
-        if (
-          item.options.minibar.barColor.positive.className === "" &&
-          item.options.minibar.barColor.positive.colorCode === ""
-        ) {
-          item.options.minibar.barColor.positive.className = getPositiveColor(
-            context.minibar.type
-          );
-        } else if (item.options.minibar.barColor.positive.className !== "") {
-          item.options.minibar.barColor.positive.colorCode = "";
-        }
-
-        if (
-          item.options.minibar.barColor.negative.className === "" &&
-          item.options.minibar.barColor.negative.colorCode === ""
-        ) {
-          item.options.minibar.barColor.negative.className = getNegativeColor(
-            context.minibar.type
-          );
-        } else if (item.options.minibar.barColor.negative.className !== "") {
-          item.options.minibar.barColor.negative.colorCode = "";
-        }
-
-        if (context.item.options.minibar.invertColors) {
-          let color = context.item.options.minibar.barColor.negative;
-          context.item.options.minibar.barColor.negative =
-            context.item.options.minibar.barColor.positive;
-          context.item.options.minibar.barColor.positive = color;
-        }
-      }
-    }
-
-    try {
-      renderingInfo.markup = nunjucksEnv.render(
-        path.join(viewsDir, "table.html"),
-        context
-      );
-    } catch (ex) {
-      console.log(ex);
-    }
+    renderingInfo.markup = nunjucksEnv.render(
+      path.join(viewsDir, "table.html"),
+      context
+    );
 
     // the scripts need to know if we are confident that the numberOfRowsToHide is correct
     // it's only valid if we had a fixed width given in toolRuntimeConfig, otherwise we reset it here to be calculated by the scripts again

diff --git a/styles_src/q-table.scss b/styles_src/q-table.scss
@@ -262,6 +262,11 @@ tr.q-table-state-visible {
 }
 
 .q-table-annotation {
+  position: relative;
+}
+
+.q-table-annotation:after {
+  content: attr(data-annotation);
   position: absolute;
   color: #6e6e7e;
   margin-left: 1px;

diff --git a/test/e2e-tests.js b/test/e2e-tests.js
@@ -188,6 +188,21 @@ lab.experiment("minibars", () => {
 
     expect(resultResp).to.be.equals(workingMinibarsMarkup);
   });
+
+  it("shows table correctly when no minibar-options", async () => {
+    const response = await server.inject({
+      url: "/rendering-info/web?_id=someid",
+      method: "POST",
+      payload: {
+        item: require("../resources/fixtures/data/four-column.json"),
+        toolRuntimeConfig: {}
+      }
+    });
+
+    const dom = new JSDOM(response.result.markup);
+    const cells = dom.window.document.querySelectorAll("td");
+    expect(cells.length).to.be.equals(28);
+  });
 });
 
 lab.experiment("footnotes", () => {
@@ -209,7 +224,7 @@ lab.experiment("footnotes", () => {
     let annotationIndexes = [];
 
     annotations.forEach(annotation => {
-      annotationIndexes.push(annotation.innerHTML);
+      annotationIndexes.push(annotation.dataset.annotation);
     });
 
     expect(annotationIndexes).to.be.equal(["1", "2", "3", "4"]);
@@ -460,7 +475,7 @@ lab.experiment("footnotes", () => {
     );
     let annotationIndexes = [];
     annotations.forEach(annotation => {
-      annotationIndexes.push(annotation.innerHTML);
+      annotationIndexes.push(annotation.dataset.annotation);
     });
 
     expect(annotationIndexes).to.be.equal(["1"]);

diff --git a/views/cells/cell.html b/views/cells/cell.html
@@ -3,8 +3,9 @@
   data-label="{{ tableData[0][loop.index0].value }}{% if (item.options.cardLayout or item.options.cardLayoutIfSmall) and tableData[0][loop.index0].footnote !== null and row_loop.index0 === 0 %}{{tableData[0][loop.index0].footnote.unicode}}{% endif %}"
 {% endif %} 
   class="q-table__cell q-table__cell--{{ cell.type }} {{cell.classes.join(" ")}}">
-  {{ cell.value }}
 {%- if cell.footnote %}
-  <span class="q-table-annotation">{{ cell.footnote.value }}</span>
+  <span data-annotation="{{ cell.footnote.value }}" class="q-table-annotation">{{ cell.value }}</span>
+{% else %}
+  {{ cell.value }}
 {%- endif %}
 </td>
diff --git a/views/cells/minibar-mixed.html b/views/cells/minibar-mixed.html
@@ -5,26 +5,32 @@
   {% if item.options.minibar.selectedColumn === loop.index0 and item.options.minibar.selectedColumn != null and not initWithCardLayout %}
   q-table-minibar--mixed">
   <div data-minibar="{{minibar.values[row_loop.index].type}}" class="q-table-minibar-alignment--{{minibar.values[row_loop.index].type}} q-table__cell q-table__cell--{{cell.type}} {% if minibar.values[row_loop.index].type === "positive" %}{{cell.footnote.class}}{%- endif -%} ">
+  {%- if cell.footnote %}
+    <span data-annotation="{{ cell.footnote.value }}" class="q-table-annotation">{{ cell.value }}</span>
+  {% else %}
     {{ cell.value }}
-    {%- if cell.footnote %}<span class="q-table-annotation">{{ cell.footnote.value }}</span>{%- endif %}
+  {%- endif %}
   </div>
   {% else %}q-table__cell--{{cell.type}}">
+  {%- if cell.footnote %}
+    <span data-annotation="{{ cell.footnote.value }}" class="q-table-annotation">{{ cell.value }}</span>
+  {% else %}
     {{ cell.value }}
-    {%- if cell.footnote %}<span class="q-table-annotation">{{ cell.footnote.value }}</span>{%- endif %}
+  {%- endif %}
   {% endif %}
   {%- if item.options.minibar.selectedColumn === loop.index0 and item.options.minibar.selectedColumn != null and not initWithCardLayout %}
     {% if minibar.values[row_loop.index].type !== "empty" %}
       <div data-minibar="{{minibar.values[row_loop.index].type}}" class="q-table-minibar-bar--{{minibar.values[row_loop.index].type}} q-table-minibar--{{minibar.values[row_loop.index].type}} 
       {% if minibar.values[row_loop.index].type === "positive" -%}
-        {{item.options.minibar.barColor.positive.className}}
+        {{minibar.barColor.positive.className}}
       {%- else -%}
-        {{item.options.minibar.barColor.negative.className}}
+        {{minibar.barColor.negative.className}}
       {%- endif -%}"  
       style="width: {{minibar.values[row_loop.index].value}}%;
       {%- if minibar.values[row_loop.index].type === "positive" -%}
-        background-color: {{item.options.minibar.barColor.positive.colorCode}};
+        background-color: {{minibar.barColor.positive.colorCode}};
       {%- else -%}
-        background-color: {{item.options.minibar.barColor.negative.colorCode}};
+        background-color: {{minibar.barColor.negative.colorCode}};
       {%- endif -%}">
       </div>
     {% endif %}

diff --git a/views/cells/minibar-negative.html b/views/cells/minibar-negative.html
@@ -1,9 +1,9 @@
 {%- if item.options.minibar.selectedColumn === loop.index0 and item.options.minibar.selectedColumn != null and not initWithCardLayout %}
   <!-- this cell contains the minibar -->
   <td class="q-table-minibar-cell" data-minibar="{{minibar.type}}" style="padding-left: 12px; padding-right: 0px !important;">
-    <div class="q-table-minibar-bar--{{minibar.values[row_loop.index].type}} {{item.options.minibar.barColor.negative.className}}"
+    <div class="q-table-minibar-bar--{{minibar.values[row_loop.index].type}} {{minibar.barColor.negative.className}}"
   {% if minibar.values[row_loop.index].type !== "empty" %}
-    style="width: {{minibar.values[row_loop.index].value}}%; background-color: {{item.options.minibar.barColor.negative.colorCode}};"
+    style="width: {{minibar.values[row_loop.index].value}}%; background-color: {{minibar.barColor.negative.colorCode}};"
   {% endif %}>
   </div>
 </td> 
@@ -20,8 +20,9 @@
 {%- if item.options.minibar.selectedColumn === loop.index0 and item.options.minibar.selectedColumn != null and not initWithCardLayout %}
   q-table-minibar-cell--value" data-minibar="{{minibar.type}}" style="padding-right: 12px;
 {% endif %}">
-{{ cell.value }}
 {%- if cell.footnote %}
-  <span class="q-table-annotation">{{ cell.footnote.value }}</span>
+  <span data-annotation="{{ cell.footnote.value }}" class="q-table-annotation">{{ cell.value }}</span>
+{% else %}
+  {{ cell.value }}
 {%- endif %}
 </td>
diff --git a/views/cells/minibar-positive.html b/views/cells/minibar-positive.html
@@ -7,17 +7,18 @@
 {%- if item.options.minibar.selectedColumn === loop.index0 and item.options.minibar.selectedColumn != null and not initWithCardLayout %}
   q-table-minibar-cell--value" data-minibar="{{minibar.type}}" style="padding-left: 12px;
 {% endif %}">
-  {{ cell.value }}
 {%- if cell.footnote %}
-  <span class="q-table-annotation">{{ cell.footnote.value }}</span>
+  <span data-annotation="{{ cell.footnote.value }}" class="q-table-annotation">{{ cell.value }}</span>
+{% else %}
+  {{ cell.value }}
 {%- endif %}
 </td>
 {%- if item.options.minibar.selectedColumn === loop.index0 and item.options.minibar.selectedColumn != null and not initWithCardLayout %}
 <!-- this cell contains the minibar -->
 <td data-minibar="{{minibar.type}}" class="q-table-minibar-cell" style="padding-right: 12px;">
-  <div class="q-table-minibar-bar--{{minibar.values[row_loop.index].type}} {{item.options.minibar.barColor.positive.className}}"
+  <div class="q-table-minibar-bar--{{minibar.values[row_loop.index].type}} {{minibar.barColor.positive.className}}"
 {% if minibar.values[row_loop.index].type !== "empty" %}
-  style="width: {{minibar.values[row_loop.index].value}}%; background-color: {{item.options.minibar.barColor.positive.colorCode}};"></div>
+  style="width: {{minibar.values[row_loop.index].value}}%; background-color: {{minibar.barColor.positive.colorCode}};"></div>
 {%- endif %}
 </td> 
 {%- endif %}