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

yarn
yarn start
Navigate to http://localhost:9998

benhuangbmj / db-viewer-component Goto Github PK