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

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

@@ -1,182 +1,250 @@
 import ThemeType from '@ledvance/base/src/config/themeType'
 import I18n from '@ledvance/base/src/i18n'
+import { xLog } from '@ledvance/base/src/utils'
 import ECharts from '@ledvance/react-native-echarts-pro'
 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) => {
+      // 1. 移除非数字字符
+      // 2. 转换为整数
+      // 3. 进行数字比较
+      const numA = parseInt(a.replace(/\D/g, ''), 10);
+      const numB = parseInt(b.replace(/\D/g, ''), 10);
+
+      return numA - numB;
+    })
+
+    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,
+        top: '5%',
+        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
+      yAxis: [
+        {
+          type: 'value',
+          name: I18n.getLang('consumption_data_annual_bar_chart_text'),
+          max: maxKwhValue,
+          min: 0,
+          axisLabel: {
+            formatter: function (value) {
+              return parseFloat(value).toFixed(2);
+            },
+            color: theme?.global.secondFontColor
           },
-          color: '#FFC2A9',
-          borderRadius: 2,
         },
-        barMaxWidth: 10,
-        select: {
-          itemStyle: {
-            borderColor: '#FFC2A9',
-          }
+        {
+          type: 'value',
+          name: I18n.formatValue('format_unit', unit),
+          position: 'right',
+          max: maxPriceValue,
+          min: 0,
+          minInterval: 1,
+          axisLabel: {
+            formatter: function (value) {
+              return parseFloat(value).toFixed(1);
+            },
+            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,