Merge pull request #574 from FluxNotes/ccp-table-legend

Ccp table legend

Author: nicoleng12

src/mcode-pilot/components/TreatmentOptionsOutcomes/TreatmentOptionsOutcomes.jsx

@@ -6,6 +6,7 @@ import _ from 'lodash';
 import { isSame, getCombinations } from '../../utils/arrayCompare';
 
 import BarChart from '../../visualizations/BarChart/BarChart';
+import TableLegend from '../../visualizations/TableLegend/TableLegend';
 import TreatmentsPopover from '../TreatmentsPopover/TreatmentsPopover';
 
 import './TreatmentOptionsOutcomes.css';
@@ -299,6 +300,7 @@ export default class TreatmentOptionsOutcomes extends Component {
                         )}
                     </div>
                 </div>
+                <TableLegend includedRow={includedRow} treatmentNames={TREATMENT_NAMES}/>
             </div>
         );
     }

src/mcode-pilot/visualizations/BarChart/BarChart.jsx

@@ -5,12 +5,23 @@ import FontAwesome from 'react-fontawesome';
 import './BarChart.css';
 
 export default class BarChart extends Component {
-    getStyles = (survivedPercent, compareToPercent, percentChange) => {
+    getStyles = (survivedPercent, compareToPercent, percentChange, roundedPercent) => {
         let mainStyle, changeStyle, textStyle;
         if (percentChange < 0) {
             // style for when survival decreases (red)
             mainStyle = {"width": `${survivedPercent}%`, "backgroundColor": "#9e9e9e" };
-            changeStyle = {"width": `${Math.abs(percentChange)}%`, "backgroundColor": "#e13949" };
+            changeStyle = {"width": `${Math.abs(roundedPercent)}%`, "background": `repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 2px,
+                #EC9696 2px,
+                #EC9696 4px
+              ),
+              linear-gradient(
+                to bottom,
+                #9e9e9e,
+                #9e9e9e
+              )`  };
             textStyle = { "color": "#d9534f" };
         } else {
             // styles for when survival increases (green)
@@ -33,7 +44,7 @@ export default class BarChart extends Component {
             compareToPercent = compareToNumerator / compareToDenominator * 100;
             roundedPercent = Math.floor(survivedPercent - compareToPercent);
             percentChange = survivedPercent - compareToPercent;
-            const styles = this.getStyles(survivedPercent, compareToPercent, percentChange);
+            const styles = this.getStyles(survivedPercent, compareToPercent, percentChange, roundedPercent);
             mainStyle = styles.mainStyle;
             changeStyle = styles.changeStyle;
             textStyle = styles.textStyle;
@@ -55,6 +66,7 @@ export default class BarChart extends Component {
                     <div className="progress-bar">
                         <div className="prog-fill" style={mainStyle}></div>
                         {hasCompare && <div className="prog-fill" style={changeStyle}></div>}
+                        <div className="prog-fill-empty"></div>
                     </div>
                 </div>
             </div>

src/mcode-pilot/visualizations/BarChart/BarChart.scss

@@ -20,20 +20,27 @@ $color-background: #9e9e9e;
 
     .progress-bar {
         display: flex;
-        height: 12px;
+        height: 100%;
         position: relative;
-        border: 1px solid $color-border;
         background-color: $color-white;
     }
 
     .prog-fill {
+        background-size:6px !important;
         display: inline-block;
         padding: 0;
-        height: 100%;
+        height: 12px;
         width: 0;
         background-color: $color-background;
     }
 
+    .prog-fill-empty {
+        border-style: solid;
+        border-color: $color-border;
+        border-width:1px 1px 1px 0;
+        flex-grow:100;
+
+    }
     .tiny-arrow {
         opacity: 0.75;
         padding-right: 2px;

src/mcode-pilot/visualizations/TableLegend/TableLegend.jsx

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './TableLegend.css';
+
+export default class TableLegend extends Component {
+
+    render() {
+        let message;
+        if(this.props.includedRow instanceof Array) {
+            // the row is empty
+            message = "survived with treatment"
+        }else{
+            const name = this.props.includedRow.name;
+            const noTreatment = this.props.treatmentNames.noTreatment===name;
+            const hasAnd = name.indexOf('&') > -1
+            message = "survived with " + (noTreatment?'no treatment':name) + (hasAnd||noTreatment?"":" alone")
+        }
+        const mainStyle = {"width": `45px`};
+        const treatmentStyle = {"width":"10px", "backgroundColor":"#91bd7b"};
+        const redTreatmentStyle = {"width": "14px", "background": `repeating-linear-gradient(
+            45deg,
+            transparent,
+            transparent 2px,
+            #EC9696 2px,
+            #EC9696 4px
+          ),
+          linear-gradient(
+            to bottom,
+            #FFFFFF,
+            #FFFFFF
+          )`};
+        const cancerStyle = {"width":"20px"};
+        return (
+            <div className="table-legend">
+            <div className="wrapper">
+                <div className="legend-entry">
+                        <div className="prog-fill-container">
+                            <div className="prog-fill" style={mainStyle}/>
+                        </div>
+                        <span className="legend-text">{message}</span>
+                    </div>
+
+                    <div className="legend-entry">
+                        <div className="prog-fill-container">
+                            <div className="prog-fill" style={treatmentStyle}/>
+                        </div>
+                        <span className="legend-text">increase in survival due to treatment</span>
+                    </div>
+
+                    <div className="legend-entry">
+                        <div className="prog-fill-container">
+                            <div className="prog-fill" style={redTreatmentStyle}/>
+                        </div>
+                        <span className="legend-text">decrease in survival due to treatment</span>
+                    </div>
+
+                    <div className="legend-entry">
+                        <div className="prog-fill-container">
+                            <div className="progress-bar" style={cancerStyle}/>
+                        </div>
+                        <span className="legend-text">cancer related deaths</span>
+                    </div>
+                
+            </div>
+
+            </div>
+        );
+    }
+}
+
+TableLegend.propTypes = {
+    includedRow: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.array
+    ]),
+    treatmentNames: PropTypes.object
+};

src/mcode-pilot/visualizations/TableLegend/TableLegend.scss

@@ -0,0 +1,45 @@
+$color-white: #fff;
+$color-border: #d1d1d1;
+$color-background: #9e9e9e;
+
+.table-legend {
+    text-align: center;
+    .wrapper {
+        display:inline-block;
+    }
+    .prog-fill {
+        background-size:6px !important;
+        display: inline-block;
+        padding: 0;
+        height: 10px;
+        width: 40px;
+        background-color: $color-background;
+    }
+
+    .legend-entry {
+        display:block;
+        text-align: left;
+    }
+
+    .prog-fill-container {
+
+        display:inline-block;
+        width: 50px;
+    }
+
+    .legend-text {
+
+        font-size: 10px;
+        padding-left:10px;
+        line-height:10px;
+
+    }
+
+    .progress-bar {
+        display: flex;
+        height: 8px;
+        // position: relative;
+        border: 1px solid $color-border;
+        background-color: $color-white;
+    }
+}