Descripción general del control deslizante React Zoom
El control React ZoomSlider proporciona funcionalidad de zoom a controles habilitados para rango. ZoomSlider presenta una barra de desplazamiento horizontal, una miniatura de todo el rango y una ventana de rango de zoom de tamaño variable. ZoomSlider no puede funcionar como un control independiente y actúa como una mejora para controles basados en rangos como DataChart o CategoryChart.
React Zoom Slider Example
El siguiente ejemplo demuestra cómo usar IgrZoomSlider
para navegar por el contenido en IgrDataChart
.
export class SampleScatterStats {
public static countries: Country[];
public static getCountries(count?: number): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
if (count === undefined) {
count = 1000;
}
const items: Country[] = [];
for (let i = 0; i < this.countries.length; i++) {
const country = this.countries[i];
if (i < count) {
items.push(country);
}
}
// items = items.sort(this.sortByPopDescending);
return items;
}
public static getCountriesWithHighIncome(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.GdpPerCapita >= 10000) {
items.push(country);
}
}
return items;
}
public static getCountriesWithLowIncome(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.GdpPerCapita < 10000) {
items.push(country);
}
}
return items;
}
public static getCountriesWithLargePop(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.Population >= 10000000) {
items.push(country);
}
}
return items;
}
public static getCountriesWithSmallPop(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.Population < 10000000) {
items.push(country);
}
}
return items;
}
public static sortByPopDescending(a: Country, b: Country) {
if (a.Population > b.Population) { return 1; }
if (a.Population < b.Population) { return -1; }
return 0;
}
public static sortByPopAscending(a: Country, b: Country) {
if (a.Population > b.Population) {return -1; }
if (a.Population < b.Population) {return 1; }
return 0;
}
public static sortByGdpAscending(a: Country, b: Country) {
if (a.GdpPerCapita > b.GdpPerCapita) {return -1;}
if (a.GdpPerCapita < b.GdpPerCapita) {return 1;}
return 0;
}
public static sortByGdpDescending(a: Country, b: Country) {
if (a.GdpPerCapita > b.GdpPerCapita) {return 1;}
if (a.GdpPerCapita < b.GdpPerCapita) {return -1;}
return 0;
}
public static sortByDepDescending(a: Country, b: Country) {
if (a.DptPerCapita > b.DptPerCapita) {return 1;}
if (a.DptPerCapita < b.DptPerCapita) {return -1;}
return 0;
}
public static sortByDptAscending(a: Country, b: Country) {
if (a.DptPerCapita > b.DptPerCapita) {return -1;}
if (a.DptPerCapita < b.DptPerCapita) {return 1;}
return 0;
}
public static initData(): Country[] {
let data: Country[] = [];
// Code, Population, GDP per Capita, Debt per Capita, Mobile Phones (per 100 people), Name, Region
data.push(new Country("AFG",29824536,688,92,46,"Afghanistan","Asia"));
data.push(new Country("ALB",2801681,4406,882,86,"Albania","Europe"));
data.push(new Country("DZA",38481705,5310,115,88,"Algeria","Africa"));
data.push(new Country("ADO",78360,40365,15212,84,"Andorra","Europe"));
data.push(new Country("AGO",20820525,5539,944,48,"Angola","Africa"));
data.push(new Country("ATG",89069,13406,4388,193,"Antigua and Barbuda","North America"));
data.push(new Country("ARG",41086927,14680,7759,141,"Argentina","South America"));
data.push(new Country("ARM",2969081,3354,1584,130,"Armenia","Asia"));
data.push(new Country("ABW",102384,0,4935,130,"Aruba","South America"));
data.push(new Country("AUS",22723900,67436,52596,100,"Australia","Oceania"));
data.push(new Country("AUT",8429991,46792,90128,146,"Austria","Europe"));
data.push(new Country("AZE",9295784,7394,8513,100,"Azerbaijan","Asia"));
data.push(new Country("BHS",371960,21908,1067,119,"Bahamas","North America"));
data.push(new Country("BHR",1317827,23040,13261,125,"Bahrain","Asia"));
data.push(new Country("BGD",154695368,750,149,45,"Bangladesh","Asia"));
data.push(new Country("BRB",283221,14917,2456,125,"Barbados","North America"));
data.push(new Country("BLR",9464000,6722,2629,109,"Belarus","Europe"));
data.push(new Country("BEL",11128246,43396,113603,111,"Belgium","Europe"));
data.push(new Country("BLZ",324060,4852,3079,63,"Belize","North America"));
data.push(new Country("BEN",10050702,751,308,74,"Benin","Asia"));
data.push(new Country("BMU",64798,84471,2575,136,"Bermuda","North America"));
data.push(new Country("BTN",741822,2509,1193,55,"Bhutan","Asia"));
data.push(new Country("BOL",10496285,2576,275,71,"Bolivia","South America"));
data.push(new Country("BIH",3833916,4396,2052,81,"Bosnia and Herzegovina","Europe"));
data.push(new Country("BWA",2003910,7255,1208,120,"Botswana","Africa"));
data.push(new Country("BRA",198656019,11320,1608,101,"Brazil","South America"));
data.push(new Country("BRN",412238,41127,0,109,"Brunei","Oceania"));
data.push(new Country("BGR",7305888,7022,6261,138,"Bulgaria","Europe"));
data.push(new Country("BFA",16460141,652,136,37,"Burkina Faso","Africa"));
data.push(new Country("BDI",9849569,251,167,18,"Burundi","Africa"));
data.push(new Country("CPV",494401,3554,714,76,"Cabo Verde","Africa"));
data.push(new Country("KHM",14864646,945,304,57,"Cambodia","Asia"));
data.push(new Country("CMR",21699631,1220,164,42,"Cameroon","Africa"));
data.push(new Country("CAN",34754312,52409,29625,76,"Canada","North America"));
data.push(new Country("CYM",57570,0,2078,181,"Cayman Islands","North America"));
data.push(new Country("CAF",4525209,479,270,23,"Central African Republic","Africa"));
data.push(new Country("TCD",12448175,1035,160,25,"Chad","Africa"));
data.push(new Country("CHL",17464814,15245,5867,116,"Chile","South America"));
data.push(new Country("CHN",1350695000,6093,2221,63,"China","Asia"));
data.push(new Country("COL",47704427,7763,1269,96,"Colombia","South America"));
data.push(new Country("COM",717503,831,430,24,"Comoros","Africa"));
data.push(new Country("ZAR",65705093,418,197,19,"Congo Dem. Rep.","Africa"));
data.push(new Country("COG",4337051,3154,1722,90,"Congo Rep.","Africa"));
data.push(new Country("CRI",4805295,9443,1874,67,"Costa Rica","North America"));
data.push(new Country("CIV",19839750,1244,527,82,"Cote d'Ivoire","Africa"));
data.push(new Country("HRV",4267558,13159,13519,114,"Croatia","Europe"));
data.push(new Country("CUB",11270957,0,1780,9,"Cuba","North America"));
data.push(new Country("CUW",152056,0,0,138,"Curacao","North America"));
data.push(new Country("CYP",1128994,26352,37812,94,"Cyprus","Europe"));
data.push(new Country("CZE",10510785,18690,8260,123,"Czech Republic","Europe"));
data.push(new Country("DNK",5591572,56364,101084,116,"Denmark","Europe"));
data.push(new Country("DJI",859652,1575,573,20,"Djibouti","Africa"));
data.push(new Country("DMA",71684,6913,3000,148,"Dominica","North America"));
data.push(new Country("DOM",10276621,5733,1162,89,"Dominican Republic","North America"));
data.push(new Country("ECU",15492264,5425,995,99,"Ecuador","South America"));
data.push(new Country("EGY",80721874,3256,391,91,"Egypt","Africa"));
data.push(new Country("SLV",6297394,3782,1953,124,"El Salvador","North America"));
data.push(new Country("GNQ",736296,22391,634,57,"Equatorial Guinea","Africa"));
data.push(new Country("ERI",6130922,504,195,3,"Eritrea","Africa"));
data.push(new Country("EST",1325016,16887,16944,127,"Estonia","Europe"));
data.push(new Country("ETH",91728849,467,51,8,"Ethiopia","Africa"));
data.push(new Country("EUU",505640311,32917,0,118,"Euroean Union","Europe"));
data.push(new Country("FRO",49506,0,0,120,"Faeroe Islands","Europe"));
data.push(new Country("FJI",874742,4613,150,81,"Fiji","Oceania"));
data.push(new Country("FIN",5413971,45649,68960,156,"Finland","Europe"));
data.push(new Country("FRA",65676758,39759,74619,91,"France","Europe"));
data.push(new Country("GAB",1632572,10930,1587,103,"Gabon","Africa"));
data.push(new Country("GMB",1791225,510,306,88,"Gambia","Africa"));
data.push(new Country("GEO",4490700,3529,1940,91,"Georgia","Asia"));
data.push(new Country("DEU",80425823,42598,57755,106,"Germany","Europe"));
data.push(new Country("GHA",25366462,1646,274,72,"Ghana","Africa"));
data.push(new Country("GRC",11092771,22395,47636,111,"Greece","Europe"));
data.push(new Country("GRL",56810,0,1035,101,"Greenland","Europe"));
data.push(new Country("GRD",105483,7598,3402,116,"Grenada","North America"));
data.push(new Country("GTM",15082831,3341,1216,126,"Guatemala","North America"));
data.push(new Country("GIN",11451273,493,305,37,"Guinea","Asia"));
data.push(new Country("GNB",1663558,494,722,43,"Guinea-Bissau","Asia"));
data.push(new Country("GUY",795369,3585,1049,71,"Guyana","South America"));
data.push(new Country("HTI",10173775,776,36,40,"Haiti","North America"));
data.push(new Country("HND",7935846,2339,465,125,"Honduras","North America"));
data.push(new Country("HKG",7154600,36708,105420,196,"Hong Kong","Asia"));
data.push(new Country("HUN",9920362,12560,14821,120,"Hungary","Europe"));
data.push(new Country("ISL",320716,42362,362942,107,"Iceland","Europe"));
data.push(new Country("IND",1236686732,1503,240,62,"India","Asia"));
data.push(new Country("IDN",246864191,3551,837,88,"Indonesia","Asia"));
data.push(new Country("IRN",76424443,6578,170,73,"Iran","Asia"));
data.push(new Country("IRQ",32578209,6625,1641,75,"Iraq","Asia"));
data.push(new Country("IRL",4586897,45922,512083,105,"Ireland","Europe"));
data.push(new Country("ISR",7910500,32567,12070,123,"Israel","Asia"));
data.push(new Country("ITA",59539717,33814,36841,155,"Italy","Europe"));
data.push(new Country("JAM",2707805,5464,4660,116,"Jamaica","North America"));
data.push(new Country("JPN",127561489,46548,24000,97,"Japan","Asia"));
data.push(new Country("JOR",6318000,4909,903,103,"Jordan","Asia"));
data.push(new Country("KAZ",16791425,12120,6060,122,"Kazakhstan","Asia"));
data.push(new Country("KEN",43178141,933,200,61,"Kenya","Africa"));
data.push(new Country("KIR",100786,1736,120,11,"Kiribati","Oceania"));
data.push(new Country("PRK",24763188,0,544,2,"Korea North","Asia"));
data.push(new Country("KOR",50004441,24454,7567,105,"Korea South","Asia"));
data.push(new Country("KSV",1807106,3567,0,0,"Kosovo","Europe"));
data.push(new Country("KWT",3250496,56367,15754,133,"Kuwait","Asia"));
data.push(new Country("KGZ",5607200,1178,699,99,"Kyrgyzstan","Asia"));
data.push(new Country("LAO",6645827,1412,900,63,"Laos","Asia"));
data.push(new Country("LVA",2034319,13947,18527,110,"Latvia","Europe"));
data.push(new Country("LBN",4424888,9764,8815,66,"Lebanon","Asia"));
data.push(new Country("LSO",2051545,1135,255,49,"Lesotho","Africa"));
data.push(new Country("LBR",4190435,414,65,40,"Liberia","Africa"));
data.push(new Country("LBY",6154623,13303,972,180,"Libya","Africa"));
data.push(new Country("LIE",36656,0,0,98,"Liechtenstein","Europe"));
data.push(new Country("LTU",2987773,14172,9995,159,"Lithuania","Europe"));
data.push(new Country("LUX",530946,103859,3696467,143,"Luxembourg","Europe"));
data.push(new Country("MAC",556783,77196,0,210,"Macao","Asia"));
data.push(new Country("MKD",2105575,4548,2668,102,"Macedonia","Europe"));
data.push(new Country("MDG",22293914,443,140,37,"Madagascar","Africa"));
data.push(new Country("MWI",15906483,267,77,21,"Malawi","Africa"));
data.push(new Country("MYS",29239927,10432,2570,120,"Malaysia","Asia"));
data.push(new Country("MDV",338442,6244,2947,152,"Maldives","Oceania"));
data.push(new Country("MLI",14853572,696,254,53,"Mali","Africa"));
data.push(new Country("MLT",419455,20839,14233,107,"Malta","Europe"));
data.push(new Country("MHL",52555,3292,1377,0,"Marshall Islands","Oceania"));
data.push(new Country("MRT",3796141,1043,831,77,"Mauritania","Africa"));
data.push(new Country("MUS",1291167,8862,3937,97,"Mauritius","Africa"));
data.push(new Country("MEX",120847477,9818,1956,78,"Mexico","North America"));
data.push(new Country("FSM",103395,3155,556,27,"Micronesia","Oceania"));
data.push(new Country("MDA",3559519,2047,1296,71,"Moldova","Europe"));
data.push(new Country("MCO",37579,0,471428,64,"Monaco","Europe"));
data.push(new Country("MNG",2796484,3691,686,93,"Mongolia","Asia"));
data.push(new Country("MNE",621081,6514,939,189,"Montenegro","Europe"));
data.push(new Country("MAR",32521143,2902,712,101,"Morocco","Africa"));
data.push(new Country("MOZ",25203395,570,231,30,"Mozambique","Africa"));
data.push(new Country("MMR",52797319,0,117,1,"Myanmar","Asia"));
data.push(new Country("NAM",2259393,5931,1131,90,"Namibia","Africa"));
data.push(new Country("NPL",27474377,699,161,34,"Nepal","Asia"));
data.push(new Country("NLD",16754962,45961,226503,115,"Netherlands","Europe"));
data.push(new Country("NCL",258000,0,385,90,"New Caledonia","Oceania"));
data.push(new Country("NZL",4433000,38680,52300,108,"New Zealand","Oceania"));
data.push(new Country("NIC",5991733,1777,693,68,"Nicaragua","North America"));
data.push(new Country("NER",17157042,395,178,23,"Niger","Africa"));
data.push(new Country("NGA",168833776,2722,71,55,"Nigeria","Africa"));
data.push(new Country("NAC",348692795,51826,0,90,"North America","North America"));
data.push(new Country("NOR",5018573,99636,131220,114,"Norway","Europe"));
data.push(new Country("OMN",3314001,23624,2962,164,"Oman","Asia"));
data.push(new Country("PAK",179160111,1255,366,57,"Pakistan","Asia"));
data.push(new Country("PLW",20754,11202,0,71,"Palau","Oceania"));
data.push(new Country("PAN",3802281,9982,3927,181,"Panama","North America"));
data.push(new Country("PNG",7167010,2184,238,28,"Papua New Guinea","Oceania"));
data.push(new Country("PRY",6687361,3680,382,92,"Paraguay","South America"));
data.push(new Country("PER",29987800,6424,1126,100,"Peru","South America"));
data.push(new Country("PHL",96706764,2587,636,89,"Philippines","Asia"));
data.push(new Country("POL",38535873,12721,6586,123,"Poland","Europe"));
data.push(new Country("PRT",10514844,20175,47835,115,"Portugal","Europe"));
data.push(new Country("PRI",3651545,27795,15692,79,"Puerto Rico","North America"));
data.push(new Country("QAT",2050514,92633,41988,125,"Qatar","Asia"));
data.push(new Country("ROM",20076727,8437,5082,111,"Romania","Europe"));
data.push(new Country("RUS",143178000,14091,3634,166,"Russian","Asia"));
data.push(new Country("RWA",11457801,623,284,33,"Rwanda","Africa"));
data.push(new Country("WSM",188889,3623,968,0,"Samoa","Oceania"));
data.push(new Country("SMR",31247,0,8388,99,"San Marino","Europe"));
data.push(new Country("STP",188098,1400,2193,58,"Sao Tome and Principe","Oceania"));
data.push(new Country("SAU",28287855,25946,3176,189,"Saudi Arabia","Asia"));
data.push(new Country("SEN",13726021,1023,296,64,"Senegal","Africa"));
data.push(new Country("SRB",7199077,5294,4178,125,"Serbia","Europe"));
data.push(new Country("SYC",88303,11689,15614,129,"Seychelles","Africa"));
data.push(new Country("SLE",5978727,633,340,35,"Sierra Leone","Africa"));
data.push(new Country("SGP",5312400,54007,0,145,"Singapore","Asia"));
data.push(new Country("SVK",5407579,16893,10926,109,"Slovakia","Europe"));
data.push(new Country("SVN",2057159,22059,25555,103,"Slovenia","Europe"));
data.push(new Country("SLB",549598,1819,355,22,"Solomon Islands","Oceania"));
data.push(new Country("SOM",10195134,0,386,7,"Somalia","Africa"));
data.push(new Country("ZAF",52274945,7314,1613,98,"South Africa","Africa"));
data.push(new Country("SAS",1649249388,1396,0,60,"South Asia","South Asia"));
data.push(new Country("SSD",10837527,974,0,0,"South Sudan","Africa"));
data.push(new Country("ESP",46761264,28282,52045,111,"Spain","Europe"));
data.push(new Country("LKA",20328000,2922,881,84,"Sri Lanka","Asia"));
data.push(new Country("KNA",53584,13658,6408,153,"St. Kitts and Nevis","North America"));
data.push(new Country("LCA",180870,7288,1586,112,"St. Lucia","North America"));
data.push(new Country("VCT",109373,6349,4477,121,"St. Vincent and the Grenadines","North America"));
data.push(new Country("SXM",30959,0,0,0,"Sint Maarten","North America"));
data.push(new Country("SDN",37195349,1695,946,42,"Sudan","Africa"));
data.push(new Country("SUR",534541,9376,1011,99,"Suriname","South America"));
data.push(new Country("SWZ",1230985,3290,428,61,"Swaziland","Africa"));
data.push(new Country("SWE",9519374,55039,91487,117,"Sweden","Europe"));
data.push(new Country("CHE",7996861,78929,154063,123,"Switzerland","Europe"));
data.push(new Country("SYR",22399254,0,373,54,"Syria","Asia"));
data.push(new Country("TJK",8008990,953,262,78,"Tajikistan","Asia"));
data.push(new Country("TZA",47783107,609,183,47,"Tanzania","Africa"));
data.push(new Country("THA",66785001,5480,1292,108,"Thailand","Asia"));
data.push(new Country("TMP",1148958,1179,0,44,"East Timor","Oceania"));
data.push(new Country("TGO",6642928,589,0,41,"Togo","Africa"));
data.push(new Country("TON",104941,4494,799,52,"Tonga","Africa"));
data.push(new Country("TTO",1337439,17523,3502,143,"Trinidad and Tobago","North America"));
data.push(new Country("TUN",10777500,4197,1779,105,"Tunisia","Africa"));
data.push(new Country("TUR",73997128,10661,3794,86,"Turkey","Asia"));
data.push(new Country("TKM",5172931,6798,978,63,"Turkmenistan","Asia"));
data.push(new Country("TUV",9860,4044,0,16,"Tuvalu","Oceania"));
data.push(new Country("UGA",36345860,551,85,38,"Uganda","Africa"));
data.push(new Country("UKR",45593300,3873,2144,117,"Ukraine","Europe"));
data.push(new Country("ARE",9205651,41692,24273,129,"United Arab Emirates","Asia"));
data.push(new Country("GBR",63695687,38649,160158,124,"United Kingdom","Europe"));
data.push(new Country("USA",313873685,51755,52170,91,"United States","North America"));
data.push(new Country("URY",3395253,14728,3989,132,"Uruguay","South America"));
data.push(new Country("UZB",29774500,1719,150,76,"Uzbekistan","Asia"));
data.push(new Country("VUT",247262,3183,389,72,"Vanuatu","Oceania"));
data.push(new Country("VEN",29954782,12729,1906,96,"Venezuela","South America"));
data.push(new Country("VNM",88772900,1755,379,125,"Vietnam","Asia"));
data.push(new Country("WBG",4046901,2530,414,65,"Palestine","Asia"));
data.push(new Country("YEM",23852409,1341,293,49,"Yemen Rep.","Asia"));
data.push(new Country("ZMB",14075099,1463,264,41,"Zambia","Africa"));
data.push(new Country("ZWE",13724317,909,609,59,"Zimbabwe","Africa"));
// data = data.sort(this.sortByPopAscending);
data = data.sort(this.sortByPopDescending);
const countries: Country[] = [];
for (const country of data) {
if (country.isValid()) {
countries.push(country);
}
}
return countries;
}
public static abbreviate(value: number): string {
const suffixes = ["", "K", "M", "B", "T"];
const roundValue = Math.round(value);
const suffixNum = Math.floor(("" + roundValue).length / 3);
const shortValue = parseFloat((suffixNum !== 0 ? (value / Math.pow(1000, suffixNum)) : value).toFixed(1));
return shortValue + suffixes[suffixNum];
}
}
class Country {
public Population: number;
public GdpPerCapita: number;
public GdpTotal: number;
public DptPerCapita: number;
public PhonePer100: number;
public Code: string;
public Name: string;
public Region: string;
constructor(code: string,
pop: number, gdp: number, dpt: number, phones: number,
name: string, region: string) {
this.Code = code;
this.Region = region;
this.Name = name;
this.Population = pop;
this.GdpPerCapita = gdp;
this.GdpTotal = gdp * pop; // / 1000000;
this.DptPerCapita = dpt;
this.PhonePer100 = phones;
}
public isValid(): boolean {
return this.GdpPerCapita > 0 && this.Population > 0 &&
this.DptPerCapita > 0 && this.PhonePer100 > 0
}
public getPopulation(): string {
return SampleScatterStats.abbreviate(this.Population);
}
public getGdpTotal(): string {
return SampleScatterStats.abbreviate(this.GdpTotal);
}
public getGdpPerCapita(): string {
return SampleScatterStats.abbreviate(this.GdpPerCapita);
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrBubbleSeries, IgrSeriesViewer } from "@infragistics/igniteui-react-charts";
import { IgrAnnotationLayer } from "@infragistics/igniteui-react-charts";
import { IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartCategoryModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChart } from "@infragistics/igniteui-react-charts";
// import { IgrCrosshairLayer } from "@infragistics/igniteui-react-charts";
import { IgrCrosshairLayerModule } from "@infragistics/igniteui-react-charts";
import { IgrNumberAbbreviatorModule } from "@infragistics/igniteui-react-charts";
import { IgrNumericXAxis } from "@infragistics/igniteui-react-charts";
import { IgrNumericYAxis } from "@infragistics/igniteui-react-charts";
import { IgrSizeScale } from "@infragistics/igniteui-react-charts";
import { MarkerType } from "@infragistics/igniteui-react-charts";
import { IgRect } from "@infragistics/igniteui-react-core";
import { IgrZoomSlider } from "@infragistics/igniteui-react-charts";
import { IgrChartCursorEventArgs } from "@infragistics/igniteui-react-charts";
import { IgrZoomSliderResolvingAxisValueEventArgs } from "@infragistics/igniteui-react-charts"
import { IgrRectChangedEventArgs } from "@infragistics/igniteui-react-core";
import { SampleScatterStats } from './SampleScatterStats';
IgrDataChartCategoryModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartAnnotationModule.register();
IgrNumberAbbreviatorModule.register();
IgrCrosshairLayerModule.register();
export default class ZoomSliderOverview extends React.Component<any, any> {
private mainChart: IgrDataChart = null;
private zoomChart: IgrDataChart = null;
private zoomSlider: IgrZoomSlider = null;
private charts: IgrDataChart[] = [];
private container: HTMLDivElement;
private isSynchronizingZoom: boolean = false;
private lastRect: IgRect = { left: -1, top: -1, width: -1, height: -1};
private regions: any[];
private countriesAll: any[];
private countriesByRegion: any;
constructor(props: any) {
super(props);
this.onMainChartRef = this.onMainChartRef.bind(this);
this.onZoomChartRef = this.onZoomChartRef.bind(this);
this.onZoomSliderRef = this.onZoomSliderRef.bind(this);
this.onActualWindowRectChanged = this.onActualWindowRectChanged.bind(this);
this.onZoomSliderWindowChanged = this.onZoomSliderWindowChanged.bind(this);
this.onGridAreaRectChanged = this.onGridAreaRectChanged.bind(this);
this.onContainerRef = this.onContainerRef.bind(this);
this.onCursorMove = this.onCursorMove.bind(this);
this.onResolvingAxisValue = this.onResolvingAxisValue.bind(this);
this.regions = [];
this.countriesAll = SampleScatterStats.getCountries();
this.countriesByRegion = {};
for (const country of this.countriesAll) {
const name = country.Region;
if (!this.countriesByRegion[name]) {
this.countriesByRegion[name] = [];
this.regions.push(name);
}
this.countriesByRegion[name].push(country);
}
}
public render(): JSX.Element {
return (
<div ref={this.onContainerRef} style={{ width: "calc(100% - 10px)", height: "calc(100% - 10px)" }}>
<IgrDataChart
titleTopMargin="10"
chartTitle="World GDP vs Population"
ref={this.onMainChartRef}
width="100%"
height="calc(100% - 160px)"
isHorizontalZoomEnabled="true"
isVerticalZoomEnabled="false"
actualWindowRectChanged={this.onActualWindowRectChanged}
gridAreaRectChanged={this.onGridAreaRectChanged}
seriesCursorMouseMove={this.onCursorMove}>
<IgrNumericXAxis
name="mainXAxis"
isLogarithmic={true}
abbreviateLargeNumbers={true}
title="Population"/>
<IgrNumericYAxis name="mainYAxis"
isLogarithmic={true}
abbreviateLargeNumbers={true}
titleLeftMargin="10"
title="Total GDP ($)"/>
</IgrDataChart>
<div style={{ width: "100%", height:"160px", position: "relative" }}>
<div style={{ width: "100%", height:"160px", position: "absolute", top: "0px", left: "0px" }} >
<IgrDataChart
ref={this.onZoomChartRef}
width="100%"
height="160px"
isHorizontalZoomEnabled="true"
isVerticalZoomEnabled="true">
<IgrNumericXAxis
name="zoomXAxis"
isLogarithmic={true}
abbreviateLargeNumbers={true}
labelVisibility="collapsed"/>
<IgrNumericYAxis name="zoomYAxis"
isLogarithmic={true}
abbreviateLargeNumbers={true}
labelVisibility="collapsed" />
</IgrDataChart>
</div>
<div style={{ width: "100%", height:"160px", position: "absolute", top: "0px", left: "0px" }} >
<IgrZoomSlider
width="100%"
height="100%"
ref={this.onZoomSliderRef}
areThumbCalloutsEnabled="true"
windowRectChanged={this.onZoomSliderWindowChanged}
resolvingAxisValue={this.onResolvingAxisValue}/>
</div>
</div>
</div>
);
}
private onMainChartRef(chart: IgrDataChart) {
if (!chart) { return; }
this.charts.push(chart);
this.mainChart = chart;
this.createSeries(this.mainChart);
}
private onZoomChartRef(chart: IgrDataChart) {
if (!chart) { return; }
this.zoomChart = chart;
this.createSeries(this.zoomChart);
}
private onZoomSliderRef(slider: IgrZoomSlider) {
if (!slider) { return; }
this.zoomSlider = slider;
}
private onCursorMove(chart: IgrSeriesViewer, args: IgrChartCursorEventArgs) {
// console.log(this.container.offsetWidth);
this.charts.map(c => {
if (c !== chart) {
c.actualSeries.filter((s) => s.isAnnotationLayer)
.map((s) => {
let a = s as IgrAnnotationLayer;
a.moveCursorPoint(chart.crosshairPoint);
});
}
});
}
private onActualWindowRectChanged(chart: IgrSeriesViewer, args: IgrRectChangedEventArgs) {
if (!this.isSynchronizingZoom) {
this.syncZooms(chart);
}
}
private onZoomSliderWindowChanged(slider: IgrZoomSlider, args: IgrRectChangedEventArgs) {
if (!this.isSynchronizingZoom) {
this.syncZooms(slider);
}
}
private onContainerRef(div: HTMLDivElement) {
if (!div) { return; }
this.container = div;
}
private syncZooms(sender: any) {
window.setTimeout(() => {
try
{
this.isSynchronizingZoom = true;
const zoomWindow = this.zoomSlider.windowRect;
const chartWindow = sender === this.zoomSlider ? this.mainChart.actualWindowRect : (sender as IgrDataChart).actualWindowRect;
if (sender === this.zoomSlider) {
this.charts.map((chart) => {
this.updateChartZoom(chart, {
top: chartWindow.top,
left: zoomWindow.left,
width: zoomWindow.width,
height: chartWindow.height });
});
} else {
this.zoomSlider.windowRect = {
top: zoomWindow.top,
left: chartWindow.left,
width: chartWindow.width,
height: zoomWindow.height };
this.charts.map((chart) => {
this.updateChartZoom(chart, {
top: zoomWindow.top,
left: chartWindow.left,
width: chartWindow.width,
height: zoomWindow.height });
});
}
} finally {
this.isSynchronizingZoom = false;
}
}, 0);
}
private onResolvingAxisValue(slider: IgrZoomSlider, args: IgrZoomSliderResolvingAxisValueEventArgs) {
const xAxis = this.zoomChart.actualAxes.filter(a => a.isNumeric)[0] as IgrNumericXAxis;
if (xAxis) {
const range = (xAxis.actualMaximumValue - xAxis.actualMinimumValue)
const value = xAxis.actualMinimumValue + (args.position * range);
const str = SampleScatterStats.abbreviate(value)
// console.log("p=" + args.position + " r=" + range + " v=" + value + " str=" + str);
args.value = str;
}
// const index = Math.round(args.position * (this.countriesAll.length - 1));
// const item = this.countriesAll[index];
// if (item) {
// args.value = SampleScatterStats.abbreviate(item.population);
// }
}
private onGridAreaRectChanged(chart: IgrSeriesViewer, args: IgrRectChangedEventArgs) {
let newRect = args.newRect;
if (!this.container) {
return;
}
if (newRect.left !== this.lastRect.left ||
newRect.top !== this.lastRect.top ||
newRect.width !== this.lastRect.width ||
newRect.height !== this.lastRect.height) {
let rightMargin = (isNaN(this.mainChart.rightMargin) ? this.mainChart.autoMarginWidth : this.mainChart.rightMargin);
let width = newRect.left + newRect.width + rightMargin;
this.lastRect = newRect;
let right = newRect.left + newRect.width;
let insetLeft = newRect.left;
let insetRight = width - right;
this.zoomSlider.startInset = insetLeft - this.zoomSlider.trackStartInset;
this.zoomSlider.endInset = insetRight - this.zoomSlider.trackEndInset;
if (this.zoomSlider.endInset < 0) {
let inset = this.zoomSlider.endInset;
this.zoomSlider.endInset = 0;
this.charts.map(c => c.rightMargin += (inset * -1.0));
}
if (this.zoomSlider.startInset < 0) {
let inset = this.zoomSlider.startInset;
this.zoomSlider.startInset = 0;
this.charts.map(c => c.leftMargin += (inset * -1.0));
}
this.zoomChart.leftMargin = insetLeft;
this.zoomChart.rightMargin = insetRight;
this.zoomChart.bottomMargin = this.zoomSlider.barExtent;
}
}
private updateChartZoom(chart: IgrDataChart, zoom: IgRect) {
const data = this.countriesAll;
const yAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgrNumericYAxis;
let indexStart = Math.floor((data.length - 1) * zoom.left);
let indexEnd = Math.ceil((data.length - 1) * (zoom.left + zoom.width));
// console.log("updateChartZoom");
let min = Number.MAX_VALUE;
let max = Number.MIN_VALUE;
if (indexStart < 0) {
indexStart = 0;
}
indexEnd = Math.min(indexEnd, this.countriesAll.length - 1);
for (let i = indexStart; i <= indexEnd; i++) {
min = Math.min(min, data[i].GdpTotal);
max = Math.max(max, data[i].GdpTotal);
}
let yMin = (min - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue);
let yMax = (max - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue);
let newZoom = {
left: zoom.left,
width: zoom.width,
top: (1.0 - yMax),
// top: 0.0,
// height: 1.0
height: (yMax - yMin)
}
chart.windowRect = newZoom;
}
private createSeries(chart: IgrDataChart) {
const sizeScale1 = new IgrSizeScale({});
sizeScale1.minimumValue = 15;
sizeScale1.maximumValue = 40;
const sizeScale2 = new IgrSizeScale({});
sizeScale2.minimumValue = 5;
sizeScale2.maximumValue = 15;
const xAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgrNumericXAxis;
const yAxis = chart.actualAxes.filter(a => a.isNumeric)[1] as IgrNumericYAxis;
const series1 = new IgrBubbleSeries({ name: "series1" });
series1.title = "High Income Country";
series1.dataSource = SampleScatterStats.getCountriesWithHighIncome();
series1.showDefaultTooltip = false;
series1.xMemberPath = "Population";
series1.yMemberPath = "GdpTotal";
series1.radiusMemberPath = "GdpPerCapita";
series1.radiusScale = sizeScale1;
series1.markerType = MarkerType.Circle;
series1.xAxis = xAxis;
series1.yAxis = yAxis;
// series1.tooltipTemplate = this.seriesTooltip;
const series2 = new IgrBubbleSeries({ name: "series2" });
series2.title = "Low Income Country";
series2.dataSource = SampleScatterStats.getCountriesWithLowIncome();
series2.showDefaultTooltip = false;
series2.xMemberPath = "Population";
series2.yMemberPath = "GdpTotal";
series2.radiusMemberPath = "GdpPerCapita";
series2.radiusScale = sizeScale2;
series2.markerType = MarkerType.Circle;
series2.xAxis = xAxis;
series2.yAxis = yAxis;
// series2.tooltipTemplate = this.seriesTooltip;
chart.series.add(series1);
chart.series.add(series2);
// chart.markerOutlines = [ "#7446B9", "#9FB328", "#2E9CA6", "#525251", "#dcbf3f", "#F96232"];
// chart.brushes = [ "#7446B9", "#9FB328", "#2E9CA6", "#525251", "#dcbf3f", "#F96232"];
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ZoomSliderOverview/>);
tsx
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Usage
Nombre de la característica | Descripción |
---|---|
Navegación con barra de desplazamiento | Los usuarios pueden cambiar la escala y desplazarse por rangos de datos utilizando las capacidades integradas de la barra de desplazamiento ZoomSlider. |
Panorámica y zoom | Los usuarios pueden ajustar la escala de visualización arrastrando los bordes del control para el pulgar para hacer que la visualización actual cubra un rango mayor (alejar) o un rango más pequeño (acercar). |
Múltiples opciones de interacción del usuario | Todas las interacciones del usuario del mouse se admiten de manera redundante a través del tacto y la mayoría de ellas, a través del teclado. Para obtener más información, consulte Interacciones del usuario y usabilidad. |
Soporte táctil | En dispositivos táctiles, los usuarios pueden disfrutar de la funcionalidad completa de ZoomSlider. Todas las interacciones del mouse son compatibles en un entorno táctil. |
Extensibilidad | El control ZoomSlider admite el control DataChart listo para usar. |
Ventana de rango de zoom configurable | El ancho y la posición inicial de la ventana del rango de zoom, así como su tamaño mínimo, son configurables. |
Dependencies
Al instalar el componente del gráfico React, también se debe instalar el paquete principal.
npm install --save igniteui-react-core
npm install --save igniteui-react-charts
cmd
Component Modules
IgrZoomSlider
requiere los siguientes módulos:
import { IgrZoomSliderModule } from 'igniteui-react-charts';
import { IgrZoomSlider } from 'igniteui-react-charts';
IgrDataChartInteractivityModule.register();
ts
Code Snippet
El siguiente código demuestra cómo configurar ZoomSlider.
<IgrZoomSlider
width="100%"
height="100%"
/>
tsx
Additional Resources
Puede encontrar más información sobre los gráficos en el tema Características de los gráficos.
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: