Remove decimals at oh-gauge | Remove thousand-sign at oh-value-axis

[asdfasf_adfas]

Hello,

I am using this widget:

uid: solar-power-widget
tags: []
props:
  parameters:
    - context: item
      description: GRID Power Item
      label: GRID Power Item FroniusSymoInverter_GridPower
      name: gridPower
      required: false
      type: TEXT
    - context: item
      description: SOLAR Power Item
      label: SOLAR Power Item FroniusSymoInverter_CurrentSolarYield
      name: solarPower
      required: false
      type: TEXT
    - context: item
      description: VOLTAGE Item
      label: VOLTAGE Item FroniusSmartMeter_ACVoltagePhase1
      name: voltageItem
      required: false
      type: TEXT
    - context: item
      description: CONSUMPTION Item
      label: CONSUMPTION Item FroniusSymoInverter_LoadPower
      name: consumption
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 30, 2024, 12:45:32 PM
component: f7-card
config:
  class:
    - padding-bottom
  style:
    --f7-popover-width: 760px
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top
        style:
          height: 100%
          top: 0px
          width: 100%
      slots:
        default:
          - component: f7-col
            config:
              class:
                - display-flex
                - flex-direction-column
                - align-content-space-around
              width: 20
            slots:
              default:
                - component: oh-gauge
                  config:
                    borderBgColor: gray
                    borderColor: >-
                     =(Number.parseFloat(items[props.gridPower].state) >= 0) ? 'red' :
                      (Number.parseFloat(items[props.gridPower].state) <= -300) ? 'lightblue' : green
                    borderWidth: 20
                    class:
                      - margin-top
                      - margin-bottom
                    item: =props.gridPower
                    labelText: NETZ
                    max: 5000
                    min: -5000
                    type: semicircle
                    valueFontSize: 25
                    valueTextColor: >-
                     =(Number.parseFloat(items[props.gridPower].state) >= 0) ? 'red' :
                      (Number.parseFloat(items[props.gridPower].state) <= -300) ? 'lightblue' : green
                - component: oh-gauge
                  config:
                    borderBgColor: gray
                    borderColor: =Number.parseFloat(items[props.solarPower].state) != 0 ? 'orange' :'blue'
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                    item: =props.solarPower
                    labelText: SOLAR
                    max: 850
                    min: 0
                    type: semicircle
                    valueFontSize: 25
                    valueTextColor: =Number.parseFloat(items[props.solarPower].state) != 0 ? 'orange' :'blue'
                - component: oh-gauge
                  config:
                    borderBgColor: gray
                    borderColor: rgba(202, 34, 121)
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                    item: =props.consumption
                    labelText: VERBRAUCH
                    max: 5000
                    min: 0
                    type: semicircle
                    valueFontSize: 25
                    valueTextColor: rgba(202, 34, 121)
                - component: f7-col
                  config:
                    width: 20
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: =Number.parseFloat(items[props.gridPower].state) <= 0 ? 'green':'red'
                          icon: =Number.parseFloat(items[props.gridPower].state) <= 0 ? 'f7:sun_max_fill':'if:mdi-transmission-tower-import'
                          style:
                            position: absolute
                          width: 30
                      - component: Label
                        config:
                          style:
                            font-size: 15px
                            font-weight: 400
                            line-height: 80px
                            text-align: left
                            white-space: nowrap
                          text: =(items[props.voltageItem].state)
                      - component: Label
                        config:
                          style:
                            color: =Number.parseFloat(items[props.gridPower].state) <= 0 ? 'green':'red'
                            font-size: 25px
                            font-weight: 500
                            line-height: 1px
                            text-align: left
                            white-space: nowrap
                          text: =Number.parseFloat(items[props.gridPower].state) <= 0 ? 'PV versorgt':'Netzbezug'
          - component: f7-col
            config:
              width: 80
            slots:
              default:
                - component: oh-chart
                  config:
                    chartType: ""
                    label: Leistung
                    period: 12h
                  slots:
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          type: inside
                    grid:
                      - component: oh-chart-grid
                        config:
                          containLabel: false
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    series:
                      - component: oh-time-series
                        config:
                          color: red
                          gridIndex: 0
                          item: =props.gridPower
                          name: Netz
                          type: line
                          xAxisIndex: 0
                          yAxisIndex: 0
                      - component: oh-time-series
                        config:
                          color: orange
                          gridIndex: 0
                          item: =props.solarPower
                          name: Solar
                          type: line
                          xAxisIndex: 0
                          yAxisIndex: 0
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                    yAxis:
                      - component: oh-value-axis
                        config:
                          gridIndex: 0
                          name: W

and this looks like that now:

How can I remove decimals at oh-gauge and the thousand-signs at oh-value-axis?

Thanks a lot in advance and BR
Edi

[rlkoshak (Rich Koshak)]

@asdfasf_adfas

How can I remove decimals at oh-gaug

Have you set the state description pattern on the Item to not show the decimal place? %.0f %UNIT% should do the trick.

If you have set the state description pattern appropriately already and it still shows the decimal places, set the value property of the oh-gague to =@props.gridPower which is a shortcut for showing the display state of the Item. Widget Expressions & Variables | openHAB

@asdfasf_adfas

and the thousand-signs at oh-value-axis?

I don’t think you can. I don’t see any way to do so but I’m not an expert in charts.

[JustinG]

Here’s an example (and a few posts below that an explanation) of how to use the echarts formatter functions which applies to the axis question:

OH4: Chart's don't want to follow unit configuration of the items

The charts use whatever data is stored in persistence. If you have not configured the unit metadata for the items, then what is stored in persistence is the default unit (in the case bytes). You can either adjust the unit metadata for the items, or change the labels on the chart. Here’s the docs for formatting the chart labels: In OH that looks like this. Here’s a chart with the default byte data from persistence. The axis is just the basic config: yAxis: - component: oh-value-axi…

The gauge is not from echarts, but uses the f7-gauge component:

Gauge Vue Component | Framework7 Vue Documentation

So you can set the display text to anything you want by defining the valueText property.

[ubeaut (Greg)]

For the gauge add a state description of the item you used in the gauge in the metadata and enter this:
%.0f

[asdfasf_adfas]

THX to all!

Both solved the problem:

Adding metadata unit with %.0f to the items and changing axis yaml to:

yAxis:
                      - component: oh-value-axis
                        config:
                          gridIndex: 0
                          axisLabel:
                             formatter: =v => `${v} W`
                          #name: W

THX and BR