🚨🚨 Warning: This repository has been moved to a new location. Please be aware that this repository is no longer actively maintained or updated. For the latest code and updates, visit the new repository at flow-core.🚨🚨

‼️ This repository is now considered archived, and any changes or issues should be directed to the new repository. Thank you for your understanding and cooperation. ‼️

Flow Lineage

A lineage chart is a graphical representation of a node's ancestors, showing the relationships among nodes. It is often used in analytics to show the relations and to trace their ancestry. Lineage charts can be in the form of a hierarchy data, showing the relationships between parents and children, or they can be more complex and show the relationships between more distant nodes.

Demo

Head over to Flow Lineage Storybook for a demo.

or

Clone and install the Flow Lineage demo (Vue 3).

Getting started

Flow Lineage is been built on Flow, an open source design framework. To run lineage, please make sure that you have Flow core as part of your project.

While installation if you run into any issues, head over to our known issues + solutions document to see if a solution already exists.

Note: If you already have Flow packages installed, please update to the latest versions

Note: If you do not have an existing front-end project, you can quickly create one from a flow starter kit.

Installation

1️⃣ Install flow lineage dependency

yarn add @cldcvr/flow-lineage

Note: after installation, re-start your application.

2️⃣ Import styles/CSS

For Vue JS: Paste the below snippet after the closing <template> tag in your App.vue file

<style>
 @import "@cldcvr/flow-lineage/dist/style.css";
</style> 

For React

React: Paste the below snippet in src/index.tsx or index.jsx file

import "@cldcvr/flow-lineage/dist/style.css";

For Angular

Angular: Add css file path in angular.json in styles property array.

"styles": ["@cldcvr/flow-lineage/dist/style.css"],

3️⃣ Import flow-lineage into your project

Paste the below snippet in your project and add your application startup/runtime code to it.

Note: This is required to register Flow elements error-free. We achieve this by importing all flow packages asynchronously and then starting up your application.

For Vue JS: Paste the below snippet in your project, for src/main.ts or main.js

import("@cldcvr/flow-core").then(async () => {
	await import('@cldcvr/flow-lineage');
	//add your application startup/runtime code here **
});

For React

Paste the below snippet in your project, for src/main.ts

import("@cldcvr/flow-core").then(async () => {
	await import("@cldcvr/flow-lineage");
	//add your application startup/runtime code here **
});

For Angular

Paste the below snippet in your project, for src/index.tsx or index.jsx

Example

VueJS: In the following example, I imported @cldcvr/flow-core and then imported the rest of the flow packages including @cldcvr/flow-lineage and after that startup code was added for VueJs createApp(App).use(router).mount(“#app”);.

import("@cldcvr/flow-core").then(async () => {
  await import("@cldcvr/flow-system-icon");
  await import("@cldcvr/flow-product-icon");
  await import("@cldcvr/flow-lineage");
  createApp(App).use(router).mount("#app"); //runtime
});

4️⃣ For a typescript enabled project (optional)

Note: after adding, re-start your application.

For Vue 3: Copy paste below import types in your main.ts file.

import "@cldcvr/flow-lineage/dist/types/vue3";

For Vue 2

Copy paste below import types in your main.ts file.

import "@cldcvr/flow-lineage/dist/types/vue2";

For React

React: Include react type in tsconfig.json file like below.

"include": ["src", "./node_modules/@cldcvr/flow-lineage/dist/types/react.ts"]

Sample code (Vue JS)

We have created a sample lineage component along with it's schema to get you going, simply copy paste the below language code block in your FE project.

Template

<template>
  <f-lineage
    direction="horizontal"
    :padding="28"
    :gap="100"
    :node-size.prop="{ width: 240, height: 53 }"
    :children-node-size.prop="{ width: 240, height: 32 }"
    :max-childrens="8"
    :links.prop="links" 
    :nodes.prop="nodes"
    :node-template.prop="nodeTemplate"
    :children-node-template.prop="childNodeTemplate"
  ></f-lineage>
</template>

Script

<script lang="ts">
import { defineComponent } from "vue";
import { html } from "lit";

export default defineComponent({
  name: "FlowLineage",
  data() {
    return {
      nodes: {
        rdj: {
          fData: {
            fullName: "Robert Downey Jr.",
            description: "Movies",
          },
        },
        judge: {
          fData: {
            fullName: "The Judge",
            description: "Hank Palmer",
          },
        },
        ironman: {
          fData: {
            fullName: "Iron Man",
            description: "Tony stark",
          },
          fChildren: {
            irchild1: {
              fData: {
                icon: "i-hashtag",
                title: "Iron man 1",
              },
            },
            irchild2: {
              fData: {
                icon: "i-paragraph",
                title: "Iron man 2",
              },
            },
          },
          fHideChildren: false,
        },
      },
      links: [
        {
          from: "rdj",
          to: "judge",
        },
        {
          from: "rdj",
          to: "ironman",
        },
      ],
       nodeTemplate: function (node: LineageNodeElement) {
			return html`
			<f-div
				width="100%"
				state="secondary"
				height="100%"
				padding="small"
				align="top-left"
				variant="curved"
				gap="small"
			>
				<f-pictogram
				variant="circle"
				source="${node.fData.fullName}"
				></f-pictogram>
				<f-div direction="column">
				<f-text size="small" ellipsis>${node.fData.fullName}</f-text>
				<f-text size="x-small" ellipsis>${node.fData.description}</f-text>
				</f-div>
				${node.childrenToggle}
			</f-div>
			`;
		},
		childNodeTemplate: function (node: LineageNodeElement) {
			return html`
			<f-div
				state="secondary"
				width="100%"
				height="100%"
				padding="none medium"
				align="middle-left"
				gap="small"
				border="small solid default bottom"
			>
				<f-icon source="${node.fData.icon}" size="small"></f-icon>
				<f-text size="small" ellipsis>${node.fData.title}</f-text>
			</f-div>
			`;
		},
    };
  },
});
</script>

Once it's running, you will see a lineage component like the image below.

Properties

Head over to Flow Lineage Storybook for all properties and playground.

Lineage templates

Flow nodes are represented through templates, this allow you to easily change, or write and use your own node template.

Head over to Flow Lineage templates to view whats available.