HTMLElements · bmarkov · Feb 8, 2023 · Jan 31, 2023 · Feb 7, 2023 · Feb 7, 2023
diff --git a/demos/3d-chart/background-styling/package.json b/demos/3d-chart/background-styling/package.json
@@ -12,7 +12,7 @@
     "@angular/platform-browser-dynamic": "^15.0.0",
     "@angular/router": "^15.0.0",
     "@smart-webcomponents-angular/threedchart": "14.7.3",
-    "@smart-webcomponents-angular/checkbox": "^14.2.0",
+    "@smart-webcomponents-angular/radiobutton": "^14.2.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "core-js": "^3.27.2",

diff --git a/demos/3d-chart/color-schemes/src/app/app.component.css b/demos/3d-chart/color-schemes/src/app/app.component.css
@@ -2,4 +2,39 @@ smart-3d-chart{
 	width:80%;
 	max-width: 1000px;
 	height:600px;
+}
+
+body[theme='dark']{
+  background-color: #242424;
+}
+
+smart-drop-down-list .smart-input div.circle, .circle {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  position: static;
+  z-index: 1;
+  float: none;
+}
+
+.circle {
+  float: left;
+  margin-right: 5px;
+}
+
+#colorSchemes {
+  width: 210px;
+}
+
+#colorSchemes .smart-action-button {
+      display: flex;
+      flex-direction: column;
+      align-content: space-evenly;
+  }
+
+#customScheme1, #customScheme2, #customScheme3, #customScheme4, #customScheme5 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
 }
diff --git a/demos/3d-chart/color-schemes/src/app/app.component.ts b/demos/3d-chart/color-schemes/src/app/app.component.ts
@@ -38,7 +38,7 @@ export class AppComponent implements AfterViewInit, OnInit {
     static: false
   }) useCustomScheme!: CheckBoxComponent;
   @ViewChild('darkModeButton', {
-    read: CheckBoxComponent,
+    read: ButtonComponent,
     static: false
   }) darkModeButton!: CheckBoxComponent;
 
@@ -151,7 +151,7 @@ export class AppComponent implements AfterViewInit, OnInit {
   };
 
   xAxis = {
-    dataField: "Year",
+    dataField: "Day",
   };
 
   seriesGroups = [{
@@ -249,10 +249,12 @@ export class AppComponent implements AfterViewInit, OnInit {
       if (document.body.getAttribute('theme') === 'dark') {
         document.body.removeAttribute('theme');
         that.chart.backgroundColor = 'white';
+        document.body.style.backgroundColor = 'white';
       }
       else {
         document.body.setAttribute('theme', 'dark');
         that.chart.backgroundColor = 'black';
+        document.body.style.backgroundColor = '#242424';
       }
     });
   }

diff --git a/demos/3d-chart/custom-toolbar-items/package.json b/demos/3d-chart/custom-toolbar-items/package.json
@@ -12,7 +12,8 @@
     "@angular/platform-browser": "^15.0.0",
     "@angular/platform-browser-dynamic": "^15.0.0",
     "@angular/router": "^15.0.0",
-    "@smart-webcomponents-angular/threedchart": "14.7.3",
+    "@smart-webcomponents-angular/threedchart": "^15.0.2",
+    "@smart-webcomponents-angular/button": "^15.0.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "core-js": "^3.27.2",

diff --git a/demos/3d-chart/custom-toolbar-items/src/app/app.component.ts b/demos/3d-chart/custom-toolbar-items/src/app/app.component.ts
@@ -46,7 +46,7 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   controlsToolbarItems = ['reset-camera', 'zoom-in', 'zoom-out', 'save-image', 'camera-control',
     {
-      name: 'change-type', content: '<jqx-button>Change Type</jqx-button>',
+      name: 'change-type', content: '<smart-button>Change Type</smart-button>',
       action: () => {
         let type = this.seriesGroups[0].type
         this.seriesGroups[0].type = type === 'column' ? 'line' : 'column';

diff --git a/demos/3d-chart/donut-series/src/app/app.component.ts b/demos/3d-chart/donut-series/src/app/app.component.ts
@@ -48,52 +48,49 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   seriesGroups = [
     {
-      type: "donut",
+      type: 'donut',
       showLabels: false,
       dataSource: this.dataSource1,
-      series: [
-        {
-          dataField: "Share",
-          displayText: "Browser",
-          initialAngle: 0,
-          radius: 8,
-          centerOffset: 0,
-          width: 3,
-          height: 2,
-          formatFunction: function (value:any) {
-            if (isNaN(value)) {
-              // Legend labels formatting
-              return value;
-            }
-
-            return parseFloat(value).toFixed(2) + "%";
-          },
+      series: [{
+        dataField: 'Share',
+        displayText: 'Browser',
+        initialAngle: 0,
+        radius: 8,
+        centerOffset: 0,
+        width: 3,
+        height: 2,
+        formatFunction: function (value:any) {
+          if (isNaN(value)) {
+            // Legend labels formatting
+            return value;
+          }
+
+          return parseFloat(value).toFixed(2) + '%';
         },
-      ],
+      }, ],
     },
     {
-      type: "donut",
+      type: 'donut',
       showLabels: false,
       dataSource: this.dataSource2,
-      formatSettings: { sufix: " (mobile)" },
-      series: [
-        {
-          dataField: "Sare",
-          displayText: "Browser",
-          initialAngle: 0,
-          radius: 15,
-          centerOffset: 0,
-          width: 4,
-          height: 2,
-          formatFunction: function (value:any) {
-            if (isNaN(value)) {
-              // Legend labels formatting
-              return value;
-            }
-
-            return parseFloat(value).toFixed(2) + "%";
-          },
+      formatSettings: {sufix: ' (mobile)'},
+      series: [{
+        dataField: 'Share',
+        displayText: 'Browser',
+        initialAngle: 0,
+        radius: 15,
+        centerOffset: 0,
+        width: 4,
+        height: 2,
+        formatFunction: function (value:any) {
+          if (isNaN(value)) {
+            // Legend labels formatting
+            return value;
+          }
+
+          return parseFloat(value).toFixed(2) + '%';
         },
+      }
       ],
     },
   ];

diff --git a/demos/3d-chart/events/src/app/app.component.html b/demos/3d-chart/events/src/app/app.component.html
@@ -9,12 +9,12 @@ <h4>Chart Events:</h4>
         <h4>Item Index:</h4>
         <smart-number-input #itemIndex [value]="0" [min]="0" [max]="3" ></smart-number-input>
         <br /><br />
-        <smart-button #showItem (click)="showItem($event)">Show Item</smart-button>
+        <smart-button #showItem>Show Item</smart-button>
         <br /><br />
-        <smart-button #hideItem (click)="hideItem($event)">Hide Item</smart-button>
+        <smart-button #hideItem>Hide Item</smart-button>
         <br /><br />
-        <smart-button #selectItem (click)="selectItem($event)">Select Item</smart-button>
+        <smart-button #selectItem>Select Item</smart-button>
         <br /><br />
-        <smart-button #unselectItem (click)="unselectItem($event)">Unselect Item</smart-button>
+        <smart-button #unselectItem>Unselect Item</smart-button>
     </div>
 </div>
diff --git a/demos/3d-chart/events/src/app/app.component.ts b/demos/3d-chart/events/src/app/app.component.ts
@@ -3,35 +3,43 @@ import { ThreeDChartComponent } from '@smart-webcomponents-angular/threedchart';
 import { ButtonComponent } from '@smart-webcomponents-angular/button';
 import { NumberInputComponent } from '@smart-webcomponents-angular/numberinput';
 
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
-
 export class AppComponent implements AfterViewInit, OnInit {
-  @ViewChild('chart', { read: ThreeDChartComponent, static: false }) chart!: ThreeDChartComponent;
-  @ViewChild('itemIndex', { read: NumberInputComponent, static: false }) itemIndex!: NumberInputComponent;
+  @ViewChild('chart', { read: ThreeDChartComponent, static: false })
+  chart!: ThreeDChartComponent;
+  @ViewChild('itemIndex', { read: NumberInputComponent, static: false })
+  itemIndex!: NumberInputComponent;
+  @ViewChild('showItem', { read: ButtonComponent, static: false })
+  showItemBtn!: ButtonComponent;
+  @ViewChild('hideItem', { read: ButtonComponent, static: false })
+  hideItemBtn!: ButtonComponent;
+  @ViewChild('selectItem', { read: ButtonComponent, static: false })
+  selectItemBtn!: ButtonComponent;
+  @ViewChild('unselectItem', { read: ButtonComponent, static: false })
+  unselectItemBtn!: ButtonComponent;
 
   dataSource = [
-    { Type: "Completed", Count: 22 },
-    { Type: "In Progress", Count: 19 },
-    { Type: "Cancelled", Count: 13 },
-    { Type: "Remaining", Count: 34 },
+    { Type: 'Completed', Count: 22 },
+    { Type: 'In Progress', Count: 19 },
+    { Type: 'Cancelled', Count: 13 },
+    { Type: 'Remaining', Count: 34 },
   ];
 
-  caption = "Website Project";
+  caption = 'Website Project';
 
-  description = "Progress of the tasks";
+  description = 'Progress of the tasks';
 
   showLegend = true;
 
   legendLayout = {
-    flow: "vertical",
+    flow: 'vertical',
   };
 
-  colorScheme = "scheme01";
+  colorScheme = 'scheme01';
 
   cameraPosition = {
     y: 18,
@@ -40,13 +48,13 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   seriesGroups = [
     {
-      type: "pie",
+      type: 'pie',
       showLabels: true,
       dataSource: this.dataSource,
       series: [
         {
-          dataField: "Count",
-          displayText: "Type",
+          dataField: 'Count',
+          displayText: 'Type',
           initialAngle: 0,
           radius: 15,
           labelRadius: 17,
@@ -57,20 +65,21 @@ export class AppComponent implements AfterViewInit, OnInit {
     },
   ];
 
-  showItem($event: any) {
-    this.chart.showItem(this.itemIndex.value, 0, 0);
+  showItem(): void {
+    this.chart.showItem(0, 0, parseInt(this.itemIndex.value));
   }
 
-  hideItem($event: any) {
-    this.chart.hideItem(this.itemIndex.value, 0, 0);
+  hideItem(): void {
+    this.chart.hideItem(0, 0, parseInt(this.itemIndex.value));
   }
 
-  selectItem($event: any) {
-    this.chart.selectItem(this.itemIndex.value, 0, 0);
+  selectItem(): void {
+    this.chart.selectItem(0, 0, parseInt(this.itemIndex.value));
   }
 
-  unselectItem($event: any) {
-    this.chart.unselectItem(this.itemIndex.value, 0, 0);
+  unselectItem(): void {
+    this.chart.unselectItem(0, 0, parseInt(this.itemIndex.value));
+
   }
 
   ngOnInit(): void {
@@ -85,9 +94,25 @@ export class AppComponent implements AfterViewInit, OnInit {
   init(): void {
     // init code.
     let events = ['itemClick', 'hide', 'show', 'unselect', 'select'];
-    events.forEach(ev => this.chart.addEventListener(ev, function (e: any) {
-      document.getElementById('box')!.innerHTML +=
-        `${ev}, itemIndex:${e.detail.itemIndex}<br/>`
-    }))
+    events.forEach((ev) =>
+      this.chart.addEventListener(ev, function (e: any) {
+        document.getElementById(
+          'box'
+        )!.innerHTML += `${ev}, itemIndex:${e.detail.itemIndex}<br/>`;
+      })
+    );
+
+    this.showItemBtn.addEventListener('click', () => {
+      this.showItem();
+    });
+    this.hideItemBtn.addEventListener('click', () => {
+      this.hideItem();
+    });
+    this.selectItemBtn.addEventListener('click', () => {
+      this.selectItem();
+    });
+    this.unselectItemBtn.addEventListener('click', () => {
+      this.unselectItem();
+    });
   }
-}
+}
diff --git a/demos/3d-chart/methods/src/app/app.component.html b/demos/3d-chart/methods/src/app/app.component.html
@@ -7,21 +7,21 @@
         <h4>Series Group Index:</h4>
         <smart-number-input [value]="2" [min]="0" [max]="2" #seriesGroupIndex></smart-number-input>
         <h4>Serie Index:</h4>
-        <smart-number-input [value]="4" [min]="0" [max]="2" #serieIndex></smart-number-input>
+        <smart-number-input [value]="4" [min]="0" [max]="2" #seriesIndex></smart-number-input>
         <h4>Item Index:</h4>
         <smart-number-input [value]="1" [min]="0" [max]="4" #itemIndex></smart-number-input>
-        <smart-button #getItem (click)="getItem()">Get Item</smart-button>
+        <smart-button #getItem>Get Item</smart-button>
         <br /><br />
-        <smart-button #showItem (click)="showItem()" >Show Item</smart-button>
+        <smart-button #showItem>Show Item</smart-button>
         <br />
-        <smart-button #hideItem (click)="hideItem()">Hide Item</smart-button>
+        <smart-button #hideItem>Hide Item</smart-button>
     </div>
     <div class="option">
         <br /><br />
-        <smart-button #getValueAxis (click)="getValueAxis()">Get Value Axis Labels</smart-button>
+        <smart-button #getValueAxis>Get Value Axis Labels</smart-button>
         <br /><br />
-        <smart-button #getXAxis (click)="getXAxis()">Get X Axis Labels</smart-button>
+        <smart-button #getXAxis>Get X Axis Labels</smart-button>
         <br /><br />
-        <smart-button #getZAxis (click)="getZAxis()">Get Z Axis Labels</smart-button>
+        <smart-button #getZAxis>Get Z Axis Labels</smart-button>
     </div>
 </div>