@ledvance/ui-biz-bundle 1.1.150 → 1.1.152

package/package.json

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

package/src/modules/flags/FlagInfo.tsx

@@ -559,5 +559,53 @@ export const defFlagList: FlagUiInfo[] = [
     name: I18n.getLang('country_VE'),
     ...defFlagConfig,
     colors: [{ h: 0, s: 100, v: 100 }, { h: 205, s: 100, v: 100 }, { h: 60, s: 100, v: 100 },],
-  }
+  },
+  {
+    id: 168,
+    name: I18n.getLang('country_JO'),
+    ...defFlagConfig,
+    colors: [{"h":150,"s":100,"v":48}, {"h":0,"s":0,"v":100}, {"h":0,"s":0,"v":0},{"h":353,"s":92,"v":81}],
+  },
+  {
+    id: 167,
+    name: I18n.getLang('country_CV'),
+    ...defFlagConfig,
+    colors: [{"h":49,"s":100,"v":100}, {"h":356,"s":79,"v":94}, {"h":0,"s":0,"v":100},{"h":218,"s":100,"v":65}],
+  },
+  {
+    id: 166,
+    name: I18n.getLang('country_PA'),
+    ...defFlagConfig,
+    colors: [{"h":219,"s":92,"v":34}, {"h":0,"s":0,"v":100}, {"h":358,"s":92,"v":85}],
+  },
+  {
+    id: 165,
+    name: I18n.getLang('country_northern_ireland'),
+    ...defFlagConfig,
+    colors: [{"h":0,"s":0,"v":100}, {"h":0,"s":100,"v":82}, {"h":0,"s":0,"v":100}],
+  },
+  {
+    id: 164,
+    name: I18n.getLang('country_wales'),
+    ...defFlagConfig,
+    colors: [{"h":142,"s":100,"v":69}, {"h":350,"s":92,"v":78}, {"h":0,"s":0,"v":100}],
+  },
+  {
+    id: 163,
+    name: I18n.getLang('country_BA'),
+    ...defFlagConfig,
+    colors: [{"h":0,"s":0,"v":100}, {"h":214,"s":100,"v":42}, {"h":48,"s":100,"v":100}],
+  },
+  {
+    id: 162,
+    name: I18n.getLang('country_north_macedonia'),
+    ...defFlagConfig,
+    colors: [{"h":56,"s":81,"v":97}, {"h":358,"s":85,"v":85}],
+  },
+  {
+    id: 161,
+    name: I18n.getLang('country_werder_bremen'),
+    ...defFlagConfig,
+    colors: [{"h":0,"s":0,"v":100}, {"h":160,"s":80,"v":34}],
+  },
 ]

package/src/modules/flags/FlagItem.tsx

@@ -46,7 +46,6 @@ function FlagItem(props: RecommendMoodItemProps) {
       height: cx(45),
       marginTop: cx(-5),
       marginBottom: cx(-10),
-      fontWeight: 'bold',
     },
     gradientItem: {
       alignItems: 'center',
@@ -57,7 +56,7 @@ function FlagItem(props: RecommendMoodItemProps) {
     <Card
       style={[styles.card, props.style]}
       onPress={props.onPress}>
-      <View>
+      <View accessibilityLabel={'FlagItem'} accessibilityHint={`${props.title}`}>
         <Spacer height={cx(16)} />
         <View style={styles.headline}>
           <View style={{ flexDirection: 'row', flex: 1, paddingRight: cx(5), justifyContent: 'flex-start' }}>

package/src/modules/flags/FlagPage.tsx

@@ -207,7 +207,10 @@ const FlagPage = (props: { theme?: ThemeType }) => {
           placeholder={I18n.getLang('country_selection_textfield_headline_search')}
           style={{ marginHorizontal: cx(24), flex: 1 }}
         />
-        <TouchableOpacity style={{ paddingRight: cx(24) }}
+        <TouchableOpacity
+          style={{ paddingRight: cx(24) }}
+          accessibilityLabel={'RefreshButton'}
+          accessibilityHint={'RefreshButton'}
           onPress={() => {
             showDialog({
               method: 'confirm',

package/src/newModules/energyConsumption/EnergyConsumptionActions.ts

@@ -10,10 +10,11 @@ import {
   getSpecifiedTimeDpReportLogs
 } from '@ledvance/base/src/models/TuyaApi'
 import { exportCsvFile, localeNumber, loopsText, monthFormat, monthFormatShort } from '@ledvance/base/src/utils/common'
-import { overDays } from '@ledvance/base/src/utils'
+import { overDays, xLog } from '@ledvance/base/src/utils'
 import dayjs from 'dayjs'
 import CustomParseFormat from 'dayjs/plugin/customParseFormat'
 import { isEmpty } from 'lodash'
+import { TYSdk } from 'tuya-panel-kit'
 import { DateType } from './co2Data'
 import { EnergyData } from './component/EnergyModal'
 import { OverviewItem } from './EnergyConsumptionPage'
@@ -39,6 +40,11 @@ export async function updatePrice(devId: string, energyData: EnergyData) {
   return await NativeApi.putJson(devId, 'energiepreise', JSON.stringify(energyData))
 }
 
+export async function resetElectricity(devId) {
+  const res = await TYSdk.apiRequest('tuya.m.dp.statistics.reset', {devId}, '1.0')
+  xLog('resetElectricity res', res)
+}
+
 export async function getElectricity(devId: string, addEleDpCode: string, date: string, dateType: DateType): Promise<OverviewItem[]> {
   let res: OverviewItem[] = []
   switch (dateType) {
@@ -175,83 +181,37 @@ function createZeroPaddingPoint(timePoint: dayjs.Dayjs): PowerDataItem {
 }
 
 /**
- * 获取设备功率数据（智能填充，高性能，避免在小间隔内插入0值）
+ * 获取设备功率数据
  * @param devId 设备ID
  * @param powerDpCode 功率数据点编码
  * @param interval 时间区间（分钟）
  * @returns 按时间排序的完整数据
  */
-export async function getPowerData(
-  devId: string,
-  powerDpCode: string,
-  interval: number
-): Promise<PowerDataItem[]> {
-  try {
-    const now = dayjs();
-    const endTime = now;
-    const startTime = now.add(-interval, TIME_UNIT);
-    const endTimeMs = endTime.valueOf();
-    const startTimeMs = startTime.valueOf();
-    const paddingIntervalMs = DATA_POINT_INTERVAL_SEC * 1000;
-    // 1. 请求已排序的实际数据
-    const dpResult = await getSpecifiedTimeDpReportLogs(
-      devId,
-      [powerDpCode],
-      'ASC',
-      startTimeMs.toString(),
-      endTimeMs.toString(),
-      RETRY_CONFIG
-    );
-    const validDpResult = Array.isArray(dpResult) ? (dpResult as DpReportSataData[]) : [];
-    const actualData: PowerDataItem[] = validDpResult
-      .map((dp) => {
-        const timeMs = dp.timeStamp * 1000;
-        if (timeMs < startTimeMs || timeMs > endTimeMs) return null;
-        return {
-          key: dayjs.unix(dp.timeStamp).format('HH:mm:ss'),
-          chartTitle: dayjs.unix(dp.timeStamp).format('MM/DD/YYYY HH:mm:ss'),
-          time: timeMs,
-          value: parseFloat(dp.value) / 10,
-        };
-      })
-      .filter((item): item is PowerDataItem => item !== null);
-    // 如果没有任何真实数据，则生成完整的预设0值数据作为兜底
-    if (actualData.length === 0) {
-      const finalData: PowerDataItem[] = [];
-      let currentTime = startTime;
-      while (currentTime.valueOf() < endTimeMs) {
-        finalData.push(createZeroPaddingPoint(currentTime));
-        currentTime = currentTime.add(DATA_POINT_INTERVAL_SEC, 'second');
-      }
-      return finalData;
+export async function getPowerData(devId: string, powerDpCode: string, interval: number): Promise<PowerDataItem[]> {
+  const now = dayjs()
+  const startTime = now.add(-1 * interval, 'minute').valueOf().toString()
+  const endTime = now.valueOf().toString()
+  const dpResult = await getSpecifiedTimeDpReportLogs(
+    devId,
+    [powerDpCode],
+    'ASC',
+    startTime,
+    endTime,
+    {
+      maxRetries: 5,
+      initialDelay: 1000,
+      maxDelay: 30000,
+      backoffFactor: 2
     }
-    // 2. 高性能线性填充
-    const finalData: PowerDataItem[] = [];
-    let lastTimeMs = startTimeMs; // 游标从查询区间的开始时间算起
-    // 遍历所有真实数据点
-    actualData.forEach((currentPoint) => {
-      // 从上一个点的时间开始，用 while 循环填充，直到下一个真实数据点之前
-      let paddingTimeMs = lastTimeMs + paddingIntervalMs;
-      while (paddingTimeMs < currentPoint.time) {
-        finalData.push(createZeroPaddingPoint(dayjs(paddingTimeMs)));
-        paddingTimeMs += paddingIntervalMs;
-      }
-
-      // 添加当前的真实数据点
-      finalData.push(currentPoint);
-      lastTimeMs = currentPoint.time; // 更新游标
-    });
-    // 3. 填充查询末尾的空白区域（从最后一个真实数据点到查询结束时间）
-    let paddingTimeMs = lastTimeMs + paddingIntervalMs;
-    while (paddingTimeMs < endTimeMs) {
-      finalData.push(createZeroPaddingPoint(dayjs(paddingTimeMs)));
-      paddingTimeMs += paddingIntervalMs;
+  ) as DpReportSataData[]
+  return dpResult.map(dp => {
+    return {
+      key: dp.timeStr,
+      chartTitle: dayjs.unix(dp.timeStamp).format('MM/DD/YYYY HH:mm:ss'),
+      time: dp.timeStamp * 1000,
+      value: parseFloat(dp.value) / 10
     }
-    return finalData;
-  } catch (error) {
-    console.error(`[getPowerData] 失败：devId=${devId}, powerDpCode=${powerDpCode}`, error);
-    return [];
-  }
+  })
 }
 
 export const exportEnergyCsv = (values: any[][], unit: string) => {

package/src/newModules/energyConsumption/EnergyConsumptionCard.tsx

@@ -98,7 +98,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: {
@@ -112,13 +112,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/newModules/energyConsumption/EnergyConsumptionChart/useEnergyData.ts

@@ -12,7 +12,7 @@ import { EnergyConsumptionChartProps } from '../EnergyConsumptionChart'
 
 export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string) => {
   const isFocused = useIsFocused()
-  const { addEleDpCode, powerDpCode, price, date, over365Days, over7Days, chartData } = params
+  const { addEleDpCode, powerDpCode, price, unit, date, over365Days, over7Days, chartData } = params
 
   const getDateType = useCallback((d: string) => {
     const datejs = dayjs(d)
@@ -34,6 +34,7 @@ export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string
     headlineText: params.headlineText,
     chartData: chartData.filter((item) => getDateType(date) !== DateType.Year || item.headlineText.startsWith(date)),
     price: isNaN(Number(price)) ? 0 : Number(price),
+    unit: unit,
     over365Days: over365Days,
     over7Days: over7Days,
     interval: 5,
@@ -49,7 +50,7 @@ export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string
   }, 5000, { immediate: true })
 
   // 副作用：获取数据
-  useUpdateEffect(() => {
+  useEffect(() => {
     state.loading = true
     if (state.chartType === ChartType.kWh) {
       getElectricity(devId, addEleDpCode, state.date, state.dateType)
@@ -143,6 +144,10 @@ export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string
         OrientationService.lockToPortrait()
       }
     }, []),
+    setPriceAndUnit: useCallback((newPrice: string, newUnit: string) => {
+      state.price = isNaN(Number(newPrice)) ? 0 : Number(newPrice)
+      state.unit = newUnit
+    }, []),
   }
 
   return { state, actions }

package/src/newModules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -147,7 +147,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,
@@ -160,7 +160,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',

package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx

@@ -1,3 +1,9 @@
+import Segmented from '@ledvance/base/src/components/Segmented'
+import { ChartType } from './co2Data'
+import { EnergyChartSection } from './EnergyConsumptionChart/EnergyChartSection'
+import { PowerChartSection } from './EnergyConsumptionChart/PowerChartSection'
+import { getStyles } from './EnergyConsumptionChart/styles'
+import { useEnergyData } from './EnergyConsumptionChart/useEnergyData'
 import React, { useEffect, useMemo } from "react";
 import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
 import { useNavigation, useIsFocused } from '@react-navigation/core'
@@ -95,6 +101,18 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
     const len = state.overviewList.length
     return state.overviewList?.length ? `${state.overviewList[len - 1].key} - ${state.overviewList[0].key}` : ''
   }, [state.overviewList])
+  const chartStyles = useMemo(() => getStyles(props.theme), [props.theme])
+  const chartParams = useMemo(() => ({
+    backTitle,
+    headlineText: chartHeadline,
+    chartData: state.overviewList,
+    price: state.price,
+    unit: state.unit,
+    addEleDpCode: params.addEleDpCode,
+    powerDpCode: params.powerDpCode,
+    date: (new Date()).getFullYear().toString(),
+  }), [backTitle, chartHeadline, state.overviewList, state.price, state.unit, params.addEleDpCode, params.powerDpCode])
+  const { state: chartState, actions } = useEnergyData(chartParams, devId)
 
   useInterval(() => {
       if (isFocused) {
@@ -204,6 +222,7 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
       const v = JSON.parse(res.data)
       state.price = v?.price || '0'
       state.unit = v?.unit
+      actions.setPriceAndUnit(v?.price, v?.unit || UnitList[0])
     } else {
       state.price = '0'
     }
@@ -213,6 +232,7 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
     updatePrice(devId, data).then()
     state.price = data.price || '0'
     state.unit = data.unit
+    actions.setPriceAndUnit(data.price, data.unit)
   }
 
   const getEnergyModeTitle = (value: boolean) => {
@@ -246,7 +266,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,
@@ -259,7 +279,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',
@@ -511,6 +531,23 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
               }}
             />
           </Card>
+          <Spacer/>
+          <ScrollView style={{marginHorizontal: cx(24)}}>
+            <Segmented
+              options={[
+                { label: I18n.getLang('chartdisplay_energy'), value: ChartType.kWh },
+                { label: I18n.getLang('chartdisplay_power'), value: ChartType.Watt },
+              ]}
+              value={chartState.chartType}
+              onChange={actions.setChartType}
+            />
+            {chartState.chartType === ChartType.kWh ? (
+              <EnergyChartSection state={chartState} actions={actions} params={chartParams} styles={chartStyles} theme={props.theme}
+                                  chartHeight={cx(400)}/>
+            ) : (
+              <PowerChartSection state={chartState} actions={actions} styles={chartStyles} theme={props.theme} chartHeight={cx(400)}/>
+            )}
+          </ScrollView>
           <Spacer />
           {/* Annual overview */}
           {!!state.price && <OverView

package/src/newModules/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/newModules/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/newModules/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/newModules/energyConsumption/component/EnergyModal.tsx

@@ -117,7 +117,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',
@@ -159,7 +159,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/newModules/energyConsumption/component/NewBarChart.tsx

@@ -11,24 +11,22 @@ const cx = Utils.RatioUtils.convertX
 
 interface BarChartProps {
   theme?: ThemeType
-  data: OverviewItem[],
-  price: number,
-  unit: string,
-  height: number,
+  data: OverviewItem[]
+  price: number
+  unit: string
+  height: number
 }
 
 const BarChartWithTouch = (props: BarChartProps) => {
-  const echarts = useRef()
+  const echarts = useRef<any>()
   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 dataX = data?.map(item => item.chartTitle)
+  const dataKwhY = data?.map(item => Number(item.value))
+  const dataPriceY = data?.map(item =>
+    ((isNaN(Number(item.value)) ? 0 : Number(item.value)) * price).toFixed(2)
+  )
+
   const maxValue = useMemo(() => {
     let max = Math.max(...dataKwhY)
     if (max < 0.1) {
@@ -48,134 +46,129 @@ const BarChartWithTouch = (props: BarChartProps) => {
     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,
-      }
-    },
-    grid: {
-      right: gridRight,
-    },
-    xAxis: {
-      data: dataX,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
+
+  const chartKey = useMemo(() => {
+    return `chart-${price}-${unit}`
+  }, [price, unit])
+
+  /** --- option 保持 useMemo，避免不必要重建 ---**/
+  const option = useMemo(() => {
+    return {
+      tooltip: {
         show: true,
-        color: props.theme?.global.secondFontColor,
-        interval: 'auto',
-        rotate: 45,
-        align: 'right',
-        verticalAlign: 'top',
-        showMinLabel: true,
-        showMaxLabel: true,
-      }
-    },
-    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)
-        },
-        color: props.theme?.global.secondFontColor,
+        triggerOn: 'click',
+        trigger: 'axis',
       },
-      nameTextStyle: {
-        fontSize: 14,
-        align: 'left',
-        padding: [0, 0, 0, cx(-30)],
-        color: props.theme?.global.secondFontColor,
-      },
-    }, {
-      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)
-        },
-        color: props.theme?.global.secondFontColor,
+      legend: {
+        show: true,
+        data: ['kWh', unit],
+        textStyle: {
+          color: theme?.global?.fontColor,
+        }
       },
-      nameTextStyle: {
-        fontSize: 14,
-        align: 'right',
-        padding: [0, cx(-30), 0, 0],
-        color: props.theme?.global.secondFontColor,
+      grid: { right: gridRight },
+      xAxis: {
+        data: dataX,
+        axisTick: { show: false },
+        axisLabel: {
+          show: true,
+          color: theme?.global?.secondFontColor,
+          interval: 'auto',
+          rotate: 45,
+          align: 'right',
+          verticalAlign: 'top',
+          showMinLabel: true,
+          showMaxLabel: true,
+        }
       },
-    }],
-    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: Math.max(maxValue, 0.02),
+          min: 0,
+          position: 'left',
+          axisLabel: {
+            formatter(value) {
+              const kwh = parseFloat(value)
+              let toFixed = 2
+              if (kwh >= 100) toFixed = 0
+              else if (kwh >= 10) toFixed = 1
+              return kwh.toFixed(toFixed)
+            },
+            color: theme?.global?.secondFontColor,
+          },
+          nameTextStyle: {
+            fontSize: 14,
+            align: 'left',
+            padding: [0, 0, 0, cx(-30)],
+            color: theme?.global?.secondFontColor,
           },
-          color: '#FFC2A9',
-          borderRadius: 2,
         },
-        barMaxWidth: 10,
-        select: {
+        {
+          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(value) {
+              const priceValue = parseFloat(value)
+              let toFixed = 2
+              if (priceValue >= 100) toFixed = 0
+              else if (priceValue >= 10) toFixed = 1
+              return priceValue.toFixed(toFixed)
+            },
+            color: theme?.global?.secondFontColor,
+          },
+          nameTextStyle: {
+            fontSize: 14,
+            align: 'right',
+            padding: [0, cx(-30), 0, 0],
+            color: theme?.global?.secondFontColor,
+          },
+        }
+      ],
+      series: [
+        {
+          name: 'kWh',
+          type: 'bar',
+          data: dataKwhY,
           itemStyle: {
-            borderColor: '#FFC2A9',
-          }
+            color: '#FFC2A9',
+            emphasis: { color: '#FFC2A9' },
+            borderRadius: 2,
+          },
+          barMaxWidth: 10,
+          selectedMode: 'single',
         },
-        selectedMode: 'single',
-      },
-      {
-        name: unit,
-        type: 'line',
-        data: dataPriceY,
-        yAxisIndex: 1,
-        smooth: true,
-        showSymbol: false,
-        color: '#F49431',
-        selectedMode: 'single',
+        {
+          name: unit,
+          type: 'line',
+          data: dataPriceY,
+          yAxisIndex: 1,
+          smooth: true,
+          showSymbol: false,
+          color: '#F49431',
+          selectedMode: 'single',
+        }
+      ],
+      dataZoom: {
+        start: 0,
+        type: 'inside',
+        zoomLock: true,
       }
-    ],
-    dataZoom: {
-      start: 0,
-      type: 'inside',
-      zoomLock: true,
-    },
-    customMapData: {}
-  }
+    }
+  }, [dataX, dataKwhY, dataPriceY, price, unit, maxValue, gridRight, theme])
+
   return (
     <View style={{ flex: 1 }}>
       <ECharts
-        option={option}
+        key={chartKey}
         ref={echarts}
+        option={option}
         height={height}
       />
     </View>

package/src/newModules/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,

package/src/newModules/mood/MoodItem.tsx

@@ -65,7 +65,6 @@ const MoodItem = (props: MoodItemProps) => {
       height: cx(45),
       marginTop: cx(-5),
       marginBottom: cx(-10),
-      fontWeight: 'bold',
     },
     moodTypeItem: {
       flexDirection: 'row',