Neanderthal Pudding Mix

    @cityperformer/city-performer-widget
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.4 • Public • Published

    City performer widgets

    npm version

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

    Install

    npm i @cityperformer/city-performer-widget

    DownloadsWeekly Downloads

    84

    Version

    4.0.4

    License

    MIT

    Unpacked Size

    21.3 MB

    Total Files

    5

    Last publish

    Collaborators

    • simonharvan
    • radovansliz