@ledvance/ui-biz-bundle 1.1.151 → 1.1.152

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.1.151",
+  "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/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',