Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const pop = record.fieldValues.POPULATION;
if (pop > 0) {
// each shapefile record has just one point
const location = {
city: record.fieldValues.NAME,
latitude: record.points[0][0].y,
longitude: record.points[0][0].x,
population: pop
};
geoLocations.push(location);
}
}
const geoSeries = new IgxGeographicSymbolSeriesComponent();
geoSeries.dataSource = geoLocations;
geoSeries.markerType = MarkerType.Circle;
geoSeries.latitudeMemberPath = "latitude";
geoSeries.longitudeMemberPath = "longitude";
geoSeries.markerBrush = "LightGray";
geoSeries.markerOutline = "Black";
geoSeries.tooltipTemplate = this.tooltipTemplate;
this.map.series.add(geoSeries);
}
}
sizeScale.maximumValue = 60;
const brushes = [
"rgba(14, 194, 14, 0.4)", // semi-transparent green
"rgba(252, 170, 32, 0.4)", // semi-transparent orange
"rgba(252, 32, 32, 0.4)" // semi-transparent red
];
const brushScale = new IgxValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
symbolSeries.dataSource = locations;
symbolSeries.markerType = MarkerType.Circle;
symbolSeries.radiusScale = sizeScale;
symbolSeries.fillScale = brushScale;
symbolSeries.fillMemberPath = "pop";
symbolSeries.radiusMemberPath = "pop";
symbolSeries.latitudeMemberPath = "lat";
symbolSeries.longitudeMemberPath = "lon";
symbolSeries.markerOutline = "rgba(0,0,0,0.3)";
symbolSeries.tooltipTemplate = this.tooltipTemplate;
this.map.series.add(symbolSeries);
}
const yAxis = chart.actualAxes.filter(a => a.isNumeric)[1] as IgxNumericYAxisComponent;
const series1 = new IgxBubbleSeriesComponent();
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 IgxBubbleSeriesComponent();
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"];
public addSeriesWith(locations: any[]) {
const sizeScale = new IgxSizeScaleComponent();
sizeScale.minimumValue = 4;
sizeScale.maximumValue = 60;
const brushes = [
"rgba(14, 194, 14, 0.4)", // semi-transparent green
"rgba(252, 170, 32, 0.4)", // semi-transparent orange
"rgba(252, 32, 32, 0.4)" // semi-transparent red
];
const brushScale = new IgxValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
symbolSeries.dataSource = locations;
public createContourSeries(data: any[]) {
const brushes = [
"rgba(32, 146, 252, 0.5)", // semi-transparent blue
"rgba(14, 194, 14, 0.5)", // semi-transparent green
"rgba(252, 120, 32, 0.5)", // semi-transparent orange
"rgba(252, 32, 32, 0.5)" // semi-transparent red
];
const brushScale = new IgxValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const contourSeries = new IgxGeographicContourLineSeriesComponent();
contourSeries.dataSource = data;
contourSeries.longitudeMemberPath = "lon";
contourSeries.latitudeMemberPath = "lat";
contourSeries.valueMemberPath = "value";
contourSeries.fillScale = brushScale;
contourSeries.tooltipTemplate = this.tooltip;
contourSeries.thickness = 4;
this.map.series.add(contourSeries);
}
}
public addSeriesWith(locations: any[]) {
const sizeScale = new IgxSizeScaleComponent();
sizeScale.minimumValue = 4;
sizeScale.maximumValue = 60;
const brushes = [
"rgba(14, 194, 14, 0.4)", // semi-transparent green
"rgba(252, 170, 32, 0.4)", // semi-transparent orange
"rgba(252, 32, 32, 0.4)" // semi-transparent red
];
const brushScale = new IgxValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
symbolSeries.dataSource = locations;
symbolSeries.markerType = MarkerType.Circle;
symbolSeries.radiusScale = sizeScale;
symbolSeries.fillScale = brushScale;
symbolSeries.fillMemberPath = "pop";
symbolSeries.radiusMemberPath = "pop";
symbolSeries.latitudeMemberPath = "lat";
symbolSeries.longitudeMemberPath = "lon";
symbolSeries.markerOutline = "rgba(0,0,0,0.3)";
symbolSeries.tooltipTemplate = this.tooltipTemplate;
public setSeries(seriesType: string) {
if (seriesType === "Area") {
// creating a series with mapping to data columns of wind pattern
const series1 = new IgxPolarAreaSeriesComponent();
series1.name = "series1";
series1.angleMemberPath = "Direction";
series1.radiusMemberPath = "BoatSpeed";
series1.radiusAxis = this.radiusAxis;
series1.angleAxis = this.angleAxis;
const series2 = new IgxPolarAreaSeriesComponent();
series2.name = "series2";
series2.angleMemberPath = "Direction";
series2.radiusMemberPath = "WindSpeed";
series2.radiusAxis = this.radiusAxis;
series2.angleAxis = this.angleAxis;
series1.areaFillOpacity = 1;
series2.areaFillOpacity = 1;
series1.markerType = MarkerType.Circle;
series2.markerType = MarkerType.Circle;
public setSeries(seriesType: string) {
if (seriesType === "Area") {
// creating a series with mapping to data columns of wind pattern
const series1 = new IgxPolarAreaSeriesComponent();
series1.name = "series1";
series1.angleMemberPath = "Direction";
series1.radiusMemberPath = "BoatSpeed";
series1.radiusAxis = this.radiusAxis;
series1.angleAxis = this.angleAxis;
const series2 = new IgxPolarAreaSeriesComponent();
series2.name = "series2";
series2.angleMemberPath = "Direction";
series2.radiusMemberPath = "WindSpeed";
series2.radiusAxis = this.radiusAxis;
series2.angleAxis = this.angleAxis;
series1.areaFillOpacity = 1;
series2.areaFillOpacity = 1;
series1.markerType = MarkerType.Circle;
series2.markerType = MarkerType.Circle;
series1.title = "Boat Speed";
series2.title = "Wind Speed";
this.chart.series.clear();
this.chart.series.add(series2);
this.chart.series.add(series1);
series2.angleMemberPath = "Direction";
series2.radiusMemberPath = "WindSpeed";
series2.radiusAxis = this.radiusAxis;
series2.angleAxis = this.angleAxis;
series1.markerType = MarkerType.Circle;
series2.markerType = MarkerType.Circle;
series1.title = "Boat Speed";
series2.title = "Wind Speed";
this.chart.series.clear();
this.chart.series.add(series2);
this.chart.series.add(series1);
} else if (seriesType === "Line") {
// creating a series with mapping to data columns of wind pattern
const series1 = new IgxPolarLineSeriesComponent();
series1.name = "series1";
series1.angleMemberPath = "Direction";
series1.radiusMemberPath = "BoatSpeed";
series1.radiusAxis = this.radiusAxis;
series1.angleAxis = this.angleAxis;
const series2 = new IgxPolarLineSeriesComponent();
series2.name = "series2";
series2.angleMemberPath = "Direction";
series2.radiusMemberPath = "WindSpeed";
series2.radiusAxis = this.radiusAxis;
series2.angleAxis = this.angleAxis;
series1.markerType = MarkerType.Circle;
series2.markerType = MarkerType.Circle;
series1.title = "Boat Speed";
series2.title = "Wind Speed";
series2.markerType = MarkerType.Circle;
series1.title = "Boat Speed";
series2.title = "Wind Speed";
this.chart.series.clear();
this.chart.series.add(series2);
this.chart.series.add(series1);
} else if (seriesType === "Line") {
// creating a series with mapping to data columns of wind pattern
const series1 = new IgxPolarLineSeriesComponent();
series1.name = "series1";
series1.angleMemberPath = "Direction";
series1.radiusMemberPath = "BoatSpeed";
series1.radiusAxis = this.radiusAxis;
series1.angleAxis = this.angleAxis;
const series2 = new IgxPolarLineSeriesComponent();
series2.name = "series2";
series2.angleMemberPath = "Direction";
series2.radiusMemberPath = "WindSpeed";
series2.radiusAxis = this.radiusAxis;
series2.angleAxis = this.angleAxis;
series1.markerType = MarkerType.Circle;
series2.markerType = MarkerType.Circle;
series1.title = "Boat Speed";
series2.title = "Wind Speed";
this.chart.series.clear();
this.chart.series.add(series2);
this.chart.series.add(series1);
} else if (seriesType === "Scatter") {
// creating a series with mapping to data columns of wind pattern