@ledvance/group-ui-biz-bundle 1.0.139 → 1.0.141

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.139",
+  "version": "1.0.141",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/energyConsumption/EnergyConsumptionActions.ts

@@ -12,8 +12,8 @@ import { OverviewItem } from "./EnergyConsumptionPage";
 import dayjs from "dayjs";
 import { isNumber } from "lodash";
 import { EnergyData, UnitList } from "./component/EnergyModal";
-import I18n from "@ledvance/base/src/i18n";
 import {NativeApi} from "@ledvance/base/src/api/native";
+import {xLog, retryWithBackoff} from "@ledvance/base/src/utils"
 
 interface LightConfig {
   energyConsumption?: EnergyData
@@ -50,17 +50,18 @@ export async function getElectricity(devIdGroup: string[], addEleDpCode: string,
   return res
 }
 
-let dpResultByMonthCache: DpResultByMonthResData[] | undefined
+let dpResultByMonthCache: {key: DpResultByMonthResData[]} = {}
 const getDpResultByYear = async (devIdGroup: string[], addEleDpCode: string, dateStr: string): Promise<OverviewItem[]> => {
   const year = dateStr;
-  let successGroup = dpResultByMonthCache;
+  const key = devIdGroup.join()
+  let successGroup = dpResultByMonthCache[key];
   if (!successGroup) {
     const promiseGroup = devIdGroup.map(devId =>
       getDpResultByMonth(devId, addEleDpCode, 'sum').catch(error => ({ error }))
     );
     // @ts-ignore
-    dpResultByMonthCache = (await Promise.all(promiseGroup)).filter(v => !v.error);
-    successGroup = dpResultByMonthCache
+    dpResultByMonthCache[key] = (await Promise.all(promiseGroup)).filter(v => !v.error);
+    successGroup = dpResultByMonthCache[key]
   }
   if (!successGroup) {
     return []
@@ -134,11 +135,12 @@ const getDpResultByYearMonth = async (deviceIdGroup: string[], addEleDpCode: str
 
 
 const getDpResultByDate = async (deviceIdGroup: string[], addEleDpCode: string, date: string): Promise<OverviewItem[]> => {
-  if (overDays(date, 7)) {
-    console.log("getDpResultByDate overDays true")
+  const newDate = date.replaceAll('/', '')
+  if (overDays(newDate, 7)) {
+    xLog("getDpResultByDate overDays true")
     return []
   }
-  const promiseGroup = deviceIdGroup.map(devId => getDpResultByHour(devId, addEleDpCode, date, 'sum').catch(error => ({ error })))
+  const promiseGroup = deviceIdGroup.map(devId => getDpResultByHour(devId, addEleDpCode, newDate, 'sum').catch(error => ({ error })))
   const res = await Promise.all(promiseGroup);
   // @ts-ignore
   const successGroup: DpResultByDataWithSpecifiedResData[] = res.filter(v => !v.error);
@@ -174,8 +176,7 @@ const getDpResultByDate = async (deviceIdGroup: string[], addEleDpCode: string,
   return list
 }
 
-export const exportEnergyCsv = (values: any[][], unit: string) => {
-  const headers = [I18n.getLang('date'), `${I18n.getLang('consumption_data_annual_bar_chart_system_back_text')} (kWh)`, `Price(${unit})`]
+export const exportEnergyCsv = (headers: string[], values: any[][]) => {
   const functionName = 'EnergyConsumption'
   exportCsvFile(headers, values, functionName)
 }
@@ -195,12 +196,37 @@ export interface EnergyGeneration {
   history: EnergyHistory[]
 }
 
+async function getJsonWithError(devId: string, key: string) {
+  const res = await NativeApi.getJson(devId, key)
+  if (!res.success) {
+    xLog(`getJsonWithError ${devId} ${key} failed`, res)
+    throw new Error(`API失败: ${res.msg || '未知错误'}`, { cause: res })
+  }
+  return res
+}
+
 export async function getEnergyGenerationValue(devId: string): Promise<EnergyGeneration | undefined> {
-  const res = await NativeApi.getJson(devId, EnergyGenerationId)
-  if (res.success && res.data) {
-    return JSON.parse(res.data)
-  } else {
-    console.log('getEnergyGenerationValue failed', res)
+  try {
+    const res = await retryWithBackoff(
+      () => getJsonWithError(devId, EnergyGenerationId),
+      {
+        // 自定义判断哪些错误需要重试
+        shouldRetry: (error) => {
+          // 网络错误、超时错误或服务器错误(5xx)通常需要重试
+          const isNetworkError = !error.cause?.success && error.cause?.msg === 'connection closed'
+
+          return isNetworkError;
+        }
+      }
+    )
+    if (res.success && res.data) {
+      return JSON.parse(res.data)
+    } else {
+      return undefined
+    }
+  } catch (error) {
+    xLog('getEnergyGenerationValue error', error.cause)
     return undefined
   }
+
 }

package/src/modules/energyConsumption/EnergyConsumptionCard.tsx

@@ -174,7 +174,7 @@ const EnergyConsumptionCard = (props: EnergyConsumptionProp) => {
     consumedEnergyItemUnit: {
       color: props.theme?.global.secondFontColor,
       fontSize: cx(14),
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       textAlign: 'center'
     },
     subContent: {
@@ -188,13 +188,13 @@ const EnergyConsumptionCard = (props: EnergyConsumptionProp) => {
       color: props.theme?.global.secondBrand,
     },
     titleText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
       color: props.theme?.global.secondFontColor,
       textAlign: 'center',
     },
     unitText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
       color: props.theme?.global.secondFontColor,
     },

package/src/modules/energyConsumption/EnergyConsumptionChart/ChartSection.tsx

@@ -1,13 +1,19 @@
 import I18n from '@ledvance/base/src/i18n'
 import React, { useCallback } from 'react'
-import { View } from 'react-native'
+import { Image, TouchableOpacity, View } from 'react-native'
 import { DateType } from '../co2Data'
 import DateSelectedItem from '../component/DateSelectedItem'
 import DateTypeItem from '../component/DateTypeItem'
+import DateSwitch from '../component/DateSwitch'
 import NewBarChart from '../component/NewBarChart'
 import { EmptyDataView } from './EmptyDataView'
+import { exportEnergyCsv } from '../EnergyConsumptionActions'
+import { Utils } from 'tuya-panel-kit'
+import res from '@ledvance/base/src/res'
 
-export const ChartSection = ({ state, actions, params, styles, theme, chartHeight }) => {
+const { convertX: cx } = Utils.RatioUtils
+
+export const ChartSection = ({ isLandscape, state, actions, params, styles, theme, chartHeight }) => {
   const getEmptyDataTip = useCallback(() => {
     if (state.over365Days && state.dateType !== DateType.Day) {
       return I18n.getLang('energyconsumption_Daylimit')
@@ -18,10 +24,97 @@ export const ChartSection = ({ state, actions, params, styles, theme, chartHeigh
     return I18n.getLang('energyconsumption_emptydata')
   }, [state.dateType, state.over365Days, state.over7Days])
 
-  const isDataEmpty = state.chartData.length <= 0
+  const handleExportCsv = useCallback(() => {
+    const displayMode = state.displayMode || 'consumption'
+    const consumedData = state.consumptionChartData;
+    const generatedData = state.generationChartData;
+    const price = params.price;
+    const unit = params.unit;
+    const consumedName = I18n.getLang('chart_legend_consumption');
+    const generatedName = I18n.getLang('chart_legend_generation');
+    // 1. 创建CSV头部 (与之前相同)
+    const header = [I18n.getLang('date')];
+    if (displayMode === 'consumption' || displayMode === 'both') {
+      header.push(`${consumedName} (kWh)`, `${consumedName} (${unit})`);
+    }
+    if (displayMode === 'generation' || displayMode === 'both') {
+      header.push(`${generatedName} (kWh)`, `${generatedName} (${unit})`);
+    }
+    const rows = [];
+    let i = 0; // 指向 consumedData 的指针
+    let j = 0; // 指向 generatedData 的指针
+    // 2. 双指针合并算法
+    while (i < consumedData.length || j < generatedData.length) {
+      const consumedItem = consumedData[i];
+      const generatedItem = generatedData[j];
+      const consumedKey = consumedItem?.headlineText;
+      const generatedKey = generatedItem?.headlineText;
+      let rowData = [];
+      let dateKey = '';
+      if (consumedKey === generatedKey) {
+        dateKey = consumedItem.key;
+        const consumedValue = Number(consumedItem.value);
+        const generatedValue = Number(generatedItem.value);
+        if (displayMode === 'consumption' || displayMode === 'both') {
+          rowData.push(consumedValue.toFixed(2), (consumedValue * price).toFixed(2));
+        }
+        if (displayMode === 'generation' || displayMode === 'both') {
+          rowData.push(generatedValue.toFixed(2), (generatedValue * price).toFixed(2));
+        }
+        i++;
+        j++;
+      } else if (consumedKey > generatedKey || !generatedKey) {
+        dateKey = consumedItem.key;
+        const consumedValue = Number(consumedItem.value);
+        if (displayMode === 'consumption' || displayMode === 'both') {
+          rowData.push(consumedValue.toFixed(2), (consumedValue * price).toFixed(2));
+        }
+        if (displayMode === 'generation' || displayMode === 'both') {
+          // 在 'generation' 或 'both' 模式下，为缺失的产生数据补0
+          rowData.push('0.00', '0.00');
+        }
+        i++;
+      } else {
+        dateKey = generatedItem.key;
+        const generatedValue = Number(generatedItem.value);
+        if (displayMode === 'consumption' || displayMode === 'both') {
+          // 在 'consumption' 或 'both' 模式下，为缺失的消耗数据补0
+          rowData.push('0.00', '0.00');
+        }
+        if (displayMode === 'generation' || displayMode === 'both') {
+          rowData.push(generatedValue.toFixed(2), (generatedValue * price).toFixed(2));
+        }
+        j++;
+      }
+
+      // 将日期和处理好的数据行组合起来
+      rows.push([dateKey, ...rowData]);
+    }
+
+    exportEnergyCsv(header, rows);
+  }, [state.displayMode, state.consumptionChartData, state.generationChartData, params.price, params.unit])
+
+  const isDataEmpty = state.consumptionChartData.length <= 0 && state.generationChartData.length <= 0
 
   return (
     <>
+      {!isLandscape && (
+        <View style={styles.dateSwitchContainer}>
+          <DateSwitch
+            style={{ flex: 1 }}
+            date={state.date}
+            dateType={state.dateType}
+            headlineText={state.headlineText}
+            onDateChange={actions.setDate}
+          />
+          <TouchableOpacity style={{ width: cx(30) }} onPress={handleExportCsv}>
+            <Image
+              style={styles.downloadIcon}
+              source={{ uri: !isDataEmpty ? res.download_icon : undefined }}
+            />
+          </TouchableOpacity>
+        </View>
+      )}
       <View style={styles.dateControlsContainer}>
         <DateTypeItem
           style={styles.dateTypeItem}
@@ -43,6 +136,9 @@ export const ChartSection = ({ state, actions, params, styles, theme, chartHeigh
           <NewBarChart
             height={chartHeight}
             data={state.chartData}
+            displayMode={state.displayMode}
+            consumedData={state.consumptionChartData}
+            generatedData={state.generationChartData}
             price={state.price}
             unit={params.unit}
           />

package/src/modules/energyConsumption/EnergyConsumptionChart/PortraitView.tsx

@@ -1,21 +1,13 @@
 import Page from '@ledvance/base/src/components/Page'
 import res from '@ledvance/base/src/res'
-import React, { useCallback } from 'react'
-import { Image, ScrollView, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import { ScrollView, } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
-import DateSwitch from '../component/DateSwitch'
-import { exportEnergyCsv } from '../EnergyConsumptionActions'
 import { ChartSection } from './ChartSection'
 
 const { convertX: cx } = Utils.RatioUtils
 
 export const PortraitView = ({ state, actions, params, styles, theme }) => {
-
-  const handleExportCsv = useCallback(() => {
-    const values = state.chartData.map(item => [item.key, item.value, (Number(params.price) * Number(item.value)).toFixed(2)])
-    exportEnergyCsv(values, params.unit)
-  }, [state.chartData, params.price, params.unit])
-
   return (
     <Page
       backText={params.backTitle}
@@ -25,26 +17,10 @@ export const PortraitView = ({ state, actions, params, styles, theme }) => {
       rightButtonIcon={state.isSupportLandscape ? res.screen_full : undefined}
       rightButtonStyle={styles.fullScreenIcon}
       rightButtonIconClick={actions.toggleLandscape}
-      headlineContent={
-        <View style={styles.headlineContainer}>
-          <DateSwitch
-            style={styles.dateSwitch}
-            date={state.date}
-            dateType={state.dateType}
-            headlineText={state.headlineText}
-            onDateChange={actions.setDate}
-          />
-          <TouchableOpacity style={styles.downloadButton} onPress={handleExportCsv}>
-            <Image
-              style={styles.downloadIcon}
-              source={{ uri: !(state.chartData.length <= 0) ? res.download_icon : undefined }}
-            />
-          </TouchableOpacity>
-        </View>
-      }
     >
       <ScrollView nestedScrollEnabled={true} style={styles.scrollViewContent}>
         <ChartSection
+          isLandscape={false}
           state={state}
           actions={actions}
           params={params}

package/src/modules/energyConsumption/EnergyConsumptionChart/styles.ts

@@ -9,6 +9,11 @@ export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
   scrollViewContent: {
     marginHorizontal: cx(24),
   },
+  dateSwitchContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    marginVertical: cx(15),
+  },
   dateControlsContainer: {
     flexDirection: 'row',
   },

package/src/modules/energyConsumption/EnergyConsumptionChart/useEnergyData.ts

@@ -1,15 +1,17 @@
 import { OrientationService } from '@ledvance/base/src/api/OrientationService'
-import { overDays } from '@ledvance/base/src/utils'
+import { overDays, xLog } from '@ledvance/base/src/utils'
 import { loopsText, monthFormat } from '@ledvance/base/src/utils/common'
 import { useReactive, useUpdateEffect } from 'ahooks'
 import dayjs from 'dayjs'
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 import { DateType } from '../co2Data'
 import { getElectricity } from '../EnergyConsumptionActions'
 import { EnergyConsumptionChartProps } from '../EnergyConsumptionChart'
 
+export type EnergyDisplayMode = 'consumption' | 'generation' | 'both';
+
 export const useEnergyData = (params: EnergyConsumptionChartProps) => {
-  const { addEleDpCode, price, date, over365Days, over7Days, chartData, deviceIdGroup } = params
+  const { addEleDpCode, price, unit, date, over365Days, over7Days, chartData, deviceIdGroup, consumptionDeviceIds, generationDeviceIds } = params
 
   const getDateType = useCallback((d: string) => {
     const datejs = dayjs(d)
@@ -30,7 +32,11 @@ export const useEnergyData = (params: EnergyConsumptionChartProps) => {
     date: date,
     headlineText: initialDateType === DateType.Year ? date : params.headlineText,
     chartData: chartData.filter((item) => initialDateType !== DateType.Year || item.headlineText.startsWith(date)),
+    displayMode: params.displayMode || 'consumption',
+    consumptionChartData: [],
+    generationChartData: [],
     price: isNaN(Number(price)) ? 0 : Number(price),
+    unit: unit,
     over365Days: over365Days,
     over7Days: over7Days,
   })
@@ -53,16 +59,17 @@ export const useEnergyData = (params: EnergyConsumptionChartProps) => {
     }
   }, [state.dateType])
 
-  useUpdateEffect(() => {
+  useEffect(() => {
     state.loading = true
-    getElectricity(deviceIdGroup, addEleDpCode, state.date, state.dateType)
-      .then((res) => {
-        state.chartData = res
-        state.loading = false
-      })
-      .catch(() => {
-        state.loading = false
-      })
+    const consumptionData = getElectricity(consumptionDeviceIds, addEleDpCode, state.date, state.dateType)
+    const generationData = getElectricity(generationDeviceIds, addEleDpCode, state.date, state.dateType)
+    Promise.all([consumptionData, generationData]).then(([consumptionRes, generationRes]) => {
+      state.consumptionChartData = consumptionRes
+      state.generationChartData = generationRes
+      state.loading = false
+    }).catch(() => {
+      state.loading = false
+    })
   }, [state.date])
 
   useUpdateEffect(() => {
@@ -96,6 +103,9 @@ export const useEnergyData = (params: EnergyConsumptionChartProps) => {
     setDateType: useCallback((type: DateType) => {
       state.dateType = type
     }, []),
+    setDisplayMode: useCallback((mode: EnergyDisplayMode) => {
+      state.displayMode = mode
+    }, []),
     toggleLandscape: useCallback(() => {
       if (!state.isSupportLandscape) return
       const newIsLandscape = !state.isLandscape
@@ -106,6 +116,10 @@ export const useEnergyData = (params: EnergyConsumptionChartProps) => {
         OrientationService.lockToPortrait()
       }
     }, []),
+    setPriceAndUnit: useCallback((newPrice: string, newUnit: string) => {
+      state.price = isNaN(Number(newPrice)) ? 0 : Number(newPrice)
+      state.unit = newUnit
+    }, []),
   }
 
   return { state, actions }

package/src/modules/energyConsumption/EnergyConsumptionChart.tsx

@@ -1,4 +1,5 @@
 import { OverviewItem } from './EnergyConsumptionPage'
+import { EnergyDisplayMode } from './EnergyConsumptionChart/useEnergyData'
 
 export interface EnergyConsumptionChartProps {
   addEleDpCode: string
@@ -8,6 +9,9 @@ export interface EnergyConsumptionChartProps {
   over365Days?: boolean
   over7Days?: boolean,
   deviceIdGroup: string[];
+  displayMode?: EnergyDisplayMode;
+  consumptionDeviceIds: string[];
+  generationDeviceIds: string[];
   price: string,
   unit: string,
   date: string,

package/src/modules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -22,7 +22,7 @@ import EnergyPopup, { EnergyData } from "./component/EnergyModal";
 import { carbonDioxideEmission, countryAndRegion } from "./co2Data";
 import ThemeType from '@ledvance/base/src/config/themeType'
 import { exportEnergyCsv } from "./EnergyConsumptionActions";
-
+import { EnergyDisplayMode } from './EnergyConsumptionChart/useEnergyData'
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
@@ -33,6 +33,9 @@ export interface EnergyConsumptionDetailProps {
   price: string
   unit: string
   deviceIdGroup: string[];
+  displayMode?: EnergyDisplayMode;
+  consumptionDeviceIds: string[];
+  generationDeviceIds: string[];
   isSolarMode: boolean
   updateEnergyData: (data: EnergyData) => {}
 }
@@ -171,7 +174,7 @@ const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
     },
     consumptionNum: {
       color: props.theme?.global.secondBrand,
-      fontFamily: 'helvetica_neue_lt_std_bd',
+      // fontFamily: 'helvetica_neue_lt_std_bd',
     },
     subContent: {
       flex: 1,
@@ -184,7 +187,7 @@ const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
       color: props.theme?.global.secondBrand,
     },
     titleText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
       color: props.theme?.global.secondFontColor,
       textAlign: 'center',
@@ -218,8 +221,9 @@ const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
       headlineText={params.curMonth.key}
       headlineIcon={state.overviewList.length ? res.download_icon : undefined}
       onHeadlineIconClick={() => {
+        const headers = [I18n.getLang('date'), `${I18n.getLang('consumption_data_annual_bar_chart_system_back_text')} (kWh)`, `Price(${params.unit})`]
         const values = state.overviewList.map(item => [item.key, item.value, (Number(params.price) * Number(item.value)).toFixed(2)])
-        exportEnergyCsv(values, params.unit)
+        exportEnergyCsv(headers, values)
       }}
       showGreenery={false}
       greeneryIcon={res.energy_consumption_greenery}
@@ -241,34 +245,34 @@ const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
             <Spacer />
             {/* CO2 */}
             {params.isSolarMode && <>
-              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                <View style={styles.priceBg}>
-                  <Image
-                    source={{ uri: res.energy_consumption_cash}}
-                    resizeMode="contain"
-                    style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
-                  />
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <View style={styles.priceBg}>
+                        <Image
+                            source={{ uri: res.energy_consumption_cash}}
+                            resizeMode="contain"
+                            style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
+                        />
+                    </View>
+                    <View style={styles.priceNum}>
+                        <View style={{ flexDirection: 'row' }}>
+                            <Text style={{ color: props.theme?.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
+                            <TouchableOpacity
+                                onPress={() => {
+                                  state.showPopup = true
+                                  state.popupType = 'co2'
+                                }}
+                            >
+                                <Image
+                                    source={{ uri: res.co2_icon}}
+                                    resizeMode="contain"
+                                    style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                        <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
+                    </View>
                 </View>
-                <View style={styles.priceNum}>
-                  <View style={{ flexDirection: 'row' }}>
-                    <Text style={{ color: props.theme?.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
-                    <TouchableOpacity
-                      onPress={() => {
-                        state.showPopup = true
-                        state.popupType = 'co2'
-                      }}
-                    >
-                      <Image
-                        source={{ uri: res.co2_icon}}
-                        resizeMode="contain"
-                        style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
-                      />
-                    </TouchableOpacity>
-                  </View>
-                  <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
-                </View>
-              </View>
-              <Spacer height={cx(10)} />
+                <Spacer height={cx(10)} />
             </>}
             {/* money */}
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
@@ -311,6 +315,9 @@ const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
                 addEleDpCode: params.addEleDpCode,
                 date: params.curMonth.headlineText,
                 deviceIdGroup: params.deviceIdGroup,
+                displayMode: params.displayMode,
+                consumptionDeviceIds: params.consumptionDeviceIds,
+                generationDeviceIds: params.generationDeviceIds,
               } as EnergyConsumptionChartProps)
             }}
             overviewItemClick={async (item) => {
@@ -327,6 +334,9 @@ const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
                 unit: state.unit,
                 date: item.headlineText,
                 deviceIdGroup: params.deviceIdGroup,
+                displayMode: params.displayMode,
+                consumptionDeviceIds: params.consumptionDeviceIds,
+                generationDeviceIds: params.generationDeviceIds,
               } as EnergyConsumptionChartProps)
             }}
             overViewList={state.overviewList}