Skip to content

Commit 36e3b60

Browse files
HUSSAR-mtrelaHUSSAR-mtrela
authored
add theme sample (#1188)
* add theme sample * add radial chart anim * update theme * add grid * add light theme * add theme selector * Update light-theme.css * fix themes * Update index.ts * Revert "Update index.ts" This reverts commit 807a5bb. * module: esnext * Update index.html * fix themes * add TODOs * add card layout * layout elements * add Sparklines * cleanup * export css props for WC components * moved exported css props * fix data * Update index.html * style group area of data grid * fix theme * fix theme * fix theme sample * regen readme * moved theme sample * add light theme sample * fix dark theme * Update Transformer.ts * update browser * sync packages * sort packages
1 parent d6c7871 commit 36e3b60

105 files changed

Lines changed: 10681 additions & 60 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎browser/public/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@
184184
<a class="nav-link" href="#" data-nav="/samples/charts/data-chart/polar-spline-chart">─<span>Polar Spline Chart</span></a>
185185
<a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-area-chart">─<span>Radial Area Chart</span></a>
186186
<a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-area-chart-styling">─<span>Radial Area Chart Styling</span></a>
187+
<a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-chart-animation">─<span>Radial Chart Animation</span></a>
187188
<a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-chart-types">─<span>Radial Chart Types</span></a>
188189
<a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-column-chart">─<span>Radial Column Chart</span></a>
189190
<a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-column-chart-selection">─<span>Radial Column Chart Selection</span></a>
@@ -376,6 +377,13 @@
376377
<a class="nav-link" href="#" data-nav="/samples/excel/spreadsheet/sort-dialog">─<span>Sort Dialog</span></a>
377378
</div>
378379

380+
<div class="nav-group">GALLERY</div>
381+
<label id="nav-themes" class="nav-component">Themes</label>
382+
<div id="nav-themes-list" class="nav-list" state="collapsed">
383+
<a class="nav-link" href="#" data-nav="/samples/gallery/themes/dark-theme">─<span>Dark Theme</span></a>
384+
<a class="nav-link" href="#" data-nav="/samples/gallery/themes/light-theme">─<span>Light Theme</span></a>
385+
</div>
386+
379387
<div class="nav-group">GAUGES</div>
380388
<label id="nav-bullet-graph" class="nav-component">Bullet Graph</label>
381389
<div id="nav-bullet-graph-list" class="nav-list" state="collapsed">

‎browser/src/router.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { RouterCharts } from "./samples/charts/router";
33
import { RouterEditors } from "./samples/editors/router";
44
import { RouterExcel } from "./samples/excel/router";
5+
import { RouterGallery } from "./samples/gallery/router";
56
import { RouterGauges } from "./samples/gauges/router";
67
import { RouterGrids } from "./samples/grids/router";
78
import { RouterInputs } from "./samples/inputs/router";
@@ -105,6 +106,9 @@ export class Router {
105106
else if (route.indexOf("/excel/") >= 0) {
106107
this.displaySample(await RouterExcel.get(route));
107108
}
109+
else if (route.indexOf("/gallery/") >= 0) {
110+
this.displaySample(await RouterGallery.get(route));
111+
}
108112
else if (route.indexOf("/gauges/") >= 0) {
109113
this.displaySample(await RouterGauges.get(route));
110114
}

‎browser/tasks/Transformer.ts‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -12,45 +12,45 @@ let igConfig = require('./gulp-config.js');
1212

1313
// this class provides information about a sample that is implemented in /samples folder
1414
class SampleInfo {
15-
public ComponentGroup: string; // maps
16-
public ComponentFolder: string; // geo-map
17-
public ComponentName: string; // Geo Map
18-
public ComponentID: string; // GeoMap
19-
20-
public HtmlFilePath: string; // /samples/maps/geo-map/binding-csv-points/index.html
21-
public HtmlFileCode: string; // html code of above file
22-
public HtmlFileRoot: string; // root code of above file
23-
24-
// public SampleDirOnDisk: string; // C:\repo\igniteui-web-comp-examples\samples\maps\geo-map\binding-csv-points\
25-
public SampleFolderPath: string; // /samples/maps/geo-map/binding-csv-points/
26-
public SampleFilePath: string; // /samples/maps/geo-map/binding-csv-points/src/MapBindingDataCSV.ts
27-
public SampleRouteOld: string; // /maps/geo-map-binding-csv-points/
28-
public SampleRouteNew: string; // /maps/geo-map/binding-csv-points/
29-
public SampleFolderName: string; // binding-csv-points
30-
public SampleFileName: string; // MapBindingDataCSV.ts
31-
public SampleImportName: string; // MapBindingDataCSV
32-
public SampleImportPath: string; // ./geo-map/binding-csv-points/MapBindingDataCSV
33-
public SampleDisplayName: string; // Map Binding Data CSV
34-
public SampleFileSourcePath: string; // /src/MapBindingDataCSV.ts
35-
public SampleFileSourceCode: string; // source code from /src/MapBindingDataCSV.ts file
36-
public SampleFileBrowserCode: string; // source code for a sample in browser
37-
public SampleFileSourceClass: string; // MapBindingDataCSV
38-
public SampleFileOriginalClass: string; // MapBindingDataCSV
39-
40-
public SampleImportLines: string[];
41-
public SampleImportPackages: string[];
42-
public SampleImportFiles: string[];
43-
public SampleReadMe: string; // content of ReadMe.md file generated for /samples/maps/geo-map/binding-csv-points/
44-
public SampleFilePaths: string[]; // relative paths to files in sample folder: /samples/maps/geo-map/binding-csv-points/
45-
public SampleFileNames: string[]; // names of files in sample folder: /samples/maps/geo-map/binding-csv-points/
46-
47-
public DocsUrl: string // https://infragistics.com/webcomponentssite/components/geo-map.html
48-
49-
public SandboxUrlView: string; // https://codesandbox.io/embed/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
50-
public SandboxUrlEdit: string; // https://codesandbox.io/s/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
51-
public SandboxUrlShort: string; // https://codesandbox.io/s/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
52-
53-
public PackageFileContent: PackageJson;
15+
public ComponentGroup: string | undefined; // maps
16+
public ComponentFolder: string | undefined; // geo-map
17+
public ComponentName: string | undefined; // Geo Map
18+
public ComponentID: string | undefined; // GeoMap
19+
20+
public HtmlFilePath: string | undefined; // /samples/maps/geo-map/binding-csv-points/index.html
21+
public HtmlFileCode: string | undefined; // html code of above file
22+
public HtmlFileRoot: string | undefined; // root code of above file
23+
24+
// public SampleDirOnDisk: string | undefined; // C:\repo\igniteui-web-comp-examples\samples\maps\geo-map\binding-csv-points\
25+
public SampleFolderPath: string | undefined; // /samples/maps/geo-map/binding-csv-points/
26+
public SampleFilePath: string | undefined; // /samples/maps/geo-map/binding-csv-points/src/MapBindingDataCSV.ts
27+
public SampleRouteOld: string | undefined; // /maps/geo-map-binding-csv-points/
28+
public SampleRouteNew: string | undefined; // /maps/geo-map/binding-csv-points/
29+
public SampleFolderName: string | undefined; // binding-csv-points
30+
public SampleFileName: string | undefined; // MapBindingDataCSV.ts
31+
public SampleImportName: string | undefined; // MapBindingDataCSV
32+
public SampleImportPath: string | undefined; // ./geo-map/binding-csv-points/MapBindingDataCSV
33+
public SampleDisplayName: string | undefined; // Map Binding Data CSV
34+
public SampleFileSourcePath: string | undefined; // /src/MapBindingDataCSV.ts
35+
public SampleFileSourceCode: string | undefined; // source code from /src/MapBindingDataCSV.ts file
36+
public SampleFileBrowserCode: string | undefined; // source code for a sample in browser
37+
public SampleFileSourceClass: string | undefined; // MapBindingDataCSV
38+
public SampleFileOriginalClass: string | undefined; // MapBindingDataCSV
39+
40+
public SampleImportLines: string[] | undefined;
41+
public SampleImportPackages: string[] | undefined;
42+
public SampleImportFiles: string[] | undefined;
43+
public SampleReadMe: string | undefined; // content of ReadMe.md file generated for /samples/maps/geo-map/binding-csv-points/
44+
public SampleFilePaths: string[] | undefined; // relative paths to files in sample folder: /samples/maps/geo-map/binding-csv-points/
45+
public SampleFileNames: string[] | undefined; // names of files in sample folder: /samples/maps/geo-map/binding-csv-points/
46+
47+
public DocsUrl: string | undefined; // https://infragistics.com/webcomponentssite/components/geo-map.html
48+
49+
public SandboxUrlView: string | undefined; // https://codesandbox.io/embed/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
50+
public SandboxUrlEdit: string | undefined; // https://codesandbox.io/s/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
51+
public SandboxUrlShort: string | undefined; // https://codesandbox.io/s/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
52+
53+
public PackageFileContent: PackageJson | undefined;
5454
public PackageDependencies: PackageDependency[];
5555

5656
constructor() {
@@ -62,16 +62,16 @@ class SampleInfo {
6262
}
6363

6464
public isUsingFileName(name: string): boolean {
65-
return this.SampleFileNames.includes(name);
65+
return this.SampleFileNames ? this.SampleFileNames.includes(name) : false;
6666
}
6767
}
6868

6969
class SampleSourceBlock {
70-
public ImportLines: string[];
71-
public ImportFiles: string[];
72-
public ImportPackages: string[];
73-
public ImportCSS: string[];
74-
public OtherLines: string[];
70+
public ImportLines: string[] | undefined;
71+
public ImportFiles: string[] | undefined;
72+
public ImportPackages: string[] | undefined;
73+
public ImportCSS: string[] | undefined;
74+
public OtherLines: string[] | undefined;
7575
}
7676

7777
class Transformer {
@@ -98,7 +98,7 @@ class Transformer {
9898
}
9999

100100
public static sort(samples: SampleInfo[]): void {
101-
samples.sort((a, b) => a.SampleFolderPath > b.SampleFolderPath ? 1 : -1);
101+
samples.sort((a, b) => (a.SampleFolderPath ?? "") > (b.SampleFolderPath ?? "") ? 1 : -1);
102102
}
103103

104104
public static printNames(samples: SampleInfo[]): void {
@@ -921,10 +921,10 @@ class Transformer {
921921

922922
class SampleGroup {
923923

924-
public Name: string;
925-
public RouterClass: string;
926-
public RouterFile: string;
927-
public RouterImport: string;
924+
public Name: string | undefined;
925+
public RouterClass: string | undefined;
926+
public RouterFile: string | undefined;
927+
public RouterImport: string | undefined;
928928

929929
public Components: SampleComponent[];
930930

@@ -935,8 +935,8 @@ class SampleGroup {
935935

936936
class SampleComponent {
937937

938-
public Name: string;
939-
public Group: string;
938+
public Name: string | undefined;
939+
public Group: string | undefined;
940940
public Samples: SampleInfo[];
941941

942942
constructor() {
@@ -998,8 +998,8 @@ class PackageJson {
998998
}
999999

10001000
class PackageDependency {
1001-
public name: string;
1002-
public version: string;
1001+
public name: string | undefined;
1002+
public version: string | undefined;;
10031003

10041004
public samples?: SampleInfo[];
10051005

‎browser/tasks/gulp-samples.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ var sampleSources = [
5050

5151
// including all samples for all components:
5252
igConfig.SamplesCopyPath + '/**/package.json',
53+
54+
// igConfig.SamplesCopyPath + '/maps/**/package.json',
55+
// igConfig.SamplesCopyPath + '/gallery/**/package.json',
5356

5457
// uncomment to exclude samples for specific components:
5558
// '!' + igConfig.SamplesCopyPath + '/charts/category-chart/**/package.json',
@@ -61,6 +64,7 @@ var sampleSources = [
6164
// '!' + igConfig.SamplesCopyPath + '/charts/tree-map/**/package.json',
6265
// '!' + igConfig.SamplesCopyPath + '/charts/zoomslider/**/package.json',
6366
// '!' + igConfig.SamplesCopyPath + '/maps/**/package.json',
67+
// '!' + igConfig.SamplesCopyPath + '/gallery/**/package.json',
6468
// '!' + igConfig.SamplesCopyPath + '/excel/excel-library/**/package.json',
6569
// '!' + igConfig.SamplesCopyPath + '/excel/spreadsheet/**/package.json',
6670
// '!' + igConfig.SamplesCopyPath + '/gauges/bullet-graph/**/package.json',

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
"dompurify": "^3.2.6",
4444
"file-saver": "^2.0.2",
4545
"igniteui-dockmanager": "^2.0.1",
46-
"igniteui-i18n-resources": "^1.0.2",
4746
"igniteui-grid-lite": "^0.6.0",
47+
"igniteui-i18n-resources": "^1.0.2",
4848
"igniteui-theming": "^25.0.0",
4949
"igniteui-webcomponents": "^7.0.0",
5050
"igniteui-webcomponents-charts": "7.0.0",

‎samples/charts/data-chart/radial-chart-animation/.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 250,
3+
"tabWidth": 4,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎samples/charts/data-chart/radial-chart-animation/ReadMe.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
3+
4+
This folder contains implementation of Web Components application with example of Radial Chart Animation feature using [Data Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
10+
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
11+
</a>
12+
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
13+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/charts/data-chart/radial-chart-animation" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/charts/data-chart/radial-chart-animation?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
19+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
27+
28+
## Instructions
29+
30+
To set up this project locally, execute these commands:
31+
32+
```
33+
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
34+
git checkout master
35+
cd ./igniteui-wc-examples
36+
cd ./samples/charts/data-chart/radial-chart-animation
37+
```
38+
39+
open above folder in VS Code or type:
40+
```
41+
code .
42+
```
43+
44+
In terminal window, run:
45+
46+
```
47+
npm install
48+
npm run start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).

‎samples/charts/data-chart/radial-chart-animation/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Sample | Ignite UI | Web Components | infragistics</title>
5+
<meta charset="UTF-8" />
6+
7+
<link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png" >
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
11+
<link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />
12+
<link rel="stylesheet" href="/src/index.css" type="text/css" />
13+
14+
</head>
15+
16+
<body>
17+
<div id="root">
18+
19+
<div class="container sample">
20+
21+
<div class="legend-title">
22+
<!-- Solar Days based on latitude on Earth -->
23+
</div>
24+
25+
<div class="legend">
26+
<igc-legend
27+
name="legend"
28+
id="legend"
29+
orientation="Horizontal">
30+
</igc-legend>
31+
</div>
32+
33+
<div class="container fill">
34+
<igc-data-chart
35+
name="chart"
36+
id="chart"
37+
is-horizontal-zoom-enabled="false"
38+
is-vertical-zoom-enabled="false">
39+
<igc-category-angle-axis
40+
name="angleAxis"
41+
id="angleAxis" gap="0.4" interval="1"
42+
label="latitude">
43+
</igc-category-angle-axis>
44+
45+
<igc-numeric-radius-axis
46+
name="radiusAxis"
47+
id="radiusAxis"
48+
inner-radius-extent-scale="0.4"
49+
interval="6"
50+
minimum-value="0"
51+
maximum-value="24">
52+
</igc-numeric-radius-axis>
53+
54+
<igc-radial-column-series
55+
name="radialSeries"
56+
id="radialSeries"
57+
value-member-path="dayLength"
58+
show-default-tooltip="false"
59+
area-fill-opacity="0.8"
60+
thickness="3"
61+
title="Day Length">
62+
</igc-radial-column-series>
63+
64+
<igc-data-tool-tip-layer
65+
name="dataTooltip"
66+
id="dataTooltip">
67+
</igc-data-tool-tip-layer>
68+
</igc-data-chart>
69+
</div>
70+
</div>
71+
72+
</div>
73+
74+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
75+
<% if (false) { %><script src="src/index.ts"></script><% } %>
76+
</body>
77+
</html>

0 commit comments

Comments
 (0)