Merge pull request #24 from qlik-oss/QPE-622-visible-scrollbar

[QPE 622] show scrollbar for easier scrolling

resources/Accounts.csv

@@ -2,7 +2,7 @@
 Revenues;;rgb(183, 219, 255);<italic>;;<center>;;<comment>
 Gross sales revenues;;;;;;;
 Less return & allowances;;;;;;;
-Net sales revenues;<bold>;<soft>;;;;;
+Net sales revenues;<bold>;#efefef;;;;;
 Cost of goods sold;<bold>;;;;;;
 Direct materials;;;;;;;
 Direct labor;;;;;;;
@@ -25,7 +25,7 @@ Administration salaries;;;;;;;
 Rent expenses;;;;;;;
 Depreciation, computers;;;;;;;
 Other general & admin expenses;;;;;;;
-total general & admin expenses;<bold>;<soft>;;;;;
+total general & admin expenses;<bold>;#efefef;;;;;
 total operating expenses;<bold>;#CCC0FF;;;;;
 Operating income before taxes;<bold>;#C4C4C4;;<white>;;<large>;
 Financial revenue & expenses;;#b7dbff;<italic>;;<center>;;<comment>
@@ -38,7 +38,7 @@ Income before extraordinary items;;;;;;;
 Extraordinary items;;#b7dbff;<italic>;;<center>;;<comment>
 Sale of land;;;;;;;
 Less initial cost;;;;;;;
-Net gain on sale of land;<bold>;<soft>;;;;;
+Net gain on sale of land;<bold>;#efefef;;;;;
 Less income tax on gain;;;;;;;
-Extraordinary items after tax;<bold>;<soft>;;;;;
+Extraordinary items after tax;<bold>;#efefef;;;;;
 Net Income (Profit);<bold>;#C4C4C4;;<white>;<center>;<large>;

resources/Accounts2.csv

@@ -10,7 +10,7 @@ Operating expenses;<bold>;;<italic>;;;;
 Total selling expenses;<bold>;rgb(128, 191, 255);;;;;
 General & administrative expenses;<bold>;;<italic>;;<center>;;<comment>
 Other general & admin expenses;<bold>;rgb(128, 191, 255);<white>;;<center>;<large>;
-total general & admin expenses;<bold>;<soft>;;;;;
+total general & admin expenses;<bold>;#efefef;;;;;
 total operating expenses;<bold>;rgb(128, 191, 255);;;;;
 Operating income before taxes;<bold>;rgb(0, 102, 204);;<white>;;<large>;
 Financial revenue & expenses;<bold>;;<italic>;;<center>;;<comment>

resources/QlikLook.csv

@@ -10,7 +10,7 @@ Operating expenses;<bold>;;<italic>;;;;
 Total selling expenses;<bold>;RGB(225,226,226);;;;;
 General & administrative expenses;<bold>;;<italic>;;<center>;;<comment>
 Other general & admin expenses;<bold>;rgb(128, 191, 255);<white>;;<center>;<large>;
-total general & admin expenses;<bold>;<soft>;;;;;
+total general & admin expenses;<bold>;#efefef;;;;;
 total operating expenses;<bold>;rgb(128, 191, 255);<white>;;;;
 Operating income before taxes;<bold>;RGB(193,216,47);;;;<large>;
 Financial revenue & expenses;<bold>;;<italic>;;<center>;;<comment>

src/data-table/data-cell.jsx

@@ -53,10 +53,10 @@ function formatMeasurementValue (measurement, styling) {
 }
 
 function getSemaphoreColors (measurement, semaphoreColors) {
-  if (measurement < semaphoreColors.status.critical) {
+  if (measurement.value < semaphoreColors.status.critical) {
     return semaphoreColors.statusColors.critical;
   }
-  if (measurement < semaphoreColors.status.medium) {
+  if (measurement.value < semaphoreColors.status.medium) {
     return semaphoreColors.statusColors.medium;
   }
   return semaphoreColors.statusColors.normal;
@@ -111,7 +111,9 @@ class DataCell extends React.PureComponent {
 
     const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling;
     const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-    const shouldHaveSemaphoreColors = (fieldsToApplyTo.applyToMetric || fieldsToApplyTo.specificFields.indexOf(measurement.parents.dimension1.header) !== -1);
+    const dimension1Row = measurement.parents.dimension1.elementNumber;
+    const isSpecifiedMetricField = fieldsToApplyTo.metricsSpecificFields.indexOf(dimension1Row) !== -1;
+    const shouldHaveSemaphoreColors = (fieldsToApplyTo.applyToMetric || isSpecifiedMetricField);
     if (isValidSemaphoreValue && shouldHaveSemaphoreColors) {
       const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors);
       cellStyle = {
@@ -146,6 +148,7 @@ class DataCell extends React.PureComponent {
     );
   }
 }
+
 DataCell.propTypes = {
   data: PropTypes.shape({
     headers: PropTypes.shape({

src/definition/formatted.js

@@ -33,7 +33,7 @@ const formatted = {
       component: 'color-picker',
       defaultValue: {
         color: '#fff',
-        index: 6
+        index: 1
       },
       dualOutput: true,
       label: 'Even row background color',
@@ -43,8 +43,8 @@ const formatted = {
     rowOddBGColor: {
       component: 'color-picker',
       defaultValue: {
-        color: '#fff',
-        index: 6
+        color: '#b6d7ea',
+        index: 4
       },
       dualOutput: true,
       label: 'Odd row background color',

src/definition/metric-semaphores.js

@@ -40,7 +40,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 7,
+        index: 8,
         color: '#f93f17'
       }
     },
@@ -50,7 +50,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 10,
+        index: 11,
         color: '#ffffff'
       }
     },
@@ -66,7 +66,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 8,
+        index: 9,
         color: '#ffcf02'
       }
     },
@@ -76,7 +76,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 11,
+        index: 12,
         color: '#000000'
       }
     },
@@ -86,7 +86,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 9,
+        index: 10,
         color: '#276e27'
       }
     },
@@ -96,7 +96,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 10,
+        index: 11,
         color: '#ffffff'
       }
     }

src/headers-table/measurement-column-header.jsx

@@ -36,7 +36,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     ...baseCSS,
     cursor: 'default',
     fontSize: `${15 + fontSizeAdjustment} px`,
-    height: '70px',
+    height: '80px',
     verticalAlign: 'middle'
   };
   return (

src/initialize-transformed.js

@@ -271,11 +271,12 @@ async function initializeTransformed ({ $element, layout, component }) {
             layout.conceptsemaphore7,
             layout.conceptsemaphore9,
             layout.conceptsemaphore10
-          ]
+          ],
+          metricsSpecificFields: layout.metricssemaphore.split(',').map(entry => Number(entry))
         },
         status: {
-          critical: layout.metricstatus1,
-          medium: layout.metricstatus2
+          critical: layout.metricsstatus1,
+          medium: layout.metricsstatus2
         },
         statusColors: {
           critical: {

src/main.less

@@ -38,7 +38,7 @@
     opacity: 0.9;
     text-align: center;
     transform: translate(-50%, -110%);
-    
+
     > p {
       color: #fff;
     }
@@ -76,8 +76,8 @@
   td,
   th {
     border: 1px solid #fff;
-    padding: 5px;
     border-collapse: collapse;
+    padding: 5px !important; // prevent overwriting from single object
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -228,10 +228,6 @@
     min-width: 522px;
   }
 
-  .grid-cells::before {
-    content: "\00a0";
-  }
-
   .grid {
     height: 50px;
     width: 350px;
@@ -297,9 +293,7 @@
 
   // hide scrollbars
   .kpi-table .header-wrapper,
-  .kpi-table .row-wrapper,
-  .data-table .header-wrapper,
-  .data-table .row-wrapper {
+  .data-table .header-wrapper {
     /* stylelint-disable-next-line property-no-unknown */
     scrollbar-width: none;
     -ms-overflow-style: none; // IE 10+

src/style-builder.js

@@ -11,9 +11,13 @@ function StyleBuilder (styling) {
   let hasCustomFileStyle = false;
 
   function applyStandardAttributes (rowNumber) {
-    const isEven = rowNumber % 2 === 0;
-    style.backgroundColor = isEven ? options.backgroundColor : options.backgroundColorOdd;
-    style.color = options.color;
+    const hasBackgroundColor = options.backgroundColor && options.backgroundColor.color;
+    const hasOddBackgroundColor = options.backgroundColorOdd && options.backgroundColorOdd.color;
+    if (hasBackgroundColor && hasOddBackgroundColor) {
+      const isEven = rowNumber % 2 === 0;
+      style.backgroundColor = isEven ? options.backgroundColor.color : options.backgroundColorOdd.color;
+      style.color = options.color;
+    }
     style.fontSize = `${13 + options.fontSizeAdjustment}px`;
   }