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 @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

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