diff --git a/jsdoc.json b/jsdoc.json index ae35dce..b8db175 100644 --- a/jsdoc.json +++ b/jsdoc.json @@ -2,7 +2,7 @@ "plugins": ["plugins/markdown"], "recurseDepth": 10, "source": { - "include": ["src"], + "include": ["src","tutorials"], "excludePattern": "(node_modules/|docs)", "excludePattern": "(^|\\/|\\\\/)_" }, @@ -13,13 +13,19 @@ }, "templates": { "cleverLinks": false, - "monospaceLinks": false + "monospaceLinks": false, + "default": { + "staticFiles": { + "paths": ["./tutorials/img"] + } + } }, "opts": { "template": "templates/default", "encoding": "utf8", "destination": "./documentation/", "recurse": true, + "tutorials": "./tutorials", "readme": "README.md" } } diff --git a/main.js b/main.js index d2ece07..5265683 100644 --- a/main.js +++ b/main.js @@ -172,7 +172,7 @@ function openFile() { checkType = checkType[checkType.length - 1].split('.'); if (checkType[1] == 'csv') { - console.log('csv'); + csv() .fromFile(fileName) .then((jsonObj) => { @@ -184,7 +184,7 @@ function openFile() { } } } - console.log(jsonObj); + mainWindow.webContents.send("file-data", jsonObj) }) } @@ -196,7 +196,7 @@ function openFile() { if(checkType[1]=='tsv' || checkType[1]=='txt'){ let jsonObj = fs.readFileSync(fileName, "utf8"); jsonObj = tsvJSON(jsonObj); - console.log(jsonObj); + mainWindow.webContents.send("file-data", jsonObj); } diff --git a/src/controllers/controlles-UI-Logical/uiLogic.js b/src/controllers/controlles-UI-Logical/uiLogic.js index ee769f6..0db82f2 100644 --- a/src/controllers/controlles-UI-Logical/uiLogic.js +++ b/src/controllers/controlles-UI-Logical/uiLogic.js @@ -150,7 +150,6 @@ $(document).ready(function () { callback: function (key) { if (_data_) { let content = $('#' + $(this).attr('data-nodeid')).children('.partition-content') - // let content = $("#"+$(this).attr("data-nodeVis")).children(".partition-content"); let partition = $(this).parents('.partition-node').attr('id') content.empty() addMenu(content) @@ -195,6 +194,13 @@ $(document).ready(function () { ipc.send('not-data') } }, + /** + * @description variable with the json object with the name for the button and the name of the library + * view vistechlib that's enough to add a new view + * @example {ParallelCoordinates': {name: 'Parallel Coordinates'}} + * @tutorial add_vis + * + */ items: { 'ParallelCoordinates': {name: 'Parallel Coordinates'}, 'ParallelBundling': {name: 'Bundled Parallel Coordinates'}, @@ -318,6 +324,7 @@ function updateInteface () { /** * use **colors()** To create options in the html color menu and add the color selection inputs as needed, you can add various inputs or color range. Use the html element in the html **colorSelector** class to select and update options. * @interface + * @tutorial menu-color * */ const colors = () => { let items = $('.colorSelector').children('.optColor').length @@ -426,6 +433,7 @@ function updateInteface () { /** * use **filter()** To create options in the html menu and filter according to the data, selector can be created for categorical attributes or numeric range for continuous attributes. and use the html **filter** class to add options and interactions * @interface + * @tutorial filter * */ // filter------------------- const filter = () => { @@ -544,6 +552,7 @@ function updateInteface () { /** * use **hierarchies()** create data hierarchies for hierarchical viewing, and drag and drop control, the hierarchy options html interface is created and multiple hierarchies can also be added or removed through interactions. html **selectHierarchy** class is used to create html elements * @interface + * @tutorial hierarchy * */ // hieraquies---------- @@ -632,6 +641,7 @@ function updateInteface () { /** * use **defaultMenu()** to create the default item creation color control html and higlight. use html select **input.setColorDefault** and **input.setHighlightColor** to create elements and changes * @interface + * @tutorial default-colors * */ const defaultMenu = () => { $('input.setColorDefault').change(function () { @@ -649,6 +659,7 @@ function updateInteface () { /** * use **filter_by_dimension()** create html data dimension filter options, create filter option checbox and use html class **menu-filter_dimension** to add checkboxes * @interface + * @tutorial filter-dimension * */ // -------filtro nas dimensões-------------------------------------------------- const filter_by_dimension = () => { @@ -705,6 +716,7 @@ function clean_menus() { * create html menu of settings and control of interfaces of submenus hiden and show * @param {string} parentElement - parent element id title where the menu will be added * @interface + * @tutorial menu-settings */ let addMenu = async(parentElement) => { await $(parentElement).load('public/html/menu-settings-vis.html') diff --git a/src/controllers/controlles-Visualization/visUpdate.js b/src/controllers/controlles-Visualization/visUpdate.js index 4617f02..7356b99 100644 --- a/src/controllers/controlles-Visualization/visUpdate.js +++ b/src/controllers/controlles-Visualization/visUpdate.js @@ -8,10 +8,15 @@ let oldColorMin; let oldColorMax; //update functions -// /** @module visualization */ - /** - * This function redraws all screen views, enters data, and redraws **/ + * This function redraws all screen views, enters data, and redraws + * @example + * // basic selection for all views using the ".partition-content" class used in all update functions + * $(".partition-content").each(function () { + * this.__vis__.data(_data_); + * this.__vis__.redraw(); + }); + * **/ function updatevis() { let colorDefault = $("input.setColorDefault").val(); let highlightDefault = $("input.setHighlightColor").val(); @@ -71,6 +76,11 @@ function updateHie(hie){ * @param {array.} attr - array with continuous dimension title. * @param {number} min - minimum value of the dimension continues. * @param {number} max - maximum value of the continuous dimension. + * @example + * Scale color linear used + * let c = d3.scaleLinear() + .domain([min,max]) + .range([colorMin,colorMax]); * * */ @@ -133,7 +143,9 @@ function updateColorContinues(attr,min,max,colorMin,colorMax){ * @param {string} attr - Dimension title selected for coloring. * @param {array.} item - title array of the attr category dimension values. * @param {array.} colors - array with title of the selected dimensions of the database to mount the hierarchy. - * + * @example + * return colors[attr.indexOf(d.data[item])];// d.data[] hierchies visualization + * return colors[attr.indexOf(d[item])];// d[] other visualizations * */ function updateCategoricalColor(attr, item, colors) { attr_global = attr; @@ -175,13 +187,11 @@ function filterCategoricalValues(attr, select_item) { $(".partition-content").each(function (i,index) { if($(index).children("svg").length){ this.__vis__.setColor(function (d,i) { - if(d.data && d.data[item_name] != select_item){ + if(d.data && d.data[attr] != select_item){ return "grey"; - }else if(!d.data && d[item_name] != select_item) { + }else if(!d.data && d[attr] != select_item) { return "grey"; }else{ - console.log("deu certo") - console.log(d) return old_Color; } }); @@ -228,6 +238,12 @@ function filterColorContinues(attr,min,max,min_select,max_select){ } //detalhes sobre demanda setar os itens + + +/** + * activate details on demand use visthechlib function detail(data,index,items value) + * @param {string} items - list name of dimensions + */ function details_on_demand(element,items) { let parentElement = element.parentElement; element.on("datamouseover",function(d,i){ @@ -264,6 +280,11 @@ function detail_on(element){ }); } +/** + * update filter by dimension use visthechlib function filterByDimension() + * @param {Array} dimension_select - list name of dimensions + * array dimension_select + */ function updateFilter_by_dimension(){ const dimension_select = get_values_Filter_by_dimension(); $(".partition-content").each(function () { diff --git a/src/models/DataPreparation.js b/src/models/DataPreparation.js index 4cd9dae..8d2a669 100644 --- a/src/models/DataPreparation.js +++ b/src/models/DataPreparation.js @@ -1,6 +1,9 @@ /** * Class Class Data preparation and processing class for later use.can return keys, arrays, minimum and maximum as needed for application * @param {object} data - Selected database. + * @example + * const data = {.......}; + * const DataPreparation = new DataPreparation(data); */ class DataPreparation{ diff --git a/tutorials/add_vis.html b/tutorials/add_vis.html new file mode 100644 index 0000000..5f76926 --- /dev/null +++ b/tutorials/add_vis.html @@ -0,0 +1,3 @@ +

add views on selected partitions

+ + \ No newline at end of file diff --git a/tutorials/anottation.html b/tutorials/anottation.html new file mode 100644 index 0000000..2d8744d --- /dev/null +++ b/tutorials/anottation.html @@ -0,0 +1,3 @@ +

create annotations in visualization items

+ + diff --git a/tutorials/create-partition.html b/tutorials/create-partition.html new file mode 100644 index 0000000..88c91dc --- /dev/null +++ b/tutorials/create-partition.html @@ -0,0 +1,11 @@ +in the application it is possible to create new horizontal and vertical divisions to insert visualizations +

Crtl+mousepressed

+ + + +

move direction

+ + + +

adjust the divisions

+ diff --git a/tutorials/default-colors.html b/tutorials/default-colors.html new file mode 100644 index 0000000..c64876a --- /dev/null +++ b/tutorials/default-colors.html @@ -0,0 +1,3 @@ +

default colors for highlight and default color for standard views

+ + diff --git a/tutorials/details.html b/tutorials/details.html new file mode 100644 index 0000000..1afc7a5 --- /dev/null +++ b/tutorials/details.html @@ -0,0 +1,10 @@ +

details on demand selectable and available for all visualization + +

+ + + + +

Exemple in visualization:

+ + diff --git a/tutorials/filter-dimension.html b/tutorials/filter-dimension.html new file mode 100644 index 0000000..870c7fd --- /dev/null +++ b/tutorials/filter-dimension.html @@ -0,0 +1,15 @@ +

Filter by dimension d selectable and available for all visualization + +

+ + + + +

Exemple in visualization:

+ +

view :

+ + +

filter view :

+ + diff --git a/tutorials/filter.html b/tutorials/filter.html new file mode 100644 index 0000000..e68d544 --- /dev/null +++ b/tutorials/filter.html @@ -0,0 +1,5 @@ +

filter categorical or continuous for all available views

+ + + + diff --git a/tutorials/hierarchy.html b/tutorials/hierarchy.html new file mode 100644 index 0000000..ff638f2 --- /dev/null +++ b/tutorials/hierarchy.html @@ -0,0 +1,3 @@ +

control of hierarchies and view size with support for these features

+ + diff --git a/tutorials/highlight.html b/tutorials/highlight.html new file mode 100644 index 0000000..e115b62 --- /dev/null +++ b/tutorials/highlight.html @@ -0,0 +1,6 @@ +

coordinate highlight for all available views

+ + + + + diff --git a/tutorials/img/add_vis.png b/tutorials/img/add_vis.png new file mode 100644 index 0000000..67b3222 Binary files /dev/null and b/tutorials/img/add_vis.png differ diff --git a/tutorials/img/anottation.png b/tutorials/img/anottation.png new file mode 100644 index 0000000..4a4758e Binary files /dev/null and b/tutorials/img/anottation.png differ diff --git a/tutorials/img/color-menu.png b/tutorials/img/color-menu.png new file mode 100644 index 0000000..eaf6e95 Binary files /dev/null and b/tutorials/img/color-menu.png differ diff --git a/tutorials/img/comment.png b/tutorials/img/comment.png new file mode 100644 index 0000000..4a4758e Binary files /dev/null and b/tutorials/img/comment.png differ diff --git a/tutorials/img/cordinate_highliht.png b/tutorials/img/cordinate_highliht.png new file mode 100644 index 0000000..5fe2439 Binary files /dev/null and b/tutorials/img/cordinate_highliht.png differ diff --git a/tutorials/img/create_divison.png b/tutorials/img/create_divison.png new file mode 100644 index 0000000..a7132db Binary files /dev/null and b/tutorials/img/create_divison.png differ diff --git a/tutorials/img/create_divison2.png b/tutorials/img/create_divison2.png new file mode 100644 index 0000000..02de90d Binary files /dev/null and b/tutorials/img/create_divison2.png differ diff --git a/tutorials/img/create_divison3.png b/tutorials/img/create_divison3.png new file mode 100644 index 0000000..97c77f6 Binary files /dev/null and b/tutorials/img/create_divison3.png differ diff --git a/tutorials/img/default-colors.png b/tutorials/img/default-colors.png new file mode 100644 index 0000000..0eca80a Binary files /dev/null and b/tutorials/img/default-colors.png differ diff --git a/tutorials/img/details-demand.png b/tutorials/img/details-demand.png new file mode 100644 index 0000000..5f66b52 Binary files /dev/null and b/tutorials/img/details-demand.png differ diff --git a/tutorials/img/details-demand_2.png b/tutorials/img/details-demand_2.png new file mode 100644 index 0000000..756629a Binary files /dev/null and b/tutorials/img/details-demand_2.png differ diff --git a/tutorials/img/filter-dimension.png b/tutorials/img/filter-dimension.png new file mode 100644 index 0000000..d43be8b Binary files /dev/null and b/tutorials/img/filter-dimension.png differ diff --git a/tutorials/img/filter-dimension_1.PNG b/tutorials/img/filter-dimension_1.PNG new file mode 100644 index 0000000..fe9641b Binary files /dev/null and b/tutorials/img/filter-dimension_1.PNG differ diff --git a/tutorials/img/filter-dimension_2.PNG b/tutorials/img/filter-dimension_2.PNG new file mode 100644 index 0000000..ad7dc98 Binary files /dev/null and b/tutorials/img/filter-dimension_2.PNG differ diff --git a/tutorials/img/filter_1.png b/tutorials/img/filter_1.png new file mode 100644 index 0000000..6260667 Binary files /dev/null and b/tutorials/img/filter_1.png differ diff --git a/tutorials/img/hierachies.png b/tutorials/img/hierachies.png new file mode 100644 index 0000000..5c962f5 Binary files /dev/null and b/tutorials/img/hierachies.png differ diff --git a/tutorials/img/highlight.png b/tutorials/img/highlight.png new file mode 100644 index 0000000..e053c8d Binary files /dev/null and b/tutorials/img/highlight.png differ diff --git a/tutorials/img/menu-settings.png b/tutorials/img/menu-settings.png new file mode 100644 index 0000000..e9da2b8 Binary files /dev/null and b/tutorials/img/menu-settings.png differ diff --git a/tutorials/img/menu_settings.png b/tutorials/img/menu_settings.png new file mode 100644 index 0000000..b1ac96b Binary files /dev/null and b/tutorials/img/menu_settings.png differ diff --git a/tutorials/menu-color.html b/tutorials/menu-color.html new file mode 100644 index 0000000..85dad47 --- /dev/null +++ b/tutorials/menu-color.html @@ -0,0 +1,3 @@ +

it is possible to color the items to attribute and categorical values and change colors

+ + diff --git a/tutorials/menu-settings.html b/tutorials/menu-settings.html new file mode 100644 index 0000000..10ad773 --- /dev/null +++ b/tutorials/menu-settings.html @@ -0,0 +1,56 @@ +

Menu settings and functionalities

+ + + +
+ +

+ Color by attribute: It is possible to select categorical and continuous attributes, if the attributes are + categorical the tool allows the color customization for each attribute, if continuous it is possible to choose + the + colors of the interval between the minimum and maximum value. +

+

+ hierarchies and Size: In hierarchical views the tool allows adding, removing, and deciding the order of + hierarchies and also deciding which attribute will define the size of each item. +

+

+ Default Colors: Configuration of highlight colors and standard colors Definition of the highlight colors + and + standard colors for generating the visualizations. +

+ +

+ Filter filter by means of both categorical and continuous attributes, + if a categorical attribute is chosen a selection button is provided with the options for each attribute, if the + attribute is continuous, a slider with the range between maximum and minimum value. +

+

+ Filter dimension Filter in one dimension of data: Also in visualizations such as scatterplot, barchart, + histogram, for multivariate data a filter was implemented in one dimension of data reducing the visualization + and giving greater emphasis on the parts of interest +

+

+ Selection a selection by means of mouse interaction, creating a loop similar to drawing tools and which + data is below that of the selection will be selected and highlighted as well as data with similar attributes or + linked to the selected attributes, the selections offered can be made using the following geometric primitives: + lines, bezier curves, and polygonal geometric shapes. These forms of interactions through graphic primitives + were selected because they allow their use in different types of visualizations, offering an execution with pros + and cons depending on the visualization, even so it still remains useful for the purpose. +

+ +

+ Zoom: Interaction of zooming in and out; +

+ +

+ Demand details: Interaction of configurable demand details when mouse is passed over the item

+

+

+ Anottation: Interaction of notes on items in the database, which can be customized +

+ +

+ Highlight: Highlight by selecting the mouse and click coordinates in the views. +

+
\ No newline at end of file diff --git a/tutorials/tutorials.json b/tutorials/tutorials.json new file mode 100644 index 0000000..6d1c5e5 --- /dev/null +++ b/tutorials/tutorials.json @@ -0,0 +1,31 @@ +{ + "add_vis":{ + "title":"Add Visualization" + + }, + "create-partition":{ + "title":"Create New Partition" + }, + "menu-settings":{ + "title":"Menu settings" + }, + "menu-color":{ + "title":"Color by attribute menu " + }, + "hierarchy":{ + "title":"hierarchies and size menu " + }, + "anottation":{ + "title": "Anottation" + }, + "filter":{ + "title": "Filter by attributes" + }, + "filter-dimension":{ + "title":"Filter by dimension" + }, + "highlight":{ + "title":"Highlight" + } + +} \ No newline at end of file