Updated the indices of the default colors

-Of the Metric Semaphores.

Issue: DEB-162

src/definition/metric-semaphores.js

@@ -41,7 +41,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 8,
+        index: 10,
         color: '#f93f17'
       }
     },
@@ -52,7 +52,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 11,
+        index: 1,
         color: '#ffffff'
       }
     },
@@ -69,7 +69,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 9,
+        index: 8,
         color: '#ffcf02'
       }
     },
@@ -80,7 +80,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 12,
+        index: 15,
         color: '#000000'
       }
     },
@@ -91,7 +91,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 10,
+        index: 3,
         color: '#276e27'
       }
     },
@@ -102,7 +102,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 11,
+        index: 1,
         color: '#ffffff'
       }
     }

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

@@ -6,7 +6,7 @@ import Tooltip from '../tooltip/index.jsx';
 const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measurement, styling }) => {
   const title = `${measurement.name} ${measurement.magnitudeLabelSuffix}`;
   const { fontSizeAdjustment } = styling.headerOptions;
-  const isMediumFontSize = fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
+  const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
   if (hasSecondDimension) {
     const isPercentageFormat = measurement.format.substring(measurement.format.length - 1) === '%';
@@ -20,7 +20,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
       ...baseCSS,
       cursor: 'default',
       fontSize: `${baseFontSize + fontSizeAdjustment}px`,
-      height: isMediumFontSize ? '40px' : '25px',
+      height: isMediumFontSize ? '50px' : '25px',
       verticalAlign: 'middle'
     };
     return (
@@ -39,8 +39,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     );
   }
 
-  const isLong = (title.length > 11 && fontSizeAdjustment === HEADER_FONT_SIZE.SMALL)
-    || (title.length > 12 && fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM);
+  const isLong = (title.length > 11 && fontSizeAdjustment === 0) || (title.length > 12 && fontSizeAdjustment === -2);
   const suffixWrap = isLong ? '70' : 'empty';
   const style = {
     ...baseCSS,

src/initialize-transformed.js

@@ -18,7 +18,8 @@ function getAlignment (option) {
 function getFontSizeAdjustment (option) {
   const fontSizeAdjustmentOptions = {
     1: HEADER_FONT_SIZE.SMALL,
-    2: HEADER_FONT_SIZE.MEDIUM
+    2: HEADER_FONT_SIZE.MEDIUM,
+    3: 2
   };
 
   return fontSizeAdjustmentOptions[option] || 0;

src/main.less

@@ -87,6 +87,14 @@
     text-overflow: ellipsis;
   }
 
+  .wrapclass45 {
+    width: 100%;
+    height: 45px;
+    white-space: pre-line;
+    overflow: hidden;
+    display: block;
+  }
+
   .wrapclass70 {
     width: 100%;
     height: 70px;