Skip to content

Commit caf0de2

Browse files
yanmariomenevyanmariomenev
committed
chore: add charts
1 parent b472c0e commit caf0de2

File tree

5 files changed

+226
-1
lines changed

5 files changed

+226
-1
lines changed

‎examples-standalone/kendoangular-landing-page/src/app/app.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@ import { TransactionsDashboardComponent } from './components/transactions-dashbo
55
import { BottomRightComponent } from './components/bottom-right/bottom-right.component';
66
import { SchedulerComponent } from "./components/scheduler/scheduler.component";
77
import { DynamicGridComponent } from './components/dynamic-grid/dynamic-grid.component';
8+
import { ChartsComponent } from './components/charts/charts.component';
89

910
@Component({
1011
selector: 'app-root',
1112
encapsulation: ViewEncapsulation.None,
1213
standalone: true,
13-
imports: [RouterOutlet, RouterLink, RouterLinkActive, BottomLeftComponent, BottomRightComponent, TransactionsDashboardComponent, SchedulerComponent, DynamicGridComponent],
14+
imports: [RouterOutlet, RouterLink, RouterLinkActive, BottomLeftComponent, BottomRightComponent, TransactionsDashboardComponent, SchedulerComponent, DynamicGridComponent, ChartsComponent],
1415
templateUrl: './app.component.html',
1516
styleUrl: './app.component.css'
1617
})

‎examples-standalone/kendoangular-landing-page/src/app/components/charts/charts.component.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.charts-container {
2+
display: flex;
3+
flex-direction: row;
4+
justify-content: center;
5+
align-items: stretch;
6+
gap: 16px;
7+
width: 80%;
8+
min-width: 800px;
9+
height: 400px;
10+
margin: 20px auto;
11+
max-width: 1500px;
12+
}
13+
14+
.chart-item {
15+
flex: 1;
16+
min-width: 0;
17+
display: flex;
18+
flex-direction: column;
19+
}
20+
21+
kendo-chart {
22+
height: 100%;
23+
width: 100%;
24+
}

‎examples-standalone/kendoangular-landing-page/src/app/components/charts/charts.component.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<div class="charts-container">
2+
<div class="chart-item">
3+
<kendo-chart>
4+
<kendo-chart-series>
5+
<kendo-chart-series-item type="donut" [data]="donutData" categoryField="kind" field="share">
6+
<kendo-chart-series-item-labels [content]="labelContent" color="#fff" background="none">
7+
</kendo-chart-series-item-labels>
8+
</kendo-chart-series-item>
9+
</kendo-chart-series>
10+
<kendo-chart-legend [visible]="false"></kendo-chart-legend>
11+
</kendo-chart>
12+
</div>
13+
14+
<div class="chart-item">
15+
<kendo-chart>
16+
<kendo-chart-title text="Units sold"></kendo-chart-title>
17+
<kendo-chart-category-axis>
18+
<kendo-chart-category-axis-item [categories]="lineChartCategories" [title]="{ text: 'Months' }">
19+
</kendo-chart-category-axis-item>
20+
</kendo-chart-category-axis>
21+
<kendo-chart-series>
22+
<kendo-chart-series-item type="line" [data]="lineChartData[0]"> </kendo-chart-series-item>
23+
<kendo-chart-series-item type="line" [data]="lineChartData[1]"> </kendo-chart-series-item>
24+
<kendo-chart-series-item type="line" [data]="lineChartData[2]"> </kendo-chart-series-item>
25+
</kendo-chart-series>
26+
</kendo-chart>
27+
</div>
28+
29+
<div class="chart-item">
30+
<kendo-chart>
31+
<kendo-chart-series>
32+
<kendo-chart-series-item type="heatmap" [data]="commitData">
33+
<kendo-chart-series-item-tooltip>
34+
<ng-template let-value="value">
35+
{{ value.value }} contributions on week {{ value.x }}, day
36+
{{ value.y }}
37+
</ng-template>
38+
</kendo-chart-series-item-tooltip>
39+
</kendo-chart-series-item>
40+
</kendo-chart-series>
41+
42+
<kendo-chart-x-axis>
43+
<kendo-chart-x-axis-item [visible]="false"> </kendo-chart-x-axis-item>
44+
</kendo-chart-x-axis>
45+
46+
<kendo-chart-y-axis>
47+
<kendo-chart-y-axis-item [visible]="false"> </kendo-chart-y-axis-item>
48+
</kendo-chart-y-axis>
49+
</kendo-chart>
50+
</div>
51+
</div>

‎examples-standalone/kendoangular-landing-page/src/app/components/charts/charts.component.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component } from "@angular/core";
2+
import { KENDO_CHARTS, SeriesLabelsContentArgs } from "@progress/kendo-angular-charts";
3+
import { commitData } from "../../data/commit-data";
4+
5+
@Component({
6+
selector: "app-charts",
7+
standalone: true,
8+
imports: [KENDO_CHARTS],
9+
templateUrl: "./charts.component.html",
10+
styleUrl: "./charts.component.css",
11+
})
12+
export class ChartsComponent {
13+
public donutData = [
14+
{ kind: "Hydroelectric", share: 0.175 },
15+
{ kind: "Nuclear", share: 0.238 },
16+
{ kind: "Coal", share: 0.118 },
17+
{ kind: "Solar", share: 0.052 },
18+
{ kind: "Wind", share: 0.225 },
19+
{ kind: "Other", share: 0.192 },
20+
];
21+
22+
public commitData = commitData();
23+
24+
public lineChartCategories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"];
25+
public lineChartData = [
26+
[123, 276, 310, 212, 240, 156, 98],
27+
[165, 210, 287, 144, 190, 167, 212],
28+
[56, 140, 195, 46, 123, 78, 95],
29+
];
30+
31+
public labelContent(e: SeriesLabelsContentArgs): string {
32+
return e.category;
33+
}
34+
35+
}

‎examples-standalone/kendoangular-landing-page/src/app/data/commit-data.ts

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
type CommitDataPoint = [
2+
number, // weekNumber
3+
number, // weekDay
4+
number // contributions
5+
];
6+
7+
export const commitData = (): CommitDataPoint[] => [
8+
[1, 0, 0],
9+
[1, 1, 4],
10+
[1, 2, 7],
11+
[1, 3, 14],
12+
[1, 4, 10],
13+
[1, 5, 8],
14+
[1, 6, 0],
15+
[2, 0, 0],
16+
[2, 1, 6],
17+
[2, 2, 9],
18+
[2, 3, 12],
19+
[2, 4, 12],
20+
[2, 5, 6],
21+
[2, 6, 0],
22+
[3, 0, 0],
23+
[3, 1, 5],
24+
[3, 2, 8],
25+
[3, 3, 11],
26+
[3, 4, 0],
27+
[3, 5, 5],
28+
[3, 6, 0],
29+
[4, 0, 0],
30+
[4, 1, 0],
31+
[4, 2, 0],
32+
[4, 3, 0],
33+
[4, 4, 0],
34+
[4, 5, 0],
35+
[4, 6, 0],
36+
[5, 0, 0],
37+
[5, 1, 0],
38+
[5, 2, 0],
39+
[5, 3, 0],
40+
[5, 4, 0],
41+
[5, 5, 0],
42+
[5, 6, 0],
43+
[6, 0, 0],
44+
[6, 1, 4],
45+
[6, 2, 7],
46+
[6, 3, 14],
47+
[6, 4, 10],
48+
[6, 5, 8],
49+
[6, 6, 0],
50+
[7, 0, 0],
51+
[7, 1, 6],
52+
[7, 2, 9],
53+
[7, 3, 2],
54+
[7, 4, 4],
55+
[7, 5, 6],
56+
[7, 6, 0],
57+
[8, 0, 0],
58+
[8, 1, 4],
59+
[8, 2, 7],
60+
[8, 3, 14],
61+
[8, 4, 10],
62+
[8, 5, 8],
63+
[8, 6, 0],
64+
[9, 0, 0],
65+
[9, 1, 4],
66+
[9, 2, 7],
67+
[9, 3, 4],
68+
[9, 4, 1],
69+
[9, 5, 8],
70+
[9, 6, 0],
71+
[10, 0, 0],
72+
[10, 1, 6],
73+
[10, 2, 9],
74+
[10, 3, 12],
75+
[10, 4, 12],
76+
[10, 5, 6],
77+
[10, 6, 0],
78+
[11, 0, 0],
79+
[11, 1, 4],
80+
[11, 2, 7],
81+
[11, 3, 10],
82+
[11, 4, 10],
83+
[11, 5, 8],
84+
[11, 6, 0],
85+
[12, 0, 0],
86+
[12, 1, 4],
87+
[12, 2, 7],
88+
[12, 3, 8],
89+
[12, 4, 10],
90+
[12, 5, 4],
91+
[12, 6, 0],
92+
[13, 0, 0],
93+
[13, 1, 4],
94+
[13, 2, 7],
95+
[13, 3, 11],
96+
[13, 4, 0],
97+
[13, 5, 8],
98+
[13, 6, 0],
99+
[14, 0, 0],
100+
[14, 1, 6],
101+
[14, 2, 9],
102+
[14, 3, 6],
103+
[14, 4, 8],
104+
[14, 5, 6],
105+
[14, 6, 0],
106+
[15, 0, 0],
107+
[15, 1, 4],
108+
[15, 2, 7],
109+
[15, 3, 7],
110+
[15, 4, 10],
111+
[15, 5, 8],
112+
[15, 6, 0],
113+
];
114+

0 commit comments

Comments
 (0)