Skip to content

Commit c4b4dfb

Browse files
HUSSAR-mtrelaHUSSAR-mtrela
committed
added/fixed chart samples
1 parent 750dd0c commit c4b4dfb

22 files changed

+385
-271
lines changed

‎package_clean.bat

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@echo off
2+
ECHO removing all packages from node_modules...
3+
rmdir /s /q node_modules
4+
REM del /f /s /q * 1>nul
5+
ECHO removing all packages from node_modules... completed
6+
pause
7+
8+
9+

‎src/app/charts/charts-routes-data.ts

+8
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@
22
// tslint:disable:max-line-length
33

44
export const chartsRoutesData = {
5+
// doughnut-chart
56
"doughnut-chart-explosion": { displayName: "Doughnut Chart Explosion", parentName: "Doughnut Chart" },
67
"doughnut-chart-overview": { displayName: "Doughnut Chart Overview", parentName: "Doughnut Chart" },
78
"doughnut-chart-selection": { displayName: "Doughnut Chart Selection", parentName: "Doughnut Chart" },
9+
"doughnut-chart-legend": { displayName: "Doughnut Chart Legend", parentName: "Doughnut Chart" },
10+
"doughnut-chart-rings": { displayName: "Doughnut Chart Rings", parentName: "Doughnut Chart" },
11+
// pie-chart
812
"pie-chart-data-sample": { displayName: "Pie Chart Data Sample", parentName: "Pie Chart" },
913
"pie-chart-explosion": { displayName: "Pie Chart Explosion", parentName: "Pie Chart" },
1014
"pie-chart-legend": { displayName: "Pie Chart Legend", parentName: "Pie Chart" },
1115
"pie-chart-others": { displayName: "Pie Chart Others Slice", parentName: "Pie Chart" },
1216
"pie-chart-selection": { displayName: "Pie Chart Selection", parentName: "Pie Chart" },
17+
// category-chart
1318
"category-chart-overview": { displayName: "Category Chart Overview", parentName: "Category Chart" },
1419
"category-chart-annotations": { displayName: "Category Chart Annotations", parentName: "Category Chart" },
1520
"category-chart-overlap-columns": { displayName: "Category Chart Overlap Columns", parentName: "Category Chart" },
@@ -21,6 +26,7 @@ export const chartsRoutesData = {
2126
"category-chart-tooltip-template": { displayName: "Category Chart Tooltips Template", parentName: "Category Chart" },
2227
"category-chart-tooltip-types": { displayName: "Category Chart Tooltip Types", parentName: "Category Chart" },
2328
"category-chart-trendline": { displayName: "Category Chart Trendline", parentName: "Category Chart" },
29+
// financial-chart
2430
"financial-chart-overview-sample": { displayName: "Financial Chart Overview", parentName: "Financial Chart" },
2531
"financial-chart-performance": { displayName: "Financial Chart Performance", parentName: "Financial Chart" },
2632
"financial-chart-annotations": { displayName: "Financial Chart Annotations", parentName: "Financial Chart" },
@@ -38,6 +44,7 @@ export const chartsRoutesData = {
3844
"financial-chart-tooltip-types": { displayName: "Financial Chart Tooltip Types", parentName: "Financial Chart" },
3945
"financial-chart-time-based-data": { displayName: "Financial Chart Time Based Data", parentName: "Financial Chart" },
4046
"financial-chart-trendlines": { displayName: "Financial Chart Trendlines", parentName: "Financial Chart" },
47+
// data-chart
4148
// TODO uncomment when implemented
4249
// "data-chart-axis-locations": { displayName: "Data Chart Axis Locations", parentName: "Data Chart" },
4350
"data-chart-axis-annotations": { displayName: "Data Chart Axis Annotations", parentName: "Data Chart" },
@@ -69,6 +76,7 @@ export const chartsRoutesData = {
6976
"data-chart-synchronization": { displayName: "Data Chart Synchronization", parentName: "Data Chart" },
7077
"data-chart-titles": { displayName: "Data Chart Titles", parentName: "Data Chart" },
7178
"data-chart-value-overlay": { displayName: "Data Chart Value Overlay", parentName: "Data Chart" },
79+
// sparkline-chart
7280
"sparkline-display-types": { displayName: "Sparkline Display Types", parentName: "Sparkline"},
7381
"sparkline-markers": { displayName: "Sparkline Markers", parentName: "Sparkline"},
7482
"sparkline-normal-range": { displayName: "Sparkline Normal Range", parentName: "Sparkline"},

‎src/app/charts/charts-routing.module.ts

+113-191
Large diffs are not rendered by default.

‎src/app/charts/doughnut-chart/doughnut-chart-explosion-sample/doughnut-chart-explosion-sample.component.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<div class="chart">
2-
<igx-doughnut-chart #chart height="100%" width="100%" (sliceClick)="pieSliceClickEvent($event)">
3-
<igx-ring-series [dataSource] = "data" valueMemberPath="Value" labelMemberPath="Label">
4-
</igx-ring-series>
5-
</igx-doughnut-chart>
6-
</div>
1+
<div class="container">
2+
<div class="chart">
3+
<igx-doughnut-chart #chart height="100%" width="100%" (sliceClick)="pieSliceClickEvent($event)">
4+
<igx-ring-series [dataSource] = "data" valueMemberPath="Value" labelMemberPath="Label">
5+
</igx-ring-series>
6+
</igx-doughnut-chart>
7+
</div>
8+
</div>

‎src/app/charts/doughnut-chart/doughnut-chart-explosion-sample/doughnut-chart-explosion-sample.component.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1+
.container{
2+
display: flex;
3+
flex-flow: row;
4+
height: 100%;
5+
min-width: 600px;
6+
}
7+
18
.chart {
29
height: 100%;
310
min-width: 500px;
4-
}
11+
}

‎src/app/charts/doughnut-chart/doughnut-chart-legend/doughnut-chart-legend.component.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="container">
2+
<div class="legend">
3+
<igx-item-legend #legend height="100px" width="100px">
4+
</igx-item-legend>
5+
</div>
6+
<div class="chart">
7+
<igx-doughnut-chart #chart height="100%" width="80%">
8+
<igx-ring-series
9+
[dataSource] = "data"
10+
[legend]="legend"
11+
valueMemberPath="Value"
12+
labelMemberPath="Label"
13+
allowSliceSelection="false">
14+
</igx-ring-series>
15+
</igx-doughnut-chart>
16+
</div>
17+
</div>

‎src/app/charts/doughnut-chart/doughnut-chart-legend/doughnut-chart-legend.component.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.container{
2+
display: flex;
3+
flex-flow: row;
4+
height: 100%;
5+
min-width: 600px;
6+
}
7+
8+
.chart {
9+
height: 100%;
10+
min-width: 500px;
11+
}
12+
13+
.legend {
14+
height: 100%;
15+
min-width: 100px;
16+
}

‎src/app/charts/doughnut-chart/doughnut-chart-legend/doughnut-chart-legend.component.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component, OnInit, ViewChild } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-doughnut-chart-legend",
5+
styleUrls: ["./doughnut-chart-legend.component.scss"],
6+
templateUrl: "./doughnut-chart-legend.component.html"
7+
})
8+
export class DoughnutChartLegendComponent {
9+
10+
public data: any;
11+
12+
constructor() {
13+
this.data = [
14+
{ Label: "Administration", Value: 2 },
15+
{ Label: "Sales", Value: 8 },
16+
{ Label: "IT", Value: 3 },
17+
{ Label: "Marketing", Value: 8 },
18+
{ Label: "Development", Value: 4 },
19+
{ Label: "Customer Support", Value: 6 }
20+
];
21+
}
22+
23+
}

‎src/app/charts/doughnut-chart/doughnut-chart-overview-sample/doughnut-chart-overview-sample.component.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<div class="chart">
2-
<igx-doughnut-chart height="100%" width="100%" >
3-
<igx-ring-series [dataSource] = "data" valueMemberPath="Value" labelMemberPath="Label">
4-
</igx-ring-series>
5-
</igx-doughnut-chart>
6-
</div>
1+
<div class="container">
2+
<div class="chart">
3+
<igx-doughnut-chart height="100%" width="100%" >
4+
<igx-ring-series [dataSource] = "data" valueMemberPath="Value" labelMemberPath="Label">
5+
</igx-ring-series>
6+
</igx-doughnut-chart>
7+
</div>
8+
</div>

‎src/app/charts/doughnut-chart/doughnut-chart-overview-sample/doughnut-chart-overview-sample.component.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1+
.container{
2+
display: flex;
3+
flex-flow: row;
4+
height: 100%;
5+
min-width: 600px;
6+
}
7+
18
.chart {
29
height: 100%;
310
min-width: 500px;
4-
}
11+
}

‎src/app/charts/doughnut-chart/doughnut-chart-rings/doughnut-chart-rings.component.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="chart">
2+
<igx-doughnut-chart #chart height="90%" width="100%" >
3+
<igx-ring-series
4+
[dataSource] = "Months"
5+
valueMemberPath="Value"
6+
labelMemberPath="Label"
7+
labelsPosition="Center"
8+
brushes="#23c7d6, #23c7d6, #23c7d6,
9+
#27c52f, #27c52f, #27c52f,
10+
#eba613, #eba613, #eba613,
11+
#b4b3b3, #b4b3b3, #b4b3b3">
12+
</igx-ring-series>
13+
<igx-ring-series
14+
[dataSource] = "Seasons"
15+
valueMemberPath="Value"
16+
labelMemberPath="Label"
17+
labelsPosition="Center"
18+
brushes="#1ea8b4, #20a026, #c78d0f, #888888" >
19+
</igx-ring-series>
20+
</igx-doughnut-chart>
21+
</div>

‎src/app/charts/doughnut-chart/doughnut-chart-rings/doughnut-chart-rings.component.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.container{
2+
display: flex;
3+
flex-flow: row;
4+
height: 100%;
5+
min-width: 600px;
6+
}
7+
8+
.chart {
9+
height: 100%;
10+
min-width: 500px;
11+
}
12+
13+
.legend {
14+
height: 100%;
15+
min-width: 100px;
16+
}

‎src/app/charts/doughnut-chart/doughnut-chart-rings/doughnut-chart-rings.component.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Component, OnInit, ViewChild } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-doughnut-chart-rings",
5+
styleUrls: ["./doughnut-chart-rings.component.scss"],
6+
templateUrl: "./doughnut-chart-rings.component.html"
7+
})
8+
export class DoughnutChartRingsComponent {
9+
10+
public Months: any[];
11+
public Seasons: any[];
12+
13+
constructor() {
14+
15+
this.Months = [
16+
{ Value: 1, Label: "December" },
17+
{ Value: 1, Label: "January" },
18+
{ Value: 1, Label: "February" },
19+
{ Value: 1, Label: "March" },
20+
{ Value: 1, Label: "April" },
21+
{ Value: 1, Label: "May" },
22+
{ Value: 1, Label: "June" },
23+
{ Value: 1, Label: "July" },
24+
{ Value: 1, Label: "August" },
25+
{ Value: 1, Label: "September" },
26+
{ Value: 1, Label: "October" },
27+
{ Value: 1, Label: "November" },
28+
];
29+
this.Seasons = [
30+
{ Value: 4, Label: "Winter" },
31+
{ Value: 4, Label: "Spring" },
32+
{ Value: 4, Label: "Summer" },
33+
{ Value: 4, Label: "Fall" },
34+
];
35+
}
36+
37+
}

‎src/app/charts/doughnut-chart/doughnut-chart-samples.module.ts

+17-11
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,37 @@
1+
/* tslint:disable:object-literal-sort-keys */
2+
// tslint:disable:max-line-length
3+
// tslint:disable:member-ordering
4+
15
import { CommonModule } from "@angular/common";
26
import { ModuleWithProviders, NgModule } from "@angular/core";
37
import { FormsModule } from "@angular/forms";
48

59
import { IgxDoughnutChartModule } from "igniteui-angular-charts/ES5/igx-doughnut-chart-module";
610
import { IgxRingSeriesModule } from "igniteui-angular-charts/ES5/igx-ring-series-module";
11+
import { IgxItemLegendModule } from "igniteui-angular-charts/ES5/igx-item-legend-module";
12+
import { IgxLegendModule } from "igniteui-angular-charts/ES5/igx-legend-module";
713

8-
import {
9-
DoughnutChartExplosionSampleComponent
10-
} from "./doughnut-chart-explosion-sample/doughnut-chart-explosion-sample.component";
11-
import {
12-
DoughnutChartOverviewSampleComponent
13-
} from "./doughnut-chart-overview-sample/doughnut-chart-overview-sample.component";
14-
import {
15-
DoughnutChartSelectionSampleComponent
16-
} from "./doughnut-chart-selection-sample/doughnut-chart-selection-sample.component";
14+
import { DoughnutChartExplosionSampleComponent } from "./doughnut-chart-explosion-sample/doughnut-chart-explosion-sample.component";
15+
import { DoughnutChartLegendComponent } from "./doughnut-chart-legend/doughnut-chart-legend.component";
16+
import { DoughnutChartOverviewSampleComponent } from "./doughnut-chart-overview-sample/doughnut-chart-overview-sample.component";
17+
import { DoughnutChartRingsComponent } from "./doughnut-chart-rings/doughnut-chart-rings.component";
18+
import { DoughnutChartSelectionSampleComponent } from "./doughnut-chart-selection-sample/doughnut-chart-selection-sample.component";
1719

1820
@NgModule({
1921
declarations: [
2022
DoughnutChartExplosionSampleComponent,
2123
DoughnutChartOverviewSampleComponent,
22-
DoughnutChartSelectionSampleComponent
24+
DoughnutChartSelectionSampleComponent,
25+
DoughnutChartLegendComponent,
26+
DoughnutChartRingsComponent
2327
],
2428
imports: [
2529
CommonModule,
2630
FormsModule,
2731
IgxDoughnutChartModule,
28-
IgxRingSeriesModule
32+
IgxRingSeriesModule,
33+
IgxItemLegendModule,
34+
IgxLegendModule
2935
]
3036
})
3137
export class DoughnutChartSamplesModule {}

‎src/app/charts/doughnut-chart/doughnut-chart-selection-sample/doughnut-chart-selection-sample.component.html

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
<div class="chart">
2-
<igx-doughnut-chart #chart height="100%" width="100%">
3-
<igx-ring-series [dataSource]="data" valueMemberPath="Value" labelMemberPath="Label">
4-
</igx-ring-series>
5-
</igx-doughnut-chart>
6-
</div>
1+
<div class="container">
2+
<div class="chart">
3+
<igx-doughnut-chart #chart height="100%" width="100%">
4+
<igx-ring-series
5+
[dataSource]="data"
6+
valueMemberPath="Value"
7+
labelMemberPath="Label">
8+
</igx-ring-series>
9+
</igx-doughnut-chart>
10+
</div>
11+
</div>

‎src/app/charts/doughnut-chart/doughnut-chart-selection-sample/doughnut-chart-selection-sample.component.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1+
.container{
2+
display: flex;
3+
flex-flow: row;
4+
height: 100%;
5+
min-width: 600px;
6+
}
7+
18
.chart {
29
height: 100%;
310
min-width: 500px;
4-
}
11+
}

‎src/app/charts/pie-chart/pie-chart-samples.module.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/* tslint:disable:object-literal-sort-keys */
2+
// tslint:disable:max-line-length
3+
// tslint:disable:member-ordering
4+
15
import { CommonModule } from "@angular/common";
26
import { ModuleWithProviders, NgModule } from "@angular/core";
37
import { FormsModule } from "@angular/forms";

‎src/app/maps/geo-map-binding-data-model/map-binding-data-model.component.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { IgxGeographicMapComponent } from "igniteui-angular-maps/ES5/igx-geograp
44
import { IgxGeographicPolylineSeriesComponent
55
} from "igniteui-angular-maps/ES5/igx-geographic-polyline-series-component";
66
import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps/ES5/igx-geographic-symbol-series-component";
7-
import { WorldUtils } from "../../utilities/WorldUtils";
7+
import { WorldUtility } from "../../utilities/WorldUtility";
88

99
@Component({
1010
selector: "app-map-binding-data-model",
@@ -72,8 +72,8 @@ export class MapBindingDataModelComponent implements AfterViewInit {
7272
}
7373

7474
public createPolylineSeries(flight: any) {
75-
const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest);
76-
const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest);
75+
const geoPath = WorldUtility.calcPaths(flight.origin, flight.dest);
76+
const geoDistance = WorldUtility.calcDistance(flight.origin, flight.dest);
7777
const geoRoutes = [
7878
{
7979
dest: flight.dest,

0 commit comments

Comments
 (0)