asb_cloud_front/src/pages/TelemetryView/RigMnemo.jsx

const styleBase = {
  stroke: "none",
  strokeLinecap: "butt",
  strokeLinejoin: "miter",
}

const styleCasing = {
  ...styleBase,
  fill: "#808080",
};

const styleGround = {
  ...styleBase,
  fill: "#deaa87",
};

const styleTower = {
  ...styleBase,
  fill: "#999999",
};

const styleWell = {
  ...styleBase,
  fill: "#37abc8",
};

const styleBitDrive = {
  ...styleBase,
  fill: "#ff8080",
};

const styleBitTool = {
  ...styleBase,
  fill: "#f9f9f9",
};

const styleBlock = {
  ...styleBase,
  fill: "#ffdd55",
};

// const stylePump1 = {
//   ...styleBase,
//   fill: "#5fd35f",
// };

// const stylePump2 = {
//   ...styleBase,
//   fill: "#b3b3b3",
// };

export default function RigMnemo({
  blockPosition,
  bitPosition,
  wellDepth
}) {
  let blockPositionY = 0
  let bitPositionY = 0

  const isBlockVisible = blockPosition != null && Number.isFinite(blockPosition)
  const isBitVisible = wellDepth && bitPosition != null && Number.isFinite(bitPosition) && Number.isFinite(wellDepth)

  if (isBlockVisible)
    blockPositionY = -35 + (50 * (30 - +blockPosition) / 30)

  if (isBitVisible) {
    const bitPositionLocal = +bitPosition
    const wellDepthLocal = +wellDepth
    const altitude = 8
    //-75 + 75*bitPositionProc
    const bitPositionProc = (bitPositionLocal)/(wellDepthLocal)

    if (bitPositionLocal < altitude)
      bitPositionY = -75 + 16 * bitPositionLocal/altitude
    else
      bitPositionY = -59 + 59 * bitPositionLocal / wellDepthLocal

    if( wellDepthLocal > 20 && (wellDepthLocal - bitPositionLocal) > 2 && bitPositionProc > 0.96)
      bitPositionY = -2    
  }

  const blockTranslate = `translate(-75, ${blockPositionY})`
  const bitTranslate = `translate(0, ${bitPositionY})`

  return (
    <svg
      width="170"
      height="540"
      viewBox="20 0 40 145"
      version="1.1"
      id="svg8"
    >
      <g id="Casing" style={styleCasing}>
        <path d="m 29.897917,67.46875 v -1.322917 l 4.497916,-10e-7 v -1.322916 h 3.96875 v 1.322916 l 4.497917,10e-7 v 1.322917 z" />
        <path d="M 31.75,97.895832 V 67.468749 h 9.260416 v 30.427083 z" />
        <path d="m 30.95625,83.34375 0,1.058333 h 10.847917 l -10e-7,-1.058333 z" />
        <path d="m 30.95625,85.195833 v 1.058333 h 10.847917 v -1.058333 z" />
        <path d="m 30.95625,70.114583 v 1.058333 h 10.847918 l -10e-7,-1.058333 z" />
        <path d="m 30.95625,71.966666 v 1.058333 h 10.847918 v -1.058333 z" />
      </g>
      <g id="Ground">
        <path
          style={styleGround}
          d="m 62.177083,83.34375 -19.84375,0 V 97.895833 H 39.6875 V 142.875 H 33.072917 V 97.895833 H 30.427083 V 83.34375 l -10.583333,0 v 62.17708 h 42.333333 z"
          id="path849"
        />
      </g>
      <g id="Tower" style={styleTower}>
        <path d="m 29.104166,83.343749 v -2.645833 h -3.96875 v 2.645833 z" />
        <path d="m 43.656249,83.343749 v -2.645833 h 3.96875 v 2.645833 z" />
        <path d="m 26.458333,80.697916 v -11.90625 h 1.322917 v 11.90625 z" />
        <path d="m 44.979166,80.697917 v -11.90625 h 1.322917 v 11.90625 z" />
        <path d="m 22.489583,68.791666 h 27.78125 v -1.322917 h -27.78125 z" />
        <path d="M 22.357422 66.013672 L 22.357422 67.601562 L 22.490234 67.601562 L 50.402344 67.601562 L 50.402344 66.013672 L 50.271484 66.013672 C 47.662479 66.013673 45.393545 66.029632 41.142578 66.013672 L 40.878906 66.013672 L 31.882812 66.013672 L 31.75 66.013672 C 31.693076 66.013672 31.673038 66.013672 31.617188 66.013672 C 27.779098 66.013674 26.402061 66.013673 22.490234 66.013672 L 22.357422 66.013672 z M 22.621094 66.277344 C 26.405208 66.277345 27.834127 66.277346 31.617188 66.277344 L 31.617188 67.335938 L 22.621094 67.335938 L 22.621094 66.277344 z M 31.882812 66.277344 L 40.878906 66.277344 L 40.878906 67.335938 L 31.882812 67.335938 L 31.882812 66.277344 z M 41.142578 66.277344 C 45.330989 66.293059 47.579975 66.277812 50.138672 66.277344 L 50.138672 67.335938 L 41.142578 67.335938 L 41.142578 66.277344 z " />
        <path d="M 34.263672 2.5136719 L 34.263672 2.6464844 L 34.263672 6.7460938 L 38.496094 6.7460938 L 38.496094 2.5136719 L 34.263672 2.5136719 z M 34.527344 2.7773438 L 38.232422 2.7773438 L 38.232422 6.4824219 L 34.527344 6.4824219 L 34.527344 2.7773438 z " />
        <path d="m 34.395833,4.4979166 h 3.96875 v 0.2645833 h -3.96875 z" />
        <path d="M 36.247916,2.6458333 V 6.6145832 H 36.5125 V 2.6458333 Z" />
        <path d="M 34.395833,6.6145833 V 7.9375 h 3.96875 V 6.6145833 Z" />
        <path d="m 26.458333,68.791666 7.9375,-60.8541661 h 1.322917 l -7.9375,60.8541661 z" />
        <path d="m 44.979166,68.791666 -7.9375,-60.8541661 h 1.322917 l 7.9375,60.8541661 z" />
        <path d="M 42.333333,26.458333 H 30.427083 L 27.78125,25.135416 h 17.197916 z" />
        <path d="M 34.396484 18.388672 L 34.396484 18.652344 L 38.365234 18.652344 L 38.365234 18.388672 L 34.396484 18.388672 z " />
        <path d="M 34.925781 13.097656 L 34.925781 13.361328 L 37.835938 13.361328 L 37.835938 13.097656 L 34.925781 13.097656 z " />
        <path d="M 37.724609 13.15625 L 34.285156 18.449219 L 34.505859 18.59375 L 37.947266 13.300781 L 37.724609 13.15625 z " />
        <path d="M 35.841797 7.8886719 L 35.595703 7.9863281 L 37.712891 13.277344 L 37.958984 13.179688 L 35.841797 7.8886719 z " />
        <path d="M 34.501953 18.441406 L 34.291016 18.601562 L 39.318359 25.214844 L 39.527344 25.054688 L 34.501953 18.441406 z " />
        <path d="M 28.574219 62.044922 L 28.574219 62.308594 L 44.185547 62.308594 L 44.185547 62.044922 L 28.574219 62.044922 z " />
        <path d="M 29.369141 55.429688 L 29.369141 55.695312 L 43.392578 55.695312 L 43.392578 55.429688 L 29.369141 55.429688 z " />
        <g id="g985">
          <path d="m 42.333333,48.947917 -11.90625,-10e-7" />
          <path d="M 30.427734 48.816406 L 30.427734 49.080078 L 42.333984 49.080078 L 42.333984 48.816406 L 30.427734 48.816406 z " />
        </g>
        <g>
          <path d="M 41.539583,42.333333 H 31.220833" />
          <path d="M 31.220703 42.201172 L 31.220703 42.464844 L 41.539062 42.464844 L 41.539062 42.201172 L 31.220703 42.201172 z " />
        </g>
        <path d="M 31.326172 42.253906 L 31.115234 42.414062 L 36.142578 49.027344 L 36.248047 49.080078 L 36.511719 49.080078 L 36.617188 49.027344 L 41.644531 42.414062 L 41.433594 42.253906 L 36.447266 48.816406 L 36.314453 48.816406 L 31.326172 42.253906 z " />
        <path d="M 33.460938 26.412109 L 33.212891 26.503906 L 36.15625 34.527344 L 36.605469 34.527344 L 39.546875 26.503906 L 39.298828 26.412109 L 36.419922 34.263672 L 36.339844 34.263672 L 33.460938 26.412109 z " />
        <path d="M 32.398438 34.335938 L 32.160156 34.455078 L 36.166016 42.464844 L 36.59375 42.464844 L 40.599609 34.455078 L 40.363281 34.335938 L 36.431641 42.201172 L 36.330078 42.201172 L 32.398438 34.335938 z " />
        <path d="M 30.527344 48.861328 L 30.328125 49.035156 L 36.1875 55.695312 L 36.572266 55.695312 L 42.433594 49.035156 L 42.234375 48.861328 L 36.453125 55.429688 L 36.308594 55.429688 L 30.527344 48.861328 z " />
        <path d="M 36.199219 55.429688 L 28.488281 62.076172 L 28.662109 62.277344 L 36.296875 55.695312 L 36.462891 55.695312 L 44.099609 62.277344 L 44.271484 62.076172 L 36.5625 55.429688 L 36.199219 55.429688 z " />
        <path d="M 32.279297 34.263672 L 32.279297 34.527344 L 40.480469 34.527344 L 40.480469 34.263672 L 32.279297 34.263672 z " />
      </g>
      <g id="Well" style={styleWell}>
        <path d="M 33.072916,97.895832 H 39.6875 V 142.875 h -6.614584 z" />
      </g>
      {isBitVisible && 
        <g id="Bit"
          transform={bitTranslate}>
          <path
            style={styleBitDrive}
            d="m 33.072916,142.875 1.322917,-3.96875 h 3.96875 L 39.6875,142.875 h -6.614584"
          />
          <path
            style={styleBitTool}
            d="m 34.395833,138.90625 v -3.96875 h 3.96875 v 3.96875 z"
          />
        </g>
      }
      {isBlockVisible &&
        <g id="Block"
          transform={blockTranslate}
          style={styleBlock}
        >
          <path d="m 111.125,45.772916 c 0,0 -0.79375,-1.102431 -0.79375,-1.322917 0,-0.220486 -0.0952,-0.338724 0,-0.529166 0.0952,-0.190442 0.29053,-0.433713 0.52917,-0.529167 0.23864,-0.09545 0.55512,-0.09545 0.79375,0 0.23863,0.09545 0.43394,0.338726 0.52916,0.529167 0.0952,0.190441 0,0.440972 0,0.529166 0,0.08819 -0.79375,1.322917 -0.79375,1.322917 z" />
          <path d="m 111.38958,45.772916 c 0,0 0.17047,0.398584 0.26459,0.529167 0.0941,0.130583 0.22384,0.166227 0.26458,0.264583 0.0407,0.09836 0.0328,0.390283 0,0.529167 -0.0328,0.138884 -0.10568,0.166378 -0.26458,0.264584 -0.1589,0.09821 -0.37027,0.09821 -0.52917,0 -0.1589,-0.09821 -0.23179,-0.1257 -0.26458,-0.264584 -0.0328,-0.138884 0,-0.529167 0,-0.529167 0,0 0.10568,0.430961 0.26458,0.529167 0.1589,0.09821 0.40444,0.124726 0.52917,0 0.12472,-0.124725 0.0576,-0.39007 0,-0.529167 -0.0576,-0.139097 -0.17047,-0.133999 -0.26459,-0.264583 -0.0941,-0.130584 -0.26458,-0.529167 -0.26458,-0.529167 z" />
          <path d="m 110.33125,47.360416 v 2.38125 l 0.79375,10e-7 v 0.529166 h -0.26458 V 50.8 l 1.32291,-10e-7 v -0.529166 h -0.26458 v -0.529167 l 0.79375,10e-7 v -2.38125 z" />
        </g>
      }
      {/* <g id="Pump1" transform="translate(-0.79375,2.6066667e-4)">
        <circle
          style={stylePump1}
          id="PumpCircle"
          cx="51.59375"
          cy="80.698891"
          r="1.984375"
        />
        <path
          d="m 51.064583,81.492642 1e-6,-1.587499 1.322916,0.79375 v -10e-7 z"
          id="PumpTriangle"
        />
        <path
          style={stylePump1}
          d="m 48.948828,78.052995 v 5.292056 h 0.13086 l 5.158984,-2.6e-4 v -5.292057 z m 0.263672,0.263672 4.7625,-2.61e-4 v 4.762761 l -4.7625,2.6e-4 z"
          id="PumpSquare"
        />
      </g>
      <g id="Pump2" transform="translate(4.7625,-5.205e-4)">
        <circle
          style={stylePump2}
          id="PumpCircle"
          cx="51.59375"
          cy="80.698891"
          r="1.984375"
        />
        <path
          d="m 51.064583,81.492642 1e-6,-1.587499 1.322916,0.79375 v -10e-7 z"
          id="PumpTriangle"
        />
        <path
          style={stylePump2}
          d="m 48.948828,78.052995 v 5.292056 h 0.13086 l 5.158984,-2.6e-4 v -5.292057 z m 0.263672,0.263672 4.7625,-2.61e-4 v 4.762761 l -4.7625,2.6e-4 z"
          id="PumpSquare"
        />
      </g> */}
    </svg>
  );
}