Merge pull request #254 from jpmorganchase/hypergrid-css

Added positive/negative color & font to Hypergrid CSS style

Author: texodus

packages/perspective-viewer-hypergrid/src/html/hypergrid.html

@@ -17,6 +17,10 @@
             <tr class='hover'>
                 <td class='hover'></td>
             </tr>
+            <tr>
+                <td class='positive'></td>
+                <td class='negative'></td>
+            </tr>
         </table>
     </div>
     <div id='gridWrapper'>

packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js

@@ -162,8 +162,13 @@ function cellStyle(gridCellConfig) {
             } else if (isNaN(gridCellConfig.value)) {
                 gridCellConfig.value = "-";
             } else {
-                gridCellConfig.color =
-                    gridCellConfig.value >= 0 ? gridCellConfig.columnHeaderBackgroundNumberPositive || "rgb(160,207,255)" : gridCellConfig.columnHeaderBackgroundNumberNegative || "rgb(255,136,136)";
+                if (gridCellConfig.value > 0) {
+                    gridCellConfig.color = gridCellConfig.columnColorNumberPositive || "rgb(160,207,255)";
+                    gridCellConfig.backgroundColor = gridCellConfig.columnBackgroundColorNumberPositive ? gridCellConfig.columnBackgroundColorNumberPositive : gridCellConfig.backgroundColor;
+                } else {
+                    gridCellConfig.color = gridCellConfig.columnColorNumberNegative || "rgb(255,136,136)";
+                    gridCellConfig.backgroundColor = gridCellConfig.columnBackgroundColorNumberNegative ? gridCellConfig.columnBackgroundColorNumberNegative : gridCellConfig.backgroundColor;
+                }
             }
         } else if (type === "boolean") {
             gridCellConfig.value = String(gridCellConfig.value);

packages/perspective-viewer-hypergrid/src/js/hypergrid.js

@@ -101,8 +101,6 @@ const light_theme_overrides = {
     columnHeaderBackgroundColor: "#fff",
     columnHeaderForegroundSelectionColor: "#333",
     columnHeaderBackgroundSelectionColor: "#40536d",
-    columnHeaderBackgroundNumberPositive: "#1078d1",
-    columnHeaderBackgroundNumberNegative: "#de3838",
     rowHeaderForegroundSelectionFont: "12px Arial, Helvetica, sans-serif",
     treeHeaderColor: "#666",
     treeHeaderBackgroundColor: "#fff",
@@ -192,6 +190,9 @@ bindTemplate(TEMPLATE)(
                 const header = window.getComputedStyle(this.querySelector("th"), null);
                 const row_hover = window.getComputedStyle(this.querySelector("tr.hover"), null);
                 const cell_hover = window.getComputedStyle(this.querySelector("td.hover"), null);
+                const cell_positive = window.getComputedStyle(this.querySelector("td.positive"), null);
+                const cell_negative = window.getComputedStyle(this.querySelector("td.negative"), null);
+                const table = window.getComputedStyle(this.querySelector("table"));
 
                 grid_properties["showRowNumbers"] = grid_properties["showCheckboxes"] || grid_properties["showRowNumbers"];
                 grid_properties["treeHeaderBackgroundColor"] = grid_properties["backgroundColor"] = style.getPropertyValue("background-color");
@@ -200,6 +201,19 @@ bindTemplate(TEMPLATE)(
                 grid_properties["columnHeaderSeparatorColor"] = header.getPropertyValue("border-color");
                 grid_properties["columnHeaderColor"] = header.getPropertyValue("color");
 
+                grid_properties["columnColorNumberPositive"] = cell_positive.getPropertyValue("color");
+                grid_properties["columnColorNumberNegative"] = cell_negative.getPropertyValue("color");
+                grid_properties["columnBackgroundColorNumberPositive"] = cell_positive.getPropertyValue("background-color");
+                grid_properties["columnBackgroundColorNumberNegative"] = cell_negative.getPropertyValue("background-color");
+
+                const font = `${table.getPropertyValue("font-size")} ${table.getPropertyValue("font-family")}`;
+                const headerfont = `${header.getPropertyValue("font-size")} ${header.getPropertyValue("font-family")}`;
+
+                grid_properties["columnHeaderFont"] = headerfont;
+                grid_properties["font"] = font;
+                grid_properties["rowHeaderFont"] = font;
+                grid_properties["treeHeaderFont"] = font;
+
                 grid_properties["hoverRowHighlight"]["backgroundColor"] = row_hover.getPropertyValue("background-color");
                 grid_properties["hoverRowHighlight"]["color"] = row_hover.getPropertyValue("color");
                 grid_properties["hoverCellHighlight"]["backgroundColor"] = cell_hover.getPropertyValue("background-color");

packages/perspective-viewer-hypergrid/src/less/hypergrid.less

@@ -11,6 +11,10 @@ perspective-hypergrid {
     position: relative;
     color: #666;
 
+    table {
+        font: 12px "open sans", helvetica, sans-serif;
+    }
+
     td.hover {
         background-color: #eeeeee;
     }
@@ -19,6 +23,14 @@ perspective-hypergrid {
         background-color: #f6f6f6;
     }
 
+    td.positive {
+        color: #1078d1;
+    }
+
+    td.negative {
+        color: #de3838;
+    }
+
     #app perspective-hypergrid {
         position: absolute;
     }