Feat/extend supported datasets

README.md

@@ -70,7 +70,15 @@ 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
+
+> Authentication Requirements Checklist
+>
+> - Create .env.loval file
+> - NEXTAUTH_URL=https://localhost:3000
+> - NEXTAUTH_SECRET=Some Secret
+> - Don't forget to import all ADFS\_ from
+>   `https://vercel.com/ixt/visualization-tool/settings/environment-variables`
 
 > 👉 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

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)}

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);

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 (

app/charts/combo/combo-line-dual-state.tsx

@@ -146,6 +146,7 @@ const useComboLineDualState = (
   const getAnnotationInfo = (d: Observation): TooltipInfo => {
     const x = getX(d);
     const xScaled = xScale(x);
+    console.log(x, xScaled);
 
     const values = [variables.y.left, variables.y.right]
       .map(({ orientation, getY, label }) => {

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 = {

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> = {