MERGE: dev branch for g1 0.5.0

necessary,

.gitlab-ci.yml

@@ -7,3 +7,11 @@ validate:
   script:
     - yarn install
     - npm run test
+
+deploy:
+  script: deploy
+  variables:
+    SERVER: uat.gramener.com
+    URL: g1
+    VERSION: v1
+    SETUP: npm run build

CHANGELOG.md

 # Change log
 
+- `0.5.0`: 31 Mar 2018
+    - [$.formhandler](#formhandler) has a `link:` option that links clicks to URLs. @tejesh.papineni
+    - [$.highlight](#highlight) adds classes to targets based on any event from any trigger
+    - [g1.datafilter](#datafilter) implements data filtering like FormHandler. @abinesh.lal
+    - [g1.types](#types) detects the type of each JavaScript Dataframe. @abinesh.lal
+    - An internal [g1.scale](#scale) helps convert configurations to d3 scales
+- `0.4.0`: 31 Jan 2018
+    - [$.formhandler](#formhandler) allows filters, custom formatting, error handling and more. By @tejesh.papineni
+- `0.3.0`: 19 Jan 2018
+    - [$.formhandler](#formhandler) renders Gramex FormHandler results as a table. By @tejesh.papineni
+- `0.2.2`: 26 Dec 2017
+    - [$.template](#template) can be applied to a container element like `body`. It supports
+      `data-selector=` which defaults to `script[type="text/html"]`
+- `0.2.1`: 25 Dec 2017
+    - [$.template](#template) triggers a `template` event with the data and target nodes.
+      It also accepts a `src=` attribute that points to a template file.
+- `0.2.0`: 23 Dec 2017. Added
+    - [$.template](#template) renders lodash templates
+    - [L.TopoJSON](#ltopojson) loads TopoJSON files just like GeoJSON
 - `0.1.0`: 23 Dec 2017. Initial release with:
     - [$.urlfilter](#urlfilter) changes URL query parameters when clicked. Used to filter data
     - [g1.url.parse](#urlparse) parses a URL into a structured object
     - [g1.url.join](#urljoin) joins two URLs
     - [g1.url.update](#urlupdate) updates a URL's query parameters
     - [$.dispatch](#dispatch) is like [trigger](https://api.jquery.com/trigger/) but sends a native event (triggers non-jQuery events too)
-- `0.2.0`: 23 Dec 2017. Added
-    - [$.template](#template) renders lodash templates
-    - [L.TopoJSON](#ltopojson) loads TopoJSON files just like GeoJSON
-- `0.2.1`: 25 Dec 2017
-    - [$.template](#template) triggers a `template` event with the data and target nodes.
-      It also accepts a `src=` attribute that points to a template file.
-- `0.2.2`: 26 Dec 2017
-    - [$.template](#template) can be applied to a container element like `body`. It supports
-      `data-selector=` which defaults to `script[type="text/html"]`
-- `0.3.0`: 19 Jan 2018
-    - [$.formhandler](#formhandler) renders Gramex FormHandler results as a table. By @tejesh.papineni
-- `0.4.0`: 31 Jan 2018
-    - [$.formhandler](#formhandler) allows filters, custom formatting, error handling and more. By @tejesh.papineni

CONTRIBUTING.md

@@ -18,24 +18,33 @@
   - `tape.js` is dynamically created using browserify to help with test cases. This is not committed
   - Other test dependencies
 
-# Release
+# Set up
 
 To set up locally, clone this repo and run:
 
     yarn install
     npm run build     # Optional: build the dist/ directory
-    npm test          # Optional: run unit tests
+
+Here is a list of npm commands available:
+
+    npm test          # Run all unit tests
+    npm run lint      # Check for basic errors using eslint
+    npm run server    # Start a HTTP server at the current folder for manual testing
+    npm run dev       # Start a rollup watch that re-builds dist/ if files change
+
+# Release
 
 To publish a new version on npm:
 
     # Run tests on dev branch
     git checkout dev
+    npm run lint
     npm test
 
     # Update package.json version
     # Update CHANGELOG.md
     # Ensure that there are no build errors on the server
-    git commit -m"DOC: Release version x.x.x"
+    git commit . -m"DOC: Release version x.x.x"
     git push
 
     # Merge into dev branch

README.md

@@ -15,19 +15,35 @@ To use all features, add this to your HTML:
 Or import one of the individual libraries below. [g1.min.js](dist/g1.min.js) has all of these
 functions. [g.js](dist/g.js) is an un-minified version for debugging.
 
+Interactions:
+
 - [urlfilter.min.js](dist/urlfilter.min.js): URL filtering library
     - [$.urlfilter](#urlfilter) changes URL query parameters when clicked. Used to filter data.
     - [g1.url.parse](#urlparse) parses a URL into a structured object
     - [g1.url.join](#urljoin) joins two URLs
     - [g1.url.update](#urlupdate) updates a URL's query parameters
+- [highlight.min.js](dist/highlight.min.js): highlighting library
+    - [$.highlight](#highlight) toggles classes on elements when clicked or hover
+- [search.min.js](dist/search.min.js): search-as-you-type library
+    - [$.search](#search)
+- [datafilter.min.js](dist/datafilter.min.js): filtering data library
+    - [$.datafilter](#datafilter) filters the data based on the options
+
+Data components:
+
 - [formhandler.min.js](dist/formhandler.min.js): Table renderer using [FormHandler](https://learn.gramener.com/guide/formhandler/)
     - [$.formhandler](#formhandler) renders a HTML table from a [FormHandler URL](https://learn.gramener.com/guide/formhandler/)
+- [leaflet.min.js](dist/leaflet.min.js): Leaflet utilities
+    - [L.TopoJSON](#ltopojson) loads TopoJSON files just like GeoJSON. Requires [topojson](https://github.com/topojson/topojson)
+
+Utilities:
+
 - [template.min.js](dist/template.min.js): template library
     - [$.template](#template) renders lodash templates. Requires [lodash](https://lodash.com/)
 - [event.min.js](dist/event.min.js): event library
     - [$.dispatch](#dispatch) is like [trigger](https://api.jquery.com/trigger/) but sends a native event (triggers non-jQuery events too)
-- [leaflet.min.js](dist/leaflet.min.js): Leaflet utilities
-    - [L.TopoJSON](#ltopojson) loads TopoJSON files just like GeoJSON. Requires [topojson](https://github.com/topojson/topojson)
+- [types.min.js](dist/types.min.js): type detection library
+    - [g1.types](#types) returns the data types of columns in a DataFrames
 
 ## $.urlfilter
 
@@ -40,9 +56,9 @@ Example:
 </script>
 ```
 
-Let's say the page is `?city=NY`. Clicking on any `.urlfilter` in `body` opens
-`?city=NY&name=John`. The `href=` in the `.urlfilter` link *updates* the current
-page URL instead of replacing it.
+Let's say the page is `?city=NY`. Clicking on any `.urlfilter` (trigger) in
+`body` (container) opens `?city=NY&name=John`. The `href=` in the `.urlfilter`
+link *updates* the current page URL instead of replacing it.
 
 `data-mode` controls the way the URL is updated by the `href`:
 
@@ -53,57 +69,164 @@ page URL instead of replacing it.
 | `?x=1` | `?y=1`    | `?x=1&y=1` | `?x=1&y=1`        | `?x=1&y=1`           | `?x=1`            |
 | `?x=1` | `?x=2`    | `?x=2`     | `?x=1&x=2`        | `?x=1&x=2`           | `?x=1`            |
 
+For example:
+
+```html
+<a class="urlfilter" href="city=NY">                        Change ?city= to NY</a>
+<a class="urlfilter" href="city=NY" data-mode="add">        Add ?city= to NY</a>
+<a class="urlfilter" href="city=NY" data-mode="del">        Remove NY from ?city=</a>
+<a class="urlfilter" href="city=NY" data-mode="toggle">     Toggle NY in ?city=</a>
+
+<a class="urlfilter" href="city=NY" data-target="pushState">Change ?city= to NY using pushState</a>
+<a class="urlfilter" href="city=NY" data-target="#">        Change location.hash, i.e. #?city= to NY</a>
+<a class="urlfilter" href="city=NY" data-target="iframe">   Change iframe URL ?city= NY</a>
+    <iframe src="?country=US"></iframe>
+<a class="urlfilter" href="city=NY" data-target=".block">   Use AJAX to load ?city=NY into .block</a>
+    <div class="block" src="?country=US"></div>
+<script>
+  $('body').urlfilter()     // Activate all the .urlfilter elements above
+</script>
+```
+
 ### $.urlfilter attributes
 
-A `.urlfilter` class can use these attributes:
+URLFilter triggers use these attributes:
 
-- `href=` updates the URL
-- `data-target=` defines the target where the URL is updated:
+- `class="urlfilter"` indicates that this is a trigger
+- `href=` updates the page URL with this link
+- `data-target` defines the target where the URL is updated:
     - default: updates `window.location`
     - `pushState`: updates the current page using pushState
     - `#`: updates the `window.location.hash`
     - `.class`: loads URL into `.class` by updating its `src=` attribute as the base URL
+- `data-mode` can be
+    - empty - updates existing query key with value
+    - `add` - adds a new query key and value
+    - `del` - deletes query key. If value exists, only deletes the (key, value) combination
+    - `toggle` - toggles the query key and value combination
 - `data-remove`: removes any URL query parameters without values. e.g. `?x&y=1` becomes `?`
+- `data-src` changes which attribute holds the current URL when `data-target=` is a selector. Default: `src`
 
-The element on which `.urlfilter()` is called can have these attributes:
+URLFilter containers uses these attributes:
 
-- `data-selector=` changes which nodes urlfilter applies to. Default: `.urlfilter`
-- `data-attr=` changes which attribute updates the URL. Default: `href`
-- `data-src=` changes which attribute holds the current URL when `data-target=` is a selector. Default: `src`
-- `data-remove` is the same as specifying data-remove on every `.urlfilter`. Default: none
+- `data-selector` changes which nodes urlfilter applies to. Default: `.urlfilter`
+- `data-attr` changes which attribute updates the URL. Default: `href`
+- You can also specify `data-mode`, `data-remove` and `data-src`. This is the same as specifying on
+  every `.urlfilter` trigger.
 
 ### $.urlfilter events
 
-- `urlfilter` is fired on the source when the URL is changed. Attributes:
+- `urlfilter` is fired on the trigger when the URL is changed. Attributes:
     - `url`: the new URL
 - `load` is fired on the target when the URL is loaded -- only if the `data-target=` is a selector. Attributes:
     - `url`: the new URL
 
+## $.highlight
 
-### $.urlfilter examples
+Highlight elements when hovering on or clicking another element.
 
-Add this line to the page:
+Example:
 
-```js
-$('body').urlfilter()
+```html
+<div data-toggle="highlight" data-target="a.red" data-classes="active">Link</a>
+<div data-toggle="highlight" data-target="a.red" data-classes="active" data-mode="click">Link</a>
+<script>
+  $('body').highlight({
+    classes: 'shadow',
+    mode: 'click'
+  })
+</script>
 ```
 
-This activates all `.urlfilter` classes as below:
+### $.highlight attributes
 
-```html
-<a class="urlfilter" href="city=NY">                        Change ?city= to NY</a>
-<a class="urlfilter" href="city=NY" data-mode="add">      Add ?city= to NY</a>
-<a class="urlfilter" href="city=NY" data-mode="del">      Remove NY from ?city=</a>
-<a class="urlfilter" href="city=NY" data-mode="toggle">   Toggle NY in ?city=</a>
+Highlight triggers use these attributes:
 
-<a class="urlfilter" href="city=NY" data-target="pushState">Change ?city= to NY using pushState</a>
-<a class="urlfilter" href="city=NY" data-target="#">        Change location.hash, i.e. #?city= to NY</a>
-<a class="urlfilter" href="city=NY" data-target="iframe">   Change iframe URL ?city= NY</a>
-    <iframe src="?country=US"></iframe>
-<a class="urlfilter" href="city=NY" data-target=".block">   Use AJAX to load ?city=NY into .block</a>
-    <div class="block" src="?country=US"></div>
+- `data-toggle="highlight"` indicates that the element acts as a highlighter
+- `data-target=` selectors to highlight (required)
+- `data-mode="click"` highlights on click. Use `data-mode="hover"` to higlight on hover (default)
+- `data-classes=` space-separated class names to toggle on target elements
+
+Highlight containers use these attributes:
+
+- `data-selector=` changes which nodes highlight applies to. Default: `[data-toggle="highlight"]`
+- `data-mode` is the same as specifying data-mode on every highlighter. Default: `hover`
+- `data-attr` is the attribute that defines classes to toggle. Default: `data-classes`
+- `data-classes=` is the same as specifiying the data-classes on every highlighter. Default: `active`
+
+### $.highlight events
+
+- `highlight` is fired on the trigger when activated. Attributes:
+    - `target`: elements that match the `data-target=` selector
+
+
+## $.search
+
+Highlight elements by searching as you type.
+
+Example:
+
+### $.search attributes
+
+`.search` triggers use these attributes:
+
+- `data-toggle="search"`
+
+## datafilter
+
+
+`g1.datafiilter(data, filters)` returns the filtered data based on the filters. For example:
+
+```js
+var data = [
+  {"ID": "1", "product": "Fan", "sales": "100", "city": "NY"},
+  {"ID": "2", "product": "Fan", "sales": "80", "city": "London"},
+  {"ID": "3", "product": "Fan", "sales": "120", "city": "NJ"},
+  {"ID": "4", "product": "Fan", "sales": "130", "city": "London"},
+  {"ID": "5", "product": "Light", "sales": "500", "city": "NY"},
+  {"ID": "5", "product": "Light", "sales": "100", "city": "London"}
+]
+
+g1.datafilter(data, [{col: 'sales', op: '>', val: 100},
+                    {col: 'city', op: 'in', val: ['London', 'NY']},
+                    {col: 'product', val: 'Fan'}])
+
+// Returns [{"ID": "3", "product": "Fan", "sales": "120", "city": "NJ"}, {"ID": "4", "product": "Fan", "sales": "130", "city": "London"}]
 ```
 
+## datafilter options
+
+datafilter() contains three parameters:
+
+  - data: a list of objects
+  - filters: a list of objects, that will contains the below keys:
+    - col: column to be filtered.
+    - op: operator to be applied for filteration. default: `=`
+    - val: value of the selected column
+  - options: a dictionary that contains the below keys:
+    - limit: result is limited to. default: `1000`
+    - offset: filtering data should start from. default: `0`
+    - sort: a list of objects, that will contains the below keys:
+      - column: column to be sorted
+      - order: asc or desc. default: `asc`
+    - columns: a list of objects, that will contains the below keys:
+      - allow: a list of column names to be returned in the filtered data
+      - not: a list of column names to be skiped in the filtered data
+
+Rules:
+
+  - the key `op` may contains any one of the below values:
+    - `=`
+    - `!=`
+    - `>`
+    - `<`
+    - `>=`
+    - `<=`
+    - `~`
+    - `!~`
+    - `in`
+
+
 
 ## $.formhandler
 
@@ -130,9 +253,9 @@ The full list of options is below. Simple options can be specified as `data-` at
 - `src`: [FormHandler][formhandler] URL endpoint
 - `columns`: comma-separated column names to display, or a list of objects with these keys:
     - `name`: column name. `"*"` is a special column placeholder for "all columns"
-    - `title`: display name of the column. Defaults to the same value as `name`
-    - `type`: `text` (default) / `number` / `date`. Determines filters to be used
-    - `format`: string / function that changes the cell contents.
+    - `title`: for header display. Defaults to the same value as `name`
+    - `type`: `text` (default) / `number` / `date`. Data type. Determines filters to be used
+    - `format`: string / function that renders the cell contents.
       - functions are applied to the value and the return value is used
       - strings specify a numeral.js format if the value is a number (you must include numeral.js)
       - strings specify a moment.js format if the value is a date (you must include moment.js)
@@ -141,7 +264,13 @@ The full list of options is below. Simple options can be specified as `data-` at
     - `filters`: `true` (default) / `false` / operators dict with:
       - `{'', 'Equals...', '!', 'Does not equal...', ...}`.
         The default list of operators is based on the auto-detected type of the column.
-    - `hideable`: `true` (default) / `false`
+    - `link`: string / function that generates a link for this each cell.
+      - If no `link:` is specified, clicking on the cell filters by that cell.
+      - If `link:` is a string, opens a new window with the string URL interpolated as a lodash template with `row` as data.
+        Example: `"https://example.org/city/<%- city >"`
+      - If `link:` is a function, opens a new window with the URL as `fn(row)`.
+        Example: `function(row) { return 'https://example.org/city/' + row.city }`
+    - `hideable`: `true` (default) / `false`. Hides the column
     - `unique`: TODO: {dict of query parameter and display value} or [list of values] or function?
 - `table`: Shows the table control. Can be `true` (default) / `false`
 - `count`: Shows the number of rows. Can be `true` (default) / `false`
@@ -330,12 +459,16 @@ $('script[type="text/html"]')
 
 ## $.dispatch
 
+Triggers a native JavaScript event. For example:
+
 ```js
 $('a.action').dispatch('click')
 ```
 
-mimics a user click action on `a.action`. Unlike [$.trigger](https://api.jquery.com/trigger/),
-this executes non-jQuery event handlers as well.
+sends a click to `a.action`. Like [$.trigger](https://api.jquery.com/trigger/),
+but this will fire non-jQuery event handlers as well.
+
+### $.dispatch options
 
 You can add an optional dict as the second parameter. It can have any
 [event properties](https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties)
@@ -345,6 +478,12 @@ as attributes. For example:
 $('a.action').dispatch('click', {bubbles: true, cancelable: false})
 ```
 
+- bubbles: whether the event bubbles or not. default: true
+- cancelable: whether the event is cancelable or not. default: true
+- All other `new Event()` options will also work
+
+https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
+
 
 ## L.TopoJSON
 
@@ -495,3 +634,75 @@ g1.url.parse('/?a=1&b=2&c=3&d=4')       // Update this URL
           'a=del&b=toggle&c=add')       // Delete ?a, Toggle ?b, add ?c, update ?d (default)
 // Returns /?b=3&c=3&c=6&d=7
 ```
+
+## types
+
+`g1.types(data)` returns the column data types. For example:
+
+```js
+var data = [
+  {a: 1, b: 1.1, c: 'c', d: '2014-04-04', e: true},
+  {a: 2, b: 2},
+]
+g1.types(data)      // Returns {"a": "number", "b": "number", "c": "string", "d": "date", "e": "boolean"}
+```
+
+### types options
+
+`types()` accepts 2 parameters:
+
+- `data`: a list of objects
+- `options`: a dictionary that may contain these keys:
+  - `convert`: converts values to the right type. For example, "1" is converted to 1. default: `false`
+  - `limit`: number of rows to evaluate. default: 1000
+  - `ignore`: list of values that should be ignored. default: `[null, undefined]`
+
+Rules:
+
+- Evaluate up to `limit` rows
+- Ignore values that are keys in the `ignore` option. Only consider the rest
+- If `convert` is `false`, then for each column:
+  - If all values are Date objects -> `date`
+  - Else if all values are numbers -> `number`
+  - Else if all values are strings -> `string`
+  - Else if all values are bools -> `boolean`
+  - Else if there are no values or is undefined or null -> `null`
+  - Else -> `mixed`
+- Else if `convert` is `true`, then for each column:
+  - If all values can be converted to Date -> `date`
+  - Else if all values can be converted to numbers -> `number`
+  - Else if all values are bools -> `boolean`
+  - Else if there are no values or is undefined or null  -> `null`
+  - Else -> `string`
+
+## Interaction conventions
+
+All interaction components use this naming convention:
+
+- Interactions are enabled on a *container*, typically `body`. For example,
+  `$('body').urlfilter()`. Containers have these common attributes:
+    - `data-selector`: selector to identify triggers. e.g. `.urlfilter`, `.highlight`
+    - `data-target`: selector that all triggers act on by default
+    - `data-mode`: mode of interaction for all triggers
+    - `data-attr`: attribute that contains the interaction data, e.g. `href` for `.urlfilter`
+- Interactions are triggered on a *trigger*. For example, `.urlfilter` for `$().urlfilter()`.
+  Clicking / hovering on / typing in a trigger triggers the interaction.
+    - `data-target`: selector that this trigger acts on
+    - `data-mode`: mode of interaction for this trigger
+- Interactions change a *target*. For example, `urlfilter` changes `location.href` by default. The
+  `data-target` on containers and triggers define this.
+- Interactions data is contained in an attribute. This is applied to the target. For example,
+  `.urlfilter` applied `href` to the target. The attribute name is stored in `data-attr`.
+- Interactions have *modes*. This can be controlled using `data-mode=`.
+
+All container `data-` attributes can also be passed as an option to the
+function. For example, `<body data-selector=".link">` is the same as
+`$('body').urlfilter({selector: '.link'})`.
+
+## Contributing
+
+Contributions are welcome.
+
+- Please report bug fixes on the [issues page](https://code.gramener.com/s.anand/g1/issues)
+- Developers may read [CONTRIBUTING.md](CONTRIBUTING.md) to understand the file
+  structure and how to set this repository up

index-highlight.js

+export { version } from './src/package.js'
+import { highlight } from './src/highlight.js'
+
+if (typeof jQuery != 'undefined') {
+  jQuery.extend(jQuery.fn, {
+    highlight: highlight
+  })
+}

index-scale.js

+export { version } from './src/package.js'
+export { scale } from './src/scale.js'

index.js

 export { version } from './src/package.js'
+export { types } from './src/types.js'
 export { url } from './index-urlfilter.js'
+export { datafilter } from './src/datafilter.js'
+export { scale } from './src/scale.js'
+import './index-highlight.js'
 import './index-template.js'
 import './index-formhandler.js'
 import './index-event.js'

package.json

 {
   "name": "g1",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Gramex 1.x interaction library",
   "license": "UNLICENSED",
   "author": "S Anand <s.anand@gramener.com>",
@@ -15,17 +15,20 @@
     "dev": "rimraf dist && json2module package.json > src/package.js && rollup -c -w",
     "pretest": "npm run build && browserify -s tape -r tape -o test/tape.js",
     "server": "npm run pretest && npm run lint && node test/server.js",
-    "test": "npm run lint && tape test/test-*.js | faucet && node test/server.js run | tap-merge | faucet",
+    "test": "tape test/test-*.js | faucet && node test/server.js run | tap-merge | faucet",
     "prepublishOnly": "npm test"
   },
   "devDependencies": {
     "bootstrap": "4.0.0-beta.3",
     "browserify": "14",
     "component-emitter": "1",
+    "d3": "4",
+    "d3-scale-chromatic": "1",
     "eslint": "^4",
     "express": "4",
     "faucet": "^0.0.1",
     "font-awesome": "4",
+    "glob": "^7.1.2",
     "html-minifier": "3",
     "jquery": "3",
     "json2module": "0.0",

rollup.config.js

@@ -22,6 +22,11 @@ export default [
     plugins: [htmlparts('src/formhandler.template.html'), uglify()],
     output: { file: "dist/formhandler.min.js", format: "umd", name: "g1" }
   },
+  {
+    input: "index-highlight",
+    plugins: [uglify()],
+    output: { file: "dist/highlight.min.js", format: "umd", name: "g1" }
+  },
   {
     input: "index-template",
     plugins: [uglify()],
@@ -36,5 +41,11 @@ export default [
     input: "index-leaflet",
     plugins: [uglify()],
     output: { file: "dist/leaflet.min.js", format: "umd", name: "g1" }
+  },
+  {
+    input: "index-scale",
+    plugins: [uglify()],
+    output: { file: "dist/scale.min.js", format: "umd", name: "g1" }
   }
+
 ]

src/datafilter.js

+var operators = {
+  '=': function(value, compare_with) { return value == compare_with },
+  '!=': function(value, compare_with) { return value != compare_with },
+  '>': function(value, compare_with) { return value > compare_with },
+  '<': function(value, compare_with) { return value < compare_with },
+  '>=': function(value, compare_with) { return value >= compare_with },
+  '<=': function(value, compare_with) { return value <= compare_with },
+  'in': function(value, compare_with) { return (compare_with.indexOf(value) != -1) },
+  '~': function(value, compare_with) { return (compare_with.indexOf(value) != -1) },
+  '!~': function(value, compare_with) { return (compare_with.indexOf(value) == -1) }
+}
+
+var sorting = {
+  'string': function(value, compare_with) {
+    value = value.toUpperCase()
+    compare_with = compare_with.toUpperCase()
+    if (value < compare_with) {
+      return -1
+    }
+    if (value > compare_with) {
+      return 1
+    }
+    return 0
+  },
+  'number': function(value, compare_with) { return value - compare_with }
+}
+
+
+export function datafilter(data, filters, options) {
+  filters = filters || []
+
+  options = options || {}
+  options.limit = options.limit || 1000
+  options.offset = options.offset || 0
+
+  options.sort = options.sort || []
+
+  options.columns = options.columns || {}
+  options.columns.allow = options.columns.allow || []
+  options.columns.not = options.columns.not || []
+
+  var result_count = 0
+  var result = []
+
+  for(var index = options.offset; index < data.length; index++) {
+    var criteria_statisfied = true
+    var row = data[index]
+
+    for(var i = 0; i < filters.length; i++) {
+      var col = filters[i].col || 'null'
+      var operator = filters[i].op || '='
+      var value = filters[i].val || null
+
+      if(!(col in row))
+        continue
+
+      if(!operators[operator](row[col], value)){
+        criteria_statisfied = false
+        break
+      }
+    }
+
+    if (criteria_statisfied) {
+      for(var column in row) {
+        if(options.columns.not.indexOf(column) != -1)
+          delete row[column]
+        else if(options.columns.allow.indexOf(column) == -1 && options.columns.allow.length != 0)
+          delete row[column]
+      }
+
+      result.push(row)
+      result_count++
+    }
+
+    if(result_count == options.limit) {
+      break
+    }