// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PriceChart renders correctly with all prices filled 1`] = `
<DocumentFragment>
  .c4 {
  color: #40B66B;
}

.c0 {
  position: absolute;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}

.c1 {
  font-size: 36px;
  line-height: 44px;
}

.c2 {
  height: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
}

.c3 {
  padding-right: 3px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<div
    class="c0"
    data-cy="chart-header"
  >
    <span
      class="c1"
    >
      $1.00
    </span>
    <div
      class="c2"
    >
      0.00%
      <div
        class="c3"
      >
        <svg
          aria-label="up"
          class="c4"
          fill="none"
          height="20"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <line
            x1="7"
            x2="17"
            y1="17"
            y2="7"
          />
          <polyline
            points="7 7 17 7 17 17"
          />
        </svg>
      </div>
    </div>
  </div>
  <svg
    data-cy="price-chart"
    height="392"
    style="min-width: 100%;"
    width="780"
  >
    <g
      class="visx-group visx-axis visx-axis-bottom"
      transform="translate(0, 391)"
    >
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="0"
            y="18"
          >
            <tspan
              dy="0em"
              x="0"
            >
              0
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="90.27777777777777"
            y="18"
          >
            <tspan
              dy="0em"
              x="90.27777777777777"
            >
              5,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="180.55555555555554"
            y="18"
          >
            <tspan
              dy="0em"
              x="180.55555555555554"
            >
              10,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="270.8333333333333"
            y="18"
          >
            <tspan
              dy="0em"
              x="270.8333333333333"
            >
              15,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="361.1111111111111"
            y="18"
          >
            <tspan
              dy="0em"
              x="361.1111111111111"
            >
              20,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="451.3888888888889"
            y="18"
          >
            <tspan
              dy="0em"
              x="451.3888888888889"
            >
              25,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="541.6666666666666"
            y="18"
          >
            <tspan
              dy="0em"
              x="541.6666666666666"
            >
              30,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="631.9444444444445"
            y="18"
          >
            <tspan
              dy="0em"
              x="631.9444444444445"
            >
              35,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="722.2222222222222"
            y="18"
          >
            <tspan
              dy="0em"
              x="722.2222222222222"
            >
              40,000
            </tspan>
          </text>
        </svg>
      </g>
    </g>
    <rect
      fill="transparent"
      height="392"
      width="780"
      x="0"
      y="0"
    />
  </svg>
</DocumentFragment>
`;

exports[`PriceChart renders correctly with no prices filled 1`] = `
<DocumentFragment>
  .c3 {
  color: #0D111C;
}

.c0 {
  position: absolute;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}

.c1 {
  font-size: 36px;
  line-height: 44px;
}

.c2 {
  font-size: 24px;
  line-height: 44px;
  color: #98A1C0;
}

<div
    class="c0"
    data-cy="chart-header"
  >
    <span
      class="c1 c2"
    >
      Price Unavailable
    </span>
    <div
      class="c3 css-4u0e4f"
      style="color: rgb(152, 161, 192);"
    >
      Missing chart data
    </div>
  </div>
  .c0 text {
  font-size: 12px;
  font-weight: 400;
}

<svg
    class="c0"
    data-cy="missing-chart"
    height="392"
    style="min-width: 100%;"
    width="780"
  >
    <path
      d="M 0 241 Q 104 171, 208 241 T 416 241
          M 416 241 Q 520 171, 624 241 T 832 241"
      fill="transparent"
      stroke="#D2D9EE"
      stroke-width="2"
    />
    <text
      fill="#98A1C0"
      x="20"
      y="377"
    />
  </svg>
</DocumentFragment>
`;

exports[`PriceChart renders correctly with some prices filled 1`] = `
<DocumentFragment>
  .c4 {
  display: inline-block;
  height: inherit;
}

.c7 {
  color: #98A1C0;
}

.c0 {
  position: absolute;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}

.c3 {
  font-size: 36px;
  line-height: 44px;
}

.c1 {
  color: #7780A0;
}

.c5 {
  height: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
}

.c6 {
  padding-right: 3px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  font-size: 24px;
  line-height: 44px;
}

<div
    class="c0"
    data-cy="chart-header"
  >
    <div
      class="c1"
    >
      <div
        class="c2"
      >
        <span
          class="c3"
        >
          $1.00
        </span>
        <div
          class="c4"
        >
          <div>
            <svg
              fill="none"
              height="16"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="16"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <line
                x1="12"
                x2="12"
                y1="16"
                y2="12"
              />
              <line
                x1="12"
                x2="12.01"
                y1="8"
                y2="8"
              />
            </svg>
          </div>
        </div>
      </div>
      <div
        class="c5"
      >
        0.00%
        <div
          class="c6"
        >
          <svg
            aria-label="up"
            class="c7"
            fill="none"
            height="20"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <line
              x1="7"
              x2="17"
              y1="17"
              y2="7"
            />
            <polyline
              points="7 7 17 7 17 17"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
  <svg
    data-cy="price-chart"
    height="392"
    style="min-width: 100%;"
    width="780"
  >
    <g
      class="visx-group visx-axis visx-axis-bottom"
      transform="translate(0, 391)"
    >
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="0"
            y="18"
          >
            <tspan
              dy="0em"
              x="0"
            >
              0
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="90.27777777777777"
            y="18"
          >
            <tspan
              dy="0em"
              x="90.27777777777777"
            >
              5,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="180.55555555555554"
            y="18"
          >
            <tspan
              dy="0em"
              x="180.55555555555554"
            >
              10,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="270.8333333333333"
            y="18"
          >
            <tspan
              dy="0em"
              x="270.8333333333333"
            >
              15,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="361.1111111111111"
            y="18"
          >
            <tspan
              dy="0em"
              x="361.1111111111111"
            >
              20,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="451.3888888888889"
            y="18"
          >
            <tspan
              dy="0em"
              x="451.3888888888889"
            >
              25,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="541.6666666666666"
            y="18"
          >
            <tspan
              dy="0em"
              x="541.6666666666666"
            >
              30,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="631.9444444444445"
            y="18"
          >
            <tspan
              dy="0em"
              x="631.9444444444445"
            >
              35,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="722.2222222222222"
            y="18"
          >
            <tspan
              dy="0em"
              x="722.2222222222222"
            >
              40,000
            </tspan>
          </text>
        </svg>
      </g>
    </g>
    <rect
      fill="transparent"
      height="392"
      width="780"
      x="0"
      y="0"
    />
  </svg>
</DocumentFragment>
`;
