反応の進行円を作ること

私が何か簡単なものを必要とするとき、私はすぐに構築する方法を知らない、それはそれのためのライブラリを見つけるために誘惑することができます.しかし、何が実際に任意のライブラリ内で起こっている?そして、どのように、私はそれがこの特定のことをするようにしますか?私は、時々、それがちょうど医者を読むのにかかることができると思います、そして、ちょうどゼロからものを造るより、仕事を見つけてください、そして、最後に、それは軽くて、調整をするのがより簡単です.
私は最近進行サークル/パイを作りたいと思った.このように見えました.

ここではどのように反応した.この記事の目的は、人々が他の誰かがそれらのために構築されているコンポーネントを使用するよりも、自分のやり方を行うことですので、私はあなたが異なるコメントやコメントで何をするか知りたいです.

SVGS

私はSVGSがたくさん好きです、彼らはものすごいです.彼らはあなたが望むすべての属性を持っているようです、そして、いくつかのCSSプロパティとは異なり、彼らはすべての主なブラウザーで働きます.したがって、実際に我々はCSSなしでこの全部をすることができます.これはパーセント値を取る動的なコンポーネントですので、我々はすべての計算を行うためにJavaScriptを使用するでしょう.
私たちは2つの円を作ります、1つの(青い)他の(灰色の)の上に.私たちは、SVGのストロークdashharrayを使用します.そして、それはダッシュストロークの長さをセットします、そして、ストロークdashoffset.
したがって、ストロークダッシュ長は円の円周- 2 * pi * radiusになります、そして、青い円のために変わる必要があるオフセットはそれのパーセンテージです.我々が85 %を視覚化したいとき、そのストロークは円周が何であっても15 %で開始しなければなりません.

<svg width="200" height="200">
  <circle r="70" cx="100" cy="100" fill="transparent" stroke="lightgrey" stroke-width="2rem" stroke-dasharray="439.8" stroke-dashoffset="0"></circle>
  <circle r="70" cx="100" cy="100" fill="transparent" stroke="blue" stroke-width="2rem" stroke-dasharray="439.8" stroke-dashoffset="66"></circle>
</svg>

我々はすでに、いくつかのハードコード化された値、特に、70の半径、439.8の円周と66で始まっているその「85 %」バーのまわりで、飛んでスタートしています.あなた自身がこれを試みるならば、あなたは我々が我々がそうでありたいところの90度時計回りであるのを見ます、そして、また、真ん中にきちんと座るべきテキスト価値を逃します.それで、我々はそれを回転させるためにグループに円を置くことができます－90度、そして、若干のテキストを加えてください.

<svg width="200" height="200">
  <g transform="rotate(-90 100 100)">
    <circle r="70" cx="100" cy="100" fill="transparent" stroke="lightgrey" stroke-width="2rem" stroke-dasharray="439.8" stroke-dashoffset="0"></circle>
    <circle r="70" cx="100" cy="100" fill="transparent" stroke="blue" stroke-width="2rem" stroke-dasharray="439.8" stroke-dashoffset="66"> 
    </circle>
  </g>
  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">85%</text>
</svg>

私が以前に言及したそれらの大きなSVG属性のいくつかがあります.CSSでこのようなことをすることは、少しの頭痛でありえます.SVGSを回転させるとき、我々は回転の中心を指定することもできます.
これは実際に私たちに記事の最上位で進行中のサークルを与えますので、我々は反応するためにこれを動かす準備ができています.

コンポーネントの作成

反応を使用すると、私たちが使用している値を動的に制御できます.私たちが入力として望む割合を取りましょう、そして、我々が進歩が欲しい色.
我々は、それが我々が使うことができる数であることを確認するために入力を「掃除する」ことから始めます、我々は再利用可能な構成要素としてSVG部分をセットアップすることができます、そして、我々は基本的にされます.

const cleanPercentage = (percentage) => {
  const isNegativeOrNaN = !Number.isFinite(+percentage) || percentage < 0; // we can set non-numbers to 0 here
  const isTooHigh = percentage > 100;
  return isNegativeOrNaN ? 0 : isTooHigh ? 100 : +percentage;
};

const Circle = ({ colour, percentage }) => {
  const r = 70;
  const circ = 2 * Math.PI * r;
  const strokePct = ((100 - percentage) * circ) / 100; // where stroke will start, e.g. from 15% to 100%.
  return (
    <circle
      r={r}
      cx={100}
      cy={100}
      fill="transparent"
      stroke={strokePct !== circ ? colour : ""} // remove colour as 0% sets full circumference
      strokeWidth={"2rem"}
      strokeDasharray={circ}
      strokeDashoffset={percentage ? strokePct : 0}
    ></circle>
  );
};

const Text = ({ percentage }) => {
  return (
    <text
      x="50%"
      y="50%"
      dominantBaseline="central"
      textAnchor="middle"
      fontSize={"1.5em"}
    >
      {percentage.toFixed(0)}%
    </text>
  );
};

const Pie = ({ percentage, colour }) => {
  const pct = cleanPercentage(percentage);
  return (
    <svg width={200} height={200}>
      <g transform={`rotate(-90 ${"100 100"})`}>
        <Circle colour="lightgrey" />
        <Circle colour={colour} percentage={pct} />
      </g>
      <Text percentage={pct} />
    </svg>
  );
};

そして、実際に、これはちょうど出発点です、まだハードコード化された値があるので-我々は我々の半径をdominant-baseline、またはストローク幅をtext-anchorへの、または、円のサイズを100 100に修正したいですか?私はおそらくそうでないと思います、そして、現在、それは我々の支配においてすべてです.現在、コンポーネントはちょうどパーセンテージと色をとります、しかし、それはストローク幅、半径、丸い端などを取ることができました.
いくつかの例では、いくつかの例では、最後のコードを参照することができます私はいくつかの色を追加しました.あなたが行動でそれを見ることができるように、私は「ランダム化」ボタンも含みました.