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 @cityperformer/city-performer-widget
import {CpWidgets} from '@cityperformer/city-performer-widget'
- or with CDN
<script src="https://unpkg.com/@cityperformer/city-performer-widget@^4.0.0/dist/city-performer-widget.js"></script>
- as ES6 module
-
Initialize widgets with options. Description below.
- using npm
import {CpWidgets} from '@cityperformer/city-performer-widget'
new CpWidgets({
//options described bellow
})
- or using CDN
<script src="https://unpkg.com/@cityperformer/city-performer-widget@^4.0.0/dist/city-performer-widget.js"></script>
<script>
new CityPerformerWidget.CpWidgets({
//options described bellow
})
</script>
let cpwidgets = new CityPerformerWidget.CpWidgets({
id: '#widgets',
key: '<api-key>', // 'API key
locale: 'sk', // supports en, sk, cz, pl
currency: 'eur', // supports eur, czk, pln, huf
model: {
id: 'vendor_test_10',
name: 'test1',
type: 'rent',
kind: 'studio',
usable_area: {
overall: 76
},
price: {
price: 1000,
energy_price: 80, // not required
currency: 'EUR' // not required
},
description: 'Test description',
location: {
lat: 48.161341,
lng: 17.046456
},
address: {
full: 'Hattalova 8, 831 03 Bratislava, Slovakia',
city: 'Bratislava',
country: 'Slovakia'
}
},
widgets: ['urban', 'nearby', 'analytics'],
onDataVisible: (visible) => {
// 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
id
Identificator of div to put widget into. i.e. #widgets
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 -
other
- Other
price
- object
-
price
- Total price or price per sq m based on rent sale mode -
energy_price
- Price for utilities -
currency
- Currency of above entered prices
usable_area
- Usable area in sq m
description
- (optional)
location
- object
lat
lng
address
- object
-
full
- string full address city
country
Widgets
Array of strings possible values:
List of available types:
-
urban
- Widget with total and partials urban indexes -
nearby
- Nearby points of interest -
analytics
- Widget with clickable categories of analysis- Environment widget with analysis of green places around property
- Wellbeing widget with analysis of neighbourhood (industry zones, etc.)
- Data analysis widget of safety
- Mobility widget with analysis of bus stops, bike rentals, etc.
- Services widget with analysis of nearby services like shopping, public and health services and more
- Relax widget with analysis of culture, areas to spend free time and similar
Locale
Our widgets support four languages:
- english (default)
en
- slovak
sk
- czech
cz
- polish
pl
Currency
Our widgets support four currencies (if it is not set with the property widget displays this currency):
-
eur
€ -
czk
CZK -
pln
zł -
huf
Ft
onDataVisible
returns visibility of data, if there is no data visible == false
, if there is visible == true
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