just fixing little bugs

2019-10-15 22:08:23 -06:00
parent 4024107844
commit 778fe73e4a
3 changed files with 425 additions and 107 deletions
--- a/hw5/js/table.js
+++ b/hw5/js/table.js
@@ -101,16 +101,18 @@ class Table {
  updateTable() {
    // ******* TODO: PART III *******
    // Create table rows
-      console.log(this.tableElements);
-      let row = d3.select('#tbody')
+
+      let tableRow = d3.select('#matchTable').select('tbody')
          .selectAll('tr')
          .data(this.tableElements);
-      row.exit()
+      tableRow.exit()
          .remove();
-      row.enter()
+      tableRow = tableRow.enter()
          .append('tr')
-          .on('click', (d,i) =>{
-              this.tree.updateTree(this.tableElements[i]);
+          .on('click', (d,i) => {
+
+              this.updateList(i);
+              this.updateTable();
          })
          .on('mouseover', (d,i) => {
              this.tree.updateTree(this.tableElements[i]);
@@ -118,62 +120,122 @@ class Table {
          .on('mouseout', () => {
              this.tree.clearTree();
          })
-          .merge(row);
-    // Append th elements for the Team Names
-      let tableHeader = row.selectAll('th')
-          .data((d)=>{
-                  return [{'type':d.value['type'],
-                  'view': 'text',
-                  'data': d.key()}]
-          });
-      tableHeader.exit()
-          .remove();
+          .merge(tableRow);
+
+//Append th elements for the Team Names
+      let tableHeader = tableRow.selectAll("th")
+          .data(d =>  { return[{'type': d.value['type'], 'view': 'text', 'value': d.key}] });
+      tableHeader.exit().remove();
      tableHeader = tableHeader.enter()
          .append('th')
          .merge(tableHeader);


+//Append td elements for the remaining columns.
+      let tableData = tableRow.selectAll("td")
+          .data(d =>  {

-    // Append td elements for the remaining columns.
-      let tcell = tableHeader.selectAll('#td')
-          .data(d => {
-              return[{'type': d.value['type'], 'view': 'goals', 'value': {'goalsMade':d.value['Goals Made'], 'goalsConceded':d.value['Goals Conceded']}},
+
+              return[{'type': d.value['type'], 'view': 'goals', 'value': {'goalsMade':d.value['Goals Made'], 'goalsConceded' : d.value['Goals Conceded']}},
                  {'type': d.value['type'], 'view': 'text', 'value': d.value['Result']},
                  {'type': d.value['type'], 'view': 'bar', 'value': d.value['Wins']},
                  {'type': d.value['type'], 'view': 'bar', 'value': d.value['Losses']},
                  {'type': d.value['type'], 'view': 'bar', 'value': d.value['TotalGames']}
              ] });
-      tcell.exit().remove();
-      tcell = tcell.enter().append('td').merge(tcell);
-    // Data for each cell is of the type: {'type':<'game' or 'aggregate'>,
-    // 'value':<[array of 1 or two elements]>}
-      tableHeader.text(d =>{
-          return d.type === 'aggregate' ? d.value : "x"+d.value
-          })
-          .style('color', d => {
-              return d.type === 'aggregate' ? 'black' : 'grey'
-          });
-    //Add scores as title property to appear on hover
+      tableData.exit()
+          .remove();
+      tableData = tableData.enter()
+          .append('td')
+          .merge(tableData);

-    //Populate cells (do one type of cell at a time)
-      let values = tcell.each(d=> { console.log(d.view); return [d.view === 'goals', d.view === 'bar', d.view ==='text']});
-      let goals = tcell.filter(d =>{return d.view === 'goals'});
-      let bar = values[1];
-      let text = tcell.filter(d =>{return d.view === 'text'});
-      console.log(this.cell);
+      tableHeader.text(d =>  {
+          return d.type==='aggregate' ? d.value : 'x'+d.value;})
+          .style('color', d =>  { return d.type==='aggregate' ? 'black' : 'gray';});

-      text.select('svg').remove();
-      let textBody = text.append('svg')
+//Populate cells (do one type of cell at a time )
+
+      let textColumn = tableData.filter(d =>  { return d.view === 'text'});
+
+      textColumn.select('svg').remove();
+      let textBody = textColumn.append('svg')
          .attr("width", this.cell.width*1.6)
          .attr("height", this.cell.height);
      textBody.append("text")
          .attr("x", 0)
          .attr("y", this.cell.height/2)
-          .text(d => { return d.value['label']});
+          .text(d =>  {
+              return d.value['label']
+          });
+
+      let goalsColumn = tableData.filter(d =>  { return d.view === 'goals'});
+      goalsColumn.select('svg').remove();
+      let goalsBody = goalsColumn.append('svg')
+          .attr("width", this.cell.width * 2 + this.cell.buffer)
+          .attr("height", this.cell.height)
+      goalsBody.append('rect')
+          .classed('goalBar',true)
+          .attr('fill', d =>  { return d.value['goalsMade'] > d.value['goalsConceded'] ? 'blue' : 'red';})
+          .attr('width', d =>  {
+              if(d.type==='aggregate') {
+                  return Math.abs(this.goalScale(d.value['goalsMade'] - d.value['goalsConceded']));
+              }
+              else {
+                  return Math.abs(this.goalScale(d.value['goalsMade'] - d.value['goalsConceded']))-10;
+              }
+          })
+          .attr('height', d =>  { return d.type==='aggregate' ? 10 : 5;})
+          .attr('x', d =>  {
+              return d.type === 'aggregate'
+                  ? d.value['goalsMade'] > d.value['goalsConceded']
+                      ? this.goalScale(d.value['goalsConceded'])+6
+                      :this.goalScale(d.value['goalsMade'])+6
+                  : d.value['goalsMade'] > d.value['goalsConceded']
+                      ? this.goalScale(d.value['goalsConceded'])+12
+                      : this.goalScale(d.value['goalsMade'])+12;
+
+          })
+          .attr('y', d =>  { return d.type === 'aggregate' ? 5 : 7.5
+          });
+      goalsBody.append('circle')
+          .classed("goalCircle", true)
+          .attr('fill', d =>  { return d.type === 'aggregate' ? 'blue' : 'none';})
+          .attr('stroke', d =>  {
+              return d.type === 'aggregate' ? 'none' : d.value['goalsConceded']===d.value['goalsMade'] ? 'gray' : 'blue';})
+          .attr('cy', 10)
+          .attr('cx', d =>  { return this.goalScale(d.value['goalsMade'])+6})
+          .attr('r',5);
+      goalsBody.append('circle')
+          .classed("goalCircle", true)
+          .attr('fill', d =>  {return d.type === 'aggregate' ? 'red' : 'none';})
+          .attr('stroke', d =>  {
+              return d.type === 'aggregate' ? 'none' : d.value['goalsConceded'] === d.value['goalsMade'] ? "gray" : "red";
+          })
+          .attr('cy', 10)
+          .attr('cx', d =>  { return this.goalScale(d.value['goalsConceded'])+6})
+          .attr('r',5);
+
+
+
+      let barColumns = tableData.filter(d =>  {return d.view === 'bar'});
+      barColumns.style("padding-left", "0px")
+      barColumns.select('svg').remove();
+      let barBody = barColumns.append('svg').attr("width", this.cell.width).attr("height", this.cell.height);
+      barBody.append('rect')
+          .attr('width', d =>  { return this.gameScale(d.value)})
+          .attr('height', this.bar.height)
+          //
+          .attr('x', 0)
+
+          .attr('fill', d => {
+              return this.aggregateColorScale(d.value);});
+
+      barBody.append('text')
+          .text(d =>  {return d.value})
+          .classed("label", true)
+          .attr("x", d =>  { return this.gameScale(d.value)-10})
+          .attr("y",15);

-    //Create diagrams in the goals column

-    //Set the color of all games that tied to light gray

  };

@@ -183,7 +245,23 @@ class Table {
   */
  updateList(i) {
    // ******* TODO: PART IV *******
+      let teamList = this.tableElements[i].value.games;
+      if(i != this.tableElements.length-1 ) {
+          if(this.tableElements[i+1].value['type']=='aggregate') {
+              for (let j=0; j<teamList.length; j++) {
+                  this.tableElements.splice(j+i+1, 0, teamList[j])
+              }
+          }
+          else {
+              this.tableElements.splice(i+1, teamList.length)

+          }
+      }
+      else if(this.tableElements[i].value['type']=='aggregate'){
+          for (let j=0; j<teamList.length; j++) {
+              this.tableElements.splice(j+i+1, 0, teamList[j])
+          }
+      }
    // Only update list for aggregate clicks, not game clicks
  }