Skip to content

Commit ae5c8eb

Browse files
author
tfsbuild
committed
Adding changes from build igniteui-xplat-examples-output+PRs_2025.1.29.1
1 parent 9f01fe8 commit ae5c8eb

File tree

10 files changed

+540
-0
lines changed

10 files changed

+540
-0
lines changed

‎samples/charts/data-chart/selection-matcher/.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/selection-matcher/index.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
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://static.infragistics.com/xplatform/images/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://static.infragistics.com/xplatform/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+
Renewable Energy Consumption
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+
selection-mode="SelectionColorFill"
40+
selection-behavior="Auto"
41+
selection-brush="orange">
42+
<igc-category-y-axis
43+
name="yAxis"
44+
id="yAxis"
45+
label="location"
46+
is-inverted="true">
47+
</igc-category-y-axis>
48+
<igc-numeric-x-axis
49+
name="xAxis"
50+
id="xAxis"
51+
minimum-value="0"
52+
title="TWh">
53+
</igc-numeric-x-axis>
54+
<igc-stacked-100-bar-series
55+
name="stacked100BarSeries"
56+
id="stacked100BarSeries"
57+
show-default-tooltip="true"
58+
area-fill-opacity="1">
59+
<igc-stacked-fragment-series
60+
name="s1"
61+
id="s1"
62+
value-member-path="hydro"
63+
title="Hydro">
64+
</igc-stacked-fragment-series>
65+
<igc-stacked-fragment-series
66+
name="s2"
67+
id="s2"
68+
value-member-path="wind"
69+
title="Wind">
70+
</igc-stacked-fragment-series>
71+
<igc-stacked-fragment-series
72+
name="s3"
73+
id="s3"
74+
value-member-path="solar"
75+
title="Solar">
76+
</igc-stacked-fragment-series>
77+
<igc-stacked-fragment-series
78+
name="s4"
79+
id="s4"
80+
value-member-path="other"
81+
title="Other">
82+
</igc-stacked-fragment-series>
83+
</igc-stacked-100-bar-series>
84+
<igc-data-tool-tip-layer
85+
name="dataToolTipLayer"
86+
id="dataToolTipLayer">
87+
</igc-data-tool-tip-layer>
88+
</igc-data-chart>
89+
</div>
90+
</div>
91+
92+
</div>
93+
94+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
95+
<% if (false) { %><script src="src/index.ts"></script><% } %>
96+
</body>
97+
</html>

‎samples/charts/data-chart/selection-matcher/package.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "example-ignite-ui-web-components",
3+
"description": "This project provides example of using Ignite UI for Web Components",
4+
"author": "Infragistics",
5+
"version": "1.0.0",
6+
"license": "",
7+
"private": true,
8+
"homepage": ".",
9+
"main": "src/index.ts",
10+
"scripts": {
11+
"build": "npm run build:prod",
12+
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
13+
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
14+
"serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
15+
"serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
16+
"start": "npm run serve:dev",
17+
"build:legacy": "npm run build:prod:legacy",
18+
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
19+
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
20+
"serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
21+
"serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
22+
"start:legacy": "npm run serve:dev:legacy"
23+
},
24+
"dependencies": {
25+
"babel-runtime": "^6.26.0",
26+
"igniteui-webcomponents-charts": "5.2.0",
27+
"igniteui-webcomponents-core": "5.2.0",
28+
"lit-html": "^3.2.0",
29+
"tslib": "^2.0.0"
30+
},
31+
"devDependencies": {
32+
"@babel/cli": "^7.8.3",
33+
"@babel/core": "^7.8.3",
34+
"@babel/plugin-proposal-class-properties": "^7.8.3",
35+
"@babel/plugin-transform-runtime": "^7.10.0",
36+
"@babel/preset-env": "^7.8.3",
37+
"@babel/preset-typescript": "^7.8.3",
38+
"@types/source-map": "^0.5.7",
39+
"babel-loader": "^8.1.0",
40+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
41+
"css-loader": "^1.0.0",
42+
"csv-loader": "^3.0.2",
43+
"file-loader": "^4.2.0",
44+
"fork-ts-checker-webpack-plugin": "^4.1.5",
45+
"html-webpack-plugin": "^4.3.0",
46+
"parcel-bundler": "^1.6.1",
47+
"source-map": "^0.7.3",
48+
"style-loader": "^0.22.1",
49+
"tsconfig-paths-webpack-plugin": "^4.0.0",
50+
"typescript": "^4.4.4",
51+
"webpack": "^5.96.1",
52+
"webpack-cli": "^4.10.0",
53+
"webpack-dev-server": "^4.11.1",
54+
"worker-loader": "^3.0.8",
55+
"xml-loader": "^1.2.1"
56+
}
57+
}

‎samples/charts/data-chart/selection-matcher/sandbox.config.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser",
5+
"template": "parcel"
6+
}

‎samples/charts/data-chart/selection-matcher/src/EnergyRenewableConsumption.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
export class EnergyRenewableConsumptionItem {
2+
public constructor(init: Partial<EnergyRenewableConsumptionItem>) {
3+
Object.assign(this, init);
4+
}
5+
6+
public location: string;
7+
public year: number;
8+
public hydro: number;
9+
public solar: number;
10+
public wind: number;
11+
public other: number;
12+
13+
}
14+
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
15+
public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
16+
if (Array.isArray(items)) {
17+
super(...items);
18+
} else {
19+
const newItems = [
20+
new EnergyRenewableConsumptionItem(
21+
{
22+
location: `China`,
23+
year: 2019,
24+
hydro: 1269.5,
25+
solar: 223,
26+
wind: 405.2,
27+
other: 102.8
28+
}),
29+
new EnergyRenewableConsumptionItem(
30+
{
31+
location: `Europe`,
32+
year: 2019,
33+
hydro: 632.54,
34+
solar: 154,
35+
wind: 461.3,
36+
other: 220.3
37+
}),
38+
new EnergyRenewableConsumptionItem(
39+
{
40+
location: `USA`,
41+
year: 2019,
42+
hydro: 271.16,
43+
solar: 108,
44+
wind: 303.4,
45+
other: 78.34
46+
}),
47+
new EnergyRenewableConsumptionItem(
48+
{
49+
location: `Brazil`,
50+
year: 2019,
51+
hydro: 399.3,
52+
solar: 5.5,
53+
wind: 55.83,
54+
other: 56.25
55+
}),
56+
new EnergyRenewableConsumptionItem(
57+
{
58+
location: `Canada`,
59+
year: 2019,
60+
hydro: 381.98,
61+
solar: 4.3,
62+
wind: 34.17,
63+
other: 10.81
64+
}),
65+
];
66+
super(...newItems.slice(0));
67+
}
68+
}
69+
}

‎samples/charts/data-chart/selection-matcher/src/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/* shared styles are loaded from: */
2+
/* https://static.infragistics.com/xplatform/css/samples */
3+

‎samples/charts/data-chart/selection-matcher/src/index.ts‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
2+
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcStacked100BarSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
3+
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
4+
import { IgcCategoryChartComponent, IgcChartSelection, IgcSeriesMatcher } from 'igniteui-webcomponents-charts';
5+
6+
import { ModuleManager } from 'igniteui-webcomponents-core';
7+
8+
import "./index.css";
9+
10+
ModuleManager.register(
11+
IgcLegendModule,
12+
IgcDataChartCoreModule,
13+
IgcDataChartCategoryModule,
14+
IgcDataChartCategoryCoreModule,
15+
IgcDataChartInteractivityModule,
16+
IgcDataChartAnnotationModule,
17+
IgcDataChartStackedModule,
18+
IgcStackedFragmentSeriesModule
19+
);
20+
21+
export class Sample {
22+
23+
private legend: IgcLegendComponent
24+
private chart: IgcDataChartComponent
25+
private yAxis: IgcCategoryYAxisComponent
26+
private xAxis: IgcNumericXAxisComponent
27+
private stacked100BarSeries: IgcStacked100BarSeriesComponent
28+
private s1: IgcStackedFragmentSeriesComponent
29+
private s2: IgcStackedFragmentSeriesComponent
30+
private s3: IgcStackedFragmentSeriesComponent
31+
private s4: IgcStackedFragmentSeriesComponent
32+
private dataToolTipLayer: IgcDataToolTipLayerComponent
33+
private _bind: () => void;
34+
35+
constructor() {
36+
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
37+
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
38+
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcCategoryYAxisComponent;
39+
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
40+
var stacked100BarSeries = this.stacked100BarSeries = document.getElementById('stacked100BarSeries') as IgcStacked100BarSeriesComponent;
41+
var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent;
42+
var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
43+
var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
44+
var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
45+
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
46+
47+
this._bind = () => {
48+
chart.legend = this.legend;
49+
yAxis.dataSource = this.energyRenewableConsumption;
50+
stacked100BarSeries.dataSource = this.energyRenewableConsumption;
51+
stacked100BarSeries.xAxis = this.xAxis;
52+
stacked100BarSeries.yAxis = this.yAxis;
53+
}
54+
this._bind();
55+
56+
this.selectionMatcherOnViewInit();
57+
}
58+
59+
private _energyRenewableConsumption: EnergyRenewableConsumption = null;
60+
public get energyRenewableConsumption(): EnergyRenewableConsumption {
61+
if (this._energyRenewableConsumption == null)
62+
{
63+
this._energyRenewableConsumption = new EnergyRenewableConsumption();
64+
}
65+
return this._energyRenewableConsumption;
66+
}
67+
68+
69+
private _timer: ReturnType<typeof setInterval>;
70+
71+
public selectionMatcherOnViewInit(): void {
72+
73+
var chart = this.chart;
74+
75+
this._timer = setInterval(() => {
76+
var data = this.energyRenewableConsumption;
77+
let matcher: IgcSeriesMatcher = new IgcSeriesMatcher();
78+
79+
let selection: IgcChartSelection = new IgcChartSelection();
80+
selection.item = data[1];
81+
matcher.memberPath = "hydro";
82+
matcher.memberPathType = "ValueMemberPath";
83+
selection.matcher = matcher;
84+
chart.selectedSeriesItems.add(selection);
85+
86+
let selection2: IgcChartSelection = new IgcChartSelection();
87+
selection2.item = data[2];
88+
matcher.memberPath = "wind";
89+
matcher.memberPathType = "ValueMemberPath";
90+
selection2.matcher = matcher;
91+
92+
chart.selectedSeriesItems.add(selection2);
93+
94+
}, 100);
95+
}
96+
97+
}
98+
99+
new Sample();

‎samples/charts/data-chart/selection-matcher/tsconfig.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"compilerOptions": {
3+
"noImplicitReturns": true,
4+
"esModuleInterop": true,
5+
"resolveJsonModule": true,
6+
"noImplicitAny": true,
7+
"declarationDir": "dist/types",
8+
"moduleResolution": "node",
9+
"declaration": true,
10+
"target": "es2015",
11+
"module": "es2015",
12+
"strict": true,
13+
"strictNullChecks": false,
14+
"baseUrl": ".",
15+
"paths": {
16+
"igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
17+
"igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
18+
"igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
19+
"igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
20+
"igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
21+
"igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
22+
"igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
23+
"igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
24+
"igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
25+
"igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
26+
"igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
27+
"igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
28+
"igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
29+
"igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
30+
"igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ],
31+
"igniteui-webcomponents-dashboards": [ "node_modules/igniteui-webcomponents-dashboards", "node_modules/@infragistics/igniteui-webcomponents-dashboards" ]
32+
}
33+
},
34+
"include": [
35+
"src/**/*"
36+
],
37+
"exclude": [
38+
"node_modules",
39+
"dist"
40+
]
41+
}

0 commit comments

Comments
 (0)