d3-components's Introduction

d3-components

Contains 3 Components with D3 & React Google Maps

To Install

npm i @highway-9-networks/d3-components

Note

Please include the google fonts stylesheet to index.html Like this.

    <!-- Google Fonts Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

To Use

CalibrateMap Component

import { CalibrateMap } from '@jainprashul/d3-components';

const App = () => {
    return (
        <CalibrateMap
          xdim={300} ydim={300}
          apiKey={KEY}
          center={{
            lat: lat,
            lng: lng
          }}

          getMapData={(markers) => {
            console.log(markers)
            setMapData(markers)
          }} />
    )
}

Calibrate Floor Plan

import { CalibrateFloor } from '@jainprashul/d3-components';

const App = () => {
    return (
        <CalibrateFloor
          floorPlan={`./floorplan.png`}
          getCalibrationData={(data) => console.log(data)}
          xdim={w} ydim={h} size='medium'
        />
    )
}

View Plan

import { ViewPlan } from '@jainprashul/d3-components';

const App = () => {
    return (
    <ViewPlan 
      data={[
        {
          id: 1,
          label: 'A label',
          coordinates: [100, 100],
        },
        {
          id: 2,
          label: 'Another label',
          coordinates: [200, 200],
        },
        {
          id: 3,
          label: 'Yet another label',
          coordinates: [150, 280],
        },
      ]}
      floorPlan='./imgs/template-floor-plan.png'
      marker='./imgs/pointer-green.svg'
      xdim={500}
      ydim={500}
      />
    )
}

Google Maps

import { GoogleMaps } from '@jainprashul/d3-components';

const App = () => {
    return (
    <GoogleMaps
      apiKey={KEY}
      center={{
        lat: lat,
        lng: lng
      }}
      markers={markers}
      />
    )
}

Recommend Projects