# g1

`g1` is library of interaction patterns in [Gramex](https://learn.gramener.com/guide/g1/).

Install using:

```bash
yarn install g1
# ... OR ...
npm install --save g1
```

To use all features, add this to your HTML:

```html
<script src="node_modules/g1/dist/g1.min.js"></script>
<script src="node_modules/g1/dist/mapviewer.min.js"></script>
```

## Interactions

- [$.urlfilter](docs/urlfilter.md) changes URL query parameters when clicked. Used to filter data.
- [$.urlchange](docs/urlchange.md) listens to hash changes and routes events
- [$.highlight](docs/highlight.md) toggles classes on elements when clicked or hover

## Components

- [$.formhandler](docs/formhandler.md) renders a HTML table from a [FormHandler URL](https://learn.gramener.com/guide/formhandler/)
- [$.template](docs/template.md) renders lodash templates. Requires [lodash](https://lodash.com/)
- [$.dropdown](docs/dropdown.md) renders a Bootstrap dropdown. Requires [Bootstrap](https://getbootstrap.com/docs/4.2/)
- [g1.sanddance](docs/sanddance.md) moves DOM elements smoothly based on data
- [g1.mapviewer](docs/mapviewer.md) renders leaflet maps and simplifies adding layers from data.
    - Note: Mapviewer is not included in [g1.min.js](dist/g1.min.js). Include [mapviewer.min.js](dist/mapviewer.min.js)

## Utilities

- [g1.url.parse](docs/url.md) parses a URL into a structured object
    - [url.join](docs/url.md#urljoin) joins two URLs
    - [url.update](docs/url.md#urlupdate) updates a URL's query parameters
- [$.ajaxchain](docs/ajaxchain.md) chains AJAX requests, loading multiple items in sequence
- [L.TopoJSON](docs/topojson.md) loads TopoJSON files just like GeoJSON. Requires [topojson](https://github.com/topojson/topojson)
- [$.dispatch](docs/dispatch.md) is like [trigger](https://api.jquery.com/trigger/) but sends a native event (triggers non-jQuery events too)
- [g1.datafilter](docs/datafilter.md) filters the data based on the options
- [g1.types](docs/types.md) returns the data types of columns in a DataFrames

## Libraries

You can import either [g1.min.js](dist/g1.min.js) -- which has all of these functions --
or one of the individual libraries below:

- [urlfilter.min.js](dist/urlfilter.min.js)
- [urlchange.min.js](dist/urlchange.min.js)
- [highlight.min.js](dist/highlight.min.js)
- [formhandler.min.js](dist/formhandler.min.js)
- [sanddance.min.js](dist/sanddance.min.js)
- [template.min.js](dist/template.min.js)
- [ajax.min.js](dist/ajax.min.js)
- [leaflet.min.js](dist/leaflet.min.js)
- [event.min.js](dist/event.min.js)
- [datafilter.min.js](dist/datafilter.min.js)
- [types.min.js](dist/types.min.js)

[mapviewer.min.js](dist/mapviewer.min.js) is not part of [g1.min.js](dist/g1.min.js).

For debugging, use [g.js](dist/g.js) -- an un-minified version.

## Contributing

- [Add an issue](https://code.gramener.com/cto/g1/issues)
- [Browse the source code](https://code.gramener.com/cto/g1)
- [Set up g1 for development locally](CONTRIBUTING.md#set-up)
- [Release g1 on npm](CONTRIBUTING.md#release)