npm package: @pixwell/city-performer-widget
Description: Widgets from city performer
Author: Pixwell
Latest version: 1.1.11

# City performer widgets 

[![npm version](https://badge.fury.io/js/%40pixwell%2Fcity-performer-widget.svg)](https://badge.fury.io/js/%40pixwell%2Fcity-performer-widget)

#### Getting started

1. Insert div with wanted id somewhere in your html \
``<div id="someId"></div>``  
2. Import library 
    - as ES6 module 
        - ``yarn add @pixwell/city-performer-widget``  
        - ``import {CpWidgets} from '@pixwell/city-performer-widget'``  
    - or with CDN  
        - ``<script src="https://unpkg.com/@pixwell/city-performer-widget@^1.1.0/dist/city-performer-widget.js"></script>``

3. Initialize widgets with options. Description below. 
- using npm
```javascript
import {CpWidgets} from '@pixwell/city-performer-widget'
new CpWidgets({
    //options described bellow
})
```
- or using CDN
```html
<script src="https://unpkg.com/@pixwell/city-performer-widget@^1.1.0/dist/city-performer-widget.js"></script>
<script>
new CityPerformerWidget.CpWidgets({ 
    //options described bellow
})
</script>
```
```
let cpwidgets = new CityPerformerWidget.CpWidgets({
    key: '<api-key>', // 'API key
    model: {
      id: 'vendor_test_10',
      name: 'test1',
      type: 'rent',
      kind: 'studio',
      usable_area: 76,
      price: 1000,
      energy_price: 80,
      description: 'Test description',
      location: {
        lat: 48.161341,
        lng: 17.046456
      },
      address: {
        full: 'Hattalova 8, 831 03 Bratislava, Slovakia',
        line_1: 'Hattalova 8',
        city: 'Bratislava',
        country: 'Slovakia',
        postal_code: '83103',
        state: 'Slovakia'
      }
    },
    widgets: [{
      id: '#someId',
      type: 'nearby',
      onDataVisible: (visible) => {
        if (visible) {{
          // nearby widget is visible  
          return
        }}
        // nearby widget is not vissible (there is data for this widget) ie: hide borders of widget 
      }
    },{
      id: '#urban',
      type: 'urban'
    },{
      id: '#stats',
      type: 'stats'
    },{
      id: '#environment',
      type: 'env'
    }],
    locale: 'sk',
    onDataLoaded: () => {
      // ie: hide loader or do something when data loaded 
    }
})
```

#### Configuration 
User can set options and locale via published methods  `setOptions(<OptionsObject>)` and `setLocale('<locale>')`

##### Options object 
###### key 
API key provided

###### model
`id` - vendor id (identificator of property). It has to be **unique** identifier, since we cache property by this id. \
`name` - name shown in maps \
`type` - `rent` or `sale`. important for stats widget, where is displayed price compared to other rents/seller respectively  
`kind` - kind of property
- `studio` 
- `beds_1` - 1 Bedroom
- `beds_2` - 2 Bedrooms
- `beds_3` - 3 Bedrooms
- `beds_4` - 4 Bedrooms
- `beds_5_more` - 5 or more Bedrooms
- `apartment` - Apartment
- `villa` - Villa
- `duplex` - Duplex
- `house` - House
- `other` - Other 

`price` - Total price or price per *sq m* based on rent sale mode\
`energy_price` - Price for utilities \
`usable_area` - Usable area in *sq m* \
`description` - (optional) \
`location` - object   
 - `lat`
 - `lng` 

`address` - object
- `full` - string full address
- `line_1` - address line 1
- `city` 
- `country` 
- `postal_code`
- `state`
 
###### widgets
Array of objects 
```
{
    id: '<id>' // identificator of div to put widget into
    type: '<type>' // which widget to put it into
    onDataVisible: (visible: boolean) => {} // returns visibility of data, if there is no data visible = false, if there is visible = true
}
```

List of available types: 

- `urban` - Widget with total and partials urban indexes 
- `nearby` - Nearby points of interest
- `env` - Environment widget with analysis of green places around property
- `wellbeing` - Wellbeing widget with analysis of neighbourhood (industry zones, etc.)
- `safety` - Data analysis widget of safety
- `mobility` - Mobility widget with analysis of bus stops, bike rentals, etc.
- `services` - Services widget with analysis of nearby services like shopping, public and health services and more
- `relax` - Relax widget with analysis of culture, areas to spend free time and similar
- `stats` - Statistics widget

###### locale
Our widgets support two languages: 
 - english (default) `en` 
 - slovak `sk`
 - czech `cz`
 - french `fr`
 - polish `pl`
 - german `de`

###### onDataLoaded
When widgets loads all data and is prepared to show data (doesn't mean, it has data for all widgets, just that requests had finished). Accepts function. 

### Contribution

#### Install dependencies 

``yarn install``

#### Build 
``yarn build:prod`` - build and minify with production url to dist/city-performer-widget.js \
``yarn build`` - build and minify to dist/city-performer-widget.js \
``yarn dev`` - development