30:T564e,Guilherme Ranoya, 2021

## What's it? Small functions to help dealing with data in javascript. Tools for manipulating data in arrays of objects. ## How to use them? Load the library direcly from the web: ```html ``` Or download the file from [github](https://github.com/ranoya/DataT/blob/main/basicsmin.js). The reference and examples are also commented in the [source code](https://datat.vercel.app/basics.js).
The Observable version of Datat (the same library for use inside Observable) can be imported from [here](https://observablehq.com/@ranoya/datat)

## General Functions
---
### Fetch CSV function Get a csv from a URL ```js getcsvdata(myurl, function(data) { // console.table(data); }); ```
Example: ```js let doSomething = function(data) { console.table(data); } getcsvdata("https://www.mysite.com/mydata.csv", doSomething); ```
*Shortcuts*
`gsdata(mygooglesheeturl, doSomething)` to get data from a Google Sheet

---
### Get a CSV URL from your Google Sheet Return a valid CSV URL from the provided Google Sheet URL *important*: the google sheet must be *public for everyone with the link* for reading.
```js xpto = GoogleSheetCsvURL(mygooglesheeturl); ```
Example: ```js let mycsvdataurl = GoogleSheetCsvURL('https://docs.google.com/spreadsheets/d/10wpfmMWn3igQF4rJBYCo8OR90igO1tfKwcmrot0ult0/edit#gid=0'); getcsvdata(mycsvdataurl, doSomething); ```
*Shortcuts*
`gsdata(mygooglesheeturl, doSomething)` to get data from a Google Sheet

---
### Fetch JSON function Get a json from a URL ```js getdata(myurl, function(data) { // console.table(data); }); ```
Example: ```js let doSomething = function(data) { console.table(data); } getdata("https://www.mysite.com/mydata.json", doSomething); ```
---
### Get a JSON output from a Google Sheet URL using opensheet.elk.sh Return the correct URL for a JSON output from Google Sheets *important*: the google sheet must be *public for everyone with the link* for reading. Otherwise it won't be accessible to opensheet.elk.sh *important 2*: unfortunatelly not recommended anymore, because some internet providers block de address or fail to load the data from opensheet.elk.sh; use getcsvdata instead.
```javascript xpto = googlesheet(mygooglesheeturl,sheetname); ```
Example: ```javascript let myJsonURL = googlesheet('https://docs.google.com/spreadsheets/d/10wpfmMWn3igQF4rJBYCo8OR90igO1tfKwcmrot0ult0/edit#gid=0', 'CodeEditors'); let doSomething = function(data) { console.table(data); } getdata(myJsonURL,doSomething); ```
---
### Concatenate tabular data arrays Add two arrays into a new array ```js mynewarray = sumarray(firstarray, secondarray) mynewarray = sumarrayc(firstarray, secondarray) }); ``` The difference between `sumarray` and `sumarrayc` is that `sumarrayc` will fill empty fields with a void value, while `sumarray` will let those be `null`.
Example: ```js let alldata = sumarrayc(olddata,newdata); ```
---
### Array subtract Subtract the data present in one array if it exists in another array ```js xpto = aSubtract(arrayA, arrayB) }); ```
Example: ```js let notconfirmedyet = aSubtract(allnames, confirmednames); ```
---
### Verify if it has data Check if a variable exists/don't exists and has/don't have data in it, and return `true` or `false`. `empty`: Return `true` if variable has not data or do not exists, and `false` otherwise `notempty`: Return `true` if a variable exists and has data, and `false` otherwise `hasdata = notempty(mydata[0].name);` `isitempty = empty(mydata[1].name);`
Example: ```js if(empty(mydata)) { // do something } else { // do something else } ```
`empty` and `notempty` are equivalent to ```js (typeof myvar == "undefined" || myvar == "" || myvar == null) (typeof myvar != "undefined" && myvar != "" && myvar != null) ```
---
### Get images from any kind of url Return the url for an image. If it is already an image, return the url; If it is a video, return the url from the thumbnail. `xpto = imagefromallsources(url);`
Example: ```js let photo = imagefromallsources('https://www.youtube.com/watch?v=ZbFATmGhz9k'); ```
---
### Create tables with images Create a configurable table to show a collection of images. For `{options}`, we have: |property | type | description | example | |---|---|---|---| | columns | number | number of columns | 12 | | type | string | CSS type of background | "contain" or "cover" | | proportion | string | Aspect-ratio for the table cells | "16/9" | | index | number | Where to start in the data | 10 | | size | number | How many images to show | 5 | If `index` is not specified, `imagetable` will start at `0`. If `size` is not specified, `imagetable` will end at the last registry available. `mytable = imagetable(data, image_column_name, {options});`
Example: ```js let allimages = datatable(arr, "images_url", { columns: 6, proportion: "4/3"}); ```
---
### Re-scale Create a function that recalculates a value in a different scale `myfunction = rescale([originallimit_1, originallimit_2] , [convertedlimit_1, convertedlimit_2])`
Example: ```js const y = rescale([0,1],[50,70]); let xpto = y(0.5); // = 60 ```

## Date functions
---
### dayadd Add days to a string date ```js xpto = dayadd(originaldate, days); ```
Example: ```js let mystringdate = "11/04/2022"; let newdate = dayadd(mystringdate, 7); ```
---
### howmanydays How many days passed between two dates, including the last one ```js day = howmanydaysincluding(firstdate, seconddate); ```
Example: ```js let dayspassed = howmanydaysincluding("11/04/2022", "15/04/2022"); ```

## Data filtering

---
### Between Filter Create a list array from an old one when the values in the specified column are between the the limits of the query ```js xpto = btwfilter(array, column, query) ```
Example: ```js let best = btwfilter(oldarray, "ranking", "9.5 >"); let eighties = btwfilter(oldarray, "year", "1980 > 1989"); let older = btwfilter(oldarray, "year", "> 1970"); ```
---
### Boolean Filter Create a list array from an old one when their elements have any value on a specific criteria(key) ```js xpto = bfilter(array, criteria) ```
Example: | name | age | active | |------|-----|--------| | John | 40 | yes | | Rick | 35 | | | Peter | 55 | no | | Anne | 40 | |
```js let separate = bfilter(oldarray, "active"); ```
separate= | name | age | active | |------|-----|--------| | John | 40 | yes | | Peter | 55 | no |
`bfilter` is equivalent to ```js let separate = oldarray.filter( (d) => typeof d[criteria] != "undefined" && d[criteria] != null ); ```
---
### Conditional Filter Create a list array from an old one when a specific key have a match of a specific value/pattern ```js xpto = cfilter(array, key, pattern) ```
Example: | name | age | active | |------|-----|--------| | John | 40 | shure is | | Rick | 35 | | | Peter | 55 | no | | Anne | 40 | |
```js let separate = cfilter(oldarray, "active", "(.*)is"); ```
separate= | name | age | active | |------|-----|--------| | John | 40 | shure is |
`cfilter` is equivalent to ```js let separate = oldarray.filter( (d) => d[criteria].match(pattern) ); ```
---
### Sort by alphabetic order Sort an array in alphabetic order over the values for a specific key ```js newarray = alphabetic(oldarray, key); ```
Example: | name | age | active | |------|-----|--------| | John | 40 | shure is | | Rick | 35 | | | Peter | 55 | no | | Anne | 40 | |
```js let list = alphabetic(oldarray, "name"); ```
list = | name | age | active | |------|-----|--------| | Anne | 40 | | | John | 40 | shure is | | Peter | 55 | no | | Rick | 35 | |
---
### Unique function List of unique values from a criteria (key) in the array ```js newarray = unique(oldarray, criteria); ```
Example: | name | age | active | |------|-----|--------| | John | 40 | shure is | | Rick | 35 | | | Peter | 55 | no | | Anne | 40 | |
```js let list = unique(oldarray, "age"); ```
list= | | |---| |40 | |35 | |55 |
---
### Sort by a list of values Sort an array using a list of possible values for a specific key ```js newarray = sortbylist(oldarray, keyvaluesarray, key); ```
Example: ```js let disordered = [ {'fruit': 'orange', 'quantity': 5, 'type': 'B'}, {'fruit': 'apple', 'quantity': 2, 'type': 'A'}, {'fruit': 'banana', 'quantity': 3, 'type': 'B'}, {'fruit': 'apple', 'quantity': 10, 'type':'B'}, {'fruit': 'strawberry', 'quantity': 5, 'type': 'A'} ]; ``` | fruit | quantity | type | |-------|----------|------| | orange | 5 | B | | apple | 2 | A | | banana | 3 | B | | apple | 10 | B | | strawberry | 5 | A |
```js` let list = ['strawberry', 'apple']; ```
| | |---| | strawberry | | apple |
```js let orders = sortbylist(disordered, list, 'fruit'); ```
orders= | fruit | quantity | type | |-------|----------|------| | strawberry | 5 | A | | apple | 2 | A | | apple | 10 | B |
---
### Extract all Tags Extract all Tags (words marking some criteria) in an array of objects, in a specific key of the object ```js newarray = tags(array, key, separator); ```
Example: | Item Name | Type | |-----------|------| | Product 1 | A,B,C | | Prodcut 2 | B | | Product 3 | A,C | | Product 4 | B,E | | Product 5 | A,E,C |
```js let alltags = tags(myarray, "Type", ","); ```
alltags= | | |----| | A | | B | | C | | E |
---
### Shuffle function: Create a list of numbers without repetition, for random ordering itens of a list ```js neworderarray = shuffle(maxvalue, listsize); ```
Example: | N | Product | |---|---------| | 1 | Product A | | 2 | Product B | | 3 | Product C | | 4 | Product D | | 5 | Product E |
```js let order = suffle(myarray.length, myarray.length); ```
order = | | |---| | 3 | | 0 | | 1 | | 5 | | 4 |
---
### Select function: Create a filtered array using a function to filter data ```js newarray = select(oldarray, function (n, arr, patt) { // if(patt.test(arr.valr)) { // n.push(arr); // } }, patt); ```
*Shortcuts*
`selectp` for patterns
`selecta` for multipattern add
`selecte` for multipattern exclude

You can create functions as tools for selecting elements in an array
Example using *patterncheck* (one of Select Predefined Tool): | Name | Status | Quantity | |------|--------|----------| | Peter | not confirmed | 5 | | Anne | confirmed | 6 | | Richard | not confirmed | 10 | | John | waiting | 4 |
```js let cancel = select(oldarray,patterncheck,/not(.*)/gi); ```
cancel= | Name | Status | Quantity | |------|--------|----------| | Peter | not confirmed | 5 | | Richard | not confirmed | 10 |

## Select Predefined Tools Functions to pair with Select Function
---
### patterncheck Uses regex for check

Example ```js let cancel = select(oldarray,patterncheck,/not(.*)/gi); let cancel = selectp(oldarray,/not(.*)/gi); ```

---
### multipatterncheck_add Uses a string with words separated by space as query, adding every registry where one of them is found
The words can be found in different keys

Example ```js let cancel = select(oldarray,multipatterncheck_add,"not Anne 4"); let cancel = selecta(oldarray,"not Anne 4"); ```

---
### multipatterncheck_exclude Uses a string with words separated by space as query, adding only registries where all of them were found
The words can be found in different keys

Example ```js let cancel = select(oldarray,multipatterncheck_exclude,"waiting 4"); let cancel = selecte(oldarry,"waiting 4"); ```

## Omnifilter
---
Out of the box solution for fuzzy search
(This is an implementation of something like Observable's Inputs.search) For json files: ```js omnifilterfetchdata("https://www.myurl/file.json", "MyInputElement"); ``` For csv files: ```js omnifilterfetchcsvdata("https://www.myurl/file.csv", "MyInputElement"); ``` And you can use `GoogleSheetCsvURL()` to load csv data from Google Sheets: ```js omnifilterfetchcsvdata(GoogleSheetCsvURL("https://docs.google.com/spreadsheets/d/10wpfmMWn3igQF4rJBYCo8OR90igO1tfKwcmrot0ult0/edit#gid=0"), "MyInputElement"); ``` You will need: - a `` element in your HTML (you can change the id of the element); - a definition (overwrite)for omnifilter(arr) function, which will update everything in your document with data filtered by what is in the `` element; - a JSON file in an URL. arr is the result of the fuzzy search over the JSON data
it is updated at every change (key pressed) in the `` element
Example: ```html ```

## DOM extra support Functions for DOM manipulation. Load the library direcly from the web: ```html ``` Or download the file from [github](https://github.com/ranoya/DataT/blob/main/dommin.js). The reference and examples are also commented in the [source code](https://datat.vercel.app/dom.js).

### Get Element ByAnything Return a HTML element or an Array of HTML elements in the confluence of one or many properties of the element (tag, id or class) and include `$` and `$$` functions in them for chaining. ```js $("#myid"); $("div #myid"); $(".classA .classB"); $("p .classA .classB"); $("div #myid").$("p")[2].$("a") $("div #myid").$$("p")[2].$$("a")[0] ```
Example: ```js let myelementA = $("#myid"); let myelementB= $("div #myid"); let myelementArrayA = $(".classA .classB"); let myelementArrayB = $("p .classA .classB"); let getelementsinside = $("p .classA .classB")[0].$("a"); ```
---
### Get Array of Element By Anything Return (always) an array of HTML elements (even if it's only one) in the confluence of one or many properties of the element (tag, id or class) and include `$` and `$$` functions in them for chaining. ```js $$("#myid"); $$("div #myid"); $$(".classA .classB"); $$("p .classA .classB"); $$("p .classA .classB")[0].$$("a"); $$("p .classA .classB")[2].$(".classC"); ```
Example: ```js let myelementA = $$("#myid")[0]; let myelementB = $$("div #myid")[0]; let myelementC = $$(".classA .classB")[5]; let myelementArrayA = $$("p .classA .classB"); let thethrid_p = $$("p")[2]; let thethird_p_links = $$("p")[2].$$("a"); ```
---
### Array of URL variables Access URL variable values ```js https://www.mysite.com/?xpto=valueA&nda=valueB mydata = $_GET['xpto']; mydata2 = $_GET['nda']; ```
Example: ```js let urldata = $_GET['myURLvar']; ```
---
### Create new DOM Element Create new DOM Element(s) and return a array of created elements or a single element ``` domNew( HTML Tag, Properties Array, Element Content, Elements to insert the new elements ); or array = domNew( HTML Tag, Properties Array, Element Content, Elements to insert the new elements ); ```
Example: ```js let manyelements = domNew("div", { id: "myid", class: "myclass" }, "inner HTML", ".multipleexistingelements"); manyelements[2].innerHTML = "changed inner HTML"; let myelement = domNew("p", {}, "just a paragraph inside body"); myelement.innerHTML = "changed the content of the paragraph"; domNew("a", {"href": "https://datat.vercel.app", "target": "_blank"}, "DATAT Documentation"); ```
---
### Swap DOM Elements Swap the position of two DOM elements ```js domSwap( element 1, element 2 ); ```
Example: ```js domSwap( $("#myid"), $("#myid2") ); ```
---
### Move DOM Elements Move first element to the position below the second element ```js domMoveTo( element 1, element 2); ```
Example: ```js domMoveTo( $("#myid"), $("#myid2") ); ```

## Interface Management Functions to help manage your visual interface. Load the library direcly from the web: ```html ``` Or download the file from [github](https://github.com/ranoya/DataT/blob/main/screenmin.js). An example of how to use Interface Management is avaliable [here](https://datat.vercel.app/screenexample.html). See the HTML code of this document on how to use DataT Interface Management functions.

### The main 3 events There are 3 events continuously managed by DataT Screen: `onScreen`
Everytime the browser window changes, the `onScreen` function is called; `onKeys`
Everytime a key or multiple keys are pressed, the `onKeys` function is called; `onMouse`
Everytime the mouse moves, the `onMouse` function is called;
You can define the content of these functions to fulfill your needs: ```javascript onMouse = function (e) { console.log(mouseX); } ```

### System variables Some useful variables are always been update with system info: | Variable | Information | |----------|-------------| | screenWidth | Horizontal space avaliable in the browser viewport | | screenHeight | Vertical space avaliable in the browser viewport | | mouseX | Horizontal position of the mouse pointer in the browser window | | mouseY | Vertical position of the mouse pointer in the browser window | | keymapping | Array with all the keys been pressed in the keyboard | | mobileSize | `true` if the screen width is less than 600 pixels | | badScroll | `true` if you have bad scrollbars (Windows and Linux scrollbars) |

### cssVar DataT screen manager philosophy is to relie on CSS variables do the job for you. With `cssVar` you can change or get values of CSS variables. ```javascript let panelwidth = cssVar("--panel-width"); cssVar("--panel-height").value = "calc(" + mouseY + "px - 100px)"; ```

### screen The `screen()` function let you change some DOM element´s visual aspects, or get their information. ```javascript screen("#panel").marginRight = "10px"; let PanelTop = screen("#panel").top; ```
These are the properties: | Property | Get/Set/Both | Example | |----------|--------------|---------| | .top | Both | screen("#myElementId").top = "10px"; | | .bottom | Both | screen("#myElementId").bottom = "10px"; | | .left | Both | screen("#myElementId").left = "var(--all-margins, 25px)"; | | .right | Both | screen("#myElementId").right = "10px"; | | .width | Both | screen("#myElementId").width = "50%"; | | .height | Both | screen("#myElementId").top = "calc(100vh - 100px)"; | | .offsetLeft | Get only | oleft = screen("#myElementId").offsetLeft; | | .offsetRight | Get only | oright = screen("#myElementId").offsetRight; | | .offsetTop | Get only | otop = screen("#myElementId").offsetTop; | | .marginLeft | Set only | screen("#myElementId").marginLeft = "10px"; | | .marginRight | Set only | screen("#myElementId").marginRight = "10px"; | | .marginLeft | Set only | screen("#myElementId").marginLeft = "10px"; | | .marginTop | Set only | screen("#myElementId").marginTop = "10px"; | | .marginBottom | Set only | screen("#myElementId").marginBottom = "10px"; | | .paddingTop | Set only | screen("#myElementId").paddingTop = "10px"; | | .paddingLeft | Set only | screen("#myElementId").paddingLeft = "10px"; | | .paddingBottom | Set only | screen("#myElementId").paddingBottom = "10px"; | | .paddingRight | Set only | screen("#myElementId")paddingRight = "10px"; | | .display | Set only | screen("#myElementId").display = "grid"; | | .position | Set only | screen("#myElementId").position = "absolute"; | | .border | Set only | screen("#myElementId").border = "1px solid var(--my-border-color, red)"; | | .backgroundColor | Set only | screen("#myElementId"). backgroundColor = "#FF0000"; | | .color | Set only | screen("#myElementId").color = "var(--text-color, #999999)"; | | .overflow | Set only | screen("#myElementId").overflow = "hidden"; | | .backgroundImage | Set only | screen("#myElementId").backgroundImage = "url(https://mysite.com/back.jpg)"; | | .backgroundRepeat | Set only | screen("#myElementId").backgroundRepeat = "no-repeat"; | | .backgroundPosition | Set only | screen("#myElementId").backgroundPosition = "top center"; | | .backgroundSize | Set only | screen("#myElementId").backgroundSize = "cover"; | | .zIndex | Set only | screen("#myElementId").zIndex = "5"; | You can also use the `screen()` function as a shortcut to change other things in the DOM Element.
Change the content of an element with the property `.innerHTML`: ```javascrtipt screen("#myElementId").innerHTML = `Hello World`; ```
Add CSS classes with `.addCSS()`: ```javascrtipt screen("#myElementId").addCSS("OtherClass"); screen("#myElementId").addCSS("AnotherClass"); ```
Remove CSS classes with `.removeCSS()`: ```javascrtipt screen("#myElementId").removeCSS("OtherClass"); ```
Get the Array of classes of the element, with `.class`: ```javascrtipt let elClasses = []; elClasses = screen("#myElementId").class; screen("#myElementId").removeCSS(elClasses[0]); ```

31:[] 2e:{"title":"DATAT Documentation","cells":[{"id":0,"value":"# DATAT Documentation","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}