@@ -111,41 +111,40 @@ export default class MapShapeSelection extends React.Component<any, any> {
111111 // }
112112 }
113113
114- let statePickers = [ ] ;
115- this . sortByName ( this . usaStates ) ;
114+ let statePickers : any [ ] = [ ] ;
115+ // this.sortByName(this.usaStates);
116+ // this.sortByName(this.usaSymbols);
116117 for ( let i = 0 ; i < this . usaStates . length ; i ++ ) {
117118 let item = this . usaStates [ i ] ;
118119 let info = item . Info ; // + " " + (item.KeyRace > 0 ? " *" : "");
119-
120+ let key = item . KeyRace + "-" + item . Code ;
120121 let electors = "Electors: " + item . Electors ;
121122 let pop = "Population: " + ( item . Population / 1000000 ) . toFixed ( 1 ) + "M" ;
122123 let bgDEM = item . Party === "D" ? this . partyColorDEM : this . partyColorUKN ;
123124 let bgREP = item . Party === "R" ? this . partyColorREP : this . partyColorUKN ;
124125 let bgState = item . Party === "D" ? this . partyColorDEM : this . partyColorREP ;
125126 let stateColor = item . KeyRace > 0 ? this . partyColorUKN : item . Lean === "D" ? this . partyColorDEM : this . partyColorREP ;
126127 let stateLabel = item . KeyRace > 0 ? "KEY RACE" : item . Lean === "D" ? "DEM. LEANING" : "REP. LEANING" ;
127- let stateTitle = item . KeyRace > 0 ? "" : item . Lean === "D" ? "DEM. LEANING" : "REP. LEANING" ;
128-
128+
129129 let imgDEM = this . getPartyImage ( "D" , item . Party === "D" ) ;
130130 let imgREP = this . getPartyImage ( "R" , item . Party === "R" ) ;
131- statePickers . push (
132- // style={{background: bgState}}
133- < div className = "horizontal statePickerItem" key = { item . Code } onClick = { ( e ) => this . onStateClick ( item ) } >
131+ statePickers . push (
132+ < div className = "horizontal statePickerItem" key = { key } onClick = { ( e ) => this . onStateClick ( item ) } >
134133 < div className = "vertical statePickerInfo" >
135134 < div style = { { fontWeight : 'bold' } } > { info } </ div >
136135 < div > { pop } </ div >
137136 < div > { electors } </ div >
138137 </ div >
139138 < div className = "horizontal" >
140- { /* <div className="statePickerPartyCircle" style={{background: bgDEM}} onClick={(e) => this.onStateClick(item)}><img className="statePickerPartyImage" src={imgDEM}/></div> */ }
141- { /* <div className="statePickerPartyCircle" style={{background: bgREP}} onClick={(e) => this.onStateClick(item)}><img className="statePickerPartyImage" src={imgREP}/></div> */ }
142139 < div className = "statePickerPartyCircle" style = { { background : bgDEM } } title = 'Vote for Democrat' > < img className = "statePickerPartyImage" src = { imgDEM } /> </ div >
143140 < div className = "statePickerPartyCircle" style = { { background : bgREP } } title = 'Vote for Republican' > < img className = "statePickerPartyImage" src = { imgREP } /> </ div >
144141 </ div >
145142
146143 < div className = "stateLabel" style = { { background : stateColor } } > { stateLabel } </ div >
147144 </ div > ) ;
148145 }
146+ this . sortByKey ( statePickers ) ;
147+
149148 let widthMenu = "16rem" ;
150149 let widthContent = "calc(100% - " + widthMenu + ")" ;
151150 return (
@@ -359,9 +358,12 @@ export default class MapShapeSelection extends React.Component<any, any> {
359358 this . geoMap . zoomToGeographic ( geoRegion ) ;
360359 }
361360
361+ public sortByKey ( states : any [ ] ) : void {
362+ states . sort ( ( a , b ) => a . key < b . key ? 1 : - 1 ) ;
363+ }
364+
362365 public sortByName ( states : any [ ] ) : void {
363366 states . sort ( ( a , b ) => b . KeyRace - a . KeyRace || ( a . Code > b . Code ? 1 : - 1 ) ) ;
364- // states.sort((a, b) => a.Code > b.Code ? (a.Code > b.Code ? 1 : -1));
365367 }
366368
367369 public onDataLoaded ( sds : IgrShapeDataSource , e : any ) {
@@ -489,21 +491,11 @@ export default class MapShapeSelection extends React.Component<any, any> {
489491 // this.geoMap.windowRect = {top: 0.33089979638559797, left: 0.23950540516618768, width: 0.14048512930673307, height: 0.14048512930673307};
490492
491493
492- // xMax -= 10;
493- // yMax -= 20;
494- // xMin -= 30;
495- // yMin -= 1;
496- // let geoRegion = { left: xMin, top: yMin, width: 50, height: yMax - yMin};
497494 let geoRegion = { left : - 120 , top : 32 , width : 40 , height : 12 } ;
498- console . log ( "geoRegion" ) ;
499- console . log ( geoRegion ) ;
495+ // console.log("geoRegion");
496+ // console.log(geoRegion);
500497 this . geoMap . zoomToGeographic ( geoRegion ) ;
501-
502- // this.geoMap.windowRect = {height: 0.100485,
503- // left: 0.052,
504- // top: 0.32725945997,
505- // width: 0.200485 };
506-
498+
507499
508500 this . gauge . transitionDuration = 500 ;
509501
@@ -620,7 +612,7 @@ export default class MapShapeSelection extends React.Component<any, any> {
620612 public createMarker ( ) : any
621613 {
622614 let smallStates = [ "NH" , "VT" , "MA" , "RI" , "CT" , "NJ" , "DE" , "MD" , "DC" , ] ;
623- // let style = { outline: "#9FB328", fill: "rgba(71, 70, 70, 0.153)", text: "black" };
615+
624616 const size = 12 ;
625617
626618 return {
@@ -663,7 +655,7 @@ export default class MapShapeSelection extends React.Component<any, any> {
663655 ctx . closePath ( ) ;
664656 }
665657
666- let kr = item . KeyRace > 0 ? "* " : "" ;
658+ let kr = "" ; // item.KeyRace > 0 ? "* " : "";
667659 let txt = kr + code + " (" + item . Electors + ")" ;
668660
669661 ctx . font = '7pt Verdana' ;
@@ -685,7 +677,9 @@ export default class MapShapeSelection extends React.Component<any, any> {
685677 const winner = this . getPartyCandidateName ( item . Party ) ;
686678 const party = this . getPartyName ( item . Party ) ;
687679 const color = this . getPartyColor ( item . Party ) ;
688-
680+ const statusColor = item . KeyRace > 0 ? this . partyColorUKN : item . Lean === "D" ? this . partyColorDEM : this . partyColorREP ;
681+ const statusText = item . KeyRace > 0 ? "Toss-up" : item . Lean === "D" ? "Democrat" : "Republican" ;
682+
689683 return < div className = "tooltipBox" style = { { color : color } } >
690684 { /* <div className="tooltipTitle" > </div> */ }
691685 < div className = "tooltipBox" >
@@ -701,13 +695,17 @@ export default class MapShapeSelection extends React.Component<any, any> {
701695 < div className = "tooltipLbl" > Electoral Votes:</ div >
702696 < div className = "tooltipVal" > { item . Electors } </ div >
703697 </ div >
704- < div className = "tooltipRow" >
698+ < div className = "tooltipRow" style = { { color : statusColor } } >
699+ < div className = "tooltipLbl" > Likely Outcome:</ div >
700+ < div className = "tooltipVal" > { statusText } </ div >
701+ </ div >
702+ < div className = "tooltipRow" style = { { color : color } } >
705703 < div className = "tooltipLbl" > Winner:</ div >
706704 < div className = "tooltipVal" > { winner } </ div >
707705 </ div >
708- < div className = "tooltipRow" >
706+ < div className = "tooltipRow" style = { { color : color } } >
709707 < div className = "tooltipLbl" > Party:</ div >
710- < div className = "tooltipVal" > { party } </ div >
708+ < div className = "tooltipVal" > { party } </ div >
711709 </ div >
712710 { /* <div className="tooltipRow">
713711 <div className="tooltipLbl">Attendance:</div>
0 commit comments