TypeScript diagnostics are not shown

@kirawi
2024-01-29T15:26:40.236 helix_lsp::client [INFO] Using custom LSP config: {"hostInfo":"helix","javascript":{"inlayHints":{"includeInlayEnumMemberValueHints":true,"includeInlayFunctionLikeReturnTypeHints":true,"includeInlayFunctionParameterTypeHints":true,"includeInlayParameterNameHints":"all","includeInlayParameterNameHintsWhenArgumentMatchesName":true,"includeInlayPropertyDeclarationTypeHints":true,"includeInlayVariableTypeHints":true}},"typescript":{"inlayHints":{"includeInlayEnumMemberValueHints":true,"includeInlayFunctionLikeReturnTypeHints":true,"includeInlayFunctionParameterTypeHints":true,"includeInlayParameterNameHints":"all","includeInlayParameterNameHintsWhenArgumentMatchesName":true,"includeInlayPropertyDeclarationTypeHints":true,"includeInlayVariableTypeHints":true}}}
2024-01-29T15:26:40.236 helix_lsp::transport [INFO] typescript-language-server -> {"jsonrpc":"2.0","method":"initialize","params":{"capabilities":{"general":{"positionEncodings":["utf-8","utf-32","utf-16"]},"textDocument":{"codeAction":{"codeActionLiteralSupport":{"codeActionKind":{"valueSet":["","quickfix","refactor","refactor.extract","refactor.inline","refactor.rewrite","source","source.organizeImports"]}},"dataSupport":true,"disabledSupport":true,"isPreferredSupport":true,"resolveSupport":{"properties":["edit","command"]}},"completion":{"completionItem":{"deprecatedSupport":true,"insertReplaceSupport":true,"resolveSupport":{"properties":["documentation","detail","additionalTextEdits"]},"snippetSupport":true,"tagSupport":{"valueSet":[1]}},"completionItemKind":{}},"hover":{"contentFormat":["markdown"]},"inlayHint":{"dynamicRegistration":false},"publishDiagnostics":{"versionSupport":true},"rename":{"dynamicRegistration":false,"honorsChangeAnnotations":false,"prepareSupport":true},"signatureHelp":{"signatureInformation":{"activeParameterSupport":true,"documentationFormat":["markdown"],"parameterInformation":{"labelOffsetSupport":true}}}},"window":{"workDoneProgress":true},"workspace":{"applyEdit":true,"configuration":true,"didChangeConfiguration":{"dynamicRegistration":false},"didChangeWatchedFiles":{"dynamicRegistration":true,"relativePatternSupport":false},"executeCommand":{"dynamicRegistration":false},"fileOperations":{"didRename":true,"willRename":true},"inlayHint":{"refreshSupport":false},"symbol":{"dynamicRegistration":false},"workspaceEdit":{"documentChanges":true,"failureHandling":"abort","normalizesLineEndings":false,"resourceOperations":["create","rename","delete"]},"workspaceFolders":true}},"clientInfo":{"name":"helix","version":"23.10 (87a720c3)"},"initializationOptions":{"hostInfo":"helix","javascript":{"inlayHints":{"includeInlayEnumMemberValueHints":true,"includeInlayFunctionLikeReturnTypeHints":true,"includeInlayFunctionParameterTypeHints":true,"includeInlayParameterNameHints":"all","includeInlayParameterNameHintsWhenArgumentMatchesName":true,"includeInlayPropertyDeclarationTypeHints":true,"includeInlayVariableTypeHints":true}},"typescript":{"inlayHints":{"includeInlayEnumMemberValueHints":true,"includeInlayFunctionLikeReturnTypeHints":true,"includeInlayFunctionParameterTypeHints":true,"includeInlayParameterNameHints":"all","includeInlayParameterNameHintsWhenArgumentMatchesName":true,"includeInlayPropertyDeclarationTypeHints":true,"includeInlayVariableTypeHints":true}}},"processId":66094,"rootPath":"/Users/local/git/arbeit/repo","rootUri":"file:///Users/local/git/arbeit/repo","workspaceFolders":[{"name":"repo","uri":"file:///Users/local/git/arbeit/repo"}]},"id":0}
2024-01-29T15:26:40.322 helix_lsp::transport [INFO] typescript-language-server <- {"jsonrpc":"2.0","method":"window/logMessage","params":{"type":3,"message":"Using Typescript version (bundled) 5.3.3 from path \"/Users/local/.volta/tools/image/packages/typescript/lib/node_modules/typescript/lib/tsserver.js\""}}
2024-01-29T15:26:40.323 helix_lsp::transport [INFO] typescript-language-server <- {"jsonrpc":"2.0","id":0,"result":{"capabilities":{"textDocumentSync":2,"completionProvider":{"triggerCharacters":[".","\"","'","/","@","<"],"resolveProvider":true},"codeActionProvider":{"codeActionKinds":["source.fixAll.ts","source.removeUnused.ts","source.addMissingImports.ts","source.organizeImports.ts","source.removeUnusedImports.ts","source.sortImports.ts","quickfix","refactor"]},"codeLensProvider":{"resolveProvider":true},"definitionProvider":true,"documentFormattingProvider":true,"documentRangeFormattingProvider":true,"documentHighlightProvider":true,"documentSymbolProvider":true,"executeCommandProvider":{"commands":["_typescript.applyWorkspaceEdit","_typescript.applyCodeAction","_typescript.applyRefactoring","_typescript.configurePlugin","_typescript.organizeImports","_typescript.applyRenameFile","_typescript.goToSourceDefinition"]},"hoverProvider":true,"inlayHintProvider":true,"linkedEditingRangeProvider":false,"renameProvider":{"prepareProvider":true},"referencesProvider":true,"selectionRangeProvider":true,"signatureHelpProvider":{"triggerCharacters":["(",",","<"],"retriggerCharacters":[")"]},"workspaceSymbolProvider":true,"implementationProvider":true,"typeDefinitionProvider":true,"foldingRangeProvider":true,"semanticTokensProvider":{"documentSelector":null,"legend":{"tokenTypes":["class","enum","interface","namespace","typeParameter","type","parameter","variable","enumMember","property","function","member"],"tokenModifiers":["declaration","static","async","readonly","defaultLibrary","local"]},"full":true,"range":true},"workspace":{"fileOperations":{"willRename":{"filters":[{"scheme":"file","pattern":{"glob":"**/*.{ts,js,jsx,tsx,mjs,mts,cjs,cts}","matches":"file"}},{"scheme":"file","pattern":{"glob":"**","matches":"folder"}}]}}}}}}
2024-01-29T15:26:40.323 helix_lsp::transport [INFO] typescript-language-server <- {"capabilities":{"codeActionProvider":{"codeActionKinds":["source.fixAll.ts","source.removeUnused.ts","source.addMissingImports.ts","source.organizeImports.ts","source.removeUnusedImports.ts","source.sortImports.ts","quickfix","refactor"]},"codeLensProvider":{"resolveProvider":true},"completionProvider":{"resolveProvider":true,"triggerCharacters":[".","\"","'","/","@","<"]},"definitionProvider":true,"documentFormattingProvider":true,"documentHighlightProvider":true,"documentRangeFormattingProvider":true,"documentSymbolProvider":true,"executeCommandProvider":{"commands":["_typescript.applyWorkspaceEdit","_typescript.applyCodeAction","_typescript.applyRefactoring","_typescript.configurePlugin","_typescript.organizeImports","_typescript.applyRenameFile","_typescript.goToSourceDefinition"]},"foldingRangeProvider":true,"hoverProvider":true,"implementationProvider":true,"inlayHintProvider":true,"linkedEditingRangeProvider":false,"referencesProvider":true,"renameProvider":{"prepareProvider":true},"selectionRangeProvider":true,"semanticTokensProvider":{"documentSelector":null,"full":true,"legend":{"tokenModifiers":["declaration","static","async","readonly","defaultLibrary","local"],"tokenTypes":["class","enum","interface","namespace","typeParameter","type","parameter","variable","enumMember","property","function","member"]},"range":true},"signatureHelpProvider":{"retriggerCharacters":[")"],"triggerCharacters":["(",",","<"]},"textDocumentSync":2,"typeDefinitionProvider":true,"workspace":{"fileOperations":{"willRename":{"filters":[{"pattern":{"glob":"**/*.{ts,js,jsx,tsx,mjs,mts,cjs,cts}","matches":"file"},"scheme":"file"},{"pattern":{"glob":"**","matches":"folder"},"scheme":"file"}]}}},"workspaceSymbolProvider":true}}
2024-01-29T15:26:40.323 helix_term::application [INFO] window/logMessage: LogMessageParams { typ: Info, message: "Using Typescript version (bundled) 5.3.3 from path \"/Users/local/.volta/tools/image/packages/typescript/lib/node_modules/typescript/lib/tsserver.js\"" }
2024-01-29T15:26:40.323 helix_lsp::transport [INFO] typescript-language-server -> {"jsonrpc":"2.0","method":"initialized","params":{}}
2024-01-29T15:26:40.323 helix_lsp::transport [INFO] typescript-language-server -> {"jsonrpc":"2.0","method":"workspace/didChangeConfiguration","params":{"settings":{"hostInfo":"helix","javascript":{"inlayHints":{"includeInlayEnumMemberValueHints":true,"includeInlayFunctionLikeReturnTypeHints":true,"includeInlayFunctionParameterTypeHints":true,"includeInlayParameterNameHints":"all","includeInlayParameterNameHintsWhenArgumentMatchesName":true,"includeInlayPropertyDeclarationTypeHints":true,"includeInlayVariableTypeHints":true}},"typescript":{"inlayHints":{"includeInlayEnumMemberValueHints":true,"includeInlayFunctionLikeReturnTypeHints":true,"includeInlayFunctionParameterTypeHints":true,"includeInlayParameterNameHints":"all","includeInlayParameterNameHintsWhenArgumentMatchesName":true,"includeInlayPropertyDeclarationTypeHints":true,"includeInlayVariableTypeHints":true}}}}}
2024-01-29T15:26:40.323 helix_lsp::transport [INFO] typescript-language-server -> {"jsonrpc":"2.0","method":"textDocument/didOpen","params":{"textDocument":{"languageId":"typescriptreact","text":"import React, { CSSProperties, useEffect, useMemo, useState } from 'react';\n\nimport { ViewState } from '@devexpress/dx-react-scheduler';\nimport {\n  Appointments,\n  MonthView as MonthViewScheduler,\n  Scheduler,\n} from '@devexpress/dx-react-scheduler-material-ui';\nimport { useQuery } from '@tanstack/react-query';\nimport {\n  differenceInCalendarMonths,\n  format,\n  getDate,\n  getDaysInMonth,\n  getMonth,\n  getYear,\n  setDate as setDateOfMonth,\n  setMonth,\n  setYear,\n} from 'date-fns';\nimport { utcToZonedTime } from 'date-fns-tz';\nimport differenceInDays from 'date-fns/differenceInDays';\nimport isSameDay from 'date-fns/isSameDay';\nimport { de } from 'date-fns/locale';\nimport { first, last, range, take } from 'lodash';\nimport { ChartWidgetLine, fObisCode, useTable } from 'ui';\n\nimport NavigateNextIcon from '@mui/icons-material/NavigateNext';\nimport PlayArrowIcon from '@mui/icons-material/PlayArrow';\nimport {\n  Breadcrumbs,\n  Button,\n  ButtonGroup,\n  Card,\n  FormControl,\n  FormControlLabel,\n  Grid,\n  IconButton,\n  InputLabel,\n  Link,\n  MenuItem,\n  Popover,\n  Radio,\n  RadioGroup,\n  Select,\n  Stack,\n  TableCell,\n  TableRowProps,\n  TextField,\n  Theme,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\n\nimport { TMeasurement } from 'ui/@types/measurement';\nimport CheckmarksSelect from 'ui/components/checkmarks-select';\nimport Iconify from 'ui/components/iconify';\nimport SmartTableContainer from 'ui/components/smart-table-container';\nimport SmartTablePagination from 'ui/components/smart-table-pagination';\nimport SmartTableRow from 'ui/components/smart-table-row';\nimport { DateRange } from 'ui/utils/types';\n\nimport { TLocationIds } from '../energy-data/types';\nimport { Resolution, getMeter, getReadings } from './queries';\nimport { DataStep, TimePeriod, VisualisationMode } from './types';\nimport { unitToText, valueQualityToText } from './utils';\n\ntype Props = {\n  measurementLocationId?: TLocationIds;\n};\n\nexport default function EnergyData({ measurementLocationId }: Props) {\n  const [selectedObisCodes, setSelectedObisCodes] = useState<string[]>([]);\n  const [selectedTimePeriod, setSelectedTimePeriod] = useState<TimePeriod>(TimePeriod.Yearly);\n  const currentDate = useMemo(() => new Date(), []);\n  const [date] = useState<Date>(currentDate);\n  const [rangeStartDate, setRangeStartDate] = useState<Date>(currentDate);\n  const rangeStartYear = getYear(rangeStartDate);\n  const rangeStartMonth = getMonth(rangeStartDate) + 1;\n  const rangeStartDay = getDate(rangeStartDate);\n  const [rangeEndDate, setRangeEndDate] = useState<Date>(currentDate);\n  const rangeEndYear = getYear(rangeEndDate);\n  const rangeEndMonth = getMonth(rangeEndDate) + 1;\n  const rangeEndDay = getDate(rangeEndDate);\n  const [dataStep, setDataStep] = useState<DataStep>(DataStep.OneDay);\n  const [visualisationMode, setVisualisationMode] = useState<VisualisationMode>(\n    VisualisationMode.Calendar\n  );\n  const [calendarDateRange, setCalendarDateRange] = useState<DateRange>();\n\n  useEffect(() => {\n    if (visualisationMode === VisualisationMode.Calendar) {\n      setSelectedTimePeriod(TimePeriod.Yearly);\n\n      setCalendarDateRange({\n        ...calendarDateRange,\n        from: setYear(currentDate, getYear(currentDate) - 3),\n        to: setYear(currentDate, getYear(currentDate) + 3),\n      });\n    }\n  }, [calendarDateRange, currentDate, visualisationMode]);\n\n  const [showMode, setShowMode] = useState<'all' | 'range'>('all');\n  const showAll = showMode === 'all';\n  const [showChart, setShowChart] = useState(false);\n\n  function handleVisualisationModeChange(\n    _: React.MouseEvent,\n    newVisualisationMode: VisualisationMode\n  ) {\n    setVisualisationMode(newVisualisationMode);\n  }\n\n  const { data: meterDataArray } = useQuery({\n    queryKey: ['meter'],\n    queryFn: () => getMeter(measurementLocationId ?? ''),\n  });\n\n  const [selectedSerialNumbers, setSelectedSerialNumbers] = useState<string[]>([]);\n  const selectedSerialNumber = useMemo(() => first(selectedSerialNumbers), [selectedSerialNumbers]);\n\n  const currentSerialNumber = useMemo(() => first(selectedSerialNumbers), [selectedSerialNumbers]);\n  const meterData = useMemo(\n    () => meterDataArray?.filter((x) => x.serialNumber === currentSerialNumber)?.[0],\n    [meterDataArray, currentSerialNumber]\n  );\n\n  const obisCodes = useMemo(() => meterData?.obisCodes?.map(fObisCode) ?? [], [meterData]);\n\n  useEffect(() => {\n    setSelectedObisCodes(take(obisCodes, 1));\n    setSelectedSerialNumbers(take(meterDataArray, 1).map((x) => x.serialNumber) ?? []);\n  }, [meterDataArray, obisCodes]);\n\n  const timeZone = 'Europe/Berlin';\n  const zonedBeginDate = showAll\n    ? setYear(utcToZonedTime(rangeStartDate, timeZone), getYear(currentDate) - 6)\n    : utcToZonedTime(rangeStartDate, timeZone);\n  const visualisationBeginDate = format(zonedBeginDate, 'yyyy-MM-dd');\n  const zonedEndDate = showAll\n    ? utcToZonedTime(currentDate, timeZone)\n    : utcToZonedTime(rangeEndDate, timeZone);\n  const visualisationEndDate = format(zonedEndDate, 'yyyy-MM-dd');\n  const beginDate =\n    visualisationMode === VisualisationMode.Calendar\n      ? format(calendarDateRange?.from ?? new Date(), 'yyyy-MM-dd')\n      : visualisationBeginDate;\n  const endDate =\n    visualisationMode === VisualisationMode.Calendar\n      ? format(calendarDateRange?.to ?? new Date(), 'yyyy-MM-dd')\n      : visualisationEndDate;\n\n  const {\n    data: readingData,\n    isFetching,\n    isLoading,\n  } = useQuery({\n    queryKey: [\n      'reading',\n      meterData?.serialNumber,\n      measurementLocationId,\n      selectedObisCodes,\n      dataStep,\n      rangeStartDate,\n      rangeEndDate,\n    ],\n    queryFn: () =>\n      getReadings(measurementLocationId ?? '', meterData?.serialNumber ?? '', {\n        beginDate,\n        endDate,\n        obisCodes: selectedObisCodes.join(','),\n        RESOLUTION: dataStepToResolution(dataStep),\n      }),\n  });\n\n  const isNotFound = readingData?.length === 0;\n  const isSameDaySelected = isSameDay(rangeStartDate, rangeEndDate);\n  const isWithinAMonth = differenceInDays(rangeEndDate, rangeStartDate) <= 30;\n  const isWithinAYear = differenceInCalendarMonths(rangeEndDate, rangeStartDate) <= 12;\n  //\n  const isThreeMinutesButtonEnabled = !showAll && isSameDaySelected;\n  const isFifteenMinutesButtonEnabled = !showAll && (isSameDaySelected || isWithinAMonth);\n  const isOneHourButtonEnabled = !showAll && (isSameDaySelected || isWithinAMonth || isWithinAYear);\n  const isOneDayButtonEnabled = !showAll && (isSameDaySelected || isWithinAMonth || isWithinAYear);\n  const isOneWeekButtonEnabled = !showAll && (isSameDaySelected || isWithinAMonth || isWithinAYear);\n  const isOneMonthButtonEnabled =\n    !showAll && (isSameDaySelected || isWithinAMonth || isWithinAYear);\n  const isOneYearButtonEnabled = showAll || (!showAll && !isWithinAYear);\n\n  useEffect(() => {\n    const stepOrder = [\n      { step: DataStep.ThreeMinutes, enabled: isThreeMinutesButtonEnabled },\n      { step: DataStep.FifteenMinutes, enabled: isFifteenMinutesButtonEnabled },\n      { step: DataStep.OneHour, enabled: isOneHourButtonEnabled },\n      { step: DataStep.OneDay, enabled: isOneDayButtonEnabled },\n      { step: DataStep.OneWeek, enabled: isOneWeekButtonEnabled },\n      { step: DataStep.OneMonth, enabled: isOneMonthButtonEnabled },\n      { step: DataStep.OneYear, enabled: isOneYearButtonEnabled },\n    ];\n\n    const currentStepIndex = stepOrder.findIndex((s) => s.step === dataStep);\n\n    if (currentStepIndex !== -1 && !stepOrder[currentStepIndex].enabled) {\n      const nextStep = stepOrder.slice(currentStepIndex + 1).find((s) => s.enabled);\n\n      if (nextStep) {\n        setDataStep(nextStep.step);\n      }\n    }\n  }, [\n    isThreeMinutesButtonEnabled,\n    isFifteenMinutesButtonEnabled,\n    isOneHourButtonEnabled,\n    isOneDayButtonEnabled,\n    isOneWeekButtonEnabled,\n    isOneMonthButtonEnabled,\n    isOneYearButtonEnabled,\n    dataStep,\n  ]);\n\n  useEffect(() => {\n    if (showMode === 'all' && dataStep !== DataStep.OneYear) {\n      setDataStep(DataStep.OneYear);\n    }\n\n    if (showMode === 'range' && dataStep === DataStep.OneYear) {\n      setDataStep(DataStep.OneDay);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showMode]);\n\n  return (\n    <Stack direction=\"column\" spacing={3}>\n      <Card sx={{ p: 3 }}>\n        <Stack direction=\"row\" spacing={3} justifyContent=\"space-between\">\n          <Stack direction=\"row\" spacing={3} justifySelf=\"flex-start\">\n            <TextField\n              select\n              label=\"Serialnummer\"\n              sx={{ width: '200px' }}\n              value={selectedSerialNumber ?? 'Ohne'}\n              onChange={(event) => {\n                const newValue = event.target.value;\n\n                setSelectedObisCodes([]);\n                setSelectedSerialNumbers([newValue]);\n              }}\n            >\n              <MenuItem value=\"Ohne\">Ohne</MenuItem>\n              {meterDataArray?.map((x) => (\n                <MenuItem key={x.serialNumber} value={x.serialNumber}>\n                  {x.serialNumber}\n                </MenuItem>\n              ))}\n            </TextField>\n            <CheckmarksSelect\n              options={obisCodes}\n              sx={{ width: '200px' }}\n              selectedOptions={selectedObisCodes}\n              setSelectedOptions={setSelectedObisCodes}\n            />\n          </Stack>\n          <IconButton size=\"small\">\n            <Iconify\n              icon=\"eva:download-fill\"\n              style={{\n                transform: 'translateY(-1.5px)',\n                cursor: 'pointer',\n              }}\n            />\n          </IconButton>\n        </Stack>\n      </Card>\n      <ToggleButtonGroup\n        color=\"primary\"\n        value={visualisationMode}\n        exclusive\n        onChange={handleVisualisationModeChange}\n        aria-label=\"Visualisation mode\"\n        sx={{ width: '210px' }}\n      >\n        <ToggleButton value=\"calendar\" sx={{ minWidth: '85px' }}>\n          Calendar\n        </ToggleButton>\n        <ToggleButton value=\"visualisation\" sx={{ minWidth: '85px' }}>\n          Visualisierung\n        </ToggleButton>\n      </ToggleButtonGroup>\n      {visualisationMode === VisualisationMode.Visualisation && readingData && (\n        <>\n          <FormControl>\n            <RadioGroup\n              row\n              name=\"row-radio-buttons-group\"\n              value={showMode}\n              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>\n                setShowMode((event.target as HTMLInputElement).value as 'all' | 'range')\n              }\n            >\n              <FormControlLabel value=\"all\" control={<Radio />} label=\"Alle\" />\n              <FormControlLabel\n                value=\"range\"\n                control={<Radio />}\n                label=\"Bereich\"\n                sx={{ marginLeft: '32px' }}\n              />\n            </RadioGroup>\n            <Stack direction=\"row\" sx={{ width: '100%' }}>\n              <Stack direction=\"row\" spacing={1} sx={{ paddingTop: '16px', width: '100%' }}>\n                <FormControl fullWidth>\n                  <InputLabel id=\"year-select-label\">Jahr</InputLabel>\n                  <Select\n                    disabled={showAll}\n                    value={rangeStartYear}\n                    onChange={(event) => {\n                      const newYear = event.target.value as number;\n\n                      setRangeStartDate(setYear(rangeStartDate, newYear));\n                    }}\n                    labelId=\"year-select-label\"\n                    id=\"year-select\"\n                    label=\"Jahr\"\n                    MenuProps={{\n                      PaperProps: {\n                        sx: { px: 1, maxHeight: 280 },\n                      },\n                    }}\n                  >\n                    {range(1990, getYear(new Date()) + 3).map((x) => (\n                      <MenuItem key={x} value={x}>\n                        {x}\n                      </MenuItem>\n                    ))}\n                  </Select>\n                </FormControl>\n                <FormControl fullWidth>\n                  <InputLabel id=\"month-select-label\">Monat</InputLabel>\n                  <Select\n                    disabled={showAll}\n                    value={rangeStartMonth}\n                    onChange={(event) => {\n                      const newMonth = event.target.value as number;\n\n                      setRangeStartDate(setMonth(rangeStartDate, newMonth - 1));\n                    }}\n                    label=\"Monat\"\n                    labelId=\"month-select-label\"\n                    id=\"month-select\"\n                    MenuProps={{\n                      PaperProps: {\n                        sx: { px: 1, maxHeight: 280 },\n                      },\n                    }}\n                  >\n                    {range(1, 13).map((x) => (\n                      <MenuItem key={x} value={x}>\n                        {x}\n                      </MenuItem>\n                    ))}\n                  </Select>\n                </FormControl>\n                <FormControl fullWidth>\n                  <InputLabel id=\"day-select-label\">Tag</InputLabel>\n                  <Select\n                    disabled={showAll}\n                    value={rangeStartDay}\n                    onChange={(event) => {\n                      const newDay = event.target.value as number;\n\n                      setRangeStartDate(setDateOfMonth(rangeStartDate, newDay));\n                    }}\n                    label=\"Tag\"\n                    labelId=\"day-select-label\"\n                    id=\"day-select\"\n                    MenuProps={{\n                      PaperProps: {\n                        sx: { px: 1, maxHeight: 280 },\n                      },\n                    }}\n                  >\n                    {range(1, getDaysInMonth(date) + 1).map((x) => (\n                      <MenuItem key={x} value={x}>\n                        {x}\n                      </MenuItem>\n                    ))}\n                  </Select>\n                </FormControl>\n              </Stack>\n              <span\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  paddingTop: '12px',\n                  paddingLeft: '8px',\n                  paddingRight: '8px',\n                }}\n              >\n                —\n              </span>\n              <Stack direction=\"row\" spacing={1} sx={{ paddingTop: '16px', width: '100%' }}>\n                <FormControl fullWidth>\n                  <InputLabel id=\"year-select-label\">Jahr</InputLabel>\n                  <Select\n                    disabled={showAll}\n                    value={rangeEndYear}\n                    onChange={(event) => {\n                      const newYear = event.target.value as number;\n\n                      setRangeEndDate(setYear(rangeEndDate, newYear));\n                    }}\n                    labelId=\"year-select-label\"\n                    id=\"year-select\"\n                    label=\"Jahr\"\n                    MenuProps={{\n                      PaperProps: {\n                        sx: { px: 1, maxHeight: 280 },\n                      },\n                    }}\n                  >\n                    {range(1990, getYear(new Date()) + 3).map((x) => (\n                      <MenuItem key={x} value={x}>\n                        {x}\n                      </MenuItem>\n                    ))}\n                  </Select>\n                </FormControl>\n                <FormControl fullWidth>\n                  <InputLabel id=\"month-select-label\">Monat</InputLabel>\n                  <Select\n                    disabled={showAll}\n                    value={rangeEndMonth}\n                    onChange={(event) => {\n                      const newMonth = event.target.value as number;\n\n                      setRangeEndDate(setMonth(rangeEndDate, newMonth - 1));\n                    }}\n                    label=\"Monat\"\n                    labelId=\"month-select-label\"\n                    id=\"month-select\"\n                    MenuProps={{\n                      PaperProps: {\n                        sx: { px: 1, maxHeight: 280 },\n                      },\n                    }}\n                  >\n                    {range(1, 13).map((x) => (\n                      <MenuItem key={x} value={x}>\n                        {x}\n                      </MenuItem>\n                    ))}\n                  </Select>\n                </FormControl>\n                <FormControl fullWidth>\n                  <InputLabel id=\"day-select-label\">Tag</InputLabel>\n                  <Select\n                    disabled={showAll}\n                    value={rangeEndDay}\n                    onChange={(event) => {\n                      const newDay = event.target.value as number;\n\n                      setRangeEndDate(setDateOfMonth(rangeEndDate, newDay));\n                    }}\n                    label=\"Tag\"\n                    labelId=\"day-select-label\"\n                    id=\"day-select\"\n                    MenuProps={{\n                      PaperProps: {\n                        sx: { px: 1, maxHeight: 280 },\n                      },\n                    }}\n                  >\n                    {range(1, getDaysInMonth(date) + 1).map((x) => (\n                      <MenuItem key={x} value={x}>\n                        {x}\n                      </MenuItem>\n                    ))}\n                  </Select>\n                </FormControl>\n              </Stack>\n            </Stack>\n          </FormControl>\n          <ButtonGroup variant=\"outlined\" aria-label=\"outlined button group\">\n            <Button\n              variant={dataStep === DataStep.ThreeMinutes ? 'contained' : 'outlined'}\n              onClick={() => setDataStep(DataStep.ThreeMinutes)}\n              disabled={!isThreeMinutesButtonEnabled}\n            >\n              3m\n            </Button>\n            <Button\n              variant={dataStep === DataStep.FifteenMinutes ? 'contained' : 'outlined'}\n              onClick={() => setDataStep(DataStep.FifteenMinutes)}\n              disabled={!isFifteenMinutesButtonEnabled}\n            >\n              15m\n            </Button>\n            <Button\n              variant={dataStep === DataStep.OneHour ? 'contained' : undefined}\n              onClick={() => setDataStep(DataStep.OneHour)}\n              disabled={!isOneHourButtonEnabled}\n            >\n              1h\n            </Button>\n            <Button\n              variant={dataStep === DataStep.OneDay ? 'contained' : undefined}\n              onClick={() => setDataStep(DataStep.OneDay)}\n              disabled={!isOneDayButtonEnabled}\n            >\n              1d\n            </Button>\n            <Button\n              variant={dataStep === DataStep.OneWeek ? 'contained' : undefined}\n              onClick={() => setDataStep(DataStep.OneWeek)}\n              disabled={!isOneWeekButtonEnabled}\n            >\n              1w\n            </Button>\n            <Button\n              variant={dataStep === DataStep.OneMonth ? 'contained' : undefined}\n              onClick={() => setDataStep(DataStep.OneMonth)}\n              disabled={!isOneMonthButtonEnabled}\n            >\n              1m\n            </Button>\n            <Button\n              variant={dataStep === DataStep.OneYear ? 'contained' : undefined}\n              onClick={() => setDataStep(DataStep.OneYear)}\n              disabled={!isOneYearButtonEnabled}\n            >\n              1y\n            </Button>\n          </ButtonGroup>\n          <Button variant=\"contained\" onClick={() => setShowChart(!showChart)}>\n            Chart\n          </Button>\n        </>\n      )}\n      {visualisationMode === VisualisationMode.Visualisation &&\n        selectedTimePeriod === TimePeriod.Yearly &&\n        readingData && (\n          <VisualisationTable\n            data={readingData ?? []}\n            isNotFound={isNotFound}\n            isFetching={isFetching}\n            isLoading={isLoading}\n          />\n        )}\n    </Stack>\n  );\n}\n\n// For some reason eslint cannot detect that these props are used\ntype VisualisationTableProps = {\n  data: TMeasurement[];\n  isNotFound: boolean;\n  isFetching: boolean;\n  isLoading: boolean;\n};\n\nconst ENERGY_TABLE_ID = 'energy-data-table';\nconst ENERGY_TABLE_HEAD = [\n  { id: 'timestamp', label: 'Timestamp' },\n  { id: 'consumption', label: 'Konsum' },\n  { id: 'status', label: 'Status' },\n];\n\nfunction VisualisationTable({ data, isFetching, isLoading, isNotFound }: VisualisationTableProps) {\n  const {\n    dense,\n    page,\n    order,\n    orderBy,\n    rowsPerPage,\n    //\n    onSort,\n    onChangeDense,\n    onChangePage,\n    onChangeRowsPerPage,\n  } = useTable({ defaultOrderBy: 'timestepm' });\n\n  return (\n    <Card>\n      <SmartTableContainer\n        id={ENERGY_TABLE_ID}\n        data={data}\n        tableHead={ENERGY_TABLE_HEAD}\n        sx={{ position: 'relative', overflow: 'unset' }}\n        renderItem={(row: TMeasurement) => <VisualisationTableRow key={row.endDate} row={row} />}\n        isNotFound={isNotFound}\n        isFetching={isFetching}\n        isLoading={isLoading}\n        order={order}\n        orderBy={orderBy}\n        onSort={onSort}\n        tableProps={{ size: dense ? 'small' : 'medium' }}\n      />\n      <SmartTablePagination\n        tableId={ENERGY_TABLE_ID}\n        count={data?.length}\n        page={page}\n        rowsPerPage={rowsPerPage}\n        onPageChange={onChangePage}\n        onRowsPerPageChange={onChangeRowsPerPage}\n        //\n        dense={dense}\n        onChangeDense={onChangeDense}\n      />\n    </Card>\n  );\n}\n\ntype VisualisationTableRowProps = TableRowProps & {\n  row: TMeasurement;\n};\n\nfunction VisualisationTableRow({ row, ...other }: VisualisationTableRowProps) {\n  const endDateLabel = format(new Date(row.endDate), 'dd.MM.yy HH:mm', { locale: de });\n\n  return (\n    <SmartTableRow\n      hover\n      sx={{ '&:hover': { cursor: 'pointer' }, '& > *': { borderBottom: 'unset' } }}\n      {...other}\n    >\n      <TableCell>\n        <Typography variant=\"inherit\">{endDateLabel}</Typography>\n      </TableCell>\n      <TableCell>\n        <Typography variant=\"inherit\">\n          {row.value} {row?.unit && unitToText(row.unit)}\n        </Typography>\n      </TableCell>\n      <TableCell>\n        <Typography variant=\"inherit\">{valueQualityToText(row.quality)}</Typography>\n      </TableCell>\n    </SmartTableRow>\n  );\n}\n\n// For some reason eslint cannot detect that these props are used\ntype YearTableProps = {\n  data: EnergyRequestResult;\n  // eslint-disable-next-line react/no-unused-prop-types\n  isNotFound: boolean;\n  // eslint-disable-next-line react/no-unused-prop-types\n  isFetching: boolean;\n  // eslint-disable-next-line react/no-unused-prop-types\n  isLoading: boolean;\n};\n\nconst MONTH_ENERGY_TABLE_HEAD = [\n  { id: 'timestamp', label: 'Timestamp' },\n  { id: 'consumption', label: 'Konsum' },\n];\n\ntype CalendarProps = {\n  timePeriod: TimePeriod;\n  setTimePeriod: (timePeriod: TimePeriod) => void;\n  date: Date;\n  setDate: (date: Date) => void;\n  data: (TMeasurement | undefined)[];\n};\n\nfunction Calendar({ date, data, setDate, timePeriod, setTimePeriod }: CalendarProps) {\n  const year = getYear(date);\n  const month = getMonth(date) + 1;\n  const yearData = timePeriod === TimePeriod.Yearly ? range(year - 3, year + 3) : undefined;\n  const monthData = yearData?.months.find((x) => x.month === month);\n  const paddedMonth = month + 1 < 10 ? `0${month}` : month;\n  const appointments = monthData?.days.map((x) => {\n    const paddedDay = x.day < 10 ? `0${x.day}` : x.day;\n\n    return {\n      startDate: `${year}-${paddedMonth}-${paddedDay}T00:00`,\n      endDate: `${year}-${paddedMonth}-${paddedDay}T23:59`,\n      title: `${x.consumption} kwh`,\n    };\n  });\n  const breadcrumbs = [\n    timePeriod === TimePeriod.Yearly ? (\n      <Typography color=\"text.primary\" key={1} sx={{ paddingLeft: '5px' }}>\n        Alle\n      </Typography>\n    ) : (\n      <Link\n        color=\"inherit\"\n        underline=\"hover\"\n        key={1}\n        onClick={() => {\n          setTimePeriod(TimePeriod.Yearly);\n        }}\n      >\n        Alle\n      </Link>\n    ),\n    timePeriod === TimePeriod.Monthly ? (\n      <Typography\n        color=\"text.primary\"\n        key={2}\n        onClick={() => {\n          setTimePeriod(TimePeriod.Monthly);\n        }}\n      >\n        {year}\n      </Typography>\n    ) : null,\n    timePeriod === TimePeriod.Daily ? (\n      <Link\n        color=\"inherit\"\n        underline=\"hover\"\n        key={2}\n        onClick={() => {\n          setTimePeriod(TimePeriod.Monthly);\n        }}\n      >\n        {year}\n      </Link>\n    ) : null,\n    timePeriod === TimePeriod.Daily ? (\n      <Typography color=\"text.primary\" key={3}>\n        {format(date, 'MMMM', { locale: de })}\n      </Typography>\n    ) : null,\n  ];\n\n  return (\n    <>\n      <Breadcrumbs separator={<NavigateNextIcon fontSize=\"small\" />} aria-label=\"breadcrumb\">\n        {breadcrumbs}\n      </Breadcrumbs>\n      <Scheduler data={appointments}>\n        <ViewState currentDate={date} />\n        {data && (\n          <TimePeriodView\n            timePeriod={timePeriod}\n            setTimePeriod={setTimePeriod}\n            date={date}\n            setDate={setDate}\n            data={data}\n          />\n        )}\n        <Appointments />\n      </Scheduler>\n      <Stack\n        direction=\"row\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        sx={{ transform: 'translateY(-32px)' }}\n      >\n        <IconButton onClick={() => setDate(setYear(date, year - 6))}>\n          <PlayArrowIcon sx={{ transform: 'scale(1.8) scaleX(-1)' }} />\n        </IconButton>\n        <IconButton onClick={() => setDate(setYear(date, year + 6))}>\n          <PlayArrowIcon sx={{ transform: 'scale(1.8)' }} />\n        </IconButton>\n      </Stack>\n    </>\n  );\n}\n\ntype TimePeriodViewProps = {\n  timePeriod: TimePeriod;\n  setTimePeriod: (timePeriod: TimePeriod) => void;\n  date: Date;\n  setDate: (date: Date) => void;\n  data: EnergyRequestResult;\n};\n\nfunction TimePeriodView({ timePeriod, date, setDate, data, setTimePeriod }: TimePeriodViewProps) {\n  const accentColor = useTheme().palette.primary.main;\n\n  switch (timePeriod) {\n    case TimePeriod.Yearly:\n      return data ? (\n        <YearCalendarView\n          date={date}\n          setDate={setDate}\n          energyData={data}\n          setTimePeriod={setTimePeriod}\n        />\n      ) : null;\n    case TimePeriod.Monthly:\n      return data ? (\n        <MonthCalendarView\n          date={date}\n          setDate={setDate}\n          energyData={data}\n          setTimePeriod={setTimePeriod}\n        />\n      ) : null;\n    case TimePeriod.Daily:\n      return (\n        <>\n          <MonthViewScheduler />\n          <style>{`\n            .Appointment-appointment {\n              background-color: ${accentColor} !important;\n            }\n          `}</style>\n        </>\n      );\n    default:\n      return null;\n  }\n}\n\ntype YearCalendarViewProps = {\n  date: Date;\n  setDate: (date: Date) => void;\n  energyData: EnergyRequestResult;\n  setTimePeriod: (timePeriod: TimePeriod) => void;\n};\n\nfunction YearCalendarView({ date, setDate, energyData, setTimePeriod }: YearCalendarViewProps) {\n  const year = getYear(date);\n  const theme = useTheme();\n  const borderColor = theme.palette.mode === 'dark' ? theme.palette.background.default : '#dcdfe3';\n  const itemStyle: CSSProperties = {\n    outline: `0.5px solid ${borderColor}`,\n  };\n\n  return (\n    <Card>\n      <Grid container>\n        {range(year - 3, year + 3).map((x) => (\n          <YearCalendarItem\n            year={x}\n            itemStyle={itemStyle}\n            key={x}\n            energyData={energyData}\n            accentColor={theme.palette.primary.main}\n            theme={theme}\n            date={date}\n            setDate={setDate}\n            setTimePeriod={setTimePeriod}\n          />\n        ))}\n      </Grid>\n    </Card>\n  );\n}\n\ntype YearCalendarItemProps = {\n  year: number;\n  itemStyle: CSSProperties;\n  energyData: EnergyRequestResult;\n  accentColor: string;\n  theme: Theme;\n  date: Date;\n  setDate: (date: Date) => void;\n  setTimePeriod: (timePeriod: TimePeriod) => void;\n};\n\nfunction YearCalendarItem({\n  year,\n  date,\n  setDate,\n  itemStyle,\n  energyData,\n  accentColor,\n  theme,\n  setTimePeriod,\n}: YearCalendarItemProps) {\n  const yearData = energyData.years.find((x) => x.year === year);\n  const consumption =\n    yearData?.months.reduce((acc, curr) => {\n      return acc + curr.days.reduce((acc2, curr2) => acc2 + curr2.consumption, 0);\n    }, 0) ?? 0;\n  const consumptionStyle = getConsumptionStyle();\n  const amountOfDaysInYear =\n    yearData?.months.reduce((acc, curr) => {\n      return acc + curr.days.length;\n    }, 0) ?? 0;\n  const consumptionDayDelta = Math.round(consumption / amountOfDaysInYear);\n  const [firstConsumumption, lastConsumumption] = [\n    first(yearData?.months)?.days?.reduce((acc, curr) => acc + curr.consumption, 0),\n    last(yearData?.months)?.days?.reduce((acc, curr) => acc + curr.consumption, 0),\n  ];\n\n  function handleClick() {\n    setDate(setYear(date, year));\n    setTimePeriod(TimePeriod.Monthly);\n  }\n\n  return (\n    <Grid\n      item\n      xs={4}\n      style={gridItemStyle}\n      sx={itemStyle}\n      className=\"consumptionLabel\"\n      onClick={handleClick}\n    >\n      <Stack direction=\"column\">\n        <span style={{ fontSize: '18px', fontWeight: 'bold', color: theme.palette.text.secondary }}>\n          {year}\n        </span>\n        <Stack style={consumptionStyle}>\n          <div>{firstConsumumption ?? 0} kwh</div>\n          <span\n            style={{\n              border: `1px solid ${accentColor}`,\n              borderRadius: '4px',\n            }}\n          >\n            {consumptionDayDelta || !Number.isNaN(consumptionDayDelta) ? consumptionDayDelta : 0}{' '}\n            kwh\n          </span>\n          <div>{lastConsumumption ?? 0} kwh</div>\n        </Stack>\n      </Stack>\n      <style>{`\n        .consumptionLabel {\n          transition: background-color 0.35s ease-in-out;\n          cursor: pointer;\n        }\n\n        .consumptionLabel:hover {\n          background-color: ${hexToRGBA(theme.palette.background.default, 0.4)};\n        }\n      `}</style>\n    </Grid>\n  );\n}\n\nconst gridItemStyle: CSSProperties = {\n  textAlign: 'center',\n  height: '160px',\n  paddingTop: '12px',\n};\n\nfunction getConsumptionStyle(): CSSProperties {\n  return {\n    marginTop: '16px',\n    width: '40%',\n    marginLeft: '30%',\n  };\n}\n\ntype DayEnergy = {\n  consumption: number;\n  day: number;\n};\n\ntype MonthEnergy = {\n  month: number;\n  days: DayEnergy[];\n};\n\ntype YearEnergy = {\n  year: number;\n  months: MonthEnergy[];\n};\n\ntype EnergyRequestResult = {\n  years: YearEnergy[];\n  totalElements: number;\n};\n\ntype MonthCalendarViewProps = {\n  date: Date;\n  setDate: (date: Date) => void;\n  energyData: EnergyRequestResult;\n  setTimePeriod: (timePeriod: TimePeriod) => void;\n};\n\nfunction MonthCalendarView({ date, setDate, energyData, setTimePeriod }: MonthCalendarViewProps) {\n  const year = getYear(date);\n  const yearData = energyData.years.find((x) => x.year === year);\n  const theme = useTheme();\n  const borderColor = theme.palette.mode === 'dark' ? theme.palette.background.default : '#dcdfe3';\n  const itemStyle: CSSProperties = {\n    outline: `0.5px solid ${borderColor}`,\n  };\n\n  return (\n    <Card>\n      <Grid container position=\"relative\">\n        {range(0, 12).map((x) => (\n          <MonthCalendarItem\n            month={x}\n            itemStyle={itemStyle}\n            key={x}\n            energyData={yearData?.months?.[x]}\n            theme={theme}\n            date={date}\n            setDate={setDate}\n            setTimePeriod={setTimePeriod}\n          />\n        ))}\n      </Grid>\n    </Card>\n  );\n}\n\ntype MonthCalendarItemProps = {\n  month: number;\n  itemStyle: CSSProperties;\n  energyData: MonthEnergy | undefined;\n  theme: Theme;\n  date: Date;\n  setDate: (date: Date) => void;\n  setTimePeriod: (timePeriod: TimePeriod) => void;\n};\n\nfunction MonthCalendarItem({\n  month,\n  date,\n  setDate,\n  setTimePeriod,\n  theme,\n  itemStyle,\n  energyData,\n}: MonthCalendarItemProps) {\n  const consumption = energyData?.days.reduce((acc, curr) => acc + curr.consumption, 0) ?? 0;\n  const firstMonthDay = format(new Date(getYear(date), month, 1), 'dd MMM', { locale: de });\n  const lastMonthDay = format(new Date(getYear(date), month + 1, 0), 'dd MMM', { locale: de });\n  const [firstConsumumption, lastConsumumption] = [\n    first(energyData?.days)?.consumption,\n    last(energyData?.days)?.consumption,\n  ];\n  const isConsumptionHight = consumption >= 6000;\n  const consumptionLevelColor = isConsumptionHight ? '#ed5353' : '#b0f566';\n  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);\n  const handlePopoverClose = () => {\n    setAnchorEl(null);\n  };\n  const open = Boolean(anchorEl);\n\n  function handleClick() {\n    setDate(setMonth(date, month));\n    setTimePeriod(TimePeriod.Daily);\n  }\n\n  function handleEventsClick(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorEl(event.currentTarget);\n  }\n\n  return (\n    <Grid\n      item\n      xs={4}\n      style={gridItemStyle}\n      sx={itemStyle}\n      className=\"consumptionLabel\"\n      onClick={handleClick}\n      position=\"relative\"\n    >\n      <div\n        style={{\n          position: 'absolute',\n          width: '12px',\n          height: '12px',\n          backgroundColor: consumptionLevelColor,\n          borderRadius: '50%',\n          top: '12px',\n          right: '12px',\n        }}\n      />\n      <button\n        style={{\n          position: 'absolute',\n          width: '26px',\n          height: '26px',\n          backgroundColor: theme.palette.background.neutral,\n          borderRadius: '50%',\n          bottom: '13px',\n          right: '30px',\n          fontSize: '12px',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}\n        onMouseOver={handleEventsClick}\n        onMouseOut={handlePopoverClose}\n        onFocus={() => {}}\n        onBlur={handlePopoverClose}\n        type=\"button\"\n      >\n        +5\n      </button>\n      <Popover\n        id=\"mouse-over-popover\"\n        sx={{\n          pointerEvents: 'none',\n        }}\n        open={open}\n        anchorEl={anchorEl}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        onClose={handlePopoverClose}\n        disableRestoreFocus\n      >\n        <div\n          style={{\n            width: '160px',\n            height: '380px',\n            padding: '16px',\n          }}\n        >\n          25.05.2023 Machine estimation 27.05.2023 Read by Customer 25.05.2023 Read by utility\n          27.05.2023 Supplier change 27.05.2023 Supplier change 850kwh 860kwh 850kwh 860kwh 860kwh\n        </div>\n      </Popover>\n      <Stack\n        direction=\"column\"\n        justifyContent=\"space-between\"\n        sx={{ height: '100%', paddingBottom: '11px' }}\n      >\n        <span>\n          <span style={{ color: theme.palette.text.secondary }}>{firstMonthDay} 00:00</span>\n          <br />\n          <span style={{ fontSize: '20px' }}>{firstConsumumption ?? 0} kwh</span>\n        </span>\n\n        <span>\n          <span style={{ color: theme.palette.text.secondary }}>{lastMonthDay} 23:59</span>\n          <br />\n          <span style={{ fontSize: '20px' }}>{lastConsumumption ?? 0} kwh</span>\n        </span>\n      </Stack>\n      <style>{`\n        .consumptionLabel {\n          transition: background-color 0.35s ease-in-out;\n          cursor: pointer;\n        }\n\n        .consumptionLabel:hover {\n          background-color: ${hexToRGBA(theme.palette.background.default, 0.4)};\n        }\n      `}</style>\n    </Grid>\n  );\n}\n\nfunction hexToRGBA(hex: string, opacity: number) {\n  const r = parseInt(hex.slice(1, 3), 16);\n  const g = parseInt(hex.slice(3, 5), 16);\n  const b = parseInt(hex.slice(5, 7), 16);\n\n  return `rgba(${r}, ${g}, ${b}, ${opacity})`;\n}\n\ntype DayTableProps = YearTableProps & {\n  date: Date;\n};\n\nfunction DayTable({ date, data, isFetching, isLoading, isNotFound }: DayTableProps) {\n  const {\n    dense,\n    page,\n    order,\n    orderBy,\n    rowsPerPage,\n    //\n    onSort,\n    onChangeDense,\n    onChangePage,\n    onChangeRowsPerPage,\n  } = useTable({ defaultOrderBy: 'timestepm' });\n  const monthData = data.years.find((x) => x.year === getYear(date));\n  const dayData = monthData?.months.find((x) => x.month === getMonth(date) + 1);\n\n  return (\n    <Card>\n      <SmartTableContainer\n        id={ENERGY_TABLE_ID}\n        data={dayData?.days}\n        tableHead={MONTH_ENERGY_TABLE_HEAD}\n        sx={{ position: 'relative', overflow: 'unset' }}\n        renderItem={(row: DayEnergy) => <DayTableRow date={date} key={row.day} row={row} />}\n        isNotFound={isNotFound}\n        isFetching={isFetching}\n        isLoading={isLoading}\n        order={order}\n        orderBy={orderBy}\n        onSort={onSort}\n        tableProps={{ size: dense ? 'small' : 'medium' }}\n      />\n      <SmartTablePagination\n        tableId={ENERGY_TABLE_ID}\n        count={data?.totalElements ?? 0}\n        page={page}\n        rowsPerPage={rowsPerPage}\n        onPageChange={onChangePage}\n        onRowsPerPageChange={onChangeRowsPerPage}\n        //\n        dense={dense}\n        onChangeDense={onChangeDense}\n      />\n    </Card>\n  );\n}\n\ntype DayTableRowProps = TableRowProps & {\n  row: DayEnergy;\n  date: Date;\n};\n\nfunction DayTableRow({ row, date, ...other }: DayTableRowProps) {\n  return (\n    <SmartTableRow\n      hover\n      sx={{ '&:hover': { cursor: 'pointer' }, '& > *': { borderBottom: 'unset' } }}\n      {...other}\n    >\n      <TableCell>\n        <Typography variant=\"inherit\">{row.day}</Typography>\n      </TableCell>\n      <TableCell>\n        <Typography variant=\"inherit\">{row.consumption} kwh</Typography>\n      </TableCell>\n    </SmartTableRow>\n  );\n}\n\ntype YearChartProps = {\n  date: Date;\n  data: EnergyRequestResult;\n};\n\ntype ChartData =\n  | {\n      x: string[];\n      y: {\n        active: number[];\n        all: number[];\n      };\n    }\n  | undefined;\n\nfunction YearChart({ date, data }: YearChartProps) {\n  console.log(data.years);\n  const year = getYear(date);\n  const chartData: ChartData = useMemo(() => {\n    const x = data.years.map((item) => item.year.toString());\n    const y = {\n      active: [0],\n      all: [0],\n    };\n\n    return { x, y };\n  }, [data]);\n  const consumptionArrayByYear = data.years.map((x) =>\n    x.months.reduce((acc, curr) => {\n      return acc + curr.days.reduce((acc2, curr2) => acc2 + curr2.consumption, 0);\n    }, 0)\n  );\n\n  return (\n    <Card>\n      <Typography variant=\"h6\" sx={{ p: 2 }}>\n        {year}\n      </Typography>\n      <Stack direction=\"row\" spacing={2} sx={{ width: '100%' }}>\n        <ChartWidgetLine\n          style={{\n            width: '100%',\n          }}\n          data={chartData}\n          series={[{ name: 'Konsum', data: consumptionArrayByYear }]}\n          chart={{\n            colors: ['#FFB600'],\n            options: {\n              chart: {\n                toolbar: {\n                  show: false,\n                },\n                zoom: {\n                  enabled: false,\n                },\n              },\n              dataLabels: {\n                enabled: false,\n              },\n              stroke: {\n                curve: 'smooth',\n              },\n              xaxis: {\n                categories: chartData?.x ?? [],\n              },\n              yaxis: {\n                labels: {\n                  formatter: (value: number) => `${value} kwh`,\n                },\n              },\n              legend: {\n                show: false,\n              },\n              tooltip: {\n                x: {\n                  show: false,\n                },\n              },\n            },\n          }}\n        />\n      </Stack>\n    </Card>\n  );\n}\n\nfunction dataStepToResolution(dataStep: DataStep): Resolution {\n  switch (dataStep) {\n    case DataStep.ThreeMinutes:\n      return Resolution.ThreeMinutes;\n    case DataStep.FifteenMinutes:\n      return Resolution.FifteenMinutes;\n    case DataStep.OneHour:\n      return Resolution.OneHour;\n    case DataStep.OneDay:\n      return Resolution.OneDay;\n    case DataStep.OneWeek:\n      return Resolution.OneWeek;\n    case DataStep.OneMonth:\n      return Resolution.OneMonth;\n    case DataStep.OneYear:\n      return Resolution.OneYear;\n    default:\n      return Resolution.OneYear;\n  }\n}\n","uri":"file:///Users/local/git/arbeit/repo/frontend/apps/web-app/src/sections/@dashboard/metering-point/view/new-energy-data/EnergyData.tsx","version":0}}}
2024-01-29T15:26:40.323 helix_lsp::transport [INFO] typescript-language-server <- {"jsonrpc":"2.0","method":"$/typescriptVersion","params":{"version":"5.3.3","source":"bundled"}}
2024-01-29T15:26:40.324 helix_term::application [INFO] Ignoring Unhandled notification from Language Server
2024-01-29T15:26:40.469 helix_lsp::transport [INFO] typescript-language-server <- {"jsonrpc":"2.0","id":0,"method":"window/workDoneProgress/create","params":{"token":"64618c11-a44e-4273-b28c-ad57615c08c6"}}
2024-01-29T15:26:40.469 helix_lsp::transport [INFO] typescript-language-server -> {"jsonrpc":"2.0","result":null,"id":0}
2024-01-29T15:26:40.470 helix_lsp::transport [INFO] typescript-language-server <- {"jsonrpc":"2.0","method":"$/progress","params":{"token":"64618c11-a44e-4273-b28c-ad57615c08c6","value":{"kind":"begin","title":"Initializing JS/TS language features…"}}}
2024-01-29T15:26:42.676 helix_lsp::transport [INFO] typescript-language-server <- {"jsonrpc":"2.0","method":"$/progress","params":{"token":"64618c11-a44e-4273-b28c-ad57615c08c6","value":{"kind":"end"}}}
2024-01-29T15:26:42.738 helix_lsp::transport [INFO] typescript-language-server <- {"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///Users/local/git/arbeit/repo/frontend/apps/web-app/src/sections/%40dashboard/metering-point/view/new-energy-data/EnergyData.tsx","diagnostics":[]}}
2024-01-29T15:26:43.661 helix_lsp::transport [INFO] typescript-language-server <- {"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///Users/local/git/arbeit/repo/frontend/apps/web-app/src/sections/%40dashboard/metering-point/view/new-energy-data/EnergyData.tsx","diagnostics":[{"range":{"start":{"line":670,"character":30},"end":{"line":670,"character":36}},"message":"Property 'months' does not exist on type 'number[]'.","severity":1,"code":2339,"source":"typescript"},{"range":{"start":{"line":670,"character":43},"end":{"line":670,"character":44}},"message":"Parameter 'x' implicitly has an 'any' type.","severity":1,"code":7006,"source":"typescript"},{"range":{"start":{"line":672,"character":44},"end":{"line":672,"character":45}},"message":"Parameter 'x' implicitly has an 'any' type.","severity":1,"code":7006,"source":"typescript"},{"range":{"start":{"line":741,"character":12},"end":{"line":741,"character":16}},"message":"Type '(TMeasurement | undefined)[]' is missing the following properties from type 'EnergyRequestResult': years, totalElements","severity":1,"code":2739,"source":"typescript","relatedInformation":[{"location":{"uri":"file:///Users/local/git/arbeit/repo/frontend/apps/web-app/src/sections/%40dashboard/metering-point/view/new-energy-data/EnergyData.tsx","range":{"start":{"line":768,"character":2},"end":{"line":768,"character":6}}},"message":"The expected type comes from property 'data' which is declared here on type 'IntrinsicAttributes & TimePeriodViewProps'"}]},{"range":{"start":{"line":666,"character":9},"end":{"line":666,"character":17}},"message":"'Calendar' is declared but its value is never read.","severity":4,"code":6133,"source":"typescript"},{"range":{"start":{"line":1156,"character":9},"end":{"line":1156,"character":17}},"message":"'DayTable' is declared but its value is never read.","severity":4,"code":6133,"source":"typescript"},{"range":{"start":{"line":1240,"character":9},"end":{"line":1240,"character":18}},"message":"'YearChart' is declared but its value is never read.","severity":4,"code":6133,"source":"typescript"}]}}
helix-editor / helix

TypeScript diagnostics are not shown #9451
