diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index d176fc8..cae3f2f 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -96,30 +96,25 @@ class DataCell extends React.PureComponent { textAlignment = textAlignmentProp; } - let cellStyle = { - fontFamily: styling.options.fontFamily, - ...styleBuilder.getStyle(), - paddingLeft: '4px', - textAlign: textAlignment - - }; - const { semaphoreColors } = styling; + const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling; const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value); - const shouldHaveSemaphoreColors = semaphoreColors.fieldsToApplyTo.applyToAll || semaphoreColors.fieldsToApplyTo.specificFields.indexOf(measurement.parents.dimension1.header) !== -1; + const shouldHaveSemaphoreColors = fieldsToApplyTo.applyToMetric && (fieldsToApplyTo.applyToAll || fieldsToApplyTo.specificFields.indexOf(measurement.name) !== -1); + let cellStyle; if (isValidSemaphoreValue && shouldHaveSemaphoreColors) { const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors); cellStyle = { backgroundColor, color, fontFamily: styling.options.fontFamily, - fontSize: styleBuilder.getStyle().fontSize, + ...styleBuilder.getStyle(), paddingLeft: '4px', textAlign: textAlignment }; } let cellClass = 'grid-cells'; - const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1; + const hasTwoDimensions = data.headers.dimension2 && data.headers.dimension2.length > 0; + const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1 && hasTwoDimensions; if (shouldUseSmallCells) { cellClass = 'grid-cells-small'; } @@ -135,7 +130,6 @@ class DataCell extends React.PureComponent { ); } } - DataCell.propTypes = { data: PropTypes.shape({ headers: PropTypes.shape({ diff --git a/src/initialize-transformed.js b/src/initialize-transformed.js index 7b835ba..ec6f244 100644 --- a/src/initialize-transformed.js +++ b/src/initialize-transformed.js @@ -279,7 +279,7 @@ async function initializeTransformed ({ $element, layout, component }) { }, options: { backgroundColor: colors[`vColLib${layout.ColorSchema}`], - backgroundColorOdd: colors[`vColLib${layout.ColorSchemaP}`], + backgroundColorOdd: colors[`vColLib${layout.ColorSchema}P`], color: layout.BodyTextColorSchema, fontFamily: layout.FontFamily, fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize), @@ -288,6 +288,7 @@ async function initializeTransformed ({ $element, layout, component }) { semaphoreColors: { fieldsToApplyTo: { applyToAll: layout.allsemaphores, + applyToMetric: layout.allmetrics, specificFields: [ layout.conceptsemaphore1, layout.conceptsemaphore2, diff --git a/src/main.less b/src/main.less index ee5dbd9..4aff974 100644 --- a/src/main.less +++ b/src/main.less @@ -3,6 +3,12 @@ @TableBorder: 1px solid #d3d3d3; @KpiTableWidth: 230px; + *, + *::before, + *::after { + box-sizing: border-box; + } + .edit-mode { pointer-events: none; }