English | 简体中文

wafer-map

SVG Map for react

Using

• install

npm i wafer-map yarn add wafer-map

• using in react

import React, { Component } from 'react';
import WaferMap from 'wafer-map';

class App extends Component {
     render() {
         const mapProps = {
             mapId: '1',
             componentWidth: 1920,
             componentHeight: 1080
         };
 
         return (
             <div className="App">
                 <WaferMap {...mapProps}/>
             </div>
         );
     }
}

notice: mapId is the only mark on the map.

Props

| Prop | default value | is required | description | |--------|---------------|---------------|---------------| | mapId | | true | map id | | componentWidth | 1920 | false | Map the width of containers | | componentHeight | 1080 | false | Map the height of containers | | background | #ddd | false | Map container background color | | visibleElement | [] | false | Displayable collection of element ids | | visibleType | [] | false | Displayable collection of element types | | visibleState | [] | false | Displayable collection of element states | | clickableElement | [] |false| Clickable collection of element ids | | clickableType | [] | false | Clickable collection of element types | | clickableState | [] | false | Clickable collection of element states | | onClick | | false | Radio callback method | | onSelect | | false | Multi-select callback method | | onClickError | | false | Select the callback method for the exception | | mapZoom | true | false | Scale the map | | mapMove | true | false | Move the map | | multiple | false | false | Multiple switch | | noName | false | false | Element names are not displayed on the map. | | showPath | false | false | Display roadmap | | markId | | false | The element id that needs to be tagged, such as '1'; If multiple, use string array format, such as ['1', '2'] | | showStateIds | [] | false | Display different states of different elements, data structure：[{id: 1, state: 'XX', color: '#fff', text: ''}, {}] | | reloadMap | | false | Reload the map | | reloadFinish | | false | Reload the map to complete the callback | | touchable | | false | Touch control | | deleteId | | false | Delete selected element id | | deleteFinish | | false | Callback after deleting selected element | | tooltipContent | | false | Display tooltip | | elementsColor | [] | false | Set color according to element id, data structure：[{id: 1, color: '#fff'}, {}] | | pathStartSvg | | false | Guide start icon, this icon contains only elements inside svg, without svg tags | | pathEndSvg | | false | Guide end icon, this icon contains only elements inside svg, without svg tags | | pathStyle | | false | Guide leader style, style setting reference svg element attributes | | markSvg | | false | Search anchor or mark icon, this icon contains only elements inside svg, without svg tags | | selectedSvg | | false | Check icon, this icon contains only elements inside svg, without svg tags | | defaultTooltipKey | | '' | You can customize the default key in the bubble, such as orgName | | getSvgDom | | '' | Get viewerdom of SVG callback method | | signatureKey | null | false | Signature key | | restfulSignature | false | false | Controls whether to sign or not, when set to true, the signature key must be set to a valid value | | textColor | #fff | false | elements text color | |scaleFactorMax| 5 |false |maximum amount of scale a user can zoom in to |scaleFactorMin | 0.5 |false | minimum amount of scale a user can zoom out of | isGenders | false | false | Display male and female outsourcing type avatars before the name of the material | |centerEleRate| 1 |false | Set the center material magnification |centerElement | {} |false | Set the central material |clickToCenter| {} |false | If set true when you click element will set it to center and zoom bigger. |windowsTouchSupport| false |false | Whether Windows touch screen is supported.

onClickError Error Code

| code | description | |--------|----------------| | 100 | Selected elements that cannot be displayed | | 101 | Selected elements that the ID cannot be selected | | 102 | Selected elements that the types cannot be selected | | 103 | Selected elements that the states cannot be selected | | 104 | Multi-select mode cannot select different types at the same time |

function

| name | props | return | description | |--------|---------|----------|---------------| | reloadElements | | | Reload the elements on the map | | clearSelectElement | | | Clears the selected set of elements |

tooltipContent example of use

tipObj is the object returned by this method

 tooltipContent = (tooltipObj)=>{
    const radius = 5;
    const width = 150;
    const height = 45;
    return (
        <g>
          <path
              fill="black"
              fillOpacity="0.7"
              d={`M0 0 l10 10 h ${width / 2 - 10 - radius}
          a ${radius} ${radius} 90 0 1 ${radius} ${radius} v ${height}
          a ${radius} ${radius} 90 0 1 ${-radius} ${radius} h ${2 * radius - width}
          a ${radius} ${radius} 90 0 1 ${-radius} ${-radius} v ${-height}
          a ${radius} ${radius} 90 0 1 ${radius} ${-radius} h ${width / 2 - 10 - radius} Z`}
          />
          <text
              dy="23"
              dominantBaseline="text-before-edge"
              fill="white"
              textAnchor="middle"
          >
            {tooltipObj.orgName}
          </text>
        </g>
    )
  }

tooltipObj对象需要从 getMapStationList这个方法里获取数据存入contentObj对象，获取完整的对象

 *getMapStationList({ payload }, { call, put, select }) {
      const { locationId } = yield select(state => state.swsCommon);
      const param = payload || { locationId };
      const { info } = yield select(state => state.login);
      if (info && info.tenant_id) {
        param.domainId = info.tenant_id;
      }
      const result = yield call(service.getMapStationList, { payload: param });
      if (result && result.code === 0) {
        const onMapList = [];
        const visibleList = [];
        result.data.forEach(item => {
          if (item && item.elementId) {
            visibleList.push(item.elementId);
            onMapList.push({
              id: item.elementId,
              state: item.statusCode,
              color: item.statusColor,
              text: item.userNames || item.stationNum,
              contentObj: item
            });
          }
        });

        yield put({
          type: 'saveOrUpdateData',
          payload: {
            mapStationList: result.data,
            stationsOnMap: onMapList,
            visibleList,
          },
        });
      }
    }