PointerIcon перемещён в папку для иконок и переписан на tsx

src/components/PointerIcon.jsx

@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types'
-
-export const PointerIcon = ({color, size, online, onlineColor}) => (
-  <svg
-    width={size.width ?? size}
-    height={size.height ?? (Number.isInteger(size) ? size*1.19 : size)}
-    version={'1.1'}
-    viewBox={'0 -1.5 7.9 9.4'}
-    xmlns={'http://www.w3.org/2000/svg'}
-    stroke={color}
-    fill={'none'}
-  >
-    {online && ( // Волны от антенны
-      <g stroke={onlineColor} strokeWidth={0.164583}>
-        <path d={'m 2.2051668,-0.54483294 a 2.46875,2.46875 0 0 1 3.4913396,-1.1e-7'}/>
-        <path d={'m 2.558464,-0.19153572 a 1.975,1.975 0 0 1 2.7930718,-9e-8'}/>
-        <path d={'m 2.907598,0.15759823 a 1.48125,1.48125 0 0 1 2.0948038,-7e-8'}/>
-      </g>
-    )}
-    {/* Арматурная сетка */}
-    <path
-      d={'m3.1 1.6 1.9 1.5-2.3 1.1 2.9 2-0.78-4.6h-1.7l-0.78 4.6 2.9-2-2.3-1.1 1.9-1.5'}
-      strokeLinecap={'round'}
-      strokeLinejoin={'bevel'}
-      strokeWidth={'.17'}
-    />
-    <g fill={color}> {/* Шляпы */}
-      <rect x={'2.8'} y={'.98'} width={'2.3'} height={'.45'} strokeWidth={'.084'} />
-      <rect x={'3.4'} y={'.31'} width={'1.2'} height={'.45'} strokeWidth={'.084'} />
-    </g>
-    <g strokeWidth={'.084'}> {/* Столб и границы почвы */}
-      <rect x={'3.9'} y={'1.6'} width={'.11'} height={'6'} strokeLinejoin={'round'} />
-      <path d={'m1.2 6.2 2.1 8e-7v1.5'} /> 
-      <path d={'m4.5 7.7v-1.5l1.9-8e-7'} />
-    </g>
-  </svg>
-)
-
-PointerIcon.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.shape({
-      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    })
-  ]),
-  online: PropTypes.bool,
-  onlineColor: PropTypes.string
-}
-
-PointerIcon.defaultProps = {
-  color: 'currentColor',
-  size: {width: '48', height: '59'},
-  online: false,
-  onlineColor: 'red'
-}
-
-export default PointerIcon

src/components/icons/PointerIcon.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+
+type PointerIconColors = {
+    online?: string
+    active?: string
+    inactive?: string
+    unknown?: string
+}
+
+interface PointerIconProps {
+    width?: string | number
+    height?: string | number
+    online?: boolean
+    state?: 'active' | 'inactive' | 'unknown'
+    colors?: PointerIconColors
+}
+
+const defaultColors: PointerIconColors = {
+    online: 'red',
+    active: 'black',
+    inactive: 'gray',
+    unknown: 'gray',
+}
+
+const defaultProps: PointerIconProps = {
+    width: 48,
+    height: 59,
+    state: 'unknown',
+}
+
+// Рекомендованное соотношение сторон 1:1.19
+export const PointerIcon = React.memo(({ width, height, online, state, colors, ...other } : PointerIconProps = defaultProps) => {
+    colors = { ...defaultColors, ...colors }
+
+    return (
+        <svg
+            version={'1.1'}
+            viewBox={'0 -1.5 7.9 9.4'}
+            xmlns={'http://www.w3.org/2000/svg'}
+            xmlnsXlink={'http://www.w3.org/1999/xlink'}
+
+            fill={'none'}
+            stroke={'currentColor'}
+            strokeWidth={.17}
+
+            width={width}
+            height={height}
+            color={colors[state ?? 'unknown']}
+            {...other}
+        >
+            {/* Арматурная сетка */}
+            <path
+                d={'m3.1 1.6 1.9 1.5-2.3 1.1 2.9 2-0.78-4.6h-1.7l-0.78 4.6 2.9-2-2.3-1.1 1.9-1.5'}
+                strokeLinecap={'round'}
+                strokeLinejoin={'bevel'}
+            />
+
+            <g strokeWidth={0.084}>
+                {/* Шляпы */}
+                <g fill={'currentColor'}>
+                    <rect x={2.8} y={.98} width={2.3} height={.45}/>
+                    <rect x={3.4} y={.31} width={1.2} height={.45}/>
+                </g>
+
+                {/* Столб и границы почвы */}
+                <rect x={3.9} y={1.6} width={.11} height={6} strokeLinejoin={'round'} />
+                <path d={'m1.2 6.2 2.1 8e-7v1.5'}/>
+                <path d={'m4.5 7.7v-1.5l1.9-8e-7'}/>
+            </g>
+
+            {/* Волны от антенны */}
+            {online && (
+                <g stroke={colors.online}>
+                    <path d={'m 2.2051668,-0.54483294 a 2.46875,2.46875 0 0 1 3.4913396,-1.1e-7'}/>
+                    <path d={'m 2.558464,-0.19153572 a 1.975,1.975 0 0 1 2.7930718,-9e-8'}/>
+                    <path d={'m 2.907598,0.15759823 a 1.48125,1.48125 0 0 1 2.0948038,-7e-8'}/>
+                </g>
+            )}
+        </svg>
+    )
+})
+
+export default PointerIcon

src/pages/Cluster/ClusterWells.jsx

@@ -15,7 +15,7 @@ import { Tvd } from '../WellOperations/Tvd'
 import WellOperationsTable from './WellOperationsTable'
 import { getOperations } from './functions'
 import LoaderPortal from '../../components/LoaderPortal'
-import PointerIcon from '../../components/PointerIcon'
+import PointerIcon from '../../components/icons/PointerIcon'
 
 const filtersMinMax = [
   { text: 'min', value: 'min' },
@@ -23,8 +23,8 @@ const filtersMinMax = [
 ]
 
 const filtersWellsType = []
-const DAY_IN_MS = 1000 * 60 * 60 * 24
+const DAY_IN_MS = 86_400_000
-const ONLINE_DEADTIME = 600
+const ONLINE_DEADTIME = 600_000
 
 export default function ClusterWells({statsWells}) {
 
@@ -54,7 +54,7 @@ export default function ClusterWells({statsWells}) {
     let data = statsWells?.map((well) => {
       if (!filtersWellsType.some((el) => el.text === well.wellType))
         filtersWellsType.push({ text: well.wellType, value: well.wellType,})
-  
+
       return {
         key: well.caption,
         id: well.id,
@@ -75,7 +75,7 @@ export default function ClusterWells({statsWells}) {
         idState: well.idState
       }
     })
-  
+
     calcAndUpdateStatsBySections(data ?? [], [
       'factStart',
       'factEnd',
@@ -91,17 +91,17 @@ export default function ClusterWells({statsWells}) {
     setTableData(data)
   }, [statsWells])
 
-  const getDate = (str) => Number.isNaN(new Date(str).getTime()) ? '-' : new Date(str).toLocaleString()
+  const getDate = (str) => Number.isNaN(+new Date(str)) ? '-' : new Date(str).toLocaleString()
 
   const columns = [
-    makeTextColumn('скв №', 'caption', null, null, 
+    makeTextColumn('скв №', 'caption', null, null,
       (_, item) => (
         <Link to={`/well/${item.id}`} style={{display: 'flex', alignItems: 'center'}}>
           <PointerIcon
-            color={item.idState === 1 ? 'black' : 'gray'}
+            state={item.idState === 1 ? 'active' : 'unknown'}
-            size={32}
+            width={32}
-            online={item.lastTelemetryDate && ((new Date()).getTime() - Date.parse(item.lastTelemetryDate)) / 1000 < ONLINE_DEADTIME}
+            height={38}
-            onlineColor={'currentColor'}
+            online={item.lastTelemetryDate && (Date.now() - Date.parse(item.lastTelemetryDate) < ONLINE_DEADTIME)}
           />
           {item.caption ?? '-'}
         </Link>
@@ -121,7 +121,7 @@ export default function ClusterWells({statsWells}) {
       key: 'tvd',
       render: (value) => <Button onClick={()=> {
         setSelectedWellId(value.id)
-        setIsTVDModalVisible(true) 
+        setIsTVDModalVisible(true)
       }}><LineChartOutlined /></Button>,
       align: 'center'
     },
@@ -130,7 +130,7 @@ export default function ClusterWells({statsWells}) {
       key: 'operations',
       render: (value) => <Button onClick={()=> {
         setSelectedWellId(value.id)
-        setIsOpsModalVisible(true) 
+        setIsOpsModalVisible(true)
       }}><ProfileOutlined /></Button>,
       align: 'center'
     },

src/pages/Deposit.jsx

@@ -1,5 +1,5 @@
 import { Map, Overlay } from "pigeon-maps"
-import { PointerIcon } from '../components/PointerIcon'
+import { PointerIcon } from '../components/icons/PointerIcon'
 import { Link } from "react-router-dom";
 import LoaderPortal from '../components/LoaderPortal'
 import { useState, useEffect } from "react";
@@ -58,7 +58,7 @@ export default function Deposit() {
               anchor={[cluster.latitude, cluster.longitude]}
               key={`${cluster.latitude}  ${cluster.longitude}`}>
               <Link to={`/cluster/${cluster.id}/all`}>
-                <PointerIcon color={'black'} />
+                <PointerIcon state={'active'} width={48} height={59}/>
                 <span>{cluster.caption}</span>
               </Link>
             </Overlay >