RND : Dashboard with custom templates

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

@@ -56,6 +56,9 @@ export function renderWidget(widget: FDashboardWidget) {
 				><f-timeseries-chart .config=${widget.data}></f-timeseries-chart
 			></f-div>`;
 
+		case "html-template":
+			return widget.data;
+
 		default:
 			return nothing;
 	}

packages/flow-dashboard/src/types.ts

@@ -29,8 +29,16 @@ export type FDashboardBigNumberWidget = FDashboardWidgetCore<number> & {
 	type: "big-number";
 	dataType?: "storage" | "time" | "count" | "currency" | "percentage";
 };
-export type FDashboardWidget = FDashboardBigNumberWidget | FDashboardTimeseriesWidget;
 
 export type FDashboardTimeseriesWidget = FDashboardWidgetCore<FTimeseriesChartConfig> & {
 	type: "timeseries";
 };
+
+export type FDashboardHTMLTemplateWidget = FDashboardWidgetCore<HTMLTemplateResult> & {
+	type: "html-template";
+};
+
+export type FDashboardWidget =
+	| FDashboardBigNumberWidget
+	| FDashboardTimeseriesWidget
+	| FDashboardHTMLTemplateWidget;

stories/flow-dashboard/examples/f-dashboard-with-templates.stories.ts

@@ -0,0 +1,194 @@
+import { Meta } from "@storybook/web-components";
+import { html } from "lit-html";
+import { FDashboard, FDashboardConfig, FDashboardWidget } from "@ollion/flow-dashboard";
+import { faker } from "@faker-js/faker";
+import { createRef, ref } from "lit/directives/ref.js";
+import getFakeUsers from "../../utils/mock-users-data";
+import field from "../../flow-form-builder/f-formbuilder-field";
+import { LineageNodes, LineageNodeLinks, LineageNodeElement } from "@ollion/flow-lineage";
+import { generateTimeseriesChartData } from "./../mock-data-utils";
+
+export default {
+	title: "@ollion/flow-dashboard/f-dashboard/Examples/html-templates",
+	argTypes: {
+		field: {
+			control: false
+		}
+	}
+} as Meta<any>;
+
+const nodeTemplate = function (node: LineageNodeElement) {
+	return html`<f-pictogram source="${node.id}" variant="circle" clickable></f-text>`;
+};
+
+const getWidgets = () => {
+	const nodes: LineageNodes = { n1: {}, n2: {}, n3: {}, n4: {}, n5: {}, n6: {}, n7: {} };
+	const links: LineageNodeLinks = [
+		{
+			from: "n1",
+			to: "n2"
+		},
+		{
+			from: "n1",
+			to: "n3"
+		},
+		{
+			from: "n3",
+			to: "n4"
+		},
+		{
+			from: "n3",
+			to: "n5"
+		},
+		{
+			from: "n1",
+			to: "n6"
+		},
+		{
+			from: "n2",
+			to: "n7"
+		}
+	];
+
+	const widgets: FDashboardWidget[] = [];
+	const startFrom = new Date();
+	const iconsNames = [
+		"p-azure",
+		"p-google",
+		"p-aws",
+		"p-hadoop",
+		"p-sonarcloud",
+		"p-snowflake",
+		"p-terraform",
+		"p-discord"
+	];
+	widgets.push({
+		type: "html-template",
+		id: faker.string.alpha(10),
+		placement: {
+			w: 4,
+			h: 4
+		},
+		data: html`<f-div variant="curved" overflow="hidden">
+			<f-lineage
+			.nodeTemplate=${nodeTemplate}
+			.nodes=${nodes}
+			.links=${links}
+			.node-size=${{
+				width: 36,
+				height: 36
+			}}
+			background="var(--color-surface-secondary)"
+			>
+			</f-lneage>
+		</f-div>`
+	});
+
+	widgets.push({
+		type: "html-template",
+		id: faker.string.alpha(10),
+		placement: {
+			w: 4,
+			h: 4
+		},
+		data: html`<f-div variant="curved" padding="medium" overflow="hidden">
+			<f-form-builder .field=${field}> </f-form-builder>
+		</f-div>`
+	});
+
+	widgets.push({
+		type: "big-number",
+		data: faker.number.int({ min: 11, max: 999 }),
+		dataType: "count",
+		id: faker.string.alpha(10),
+		header: {
+			title: faker.company.name(),
+			description: faker.lorem.sentences(3)
+		},
+		footer: `Powered by Flow`,
+		placement: {
+			w: 4,
+			h: 4
+		}
+	});
+
+	widgets.push({
+		type: "timeseries",
+		data: {
+			data: generateTimeseriesChartData(startFrom)
+		},
+		id: faker.string.alpha(10),
+		header() {
+			const name = faker.company.name();
+			const description = faker.lorem.sentences(3);
+			return html`<f-div
+				align="middle-left"
+				height="hug-content"
+				padding="medium"
+				gap="medium"
+				border="small solid subtle bottom"
+			>
+				<f-icon .source=${faker.helpers.arrayElement(iconsNames)} size="large"></f-icon>
+				<f-div direction="column" align="middle-left">
+					<f-text ellipsis .tooltip=${name} variant="heading" weight="medium">${name}</f-text>
+					<f-text ellipsis .tooltip=${description} size="small">${description}</f-text>
+				</f-div>
+			</f-div>`;
+		},
+		footer: () => {
+			const date = faker.date.recent({ refDate: new Date() });
+			const state = faker.helpers.arrayElement(["danger", "success", "warning"]);
+			return html`<f-div
+				padding="medium"
+				gap="auto"
+				border="small solid subtle top"
+				height="hug-content"
+			>
+				<f-div gap="small" align="middle-left">
+					<f-icon source="i-clock-outline" size="small" .state=${state}></f-icon>
+					<f-text .state=${state} size="small"
+						>Last updated on ${date.toLocaleDateString()} ${date.toLocaleTimeString()}</f-text
+					>
+				</f-div>
+				<f-button label="view details" size="x-small" icon-right="i-new-tab"></f-button>
+			</f-div>`;
+		},
+		placement: {
+			w: 12,
+			h: 4
+		}
+	});
+
+	widgets.push({
+		type: "html-template",
+		id: faker.string.alpha(10),
+		placement: {
+			w: 12,
+			h: 4
+		},
+		data: html`<f-div variant="curved" overflow="hidden">
+			<f-table-schema
+				.stickyHeader=${true}
+				.showSearchBar=${false}
+				sticky-cell-background="secondary"
+				variant="underlined"
+				.data=${getFakeUsers(10, 6)}
+			>
+			</f-table-schema>
+		</f-div>`
+	});
+
+	return widgets;
+};
+const Template = () => {
+	const dashboardRef = createRef<FDashboard>();
+	const dashboardConfig: FDashboardConfig = {
+		widgets: getWidgets()
+	};
+
+	return html`<f-div height="100%" width="100%" gap="small" direction="column">
+		<f-dashboard ${ref(dashboardRef)} .config=${dashboardConfig}> </f-dashboard>
+	</f-div>`;
+};
+
+export const basic = Template.bind({});

stories/utils/mock-users-data.ts

@@ -35,8 +35,8 @@ export default function getFakeUsers(rowCount = 100, columnCount = 8): FTableSch
 		const lastName = {
 			value: faker.person.lastName(),
 			template: function () {
-				return html`<f-div gap="x-small" align="middle-center" width="100%" height="100%"
-					><f-text inline state="success">${this.value}</f-text></f-div
+				return html`<f-div gap="x-small" width="100%" height="100%"
+					><f-text inline>${this.value}</f-text></f-div
 				>`;
 			}
 		};
@@ -111,7 +111,6 @@ export default function getFakeUsers(rowCount = 100, columnCount = 8): FTableSch
 	const header: Record<string, FTableSchemaHeaderCell> = {
 		firstName: {
 			value: "First name",
-			sticky: true,
 			template: function () {
 				return html`<f-div height="100%" align="middle-left"
 					><f-text state="success">${this.value}</f-text></f-div