Refined Charts, added Debugging & Logging

OpenDTU-App · Nov 18, 2023 · d530edf · d530edf
1 parent 91ff9fb
commit d530edf
Show file tree

Hide file tree

Showing 26 changed files with 869 additions and 104 deletions.
diff --git a/index.js b/index.js
@@ -3,6 +3,8 @@
  */
 import { name as appName } from '@root/app.json';
 import { decode, encode } from 'base-64';
+import 'moment/locale/de';
+import 'moment/locale/en-gb';
 
 import { AppRegistry } from 'react-native';
 import 'react-native-get-random-values';

diff --git a/licenses.json b/licenses.json
@@ -160,6 +160,12 @@
         "licenseUrl": "https://github.com/iamacup/react-native-markdown-display/raw/master/LICENSE",
         "parents": "opendtu-react-native"
     },
+    "[email protected]": {
+        "licenses": "MIT",
+        "repository": "https://github.com/web-ridge/react-native-paper-dates",
+        "licenseUrl": "https://github.com/web-ridge/react-native-paper-dates/raw/master/LICENSE",
+        "parents": "opendtu-react-native"
+    },
     "[email protected]": {
         "licenses": "MIT",
         "repository": "https://github.com/callstack/react-native-paper",

diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "react-native-logs": "^5.0.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-paper": "^5.11.0",
+    "react-native-paper-dates": "^0.20.4",
     "react-native-reanimated": "^3.5.4",
     "react-native-safe-area-context": "^4.7.2",
     "react-native-screens": "^3.25.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import { NavigationContainer } from '@react-navigation/native';
 import 'intl-pluralrules';
+import moment from 'moment';
 import { PersistGate as ReduxPersistGate } from 'redux-persist/integration/react';
 
 import type { FC } from 'react';
@@ -8,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { Appearance, StatusBar } from 'react-native';
 import type { MD3Theme } from 'react-native-paper';
 import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import { registerTranslation } from 'react-native-paper-dates';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import SplashScreen from 'react-native-splash-screen';
 import { Provider as ReduxProvider } from 'react-redux';
@@ -143,7 +145,7 @@ const DarkTheme: MD3Theme = {
 };
 
 const _App: FC = () => {
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const appTheme = useAppSelector(state => state.settings.appTheme);
 
@@ -185,6 +187,12 @@ const _App: FC = () => {
   useEffect(() => {
     setI18nLanguageMatchesSettings(false);
     i18n.changeLanguage(language);
+
+    if (language === 'en') {
+      moment.locale('en-gb');
+    } else {
+      moment.locale(language);
+    }
   }, [i18n, language]);
 
   useEffect(() => {
@@ -193,6 +201,29 @@ const _App: FC = () => {
     }
   }, [i18nLanguageMatchesSettings]);
 
+  useEffect(() => {
+    registerTranslation(i18n.language, {
+      selectSingle: t('RNPaperDates.selectSingle'),
+      selectMultiple: t('RNPaperDates.selectMultiple'),
+      selectRange: t('RNPaperDates.selectRange'),
+      save: t('RNPaperDates.save'),
+      notAccordingToDateFormat: (inputFormat: string) =>
+        t('RNPaperDates.notAccordingToDateFormat', { inputFormat }),
+      mustBeHigherThan: (date: string) =>
+        t('RNPaperDates.mustBeHigherThan', { date }),
+      mustBeLowerThan: (date: string) =>
+        t('RNPaperDates.mustBeLowerThan', { date }),
+      mustBeBetween: (startDate: string, endDate: string) =>
+        t('RNPaperDates.mustBeBetween', { startDate, endDate }),
+      dateIsDisabled: t('RNPaperDates.dateIsDisabled'),
+      previous: t('RNPaperDates.previous'),
+      next: t('RNPaperDates.next'),
+      typeInDate: t('RNPaperDates.typeInDate'),
+      pickDateFromCalendar: t('RNPaperDates.pickDateFromCalendar'),
+      close: t('RNPaperDates.close'),
+    });
+  }, [i18n.language, t]);
+
   if (!i18nLanguageMatchesSettings) {
     return null;
   }

diff --git a/src/api/opendtuapi.ts b/src/api/opendtuapi.ts
@@ -139,9 +139,11 @@ class OpenDtuApi {
       const controller = new AbortController();
 
       const abortTimeout = setTimeout(() => {
+        console.log('Aborting fetch');
         controller.abort();
       }, 5000);
 
+      log.info('getSystemStatusFromUrl', url);
       const response = await fetch(`${url.origin}/api/system/status`, {
         signal: controller.signal,
         method: 'GET',
@@ -247,6 +249,7 @@ class OpenDtuApi {
     };
 
     try {
+      log.info('checkCredentials', baseUrl, requestOptions);
       const response = await fetch(
         `${baseUrl}/api/security/authenticate`,
         requestOptions,

diff --git a/src/components/Charts/AcPowerChart.tsx b/src/components/Charts/AcPowerChart.tsx
@@ -14,11 +14,18 @@ const AcPowerChart: FC = () => {
       : undefined,
   );
 
+  const AcPowerError = useAppSelector(state =>
+    state.database.data?.acPower.success === true
+      ? undefined
+      : state.database.data?.acPower.message,
+  );
+
   return (
     <UnifiedLineChart
       title={t('charts.acPower')}
+      chartData={AcPower?.chartData}
+      error={AcPowerError}
       unit="W"
-      data={AcPower?.data}
       yAxisOverride={{
         left: {
           valueFormatter: '#.## W',

diff --git a/src/components/Charts/AcVoltageChart.tsx b/src/components/Charts/AcVoltageChart.tsx
@@ -14,10 +14,17 @@ const AcVoltageChart: FC = () => {
       : undefined,
   );
 
+  const AcVoltageError = useAppSelector(state =>
+    state.database.data?.acVoltage.success === true
+      ? undefined
+      : state.database.data?.acVoltage.message,
+  );
+
   return (
     <UnifiedLineChart
       title={t('charts.acVoltage')}
-      data={AcVoltage?.data}
+      chartData={AcVoltage?.chartData}
+      error={AcVoltageError}
       unit="V"
       yAxisOverride={{
         left: {

diff --git a/src/components/Charts/DcVoltageChart.tsx b/src/components/Charts/DcVoltageChart.tsx
@@ -14,11 +14,18 @@ const DcVoltageChart: FC = () => {
       : undefined,
   );
 
+  const DcVoltageError = useAppSelector(state =>
+    state.database.data?.dcVoltage.success === true
+      ? undefined
+      : state.database.data?.dcVoltage.message,
+  );
+
   return (
     <UnifiedLineChart
       title={t('charts.dcVoltage')}
+      chartData={DcVoltage?.chartData}
+      error={DcVoltageError}
       unit="V"
-      data={DcVoltage?.data}
       yAxisOverride={{
         left: {
           valueFormatter: '##.## V',

diff --git a/src/components/Charts/ImportantCharts.tsx b/src/components/Charts/ImportantCharts.tsx
@@ -6,11 +6,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { View } from 'react-native';
 import { Box } from 'react-native-flex-layout';
-import {
-  /*Icon,*/
-  Text,
-  TouchableRipple,
-} from 'react-native-paper';
+import { Icon, Text, TouchableRipple } from 'react-native-paper';
 
 import AcPowerChart from '@/components/Charts/AcPowerChart';
 import DcVoltageChart from '@/components/Charts/DcVoltageChart';
@@ -43,9 +39,9 @@ const ImportantCharts: FC = () => {
     navigation.navigate('SelectDatabaseScreen', { index: deviceIndex });
   }, [navigation, deviceIndex]);
 
-  // const handleShowConfigureGraphs = useCallback(() => {
-  //   navigation.navigate('ConfigureGraphsScreen');
-  // }, [navigation]);
+  const handleShowConfigureGraphs = useCallback(() => {
+    navigation.navigate('ConfigureGraphsScreen');
+  }, [navigation]);
 
   if (!hasDatabaseConfig) {
     return (
@@ -72,7 +68,7 @@ const ImportantCharts: FC = () => {
 
   return (
     <View style={{ flex: 1, width: '100%', height: '100%', marginTop: 4 }}>
-      {/*<View style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
         <Box p={8}>
           <StyledSurface mode="flat" elevation={2}>
             <TouchableRipple
@@ -103,8 +99,8 @@ const ImportantCharts: FC = () => {
             </TouchableRipple>
           </StyledSurface>
         </Box>
-      </View>*/}
-      <Box p={8} style={{ gap: 16 }}>
+      </View>
+      <Box p={8} pt={4} style={{ gap: 12 }}>
         <AcPowerChart />
         <DcVoltageChart />
       </Box>

diff --git a/src/components/Charts/UnifiedLineChart.tsx b/src/components/Charts/UnifiedLineChart.tsx
@@ -1,7 +1,9 @@
+import moment from 'moment';
+
 import type { FC } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { processColor, TouchableOpacity, View } from 'react-native';
+import { Platform, processColor, TouchableOpacity, View } from 'react-native';
 import type { LineChartProps } from 'react-native-charts-wrapper';
 import { LineChart } from 'react-native-charts-wrapper';
 import { Box } from 'react-native-flex-layout';
@@ -14,20 +16,30 @@ import useOrientation from '@/hooks/useOrientation';
 
 import { GrafanaColors, GrafanaTextColors } from '@/database';
 
+export interface ChartData {
+  data?: LineChartProps['data'];
+  from?: Date;
+  to?: Date;
+}
+
 export interface UnifiedLineChartProps {
+  title: string;
   yAxisOverride?: LineChartProps['yAxis'];
   xAxisOverride?: LineChartProps['xAxis'];
-  data?: LineChartProps['data'];
-  title?: string;
+  chartData?: ChartData;
+  error?: string;
   unit?: string;
 }
 
 const HEIGHT = 300;
 
+export const UNIX_TS_FIRST_SECOND_OF_2000 = 946684800000; // Fix for non-precise float values on Android
+
 const UnifiedLineChart: FC<UnifiedLineChartProps> = props => {
-  const { xAxisOverride, yAxisOverride, data, title, unit } = props;
+  const { xAxisOverride, yAxisOverride, chartData, title, unit, error } = props;
   const theme = useTheme();
   const { t } = useTranslation();
+  const { data, from, to } = chartData ?? {};
 
   const { height: screenHeight } = useOrientation();
 
@@ -147,6 +159,27 @@ const UnifiedLineChart: FC<UnifiedLineChartProps> = props => {
     setAvgValuePerDataSet(avgValues);
   }, [data]);
 
+  if (error) {
+    return (
+      <Box>
+        <Box
+          style={{
+            padding: 8,
+            borderRadius: 16,
+            backgroundColor: theme.colors.errorContainer,
+          }}
+        >
+          <Text
+            variant="bodyMedium"
+            style={{ color: theme.colors.onErrorContainer }}
+          >
+            {title}: {error}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
   if (!modifiedData) {
     return (
       <Box m={4}>
@@ -164,18 +197,28 @@ const UnifiedLineChart: FC<UnifiedLineChartProps> = props => {
 
   return (
     <StyledSurface style={{ paddingHorizontal: 8 }} elevation={2} mode="flat">
-      {title ? (
+      <Box
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginTop: 10,
+          marginLeft: 4,
+        }}
+      >
         <Text
           style={{
             color: theme.colors.onBackground,
-            marginTop: 10,
-            marginLeft: 4,
           }}
           variant="titleMedium"
         >
           {title}
         </Text>
-      ) : null}
+        <Text style={{ color: theme.colors.onBackground }} variant="bodySmall">
+          {moment(from).format('L HH:mm:ss')} -{' '}
+          {moment(to).format('L HH:mm:ss')}
+        </Text>
+      </Box>
       <View style={{ gap: 5 }}>
         <LineChart
           data={modifiedData}
@@ -202,12 +245,18 @@ const UnifiedLineChart: FC<UnifiedLineChartProps> = props => {
             gridLineWidth: 0.5,
             avoidFirstLastClipping: false,
             position: 'BOTTOM',
-            granularityEnabled: true,
-            granularity: 1,
             labelRotationAngle: 45,
             valueFormatter: 'date',
-            valueFormatterPattern: 'HH:mm',
+            timeUnit: 'MILLISECONDS',
+            valueFormatterPattern: 'd.M.Y HH:mm',
+            since:
+              Platform.OS === 'android'
+                ? UNIX_TS_FIRST_SECOND_OF_2000
+                : undefined,
+            granularityEnabled: true,
+            granularity: 1,
           }}
+          logEnabled={true}
           yAxis={{
             ...yAxisOverride,
             left: {

diff --git a/src/components/DeviceStatus.tsx b/src/components/DeviceStatus.tsx
@@ -29,7 +29,7 @@ const DeviceStatus: FC = () => {
     return null;
 
   return (
-    <Box style={{ marginHorizontal: 8, marginBottom: 16 }}>
+    <Box style={{ marginHorizontal: 8, marginBottom: 12 }}>
       <TouchableRipple
         onPress={handleShowDeviceInfo}
         borderless

diff --git a/src/components/ImportantStatusValues.tsx b/src/components/ImportantStatusValues.tsx
@@ -13,15 +13,15 @@ const ImportantStatusValues: FC = () => {
   const power = useLivedata(state => state?.total.Power);
 
   return (
-    <Box pv={1} ph={8} mb={4}>
+    <Box ph={8}>
       <Box
         style={{
           display: 'flex',
           flexDirection: 'row',
           width: '100%',
           flexWrap: 'wrap',
           justifyContent: 'space-evenly',
-          gap: 16,
+          gap: 8,
         }}
       >
         <StatusWidget title={t('livedata.todaysYield')} icon="solar-panel">