Smart Market

Smart Market is an npm package that integrates the SmartMarket library with React, allowing users to interact with market data seamlessly through an iframe interface.

Installation

To install this package, use npm or yarn:

npm install smart-market

or

yarn add smart-market

Usage

1. Import the package in your React component:

   import SmartMarketApp from 'smart-market';

2. Include the component in your application:

   function App() {
       return (
           <div>
               <h1>SmartMarket Integration</h1>
               <SmartMarketApp />
           </div>
           );
       }
   
   export default App;

Component Overview

The SmartMarketApp component initializes the SmartMarket instance and let you communicate with smartmarket instance.

Props

The SmartMarketApp component accepts the following props:

Prop | Type | Description -------- | -------- | ------ host | string | The host URL for the SmartMarket API (default: http://localhost:3000) projectId | string | The project ID to use with the SmartMarket API. auth | object | An object containing email and password for authentication.

Example

Here’s how to use the SmartMarketApp component with props:

import { useEffect, useRef } from 'react'
import { SmartMarket } from 'smart-market'

function App() {
  const smartMarketRef = useRef(null)

  useEffect(() => {
    if (smartMarketRef.current) {
      const smartMarketInstance = new SmartMarket({
        domElement: smartMarketRef.current,
        auth: {
          email: 'email',
          password: 'password'
        },
        projectId: '1234'
      })
      
      return () => {
        if (smartMarketRef.current) {
          smartMarketRef.current.removeChild(smartMarketInstance._iframe);
        }
      }
    }
  }, []) 

  return (
    <div style={{ width: '100vh', height: '100vh' }} ref={smartMarketRef} />
  )
}

export default App

Communicating with SmartMarket

You can use SmartMarket intance to communicate with SmartMarket host.

Examples

• Test Connectioon

  • await smartMarketInstance._proxy.testConnection() - //logs true on successful connection

• Get All tables

  • await smartMarketInstance._proxy.project.getTables()

• Apply filter

  • await smartMarketInstance._proxy.project.addFilterRow({"layerId":"[layerId]","name":"[propertyName]","type":"string","filterValue":[value1, value2],"applyAll":false})

• Remove all filters

  • await smartMarketInstance._proxy.project.delFilterTable

• Set View State

  • await smartMarketInstance._proxy.project.setViewStateRow("main",{"latitude":25.89999299211033,"longitude":85.8097395,"zoom":6.761811610952463,"pitch":0,"bearing":0})

• Show/Hide Panel

  • await smartMarketInstance._proxy.project.setShowPanelValue(true/false)

• Set Layer Visibilty

  • await smartMarketInstance._proxy.project.setLayersVisibleCell(layerId, true/false)

• Enable/Disable Focus on Clicked Object

  • await smartMarketInstance._proxy.project.setFocusSelectedObjectValue(true/false)

• Logout

  • smartMarketInstance._proxy.logout()

• Switch Project

  • smartMarketInstance._proxy.switchProject("projectId")