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

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

@@ -94,7 +94,7 @@ export default withTheme(function DateSwitch(props: DateSwitchProps) {
             minWidth: cx(200),
             textAlign: 'center',
             color: theme?.global.brand,
-            fontFamily: 'helvetica_neue_lt_std_roman',
+            // fontFamily: 'helvetica_neue_lt_std_roman',
         }}>{state.headlineText}</Text>
         <TouchableOpacity
             disabled={state.disableArrowRight}

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}

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

@@ -5,178 +5,226 @@ import React, { useMemo, useRef } from 'react'
 import { View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
 import { OverviewItem } from '../EnergyConsumptionPage'
+import { EnergyDisplayMode } from '../EnergyConsumptionChart/useEnergyData'
 
 const { withTheme } = Utils.ThemeUtils
-const cx = Utils.RatioUtils.convertX
-
 interface BarChartProps {
-  theme?: ThemeType
-  data: OverviewItem[],
-  price: number,
-  unit: string,
-  height: number
+  theme?: ThemeType;
+  consumedData: OverviewItem[];
+  generatedData: OverviewItem[];
+  consumedName?: string;
+  generatedName?: string;
+  price: number;
+  unit: string;
+  height: number;
+  displayMode?: EnergyDisplayMode;
 }
 
 const BarChartWithTouch = (props: BarChartProps) => {
-  const echarts = useRef()
-  const { data, height, price, unit, theme } = props
-  const dataX = data?.map(item => {
-    return item.chartTitle
-  })
-  const dataKwhY = data?.map(item => {
-    return Number(item.value)
-  })
-  const dataPriceY = data?.map(item => {
-    return ((isNaN(Number(item.value)) ? 0 : Number(item.value)) * price).toFixed(2)
-  })
-  const maxValue = useMemo(() => {
-    let max = Math.max(...dataKwhY)
-    if (max < 0.1) {
-      max += 0.02
-      max = max - (max % 0.02)
-    } else if (max < 1) {
-      max += 0.2
-      max = max - (max % 0.2)
-    } else if (max < 10) {
-      max = Math.ceil(max) + 2
-      max = max - (max % 2)
-    }
-    return max
-  }, [dataKwhY])
-  const gridRight = useMemo(() => {
-    const max = Math.max(...dataPriceY.map(it => Number(it)))
-    return max > 999 ? '15%' : '10%'
-  }, [dataPriceY])
-  const option = {
-    tooltip: {
-      show: true,
-      triggerOn: 'click',
-      trigger: 'axis',
-    },
-    legend: {
-      show: true,
-      data: ['kWh', unit],
-      textStyle: {
-        color: theme?.global.fontColor,
+  const echarts = useRef<ECharts>(null)
+  const {
+    consumedData,
+    generatedData,
+    consumedName = I18n.getLang('chart_legend_consumption'),
+    generatedName = I18n.getLang('chart_legend_generation'),
+    price,
+    unit,
+    height,
+    theme,
+    displayMode = 'consumption',
+  } = props
+
+  const chartKey = useMemo(() => {
+    return `chart-${displayMode}-${price}-${unit}`
+  }, [displayMode, price, unit])
+
+  // 数据对齐（不变）
+  const { dataX, alignedConsumed, alignedGenerated, alignedConsumedPrice, alignedGeneratedPrice } = useMemo(() => {
+    const combinedDataMap = new Map<string, { title: string; consumed?: number; generated?: number }>()
+
+    consumedData?.forEach(item => {
+      const key = item.headlineText
+      if (!combinedDataMap.has(key)) {
+        combinedDataMap.set(key, { title: item.chartTitle })
       }
-    },
-    grid: {
-      right: gridRight,
-    },
-    xAxis: {
-      data: dataX,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        show: true,
-        color: props.theme?.global.secondFontColor,
-        interval: 'auto',
-        rotate: 45,
-        align: 'right',
-        verticalAlign: 'top',
-        showMinLabel: true,
-        showMaxLabel: true,
+      combinedDataMap.get(key)!.consumed = Number(item.value)
+    })
+
+    generatedData?.forEach(item => {
+      const key = item.headlineText
+      if (!combinedDataMap.has(key)) {
+        combinedDataMap.set(key, { title: item.chartTitle })
       }
-    },
-    yAxis: [{
-      type: 'value',
-      name: I18n.getLang('consumption_data_annual_bar_chart_text'),
-      max: Math.max(maxValue, 0.02),
-      min: 0,
-      position: 'left',
-      axisLabel: {
-        formatter: function (value) {
-          const kwh = parseFloat(value)
-          let toFixed = 2
-          if (kwh >= 100) {
-            toFixed = 0
-          } else if (kwh >= 10) {
-            toFixed = 1
-          }
-          return kwh.toFixed(toFixed)
+      combinedDataMap.get(key)!.generated = Number(item.value)
+    })
+
+    const sortedKeys = Array.from(combinedDataMap.keys()).sort((a, b) => b.localeCompare(a))
+
+    const finalDataX: string[] = []
+    const finalAlignedConsumed: number[] = []
+    const finalAlignedGenerated: number[] = []
+    const finalAlignedConsumedPrice: string[] = []
+    const finalAlignedGeneratedPrice: string[] = []
+
+    sortedKeys.forEach(key => {
+      const dataPoint = combinedDataMap.get(key)!
+      const consumedVal = dataPoint.consumed || 0
+      const generatedVal = dataPoint.generated || 0
+
+      finalDataX.push(dataPoint.title)
+      finalAlignedConsumed.push(consumedVal)
+      finalAlignedGenerated.push(generatedVal)
+      finalAlignedConsumedPrice.push((consumedVal * price).toFixed(2))
+      finalAlignedGeneratedPrice.push((generatedVal * price).toFixed(2))
+    })
+
+    return {
+      dataX: finalDataX,
+      alignedConsumed: finalAlignedConsumed,
+      alignedGenerated: finalAlignedGenerated,
+      alignedConsumedPrice: finalAlignedConsumedPrice,
+      alignedGeneratedPrice: finalAlignedGeneratedPrice,
+    }
+  }, [consumedData, generatedData, price])
+
+  // 图例 & series 动态生成
+  const { legendData, seriesData } = useMemo(() => {
+    const finalLegend: string[] = []
+    const finalSeries: any[] = []
+
+    if (displayMode === 'consumption' || displayMode === 'both') {
+      finalLegend.push(consumedName, `${consumedName} ${unit}`)
+      finalSeries.push(
+        {
+          name: consumedName,
+          type: 'bar',
+          yAxisIndex: 0,
+          data: alignedConsumed,
+          itemStyle: { color: '#FFC2A9', borderRadius: 2 },
+          barMaxWidth: 10,
+        },
+        {
+          name: `${consumedName} ${unit}`,
+          type: 'line',
+          yAxisIndex: 1,
+          data: alignedConsumedPrice,
+          smooth: true,
+          showSymbol: false,
+          color: '#F49431',
+        }
+      )
+    }
+
+    if (displayMode === 'generation' || displayMode === 'both') {
+      finalLegend.push(generatedName, `${generatedName} ${unit}`)
+      finalSeries.push(
+        {
+          name: generatedName,
+          type: 'bar',
+          yAxisIndex: 0,
+          data: alignedGenerated,
+          itemStyle: { color: '#A7D7A7', borderRadius: 2 },
+          barMaxWidth: 10,
         },
-        color: props.theme?.global.secondFontColor,
+        {
+          name: `${generatedName} ${unit}`,
+          type: 'line',
+          yAxisIndex: 1,
+          data: alignedGeneratedPrice,
+          smooth: true,
+          showSymbol: false,
+          color: '#5A9C5A',
+        }
+      )
+    }
+
+    return { legendData: finalLegend, seriesData: finalSeries }
+  }, [displayMode, unit, consumedName, generatedName, alignedConsumed, alignedGenerated, alignedConsumedPrice, alignedGeneratedPrice])
+
+  // yAxis 动态
+  const maxKwhValue = useMemo(() => {
+    const valuesToConsider: number[] = [];
+    if (displayMode === 'consumption' || displayMode === 'both') valuesToConsider.push(...alignedConsumed);
+    if (displayMode === 'generation' || displayMode === 'both') valuesToConsider.push(...alignedGenerated);
+
+    if (valuesToConsider.length === 0) return 0.2; // 默认值
+    let max = Math.max(...valuesToConsider);
+    if (max < 1) max += 0.2;
+    else if (max < 10) max = Math.ceil(max) + 2;
+    else max = Math.ceil(max * 1.2);
+    return max;
+  }, [displayMode, alignedConsumed, alignedGenerated]);
+  const maxPriceValue = useMemo(() => {
+    const valuesToConsider: number[] = [];
+    if (displayMode === 'consumption' || displayMode === 'both') valuesToConsider.push(...alignedConsumedPrice.map(Number));
+    if (displayMode === 'generation' || displayMode === 'both') valuesToConsider.push(...alignedGeneratedPrice.map(Number));
+    if (valuesToConsider.length === 0) return 1; // 默认值
+    const max = Math.max(...valuesToConsider);
+    return Math.ceil(max * 1.4);
+  }, [displayMode, alignedConsumedPrice, alignedGeneratedPrice]);
+
+  const option = useMemo(
+    () => ({
+      tooltip: { show: true, triggerOn: 'click', trigger: 'axis' },
+      legend: {
+        show: true,
+        data: legendData,
+        textStyle: { color: theme?.global.fontColor },
       },
-      nameTextStyle: {
-        fontSize: 14,
-        align: 'left',
-        padding: [0, 0, 0, cx(-30)],
-        color: props.theme?.global.secondFontColor,
+      grid: {
+        top: '25%',
+        right: '15%',
+        left: '15%',
       },
-    }, {
-      type: 'value',
-      name: I18n.formatValue('format_unit', unit),
-      position: 'right',
-      alignTicks: true,
-      max: Math.ceil(price ? maxValue * price * 1.4 : 0),
-      min: 0,
-      minInterval: 1,
-      axisLabel: {
-        formatter: function (value) {
-          const price = parseFloat(value)
-          let toFixed = 2
-          if (price >= 100) {
-            toFixed = 0
-          } else if (price >= 10) {
-            toFixed = 1
-          }
-          return price.toFixed(toFixed)
+      xAxis: {
+        data: dataX,
+        axisTick: { show: false },
+        axisLabel: {
+          show: true,
+          color: theme?.global.secondFontColor,
+          rotate: 45,
+          align: 'right',
         },
-        color: props.theme?.global.secondFontColor,
-      },
-      nameTextStyle: {
-        fontSize: 14,
-        align: 'right',
-        padding: [0, cx(-30), 0, 0],
-        color: props.theme?.global.secondFontColor,
       },
-    }],
-    series: [
-      {
-        name: 'kWh',
-        type: 'bar',
-        data: dataKwhY,
-        itemStyle: {
-          emphasis: {
-            color: '#FFC2A9', // Color when bar is clicked
-          },
-          color: '#FFC2A9',
-          borderRadius: 2,
+      yAxis: [
+        {
+          type: 'value',
+          name: I18n.getLang('consumption_data_annual_bar_chart_text'),
+          max: maxKwhValue,
+          min: 0,
+          axisLabel: { color: theme?.global.secondFontColor },
         },
-        barMaxWidth: 10,
-        select: {
-          itemStyle: {
-            borderColor: '#FFC2A9',
-          }
+        {
+          type: 'value',
+          name: I18n.formatValue('format_unit', unit),
+          position: 'right',
+          max: maxPriceValue,
+          min: 0,
+          minInterval: 1,
+          axisLabel: { color: theme?.global.secondFontColor },
         },
-        selectedMode: 'single',
+      ],
+      series: seriesData,
+      dataZoom: {
+        start: 0,
+        type: 'inside',
+        zoomLock: true,
       },
-      {
-        name: unit,
-        type: 'line',
-        data: dataPriceY,
-        yAxisIndex: 1,
-        smooth: true,
-        showSymbol: false,
-        color: '#F49431',
-        selectedMode: 'single',
-      }
-    ],
-    dataZoom: {
-      start: 0,
-      type: 'inside',
-      zoomLock: true,
-    },
-    customMapData: {}
-  }
+    }),
+    [
+      legendData,
+      seriesData,
+      dataX,
+      maxKwhValue,
+      maxPriceValue,
+      unit,
+      theme,
+    ]
+  )
+
   return (
     <View style={{ flex: 1 }}>
-      <ECharts
-        option={option}
-        ref={echarts}
-        height={height}
-      />
+      <ECharts key={chartKey} option={option} ref={echarts} height={height}/>
     </View>
   )
 }

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

@@ -40,7 +40,7 @@ const OverView = (props: OverViewProps) => {
     listEmptyText: {
       color: props.theme?.global.fontColor,
       fontSize: cx(12),
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
     },
     overviewItemText: {
       color: props.theme?.global.fontColor,