Some more layout tweaks (#137)

* Implement basic zoom; TODO: fix angle in skewT

* Add logarithmic zoom for skew-T diagram; TODO: T calculations should use real axis extent rather than fixes base/top pressure

* Fix skew-T lines responding to original extent instead of actual; now they don't tilt anymore

* Add panning effect, but it is stroboscopic and doesn't work for skewT yet

* combine side-effects for both axes in a single callback

* Remove animationframe

* Use produce to update both scales in a single call

* Don't update panstart; this fixes the jittering

* Also work in log space

* Make consistent for x-direction

* zoom towards cursor

* Add reset plot button

* Thinner lines

* Higher resolution plot

* Round time to steps of 10 minutes

* format fix

Author: Peter9192

apps/class-solid/src/components/Analysis.tsx

@@ -128,7 +128,7 @@ export function TimeSeriesPlot({ analysis }: { analysis: TimeseriesAnalysis }) {
       e.output ? e.output[analysis.yVariable] : [],
     );
 
-  const xLim = () => getNiceAxisLimits(allX());
+  const xLim = () => getNiceAxisLimits(allX(), 0, 600);
   const yLim = () => getNiceAxisLimits(allY());
 
   const chartData = () =>
@@ -418,8 +418,9 @@ async function takeScreenshot(event: MouseEvent, analyse: Analysis) {
     return;
   }
 
-  // TODO Make screenshot bigger than the original?
-  const scale = 1;
+  // Make screenshot bigger than the original
+  const scale = 10;
+
   // Can not use toSvg as legend is written in HTML
   // generated svg document contains foreignObject with html tag
   // which can only be rendered using web browser, not Inkscape or PowerPoint

apps/class-solid/src/components/plots/Axes.tsx

@@ -79,6 +79,7 @@ export const AxisLeft = (props: AxisProps) => {
 export function getNiceAxisLimits(
   data: number[],
   extraMargin = 0,
+  roundTo?: number, // Optional rounding step, e.g. 600 for 10 minutes
 ): [number, number] {
   const max = Math.max(...data);
   const min = Math.min(...data);
@@ -87,7 +88,7 @@ export function getNiceAxisLimits(
   // Avoid NaNs on axis for constant values
   if (range === 0) return [min - 1, max + 1];
 
-  const step = 10 ** Math.floor(Math.log10(range));
+  const step = roundTo ?? 10 ** Math.floor(Math.log10(range));
 
   const niceMin = Math.floor(min / step) * step - extraMargin * step;
   const niceMax = Math.ceil(max / step) * step + extraMargin * step;

apps/class-solid/src/components/plots/Line.tsx

@@ -27,7 +27,7 @@ export function Line(d: ChartData<Point>) {
       fill="none"
       stroke={stroke()}
       stroke-dasharray={d.linestyle}
-      stroke-width="3"
+      stroke-width="2"
       d={l(d.data) || ""}
       class="cursor-pointer"
     >

apps/class-solid/src/components/plots/skewTlogP.tsx

@@ -122,7 +122,7 @@ function Sounding(data: ChartData<SoundingRecord>) {
         clip-path="url(#clipper)"
         stroke={stroke()}
         stroke-dasharray={data.linestyle}
-        stroke-width={3}
+        stroke-width={2}
         fill="none"
         class="cursor-pointer"
       >
@@ -133,7 +133,7 @@ function Sounding(data: ChartData<SoundingRecord>) {
         clip-path="url(#clipper)"
         stroke={stroke()}
         stroke-dasharray="5,5"
-        stroke-width={3}
+        stroke-width={2}
         fill="none"
         class="cursor-pointer"
       >