-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
41 changed files
with
206 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,153 +1,59 @@ | ||
| # Vboard (WP) | ||
| Platform to create (3D) charts of ElasticSearch data. | ||
| # VBoard 1.0.0 | ||
| Platform to create (3D and VR) charts of ElasticSearch data. | ||
|
|
||
| ## Installation Steps | ||
|
|
||
| > **Important:** It is necessary to have installed and launched an "**ElasticSearch 5.x in your localhost:9200**" | ||
| There are few ways to install VBoard: | ||
|
|
||
| ### From repository | ||
| Directly installation from the source code, the steps are: | ||
|
|
||
| 1. Clone the repository, choosing a different branch in order to change between ThreeDC and A-FrameDC: | ||
| ``` | ||
| git clone https://github.com/dlumbrer/VBoard -b integration-aframedc | ||
| or | ||
| git clone https://github.com/dlumbrer/VBoard -b integration-threedc | ||
| ``` | ||
| 2. Change directory: | ||
| ``` | ||
| cd VBoard | ||
| ``` | ||
| 3. Install npm dependencies: | ||
| ``` | ||
| git clone https://github.com/dlumbrer/VBoard-UI | ||
| cd VBoard-UI | ||
| npm install | ||
| http-server (or a simple http server from python) | ||
| ``` | ||
| 4. Optional, install node http-server `npm install -g http-server` | ||
|
|
||
| Go in your browser to http://localhost:8080/ and enjoy! | ||
|
|
||
|
|
||
| ## Tab Visualize (to build a chart) | ||
|
|
||
| Follow this steps to build a a visualization: | ||
|
|
||
| * Select the index and the type of your ElasticSearch | ||
|
|
||
|  | ||
|
|
||
| * Select Chart type | ||
| * Pie, Bars, Line, Curve, 3DBars, Bubbles | ||
|
|
||
|  | ||
|
|
||
| * Select Data (metrics and buckets) | ||
| * Each chart require more or less metrics/buckets | ||
|
|
||
|  | ||
|
|
||
| * Play! | ||
|
|
||
|  | ||
|  | ||
|
|
||
|
|
||
| ### Options | ||
|
|
||
| * **Show Mapping**: With this button you can see at the bottom of the page the mapping of the index. | ||
|  | ||
|
|
||
| * **Show Response (JSON)**: With this button you can see at the bottom of the page the response of ElasticSearch (Hits and Aggregations in JSON) of the data previously selected. | ||
|  | ||
|
|
||
| * **Save Visualization**: This button open a modal in order to save the visualization in ElasticSearch. The visualization will be saved in the index (**Previously created**) **.vboard**. (See __Creation of the index .vboard__) | ||
|  | ||
|
|
||
| * **Load Visualization**: This button open a modal in order to load a visualization. | ||
|  | ||
|
|
||
|
|
||
| ## Tab Panels (to build a panels with charts) | ||
|
|
||
| First, you will see a default panel with 3 rows, 3 columns, [500,500] of dimension and 0.6 of opacity. Click on the list on the left to add a previously saved chart, you will se this modal: | ||
|  | ||
|
|
||
| After, you will see the chart selected in the panel: | ||
|  | ||
|  | ||
|
|
||
|
|
||
| ### Options | ||
|
|
||
| * **New Panel**: Open a modal to build a new panel form scratch. | ||
|  | ||
|
|
||
| * **Save Panel**: Open a modal in order to save the Panel in ElasticSearch. The panel will be saved in the index (**Previously created**) **.vboard**. (See __Creation of the index .vboard__) | ||
|  | ||
|
|
||
| * **Load Panel**: Open a modal in order to load a Panel previously saved in ElasticSearch. | ||
|  | ||
| 5. Run VBoard server: | ||
| ``` | ||
| http-server | ||
| ``` | ||
|
|
||
| ## Tab Dashboard (to build a dashboard with charts and panels) | ||
| The fifth step is optional because you can use any server of http, for instance the http simple server from python. | ||
|
|
||
| First, you will see a default scene without charts/panels. Click on the list on the left to add a previously saved chart/panel, you will se this modal: | ||
|  | ||
| ### From releases | ||
|
|
||
| After, you will see the items selected in the dashboard: | ||
|  | ||
| This is the easiest way to launch VBoard if don't want to install it via source code or docker. It is so simple that you have to download the zip/tar binaries of the selected version (ThreeDC or A-FrameDC) from the GitHub VBoard [releases page](https://github.com/dlumbrer/VBoard/releases), go inside the uncompressed folder and launch it with your favourite http-server. | ||
|
|
||
| ### Options | ||
| ### Docker | ||
| There are docker images of the two versions of VBoard. The information about the images are inside the ["docker" branch](https://github.com/dlumbrer/VBoard/tree/docker), also, there are inside a few examples of how to deploy VBoard using docker-compose. | ||
|
|
||
| * **Save Dashboard**: This button open a modal in order to save the dashboard in ElasticSearch. The visualization will be saved in the index (**Previously created**) **.vboard**. (See __Creation of the index .vboard__) | ||
|  | ||
|
|
||
| * **Load Dashboard**: This button open a modal in order to load a dashboard. | ||
|  | ||
| ## User Guide | ||
|
|
||
| Please, visit the user guide doc, [USER_GUIDE.md](https://github.com/dlumbrer/VBoard/blob/master/USER_GUIDE.md), in order to know how to make visualizations and dashboards with VBoard. | ||
|
|
||
| ## Tab Show (to show a dashboard standalone) | ||
| ## Screenshots | ||
|
|
||
| First, select the dashboard you will want to see: | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|
|
||
| When you click, yo will go redirected to /Show/*id* where you will see the dashboard standalone | ||
|  | ||
|
|
||
| ## Creation of the index .vboard | ||
| ## Help me to improve! :smile: | ||
|
|
||
| To save visualizations you must have created the index **.vboard**, this is the mapping of the index (__Recommended use Sense or CURL to create it__): | ||
| If there's any problem or doubt, please, open a Github Issue (Pull Request) or contact me via email ([email protected]). It would be very helpful if you tried it and tell me what you think of it, the errors and the possible improves that I could make. | ||
|
|
||
| ``` | ||
| PUT .vboard | ||
| { | ||
| "settings" : { | ||
| "number_of_shards" : 1 | ||
| }, | ||
| "mappings" : { | ||
| "visthreed" : { | ||
| "properties" : { | ||
| "chartType" : { "type" : "text" }, | ||
| "name" : { "type" : "text" }, | ||
| "description" : { "type" : "text" }, | ||
| "indexOfES" : {"type" : "text"}, | ||
| "typeOfES" : {"type": "text"}, | ||
| "metricsSelected" : { "type": "object" }, | ||
| "bucketsSelected" : { "type": "object" }, | ||
| "data" : { "type": "object" } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| PUT .vboard/_mapping/panelthreed | ||
| { | ||
| "properties": { | ||
| "position" : { "type" : "text" }, | ||
| "rows" : { "type" : "text" }, | ||
| "columns" : { "type" : "text" }, | ||
| "dimension" : { "type" : "text" }, | ||
| "opacity" : { "type" : "text" }, | ||
| "charts" : { "type" : "object" }, | ||
| "name" : { "type" : "text" }, | ||
| "description" : { "type" : "text" } | ||
| } | ||
| } | ||
| PUT .vboard/_mapping/dashthreed | ||
| { | ||
| "properties": { | ||
| "background": { "type": "text"}, | ||
| "panels" : { "type" : "object" }, | ||
| "charts" : { "type" : "object" }, | ||
| "name" : { "type" : "text" }, | ||
| "description" : { "type" : "text" } | ||
| } | ||
| } | ||
| ``` | ||
| #### For anything, contact me: [email protected] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,168 @@ | ||
| # User Guide of VBoard | ||
|
|
||
| This user guide explains step by step how to init VBoard, how to produce visualizations, how to save it, how to produce dashboards and how to save it and see it in the stand-alone version. As the menu and the process is the same, we will explain the user guide for the A-FrameDC version, focusing in examples and how to take advantage of all functionality of VBoard. So we explain how to produce an entire dashboard with visualizations from scratch: | ||
|
|
||
| ## Init VBoard | ||
|
|
||
| First of all, VBoard will check its connection to ElasticSearch, these are the steps that will be seen when entering the application: | ||
|
|
||
| 1. First, VBoard will notify the user who is making configurations: | ||
|
|
||
|  | ||
|
|
||
| When it cannot connect to ElasticSearch, this error message will appear: | ||
|
|
||
|  | ||
|
|
||
| 2. Once connected to ElasticSearch, it will search the index \textit{.vboard}, and then there are two options: | ||
| The index doesn't exist, so it will try to create it, showing this information message: | ||
|
|
||
|  | ||
|
|
||
| To do this, the mapping of the index will be uploaded. In the case that it could not upload the mapping for any reason, the following error message will be displayed: | ||
|
|
||
|  | ||
|
|
||
| If it has successfully uploaded the mapping, there will be a notification saying that everything is fine and it will enter VBoard: | ||
|
|
||
|  | ||
|
|
||
| The index is already created and therefore, everything is ready; this information message will appear: | ||
|
|
||
|  | ||
|
|
||
| Finally, if everything is well loaded, VBoard will redirect you to the Visualize tab. | ||
|
|
||
| ## Visualize | ||
|
|
||
| In order to build a 3D visualization, go to the tab "Visualize" and follow these steps: | ||
| 1. Select the index and the type of your ElasticSearch where the data is going to be visualized, then click on "Select chart" button: | ||
|
|
||
|  | ||
|
|
||
| Note that there are another button call "Show mapping", it is explained at the end of this section, in the Options section. | ||
| 2. Select chart type: Pie, Bars, Smooth Curve, 3D Bars and Bubbles | ||
|
|
||
|  | ||
|
|
||
| 3. Select the aggregation data that you want to visualize. Note that each chart could require more or less aggregations (metrics/buckets). | ||
|
|
||
|  | ||
|
|
||
| 4. Click on Play in order to see the visualization or Cancel if you want to go back. Later we will show two examples of visualizations | ||
|
|
||
|
|
||
| Moreover there are a few options apart from the build visualization process: | ||
|
|
||
| - Show mapping button, this button will show the mapping of the index selected, the mapping will be showed at the end of the page in a JSON format: | ||
|
|
||
|  | ||
|
|
||
| - Show Response (JSON), this button will show the result of the query of the aggregation selected before, in a JSON format at the end of the page. It will be two columns, one representing the data in raw and the other the aggregated data: | ||
|
|
||
|  | ||
|
|
||
| - Save visualization, this button will open a modal with a form in order to save the current visualization, the form contains a name and a description that will be saved with the visualization: | ||
|
|
||
|  | ||
|
|
||
| - Load visualization, this button will open a modal with a list of the saved visualization, each item is a button that will load the visualization in the current page. Each item shows the title, the description and the type of the saved visualization: | ||
|
|
||
|  | ||
|
|
||
| - Switch background, this button switches the current background in order to see the visualization in different environments, the background is just to show the aspect, it will not save it with the visualization. | ||
|
|
||
| Now, we are ready to build, save and load visualizations. | ||
|
|
||
| ### Examples | ||
|
|
||
| To finish, these are two examples of visualizations that you can build with VBoard: | ||
|
|
||
|  | ||
|  | ||
|
|
||
| ## Panels - Only in ThreeDC version | ||
| In order to build a Panel, a flat plane with visualization, you have to have installed the ThreeDC version, then go to the Panels tab. By default, you will see a default panel with 3 rows, 3 columns, [500,500] of dimension and 0.6 of opacity. Then, let's fill the panel with visualization, you will see a list of the saved visualization on the left control menu: | ||
|
|
||
| 1. Click on one of the available visualizations and a modal will appear in order to define in which row and column you want to put the visualization: | ||
|
|
||
|  | ||
|
|
||
| 2. Once a visualization has been added to the panel, you will see the panel with the visualization: | ||
|
|
||
|  | ||
|
|
||
| Moreover there are a few options apart from the build panel process: | ||
|
|
||
| - New Panel button, this button opens a modal with a form in order to reset the panel and build a new one, you can define here the position of the panel, the rows/columns that it has, the dimension and the opacity. | ||
|
|
||
|  | ||
|
|
||
| - Save Panel, this button will open a modal with a form in order to save the current panel, the form contains a name and a description that will be saved with the panel: | ||
|
|
||
|  | ||
|
|
||
| - Load Panel, this button will open a modal with a list of the saved panels, each item is a button that will load the panel in the current page. Each item shows the title, the description and the visualization that the saved panel has: | ||
|
|
||
|  | ||
|
|
||
| - Switch background, this button switches the current background in order to see the panel in different environments, the background is just to show the aspect, it will not save it with the panel. | ||
|
|
||
| ### Example | ||
| To finish, this is an example of a panel that you can build with VBoard: | ||
|
|
||
|  | ||
|
|
||
| Now, we are ready to build, save and load visualizations. | ||
|
|
||
| ## Dashboard | ||
| By default, you will see a default scene empty, in the control menu you will see a list of the saved visualizations (and panels if you are in the ThreeDC version): | ||
|
|
||
| 1. Click on one of the available visualizations (or panels) and a modal will appear in order to define in which position and rotation you want to put the visualization: | ||
|
|
||
|  | ||
|
|
||
| 2. Once a visualization has been added to the panel, you will see the dashboard with the visualization: | ||
|
|
||
|  | ||
|
|
||
|
|
||
| Moreover there are a few options apart from the build panel process: | ||
| - Save Dashboard, this button will open a modal with a form in order to save the current dashboard, the form contains a name and a description that will be saved with the panel: | ||
|
|
||
|  | ||
|
|
||
| - Load dashboard, this button will open a modal with a list of the saved dashboards, each item is a button that will load the dashboard in the current page. Each item shows the title, the description and the amount of visualizations that the dashboard has: | ||
|
|
||
|  | ||
|
|
||
| - Switch background, this button switches the current background in order to see the dashboard in different environments, the background will be saved with the dashboard, so in the next tab, Show, you will see the dashboard with the background. | ||
|
|
||
| ### Example | ||
|
|
||
| This is a example of a dashboard created with VBoard, with different background and data: | ||
|
|
||
|  | ||
|
|
||
| Finally, we have dashboards, so let's see them in the stand alone mode and in VR. | ||
|
|
||
| ## Show | ||
|
|
||
| To finish, in order to see and analyze the dashboard in the "stand alone" mode, without the control menu, only to see the 3D scene, you have to go to the Show tab: | ||
|
|
||
|  | ||
|
|
||
| A list with the available saved dashboards is displayed; once clicked on them, the user will be redirected to the loaded dashboard in a specific url as follows: `http://vboard_url/#!/Show/name_dashboard` | ||
|
|
||
| } | ||
|
|
||
| As seen in the image, the dashboard is displayed in "stand alone" mode, without any menu in between except the button to enter VR. If we press the button we will automatically enter the VR mode, if we are using it in a browser on a computer, the change is hardly noticeable when entering VR, since by default what we observe is a full screen, if it is not a device that has VR. | ||
|
|
||
|
|
||
|  | ||
|
|
||
| But instead, if we enter the url with a device that has integrated VR, for example, a smartphone, we can see how the 3D scene adapts to be used with VR glasses: | ||
|
|
||
|  | ||
|
|
||
| Also, entering straight forward to the url `http://vboard_url/#!/Show/name_dashboard` from any device guarantees to go directly to the dashboard in the "stand alone" mode without having to go through the other tabs. |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes