db-viewer-component

Database schema viewer web component. This web component can be used to view interactive database diagrams. See an example.

Note: This component doesn't work on old browsers that don't support web components.

Usage

In the case of webpack, import the package in your main js file.

import 'db-viewer-component';

in html:

<db-viewer src="/awesome-schema.json"></db-viewer>

The schema for viewer can be specified either with src attribute as shown above or by schema property of db-viwer html object like this:

document.querySelector('db-viewer').schema = awesomeSchema;

The json schema for db-veiwer schema can be found here. An example of schema can be found here.

A simple usage example can be found here. An example usage with the React can be found here. An example usage with the Svelte can be found here.

API

Attributes

Name	Description
src	Viewer-schema url. It should follow this json schema. An example of schema can be found here.
disable-table-movement	If this attribute exist. Table movement will be disabled.
viewport	Viewport positioning strategy on initial load. Can be "noChange", "centerByTablesWeight", "center" or "centerByTables".

Events

Name	Description	event.detail
tableClick	Clicking on a table.	{tableName, pos: {x, y}, width, height}
tableDblClick	Double clicking on a table.	{tableName, pos: {x, y}, width, height}
tableContextMenu	Right clicking on a table.	{tableName, pos: {x, y}, width, height}
tableMove	Moving table.	{tableName, pos: {x, y}, width, height}
tableMoveEnd	Moving table ends.	{tableName, pos: {x, y}, width, height}
relationClick	Clicking on a relation.	{fromTable, toTable, fromColumn, toColumn}
relationDblClick	Double clicking in a relation.	{fromTable, toTable, fromColumn, toColumn}
relationContextMenu	Right clikc on a realtion.	{fromTable, toTable, fromColumn, toColumn}
zoomIn	Zooming in view
zoomOut	Zooming out view
load	Schema file has been successfully fetched from server.
ready	Db viewer component has been loaded.
viewportClick	Clicking on the viewport.	{x, y}

Properties

Name	Description
schema	Get and set schema for viewer. This will override the html src attribute. Note: src attribute accepts the address of viewer-schema and schema property accepts javascript object as viewer-schema. The viwer-schema should follow this json schema. Note the only way that db-viewer can alter the schema is by adding position of tables.
src	Set viewer-schema url. It should follow this json schema. An example of schema can be found here. It has the same effect as the src attribute.
scrollLeft	Get and set scrolling position from left.
scrollTop	Get and set scrolling position from top.
disableTableMovement	Disables table movement if true.
viewport	Viewport positioning strategy on initial load. Can be "noChange", "centerByTablesWeight", "center" or "centerByTables".

Methods

Name	Description	Arguments
getTablePos	Get position of table.	table name
setTablePos	Set position of table.	table name, x cord, y cord
zoomIn	Zoom in view.
zoomOut	Zoom out view.
getZoom	Get amount of zoom

Styles

Styles can be applied by the following CSS variables.

Name	Description
--table-boarder-color	Table border color
--viewer-background-color	Viewer background color
--relation-color	Relation color
--relation-color-highlight	Relation color on mouse hover
--font-family	Font
--color	Text color

To run

1. yarn
2. yarn start
3. Navigate to http://localhost:9998