small style changes for #209 - horizontal bar between rows & center c…

…olumns

lab/webapp/src/components/Dataset/components/BoxPlot/index.jsx

@@ -23,8 +23,8 @@ class BoxPlot extends Component {
   // from - https://www.d3-graph-gallery.com/graph/boxplot_basic.html
   createBoxPlot(){
     const { dataPreview, valByRowObj, tempKey } = this.props;
-    let margin = { top: 5, right: 180, bottom: 25, left: 150 },
-        width = 650 - margin.left - margin.right,
+    let margin = { top: 5, right: 60, bottom: 25, left: 30 },
+        width = 380 - margin.left - margin.right,
         height = 255 - margin.top - margin.bottom;
     let dataKeys;
     if(dataPreview) {
@@ -46,16 +46,30 @@ class BoxPlot extends Component {
             "translate(" + margin.left + "," + margin.top + ")");
     // get stats
     let data_sorted = valByRowObj[tempKey].sort(d3.ascending);
+    //let data_sorted = valByRowObj[tempKey].sort();
+
     let q1 = d3.quantile(data_sorted, .25);
     let median = d3.quantile(data_sorted, .5);
     let q3 = d3.quantile(data_sorted, .75);
     let interQuantileRange = q3 - q1;
     let min = q1 - 1.5 * interQuantileRange;
-    let max = q1 + 1.5 * interQuantileRange;
-
+    let max = q3 + 1.5 * interQuantileRange;
+    // min = -1;
+    // median = 0;
+    // max = 1;
     let minData = Math.min(...data_sorted);
     let maxData = Math.max(...data_sorted);
 
+    // print stats
+    window.console.debug('temp key: ', tempKey);
+    window.console.debug('sorted data: ', data_sorted);
+    window.console.debug('q1: ', q1);
+    window.console.debug('q3: ', q3);
+    window.console.debug('interQuantileRange: ', interQuantileRange);
+    window.console.debug('median: ', median);
+    window.console.debug('min: ', min);
+    window.console.debug('max: ', max);
+
     // color scale for jitter points
     let myColor = d3.scaleSequential()
       .interpolator(d3.interpolateInferno)
@@ -98,8 +112,10 @@ class BoxPlot extends Component {
       .attr("height",  width)
       .attr("width", (x(q3)-x(q1)) )
       .attr("stroke", "white")
-      .style("fill", "rgb(85, 214, 190)")
-
+      .style("fill", "#1678c2")
+      // orange - #f26202
+      // sea foam green - rgb(85, 214, 190)
+      // #1678c2
     // show median, min and max horizontal lines
     svg.selectAll("toto")
     .data([min, median, max])

lab/webapp/src/components/Dataset/components/DatasetMenu/index.jsx

@@ -187,7 +187,7 @@ class DatasetMenu extends Component {
       let dataStuff = dataPreview.data;
       // grab all dataset columns names from first entry
       dataKeys = Object.keys(dataStuff[0]);
-
+    let dataType;
     let testPain = [
       {
         menuItem: 'Summary',
@@ -200,14 +200,44 @@ class DatasetMenu extends Component {
               <br/>
               <span>{`# of Classes: ${dataset.metafeatures.n_classes}`}</span>
             </Segment>
-            <Grid columns='two' divided padded>
+            <Grid columns={3} divided celled='internally'>
+              <Grid.Row columns={3} centered>
+                <Grid.Column width={2}>
+                  <Header
+                    as="h4"
+                    inverted
+                    color="grey"
+                    content="Name"
+                  />
+                </Grid.Column>
+                <Grid.Column width={2}>
+                  <Header
+                    as="h4"
+                    inverted
+                    color="grey"
+                    content="Type"
+                  />
+                </Grid.Column>
+                <Grid.Column width={5}>
+                  <Header
+                    as="h4"
+                    inverted
+                    color="grey"
+                    content="Chart"
+                  />
+                </Grid.Column>
+              </Grid.Row>
               {
+
                 // display boxplots
                 dataKeys && dataKeys.map(key => {
                   // loop through dataset column name/key for charts later on
                   // need to be careful with this key - replace spaces with '_'
                   let tempKey = key.replace(/ /g, "_");
-
+                  cat_feats.indexOf(key) > -1 || ordKeys.indexOf(key) > -1
+                    ? dataType = 'nominal' : dataType = 'numeric';
+                  key === dataset.files[0].dependent_col
+                    ? dataType = 'nominal' : null;
                   let tempChart = (
                     <BoxPlot
                       key={tempKey}
@@ -241,6 +271,7 @@ class DatasetMenu extends Component {
                     </div>
                   ) : null;
                   // create bar chart for dependent_col/target class
+                  // TODO: make this appear first
                   key === dataset.files[0].dependent_col
                     ? tempChart = (
                       <BarChart
@@ -253,16 +284,21 @@ class DatasetMenu extends Component {
 
                   let gridList = [];
                   gridList.push(
-                    <Grid.Row>
+                    <Grid.Row centered>
                       <Grid.Column width={2}>
                         <div style={{color: 'white'}}>
                           {tempKey}
                         </div>
                       </Grid.Column>
-                      <Grid.Column width={7}>
-                        <Segment>
+                      <Grid.Column width={2}>
+                        <div style={{color: 'white'}}>
+                          {dataType}
+                        </div>
+                      </Grid.Column>
+                      <Grid.Column width={5}>
+
                           {tempChart}
-                        </Segment>
+
                       </Grid.Column>
                     </Grid.Row>
                   );
@@ -391,7 +427,7 @@ class DatasetMenu extends Component {
     return (
       <div>
         <Tab
-          menu={{ attached: 'top' }}
+          menu={{ attached: 'top', inverted: 'true' }}
           panes={stuff}
           renderActiveOnly={true}
         />