FLOW-958 : @ollion/flow-dashboard

.github/workflows/release.yml

@@ -52,6 +52,7 @@ jobs:
               "@ollion/flow-core-config":"packages/flow-core-config/CHANGELOG.md",
               "@ollion/flow-form-builder":"packages/flow-form-builder/CHANGELOG.md",
               "@ollion/flow-lineage":"packages/flow-lineage/CHANGELOG.md",
+              "@ollion/flow-dashboard":"packages/flow-dashboard/CHANGELOG.md",
               "@ollion/custom-elements-manifest-to-types":"packages/custom-elements-manifest-to-types/CHANGELOG.md"
             }
 

.storybook/main.ts

@@ -9,7 +9,8 @@ const alias = [
 	"flow-lineage",
 	"flow-log",
 	"flow-md-editor",
-	"flow-table"
+	"flow-table",
+	"flow-dashboard"
 ].map(pkg => ({
 	find: `@ollion/${pkg}`,
 	replacement: path.resolve(__dirname, "../packages", pkg, "src")

.storybook/preview.ts

@@ -13,6 +13,8 @@ import "@ollion/flow-table";
 import "@ollion/flow-md-editor";
 import "@ollion/flow-form-builder";
 import "@ollion/flow-lineage";
+import "@ollion/flow-dashboard";
+
 import { setCustomElementsManifest, setCustomElements } from "@storybook/web-components";
 import { themes } from "@storybook/theming";
 import { Preview } from "@storybook/web-components";
@@ -123,6 +125,9 @@ async function run() {
 	const tableCustomElements = await (
 		await fetch(new URL("../packages/flow-table/custom-elements.json", import.meta.url))
 	).json();
+	const dashboardCustomElements = await (
+		await fetch(new URL("../packages/flow-dashboard/custom-elements.json", import.meta.url))
+	).json();
 
 	const mdEditorCustomElements = await (
 		await fetch(new URL("../packages/flow-md-editor/custom-elements.json", import.meta.url))
@@ -140,6 +145,8 @@ async function run() {
 
 	setCustomElementsManifest(mdEditorCustomElements);
 	setCustomElements(mdEditorCustomElements);
+	setCustomElementsManifest(dashboardCustomElements);
+	setCustomElements(dashboardCustomElements);
 }
 
 run();

package.json

@@ -38,7 +38,7 @@
     "@changesets/cli": "^2.25.0",
     "@ollion/custom-elements-manifest-to-types": "workspace:*",
     "@ollion/prettier-config": "^2.1.0",
-    "@faker-js/faker": "^7.6.0",
+    "@faker-js/faker": "^8.3.1",
     "@storybook/addon-actions": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",
@@ -66,7 +66,8 @@
     "sass": "^1.52.3",
     "storybook": "^7.5.3",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11"
+    "vite": "^4.4.11",
+    "@types/d3": "7.4.3"
   },
   "dependencies": {
     "@ollion/flow-aws-icon": "latest",
@@ -77,11 +78,13 @@
     "@ollion/flow-lineage": "workspace:*",
     "@ollion/flow-log": "workspace:*",
     "@ollion/flow-md-editor": "workspace:*",
-    "@ollion/flow-product-icon": "latest",
+    "@ollion/flow-product-icon": "1.14.0",
     "@ollion/flow-system-icon": "latest",
     "@ollion/flow-table": "workspace:*",
+    "@ollion/flow-dashboard": "workspace:*",
     "jspdf": "^2.5.1",
-    "lit": "^3.1.0"
+    "lit": "^3.1.0",
+    "d3": "^7.6.1"
   },
   "loki": {
     "configurations": {

packages/flow-core/README.md

@@ -1,6 +1,7 @@
 # Flow-core
 
-![npm](https://badgen.net/npm/v/@ollion/flow-core) ![license](https://badgen.net/npm/license/@ollion/flow-core) ![types](https://badgen.net/npm/types/@ollion/flow-core) ![downloads](https://badgen.net//npm/dw/@ollion/flow-core) ![build](https://github.com/ollionorg/flow-core/actions/workflows/build.yml/badge.svg) ![release](https://github.com/ollionorg/flow-core/actions/workflows/release.yml/badge.svg) ![CodeQL](https://github.com/ollionorg/flow-core/workflows/CodeQL/badge.svg) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=ollion_flow-core&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=ollion_flow-core) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=ollion_flow-core&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=ollion_flow-core) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ollion_flow-core&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=ollion_flow-core) [![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=ollion_flow-core&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=ollion_flow-core) [![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=ollion_flow-core&metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=ollion_flow-core) [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=ollion_flow-core&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=ollion_flow-core) [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=ollion_flow-core&metric=bugs)](https://sonarcloud.io/summary/new_code?id=ollion_flow-core)
+![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Follionorg%2Fflow-core%2Fmain%2Fpackages%2Fflow-core%2Fpackage.json&query=%24.version&prefix=v&logo=npm&label=%40ollion%2Fflow-core) ![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Follionorg%2Fflow-core%2Fmain%2Fpackages%2Fflow-form-builder%2Fpackage.json&query=%24.version&prefix=v&logo=npm&label=%40ollion%2Fflow-form-builder) ![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Follionorg%2Fflow-core%2Fmain%2Fpackages%2Fflow-table%2Fpackage.json&query=%24.version&prefix=v&logo=npm&label=%40ollion%2Fflow-table) ![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Follionorg%2Fflow-core%2Fmain%2Fpackages%2Fflow-lineage%2Fpackage.json&query=%24.version&prefix=v&logo=npm&label=%40ollion%2Fflow-lineage) ![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Follionorg%2Fflow-core%2Fmain%2Fpackages%2Fflow-log%2Fpackage.json&query=%24.version&prefix=v&logo=npm&label=%40ollion%2Fflow-log) ![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Follionorg%2Fflow-core%2Fmain%2Fpackages%2Fflow-code-editor%2Fpackage.json&query=%24.version&prefix=v&logo=npm&label=%40ollion%2Fflow-code-editor) ![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Follionorg%2Fflow-core%2Fmain%2Fpackages%2Fflow-md-editor%2Fpackage.json&query=%24.version&prefix=v&logo=npm&label=%40ollion%2Fflow-md-editor)
+![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Follionorg%2Fflow-core%2Fmain%2Fpackages%2Fflow-core%2Fpackage.json&query=%24.license&label=license) ![build](https://github.com/ollionorg/flow-core/actions/workflows/build.yml/badge.svg) ![release](https://github.com/ollionorg/flow-core/actions/workflows/release.yml/badge.svg) ![CodeQL](https://github.com/ollionorg/flow-core/workflows/CodeQL/badge.svg) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=cldcvr_flow-core&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=cldcvr_flow-core) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=cldcvr_flow-core&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=cldcvr_flow-core) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=cldcvr_flow-core&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=cldcvr_flow-core) [![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=cldcvr_flow-core&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=cldcvr_flow-core) [![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=cldcvr_flow-core&metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=cldcvr_flow-core) [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=cldcvr_flow-core&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=cldcvr_flow-core) [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=cldcvr_flow-core&metric=bugs)](https://sonarcloud.io/summary/new_code?id=cldcvr_flow-core)
 
 Flow-core is the base library required by any flow dependecies. It consists mostly of building blocks such design + system tokens, atoms, molecules, base themes, etc.
 

packages/flow-dashboard/.npmignore

@@ -0,0 +1,8 @@
+*
+!dist/**/*.*
+!shims.d.ts
+!custom-elements.json
+!html.html-data.json
+!src/**/*.*
+!README.md
+!umd/**/*.*

packages/flow-dashboard/CHANGELOG.md

@@ -0,0 +1,13 @@
+<h4 className="margin-btm-8">Release Notes</h4>
+
+# Change Log
+
+## [0.0.1] - 2023-11-03
+
+### First Release
+
+- `@ollion/flow-dashboard` released.
+
+### Note
+
+- Since this is the first release, we are testing it with various frameworks (thus, it is not production-ready)

packages/flow-dashboard/LICENSE

@@ -0,0 +1,21 @@
+
+Copyright (c) 2022 CloudCover Consultancy Pvt Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE 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.

packages/flow-dashboard/README.md

@@ -0,0 +1,60 @@
+# Flow Dashboard
+
+The Flow dashboard is built on the Flow design framework ([website](https://flow.ollion.com/) / [github](https://github.com/ollionorg/flow-core))
+
+# Installation
+
+### 1️⃣ Install flow dashboard dependency
+
+```
+npm i --save @ollion/flow-dashboard
+```
+
+**Note:** after installation, re-start your application.
+
+<br>
+
+### 2️⃣ Import flow-dashboard into your project
+
+Paste the below snippet in your project and add your application startup/runtime code to it.
+
+```javascript
+import "@ollion/flow-core";
+import "@ollion/flow-dashboard";
+```
+
+<br>
+
+### 3️⃣ For a typescript enabled project (optional)
+
+**Note:** After adding, re-start your application. Make sure you are using version >4.5
+
+**For Vue 3:**
+Copy paste below import types in your `main.ts` file.
+
+```Javascript
+import "@ollion/flow-dashboard/dist/types/vue3";
+```
+
+<details>
+<summary>For Vue 2</summary>
+
+Copy paste below import types in your `main.ts` file.
+
+```Javascript
+import "@ollion/flow-dashboard/dist/types/vue2";
+```
+
+</details>
+
+<details>
+<summary>For React</summary>
+
+**React**: Include react type in `tsconfig.json` file like below.
+
+```json
+"include": ["src", "./node_modules/@ollion/flow-dashboard/dist/types/react.ts"]
+```
+
+</details>
+<br>

packages/flow-dashboard/compile.sh

@@ -0,0 +1,12 @@
+
+#!/bin/bash
+
+HERE=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+
+cd "$HERE"
+
+pnpm run analyze
+
+echo "building library..."
+pnpm vite build --emptyOutDir
+pnpm vite build --emptyOutDir --config vite.umd.config.ts

packages/flow-dashboard/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@ollion/flow-dashboard",
+  "version": "0.0.1",
+  "description": "Dashboard as code",
+  "module": "dist/flow-dashboard.es.js",
+  "main": "dist/flow-dashboard.cjs.js",
+  "types": "dist/src/index.d.ts",
+  "scripts": {
+    "build": "bash ./compile.sh",
+    "build:watch": "concurrently --kill-others \"vite build --emptyOutDir --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" && wca analyze src --format vscode --outFile html.html-data.json",
+    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
+    "test": "web-test-runner ./src/**/*.test.ts --node-resolve --port 8095",
+    "test:file": "pnpm run build && web-test-runner --node-resolve --port 8095",
+    "test:watch": "pnpm run build && web-test-runner ./src/**/*.test.ts --node-resolve --watch --port 8095"
+  },
+  "keywords": [
+    "web-components",
+    "lit-element",
+    "typescript",
+    "lit"
+  ],
+  "dependencies": {
+    "@ollion/flow-core": "workspace:*",
+    "@ollion/flow-core-config": "workspace:*",
+    "axios": "^0.27.2",
+    "d3": "^7.6.1",
+    "gridstack": "^9.5.0",
+    "lit": "^3.1.0",
+    "rxjs": "^7.8.1"
+  },
+  "peerDependencies": {
+    "@ollion/flow-core": "^*",
+    "@ollion/flow-core-config": "^*"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.5.7",
+    "@open-wc/testing": "^3.1.5",
+    "@types/d3": "7.4.3",
+    "@types/jest": "29.5.5",
+    "@web/dev-server-esbuild": "^0.4.1",
+    "@web/test-runner": "^0.17.1",
+    "concurrently": "^8.2.1",
+    "esbuild-sass-plugin": "2.2.6",
+    "lit-html": "^3.1.0",
+    "sass": "^1.52.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.11",
+    "web-component-analyzer": "^2.0.0-next.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ollionorg/flow-core.git",
+    "directory": "packages/flow-dashboard"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "customElements": "custom-elements.json",
+  "bugs": {
+    "url": "https://github.com/ollionorg/flow-core/issues"
+  },
+  "homepage": "https://github.com/ollionorg/flow-core/packages/flow-dashboard#readme",
+  "author": "@ollion",
+  "license": "MIT"
+}

packages/flow-dashboard/src/components/f-dashboard/f-dashboard-global.scss

@@ -0,0 +1,46 @@
+@import "../../../../flow-core/src/mixins/scss/mixins";
+
+@import "gridstack/dist/gridstack.min.css";
+
+f-dashboard {
+	@include base();
+	height: 100%;
+	width: 100%;
+
+	display: flex;
+	overflow: auto;
+	.grid-stack {
+		width: 100%;
+		.grid-stack-item {
+			.grid-stack-item-content {
+				background: var(--color-surface-secondary);
+				display: flex;
+				flex-direction: column;
+				f-timeseries-chart {
+					flex: 1 0 100%;
+				}
+				> f-div[height="fill-container"] {
+					flex: 1 1;
+					max-height: 100%;
+				}
+				> f-div[width="fill-container"] {
+					width: 100%;
+				}
+			}
+		}
+	}
+}
+
+f-div[direction="column"] {
+	> f-dashboard {
+		flex: 1 1;
+		max-height: 100%;
+	}
+}
+
+f-div[direction="row"] {
+	> f-dashboard {
+		flex: 1 1;
+		max-width: 100%;
+	}
+}

packages/flow-dashboard/src/components/f-dashboard/f-dashboard-utils.ts

@@ -0,0 +1,62 @@
+import { html, nothing } from "lit";
+import { FDashboardWidget } from "../../types";
+
+export function getWidgetHeader(widget: FDashboardWidget) {
+	if (widget.header) {
+		if (typeof widget.header === "object") {
+			return html`<f-div
+				align="middle-left"
+				height="hug-content"
+				padding="medium"
+				direction="column"
+				border="small solid subtle bottom"
+			>
+				<f-text ellipsis .tooltip=${widget.header.title} variant="heading" weight="medium"
+					>${widget.header.title}</f-text
+				>
+				<f-text ellipsis state="secondary" .tooltip=${widget.header.description} size="small"
+					>${widget.header.description}</f-text
+				>
+			</f-div>`;
+		} else if (typeof widget.header === "function") {
+			return widget.header();
+		}
+	}
+
+	return nothing;
+}
+
+export function getWidgetFooter(widget: FDashboardWidget) {
+	if (widget.footer) {
+		if (typeof widget.footer === "string") {
+			return html`<f-div
+				align="middle-left"
+				height="hug-content"
+				padding="medium"
+				direction="column"
+				border="small solid subtle top"
+			>
+				<f-text state="subtle" size="small">${widget.footer}</f-text>
+			</f-div>`;
+		} else if (typeof widget.footer === "function") {
+			return widget.footer();
+		}
+	}
+
+	return nothing;
+}
+
+export function renderWidget(widget: FDashboardWidget) {
+	switch (widget.type) {
+		case "big-number":
+			return html`<f-div padding="medium" class="big-number">${widget.data.toFixed(2)}</f-div>`;
+
+		case "timeseries":
+			return html`<f-div padding="medium"
+				><f-timeseries-chart .config=${widget.data}></f-timeseries-chart
+			></f-div>`;
+
+		default:
+			return nothing;
+	}
+}