db-viewer-component v4.4.9
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
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago