Skip to content

Commit 9941aed

Browse files
bmarkovbmarkov
authored
Merge pull request #23 from IvanPeevski/master
demo fixes
2 parents 996385e + 139a91f commit 9941aed

File tree

104 files changed

+3824
-1737
lines changed

Some content is hidden

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

104 files changed

+3824
-1737
lines changed

‎demos/3d-chart/background-styling/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"@angular/platform-browser-dynamic": "^15.0.0",
1313
"@angular/router": "^15.0.0",
1414
"@smart-webcomponents-angular/threedchart": "14.7.3",
15-
"@smart-webcomponents-angular/checkbox": "^14.2.0",
15+
"@smart-webcomponents-angular/radiobutton": "^14.2.0",
1616
"rxjs": "~7.5.0",
1717
"tslib": "^2.3.0",
1818
"core-js": "^3.27.2",

‎demos/3d-chart/color-schemes/src/app/app.component.css

+35
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,39 @@ smart-3d-chart{
22
width:80%;
33
max-width: 1000px;
44
height:600px;
5+
}
6+
7+
body[theme='dark']{
8+
background-color: #242424;
9+
}
10+
11+
smart-drop-down-list .smart-input div.circle, .circle {
12+
width: 25px;
13+
height: 25px;
14+
border-radius: 50%;
15+
position: static;
16+
z-index: 1;
17+
float: none;
18+
}
19+
20+
.circle {
21+
float: left;
22+
margin-right: 5px;
23+
}
24+
25+
#colorSchemes {
26+
width: 210px;
27+
}
28+
29+
#colorSchemes .smart-action-button {
30+
display: flex;
31+
flex-direction: column;
32+
align-content: space-evenly;
33+
}
34+
35+
#customScheme1, #customScheme2, #customScheme3, #customScheme4, #customScheme5 {
36+
display: inline-block;
37+
border-radius: 50%;
38+
width: 30px;
39+
height: 30px;
540
}

‎demos/3d-chart/color-schemes/src/app/app.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export class AppComponent implements AfterViewInit, OnInit {
3838
static: false
3939
}) useCustomScheme!: CheckBoxComponent;
4040
@ViewChild('darkModeButton', {
41-
read: CheckBoxComponent,
41+
read: ButtonComponent,
4242
static: false
4343
}) darkModeButton!: CheckBoxComponent;
4444

@@ -151,7 +151,7 @@ export class AppComponent implements AfterViewInit, OnInit {
151151
};
152152

153153
xAxis = {
154-
dataField: "Year",
154+
dataField: "Day",
155155
};
156156

157157
seriesGroups = [{
@@ -249,10 +249,12 @@ export class AppComponent implements AfterViewInit, OnInit {
249249
if (document.body.getAttribute('theme') === 'dark') {
250250
document.body.removeAttribute('theme');
251251
that.chart.backgroundColor = 'white';
252+
document.body.style.backgroundColor = 'white';
252253
}
253254
else {
254255
document.body.setAttribute('theme', 'dark');
255256
that.chart.backgroundColor = 'black';
257+
document.body.style.backgroundColor = '#242424';
256258
}
257259
});
258260
}

‎demos/3d-chart/custom-toolbar-items/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"@angular/platform-browser": "^15.0.0",
1313
"@angular/platform-browser-dynamic": "^15.0.0",
1414
"@angular/router": "^15.0.0",
15-
"@smart-webcomponents-angular/threedchart": "14.7.3",
15+
"@smart-webcomponents-angular/threedchart": "^15.0.2",
16+
"@smart-webcomponents-angular/button": "^15.0.2",
1617
"rxjs": "~7.5.0",
1718
"tslib": "^2.3.0",
1819
"core-js": "^3.27.2",

‎demos/3d-chart/custom-toolbar-items/src/app/app.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export class AppComponent implements AfterViewInit, OnInit {
4646

4747
controlsToolbarItems = ['reset-camera', 'zoom-in', 'zoom-out', 'save-image', 'camera-control',
4848
{
49-
name: 'change-type', content: '<jqx-button>Change Type</jqx-button>',
49+
name: 'change-type', content: '<smart-button>Change Type</smart-button>',
5050
action: () => {
5151
let type = this.seriesGroups[0].type
5252
this.seriesGroups[0].type = type === 'column' ? 'line' : 'column';

‎demos/3d-chart/donut-series/src/app/app.component.ts

+35-38
Original file line numberDiff line numberDiff line change
@@ -48,52 +48,49 @@ export class AppComponent implements AfterViewInit, OnInit {
4848

4949
seriesGroups = [
5050
{
51-
type: "donut",
51+
type: 'donut',
5252
showLabels: false,
5353
dataSource: this.dataSource1,
54-
series: [
55-
{
56-
dataField: "Share",
57-
displayText: "Browser",
58-
initialAngle: 0,
59-
radius: 8,
60-
centerOffset: 0,
61-
width: 3,
62-
height: 2,
63-
formatFunction: function (value:any) {
64-
if (isNaN(value)) {
65-
// Legend labels formatting
66-
return value;
67-
}
68-
69-
return parseFloat(value).toFixed(2) + "%";
70-
},
54+
series: [{
55+
dataField: 'Share',
56+
displayText: 'Browser',
57+
initialAngle: 0,
58+
radius: 8,
59+
centerOffset: 0,
60+
width: 3,
61+
height: 2,
62+
formatFunction: function (value:any) {
63+
if (isNaN(value)) {
64+
// Legend labels formatting
65+
return value;
66+
}
67+
68+
return parseFloat(value).toFixed(2) + '%';
7169
},
72-
],
70+
}, ],
7371
},
7472
{
75-
type: "donut",
73+
type: 'donut',
7674
showLabels: false,
7775
dataSource: this.dataSource2,
78-
formatSettings: { sufix: " (mobile)" },
79-
series: [
80-
{
81-
dataField: "Sare",
82-
displayText: "Browser",
83-
initialAngle: 0,
84-
radius: 15,
85-
centerOffset: 0,
86-
width: 4,
87-
height: 2,
88-
formatFunction: function (value:any) {
89-
if (isNaN(value)) {
90-
// Legend labels formatting
91-
return value;
92-
}
93-
94-
return parseFloat(value).toFixed(2) + "%";
95-
},
76+
formatSettings: {sufix: ' (mobile)'},
77+
series: [{
78+
dataField: 'Share',
79+
displayText: 'Browser',
80+
initialAngle: 0,
81+
radius: 15,
82+
centerOffset: 0,
83+
width: 4,
84+
height: 2,
85+
formatFunction: function (value:any) {
86+
if (isNaN(value)) {
87+
// Legend labels formatting
88+
return value;
89+
}
90+
91+
return parseFloat(value).toFixed(2) + '%';
9692
},
93+
}
9794
],
9895
},
9996
];

‎demos/3d-chart/events/src/app/app.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ <h4>Chart Events:</h4>
99
<h4>Item Index:</h4>
1010
<smart-number-input #itemIndex [value]="0" [min]="0" [max]="3" ></smart-number-input>
1111
<br /><br />
12-
<smart-button #showItem (click)="showItem($event)">Show Item</smart-button>
12+
<smart-button #showItem>Show Item</smart-button>
1313
<br /><br />
14-
<smart-button #hideItem (click)="hideItem($event)">Hide Item</smart-button>
14+
<smart-button #hideItem>Hide Item</smart-button>
1515
<br /><br />
16-
<smart-button #selectItem (click)="selectItem($event)">Select Item</smart-button>
16+
<smart-button #selectItem>Select Item</smart-button>
1717
<br /><br />
18-
<smart-button #unselectItem (click)="unselectItem($event)">Unselect Item</smart-button>
18+
<smart-button #unselectItem>Unselect Item</smart-button>
1919
</div>
2020
</div>

‎demos/3d-chart/events/src/app/app.component.ts

+54-29
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,43 @@ import { ThreeDChartComponent } from '@smart-webcomponents-angular/threedchart';
33
import { ButtonComponent } from '@smart-webcomponents-angular/button';
44
import { NumberInputComponent } from '@smart-webcomponents-angular/numberinput';
55

6-
76
@Component({
87
selector: 'app-root',
98
templateUrl: './app.component.html',
10-
styleUrls: ['./app.component.css']
9+
styleUrls: ['./app.component.css'],
1110
})
12-
1311
export class AppComponent implements AfterViewInit, OnInit {
14-
@ViewChild('chart', { read: ThreeDChartComponent, static: false }) chart!: ThreeDChartComponent;
15-
@ViewChild('itemIndex', { read: NumberInputComponent, static: false }) itemIndex!: NumberInputComponent;
12+
@ViewChild('chart', { read: ThreeDChartComponent, static: false })
13+
chart!: ThreeDChartComponent;
14+
@ViewChild('itemIndex', { read: NumberInputComponent, static: false })
15+
itemIndex!: NumberInputComponent;
16+
@ViewChild('showItem', { read: ButtonComponent, static: false })
17+
showItemBtn!: ButtonComponent;
18+
@ViewChild('hideItem', { read: ButtonComponent, static: false })
19+
hideItemBtn!: ButtonComponent;
20+
@ViewChild('selectItem', { read: ButtonComponent, static: false })
21+
selectItemBtn!: ButtonComponent;
22+
@ViewChild('unselectItem', { read: ButtonComponent, static: false })
23+
unselectItemBtn!: ButtonComponent;
1624

1725
dataSource = [
18-
{ Type: "Completed", Count: 22 },
19-
{ Type: "In Progress", Count: 19 },
20-
{ Type: "Cancelled", Count: 13 },
21-
{ Type: "Remaining", Count: 34 },
26+
{ Type: 'Completed', Count: 22 },
27+
{ Type: 'In Progress', Count: 19 },
28+
{ Type: 'Cancelled', Count: 13 },
29+
{ Type: 'Remaining', Count: 34 },
2230
];
2331

24-
caption = "Website Project";
32+
caption = 'Website Project';
2533

26-
description = "Progress of the tasks";
34+
description = 'Progress of the tasks';
2735

2836
showLegend = true;
2937

3038
legendLayout = {
31-
flow: "vertical",
39+
flow: 'vertical',
3240
};
3341

34-
colorScheme = "scheme01";
42+
colorScheme = 'scheme01';
3543

3644
cameraPosition = {
3745
y: 18,
@@ -40,13 +48,13 @@ export class AppComponent implements AfterViewInit, OnInit {
4048

4149
seriesGroups = [
4250
{
43-
type: "pie",
51+
type: 'pie',
4452
showLabels: true,
4553
dataSource: this.dataSource,
4654
series: [
4755
{
48-
dataField: "Count",
49-
displayText: "Type",
56+
dataField: 'Count',
57+
displayText: 'Type',
5058
initialAngle: 0,
5159
radius: 15,
5260
labelRadius: 17,
@@ -57,20 +65,21 @@ export class AppComponent implements AfterViewInit, OnInit {
5765
},
5866
];
5967

60-
showItem($event: any) {
61-
this.chart.showItem(this.itemIndex.value, 0, 0);
68+
showItem(): void {
69+
this.chart.showItem(0, 0, parseInt(this.itemIndex.value));
6270
}
6371

64-
hideItem($event: any) {
65-
this.chart.hideItem(this.itemIndex.value, 0, 0);
72+
hideItem(): void {
73+
this.chart.hideItem(0, 0, parseInt(this.itemIndex.value));
6674
}
6775

68-
selectItem($event: any) {
69-
this.chart.selectItem(this.itemIndex.value, 0, 0);
76+
selectItem(): void {
77+
this.chart.selectItem(0, 0, parseInt(this.itemIndex.value));
7078
}
7179

72-
unselectItem($event: any) {
73-
this.chart.unselectItem(this.itemIndex.value, 0, 0);
80+
unselectItem(): void {
81+
this.chart.unselectItem(0, 0, parseInt(this.itemIndex.value));
82+
7483
}
7584

7685
ngOnInit(): void {
@@ -85,9 +94,25 @@ export class AppComponent implements AfterViewInit, OnInit {
8594
init(): void {
8695
// init code.
8796
let events = ['itemClick', 'hide', 'show', 'unselect', 'select'];
88-
events.forEach(ev => this.chart.addEventListener(ev, function (e: any) {
89-
document.getElementById('box')!.innerHTML +=
90-
`${ev}, itemIndex:${e.detail.itemIndex}<br/>`
91-
}))
97+
events.forEach((ev) =>
98+
this.chart.addEventListener(ev, function (e: any) {
99+
document.getElementById(
100+
'box'
101+
)!.innerHTML += `${ev}, itemIndex:${e.detail.itemIndex}<br/>`;
102+
})
103+
);
104+
105+
this.showItemBtn.addEventListener('click', () => {
106+
this.showItem();
107+
});
108+
this.hideItemBtn.addEventListener('click', () => {
109+
this.hideItem();
110+
});
111+
this.selectItemBtn.addEventListener('click', () => {
112+
this.selectItem();
113+
});
114+
this.unselectItemBtn.addEventListener('click', () => {
115+
this.unselectItem();
116+
});
92117
}
93-
}
118+
}

‎demos/3d-chart/methods/src/app/app.component.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,21 @@
77
<h4>Series Group Index:</h4>
88
<smart-number-input [value]="2" [min]="0" [max]="2" #seriesGroupIndex></smart-number-input>
99
<h4>Serie Index:</h4>
10-
<smart-number-input [value]="4" [min]="0" [max]="2" #serieIndex></smart-number-input>
10+
<smart-number-input [value]="4" [min]="0" [max]="2" #seriesIndex></smart-number-input>
1111
<h4>Item Index:</h4>
1212
<smart-number-input [value]="1" [min]="0" [max]="4" #itemIndex></smart-number-input>
13-
<smart-button #getItem (click)="getItem()">Get Item</smart-button>
13+
<smart-button #getItem>Get Item</smart-button>
1414
<br /><br />
15-
<smart-button #showItem (click)="showItem()" >Show Item</smart-button>
15+
<smart-button #showItem>Show Item</smart-button>
1616
<br />
17-
<smart-button #hideItem (click)="hideItem()">Hide Item</smart-button>
17+
<smart-button #hideItem>Hide Item</smart-button>
1818
</div>
1919
<div class="option">
2020
<br /><br />
21-
<smart-button #getValueAxis (click)="getValueAxis()">Get Value Axis Labels</smart-button>
21+
<smart-button #getValueAxis>Get Value Axis Labels</smart-button>
2222
<br /><br />
23-
<smart-button #getXAxis (click)="getXAxis()">Get X Axis Labels</smart-button>
23+
<smart-button #getXAxis>Get X Axis Labels</smart-button>
2424
<br /><br />
25-
<smart-button #getZAxis (click)="getZAxis()">Get Z Axis Labels</smart-button>
25+
<smart-button #getZAxis>Get Z Axis Labels</smart-button>
2626
</div>
2727
</div>

0 commit comments

Comments
 (0)