README.md 2.95 KB
Newer Older
1
# g1
S Anand's avatar
S Anand committed
2

3
`g1` is library of interaction patterns in [Gramex](https://learn.gramener.com/guide/g1/).
S Anand's avatar
S Anand committed
4

5
Install using:
S Anand's avatar
S Anand committed
6

7 8 9 10
```bash
yarn install g1
# ... OR ...
npm install --save g1
11 12
```

13
To use all features, add this to your HTML:
14 15

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

20
## Interactions
21

22 23 24
- [$.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
25

26
## Components
27

28 29 30 31 32 33
- [$.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)
34

35
## Utilities
36

37 38 39 40 41 42 43 44
- [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
45

46
## Libraries
47

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

51 52 53 54 55 56 57 58 59 60 61
- [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)
62

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

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

S Anand's avatar
S Anand committed
67 68
## Contributing

69 70 71 72
- [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)