diff --git a/README.md b/README.md index cd6460c..f71f5d3 100644 --- a/README.md +++ b/README.md @@ -4,15 +4,15 @@ # sqliteviz -Sqliteviz is a single-page application for fully client-side visualisation of SQLite databases. +Sqliteviz is a single-page application for fully client-side visualisation of SQLite databases or CSV. ## Get started The latest release of sqliteviz is running on [Github pages][6]. The simplest way to start is to use sqliteviz there. -### Choose a databese file +### Choose a databese or CSV file -You can choose a database file right on the welcom page (fig. 1). The supported file extentions: `.db`,`.sqlite` and `.sqlite3`. +You can choose a database or CSV file right on the welcom page (fig. 1). The supported file extentions: `.csv`, `.db`,`.sqlite` and `.sqlite3`.

@@ -24,7 +24,19 @@ You can choose a database file right on the welcom page (fig. 1). The supported

-This is not a mandatory step. You can skip it and manipulate queries in sqliteviz without a database. Choose a database later in the left panel of the Editor when it's time to run a query (fig. 2). +If you choose a CSV file it will be parsed. Then sqliteviz creates a new database with data from CSV in `csv_import` table. You can change parse settings in the dialog which is shown automatically if you choose a CSV file (fig. 2). + +

+ +

+ +

+ + Fig. 2: Import CSV dialog + +

+ +Choosing a database or CSV file is not a mandatory step. You can skip it and manipulate queries in sqliteviz without a database. Choose a database or CSV later in the left panel of the `Editor` when it's time to run a query (fig. 3).

@@ -32,11 +44,11 @@ This is not a mandatory step. You can skip it and manipulate queries in sqlitevi

- Fig. 2: Editor (database is not chosen) + Fig. 3: Editor (neither database nor CSV is not chosen)

-After chosing a database you can browse tables, columns and their types in the left panel of the Editor (fig. 3). +After chosing a database or CSV you can browse tables, columns and their types in the left panel of the `Editor` (fig. 4).

@@ -44,7 +56,7 @@ After chosing a database you can browse tables, columns and their types in the l

- Fig. 3: Editor (database is chosen) + Fig. 4: Editor (database is chosen)

@@ -56,15 +68,15 @@ Press `Create` button in the top toolbar or use `Ctrl+b`(`Cmd+b` for MacOS) keyb In the query text editor part you can specify a `SELECT` statement for getting data. -Result panel has two modes: table view (fig. 3, fig. 4) and chart view (fig. 2). In the table view you can see the result of query running (fig. 4). In the chart view there is a chart editor component which allows to build a visialization from the result set. +The result panel has two modes: table view (fig. 4, fig. 5) and chart view (fig. 3). In the table view you can see the result of query running (fig. 5). In the chart view there is a chart editor component which allows to build a visialization from the result set. #### Run a query Press `Run` button in the top toolbar 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 database was not chosen or a query for the current tab is not specified. +> **Note:** Running is not available if neither a database nor CSV was not chosen or a query for the current tab is not specified. -The query result will be displayed in the result panel in table mode (fig. 4). +The query result will be displayed in the result panel in table mode (fig. 5).

@@ -72,7 +84,7 @@ The query result will be displayed in the result panel in table mode (fig. 4).

- Fig. 4: Query results + Fig. 5: Query results

@@ -84,13 +96,13 @@ After running a query you can switch result panel to the chart mode and create a Press `Save` button in the top toolbar or use `Ctrl+s`(`Cmd+s` for MacOS) keyboard shortcut to save a query in the current opened tab to local storage of your browser. -After that the query will be in the list on "My queries" page. +After that the query will be in the list on `My queries` page. > **Note:** Only the text of the query and chart settings will be saved. The result of the query execution won't be saved. ## Working with saved queries -You can find all queries that you saved in local storage of your browser in "My queries" (fig. 5). +You can find all queries that you saved in `My queries` (fig. 6).

@@ -98,7 +110,7 @@ You can find all queries that you saved in local storage of your browser in "My

- Fig. 5: My queries + Fig. 6: My queries

@@ -113,7 +125,7 @@ To edit the text of a query or its chart settings click on the respective row. Y > **Note:** After opening a query there will be no chart for it even if you specified it and saved. That is so because there is no data to build the chart. Run the query and all saved chart settings will be applied. -You can also delete or export to file a group of queries. Select queries with checkboxes and press `Delete`/`Export` button above the grid (fig. 6). +You can also delete or export to file a group of queries. Select queries with checkboxes and press `Delete`/`Export` button above the grid (fig. 7).

@@ -122,7 +134,7 @@ You can also delete or export to file a group of queries. Select queries with ch

- Fig. 6: My queries: a group of queries is selected + Fig. 7: My queries: a group of queries is selected

@@ -130,13 +142,13 @@ You can also delete or export to file a group of queries. Select queries with ch ## Import queries -Click `Import` button on "My queries" page to import queries from json file generated by export. +Click `Import` button on `My queries` page to import queries from JSON file generated by export. ## Predefined queries -If you run sqliteviz on your own server you can specify predefined queries. These queries will be in "My queries" list for all users working with sqliteviz on your server. +If you run sqliteviz on your own server you can specify predefined queries. These queries will be in `My queries` list for all users working with sqliteviz on your server. -To create a list of predefined queries choose queries in "My queries" list and export them to `queries.json`. Then place this file on the server in the same directory as `index.html`. +To create a list of predefined queries choose queries in `My queries` list and export them to `queries.json`. Then place this file on the server in the same directory as `index.html`. A user can't edit, rename or delete a predefined query. The rest operations are available. @@ -144,7 +156,7 @@ A user can't edit, rename or delete a predefined query. The rest operations are It's a kind of middleground between [Plotly Falcon][1] and [Redash][2]. ## Components -It is built on top of [react-chart-editor][3], [sql.js][4] and [Vue-Codemirror][8] in [Vue.js][5]. +It is built on top of [react-chart-editor][3], [sql.js][4] and [Vue-Codemirror][8] in [Vue.js][5]. CSV parsing is performed with [Papa Parse][9]. [1]: https://github.com/plotly/falcon [2]: https://github.com/getredash/redash @@ -154,5 +166,5 @@ It is built on top of [react-chart-editor][3], [sql.js][4] and [Vue-Codemirror][ [6]: https://lana-k.github.io/sqliteviz [7]: https://plotly.com/chart-studio-help/tutorials/#basic [8]: https://github.com/surmon-china/vue-codemirror#readme - +[9]: https://www.papaparse.com/ diff --git a/src/assets/images/Screenshot_csv.png b/src/assets/images/Screenshot_csv.png new file mode 100644 index 0000000..724b41e Binary files /dev/null and b/src/assets/images/Screenshot_csv.png differ diff --git a/src/assets/images/Screenshot_editor.png b/src/assets/images/Screenshot_editor.png index aa99c79..0142382 100644 Binary files a/src/assets/images/Screenshot_editor.png and b/src/assets/images/Screenshot_editor.png differ diff --git a/src/assets/images/Screenshot_welcome.png b/src/assets/images/Screenshot_welcome.png index 97726fd..aa8dd30 100644 Binary files a/src/assets/images/Screenshot_welcome.png and b/src/assets/images/Screenshot_welcome.png differ