github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/ccl/src/views/clusterviz/components/nodeOrLocality/capacityArc.tsx (about)

     1  // Copyright 2018 The Cockroach Authors.
     2  //
     3  // Licensed as a CockroachDB Enterprise file under the Cockroach Community
     4  // License (the "License"); you may not use this file except in compliance with
     5  // the License. You may obtain a copy of the License at
     6  //
     7  //     https://github.com/cockroachdb/cockroach/blob/master/licenses/CCL.txt
     8  
     9  import React from "react";
    10  import * as PathMath from "src/views/clusterviz/util/pathmath";
    11  import {
    12    BACKGROUND_BLUE,
    13    DARK_BLUE,
    14    LIGHT_TEXT_BLUE,
    15    MAIN_BLUE,
    16  } from "src/views/shared/colors";
    17  import { Bytes } from "src/util/format";
    18  
    19  const ARC_INNER_RADIUS = 56;
    20  const ARC_WIDTH = 6;
    21  const ARC_OUTER_RADIUS = ARC_INNER_RADIUS + ARC_WIDTH;
    22  
    23  interface CapacityArcProps {
    24    usedCapacity: number;
    25    usableCapacity: number;
    26  }
    27  
    28  export class CapacityArc extends React.Component<CapacityArcProps> {
    29  
    30    render() {
    31      // Compute used percentage.
    32      const usedCapacity = this.props.usedCapacity;
    33      const capacity = this.props.usableCapacity;
    34      const capacityUsedPct = capacity ? (usedCapacity / capacity * 100) : 0;
    35  
    36      return (
    37        <g>
    38          <g transform="translate(90 115)">
    39            {/* background arc */}
    40            <path
    41              fill={BACKGROUND_BLUE}
    42              strokeLinecap="round"
    43              d={PathMath.createArcPath(
    44                ARC_INNER_RADIUS,
    45                ARC_OUTER_RADIUS,
    46                PathMath.arcAngleFromPct(0),
    47                PathMath.arcAngleFromPct(1),
    48                ARC_WIDTH,
    49              )}
    50            />
    51            {/* current value arc */}
    52            <path
    53              fill={MAIN_BLUE}
    54              strokeLinecap="round"
    55              d={PathMath.createArcPath(
    56                ARC_INNER_RADIUS,
    57                ARC_OUTER_RADIUS,
    58                PathMath.arcAngleFromPct(0),
    59                PathMath.arcAngleFromPct(capacityUsedPct / 100),
    60                ARC_WIDTH,
    61              )}
    62            />
    63          </g>
    64  
    65          {/* text inside arc */}
    66          <text
    67            fill={MAIN_BLUE}
    68            fontFamily="Lato-Bold, Lato"
    69            fontSize="34"
    70            fontWeight="bold"
    71            textAnchor="middle"
    72            x="90"
    73            y="110"
    74          >
    75            {Math.round(capacityUsedPct)}%
    76          </text>
    77          <text
    78            fill={DARK_BLUE}
    79            fontFamily="Lato-Bold, Lato"
    80            fontSize="12"
    81            fontWeight="bold"
    82            letterSpacing="1.333"
    83            textAnchor="middle"
    84            x="90"
    85            y="132"
    86          >
    87            CAPACITY
    88          </text>
    89  
    90          {/* labels at ends of arc */}
    91          <text fill={MAIN_BLUE} x="17" y="156" textAnchor="center">
    92            {Bytes(usedCapacity)}
    93          </text>
    94          <text fill={LIGHT_TEXT_BLUE} x="118" y="156" textAnchor="center">
    95            {Bytes(capacity)}
    96          </text>
    97        </g>
    98      );
    99    }
   100  
   101  }