From 808dde089ae1dcf8b59521a5f634286ab6e300c2 Mon Sep 17 00:00:00 2001 From: Viktor Date: Tue, 4 Feb 2025 14:03:49 +0700 Subject: [PATCH 1/5] Create sandbox for Mysql Data source --- .../DataSourceItems/MySqlDataSourceItem.ts | 7 ++- .../src/dashboards/IDashboardCreator.ts | 3 ++ .../dashboards/MySQLDataSourceDashboard.ts | 39 ++++++++++++++++ .../dashboards/RestDataSourceDashboards.ts | 8 ++-- .../sandbox/src/dashboards/SalesDashboard.ts | 6 ++- samples/sandbox/src/index.html | 2 +- samples/sandbox/src/main.ts | 46 ++++++++++++------- 7 files changed, 87 insertions(+), 24 deletions(-) create mode 100644 samples/sandbox/src/dashboards/IDashboardCreator.ts create mode 100644 samples/sandbox/src/dashboards/MySQLDataSourceDashboard.ts diff --git a/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts b/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts index 7bd0ecc..a2ded20 100644 --- a/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts +++ b/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts @@ -1,13 +1,16 @@ import { DataSource } from "../DataSource"; -import { MySqlDataSource } from "../DataSources"; +import { MySqlDataSource, MicrosoftSqlServerDataSource } from "../DataSources"; import { IProcessDataOnServer } from "../Interfaces/IProcessDataOnServer"; import { ProcedureDataSourceItem } from "../ProcedureDataSourceItem"; export class MySqlDataSourceItem extends ProcedureDataSourceItem implements IProcessDataOnServer { - constructor(title: string, dataSource: DataSource) { + constructor(title: string, dataSource: DataSource, table?: string) { super(title, dataSource); this.processDataOnServer = true; + if(table){ + this.table = table; + } } get processDataOnServer(): boolean { diff --git a/samples/sandbox/src/dashboards/IDashboardCreator.ts b/samples/sandbox/src/dashboards/IDashboardCreator.ts new file mode 100644 index 0000000..7c68ec0 --- /dev/null +++ b/samples/sandbox/src/dashboards/IDashboardCreator.ts @@ -0,0 +1,3 @@ +export interface DashboardCreator { + name: string; +} \ No newline at end of file diff --git a/samples/sandbox/src/dashboards/MySQLDataSourceDashboard.ts b/samples/sandbox/src/dashboards/MySQLDataSourceDashboard.ts new file mode 100644 index 0000000..1cbf90e --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/samples/sandbox/src/dashboards/RestDataSourceDashboards.ts b/samples/sandbox/src/dashboards/RestDataSourceDashboards.ts index 174cdaa..6892e7a 100644 --- a/samples/sandbox/src/dashboards/RestDataSourceDashboards.ts +++ b/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; } } \ No newline at end of file diff --git a/samples/sandbox/src/dashboards/SalesDashboard.ts b/samples/sandbox/src/dashboards/SalesDashboard.ts index d050bdb..a77aff1 100644 --- a/samples/sandbox/src/dashboards/SalesDashboard.ts +++ b/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(); diff --git a/samples/sandbox/src/index.html b/samples/sandbox/src/index.html index d69ec22..8e3e02f 100644 --- a/samples/sandbox/src/index.html +++ b/samples/sandbox/src/index.html @@ -10,7 +10,7 @@ - +
diff --git a/samples/sandbox/src/main.ts b/samples/sandbox/src/main.ts index 7c48467..67afd6d 100644 --- a/samples/sandbox/src/main.ts +++ b/samples/sandbox/src/main.ts @@ -3,32 +3,46 @@ 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"; 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:5289/"); const loadDashboard = async () => { - + // List all Dashboard Creators that implement DashboardCreator interface here + const dashboardCreators = [ + new SalesDashboard(), + new RestDataSourceDashboards(), + new MySqlDataSourceDashboards() + ] 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) { + header.innerHTML += " " + header.innerHTML += "" + + 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(); From c36be84e815396556d3054352dcc993f1468979f Mon Sep 17 00:00:00 2001 From: Viktor Date: Wed, 5 Feb 2025 13:52:36 +0700 Subject: [PATCH 2/5] Remove unused changes --- packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts | 5 +---- samples/sandbox/src/main.ts | 4 ++-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts b/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts index a2ded20..d23d32f 100644 --- a/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts +++ b/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts @@ -5,12 +5,9 @@ import { ProcedureDataSourceItem } from "../ProcedureDataSourceItem"; export class MySqlDataSourceItem extends ProcedureDataSourceItem implements IProcessDataOnServer { - constructor(title: string, dataSource: DataSource, table?: string) { + constructor(title: string, dataSource: DataSource) { super(title, dataSource); this.processDataOnServer = true; - if(table){ - this.table = table; - } } get processDataOnServer(): boolean { diff --git a/samples/sandbox/src/main.ts b/samples/sandbox/src/main.ts index 67afd6d..4921578 100644 --- a/samples/sandbox/src/main.ts +++ b/samples/sandbox/src/main.ts @@ -8,8 +8,8 @@ import { SalesDashboard } from "./dashboards/SalesDashboard"; declare const $: any; -// $.ig.RevealSdkSettings.setBaseUrl("https://samples.revealbi.io/upmedia-backend/reveal-api/"); -$.ig.RevealSdkSettings.setBaseUrl("http://localhost:5289/"); +$.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 From ca1b071d9232f57fbd76a2d673b94801fa7fba53 Mon Sep 17 00:00:00 2001 From: henry Date: Wed, 5 Feb 2025 20:43:04 +0700 Subject: [PATCH 3/5] use dropdown --- .../src/Data/DataSourceItems/MySqlDataSourceItem.ts | 2 +- samples/sandbox/src/main.ts | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts b/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts index d23d32f..7bd0ecc 100644 --- a/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts +++ b/packages/dom/src/Data/DataSourceItems/MySqlDataSourceItem.ts @@ -1,5 +1,5 @@ import { DataSource } from "../DataSource"; -import { MySqlDataSource, MicrosoftSqlServerDataSource } from "../DataSources"; +import { MySqlDataSource } from "../DataSources"; import { IProcessDataOnServer } from "../Interfaces/IProcessDataOnServer"; import { ProcedureDataSourceItem } from "../ProcedureDataSourceItem"; diff --git a/samples/sandbox/src/main.ts b/samples/sandbox/src/main.ts index 4921578..8bd87e3 100644 --- a/samples/sandbox/src/main.ts +++ b/samples/sandbox/src/main.ts @@ -23,9 +23,19 @@ const loadDashboard = async () => { const revealView = new $.ig.RevealView(viewer); if (header) { - header.innerHTML += " " + + // Add a dropdown to select the dashboard + header.innerHTML += " " header.innerHTML += "" + 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; From 5464a1da1d78f2eaec57df4a54222843c934c510 Mon Sep 17 00:00:00 2001 From: henry Date: Mon, 10 Feb 2025 18:50:34 +0700 Subject: [PATCH 4/5] add snowflake ds sample dashboard --- .../Data/DataSources/SnowflakeDataSource.ts | 8 ++++ .../SnowflakeDatasourceDashboard.ts | 38 +++++++++++++++++++ samples/sandbox/src/main.ts | 8 ++-- 3 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 samples/sandbox/src/dashboards/SnowflakeDatasourceDashboard.ts diff --git a/packages/dom/src/Data/DataSources/SnowflakeDataSource.ts b/packages/dom/src/Data/DataSources/SnowflakeDataSource.ts index 0d5a43e..b2ca159 100644 --- a/packages/dom/src/Data/DataSources/SnowflakeDataSource.ts +++ b/packages/dom/src/Data/DataSources/SnowflakeDataSource.ts @@ -33,4 +33,12 @@ export class SnowflakeDataSource extends ProcessDataSource { set warehouse(value: string) { this.properties["Warehouse"] = value; } + + get schema(): string { + return this.properties["Schema"]; + } + + set schema(value: string) { + this.properties["Schema"] = value; + } } diff --git a/samples/sandbox/src/dashboards/SnowflakeDatasourceDashboard.ts b/samples/sandbox/src/dashboards/SnowflakeDatasourceDashboard.ts new file mode 100644 index 0000000..4a8bb31 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/samples/sandbox/src/main.ts b/samples/sandbox/src/main.ts index 8bd87e3..0e4c19f 100644 --- a/samples/sandbox/src/main.ts +++ b/samples/sandbox/src/main.ts @@ -5,18 +5,20 @@ 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 MySqlDataSourceDashboards(), + new SnowflakeDataSourceDashboard(), ] const viewer = document.getElementById('viewer'); const header = document.getElementById('header'); From 636cd8011059e99237d626458bea3243cf92f842 Mon Sep 17 00:00:00 2001 From: henry Date: Tue, 11 Feb 2025 13:49:30 +0700 Subject: [PATCH 5/5] change to use schema ds --- .../dom/src/Data/DataSources/SnowflakeDataSource.ts | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/dom/src/Data/DataSources/SnowflakeDataSource.ts b/packages/dom/src/Data/DataSources/SnowflakeDataSource.ts index b2ca159..31618c7 100644 --- a/packages/dom/src/Data/DataSources/SnowflakeDataSource.ts +++ b/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) @@ -33,12 +33,4 @@ export class SnowflakeDataSource extends ProcessDataSource { set warehouse(value: string) { this.properties["Warehouse"] = value; } - - get schema(): string { - return this.properties["Schema"]; - } - - set schema(value: string) { - this.properties["Schema"] = value; - } }