From b5d9633496d8f702d4c3fdb07193f3b31f39dc52 Mon Sep 17 00:00:00 2001 From: Albert Backenhof Date: Thu, 11 Apr 2019 12:25:58 +0200 Subject: [PATCH] Replaced semaphores with Conditional Coloring -Was unclear what the two semaphores did and meant. Also, Concept Semaphores didn't seem to work. Issue: DEB-177 --- src/data-table/data-cell.jsx | 38 +++--- src/definition/concept-semaphores.js | 96 -------------- src/definition/conditional-coloring.js | 169 +++++++++++++++++++++++++ src/definition/index.js | 6 +- src/definition/metric-semaphores.js | 112 ---------------- src/initialize-transformed.js | 47 +++---- 6 files changed, 205 insertions(+), 263 deletions(-) delete mode 100644 src/definition/concept-semaphores.js create mode 100644 src/definition/conditional-coloring.js delete mode 100644 src/definition/metric-semaphores.js diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index d982d23..cedd702 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -54,21 +54,17 @@ class DataCell extends React.PureComponent { formattedMeasurementValue = formatMeasurementValue(measurement, styling); } - const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling; - const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value); - 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 = { - ...styleBuilder.getStyle(), - backgroundColor, - color, - fontFamily: styling.options.fontFamily, - paddingLeft: '5px', - textAlign: textAlignment - }; + const { conditionalColoring } = styling; + if (conditionalColoring.enabled) { + const isValidConditionalColoringValue = !styleBuilder.hasComments() && !isNaN(measurement.value); + const isSpecifiedRow = + conditionalColoring.rows.indexOf(measurement.parents.dimension1.header) !== -1; + const shouldHaveConditionalColoring = conditionalColoring.colorAllRows || isSpecifiedRow; + if (isValidConditionalColoringValue && shouldHaveConditionalColoring) { + const { color, textColor } = getConditionalColor(measurement, conditionalColoring); + cellStyle.backgroundColor = color.color; + cellStyle.color = textColor.color; + } } let cellClass = 'grid-cells'; @@ -176,12 +172,12 @@ function formatMeasurementValue (measurement, styling) { return formattedMeasurementValue; } -function getSemaphoreColors (measurement, semaphoreColors) { - if (measurement.value < semaphoreColors.status.critical) { - return semaphoreColors.statusColors.critical; +function getConditionalColor (measurement, conditionalColoring) { + if (measurement.value < conditionalColoring.threshold.poor) { + return conditionalColoring.colors.poor; } - if (measurement.value < semaphoreColors.status.medium) { - return semaphoreColors.statusColors.medium; + if (measurement.value < conditionalColoring.threshold.fair) { + return conditionalColoring.colors.fair; } - return semaphoreColors.statusColors.normal; + return conditionalColoring.colors.good; } diff --git a/src/definition/concept-semaphores.js b/src/definition/concept-semaphores.js deleted file mode 100644 index 78a7bc5..0000000 --- a/src/definition/concept-semaphores.js +++ /dev/null @@ -1,96 +0,0 @@ -const conceptSemaphores = { - items: { - AllConcepts: { - component: 'switch', - defaultValue: true, - label: 'All concepts affected', - options: [ - { - label: 'On', - value: true - }, - { - label: 'Off', - value: false - } - ], - ref: 'allsemaphores', - type: 'boolean' - }, - ConceptsAffected1: { - defaultValue: '', - ref: 'conceptsemaphore1', - show: data => !data.allsemaphores, - translation: 'Concept 1', - type: 'string' - }, - ConceptsAffected2: { - defaultValue: '', - ref: 'conceptsemaphore2', - show: data => !data.allsemaphores, - translation: 'Concept 2', - type: 'string' - }, - ConceptsAffected3: { - defaultValue: '', - ref: 'conceptsemaphore3', - show: data => !data.allsemaphores, - translation: 'Concept 3', - type: 'string' - }, - ConceptsAffected4: { - defaultValue: '', - ref: 'conceptsemaphore4', - show: data => !data.allsemaphores, - translation: 'Concept 4', - type: 'string' - }, - ConceptsAffected5: { - defaultValue: '', - ref: 'conceptsemaphore5', - show: data => !data.allsemaphores, - translation: 'Concept 5', - type: 'string' - }, - ConceptsAffected6: { - defaultValue: '', - ref: 'conceptsemaphore6', - show: data => !data.allsemaphores, - translation: 'Concept 6', - type: 'string' - }, - ConceptsAffected7: { - defaultValue: '', - ref: 'conceptsemaphore7', - show: data => !data.allsemaphores, - translation: 'Concept 7', - type: 'string' - }, - ConceptsAffected8: { - defaultValue: '', - ref: 'conceptsemaphore8', - show: data => !data.allsemaphores, - translation: 'Concept 8', - type: 'string' - }, - ConceptsAffected9: { - defaultValue: '', - ref: 'conceptsemaphore9', - show: data => !data.allsemaphores, - translation: 'Concept 9', - type: 'string' - }, - // eslint-disable-next-line sort-keys - ConceptsAffected10: { - defaultValue: '', - ref: 'conceptsemaphore10', - show: data => !data.allsemaphores, - translation: 'Concept 10', - type: 'string' - } - }, - label: 'Concept Semaphores', - type: 'items' -}; - -export default conceptSemaphores; diff --git a/src/definition/conditional-coloring.js b/src/definition/conditional-coloring.js new file mode 100644 index 0000000..05452e4 --- /dev/null +++ b/src/definition/conditional-coloring.js @@ -0,0 +1,169 @@ +const conditionalColoring = { + type: 'items', + label: 'Color by condition', + items: { + Enabled: { + ref: 'conditionalcoloring.enabled', + type: 'boolean', + label: 'Enabled', + component: 'switch', + defaultValue: false, + options: [ + { + value: true, + label: 'On' + }, + { + value: false, + label: 'Off' + } + ] + }, + ColorAllRows: { + ref: 'conditionalcoloring.colorall', + type: 'boolean', + label: 'Color all rows by condition', + component: 'switch', + defaultValue: true, + options: [ + { + value: true, + label: 'All rows' + }, + { + value: false, + label: 'Specified rows' + } + ], + show (data) { + return data.conditionalcoloring.enabled; + } + }, + Rows: { + type: 'array', + ref: 'conditionalcoloring.rows', + label: 'Rows to color', + itemTitleRef: function (data) { + return data.rowname; + }, + allowAdd: true, + allowRemove: true, + addTranslation: 'Add row to color', + items: { + Row: { + ref: 'rowname', + label: 'Name of row', + type: 'string', + defaultValue: '' + } + }, + show (data) { + return data.conditionalcoloring.enabled && !data.conditionalcoloring.colorall; + } + }, + ThresholdPoor: { + ref: 'conditionalcoloring.threshold_poor', + translation: 'Poor is less than', + type: 'number', + defaultValue: -0.1, + show (data) { + return data.conditionalcoloring.enabled; + } + }, + ColorPoor: { + ref: 'conditionalcoloring.color_poor', + label: 'Poor color fill', + type: 'object', + component: 'color-picker', + dualOutput: true, + defaultValue: { + index: 10, + color: '#f93f17' + }, + show (data) { + return data.conditionalcoloring.enabled; + } + }, + TextColorPoor: { + ref: 'conditionalcoloring.textcolor_poor', + label: 'Poor text color', + type: 'object', + component: 'color-picker', + dualOutput: true, + defaultValue: { + index: 1, + color: '#ffffff' + }, + show (data) { + return data.conditionalcoloring.enabled; + } + }, + ThresholdFair: { + ref: 'conditionalcoloring.threshold_fair', + translation: 'Fair is less than', + type: 'number', + defaultValue: 0, + show (data) { + return data.conditionalcoloring.enabled; + } + }, + ColorFair: { + ref: 'conditionalcoloring.color_fair', + label: 'Fair color fill', + type: 'object', + component: 'color-picker', + dualOutput: true, + defaultValue: { + index: 8, + color: '#ffcf02' + }, + show (data) { + return data.conditionalcoloring.enabled; + } + }, + TextColorFair: { + ref: 'conditionalcoloring.textcolor_fair', + label: 'Fair text color', + type: 'object', + component: 'color-picker', + dualOutput: true, + defaultValue: { + index: 15, + color: '#000000' + }, + show (data) { + return data.conditionalcoloring.enabled; + } + }, + ColorGood: { + ref: 'conditionalcoloring.color_good', + label: 'Good color fill', + type: 'object', + component: 'color-picker', + dualOutput: true, + defaultValue: { + index: 3, + color: '#276e27' + }, + show (data) { + return data.conditionalcoloring.enabled; + } + }, + TextColorGood: { + ref: 'conditionalcoloring.textcolor_good', + label: 'Good text color', + type: 'object', + component: 'color-picker', + dualOutput: true, + defaultValue: { + index: 1, + color: '#ffffff' + }, + show (data) { + return data.conditionalcoloring.enabled; + } + } + } +}; + +export default conditionalColoring; diff --git a/src/definition/index.js b/src/definition/index.js index 20f876e..ddb5e21 100644 --- a/src/definition/index.js +++ b/src/definition/index.js @@ -1,8 +1,7 @@ import pagination from './pagination'; import header from './header'; import tableFormat from './table-format'; -import conceptSemaphores from './concept-semaphores'; -import metricSemaphores from './metric-semaphores'; +import conditionalColoring from './conditional-coloring'; const definition = { component: 'accordion', @@ -23,10 +22,9 @@ const definition = { }, settings: { items: { - ConceptSemaphores: conceptSemaphores, Formatted: tableFormat, Header: header, - MetricSemaphores: metricSemaphores, + ConditionalColoring: conditionalColoring, Pagination: pagination }, uses: 'settings' diff --git a/src/definition/metric-semaphores.js b/src/definition/metric-semaphores.js deleted file mode 100644 index 0ef5d2d..0000000 --- a/src/definition/metric-semaphores.js +++ /dev/null @@ -1,112 +0,0 @@ -const metricSemaphores = { - type: 'items', - label: 'Metric Semaphores', - items: { - AllMetrics: { - ref: 'allmetrics', - type: 'boolean', - component: 'switch', - label: 'All metrics affected', - options: [ - { - value: true, - label: 'On' - }, - { - value: false, - label: 'Off' - } - ], - defaultValue: false - }, - MetricsAffected: { - ref: 'metricssemaphore', - translation: 'Metrics affected (1,2,4,...)', - type: 'string', - defaultValue: '-', - show (data) { - return !data.allmetrics; - } - }, - MetricStatus1: { - ref: 'metricsstatus1', - translation: 'Critic is less than', - type: 'number', - defaultValue: -0.1 - }, - ColorStatus1: { - ref: 'colorstatus1', - label: 'Critic Color Fill', - type: 'object', - component: 'color-picker', - dualOutput: true, - defaultValue: { - index: 8, - color: '#f93f17' - } - }, - ColorStatus1Text: { - ref: 'colorstatus1text', - label: 'Critic Color Text', - type: 'object', - component: 'color-picker', - dualOutput: true, - defaultValue: { - index: 11, - color: '#ffffff' - } - }, - MetricStatus2: { - ref: 'metricsstatus2', - translation: 'Medium is less than', - type: 'number', - defaultValue: 0 - }, - ColorStatus2: { - ref: 'colorstatus2', - label: 'Medium Color Fill', - type: 'object', - component: 'color-picker', - dualOutput: true, - defaultValue: { - index: 9, - color: '#ffcf02' - } - }, - ColorStatus2Text: { - ref: 'colorstatus2text', - label: 'Medium Color Text', - type: 'object', - component: 'color-picker', - dualOutput: true, - defaultValue: { - index: 12, - color: '#000000' - } - }, - ColorStatus3: { - ref: 'colorstatus3', - label: 'Success Color Fill', - type: 'object', - component: 'color-picker', - dualOutput: true, - defaultValue: { - index: 10, - color: '#276e27' - } - }, - ColorStatus3Text: { - ref: 'colorstatus3text', - label: 'Success Color Text', - type: 'object', - component: 'color-picker', - dualOutput: true, - defaultValue: { - index: 11, - color: '#ffffff' - } - } - } -}; - -export default metricSemaphores; diff --git a/src/initialize-transformed.js b/src/initialize-transformed.js index 8169a0e..b40d274 100644 --- a/src/initialize-transformed.js +++ b/src/initialize-transformed.js @@ -282,39 +282,26 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize), textAlignment: layout.cellTextAlignment }, - semaphoreColors: { - fieldsToApplyTo: { - applyToAll: layout.allsemaphores, - applyToMetric: layout.allmetrics, - specificFields: [ - layout.conceptsemaphore1, - layout.conceptsemaphore2, - layout.conceptsemaphore3, - layout.conceptsemaphore4, - layout.conceptsemaphore5, - layout.conceptsemaphore6, - layout.conceptsemaphore7, - layout.conceptsemaphore9, - layout.conceptsemaphore10 - ], - metricsSpecificFields: layout.metricssemaphore.split(',').map(entry => Number(entry)) + conditionalColoring: { + enabled: layout.conditionalcoloring.enabled, + colorAllRows: layout.conditionalcoloring.colorall, + rows: layout.conditionalcoloring.rows.map(row => row.rowname), + threshold: { + poor: layout.conditionalcoloring.threshold_poor, + fair: layout.conditionalcoloring.threshold_fair }, - status: { - critical: layout.metricsstatus1, - medium: layout.metricsstatus2 - }, - statusColors: { - critical: { - backgroundColor: layout.colorstatus1.color, - color: layout.colorstatus1text.color + colors: { + poor: { + color: layout.conditionalcoloring.color_poor, + textColor: layout.conditionalcoloring.textcolor_poor }, - medium: { - backgroundColor: layout.colorstatus2.color, - color: layout.colorstatus2text.color + fair: { + color: layout.conditionalcoloring.color_fair, + textColor: layout.conditionalcoloring.textcolor_fair }, - normal: { - backgroundColor: layout.colorstatus3.color, - color: layout.colorstatus3text.color + good: { + color: layout.conditionalcoloring.color_good, + textColor: layout.conditionalcoloring.textcolor_good } } },