City performer widgets

Getting started

1. Insert div with wanted id somewhere in your html
   <div id="someId"></div>

2. 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>

3. 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