diff --git a/README.md b/README.md
index e2194a8194..63807e7bd6 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,9 @@ yarn dev:ssl # If you are working with the login process
> the app after login. You can either remove the trailing s in the URL after the
> redirection, or use the `yarn dev:ssl` command to use HTTPs for the
> development server. Also, make sure to set the `NEXTAUTH_URL` environment
-> variable to `https://localhost:3000` in your `.env.local` file.
+> variable to `https://localhost:3000` in your `.env.local` file
+> make sure to fill in every variable from .env.example to make sure the
+> authentication works
> 👉 In [Visual Studio Code](https://code.visualstudio.com/), you also can run
> the **default build task** (CMD-SHIFT-B) to start the dev server, database
diff --git a/app/charts/column/overlay-columns.tsx b/app/charts/column/overlay-columns.tsx
index 541d6568a0..51673ef90f 100644
--- a/app/charts/column/overlay-columns.tsx
+++ b/app/charts/column/overlay-columns.tsx
@@ -3,9 +3,11 @@ import { ComboLineColumnState } from "@/charts/combo/combo-line-column-state";
import { useChartState } from "@/charts/shared/chart-state";
import { useInteraction } from "@/charts/shared/use-interaction";
import { Observation } from "@/domain/data";
+import { useFormatFullDateAuto } from "@/formatters";
export const InteractionColumns = () => {
const [, dispatch] = useInteraction();
+ const formatDate = useFormatFullDateAuto();
const { chartData, bounds, getX, xScaleInteraction } = useChartState() as
| ColumnsState
@@ -28,7 +30,7 @@ export const InteractionColumns = () => {
{chartData.map((d, i) => (
<rect
key={i}
- x={xScaleInteraction(getX(d)) as number}
+ x={xScaleInteraction(formatDate(getX(d))) as number}
y={0}
width={xScaleInteraction.bandwidth()}
height={Math.max(0, chartHeight)}
diff --git a/app/charts/combo/combo-line-column-state.tsx b/app/charts/combo/combo-line-column-state.tsx
index 946c4530de..9c35f717b8 100644
--- a/app/charts/combo/combo-line-column-state.tsx
+++ b/app/charts/combo/combo-line-column-state.tsx
@@ -160,7 +160,8 @@ const useComboLineColumnState = (
// Tooltip
const getAnnotationInfo = (d: Observation): TooltipInfo => {
const x = getX(d);
- const xScaled = (xScale(x) as number) + xScale.bandwidth() * 0.5;
+ const xScaled =
+ (xScale(formatDate(x)) as number) + xScale.bandwidth() * 0.5;
const values = [variables.y.left, variables.y.right]
.map(({ orientation, getY, label, chartType }) => {
const y = getY(d);
diff --git a/app/charts/combo/combo-line-column.tsx b/app/charts/combo/combo-line-column.tsx
index 92d7decc09..eb276a9214 100644
--- a/app/charts/combo/combo-line-column.tsx
+++ b/app/charts/combo/combo-line-column.tsx
@@ -9,6 +9,7 @@ import { ComboLineColumnState } from "@/charts/combo/combo-line-column-state";
import { useChartState } from "@/charts/shared/chart-state";
import { renderContainer } from "@/charts/shared/rendering-utils";
import { Observation } from "@/domain/data";
+import { useFormatFullDateAuto } from "@/formatters";
import { useTransitionStore } from "@/stores/transition";
const Columns = () => {
@@ -26,6 +27,7 @@ const Columns = () => {
const ref = useRef<SVGGElement>(null);
const enableTransition = useTransitionStore((state) => state.enable);
const transitionDuration = useTransitionStore((state) => state.duration);
+ const formatDate = useFormatFullDateAuto();
const bandwidth = xScale.bandwidth();
const yColumn = y.left.chartType === "column" ? y.left : y.right;
const yScale =
@@ -36,7 +38,7 @@ const Columns = () => {
const renderData: RenderColumnDatum[] = useMemo(() => {
return chartData.map((d) => {
const key = getRenderingKey(d);
- const xScaled = xScale(getX(d)) as number;
+ const xScaled = xScale(formatDate(getX(d))) as number;
const y = yColumn.getY(d) ?? NaN;
const yScaled = yScale(y);
const yRender = yScale(Math.max(y, 0));
@@ -62,6 +64,7 @@ const Columns = () => {
y0,
colors,
bandwidth,
+ formatDate,
]);
useEffect(() => {
@@ -88,6 +91,7 @@ const Columns = () => {
const Lines = () => {
const { chartData, xScale, getX, yOrientationScales, y, colors, bounds } =
useChartState() as ComboLineColumnState;
+ const formatDate = useFormatFullDateAuto();
const yLine = y.left.chartType === "line" ? y.left : y.right;
const yScale =
y.left.chartType === "line"
@@ -100,7 +104,9 @@ const Lines = () => {
const y = yLine.getY(d);
return y !== null && !isNaN(y);
})
- .x((d) => (xScale(getX(d)) as number) + xScale.bandwidth() * 0.5)
+ .x(
+ (d) => (xScale(formatDate(getX(d))) as number) + xScale.bandwidth() * 0.5
+ )
.y((d) => yScale(yLine.getY(d) as number));
return (
diff --git a/app/components/publish-actions.tsx b/app/components/publish-actions.tsx
index 247d89cb59..0b0feb5499 100644
--- a/app/components/publish-actions.tsx
+++ b/app/components/publish-actions.tsx
@@ -1,11 +1,3 @@
-import { CHART_RESIZE_EVENT_TYPE } from "@/charts/shared/use-size";
-import { CopyToClipboardTextInput } from "@/components/copy-to-clipboard-text-input";
-import Flex from "@/components/flex";
-import { Radio } from "@/components/form";
-import { IconLink } from "@/components/links";
-import { Icon } from "@/icons";
-import useEvent from "@/utils/use-event";
-import { useI18n } from "@/utils/use-i18n";
import { t, Trans } from "@lingui/macro";
import {
Box,
@@ -20,15 +12,14 @@ import {
} from "@mui/material";
import { ChangeEvent, ReactNode, RefObject, useEffect, useState } from "react";
-
import { CHART_RESIZE_EVENT_TYPE } from "@/charts/shared/use-size";
import { CopyToClipboardTextInput } from "@/components/copy-to-clipboard-text-input";
-import Flex from "@/components/flex";
+import { default as Flex } from "@/components/flex";
import { Radio } from "@/components/form";
import { IconLink } from "@/components/links";
import { ConfiguratorStatePublished } from "@/configurator";
import { Icon } from "@/icons";
-import useEvent from "@/utils/use-event";
+import { default as useEvent } from "@/utils/use-event";
import { useI18n } from "@/utils/use-i18n";
type PublishActionProps = {
diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
index 0dd7625863..086aeb4c98 100644
--- a/app/configurator/components/ui-helpers.ts
+++ b/app/configurator/components/ui-helpers.ts
@@ -31,11 +31,26 @@ export const timeUnitToParser: Record<
TimeUnit,
(dateStr: string) => Date | null
> = {
- Second: timeParse("%Y-%m-%dT%H:%M:%S"),
- Hour: timeParse("%Y-%m-%dT%H:%M"), // same as minute
- Minute: timeParse("%Y-%m-%dT%H:%M"),
- Week: timeParse("%Y-%m-%d"), // same as day
- Day: timeParse("%Y-%m-%d"),
+ Second: (dateStr: string) =>
+ timeParse("%Y-%m-%dT%H:%M:%S")(dateStr) ??
+ timeParse("%d.%m.%YT%H:%M:%S")(dateStr) ??
+ timeParse("%m.%d.%YT%H:%M:%S")(dateStr),
+ Hour: (dateStr: string) =>
+ timeParse("%Y-%m-%dT%H:%M")(dateStr) ??
+ timeParse("%d.%m.%YT%H:%M")(dateStr) ??
+ timeParse("%m.%d.%YT%H:%M")(dateStr),
+ Minute: (dateStr: string) =>
+ timeParse("%Y-%m-%dT%H:%M")(dateStr) ??
+ timeParse("%d.%m.%YT%H:%M")(dateStr) ??
+ timeParse("%m.%d.%YT%H:%M")(dateStr),
+ Week: (dateStr: string) =>
+ timeParse("%Y-%m-%d")(dateStr) ??
+ timeParse("%d.%m.%Y")(dateStr) ??
+ timeParse("%m.%d.%Y")(dateStr),
+ Day: (dateStr: string) =>
+ timeParse("%Y-%m-%d")(dateStr) ??
+ timeParse("%d.%m.%Y")(dateStr) ??
+ timeParse("%m.%d.%Y")(dateStr),
Month: timeParse("%Y-%m"),
Year: timeParse("%Y"),
};
@@ -46,7 +61,6 @@ export const parseDate = (dateStr: string): Date =>
timeUnitToParser.Day(dateStr) ??
timeUnitToParser.Month(dateStr) ??
timeUnitToParser.Year(dateStr) ??
- // This should probably not happen
new Date(dateStr);
export const timeUnitToFormatter: Record<TimeUnit, (date: Date) => string> = {