@ledvance/group-ui-biz-bundle 1.0.140 → 1.0.142

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}

package/src/modules/energyConsumption/EnergyConsumptionPage.tsx

@@ -1,3 +1,10 @@
+import {
+  ChartSection
+} from '@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/EnergyConsumptionChart/ChartSection'
+import { getStyles } from '@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/EnergyConsumptionChart/styles'
+import {
+  useEnergyData
+} from '@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/EnergyConsumptionChart/useEnergyData'
 import React, { useEffect, useMemo } from 'react';
 import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/core';
@@ -103,6 +110,25 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
       : '';
   }, [state.solarOverviewList, state.wifiOverviewList, state.isSolarMode]);
 
+  const chartParams = useMemo(() => {
+    return {
+      backTitle,
+      headlineText: chartHeadline,
+      chartData: [],
+      price: state.price,
+      unit: state.unit,
+      addEleDpCode: params.addEleDpCode,
+      date: (new Date()).getFullYear().toString(),
+      deviceIdGroup: [],
+      displayMode: state.isSolarMode ? 'generation' : 'consumption',
+      consumptionDeviceIds: params.wifiPlugGroup,
+      generationDeviceIds: params.solarPlugGroup,
+    }
+  }, [backTitle, chartHeadline, state.price, state.unit, params.addEleDpCode, state.isSolarMode, params.wifiPlugGroup, params.solarPlugGroup])
+  
+  const { state: chartState, actions } = useEnergyData(chartParams);
+  const chartStyles = useMemo(() => getStyles(props.theme), [props.theme]);
+
   useEffect(() => {
     getElectricity().then();
   }, []);
@@ -203,6 +229,7 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
     setEnergyData(data).then()
     state.price = data.price;
     state.unit = data.unit;
+    actions.setPriceAndUnit(data.price, data.unit)
   };
 
   const backTitle = useMemo(() => {
@@ -229,7 +256,7 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
     },
     consumptionNum: {
       color: props.theme?.global.secondBrand,
-      fontFamily: 'helvetica_neue_lt_std_bd',
+      // fontFamily: 'helvetica_neue_lt_std_bd',
     },
     subContent: {
       flex: 1,
@@ -242,7 +269,7 @@ const EnergyConsumptionPage = (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',
@@ -299,8 +326,9 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
       )}
       headlineIcon={(state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList).length ? res.download_icon : undefined}
       onHeadlineIconClick={() => {
+        const headers = [I18n.getLang('date'), `${I18n.getLang('consumption_data_annual_bar_chart_system_back_text')} (kWh)`, `Price(${state.unit})`]
         const values = (state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList).map(item => [item.key, item.value, (Number(state.price) * Number(item.value)).toFixed(2)])
-        exportEnergyCsv(values, state.unit)
+        exportEnergyCsv(headers, values)
       }}
       showGreenery={state.isSolarMode}
       greeneryIcon={res.energy_consumption_greenery}
@@ -314,6 +342,7 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
               tabStyle={{paddingHorizontal: cx(15)}}
               setIsFirst={(v) => {
                 state.isSolarMode = !v
+                actions.setDisplayMode(!v ? 'generation' : 'consumption')
               }} />
           </View> : undefined
       }
@@ -345,6 +374,9 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
                 addEleDpCode: params.addEleDpCode,
                 date: (new Date()).getFullYear().toString(),
                 deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
+                displayMode: (params.wifiPlugGroup.length && params.solarPlugGroup.length) ? 'both' : (params.wifiPlugGroup.length ? 'consumption' : 'generation'),
+                consumptionDeviceIds: params.wifiPlugGroup,
+                generationDeviceIds: params.solarPlugGroup,
               } as EnergyConsumptionChartProps)
             }}
           >
@@ -487,6 +519,17 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
             </View>
           </Card>
           <Spacer height={cx(30)} />
+          <View style={{ marginHorizontal: cx(24) }}>
+            <ChartSection
+              state={chartState}
+              actions={actions}
+              params={chartParams}
+              styles={chartStyles}
+              theme={props.theme}
+              chartHeight={cx(400)}
+            />
+          </View>
+          <Spacer height={cx(30)} />
           {/* Annual overview */}
           <OverView
             style={{marginHorizontal: cx(24)}}
@@ -501,6 +544,9 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
                 addEleDpCode: params.addEleDpCode,
                 date: (new Date()).getFullYear().toString(),
                 deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
+                displayMode: (params.wifiPlugGroup.length && params.solarPlugGroup.length) ? 'both' : (params.wifiPlugGroup.length ? 'consumption' : 'generation'),
+                consumptionDeviceIds: params.wifiPlugGroup,
+                generationDeviceIds: params.solarPlugGroup,
               } as EnergyConsumptionChartProps)
             }}
             overviewItemClick={(item) => {
@@ -512,6 +558,9 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
                 unit: state.unit,
                 isSolarMode: state.isSolarMode,
                 deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
+                displayMode: (params.wifiPlugGroup.length && params.solarPlugGroup.length) ? 'both' : (params.wifiPlugGroup.length ? 'consumption' : 'generation'),
+                consumptionDeviceIds: params.wifiPlugGroup,
+                generationDeviceIds: params.solarPlugGroup,
                 updateEnergyData
               } as EnergyConsumptionDetailProps)
             }}

package/src/modules/energyConsumption/component/DateSelectedItem.tsx

@@ -68,7 +68,7 @@ export default withTheme(function DateSelectedItem(props: DateSelectedItemProps)
             textAlign: 'center',
             flex: 1,
             color: props.theme?.textInput.fontColor,
-            fontFamily: 'helvetica_neue_lt_std_roman',
+            // fontFamily: 'helvetica_neue_lt_std_roman',
         },
         modalRoot: {paddingTop: cx(20), backgroundColor: theme?.popup.cellBg},
         modalButtonParent: {flex: 1, height: cx(48)},

package/src/modules/energyConsumption/component/DateSwitch.tsx

@@ -1,11 +1,12 @@
 import ThemeType from "@ledvance/base/src/config/themeType";
 import React, {PropsWithChildren, useCallback, useEffect} from "react";
-import {Image, Text, TouchableOpacity, View, ViewProps} from "react-native";
+import {Image, TouchableOpacity, View, ViewProps} from "react-native";
 import {Utils} from "tuya-panel-kit";
 import {useReactive} from "ahooks";
 import res from "@ledvance/base/src/res";
 import dayjs from "dayjs";
 import {DateType} from "../co2Data";
+import DateSelectedItem from './DateSelectedItem'
 
 const cx = Utils.RatioUtils.convertX;
 const {withTheme} = Utils.ThemeUtils
@@ -89,13 +90,14 @@ export default withTheme(function DateSwitch(props: DateSwitchProps) {
                 height={cx(36)}
                 width={cx(36)}/>
         </TouchableOpacity>
-        <Text style={{
-            fontSize: cx(24),
-            minWidth: cx(200),
-            textAlign: 'center',
-            color: theme?.global.brand,
-            fontFamily: 'helvetica_neue_lt_std_roman',
-        }}>{state.headlineText}</Text>
+        <DateSelectedItem
+          style={{flex: 1}}
+          dateType={state.dateType}
+          date={state.date}
+          onDateChange={date => {
+              props.onDateChange(date)
+          }}
+        />
         <TouchableOpacity
             disabled={state.disableArrowRight}
             onPress={() => {

package/src/modules/energyConsumption/component/DateTypeItem.tsx

@@ -61,7 +61,7 @@ export default withTheme(function DateTypeItem(props: DateTypeItemProps) {
                     textAlign: 'center',
                     flex: 1,
                     color: props.theme?.textInput.fontColor,
-                    fontFamily: 'helvetica_neue_lt_std_roman',
+                    // fontFamily: 'helvetica_neue_lt_std_roman',
                 }}>{state.dateTypeTitle}</Text>
             </View>
         </TouchableOpacity>

package/src/modules/energyConsumption/component/EnergyModal.tsx

@@ -114,7 +114,7 @@ const EnergyModal = (props: EnergyModalProps) => {
       marginEnd: cx(6),
       fontSize: cx(16),
       color: props.theme?.textInput.fontColor,
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
     },
     textInputGroup: {
       flexDirection: 'row',
@@ -156,7 +156,7 @@ const EnergyModal = (props: EnergyModalProps) => {
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             <View style={{ flex: 3 }}>
               <Spacer height={cx(4)} />
-              <Text style={{ color: props.theme?.global.secondFontColor, marginStart: cx(13), fontFamily: 'helvetica_neue_lt_std_bd' }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
+              <Text style={{ color: props.theme?.global.secondFontColor, marginStart: cx(13) }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
               <View style={styles.textInputGroup}>
                 <TextInput
                   value={state.energyData?.price}