Skip to content

Commit 3745f76

Browse files
VenkateshwaranSaravanakumarVenkateshwaranSaravanakumar
authored
Add files via upload
1 parent c500a83 commit 3745f76

16 files changed

+343
-2
lines changed

‎README.md‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,27 @@
1-
# getting-started-with-the-angular-sparkline-chart-component
2-
A quick-start project that helps you to integrate the Angular Sparkline Chart component in an Angular application. This project contains code to change the sparkline chart type and enable few of its features like data label, markers, and tooltips.
1+
# AngularSparklinechartGettingStarted
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.7.
4+
5+
## Development server
6+
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8+
9+
## Code scaffolding
10+
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24+
25+
## Further help
26+
27+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

‎angular.json‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-sparklinechart-getting-started": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:application",
15+
"options": {
16+
"outputPath": "dist/angular-sparklinechart-getting-started",
17+
"index": "src/index.html",
18+
"browser": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
{
25+
"glob": "**/*",
26+
"input": "public"
27+
}
28+
],
29+
"styles": [
30+
"src/styles.css"
31+
],
32+
"scripts": []
33+
},
34+
"configurations": {
35+
"production": {
36+
"budgets": [
37+
{
38+
"type": "initial",
39+
"maximumWarning": "500kB",
40+
"maximumError": "1MB"
41+
},
42+
{
43+
"type": "anyComponentStyle",
44+
"maximumWarning": "2kB",
45+
"maximumError": "4kB"
46+
}
47+
],
48+
"outputHashing": "all"
49+
},
50+
"development": {
51+
"optimization": false,
52+
"extractLicenses": false,
53+
"sourceMap": true
54+
}
55+
},
56+
"defaultConfiguration": "production"
57+
},
58+
"serve": {
59+
"builder": "@angular-devkit/build-angular:dev-server",
60+
"configurations": {
61+
"production": {
62+
"buildTarget": "angular-sparklinechart-getting-started:build:production"
63+
},
64+
"development": {
65+
"buildTarget": "angular-sparklinechart-getting-started:build:development"
66+
}
67+
},
68+
"defaultConfiguration": "development"
69+
},
70+
"extract-i18n": {
71+
"builder": "@angular-devkit/build-angular:extract-i18n"
72+
},
73+
"test": {
74+
"builder": "@angular-devkit/build-angular:karma",
75+
"options": {
76+
"polyfills": [
77+
"zone.js",
78+
"zone.js/testing"
79+
],
80+
"tsConfig": "tsconfig.spec.json",
81+
"assets": [
82+
{
83+
"glob": "**/*",
84+
"input": "public"
85+
}
86+
],
87+
"styles": [
88+
"src/styles.css"
89+
],
90+
"scripts": []
91+
}
92+
}
93+
}
94+
}
95+
},
96+
"cli": {
97+
"analytics": false
98+
}
99+
}

‎package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "angular-sparklinechart-getting-started",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^18.0.0",
14+
"@angular/common": "^18.0.0",
15+
"@angular/compiler": "^18.0.0",
16+
"@angular/core": "^18.0.0",
17+
"@angular/forms": "^18.0.0",
18+
"@angular/platform-browser": "^18.0.0",
19+
"@angular/platform-browser-dynamic": "^18.0.0",
20+
"@angular/router": "^18.0.0",
21+
"@syncfusion/ej2-angular-charts": "^26.2.10",
22+
"rxjs": "~7.8.0",
23+
"tslib": "^2.3.0",
24+
"zone.js": "~0.14.3"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "^18.0.7",
28+
"@angular/cli": "^18.0.7",
29+
"@angular/compiler-cli": "^18.0.0",
30+
"@types/jasmine": "~5.1.0",
31+
"jasmine-core": "~5.1.0",
32+
"karma": "~6.4.0",
33+
"karma-chrome-launcher": "~3.2.0",
34+
"karma-coverage": "~2.2.0",
35+
"karma-jasmine": "~5.1.0",
36+
"karma-jasmine-html-reporter": "~2.1.0",
37+
"typescript": "~5.4.2"
38+
}
39+
}

‎public/favicon.ico‎

14.7 KB
Binary file not shown.

‎src/app/app.component.css‎

Whitespace-only changes.

‎src/app/app.component.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="container">
2+
<ejs-sparkline [dataSource]="dataSource"
3+
xName='month' yName='value' valueType='Category'
4+
height='150px' width='80px' type='Line'
5+
[markerSettings]='markerSettings'
6+
[dataLabelSettings]='dataLabelSettings'
7+
[padding]='padding' [tooltipSettings]='tooltipSettings' >
8+
</ejs-sparkline>
9+
</div>

‎src/app/app.component.spec.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app.component';
3+
4+
describe('AppComponent', () => {
5+
beforeEach(async () => {
6+
await TestBed.configureTestingModule({
7+
imports: [AppComponent],
8+
}).compileComponents();
9+
});
10+
11+
it('should create the app', () => {
12+
const fixture = TestBed.createComponent(AppComponent);
13+
const app = fixture.componentInstance;
14+
expect(app).toBeTruthy();
15+
});
16+
17+
it(`should have the 'angular-sparklinechart-getting-started' title`, () => {
18+
const fixture = TestBed.createComponent(AppComponent);
19+
const app = fixture.componentInstance;
20+
expect(app.title).toEqual('angular-sparklinechart-getting-started');
21+
});
22+
23+
it('should render title', () => {
24+
const fixture = TestBed.createComponent(AppComponent);
25+
fixture.detectChanges();
26+
const compiled = fixture.nativeElement as HTMLElement;
27+
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-sparklinechart-getting-started');
28+
});
29+
});

‎src/app/app.component.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Component } from '@angular/core';
2+
import { RouterOutlet } from '@angular/router';
3+
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts'
4+
5+
@Component({
6+
selector: 'app-root',
7+
standalone: true,
8+
imports: [RouterOutlet, SparklineModule],
9+
providers: [SparklineTooltipService],
10+
templateUrl: './app.component.html',
11+
styleUrl: './app.component.css'
12+
})
13+
export class AppComponent {
14+
public dataSource = [
15+
{ month: 'January', value: 34 },
16+
{ month: 'February', value: 36 },
17+
{ month: 'March', value: 32 },
18+
{ month: 'April', value: 35 },
19+
{ month: 'May', value: 40 },
20+
{ month: 'June', value: 38 },
21+
{ month: 'July', value: 33 },
22+
{ month: 'August', value: 37 },
23+
{ month: 'September', value: 34 },
24+
{ month: 'October', value: 31 },
25+
{ month: 'November', value: 30 },
26+
{ month: 'December', value: 28 }
27+
];
28+
29+
public markerSettings: object = {
30+
visible: ['All']
31+
};
32+
33+
public dataLabelSettings: object = {
34+
visible: ['Start ', 'End']
35+
};
36+
37+
public padding: object = { left: 10, right: 10 };
38+
39+
public tooltipSettings: object = {
40+
visible: true,
41+
};
42+
}

‎src/app/app.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
4+
import { routes } from './app.routes';
5+
6+
export const appConfig: ApplicationConfig = {
7+
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
8+
};

‎src/app/app.routes.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const routes: Routes = [];

0 commit comments

Comments
 (0)