Skip to content

Commit c477580

Browse files
HUSSAR-mtrelatishko0dkamburovMariela Tihovaskrustev
authored
map hotfixes (#662)
* added grid and hgrid remote paging samples * docs(grid): initial implementation excel style editing * docs(grid): initial excel style editing sample * docs(grid): updated sample * docs(grid): added numpads to case * docs(grid): fixed column targeting on enter nav * chore(grid): fixed type missed warning * Add default separator the clipboard operations samples. * Reorder avatar size sample to match the wc one. * Fixed console errors for Hgrid remote paging * Adding Divider Samples * Resolving key errors in browser console * Correcting the duplicate key * chore(divider-samples): format tsx files * Adding changes from build igniteui-xplat-examples-output+PRs_2024.9.13.1 * Fix missing gridRef current argument use. * docs(grid): removed old sample * docs(grid): removed perPage from constructor * Renaming the sample so it doesn't cause build error (#652) Co-authored-by: Ivan Kitanov <IKitanov@infragistics.com> * fix(grid): updated excel style to navigate on single enter click if in edit mode * fix(grid): removed extra sample to avoid confusion * chore(*): update ig to 18.7.2-beta.0 * chore(*): update ig to 18.7.3 * Adding changes from build igniteui-xplat-examples-output+PRs_2024.10.21.1 (#656) Co-authored-by: tfsbuild <tfsbuild@infragistics.com> * add map selection (#660) * add "react-icons * fix styling in Map Selection * fix labels --------- Co-authored-by: ttonev <ttonev@infragistics.com> Co-authored-by: Deyan Kamburov <dkamburov@users.noreply.github.com> Co-authored-by: Mariela Tihova <mtihova@infragistics.com> Co-authored-by: skrustev <striker18@mail.bg> Co-authored-by: Ivan Kitanov <IKitanov@infragistics.com> Co-authored-by: ddaribo <bozhidara.pp@gmail.com> Co-authored-by: tfsbuild <tfsbuild@infragistics.com> Co-authored-by: Vasya Kacheshmarova <vasq1989@gmail.com> Co-authored-by: Ivan Kitanov <69432826+IvanKitanov17@users.noreply.github.com> Co-authored-by: Deyan Kamburov <dkamburov@infragistics.com> Co-authored-by: IMinchev64 <iminchev@infragistics.com> Co-authored-by: azure-pipelines[bot] <36771401+azure-pipelines[bot]@users.noreply.github.com>
1 parent 15867b0 commit c477580

1 file changed

Lines changed: 28 additions & 30 deletions

File tree

  • samples/maps/geo-map/shape-selection/src

‎samples/maps/geo-map/shape-selection/src/index.tsx‎

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)