plugin_dashboard_builder

dashboard_builder/LICENSE

@@ -0,0 +1,14 @@
+
+   Copyright 2025 Sigma Computing
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

dashboard_builder/README.md

@@ -0,0 +1,11 @@
+# dashboard_builder
+
+This is a plugin to implement the dashboard builder use case.
+
+## Disclaimer
+
+**Important Notice:**
+
+This software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+
+This project is intended for educational/informational purposes only. Use of this code is at your own risk.

dashboard_builder/angular.json

@@ -0,0 +1,112 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "dashboard-builder": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/dashboard-builder",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": [
+                            "zone.js"
+                        ],
+                        "tsConfig": "tsconfig.app.json",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "5mb",
+                                    "maximumError": "10mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "5mb",
+                                    "maximumError": "10mb"
+                                }
+                            ],
+                            "fileReplacements": [
+                              {
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.prod.ts"
+                              }
+                            ],
+                            "outputHashing": "all",
+                            "baseHref": "/dashboard-builder/",
+                            "deployUrl": ""
+                        },
+                        "development": {
+                            "buildOptimizer": false,
+                            "optimization": false,
+                            "vendorChunk": true,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "namedChunks": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "configurations": {
+                        "production": {
+                            "buildTarget": "dashboard-builder:build:production"
+                        },
+                        "development": {
+                            "buildTarget": "dashboard-builder:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "buildTarget": "dashboard-builder:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "polyfills": [
+                            "zone.js",
+                            "zone.js/testing"
+                        ],
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
+                    }
+                }
+            }
+        }
+    }
+}

dashboard_builder/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "dashboard-builder",
+    "version": "1.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "build:prod": "ng build --configuration production",
+        "watch": "ng build --watch --configuration development",
+        "test": "ng test",
+        "lint": "ng lint"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^20.1.0",
+        "@angular/cdk": "^20.1.0",
+        "@angular/common": "^20.1.0",
+        "@angular/compiler": "^20.1.0",
+        "@angular/core": "^20.1.0",
+        "@angular/forms": "^20.1.0",
+        "@angular/platform-browser": "^20.1.0",
+        "@angular/platform-browser-dynamic": "^20.1.0",
+        "@angular/router": "^20.1.0",
+        "@primeng/themes": "^20.0.1",
+        "@sigmacomputing/plugin": "^1.0.6",
+        "primeflex": "^4.0.0",
+        "primeicons": "^7.0.0",
+        "primeng": "^20.0.1",
+        "quill": "^1.3.7",
+        "rxjs": "~7.8.0",
+        "tslib": "^2.3.0",
+        "zone.js": "~0.15.0"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "^20.1.4",
+        "@angular/build": "^20.1.4",
+        "@angular/cli": "^20.1.4",
+        "@angular/compiler-cli": "^20.1.0",
+        "@types/jasmine": "~5.1.0",
+        "@types/react": "^19.1.4",
+        "jasmine-core": "~5.8.0",
+        "karma": "~6.4.0",
+        "karma-chrome-launcher": "~3.2.0",
+        "karma-coverage": "~2.2.0",
+        "karma-jasmine": "~5.1.0",
+        "karma-jasmine-html-reporter": "~2.1.0",
+        "typescript": "~5.8.2"
+    }
+}

dashboard_builder/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

dashboard_builder/src/app/app.component.spec.ts

@@ -0,0 +1,21 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [ RouterTestingModule ],
+            declarations: [ AppComponent ]
+        });
+        TestBed.compileComponents();
+    });
+
+    it('should create the app', async(() => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.debugElement.componentInstance;
+        expect(app).toBeTruthy();
+    }));
+});

dashboard_builder/src/app/app.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    standalone: true,
+    imports: [RouterOutlet]
+})
+export class AppComponent implements OnInit {
+
+    constructor() {}
+
+    ngOnInit(): void {}
+
+}

dashboard_builder/src/app/app.config.ts

@@ -0,0 +1,32 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { LocationStrategy, PathLocationStrategy } from '@angular/common';
+
+import { providePrimeNG } from 'primeng/config';
+import Aura from '@primeuix/themes/aura';
+import { definePreset } from '@primeuix/themes';
+
+import { routes } from './app.routes';
+
+const SigmaPreset = definePreset(Aura, {
+    semantic: {
+        colorScheme: {
+            light: {
+                surface: {
+                    200: 'rgba(255, 201, 100, 0.7)'
+                }
+            }
+        }
+    }
+});
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }), 
+    provideRouter(routes), 
+    provideHttpClient(),
+    { provide: LocationStrategy, useClass: PathLocationStrategy },
+    providePrimeNG({ theme: { preset: SigmaPreset } })
+  ]
+};

dashboard_builder/src/app/app.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./main/main.component').then(m => m.MainComponent)
+  }
+];

dashboard_builder/src/app/main/main.component.css

@@ -0,0 +1,28 @@
+.iframe-container {
+    position: relative;
+    height: 0px; /* Default height when loading */
+}
+
+.iframe-container-loaded {
+    height: 100% !important; /* Height when loaded */
+}
+
+.iframe-container-loading {
+    height: 0px !important; /* Explicit height when loading */
+}
+
+.sigma-iframe {
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    background: #FAF8FA;
+}
+
+.sigma-loader {
+    height: 100%;
+}
+
+/* override skeleton animation when vizUrlControlValue is empty */
+.sigma-loader.no-animation ::ng-deep .p-skeleton::after {
+    animation: none !important;
+}

dashboard_builder/src/app/main/main.component.html

@@ -0,0 +1,19 @@
+<div class="flex flex-column h-full w-full" style="position: absolute">
+    <div *ngIf="!vizLoaded" class="flex align-items-center justify-content-center sigma-loader" [class.no-animation]="!vizUrlControlValue">
+        <div class="flex align-items-end gap-2">
+            <p-skeleton size="2rem"/>
+            <p-skeleton size="3rem"/>
+            <p-skeleton size="4rem"/>
+            <p-skeleton width="5rem" height="15rem"/>
+        </div>
+    </div>
+
+    <!-- height of the div containing the iframe is set to 0px when loading and 100% when loaded -->
+    <div *ngIf="vizUrlControlValue" class="iframe-container" [class.iframe-container-loaded]="vizLoaded" [class.iframe-container-loading]="!vizLoaded">
+        <iframe *ngIf="vizUrlControlValue" 
+            id="sigmaViz" [hidden]="!vizLoaded" [src]="vizUrlControlValue | safe" 
+            class="sigma-iframe"
+            frameBorder="0" (load)="registerEvent()">
+        </iframe>
+    </div>
+</div>