sonarqube/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap

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

exports[`should render correctly: Zoom enabled 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <defs>
    <clippath
      id="chart-clip"
    >
      <rect
        height="34"
        transform="translate(0,-5)"
        width="40"
      />
    </clippath>
  </defs>
  <g
    transform="translate(50, 26)"
  >
    <g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="22.4"
          y2="22.4"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="20.8"
          y2="20.8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="19.200000000000003"
          y2="19.200000000000003"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="17.6"
          y2="17.6"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="16"
          y2="16"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="14.400000000000002"
          y2="14.400000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12.800000000000002"
          y2="12.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="11.2"
          y2="11.2"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="9.600000000000001"
          y2="9.600000000000001"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="8"
          y2="8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="6.399999999999999"
          y2="6.399999999999999"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="4.800000000000002"
          y2="4.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="3.1999999999999993"
          y2="3.1999999999999993"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="1.6000000000000023"
          y2="1.6000000000000023"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,16L20,8"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,0Z"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        cy="0"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;

exports[`should render correctly: basisCurve 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <g
    transform="translate(50, 26)"
  >
    <g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="22.4"
          y2="22.4"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="20.8"
          y2="20.8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="19.200000000000003"
          y2="19.200000000000003"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="17.6"
          y2="17.6"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="16"
          y2="16"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="14.400000000000002"
          y2="14.400000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12.800000000000002"
          y2="12.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="11.2"
          y2="11.2"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="9.600000000000001"
          y2="9.600000000000001"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="8"
          y2="8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="6.399999999999999"
          y2="6.399999999999999"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="4.800000000000002"
          y2="4.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="3.1999999999999993"
          y2="3.1999999999999993"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="1.6000000000000023"
          y2="1.6000000000000023"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,16L20,8"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,0Z"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        cy="0"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;

exports[`should render correctly: default 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <g
    transform="translate(50, 26)"
  >
    <g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="22.4"
          y2="22.4"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="20.8"
          y2="20.8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="19.200000000000003"
          y2="19.200000000000003"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="17.6"
          y2="17.6"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="16"
          y2="16"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="14.400000000000002"
          y2="14.400000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12.800000000000002"
          y2="12.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="11.2"
          y2="11.2"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="9.600000000000001"
          y2="9.600000000000001"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="8"
          y2="8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="6.399999999999999"
          y2="6.399999999999999"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="4.800000000000002"
          y2="4.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="3.1999999999999993"
          y2="3.1999999999999993"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="1.6000000000000023"
          y2="1.6000000000000023"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,16L20,8"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,0Z"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        cy="0"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;

exports[`should render correctly: format y tick 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <g
    transform="translate(50, 26)"
  >
    <g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="24"
        >
          Nicer tick 0
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="22.4"
        >
          Nicer tick 0.2
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="22.4"
          y2="22.4"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="20.8"
        >
          Nicer tick 0.4
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="20.8"
          y2="20.8"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="19.200000000000003"
        >
          Nicer tick 0.6
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="19.200000000000003"
          y2="19.200000000000003"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="17.6"
        >
          Nicer tick 0.8
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="17.6"
          y2="17.6"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="16"
        >
          Nicer tick 1
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="16"
          y2="16"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="14.400000000000002"
        >
          Nicer tick 1.2
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="14.400000000000002"
          y2="14.400000000000002"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="12.800000000000002"
        >
          Nicer tick 1.4
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12.800000000000002"
          y2="12.800000000000002"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="11.2"
        >
          Nicer tick 1.6
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="11.2"
          y2="11.2"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="9.600000000000001"
        >
          Nicer tick 1.8
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="9.600000000000001"
          y2="9.600000000000001"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="8"
        >
          Nicer tick 2
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="8"
          y2="8"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="6.399999999999999"
        >
          Nicer tick 2.2
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="6.399999999999999"
          y2="6.399999999999999"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="4.800000000000002"
        >
          Nicer tick 2.4
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="4.800000000000002"
          y2="4.800000000000002"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="3.1999999999999993"
        >
          Nicer tick 2.6
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="3.1999999999999993"
          y2="3.1999999999999993"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="1.6000000000000023"
        >
          Nicer tick 2.8
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="1.6000000000000023"
          y2="1.6000000000000023"
        />
      </g>
      <g>
        <text
          class="line-chart-tick line-chart-tick-x sw-body-sm"
          dx="-1em"
          dy="0.3em"
          text-anchor="end"
          x="0"
          y="0"
        >
          Nicer tick 3
        </text>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,16L20,8"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,0Z"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        cy="0"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;

exports[`should render correctly: leakPeriodDate 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <g
    transform="translate(50, 26)"
  >
    <rect
      class="leak-chart-rect"
      fill="rgba(159,169,237,0.15)"
      height="24"
      width="20"
      x="20"
      y="0"
    />
    <g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="22.4"
          y2="22.4"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="20.8"
          y2="20.8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="19.200000000000003"
          y2="19.200000000000003"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="17.6"
          y2="17.6"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="16"
          y2="16"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="14.400000000000002"
          y2="14.400000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12.800000000000002"
          y2="12.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="11.2"
          y2="11.2"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="9.600000000000001"
          y2="9.600000000000001"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="8"
          y2="8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="6.399999999999999"
          y2="6.399999999999999"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="4.800000000000002"
          y2="4.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="3.1999999999999993"
          y2="3.1999999999999993"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="1.6000000000000023"
          y2="1.6000000000000023"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,16L20,8"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,0Z"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        cy="0"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;

exports[`should render correctly: level metric 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <g
    transform="translate(50, 26)"
  >
    <g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12"
          y2="12"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,NaNL20,NaN"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,NaNZ"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;

exports[`should render correctly: no areas 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <g
    transform="translate(50, 26)"
  >
    <g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="22.4"
          y2="22.4"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="20.8"
          y2="20.8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="19.200000000000003"
          y2="19.200000000000003"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="17.6"
          y2="17.6"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="16"
          y2="16"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="14.400000000000002"
          y2="14.400000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12.800000000000002"
          y2="12.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="11.2"
          y2="11.2"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="9.600000000000001"
          y2="9.600000000000001"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="8"
          y2="8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="6.399999999999999"
          y2="6.399999999999999"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="4.800000000000002"
          y2="4.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="3.1999999999999993"
          y2="3.1999999999999993"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="1.6000000000000023"
          y2="1.6000000000000023"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,16L20,8"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,0Z"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        cy="0"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;

exports[`should render correctly: no height 1`] = `null`;

exports[`should render correctly: no width 1`] = `null`;

exports[`should render correctly: rating metric 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <g
    transform="translate(50, 26)"
  >
    <g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="18"
          y2="18"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12"
          y2="12"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="6"
          y2="6"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,0L20,6"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,12Z"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        cy="12"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;

exports[`should render correctly: selected date 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <g
    transform="translate(50, 26)"
  >
    <g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="22.4"
          y2="22.4"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="20.8"
          y2="20.8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="19.200000000000003"
          y2="19.200000000000003"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="17.6"
          y2="17.6"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="16"
          y2="16"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="14.400000000000002"
          y2="14.400000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12.800000000000002"
          y2="12.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="11.2"
          y2="11.2"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="9.600000000000001"
          y2="9.600000000000001"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="8"
          y2="8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="6.399999999999999"
          y2="6.399999999999999"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="4.800000000000002"
          y2="4.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="3.1999999999999993"
          y2="3.1999999999999993"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="1.6000000000000023"
          y2="1.6000000000000023"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,16L20,8"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,0Z"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        cy="0"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <g>
      <line
        class="line-tooltip"
        x1="0"
        x2="0"
        y1="24"
        y2="0"
      />
      <circle
        cx="0"
        cy="16"
        fill="rgb(85,170,223)"
        r="4"
        stroke="white"
        stroke-width="1"
      />
      <circle
        cx="0"
        cy="0"
        fill="rgb(58,127,173)"
        r="4"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;

exports[`should render correctly: zoomSpeed 1`] = `
<svg
  class="line-chart"
  height="100"
  width="100"
>
  <g
    transform="translate(50, 26)"
  >
    <g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="24"
          y2="24"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="22.4"
          y2="22.4"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="20.8"
          y2="20.8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="19.200000000000003"
          y2="19.200000000000003"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="17.6"
          y2="17.6"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="16"
          y2="16"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="14.400000000000002"
          y2="14.400000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="12.800000000000002"
          y2="12.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="11.2"
          y2="11.2"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="9.600000000000001"
          y2="9.600000000000001"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="8"
          y2="8"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="6.399999999999999"
          y2="6.399999999999999"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="4.800000000000002"
          y2="4.800000000000002"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="3.1999999999999993"
          y2="3.1999999999999993"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="1.6000000000000023"
          y2="1.6000000000000023"
        />
      </g>
      <g>
        <line
          class="line-chart-grid"
          x1="0"
          x2="40"
          y1="0"
          y2="0"
        />
      </g>
    </g>
    <g
      transform="translate(0, 20)"
    >
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 15, 24)"
        x="15"
        y="24"
      >
        October
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 20, 24)"
        x="20"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 25, 24)"
        x="25"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 30, 24)"
        x="30"
        y="24"
      >
        06 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 35, 24)"
        x="35"
        y="24"
      >
        Wed 02
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 40, 24)"
        x="40"
        y="24"
      >
        06 AM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 45, 24)"
        x="45"
        y="24"
      >
        12 PM
      </text>
      <text
        class="line-chart-tick sw-body-sm"
        text-anchor="end"
        transform="rotate(-35, 50, 24)"
        x="50"
        y="24"
      >
        06 PM
      </text>
    </g>
    <g>
      <path
        class="line-chart-path line-chart-path-0"
        d="M0,16L20,8"
        stroke="rgb(85,170,223)"
        stroke-dasharray="0"
      />
      <path
        class="line-chart-path line-chart-path-1"
        d="M40,0Z"
        stroke="rgb(58,127,173)"
        stroke-dasharray="3"
      />
    </g>
    <g>
      <circle
        cx="40"
        cy="0"
        fill="rgb(58,127,173)"
        r="2"
        stroke="white"
        stroke-width="1"
      />
    </g>
    <rect
      class="chart-mouse-events-overlay"
      height="24"
      width="40"
    />
  </g>
</svg>
`;