zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-07 02:28:54 +08:00
Code Issues Projects Releases Wiki Activity

fix images in Basic usage

Browse Source
This commit is contained in:
lana-k
2022-01-06 21:38:29 +01:00
parent b273d7677d
commit 7dde645fbc
1 changed files with 20 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
Basic-usage.md
View File

@@ -1,62 +1,36 @@
# Choose SQLite database or CSV file # Basic usage
## Choose SQLite database or CSV file
You can choose a database or a CSV file right on the welcom page (fig. 1). The You can choose a database or a CSV file right on the welcom page (fig. 1). The
supported file extentions: `.csv`, `.db`,`.sqlite` and `.sqlite3`. supported file extentions: `.csv`, `.db`,`.sqlite` and `.sqlite3`.
<p align="center"> ![Fig. 1: Welcome page](./img/Screenshot_welcome.png)
<img class="figure" src="./img/Screenshot_welcome.png" width="500"/>
</p>
<p align="center">
<sub>
Fig. 1: Welcome page
</sub>
</p>
If you choose a CSV file it will be parsed. Then sqliteviz creates a new If you choose a CSV file it will be parsed. Then sqliteviz creates a new
database with data from the CSV. You can change parsing settings and table name database with data from the CSV. You can change parsing settings and table name
in the dialog which is shown automatically if you choose a CSV file (fig. 2). in the dialog which is shown automatically if you choose a CSV file (fig. 2).
<p align="center"> ![Fig. 2: CSV import dialog](./img/Screenshot_csv.png?0.15.0)
<img class="figure" src="./img/Screenshot_csv.png?0.15.0" width="700"/>
</p>
<p align="center">
<sub>
Fig. 2: CSV import dialog
</sub>
</p>
If you don't have a database or CSV press `Create empty database` button and If you don't have a database or CSV press `Create empty database` button and
then fill an empty database using DDL and DML statements. A tab with an example then fill an empty database using DDL and DML statements. A tab with an example
of how to do it will be opened automatically (fig. 3). of how to do it will be opened automatically (fig. 3).
<p align="center"> ![Fig. 3: Workspace (empty database)](./img/Screenshot_editor.png?0.15.0)
<img class="figure" src="./img/Screenshot_editor.png?0.15.0" width="700"/>
</p>
<p align="center">
<sub>
Fig. 3: Workspace (empty database)
</sub>
</p>
Database tables, columns and their types are shown in the left panel of the Database tables, columns and their types are shown in the left panel of the
`Workspace` (fig. 4). `Workspace` (fig. 4).
<p align="center"> ![Fig. 4: Workspace (not empty database)](./img/Screenshot_editor_with_db.png?0.15.0)
<img class="figure" src="./img/Screenshot_editor_with_db.png?0.15.0" width="750"/>
</p>
<p align="center">
<sub>
Fig. 4: Workspace (not empty database)
</sub>
</p>
# Create inquiry ## Create inquiry
## Open new tab ### Open new tab
Press `Create` button in the top toolbar or use `Ctrl+b` (`Cmd+b` for MacOS) Press `Create` button in the top toolbar or use `Ctrl+b` (`Cmd+b` for MacOS)
keyboard shortcut to open a new tab for an inquiry. An inquiry consists of three keyboard shortcut to open a new tab for an inquiry. An inquiry consists of three
@@ -66,12 +40,12 @@ the three parts of inquiry. By default the top panel shows SQL query editor and
the bottom panel shows the result set. You can switch any panel to any other the bottom panel shows the result set. You can switch any panel to any other
view with corresponding buttons in the right side toolbar. view with corresponding buttons in the right side toolbar.
* <img src="./img/sql.svg"/> – Switch the panel to an SQL query editor. In that * ![](./img/sql.svg) – Switch the panel to an SQL query editor. In that
editor you can specify and run not only a `SELECT` statement for getting data editor you can specify and run not only a `SELECT` statement for getting data
but also DDL/DML statements for modifying the database. but also DDL/DML statements for modifying the database.
* <img src="./img/table.svg"/> – Switch the panel to the result set. Here you * ![](./img/table.svg) – Switch the panel to the result set. Here you
can see the result of the query execution. can see the result of the query execution.
* <img src="./img/visualisation.svg"/> – Switch the panel to visualisation. This * ![](./img/visualisation.svg) – Switch the panel to visualisation. This
panel allows building a pivot table and charts from the result set. panel allows building a pivot table and charts from the result set.
> **Note:** The query editor can show you hints: SQL keywords, table and column > **Note:** The query editor can show you hints: SQL keywords, table and column
@@ -80,9 +54,9 @@ view with corresponding buttons in the right side toolbar.
> database column names will be always available in the hint. Press `Ctrl+Space` > database column names will be always available in the hint. Press `Ctrl+Space`
> to show a hint explicitly. > to show a hint explicitly.
## Run query ### Run query
Press <img src="./img/run.svg"/> button in the right side toolbar of an SQL Press ![](./img/run.svg) button in the right side toolbar of an SQL
editor panel or use `Ctrl+r` or `Ctrl+Enter` (`Cmd+r` or `Cmd+Enter` for MacOS) editor panel or use `Ctrl+r` or `Ctrl+Enter` (`Cmd+r` or `Cmd+Enter` for MacOS)
keyboard shortcut to execute a query in the current opened tab. keyboard shortcut to execute a query in the current opened tab.
@@ -91,14 +65,14 @@ keyboard shortcut to execute a query in the current opened tab.
The query result will be displayed in the result panel (fig. 4). The query result will be displayed in the result panel (fig. 4).
## Create visualisation ### Create visualisation
After running a query switch any panel to the visualisation. Switch to the After running a query switch any panel to the visualisation. Switch to the
disired type of visualisation with buttons in the right side toolbar of the disired type of visualisation with buttons in the right side toolbar of the
visualisation panel. visualisation panel.
* <img src="./img/chart.svg"/> – Switch to a chart type visualisation. * ![](./img/chart.svg) – Switch to a chart type visualisation.
* <img src="./img/pivot.svg"/> – Switch to a pivot type visualisation. * ![](./img/pivot.svg) – Switch to a pivot type visualisation.
> **Note:** All unsaved changes in the current visualisation will be lost when > **Note:** All unsaved changes in the current visualisation will be lost when
> you switch to the other visualisation type. > you switch to the other visualisation type.
@@ -112,20 +86,11 @@ component (fig. 5). The same component with some additional features is used in
Plotly Chart Studio. Explore its [documentation][1] to learn how to build charts Plotly Chart Studio. Explore its [documentation][1] to learn how to build charts
with `react-chart-editor`. with `react-chart-editor`.
<p align="center"> ![Fig. 5: Visualisation with a chart](./img/Screenshot_chart.png?0.15.0)
<img class="figure" src="./img/Screenshot_chart.png?0.15.0" width="750"/>
</p>
<p align="center"> You can save any visualisation as an image by clicking ![](./img/camera.svg).
<sub>
Fig. 5: Visualisation with a chart
</sub>
</p>
You can save any visualisation as an image by clicking <img ## Save inquiry
src="./img/camera.svg"/>.
# Save inquiry
Press `Save` button in the top toolbar or use `Ctrl+s` (`Cmd+s` for MacOS) Press `Save` button in the top toolbar or use `Ctrl+s` (`Cmd+s` for MacOS)
keyboard shortcut to save an inquiry in the current opened tab to local storage keyboard shortcut to save an inquiry in the current opened tab to local storage