From 7dde645fbcf056e669610f8efafdb46ce83ee10f Mon Sep 17 00:00:00 2001 From: lana-k Date: Thu, 6 Jan 2022 21:38:29 +0100 Subject: [PATCH] fix images in Basic usage --- Basic-usage.md | 75 ++++++++++++++------------------------------------ 1 file changed, 20 insertions(+), 55 deletions(-) diff --git a/Basic-usage.md b/Basic-usage.md index baef8e1..b8a9f18 100644 --- a/Basic-usage.md +++ b/Basic-usage.md @@ -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`. -

- -

+![Fig. 1: Welcome page](./img/Screenshot_welcome.png) -

- - Fig. 1: Welcome page - -

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

- -

+![Fig. 2: CSV import dialog](./img/Screenshot_csv.png?0.15.0) -

- - Fig. 2: CSV import dialog - -

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

- -

+![Fig. 3: Workspace (empty database)](./img/Screenshot_editor.png?0.15.0) -

- - Fig. 3: Workspace (empty database) - -

Database tables, columns and their types are shown in the left panel of the `Workspace` (fig. 4). -

- -

+![Fig. 4: Workspace (not empty database)](./img/Screenshot_editor_with_db.png?0.15.0) -

- - Fig. 4: Workspace (not empty database) - -

-# 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. -* – 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. -* – 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. -* – 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 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. -* – Switch to a chart type visualisation. -* – 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`. -

- -

+![Fig. 5: Visualisation with a chart](./img/Screenshot_chart.png?0.15.0) -

- - Fig. 5: Visualisation with a chart - -

+You can save any visualisation as an image by clicking ![](./img/camera.svg). -You can save any visualisation as an image by clicking . - -# 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