@khanacademy/perseus 7.2.0 → 8.0.0

package/src/widgets/__tests__/__snapshots__/plotter.test.tsx.snap

@@ -0,0 +1,863 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plotter widget should snapshot basic question: initial render 1`] = `
+<div>
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
+  >
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="0"
+    >
+      <div
+        class="paragraph"
+      >
+        The elementary school principal asked teachers to report the number of students absent in each grade during the past week.
+      </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
+      <div
+        class="paragraph"
+      >
+        <strong>
+          Create a bar graph to show how many students were absent in each grade.
+        </strong>
+      </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="2"
+    >
+      <table>
+        <thead>
+          <tr>
+            <th
+              scope="col"
+              style="text-align: left;"
+            >
+              School grade
+            </th>
+            <th
+              scope="col"
+              style="text-align: center;"
+            >
+              Number of absent students
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td
+              style="text-align: left;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  1^{\\text{st}} \\text{ grade}
+                </span>
+                <span />
+              </span>
+            </td>
+            <td
+              style="text-align: center;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  15
+                </span>
+                <span />
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td
+              style="text-align: left;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  2^{\\text{nd}} \\text{ grade}
+                </span>
+                <span />
+              </span>
+            </td>
+            <td
+              style="text-align: center;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  25
+                </span>
+                <span />
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td
+              style="text-align: left;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  3^{\\text{rd}} \\text{ grade}
+                </span>
+                <span />
+              </span>
+            </td>
+            <td
+              style="text-align: center;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  5
+                </span>
+                <span />
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td
+              style="text-align: left;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  4^{\\text{th}} \\text{ grade}
+                </span>
+                <span />
+              </span>
+            </td>
+            <td
+              style="text-align: center;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  10
+                </span>
+                <span />
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td
+              style="text-align: left;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  5^{\\text{th}} \\text{ grade}
+                </span>
+                <span />
+              </span>
+            </td>
+            <td
+              style="text-align: center;"
+            >
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                >
+                  10
+                </span>
+                <span />
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="3"
+    >
+      <div
+        class="paragraph"
+      >
+        <div
+          class="perseus-widget-container widget-nohighlight widget-block"
+        >
+          <div
+            class="perseus-widget-plotter graphie perseus-interactive"
+            style="margin-bottom: 75px; position: relative; width: 479.99999999999994px; height: 400px;"
+          >
+            <svg
+              height="400"
+              style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 2;"
+              version="1.1"
+              width="479.99999999999994"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <desc
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+              >
+                Created with Raphaël
+              </desc>
+              <defs
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+              />
+            </svg>
+            <svg
+              height="400"
+              style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+              version="1.1"
+              width="479.99999999999994"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <desc
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+              >
+                Created with Raphaël
+              </desc>
+              <defs
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+              />
+              <path
+                d="M75,325L455,325"
+                fill="none"
+                opacity="0.3"
+                stroke="#000000"
+                stroke-width="1"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
+              />
+              <path
+                d="M75,275L455,275"
+                fill="none"
+                opacity="0.3"
+                stroke="#000000"
+                stroke-width="1"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
+              />
+              <path
+                d="M75,225L455,225"
+                fill="none"
+                opacity="0.3"
+                stroke="#000000"
+                stroke-width="1"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
+              />
+              <path
+                d="M75,175L455,175"
+                fill="none"
+                opacity="0.3"
+                stroke="#000000"
+                stroke-width="1"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
+              />
+              <path
+                d="M75,125L455,125"
+                fill="none"
+                opacity="0.3"
+                stroke="#000000"
+                stroke-width="1"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
+              />
+              <path
+                d="M75,75L455,75"
+                fill="none"
+                opacity="0.3"
+                stroke="#000000"
+                stroke-width="1"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
+              />
+              <path
+                d="M75,25L455,25"
+                fill="none"
+                opacity="0.3"
+                stroke="#000000"
+                stroke-width="1"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1; opacity: 0.3;"
+              />
+              <path
+                d="M96.50927358490566,325L96.50927358490566,324.5L146.69827358490565,324.5L146.69827358490565,325L96.50927358490566,325"
+                fill="#9ab8ed"
+                opacity="1"
+                stroke="none"
+                stroke-width="2"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
+                transform=""
+              />
+              <path
+                d="M121.60377358490565,325L121.60377358490565,331"
+                fill="none"
+                opacity="1"
+                stroke="#000000"
+                stroke-width="2"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
+              />
+              <path
+                d="M168.20738679245284,325L168.20738679245284,324.5L218.39638679245283,324.5L218.39638679245283,325L168.20738679245284,325"
+                fill="#9ab8ed"
+                opacity="1"
+                stroke="none"
+                stroke-width="4"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4; opacity: 1;"
+                transform=""
+              />
+              <path
+                d="M193.30188679245282,325L193.30188679245282,331"
+                fill="none"
+                opacity="1"
+                stroke="#000000"
+                stroke-width="2"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
+              />
+              <path
+                d="M239.9055,325L239.9055,324.5L290.0945,324.5L290.0945,325L239.9055,325"
+                fill="#9ab8ed"
+                opacity="1"
+                stroke="none"
+                stroke-width="4"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4; opacity: 1;"
+                transform=""
+              />
+              <path
+                d="M265,325L265,331"
+                fill="none"
+                opacity="1"
+                stroke="#000000"
+                stroke-width="2"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
+              />
+              <path
+                d="M311.60361320754714,325L311.60361320754714,324.5L361.79261320754716,324.5L361.79261320754716,325L311.60361320754714,325"
+                fill="#9ab8ed"
+                opacity="1"
+                stroke="none"
+                stroke-width="4"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4; opacity: 1;"
+                transform=""
+              />
+              <path
+                d="M336.6981132075471,325L336.6981132075471,331"
+                fill="none"
+                opacity="1"
+                stroke="#000000"
+                stroke-width="2"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
+              />
+              <path
+                d="M383.3017264150943,325L383.3017264150943,324.5L433.49072641509434,324.5L433.49072641509434,325L383.3017264150943,325"
+                fill="#9ab8ed"
+                opacity="1"
+                stroke="none"
+                stroke-width="4"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4; opacity: 1;"
+                transform=""
+              />
+              <path
+                d="M408.3962264150943,325L408.3962264150943,331"
+                fill="none"
+                opacity="1"
+                stroke="#000000"
+                stroke-width="2"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
+              />
+              <path
+                d="M75,325L455,325"
+                fill="none"
+                opacity="1"
+                stroke="#000000"
+                stroke-width="2"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
+              />
+              <path
+                d="M75,325L75,25"
+                fill="none"
+                opacity="1"
+                stroke="#000000"
+                stroke-width="2"
+                style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; opacity: 1;"
+              />
+            </svg>
+            <div
+              style="position: absolute; left: 0px; top: 0px;"
+            >
+              <div
+                style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(96.50943396226415px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767292) scaleY(1);"
+              >
+                <svg
+                  height="6"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="485.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M3,3L482.99999999999994,3"
+                    fill="none"
+                    stroke="#71b307"
+                    stroke-width="4"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
+                  />
+                </svg>
+              </div>
+              <div
+                style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(168.2075471698113px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767299) scaleY(1);"
+              >
+                <svg
+                  height="6"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="485.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M3,3L482.99999999999994,3"
+                    fill="none"
+                    stroke="#71b307"
+                    stroke-width="4"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
+                  />
+                </svg>
+              </div>
+              <div
+                style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(239.90566037735846px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767299) scaleY(1);"
+              >
+                <svg
+                  height="6"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="485.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M3,3L482.99999999999994,3"
+                    fill="none"
+                    stroke="#71b307"
+                    stroke-width="4"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
+                  />
+                </svg>
+              </div>
+              <div
+                style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(311.60377358490564px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767286) scaleY(1);"
+              >
+                <svg
+                  height="6"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="485.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M3,3L482.99999999999994,3"
+                    fill="none"
+                    stroke="#71b307"
+                    stroke-width="4"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
+                  />
+                </svg>
+              </div>
+              <div
+                style="position: absolute; width: 485.99999999999994px; height: 6px; left: -3px; top: 322px; transform-origin: 3px 3px; transform: translateX(383.3018867924528px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767286) scaleY(1);"
+              >
+                <svg
+                  height="6"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="485.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M3,3L482.99999999999994,3"
+                    fill="none"
+                    stroke="#71b307"
+                    stroke-width="4"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 4;"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              style="position: absolute; left: 0px; top: 0px; z-index: 2;"
+            >
+              <div
+                data-interactive-kind-for-testing="movable-line"
+                style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(96.50943396226415px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767292) scaleY(1); cursor: move;"
+              >
+                <svg
+                  height="30"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="509.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M15,15L494.99999999999994,15"
+                    fill="#000000"
+                    opacity="0"
+                    stroke="#000000"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
+                  />
+                </svg>
+              </div>
+              <div
+                data-interactive-kind-for-testing="movable-line"
+                style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(168.2075471698113px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767299) scaleY(1); cursor: move;"
+              >
+                <svg
+                  height="30"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="509.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M15,15L494.99999999999994,15"
+                    fill="#000000"
+                    opacity="0"
+                    stroke="#000000"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
+                  />
+                </svg>
+              </div>
+              <div
+                data-interactive-kind-for-testing="movable-line"
+                style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(239.90566037735846px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767299) scaleY(1); cursor: move;"
+              >
+                <svg
+                  height="30"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="509.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M15,15L494.99999999999994,15"
+                    fill="#000000"
+                    opacity="0"
+                    stroke="#000000"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
+                  />
+                </svg>
+              </div>
+              <div
+                data-interactive-kind-for-testing="movable-line"
+                style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(311.60377358490564px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767286) scaleY(1); cursor: move;"
+              >
+                <svg
+                  height="30"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="509.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M15,15L494.99999999999994,15"
+                    fill="#000000"
+                    opacity="0"
+                    stroke="#000000"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
+                  />
+                </svg>
+              </div>
+              <div
+                data-interactive-kind-for-testing="movable-line"
+                style="position: absolute; width: 509.99999999999994px; height: 30px; left: -15px; top: 310px; transform-origin: 15px 15px; transform: translateX(383.3018867924528px) translateY(0px)  translateZ(0)rotate(0deg) scaleX(0.10455974842767286) scaleY(1); cursor: move;"
+              >
+                <svg
+                  height="30"
+                  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  version="1.1"
+                  width="509.99999999999994"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <desc
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  >
+                    Created with Raphaël
+                  </desc>
+                  <defs
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+                  />
+                  <path
+                    d="M15,15L494.99999999999994,15"
+                    fill="#000000"
+                    opacity="0"
+                    stroke="#000000"
+                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"
+                  />
+                </svg>
+              </div>
+            </div>
+            <span
+              class="graphie-label"
+              data-math-formula="0"
+              style="position: absolute; padding: 7px; color: black; left: 75px; top: 325px; fill: none;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="5"
+              style="position: absolute; padding: 7px; color: black; left: 75px; top: 275px; fill: none;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="10"
+              style="position: absolute; padding: 7px; color: black; left: 75px; top: 225px; fill: none;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="15"
+              style="position: absolute; padding: 7px; color: black; left: 75px; top: 175px; fill: none;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="20"
+              style="position: absolute; padding: 7px; color: black; left: 75px; top: 125px; fill: none;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="25"
+              style="position: absolute; padding: 7px; color: black; left: 75px; top: 75px; fill: none;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="30"
+              style="position: absolute; padding: 7px; color: black; left: 75px; top: 25px; fill: none;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="1^{\\text{st}} \\text{}"
+              style="position: absolute; padding: 7px; color: black; left: 121.60377358490565px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="2^{\\text{nd}} \\text{}"
+              style="position: absolute; padding: 7px; color: black; left: 193.30188679245282px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="3^{\\text{rd}} \\text{}"
+              style="position: absolute; padding: 7px; color: black; left: 265px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="4^{\\text{th}} \\text{}"
+              style="position: absolute; padding: 7px; color: black; left: 336.6981132075471px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              data-math-formula="5^{\\text{th}} \\text{}"
+              style="position: absolute; padding: 7px; color: black; left: 408.3962264150943px; top: 325px; fill: none; stroke: #71B307; transform: none; transform-origin: 100%;"
+            >
+              <span
+                class="katex-holder"
+              />
+              <span
+                class="mathjax-holder"
+              />
+            </span>
+            <span
+              class="graphie-label"
+              style="position: absolute; padding: 7px; color: black; left: 265px; top: 360px; margin-left: 0px; margin-top: 0px; fill: none; stroke: #71B307; font-weight: bold;"
+            >
+              School grade
+            </span>
+            <span
+              class="graphie-label rotate"
+              style="position: absolute; padding: 7px; color: black; left: 14.999999999999995px; top: 175px; margin-left: 0px; margin-top: 0px; fill: none; stroke: #71B307; font-weight: bold;"
+            >
+              Number of absent students
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;