db-viewer-component

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

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

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.

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".

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}

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. An example of schema can be found here.
`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".

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

jacekd/db-viewer-component