City performer widgets
Getting started
-
Insert div with wanted id somewhere in your html
<div id="someId"></div>
-
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>
- as ES6 module
-
Initialize widgets with options. Description below.
- using npm
import {CpWidgets} from '@pixwell/city-performer-widget'
new CpWidgets({
//options described bellow
})
- or using CDN
<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