fixes x-axis and crosshair formatting

app/components/form.tsx

@@ -35,7 +35,6 @@ export default function Form(props: any) {
  tempData: [[{ x: null, y: 0 }], [{ x: null, y: 0 }], [{ x: null, y: 0 }], [{ x: null, y: 0 }]],
  tempDataMedian: [],
  tempDataMean: [],
- showHints: true,
  crosshairValues: [],
  showMin: true,
  showMax: true,
@@ -44,8 +43,6 @@ export default function Form(props: any) {
  showPrec: false,
  showTrend: true,
  keepCrosshair: false,
- showTargetDate: false,
- showTargetWeek: false,
  formTitle: <h1>Select a visualization</h1>,
  formGeoString: '',
  currentVisMode: null,
@@ -106,8 +103,6 @@ export default function Form(props: any) {
  </div>
  <PlotControls props={props} state={state} setState={setState} width={100} />
  </div>
-
-
  </div >
  )
 

app/components/weatherPlot.tsx

@@ -1,5 +1,5 @@
 import { AreaSeries, Crosshair, DecorativeAxis, Highlight, HighlightArea, HorizontalGridLines, LineSeries, MarkSeries, VerticalBarSeries, XAxis, XYPlot, YAxis } from "react-vis";
-import { formState, myColors } from "../shared/utils";
+import { formState, getWeekNumber, months, myColors, visualizationModes } from "../shared/utils";
 import { leastSquaresLinearRegression } from "../shared/mathHelpers";
 import { useState } from "react";
 import styles from '../styles/form.module.css'
@@ -11,7 +11,7 @@ export function WeatherPlot({ state, setState, width }: { state: formState, setS
  height={400}
  width={width}
  animation={false}
- xType={state.showTargetWeek ? "linear" : 'time'}
+ xType={'time'}
  onClick={() => setState({ ...state, keepCrosshair: !state.keepCrosshair })}
  onMouseLeave={(): void => { !state.keepCrosshair ? setState({ ...state, crosshairValues: [] }) : null }}
  xDomain={
@@ -38,6 +38,18 @@ export function WeatherPlot({ state, setState, width }: { state: formState, setS
  {state.crosshairValues[0] ? <Crosshair className={styles.test}
  values={state.crosshairValues}
  style={{box:{background: 'rgba(80, 80, 80, 0.8)'}}}
+ titleFormat={(d) => {
+ if (state.currentVisMode===visualizationModes.MonthHistory){
+ return {title: 'x', value:`${d[0].x.getFullYear()} ${months[d[0].x.getMonth()+1]}`}
+ }
+ else if (state.currentVisMode===visualizationModes.WeekHistory) {
+ const weekInfo = getWeekNumber(d[0].x)
+ return {title: 'x', value: `${weekInfo[0]}-W${weekInfo[1]}`}
+ }
+ else {
+ return {title: 'x', value:d[0].x.toDateString()};
+ }
+ }}
  itemsFormat={(d) => [{ title: 'max', value: d[0].y }, { title: 'mean', value: d[1].y }, { title: 'min', value: d[2].y }]}>
  </Crosshair> : null}
  {state.crosshairValues.length === 0 ? null : <MarkSeries

app/shared/openMeteoInterface.tsx

@@ -65,8 +65,6 @@ export async function getOpenMeteoData(inputState: inputState, state: formState,
  tempDataMedian: mean.map((e: any) => { return { x: e.x, y: median(mean).y } }),
  crosshairValues: [],
  keepCrosshair: false,
- showTargetDate: false,
- showTargetWeek: false,
  currentVisMode: visualizationModes.Interval,
  formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
  //formTitle: `Daily Data between ${inputState.startDate} and ${inputState.endDate}.`
@@ -124,8 +122,6 @@ export async function getDateHistory(inputState: inputState, state: formState, s
  tempDataMean: mean.map((e: any) => { return { x: e.x, y: (avg || 0) } }),
  crosshairValues: [],
  keepCrosshair: false,
- showTargetDate: true,
- showTargetWeek: false,
  currentVisMode: visualizationModes.DateHistory,
  formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
  //formTitle: `History of ${inputState.targetDate.slice(5)} between ${inputState.startDate} and ${inputState.endDate}.`
@@ -169,14 +165,15 @@ export async function getWeekHistory(inputState: inputState, state: formState, s
  weekPrecData.push(parseFloat(msg.daily.precipitation_sum[j]))
  }
  }
- i = i + 363
-
- const xVal = weekInfo[0]
+ const xVal = new Date(k)
+ //const xVal = weekInfo[0]
  min.push({ x: xVal, y: Math.min(...weekMinData) })
  max.push({ x: xVal, y: Math.max(...weekMaxData) })
  //mean.push({ x: xVal, y: (avg || undefined) })
  mean.push({ x: xVal, y: weekMeanData })
  prec.push({ x: xVal, y: weekPrecData })
+
+ i = i + 363
  }
  }
 
@@ -216,8 +213,6 @@ export async function getWeekHistory(inputState: inputState, state: formState, s
  tempDataMedian: mean.map((e: any) => { return { x: e.x, y: median(mean).y } }),
  crosshairValues: [],
  keepCrosshair: false,
- showTargetDate: false,
- showTargetWeek: true,
  currentVisMode: visualizationModes.WeekHistory,
  formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
  //formTitle: `History of Calender Week ${targetWeek} between ${inputState.startDate} and ${inputState.endDate}.`
@@ -247,12 +242,14 @@ export async function getMonthHistory(inputState: inputState, state: formState,
 
  for (let i = 0; i < msg.daily.time.length; i++) {
  const k = msg.daily.time[i]
+ const date = new Date(k)
  const month = k.slice(5).slice(0, -3);
- const year = new Date(k).getFullYear()
+ const year = date.getFullYear()
  if (month === (inputState.targetDate.slice(5).slice(0, -3))) {
  //check if we already have an entry for this month else create a new one
- if (min.length === 0 || min.at(-1)?.x !== year) {
- const xVal = year
+ if (min.length === 0 || min.at(-1)?.x.getFullYear() !== year) {
+ const xVal = date
+ //const xVal = year
  min.push({ x: xVal, y: parseFloat(msg.daily.temperature_2m_min[i]) || Infinity })
  max.push({ x: xVal, y: parseFloat(msg.daily.temperature_2m_max[i] || -Infinity) })
  mean.push({ x: xVal, y: [parseFloat(msg.daily.temperature_2m_mean[i])] })
@@ -300,8 +297,6 @@ export async function getMonthHistory(inputState: inputState, state: formState,
  tempDataMedian: mean.map((e: any) => { return { x: e.x, y: median(mean).y } }),
  crosshairValues: [],
  keepCrosshair: false,
- showTargetDate: false,
- showTargetWeek: true,
  currentVisMode: visualizationModes.MonthHistory,
  formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
  //formTitle: `History of Month ${months[Number(inputState.targetDate.slice(5).slice(0, -3))]} between ${inputState.startDate} and ${inputState.endDate}.`,

app/shared/utils.tsx

@@ -28,7 +28,6 @@ export interface formState {
  tempData: Array<Array<weatherPoint>>,
  tempDataMedian: [],
  tempDataMean: [],
- showHints: boolean,
  crosshairValues: weatherPoint[],
  showMin: boolean,
  showMax: boolean,
@@ -37,8 +36,6 @@ export interface formState {
  showPrec: boolean,
  showTrend: boolean,
  keepCrosshair: boolean,
- showTargetDate: boolean,
- showTargetWeek: boolean,
  formTitle: ReactElement<any, any>,
  formGeoString: string,
  currentVisMode: visualizationModes | null,