Sandbox/snowflake

packages/dom/src/Data/DataSources/SnowflakeDataSource.ts

@@ -1,7 +1,7 @@
 import { DataSourceProvider } from "../../Core/Constants/DataSourceProvider";
-import { ProcessDataSource } from "../ProcessDataSource";
+import { SchemaDataSource } from "../SchemaDataSource";
 
-export class SnowflakeDataSource extends ProcessDataSource {
+export class SnowflakeDataSource extends SchemaDataSource {
     constructor()
     constructor(title: string)
     constructor(title: string, subtitle: string)

samples/sandbox/src/dashboards/IDashboardCreator.ts

@@ -0,0 +1,3 @@
+export interface DashboardCreator {
+    name: string;
+}

samples/sandbox/src/dashboards/MySQLDataSourceDashboard.ts

@@ -0,0 +1,39 @@
+import { DashboardCreator } from "./IDashboardCreator";
+import { ColumnChartVisualization, RdashDocument } from "@revealbi/dom";
+import { MySqlDataSource } from "@revealbi/dom";
+import { MySqlDataSourceItem } from "@revealbi/dom";
+import { DataSource, DataSourceItem, DateField, IField, NumberField, RestDataSourceItem, TextField } from "@revealbi/dom";
+
+export class MySqlDataSourceDashboards implements DashboardCreator {
+    name: string = "MySql Data Source Dashboard";
+
+    createDashboard() {
+        const document = new RdashDocument("MySQL Data Source Dashboard");
+
+        // Data Source
+        const mysqlDS = new MySqlDataSource("MySQL Dashboard", "MySql Dashboard Subtitle");
+        mysqlDS.id = "mysqlDSID";
+        mysqlDS.host = "revealdb01.infragistics.local";
+        mysqlDS.database = "northwind";
+        mysqlDS.port = "3306";
+
+        const mysqlDSI = new MySqlDataSourceItem("MySQL Data Source Dashboard", mysqlDS);
+        mysqlDSI.id = "mysqldsitemid";
+        mysqlDSI.subtitle = "MySQL Datasource order table";
+        mysqlDSI.database = "northwind";
+        mysqlDSI.table = "employees";
+        mysqlDSI.fields = [
+            new NumberField("ReportsTo"),
+            new NumberField("EmployeeID"),
+            new TextField("Country"),
+        ]
+
+        const columnVS = new ColumnChartVisualization("Employees report", mysqlDSI)
+            .setLabel("ReportsTo")
+            .setValue("EmployeeID");
+
+        document.visualizations = [columnVS];
+
+        return document;
+    }
+}

samples/sandbox/src/dashboards/RestDataSourceDashboards.ts

@@ -1,9 +1,11 @@
 import { DataSource, DataSourceItemFactory, Maps, NumberField, PieChartVisualization, RdashDocument, RestDataSourceItem, ScatterMapVisualization, TextField } from "@revealbi/dom";
 import { DataSourceFactory } from "./DataSourceFactory";
 import { DataSourceType } from "packages/dom/src/Data/Enums/DataSourceType";
+import { DashboardCreator } from "./IDashboardCreator";
 
-export class RestDataSourceDashboards {
-    static createDashboard() {
+export class RestDataSourceDashboards implements DashboardCreator {
+    name: string = "Rest Dashboard";
+    createDashboard() {
         const document = new RdashDocument("REST Dashboard");
 
         //json - default
@@ -43,7 +45,7 @@ export class RestDataSourceDashboards {
             });
 
         document.visualizations = [jsonChart, excelChart, csvChart];
-        
+
         return document;
     }
 }

samples/sandbox/src/dashboards/SalesDashboard.ts

@@ -1,9 +1,11 @@
 import { AggregationType, BarChartVisualization, Bound, BulletGraphVisualization, ColumnChartVisualization, DashboardDataFilter, DashboardDateFilter, DateAggregationType, DateDataField, FilterType, KpiTargetVisualization, KpiTimeVisualization, NegativeFormatType, NumberDataField, NumberFilter, NumberFormatting, NumberFormattingType, NumberRuleType, RdashDocument, SortingType, SparklineVisualization, SplineAreaChartVisualization, StackedColumnChartVisualization, ValueComparisonType } from "@revealbi/dom";
 import { DataSourceFactory } from "./DataSourceFactory";
+import { DashboardCreator } from "./IDashboardCreator";
 
-export class SalesDashboard {
+export class SalesDashboard implements DashboardCreator {
+    name: string = "Sales Dashboard";
 
-    static createDashboard(): RdashDocument {
+    createDashboard(): RdashDocument {
 
         const excelDataSourceItem = DataSourceFactory.getSalesDataSourceItem();
 

samples/sandbox/src/dashboards/SnowflakeDatasourceDashboard.ts

@@ -0,0 +1,38 @@
+import { DashboardCreator } from "./IDashboardCreator";
+import { PieChartVisualization, RdashDocument, SnowflakeDataSource, SnowflakeDataSourceItem } from "@revealbi/dom";
+import { NumberField, TextField } from "@revealbi/dom";
+
+export class SnowflakeDataSourceDashboard implements DashboardCreator {
+  name: string = "Snowflake Data Source Dashboard";
+
+  createDashboard() {
+    const document = new RdashDocument("Snowflake Data Source Dashboard");
+
+    const ds = new SnowflakeDataSource("Snowflake", "Snowflake DataSource");
+    ds.account = "pqwkobs-xb90908"
+    ds.defaultRefreshRate = 120
+    ds.host = "gpiskyj-al16914.snowflakecomputing.com"
+    ds.database = "SNOWFLAKE_SAMPLE_DATA"
+    ds.warehouse = "COMPUTE_WH"
+    ds.schema = "TPCH_SF10"
+
+
+    const dsi = new SnowflakeDataSourceItem("Snowflake DSI", ds);
+    dsi.schema = "TPCH_SF10";
+    dsi.table = "ORDERS";
+    dsi.database = "SNOWFLAKE_SAMPLE_DATA";
+    dsi.fields = [
+      new NumberField("O_ORDERKEY"),
+      new NumberField("O_CUSTKEY"),
+      new TextField("O_ORDERPRIORITY"),
+    ];
+
+    const visualiztion = new PieChartVisualization("Snowflake Order Priorities", dsi);
+    visualiztion.setLabel("O_ORDERPRIORITY");
+    visualiztion.setValues("O_CUSTKEY");
+
+    document.visualizations.push(visualiztion);
+
+    return document;
+  }
+}

samples/sandbox/src/index.html

@@ -10,7 +10,7 @@
   </head>
   <body>
     <!-- <app-root></app-root> -->
-
+    <div id="header"></div>
     <div id="viewer" style="height: 100%;"></div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

samples/sandbox/src/main.ts

@@ -3,32 +3,58 @@ import { RdashDocument } from "@revealbi/dom";
 import { SqlServerDataSourceDashboard } from "./dashboards/SqlServerDataSourceDashboard";
 import { RestDataSourceDashboards } from "./dashboards/RestDataSourceDashboards";
 import { CustomDashboard } from "./dashboards/CustomDashboard";
+import { MySqlDataSourceDashboards } from "./dashboards/MySQLDataSourceDashboard";
 import { SalesDashboard } from "./dashboards/SalesDashboard";
+import { SnowflakeDataSourceDashboard } from "./dashboards/SnowflakeDatasourceDashboard";
 
 declare const $: any;
 
-$.ig.RevealSdkSettings.setBaseUrl("https://samples.revealbi.io/upmedia-backend/reveal-api/");
-//$.ig.RevealSdkSettings.setBaseUrl("http://localhost:5111/");
+// $.ig.RevealSdkSettings.setBaseUrl("https://samples.revealbi.io/upmedia-backend/reveal-api/");
+$.ig.RevealSdkSettings.setBaseUrl("http://localhost:5111/");
 
 const loadDashboard = async () => {
-
+    // List all Dashboard Creators that implement DashboardCreator interface here
+    const dashboardCreators = [
+        new SalesDashboard(),
+        new RestDataSourceDashboards(),
+        new MySqlDataSourceDashboards(),
+        new SnowflakeDataSourceDashboard(),
+    ]
     const viewer = document.getElementById('viewer');
-    if (viewer) {
-
-        //const dashboard = await $.ig.RVDashboard.loadDashboard("Sales");
-
-        // const document = await RdashDocument.load("Sales");
-        // const dashboard = await document.toRVDashboard();
-
-        //const dashboard = await CustomDashboard.createDashboard().toRVDashboard();
-        //const dashboard = await SqlServerDataSourceDashboard.createDashboard().toRVDashboard();
-        //const dashboard = await RestDataSourceDashboards.createDashboard().toRVDashboard();
-        const dashboard = await SalesDashboard.createDashboard().toRVDashboard();
+    const header = document.getElementById('header');
+    const revealView = new $.ig.RevealView(viewer);
+
+    if (header) {
+
+        // Add a dropdown to select the dashboard
+        header.innerHTML += "<select id='dashboard-name-input'></select> "
+        header.innerHTML += "<button id='dashboard-creator-btn'>Create Dashboard</button>"
+
+        const select = document.getElementById("dashboard-name-input") as HTMLSelectElement;
+        dashboardCreators.forEach(dashboardCreator => {
+            const option = document.createElement("option");
+            option.value = dashboardCreator.name;
+            option.text = dashboardCreator.name;
+            select.appendChild(option);
+        });
+
+        const button = document.getElementById("dashboard-creator-btn") as HTMLButtonElement;
+        const dashboardNameInput = document.getElementById("dashboard-name-input") as HTMLInputElement;
+
+        button.addEventListener("click", async () => {
+            const dashboardName = dashboardNameInput.value;
+            const dashboardCreator = dashboardCreators.find(x => x.name === dashboardName);
+            if (dashboardCreator) {
+                const dashboard = await dashboardCreator.createDashboard().toRVDashboard();
+                revealView.dashboard = dashboard;
+            }
+        });
+    }
 
-        const revealView = new $.ig.RevealView(viewer);
+    if (viewer) {
+        const dashboard = null;
         revealView.dashboard = dashboard;
     }
-
 }
 
 loadDashboard();