up

Author: bmarkov

grid/sidepanel/src/app/app.component.html

@@ -14,9 +14,10 @@ <h3>Product Details</h3>
   <p><strong>Product:</strong> {{ selectedRow.product }}</p>
   <p><strong>Quantity:</strong> {{ selectedRow.quantity }}</p>
   <p><strong>Price:</strong> {{ selectedRow.price }} €</p>
-  <p><strong>Total:</strong> {{ selectedRow.total   }} €</p>
+  <p><strong>Total:</strong> {{ selectedRow.total }} €</p>
 
   <jqxGauge
+    id="quantityGauge"
     [ranges]="gaugeRanges"
     [value]="selectedRow.quantity"
     [width]="200"
@@ -28,6 +29,7 @@ <h3>Product Details</h3>
   ></jqxGauge>
 
   <jqxChart
+    id="priceChart"
     [title]="'Price Trend'"
     [source]="chartData"
     [xAxis]="chartXAxis"

grid/sidepanel/src/app/app.component.ts

@@ -3,6 +3,7 @@
 import { jqxGridModule, jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 import { jqxGaugeModule } from 'jqwidgets-ng/jqxgauge';
 import { jqxChartModule } from 'jqwidgets-ng/jqxchart';
+declare var JQXLite: any; // Declare it here globally for TypeScript
 
 @Component({
   selector: 'app-root',
@@ -130,13 +131,37 @@ export class AppComponent {
   onRowSelect(event: any): void {
     const row = event.args.row;
     this.selectedRow = row;
-
+    this.selectedRow.total = this.selectedRow.quantity * this.selectedRow.price;
     // Generate mock chart data for demonstration
     this.chartData = Array.from({ length: 5 }, (_, i) => ({
       label: `Week ${i + 1}`,
       value: +(Math.random() * 5 + 1).toFixed(2),
     }));
 
-    this.myGrid.showSidePanel(document.querySelector("#sidePanel"), 400);
+      const sidePanel: HTMLElement = document.querySelector(
+        '#sidePanel'
+      ) as HTMLElement;
+
+      this.myGrid.showSidePanel(sidePanel, 400, (panel) => {
+        panel = JQXLite(panel);
+        panel.find("#productName").text(row.product);
+        panel.find("#productQty").text(row.quantity);
+        panel.find("#productPrice").text(row.price.toFixed(2) + ' €');
+        panel.find("#productTotal").text((row.quantity * row.price).toFixed(2) + ' €');
+        // Gauge
+        panel.find("#quantityGauge").jqxGauge({
+            ranges: [{ startValue: 0, endValue: 3, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
+            { startValue: 3, endValue: 5, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
+            { startValue: 5, endValue: 7, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
+            { startValue: 7, endValue: 10, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
+            colorScheme: 'scheme05',
+            width: 200,
+            height: 200,
+            animationDuration: 1200,
+            max: 10,
+            niceInterval: true,
+            value: row.quantity
+        });
+      });
   }
 }