Blob이 있는 간단한 React 게이지

약간의 배경

작업을 하던 중 아래와 같은 스태틱 게이지를 개발해 달라는 부탁을 받았습니다.


처음에는 일부 라이브러리를 사용하여 이 작업을 수행할 수 있다고 생각했습니다. 그래서 반응형 라이브러리를 찾기 시작했습니다. 몇 시간 동안 많은 라이브러리를 시도한 후 디자인에 제공된 게이지를 정확히 얻을 수 없었습니다. 일부는 꽤 가까이 왔지만 모두 한 가지 큰 캐치가있었습니다. 지표 블롭. 둘레를 따라 표시기 얼룩이 있는 단일 라이브러리를 찾을 수 없습니다.

몇 시간 더 실패한 인터넷 검색 끝에 나는 나만의 게이지를 만들기로 결정했습니다(다른 방법이 없었습니다).

구조에 D3.

이제 다른 목표를 가지고 다시 검색을 시작했고 Amelia wattenberger의 놀라운 블로그this를 우연히 발견했습니다. 이것은 게이지를 만드는 데 필요한 모든 것을 갖추고 있었습니다. 그녀는 게이지를 만들기 위해 D3 라이브러리를 사용했습니다. 블로그를 살펴보고 SVG와 D3에 대한 기본적인 이해를 얻은 후 마침내 요구 사항에 따라 게이지를 그릴 수 있었고 그 방법을 공유할 것입니다.

계속 진행하기 전에 Ameliablog의 코드를 먼저 검토해야 합니다. 제가 작성하려는 코드는 Amelia 코드의 수정된 버전일 뿐입니다. 코드의 약 80%는 그녀의 블로그에 있습니다. 변경 사항만 포함하겠습니다. 따라서 이것을 명심하고 계속하십시오.

호 그리기

게이지가 4부분으로 분할되어 있으므로 반원을 따라 4개의 호를 그려야 합니다. 우리는 d3의 arc() 기능을 사용할 것입니다. 게이지에서 왼쪽과 오른쪽 값은 각각 최소값과 최대값입니다. 이것은 값이 시계 방향으로 증가한다는 것을 의미합니다. d3에서 각도 값은 라디안 단위로 측정됩니다. 따라서 이 모든 것을 염두에 두고 우리는 -pi/2(왼쪽)에서 pi/2(오른쪽) 사이의 범위를 갖는 반원을 완성하기 위해 각 호에 대해 startAngle() 및 endAngle()를 제공해야 합니다.

빨간색과 주황색 호
그들은 -pi/2와 0 사이의 반원의 왼쪽 부분(음수) 내부에 있습니다. 따라서 빨간색 호는 -pi/2와 -pi/4 사이에 있습니다. 주황색 호는 -pi/4와 0 사이입니다.

  const redArc = arc()
    .innerRadius(1)
    .outerRadius(0.9)
    .startAngle(-Math.PI/2)
    .endAngle(-Math.PI/4)
    .padAngle(0)
    .cornerRadius(2)();

  const orangeArc = arc()
    .innerRadius(1)
    .outerRadius(0.9)
    .startAngle(-Math.PI/4)
    .endAngle(0)
    .padAngle(0)
    .cornerRadius(2)();

녹색 및 파란색 호
그들은 0과 파이/2 사이의 반원의 오른쪽 부분(양수) 안에 들어옵니다. 따라서 코드는 다음과 같습니다.

  const greenArc = arc()
    .innerRadius(1)
    .outerRadius(0.9)
    .startAngle(0)
    .endAngle(Math.PI/4)
    .padAngle(0)
    .cornerRadius(2)();

  const blueArc = arc()
    .innerRadius(1)
    .outerRadius(0.9)
    .startAngle(Math.PI/4)
    .endAngle(Math.PI / 2)
    .padAngle(0)
    .cornerRadius(2)();

이제 호에 필요한 경로 값을 생성했으므로 실제로 그릴 수 있습니다.

return(
<svg viewBox={[-1, -1, 2, 1].join(" ")}>
  <path d={redArc} fill="#e81246" />
  <path d={orangeArc} fill="#ee8d41" />
  <path d={greenArc} fill="#4dff4d" />
  <path d={blueArc} fill="#2e5bff" />
</svg>)

위의 코드는 다음과 같은 반원을 생성합니다.


호 사이에 간격이 없습니다. 이 간격을 제공하려면 주황색, 녹색 및 파란색 호에 대해 startAngle 비트를 오프셋해야 합니다. 나를 위해 다음 오프셋 값이 최상의 모양을 제공했습니다.

주황색: -Math.PI/4.15
녹색: -0.04
파란색: Math.PI/4.2

이제 메인 게이지가 생겼습니다.

Blob, 값 및 레이블 설정

Blob, 값 및 레이블에 대한 코드는 Amelia의 블로그에 있는 코드와 정확히 동일합니다. 또한 호를 기반으로 blob 및 값 색상을 변경했습니다. 이것은 내가 한 유일한 조정입니다. 방금 게이지에 지정된 값을 기반으로 색상 코드를 반환하는 간단한 함수를 생성하고 블롭 및 값에 사용했습니다.

   const getBlobColor = value => {
    if (value >= 0 && value <= 25) return "#e81246";
    if (value > 25 && value <= 50) return "#ee8d41";
    if (value > 50 && value <= 75) return "#4dff4d";
    if (value >= 75) return "#2e5bff";
  };

이것은 중앙에 값과 레이블이 없는 최종 게이지의 코드입니다.

   <svg viewBox={[-1, -1, 2, 1].join(" ")}>
     <path d={redArc} fill="#e81246" />
     <path d={orangeArc} fill="#ee8d41" />
     <path d={greenArc} fill="#4dff4d" />
     <path d={blueArc} fill="#2e5bff" />
     <circle
       cx={markerLocation[0]}
       cy={markerLocation[1]}
       r="0.07"
       strokeWidth="0.04"
       fill="white"
       stroke={getBlobColor(value)}
     />
   </svg>

이것은 거의 다입니다. 내 요구 사항에 대해 수행한 변경 사항만 작성했습니다. 주요 코드는 Amelia의 블로그에 있습니다. 먼저 확인하시기 바랍니다.

감사