+
+
+
+ + 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 + +
+ +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) + +
+ +Database tables, columns and their types are shown in the left panel of the +`Workspace` (fig. 4). + +
+ 
+
+ + Fig. 4: Workspace (not empty database) + +
+ +# Create inquiry + +## 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 +parts: SQL query, result set (result of the query execution) and visualisation +of the result set. A tab consists of two panels. Each of them can show one of +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
+ 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
+ can see the result of the query execution.
+* 
– 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
+> names. In a common case column names are shown in the hint if you specify the
+> table name, e.g. `SELECT table_name.`. But if there is only one table in your
+> database column names will be always available in the hint. Press `Ctrl+Space`
+> to show a hint explicitly.
+
+## Run query
+
+Press 
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.
+
+> **Note:** Running is not available if a query for the current tab is not
+> specified.
+
+The query result will be displayed in the result panel (fig. 4).
+
+## 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.
+
+> **Note:** All unsaved changes in the current visualisation will be lost when
+> you switch to the other visualisation type.
+
+A pivot table can be represented as a regular or multi-header table or
+visualised with a chart.
+Read more details of working with pivot in [Pivot tables][2].
+
+All customised charts in sqliteviz are created with a `react-chart-editor`
+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 + +
+ +You can save any visualisation as an image by clicking
icon in the top
+toolbar.
+
+
+ 
+
+ + Fig. 1: App info dialog + +
+ +[1]: https://sqlite.org/compile.html diff --git a/Export-current-database.md b/Export-current-database.md new file mode 100644 index 0000000..e02baa0 --- /dev/null +++ b/Export-current-database.md @@ -0,0 +1,4 @@ +Sqliteviz allows running not only `SELECT` statements but DML/DDL statements +too. You can save database modifications into a `.sqlite` file by clicking on +icon
next to the database name on `Workspace`
+page.
diff --git a/Home.md b/Home.md
new file mode 100644
index 0000000..015be12
--- /dev/null
+++ b/Home.md
@@ -0,0 +1,30 @@
+Welcome to the sqliteviz wiki!
+
+# For users
+1. [Installation][0]
+2. [Basic usage][1]
+3. [Multiple CSV file import][9]
+4. [Manage inquiries][2]
+5. [Export current database][4]
+6. [Pivot table][3]
+7. [Predefined inquiries][5]
+8. [Diagnostic information][6]
+
+## Examples and tutorials
+1. [How to rename tables and columns after CSV import][8]
+2. [How to build a pivot table in SQL(ite)][10]
+
+# For developers
+1. [Integrate predefined inquiries][7]
+
+[0]: Installation
+[1]: Basic-usage
+[2]: Manage-inquiries
+[3]: Pivot-table
+[4]: Export-current-database
+[5]: Predefined-inquiries
+[6]: Diagnostic-information
+[7]: Integrate-predefined-inquiries
+[8]: How-to-rename-tables-and-columns-after-CSV-import
+[9]: Multiple-CSV-file-import
+[10]: How-to-build-a-pivot-table-in-SQLite
diff --git a/How-to-build-a-pivot-table-in-SQLite.md b/How-to-build-a-pivot-table-in-SQLite.md
new file mode 100644
index 0000000..c570810
--- /dev/null
+++ b/How-to-build-a-pivot-table-in-SQLite.md
@@ -0,0 +1,135 @@
+This how-to explores how to build pivot tables in SQLite, which doesn't have a
+special constructs like `PIVOT` or `CROSSTAB` in its SQL dialect.
+
+# Static-column pivot table
+
+If the columns of a pivot table are known beforehand, it's possible to write a
+standard, say SQL-92, query that would produce a pivot table in its result set.
+This example uses World Bank [country indicators][1]. This query calculates
+average fertility and life expectancy for a few country groups.
+
+```sql
+SELECT
+ "Country Name",
+ AVG(IIF(
+ FLOOR(year / 10) = 196 AND "Indicator Name" LIKE 'Fertility rate%',
+ value,
+ NULL
+ )) AS "FR 196x",
+ AVG(IIF(
+ FLOOR(year / 10) = 196 AND "Indicator Name" LIKE 'Life expectancy%',
+ value,
+ NULL
+ )) AS "LE 196x",
+ AVG(IIF(
+ FLOOR(year / 10) = 197 AND "Indicator Name" LIKE 'Fertility rate%',
+ value,
+ NULL
+ )) AS "FR 197x",
+ AVG(IIF(
+ FLOOR(year / 10) = 197 AND "Indicator Name" LIKE 'Life expectancy%',
+ value,
+ NULL
+ )) AS "LE 197x",
+ AVG(IIF(
+ FLOOR(year / 10) = 198 AND "Indicator Name" LIKE 'Fertility rate%',
+ value,
+ NULL
+ )) AS "FR 198x",
+ AVG(IIF(
+ FLOOR(year / 10) = 198 AND "Indicator Name" LIKE 'Life expectancy%',
+ value,
+ NULL
+ )) AS "LE 198x",
+ AVG(IIF(
+ FLOOR(year / 10) = 199 AND "Indicator Name" LIKE 'Fertility rate%',
+ value,
+ NULL
+ )) AS "FR 199x",
+ AVG(IIF(
+ FLOOR(year / 10) = 199 AND "Indicator Name" LIKE 'Life expectancy%',
+ value,
+ NULL
+ )) AS "LE 199x",
+ AVG(IIF(
+ FLOOR(year / 10) = 200 AND "Indicator Name" LIKE 'Fertility rate%',
+ value,
+ NULL
+ )) AS "FR 200x",
+ AVG(IIF(
+ FLOOR(year / 10) = 200 AND "Indicator Name" LIKE 'Life expectancy%',
+ value,
+ NULL
+ )) AS "LE 200x"
+FROM country_indicators
+WHERE "Country Name" IN(
+ 'Arab World',
+ 'Central Europe and the Baltics',
+ 'East Asia & Pacific',
+ 'European Union',
+ 'Latin America & Caribbean',
+ 'High income',
+ 'Middle income',
+ 'Low income'
+)
+GROUP BY 1
+ORDER BY
+ CASE "Country Name"
+ WHEN 'High income' THEN 1
+ WHEN 'Middle income' THEN 2
+ WHEN 'Low income' THEN 3
+ WHEN 'European Union' THEN 4
+ WHEN 'Central Europe and the Baltics' THEN 5
+ WHEN 'East Asia & Pacific' THEN 6
+ WHEN 'Latin America & Caribbean' THEN 7
+ WHEN 'Arab World' THEN 8
+ ELSE 99
+ END
+```
+
+# Dynamic-column pivot table
+
+SQLite in sqliteviz is built with [pivot_vtab][2] extension. The same result set
+can be produced with this, arguably simpler and more maintainable, query.
+
+```sql
+CREATE VIRTUAL TABLE temp.pivot USING pivot_vtab(
+ (
+ WITH t(country_name) AS (VALUES
+ ('High income'),
+ ('Middle income'),
+ ('Low income'),
+ ('European Union'),
+ ('Central Europe and the Baltics'),
+ ('East Asia & Pacific'),
+ ('Latin America & Caribbean'),
+ ('Arab World')
+ )
+ SELECT country_name FROM t
+ ),
+ (
+ SELECT
+ FLOOR(year / 10) || '|' || "Indicator Name" column_key,
+ CASE
+ WHEN "Indicator Name" LIKE 'Fertility rate%' THEN 'FR'
+ WHEN "Indicator Name" LIKE 'Life expectancy%' THEN 'LE'
+ END || ' ' || FLOOR(year / 10) || 'x' column_name
+ FROM country_indicators
+ WHERE
+ "Indicator Name" LIKE 'Fertility rate%'
+ OR "Indicator Name" LIKE 'Life expectancy%'
+ GROUP BY 1
+ ),
+ (
+ SELECT AVG(value)
+ FROM country_indicators
+ WHERE
+ "Country Name" = :country_name
+ AND FLOOR(year / 10) || '|' || "Indicator Name" = :column_key
+ )
+);
+SELECT * FROM pivot
+```
+
+[1]: https://github.com/plotly/datasets/blob/master/country_indicators.csv
+[2]: https://github.com/jakethaw/pivot_vtab
diff --git a/How-to-rename-tables-and-columns-after-CSV-import.md b/How-to-rename-tables-and-columns-after-CSV-import.md
new file mode 100644
index 0000000..887e23c
--- /dev/null
+++ b/How-to-rename-tables-and-columns-after-CSV-import.md
@@ -0,0 +1,52 @@
+# Rename columns
+
+If sqliteviz parses CSV without `Use first row as column headers` option then
+it will name the columns like `col1`, `col2` etc. You can easily rename the
+columns after import with `ALTER TABLE` statements like this:
+
+```sql
+ALTER TABLE your_table_name
+RENAME COLUMN current_column_name TO new_column_name;
+```
+
+## Column rename example
+
+There is a table `dots` with columns `col1`, `col2`, `col3`. Here are the steps
+to rename the columns to `x`, `y` and `z` respectively:
+
+- Click `Create` in the top toolbar
+- In the opened query editor write a script
+
+```sql
+ALTER TABLE dots
+RENAME COLUMN col1 TO x;
+
+ALTER TABLE dots
+RENAME COLUMN col2 TO y;
+
+ALTER TABLE dots
+RENAME COLUMN col3 TO z;
+```
+
+- Click to run the script
+
+
+# Rename table
+
+```sql
+ALTER TABLE current_table_name
+RENAME TO new_table_name;
+```
+
+## Table rename example
+
+There is a table `dots`. Here are the steps to rename it to `point`:
+
+- Click `Create` in the top toolbar
+- In the opened query editor write a script
+
+```sql
+ALTER TABLE dots RENAME TO point
+```
+
+- Click to run the script
diff --git a/Installation.md b/Installation.md
new file mode 100644
index 0000000..aa5f24e
--- /dev/null
+++ b/Installation.md
@@ -0,0 +1,14 @@
+The latest release of sqliteviz is running on [Github pages][1].
+
+Basically, you don't need to install sqliteviz. But if you want you can install
+it and use it as a regular desktop application with the following steps:
+
+1. Open sqliteviz with [Chrome browser][2]
+2. At the top right of the address bar, click `Install`
+3. Confirm installation
+
+See more about PWA on [Google Chrome Help][3].
+
+[1]: https://lana-k.github.io/sqliteviz
+[2]: https://www.google.com/chrome
+[3]: https://support.google.com/chrome/answer/9658361?hl=en&ref_topic=7439636
diff --git a/Integrate-predefined-inquiries.md b/Integrate-predefined-inquiries.md
new file mode 100644
index 0000000..e50c471
--- /dev/null
+++ b/Integrate-predefined-inquiries.md
@@ -0,0 +1,10 @@
+If you run sqliteviz on your own server you can specify predefined inquiries.
+These inquiries will appear in `Inquiries` list for all users working with
+sqliteviz on your server.
+
+To create a list of predefined inquiries choose inquiries in `Inquiries` list
+and export them to `inquiries.json`. Then (re)place this file on the server in
+the same directory as `index.html`.
+
+A user can't edit, rename or delete a predefined inquiry. The rest operations
+are available.
diff --git a/Manage-inquiries.md b/Manage-inquiries.md
new file mode 100644
index 0000000..a794806
--- /dev/null
+++ b/Manage-inquiries.md
@@ -0,0 +1,45 @@
+# Organise
+
+You can find all inquiries that you saved in `Inquiries` (fig. 1).
+
+ 
Fig. 1: Inquiries
+ +To manipulate one inquiry hover the cursor over the row with the inquiry and +choose the action: + +*
– rename an inquiry
+* 
– duplicate an inquiry
+* – export an inquiry to JSON file
+* 
– delete an inquiry
+
+To edit a query or visualisation settings of an inquiry click on the respective
+row. You will be redirected to `Workspace` where the chosen inquiry will be
+opened in a tab.
+
+> **Note:** After opening an inquiry there will be no visualisation for it even
+> if you specified it and saved. That is so because there is no data to build
+> the visualisation. Run the query and all saved chart settings will be applied.
+
+You can also delete or export a group of inquiries to a JSON file. Select
+inquiries with checkboxes and press `Delete`/`Export` button above the grid
+(fig. 2).
+
+ 
Fig. 2: Inquiries: a group of inquiries is selected +
+ +> **Note:** Some operations are not available for predefined inquiries. Read +> [Predefined inquiries][1] for details. + +# Import + +Click `Import` button on `Inquiries` page to import inquiries from a JSON file +generated by export. + +[1]: Predefined-inquiries diff --git a/Multiple-CSV-file-import.md b/Multiple-CSV-file-import.md new file mode 100644 index 0000000..9c40426 --- /dev/null +++ b/Multiple-CSV-file-import.md @@ -0,0 +1,10 @@ +Sometimes it's useful to import several CSV files as tables in one database. For +example, to be able to `JOIN` them in SQL. + +In sqliteviz you can not only create a database from a CSV file, but also add +another table from CSV to the existing database. + +- Click
icon in the schema panel on `Workspace`
+ page
+- Choose a CSV file
+- Import it with `CSV import` dialog.
diff --git a/Pivot-table.md b/Pivot-table.md
new file mode 100644
index 0000000..737a569
--- /dev/null
+++ b/Pivot-table.md
@@ -0,0 +1,82 @@
+# Pivot table UI
+
+Sqliteviz allows building pivot tables and visualizing them. To build a pivot
+run a query to get data. Then open visualisation panel by clicking .
+
+A pivot visualisation has the following settings:
+
+- Columns – choose one or more column names from the result set. The values in
+ the chosen columns will be column names of the pivot table.
+- Rows – choose one or more column names from the result set. The values in the
+ chosen columns will be row names of the pivot table.
+- Order of columns and rows.
+- Aggregator and its arguments – a function which will be used for pivot cell
+ calculation. An aggregator can have from zero to two arguments. An aggregator
+ argument is one of the columns of the result set.
+- View – pivot table visualisation. It can be a table, a heatmap, a chart,
+ etc. See some examples of different views of the same pivot table below.
+
+
+ 
+
+ + Fig. 1: Table + +
+ +
+ 
+
+ + Fig. 2: Heatmap + +
+ +
+ 
+
+ + Fig. 3: Horizontal Stacked Bar Chart + +
+ +There are several built-in chart views for a pivot. But you can build your own +with `Custom chart` view (fig. 4). + +
+ 
+
+ + Fig. 4: Custom Chart + +
+ +> **Note:** You can switch to other pivot views and back to `Custom chart` – +> all your custom chart settings will be remembered. But if you switch the +> visualisation mode from pivot to any other mode, unsaved changes will be lost. + +You can save any visualisation as an image by clicking
+ 
+
+ + Fig. 1: Predefined inquiry + +
+ +As a user, you can't rename or delete a predefined inquiry. You can't save +changes in a predefined inquiry, but you can save them as a new inquiry. The +rest operations, copy and export, are available. + +[1]: https://lana-k.github.io/sqliteviz diff --git a/img/Screenshot_app_info.png b/img/Screenshot_app_info.png new file mode 100644 index 0000000..8c4befe Binary files /dev/null and b/img/Screenshot_app_info.png differ diff --git a/img/Screenshot_chart.png b/img/Screenshot_chart.png new file mode 100644 index 0000000..97dc678 Binary files /dev/null and b/img/Screenshot_chart.png differ diff --git a/img/Screenshot_csv.png b/img/Screenshot_csv.png new file mode 100644 index 0000000..34fb48f Binary files /dev/null and b/img/Screenshot_csv.png differ diff --git a/img/Screenshot_editor.png b/img/Screenshot_editor.png new file mode 100644 index 0000000..fe30f15 Binary files /dev/null and b/img/Screenshot_editor.png differ diff --git a/img/Screenshot_editor_with_db.png b/img/Screenshot_editor_with_db.png new file mode 100644 index 0000000..cfbf835 Binary files /dev/null and b/img/Screenshot_editor_with_db.png differ diff --git a/img/Screenshot_group.png b/img/Screenshot_group.png new file mode 100644 index 0000000..2621479 Binary files /dev/null and b/img/Screenshot_group.png differ diff --git a/img/Screenshot_my_inquiries.png b/img/Screenshot_my_inquiries.png new file mode 100644 index 0000000..5047f13 Binary files /dev/null and b/img/Screenshot_my_inquiries.png differ diff --git a/img/Screenshot_pivot_barchart.png b/img/Screenshot_pivot_barchart.png new file mode 100644 index 0000000..e6d7c0e Binary files /dev/null and b/img/Screenshot_pivot_barchart.png differ diff --git a/img/Screenshot_pivot_custom chart.png b/img/Screenshot_pivot_custom chart.png new file mode 100644 index 0000000..90bb600 Binary files /dev/null and b/img/Screenshot_pivot_custom chart.png differ diff --git a/img/Screenshot_pivot_heatmap.png b/img/Screenshot_pivot_heatmap.png new file mode 100644 index 0000000..7fbcc0b Binary files /dev/null and b/img/Screenshot_pivot_heatmap.png differ diff --git a/img/Screenshot_pivot_table.png b/img/Screenshot_pivot_table.png new file mode 100644 index 0000000..0858adc Binary files /dev/null and b/img/Screenshot_pivot_table.png differ diff --git a/img/Screenshot_predefined.png b/img/Screenshot_predefined.png new file mode 100644 index 0000000..00e69c3 Binary files /dev/null and b/img/Screenshot_predefined.png differ diff --git a/img/Screenshot_query_tools.png b/img/Screenshot_query_tools.png new file mode 100644 index 0000000..fcbe14f Binary files /dev/null and b/img/Screenshot_query_tools.png differ diff --git a/img/Screenshot_result.png b/img/Screenshot_result.png new file mode 100644 index 0000000..02bc979 Binary files /dev/null and b/img/Screenshot_result.png differ diff --git a/img/Screenshot_welcome.png b/img/Screenshot_welcome.png new file mode 100644 index 0000000..8f76d66 Binary files /dev/null and b/img/Screenshot_welcome.png differ diff --git a/img/add-csv.svg b/img/add-csv.svg new file mode 100644 index 0000000..3620785 --- /dev/null +++ b/img/add-csv.svg @@ -0,0 +1,10 @@ + diff --git a/img/camera.svg b/img/camera.svg new file mode 100644 index 0000000..da6a6cb --- /dev/null +++ b/img/camera.svg @@ -0,0 +1,5 @@ + diff --git a/img/chart.svg b/img/chart.svg new file mode 100644 index 0000000..99513cd --- /dev/null +++ b/img/chart.svg @@ -0,0 +1,8 @@ + diff --git a/img/copy.svg b/img/copy.svg new file mode 100644 index 0000000..a4b2c42 --- /dev/null +++ b/img/copy.svg @@ -0,0 +1,3 @@ + diff --git a/img/delete.svg b/img/delete.svg new file mode 100644 index 0000000..80171cc --- /dev/null +++ b/img/delete.svg @@ -0,0 +1,3 @@ + diff --git a/img/file-export.svg b/img/file-export.svg new file mode 100644 index 0000000..572b7e2 --- /dev/null +++ b/img/file-export.svg @@ -0,0 +1,3 @@ + diff --git a/img/info.svg b/img/info.svg new file mode 100644 index 0000000..201f843 --- /dev/null +++ b/img/info.svg @@ -0,0 +1,3 @@ + diff --git a/img/pivot.svg b/img/pivot.svg new file mode 100644 index 0000000..f61d120 --- /dev/null +++ b/img/pivot.svg @@ -0,0 +1,6 @@ + diff --git a/img/rename.svg b/img/rename.svg new file mode 100644 index 0000000..3c030b9 --- /dev/null +++ b/img/rename.svg @@ -0,0 +1,3 @@ + diff --git a/img/run.svg b/img/run.svg new file mode 100644 index 0000000..8c6afb2 --- /dev/null +++ b/img/run.svg @@ -0,0 +1,3 @@ + diff --git a/img/sql.svg b/img/sql.svg new file mode 100644 index 0000000..44d3725 --- /dev/null +++ b/img/sql.svg @@ -0,0 +1,11 @@ + diff --git a/img/table.svg b/img/table.svg new file mode 100644 index 0000000..22ae9ff --- /dev/null +++ b/img/table.svg @@ -0,0 +1,7 @@ + diff --git a/img/visualisation.svg b/img/visualisation.svg new file mode 100644 index 0000000..6b41449 --- /dev/null +++ b/img/visualisation.svg @@ -0,0 +1,12 @@ +