signalk-tides 1.1.0 → 1.2.0

package/README.md

@@ -35,79 +35,173 @@ $ curl http://localhost:3000/signalk/v2/api/resources/tides
 
 ```json
 {
-   "id" : "9710441",
-   "name" : "Nurse Channel",
-   "position" : {
-      "latitude" : 22.516666666667,
-      "longitude" : -75.85
-   },
    "extremes" : [
       {
-         "time" : "2025-03-16T01:51:00.000Z",
+         "time" : "2025-03-29T00:45:00.000Z",
+         "type" : "Low",
+         "value" : 0.025
+      },
+      {
+         "time" : "2025-03-29T07:20:00.000Z",
+         "type" : "High",
+         "value" : 1.928
+      },
+      {
+         "time" : "2025-03-29T13:18:00.000Z",
+         "type" : "Low",
+         "value" : 0.044
+      },
+      {
+         "time" : "2025-03-29T19:45:00.000Z",
+         "type" : "High",
+         "value" : 1.815
+      },
+      {
+         "time" : "2025-03-30T01:24:00.000Z",
+         "type" : "Low",
+         "value" : 0.164
+      },
+      {
+         "time" : "2025-03-30T07:52:00.000Z",
+         "type" : "High",
+         "value" : 2.024
+      },
+      {
+         "time" : "2025-03-30T14:05:00.000Z",
+         "type" : "Low",
+         "value" : -0.131
+      },
+      {
+         "time" : "2025-03-30T20:43:00.000Z",
+         "type" : "High",
+         "value" : 1.733
+      },
+      {
+         "time" : "2025-03-31T02:05:00.000Z",
+         "type" : "Low",
+         "value" : 0.334
+      },
+      {
+         "time" : "2025-03-31T08:27:00.000Z",
+         "type" : "High",
+         "value" : 2.084
+      },
+      {
+         "time" : "2025-03-31T14:53:00.000Z",
+         "type" : "Low",
+         "value" : -0.247
+      },
+      {
+         "time" : "2025-03-31T21:44:00.000Z",
+         "type" : "High",
+         "value" : 1.632
+      },
+      {
+         "time" : "2025-04-01T02:48:00.000Z",
+         "type" : "Low",
+         "value" : 0.517
+      },
+      {
+         "time" : "2025-04-01T09:06:00.000Z",
+         "type" : "High",
+         "value" : 2.094
+      },
+      {
+         "time" : "2025-04-01T15:46:00.000Z",
+         "type" : "Low",
+         "value" : -0.29
+      },
+      {
+         "time" : "2025-04-01T22:51:00.000Z",
          "type" : "High",
-         "value" : 0.836
+         "value" : 1.529
       },
       {
-         "time" : "2025-03-16T08:03:00.000Z",
+         "time" : "2025-04-02T03:37:00.000Z",
          "type" : "Low",
-         "value" : -0.016
+         "value" : 0.695
       },
       {
-         "time" : "2025-03-16T14:05:00.000Z",
+         "time" : "2025-04-02T09:49:00.000Z",
          "type" : "High",
-         "value" : 0.77
+         "value" : 2.05
       },
       {
-         "time" : "2025-03-16T20:11:00.000Z",
+         "time" : "2025-04-02T16:43:00.000Z",
          "type" : "Low",
-         "value" : -0.028
+         "value" : -0.263
       },
       {
-         "time" : "2025-03-17T02:26:00.000Z",
+         "time" : "2025-04-03T00:04:00.000Z",
          "type" : "High",
-         "value" : 0.83
+         "value" : 1.448
       },
       {
-         "time" : "2025-03-17T08:40:00.000Z",
+         "time" : "2025-04-03T04:35:00.000Z",
          "type" : "Low",
-         "value" : 0.004
+         "value" : 0.847
       },
       {
-         "time" : "2025-03-17T14:39:00.000Z",
+         "time" : "2025-04-03T10:39:00.000Z",
          "type" : "High",
-         "value" : 0.723
+         "value" : 1.957
       },
       {
-         "time" : "2025-03-17T20:43:00.000Z",
+         "time" : "2025-04-03T17:50:00.000Z",
          "type" : "Low",
-         "value" : -0.01
+         "value" : -0.189
       },
       {
-         "time" : "2025-03-18T03:02:00.000Z",
+         "time" : "2025-04-04T01:24:00.000Z",
          "type" : "High",
-         "value" : 0.813
+         "value" : 1.421
       },
       {
-         "time" : "2025-03-18T09:19:00.000Z",
+         "time" : "2025-04-04T05:49:00.000Z",
          "type" : "Low",
-         "value" : 0.033
+         "value" : 0.946
       },
       {
-         "time" : "2025-03-18T15:15:00.000Z",
+         "time" : "2025-04-04T11:40:00.000Z",
          "type" : "High",
-         "value" : 0.675
+         "value" : 1.837
       },
       {
-         "time" : "2025-03-18T21:16:00.000Z",
+         "time" : "2025-04-04T19:07:00.000Z",
          "type" : "Low",
-         "value" : 0.014
+         "value" : -0.11
+      },
+      {
+         "time" : "2025-04-05T02:40:00.000Z",
+         "type" : "High",
+         "value" : 1.455
+      },
+      {
+         "time" : "2025-04-05T07:19:00.000Z",
+         "type" : "Low",
+         "value" : 0.958
+      },
+      {
+         "time" : "2025-04-05T12:53:00.000Z",
+         "type" : "High",
+         "value" : 1.728
+      },
+      {
+         "time" : "2025-04-05T20:25:00.000Z",
+         "type" : "Low",
+         "value" : -0.061
       }
-   ]
+   ],
+   "station" : {
+      "name" : "Rincon Point, Pier 22 1/2",
+      "position" : {
+         "latitude" : 37.79,
+         "longitude" : -122.387
+      }
+   }
 }
 ```
 
-
-
 ## Sources
 
 - [NOAA](https://tidesandcurrents.noaa.gov/web_services_info.html) (US only)

package/app/App.css

@@ -0,0 +1,103 @@
+@import "tailwindcss";
+
+:root {
+  color-scheme: dark;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  background: linear-gradient(rgb(2, 75, 102), rgb(0, 20, 30));
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+.TideChart {
+  width: 100vw;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+}
+
+.TideChart__Gradient--stop1 {
+  stop-color: rgba(56, 143, 202, 0.5);
+}
+.TideChart__Gradient--stop2 {
+  stop-color: rgba(56, 143, 202, 0);
+}
+
+.TideChart__Line {
+  fill: none;
+  stroke: rgba(80, 190, 255, 1);
+  stroke-width: 3;
+}
+
+.TideChart__DataPoint {
+  fill: rgb(2, 75, 102);
+  stroke: white;
+  stroke-width: 3;
+}
+
+.TideChart__Text {
+  fill: rgba(255, 255, 255, 0.9);
+  font-weight: bold;
+  text-anchor: middle;
+}
+
+.TideChart__Text--High {
+  alignment-baseline: hanging;
+}
+.TideChart__Text--Low {
+  alignment-baseline: bottom;
+}
+
+.TideChart__Depth {
+  opacity: 0.8;
+}
+
+.TideChart__XAxis {
+  opacity: 0.3;
+}
+
+.TideChart__XAxis .tick {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.TideChart__LowWater {
+  stroke: rgba(255, 255, 255, 0.25);
+  stroke-width: 3;
+  stroke-dasharray: 1, 6;
+  stroke-linecap: round;
+}
+
+.TideChart__Now {
+  stroke: rgba(180, 50, 50, 0.8);
+  stroke-linecap: round;
+  stroke-width: 4;
+}
+
+.Position {
+  font-size: 0.9rem;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.Position__Coordinate {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: end;
+  gap: 0.2rem;
+}
+
+.Position__Direction {
+  width: 1.5rem;
+  text-align: left;
+}

package/app/App.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react'
+import './App.css'
+import { TidesView } from './views/TidesView'
+import { Footer } from './components/Footer'
+
+function App() {
+  return (
+    <StrictMode>
+      <TidesView />
+      <Footer />
+    </StrictMode>
+  )
+}
+
+export default App

package/app/components/Footer.tsx

@@ -0,0 +1,8 @@
+export function Footer() {
+  return (
+    <footer className="px-6 py-4 text-center text-sm text-white/50 bg-black/20">
+      Made by
+      <a className="decoration-none text-white/70" href="https://github.com/sponsors/bkeepers"> @bkeepers</a>
+    </footer>
+  )
+}

package/app/components/Position.tsx

@@ -0,0 +1,18 @@
+import { Coordinate } from "../coordinate";
+
+export function Position({ latitude, longitude }: { latitude: number, longitude: number }) {
+  const lat = Coordinate.lat(latitude);
+  const lon = Coordinate.lon(longitude);
+  return (
+    <div className="Position">
+      <div className="Position__Coordinate">
+        <span>{lat.format('DD mm')}</span>
+        <span className="Position__Direction">{lat.format('X')}</span>
+      </div>
+      <div className="Position__Coordinate">
+        <span>{lon.format('DD mm')}</span>
+        <span className="Position__Direction">{lon.format('X')}</span>
+      </div>
+    </div>
+  );
+}

package/app/components/TideChart.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from "react";
+import * as d3 from "d3";
+import { TideExtreme } from "../hooks/useTideData";
+import moment from "moment";
+import { useContainerDimensions } from "../hooks/useContainerDimensions";
+
+type TideChartProps = {
+  width?: number;
+  height?: number;
+  marginTop?: number;
+  marginRight?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  units?: "m" | "ft";
+  timeFormat?: string;
+  data: TideExtreme[];
+};
+
+export function TideChart({
+  data,
+  marginTop = 20,
+  marginRight = 6,
+  marginBottom = 30,
+  marginLeft = 6,
+  units = "m",
+  timeFormat = "HH:mm",
+}: TideChartProps) {
+  const container = useRef<HTMLDivElement>(null);
+  const now = useRef<SVGLineElement>(null);
+  const { height = 0 } = useContainerDimensions(container) || {};
+  const [width, setWidth] = useState(0)
+  const gx = useRef<SVGGElement>(null);
+  const x = useRef<d3.ScaleTime<number, number, never>>(null);
+  const y = useRef<d3.ScaleLinear<number, number, never>>(null);
+  const area = useRef<d3.Area<TideExtreme>>(null);
+  const line = useRef<d3.Line<TideExtreme>>(null);
+  const textPadding = 25;
+  const yPadding = 0.3; // meters
+
+  // Adjust width relative to height and number of forecasts
+  useEffect(() => {
+    setWidth(height / 4 * data.length)
+  }, [height, data])
+
+  function displayDepth(value: number) {
+    return units === "m" ? `${value.toFixed(2)} m` : `${(value * 3.28084).toFixed(1)} ft`;
+  }
+
+  function displayTime(value: string) {
+    return moment(value).format(timeFormat);
+  }
+
+  useEffect(() => {
+    const [min = 0, max = 0] = d3.extent(data, d => new Date(d.time));
+
+    x.current = d3.scaleTime()
+      .domain([min, max])
+      .range([marginLeft, width - marginRight]);
+
+    const [yMin = 0, yMax = 0] = d3.extent(data, d => d.value)
+    const yPad = (yMax - yMin) * .3;
+
+    // Declare the y (vertical position) scale.
+    y.current = d3.scaleLinear()
+      .domain([yMin - yPad, yMax + yPad])
+      .range([height - marginBottom, marginTop]);
+
+    // Declare the area generator.
+    area.current = d3.area<TideExtreme>()
+      .curve(d3.curveMonotoneX)
+      .x(d => x.current!(new Date(d.time)))
+      .y0(y.current!(d3.min(data, d => d.value - yPadding) ?? 0))
+      .y1(d => y.current!(d.value));
+
+    line.current = d3.line<TideExtreme>()
+      .curve(d3.curveMonotoneX)
+      .x(d => x.current!(new Date(d.time)))
+      .y(d => y.current!(d.value))
+
+    if (gx.current) d3.select(gx.current).call(d3.axisBottom(x.current));
+  }, [data, height, width, marginBottom, marginLeft, marginRight, marginTop])
+
+  useEffect(() => {
+    now.current?.scrollIntoView({ block: 'center', inline: 'center' })
+  }, [data, now, width])
+
+  return (
+    <div className="TideChart" ref={container}>
+      <svg width={width} height={height}>
+        <defs>
+          <linearGradient id="gradient" gradientTransform="rotate(90)">
+            <stop className="TideChart__Gradient--stop1" offset="0" />
+            <stop className="TideChart__Gradient--stop2" offset="100%" />
+          </linearGradient>
+        </defs>
+        <g className="TideChart__XAxis" ref={gx} transform={`translate(0,${height - marginBottom})`} />
+
+        <line
+          className="TideChart__LowWater"
+          x1={marginLeft}
+          x2={width - marginRight}
+          y1={y.current?.(0)}
+          y2={y.current?.(0)}
+        />
+
+        <path fill="url(#gradient)" d={area.current?.(data) || ''} />
+        <path className="TideChart__Line" d={line.current?.(data) || ''} />
+
+        <line
+          ref={now}
+          className="TideChart__Now"
+          x1={x.current?.(new Date())}
+          x2={x.current?.(new Date())}
+          y1={marginTop}
+          y2={height - marginTop}
+        />
+
+        <g>
+          {
+            data.map((d, i) => (
+              <g key={i}>
+                <circle
+                  className="TideChart__DataPoint"
+                  cx={x.current?.(new Date(d.time))}
+                  cy={y.current?.(d.value)}
+                  r={5}
+                />
+                {
+                  (i !== 0 && i !== data.length - 1) &&
+                  <text
+                    className={["TideChart__Text", `TideChart__Text--${d.type}`].join(" ")}
+                    y={d.type === "High" ? marginTop + textPadding : height - marginBottom - textPadding}
+                  >
+                    <tspan className="TideChart__Depth" x={x.current?.(new Date(d.time))} dy={d.type === "High" ? "1.5em" : "-1.5em"}>
+                      {displayDepth(d.value)}
+                    </tspan>
+                    <tspan className="TideChart__Time" x={x.current?.(new Date(d.time))} dy={d.type === "High" ? "-1.5em" : "1.5em"}>
+                      {displayTime(d.time)}
+                    </tspan>
+                  </text>
+                }
+              </g>
+            ))
+          }
+        </g>
+      </svg>
+    </div>
+  );
+}

package/app/coordinate.ts

@@ -0,0 +1,62 @@
+export type CoordinateFormatOptions = {
+  precision: number,
+  units: { degrees: string, minutes: string, seconds: string }
+}
+
+// Adapted from https://github.com/nerik/formatcoords
+export class Coordinate {
+  static lat(value: number) {
+    return new Coordinate(value, ['N', 'S']);
+  }
+
+  static lon(value: number) {
+    return new Coordinate(value, ['E', 'W']);
+  }
+
+  constructor(public value: number, public directions: [string, string]) {
+  }
+
+  get degrees() {
+    return Math.abs(this.value);
+  }
+
+  get minutes() {
+    return (this.degrees % 1) * 60;
+  }
+
+  get seconds() {
+    return (this.minutes % 1) * 60;
+  }
+
+  get direction() {
+    return this.directions[this.value > 0 ? 0 : 1];
+  }
+
+  format(format: string, options?: CoordinateFormatOptions) {
+    if (isNaN(this.value)) return;
+
+    const {
+      precision = 3,
+      units = { degrees: '°', minutes: '′', seconds: '″' }
+    } = options ?? {};
+
+    const formats: [RegExp, () => string][] = [
+      [/DD/g, () => [Math.floor(this.degrees), units.degrees].join('')],
+      [/dd/g, () => [this.degrees.toFixed(precision), units.degrees].join('')],
+      [/D/g, () => Math.floor(this.degrees).toString()],
+      [/d/g, () => this.degrees.toFixed(precision)],
+      [/MM/g, () => [Math.floor(this.minutes), units.minutes].join('')],
+      [/mm/g, () => [this.minutes.toFixed(precision), units.minutes].join('')],
+      [/M/g, () => Math.floor(this.minutes).toString()],
+      [/m/g, () => this.minutes.toFixed(precision)],
+      [/ss/g, () => [this.seconds.toFixed(precision), units.seconds].join('')],
+      [/s/g, () => this.seconds.toFixed(precision)],
+      [/-/g, () => this.value < 0 ? '-' : ''],
+      [/X/g, () => this.direction],
+    ]
+
+    return formats.reduce((result, [regex, replacer]) => {
+      return result.replace(regex, replacer);
+    }, format);
+  }
+}

package/app/hooks/useContainerDimensions.ts

@@ -0,0 +1,13 @@
+import { RefObject, useLayoutEffect, useState } from "react";
+import useResizeObserver from '@react-hook/resize-observer'
+
+export function useContainerDimensions<T extends HTMLElement | null>(ref: RefObject<T>) {
+  const [size, setSize] = useState<DOMRect>()
+
+  useLayoutEffect(() => {
+    setSize(ref.current?.getBoundingClientRect())
+  }, [ref])
+
+  useResizeObserver(ref, (entry) => setSize(entry.contentRect))
+  return size
+}

package/app/hooks/useTideData.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { TideForecastResult, TideExtreme } from "../../src/types";
+
+const { VITE_SIGNALK_URL = window.location.toString() } = import.meta.env;
+export const API_URL = new URL("/signalk/v2/api/resources/tides", VITE_SIGNALK_URL).toString();
+export const SETTINGS_URL = new URL("/#/serverConfiguration/plugins/tides", VITE_SIGNALK_URL).toString();
+
+export type { TideForecastResult, TideExtreme }
+
+export function useTideData() {
+  const [data, setData] = useState<TideForecastResult>()
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(API_URL)
+      setData(await res.json())
+    })()
+  }, []);
+
+  return data;
+}

package/app/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('app')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/app/public/icon.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="200" height="200"></rect>
+    </defs>
+    <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect fill="#FFFFFF" x="0" y="0" width="200" height="200"></rect>
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Rectangle" fill="#6BB4B8" xlink:href="#path-1"></use>
+        <rect id="Rectangle" fill="#6BB4B8" mask="url(#mask-2)" x="0" y="0" width="200" height="200" rx="30"></rect>
+        <polyline id="Path" fill="#60A9AD" fill-rule="nonzero" mask="url(#mask-2)" points="1.42108547e-14 83.43 1 84.03 2 84.64 3 85.26 4 85.91 5 86.56 6 87.23 7 87.91 8 88.61 9 89.31 10 90.02 11 90.75 12 91.48 13 92.23 14 92.98 15 93.73 16 94.5 17 95.27 18 96.04 19 96.82 20 97.6 21 98.38 22 99.16 23 99.95 24 100.73 25 101.52 26 102.3 27 103.08 28 103.86 29 104.63 30 105.4 31 106.17 32 106.93 33 107.68 34 108.42 35 109.16 36 109.88 37 110.6 38 111.3 39 112 40 112.68 41 113.35 42 114.01 43 114.65 44 115.28 45 115.9 46 116.49 47 117.08 48 117.64 49 118.19 50 118.72 51 119.23 52 119.72 53 120.2 54 120.65 55 121.08 56 121.49 57 121.88 58 122.25 59 122.6 60 122.92 61 123.23 62 123.5 63 123.76 64 123.99 65 124.2 66 124.39 67 124.55 68 124.68 69 124.8 70 124.88 71 124.95 72 124.99 73 125 74 124.99 75 124.95 76 124.89 77 124.81 78 124.7 79 124.57 80 124.41 81 124.23 82 124.02 83 123.79 84 123.54 85 123.26 86 122.96 87 122.64 88 122.3 89 121.93 90 121.54 91 121.14 92 120.71 93 120.26 94 119.78 95 119.3 96 118.79 97 118.26 98 117.71 99 117.15 100 116.57 101 115.97 102 115.36 103 114.74 104 114.09 105 113.44 106 112.77 107 112.09 108 111.39 109 110.69 110 109.98 111 109.25 112 108.52 113 107.77 114 107.02 115 106.27 116 105.5 117 104.73 118 103.96 119 103.18 120 102.4 121 101.62 122 100.84 123 100.05 124 99.27 125 98.48 126 97.7 127 96.92 128 96.14 129 95.37 130 94.6 131 93.83 132 93.07 133 92.32 134 91.58 135 90.84 136 90.12 137 89.4 138 88.7 139 88 140 87.32 141 86.65 142 85.99 143 85.35 144 84.72 145 84.1 146 83.51 147 82.92 148 82.36 149 81.81 150 81.28 151 80.77 152 80.28 153 79.8 154 79.35 155 78.92 156 78.51 157 78.12 158 77.75 159 77.4 160 77.08 161 76.77 162 76.5 163 76.24 164 76.01 165 75.8 166 75.61 167 75.45 168 75.32 169 75.2 170 75.12 171 75.05 172 75.01 173 75 174 75.01 175 75.05 176 75.11 177 75.19 178 75.3 179 75.43 180 75.59 181 75.77 182 75.98 183 76.21 184 76.46 185 76.74 186 77.04 187 77.36 188 77.7 189 78.07 190 78.46 191 78.86 192 79.29 193 79.74 194 80.22 195 80.7 196 81.21 197 81.74 198 82.29 199 82.85 200 83.43 200 250 1.42108547e-14 250"></polyline>
+        <polyline id="Path" fill="#98CBCE" fill-rule="nonzero" mask="url(#mask-2)" points="1.42108547e-14 100 1 100.79 2 101.57 3 102.35 4 103.13 5 103.91 6 104.68 7 105.45 8 106.22 9 106.97 10 107.73 11 108.47 12 109.2 13 109.93 14 110.64 15 111.35 16 112.04 17 112.73 18 113.4 19 114.05 20 114.69 21 115.32 22 115.94 23 116.53 24 117.11 25 117.68 26 118.22 27 118.75 28 119.26 29 119.75 30 120.23 31 120.68 32 121.11 33 121.52 34 121.91 35 122.28 36 122.62 37 122.94 38 123.24 39 123.52 40 123.78 41 124.01 42 124.21 43 124.4 44 124.56 45 124.69 46 124.8 47 124.89 48 124.95 49 124.99 50 125 51 124.99 52 124.95 53 124.89 54 124.8 55 124.69 56 124.56 57 124.4 58 124.21 59 124.01 60 123.78 61 123.52 62 123.24 63 122.94 64 122.62 65 122.28 66 121.91 67 121.52 68 121.11 69 120.68 70 120.23 71 119.75 72 119.26 73 118.75 74 118.22 75 117.68 76 117.11 77 116.53 78 115.94 79 115.32 80 114.69 81 114.05 82 113.4 83 112.73 84 112.04 85 111.35 86 110.64 87 109.93 88 109.2 89 108.47 90 107.73 91 106.97 92 106.22 93 105.45 94 104.68 95 103.91 96 103.13 97 102.35 98 101.57 99 100.79 100 100 101 99.21 102 98.43 103 97.65 104 96.87 105 96.09 106 95.32 107 94.55 108 93.78 109 93.03 110 92.27 111 91.53 112 90.8 113 90.07 114 89.36 115 88.65 116 87.96 117 87.27 118 86.6 119 85.95 120 85.31 121 84.68 122 84.06 123 83.47 124 82.89 125 82.32 126 81.78 127 81.25 128 80.74 129 80.25 130 79.77 131 79.32 132 78.89 133 78.48 134 78.09 135 77.72 136 77.38 137 77.06 138 76.76 139 76.48 140 76.22 141 75.99 142 75.79 143 75.6 144 75.44 145 75.31 146 75.2 147 75.11 148 75.05 149 75.01 150 75 151 75.01 152 75.05 153 75.11 154 75.2 155 75.31 156 75.44 157 75.6 158 75.79 159 75.99 160 76.22 161 76.48 162 76.76 163 77.06 164 77.38 165 77.72 166 78.09 167 78.48 168 78.89 169 79.32 170 79.77 171 80.25 172 80.74 173 81.25 174 81.78 175 82.32 176 82.89 177 83.47 178 84.06 179 84.68 180 85.31 181 85.95 182 86.6 183 87.27 184 87.96 185 88.65 186 89.36 187 90.07 188 90.8 189 91.53 190 92.27 191 93.03 192 93.78 193 94.55 194 95.32 195 96.09 196 96.87 197 97.65 198 98.43 199 99.21 200 100 200 250 1.42108547e-14 250"></polyline>
+    </g>
+</svg>