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
supported file extentions: `.csv`, `.db`,`.sqlite` and `.sqlite3`.
<p align="center">
<img class="figure" src="./img/Screenshot_welcome.png" width="500"/>
</p>
![Fig. 1: Welcome page](./img/Screenshot_welcome.png)
<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
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).
<p align="center">
<img class="figure" src="./img/Screenshot_csv.png?0.15.0" width="700"/>
</p>
![Fig. 2: CSV import dialog](./img/Screenshot_csv.png?0.15.0)
<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
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).
<p align="center">
<img class="figure" src="./img/Screenshot_editor.png?0.15.0" width="700"/>
</p>
![Fig. 3: Workspace (empty database)](./img/Screenshot_editor.png?0.15.0)
<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
`Workspace` (fig. 4).
<p align="center">
<img class="figure" src="./img/Screenshot_editor_with_db.png?0.15.0" width="750"/>
</p>
![Fig. 4: Workspace (not empty database)](./img/Screenshot_editor_with_db.png?0.15.0)
<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)
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
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
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.
* <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.
> **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`
> 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)
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).
## Create visualisation
### Create visualisation
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
visualisation panel.
* <img src="./img/chart.svg"/> – Switch to a chart type visualisation.
* <img src="./img/pivot.svg"/> – Switch to a pivot type visualisation.
* ![](./img/chart.svg) – Switch to a chart type visualisation.
* ![](./img/pivot.svg) – Switch to a pivot type visualisation.
> **Note:** All unsaved changes in the current visualisation will be lost when
> 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
with `react-chart-editor`.
<p align="center">
<img class="figure" src="./img/Screenshot_chart.png?0.15.0" width="750"/>
</p>
![Fig. 5: Visualisation with a chart](./img/Screenshot_chart.png?0.15.0)
<p align="center">
<sub>
Fig. 5: Visualisation with a chart
</sub>
</p>
You can save any visualisation as an image by clicking ![](./img/camera.svg).
You can save any visualisation as an image by clicking <img
src="./img/camera.svg"/>.
# Save inquiry
## Save inquiry
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