Rain visualisation

src/components/parcel.js

@@ -2,7 +2,7 @@ import { PureComponent } from "./pure";
 // eslint-disable-next-line no-unused-vars
 import { h } from "preact";
 
-export function Parcel({ parcel, width, line, pToPx, formatAltitude }) {
+export function Parcel({ parcel, width, line, pToPx, formatAltitude, params }) {
   const { trajectory, isohume, elevThermalTop, pThermalTop, pCloudTop } = parcel;
   const parts = [];
   if (trajectory) {
@@ -14,6 +14,9 @@ export function Parcel({ parcel, width, line, pToPx, formatAltitude }) {
         <Cumulus x={width} y={thtY} />,
         <line class="boundary" y1={ctY} y2={ctY} x2={width} />
       );
+      if (params.rain) {
+        parts.push(<RainDrop x={width} y={thtY} />);
+      }
     }
     parts.push(
       <line class="boundary" y1={thtY} y2={thtY} x2={width} />,
@@ -50,3 +53,15 @@ class Cumulus extends PureComponent {
     );
   }
 }
+
+export class RainDrop extends PureComponent {
+  render({ x, y }) {
+    return (
+      <path
+        class="raindrop"
+        transform={`translate(${x - 36 + 15}, ${y - 36 + 25}) scale(0.2)`}
+        d="M26.4562,52.9128c10.248,0,18.5862-8.3362,18.5862-18.5836c0-10.036-17.4188-32.8138-18.1606-33.7782L26.4562,0l-0,0 c-0,0-18.1604,23.742-18.1604,33.7764C7.8704,44.5766,16.2084,52.9128,26.4562,52.9128"
+      />
+    );
+  }
+}

src/components/skewt.js

@@ -3,7 +3,7 @@ import * as math from "../math";
 
 import { GRAPH_BOTTOM_MARGIN_PX } from "../selectors/sounding";
 // eslint-disable-next-line no-unused-vars
-import { Parcel } from "../components/parcel";
+import { Parcel, RainDrop } from "../components/parcel";
 import { PureComponent } from "./pure";
 // eslint-disable-next-line no-unused-vars
 import { h } from "preact";
@@ -108,7 +108,7 @@ export class SkewT extends PureComponent {
             {[-70, -60, -50, -40, -30, -20, -10, 0, 10, 20, 30, 40].map((t) => (
               <IsoTherm temp={t + 273.15} {...{ height, pToPx, line }} />
             ))}
-            {parcel && <Parcel {...{ parcel, width, height, line, pToPx, formatAltitude }} />}
+            {parcel && <Parcel {...{ parcel, width, height, line, pToPx, formatAltitude, params }} />}
             <TemperatureAxis
               width={width}
               height={height}
@@ -124,6 +124,7 @@ export class SkewT extends PureComponent {
               pSfc={pSfc}
               highClouds={zoom}
             />
+            {params.rain && !parcel && <RainDrop x={width+9} y={26} />}
             <AltitudeAxis width={width} pAxisToPx={pAxisToPx} step={ghAxisStep} metric={ghMetric} />
           </g>
           <path class="line temperature" d={line(math.zip(params.temp, params.level))} />
@@ -276,7 +277,7 @@ const Clouds = ({ width, cloudCover, pToPx, pSfc, highClouds }) => {
       <text
         class="tick"
         y={30 - 5}
-        x={width - 5}
+        x={width - 15}
         text-anchor="end"
         filter="url(#whiteOutlineEffect)"
       >

src/plugin.less

@@ -117,6 +117,10 @@
       fill: ivory;
     }
 
+    .raindrop {
+      fill: blue;
+    }
+
     .line {
       pointer-events: none;
       stroke-width: 3;

src/selectors/skewt.js

@@ -59,6 +59,15 @@ export const params = createSelector(forecasts, timestamp, pMin, (forecasts, tim
   });
 
   params.level = levels;
+  params.snow = false;
+  params.rain = false;
+  const nextfc = forecasts.forecast.data.ts.findIndex((t) => t >= timestamp);
+  if (next != -1) {
+    const previousfc = Math.max(0, next - 1);
+    const nearestfc = forecasts.forecast.data.ts[nextfc] - timestamp > timestamp - forecasts.forecast.data.ts[previousfc] ? previousfc : nextfc;
+    params.rain = forecasts.forecast.data.rain[nearestfc] > 0;
+    params.snow = forecasts.forecast.data.snow[nearestfc] > 0;
+  }
 
   const wind = params.wind_u.map((u, index) => {
     const v = params.wind_v[index];