Widget configuration documentation

[chmre (Ernst Müller)]

Hi, I’m currently struggling building custom widgets.
There is some nice gauge widgets I found in the community.

when I try to mach what I’ see in the code with the documentation I found that most of the configuration properties are not documented.

so… how do other find these attribute and how to use them?

Thanks Ernst

uid: widget_gauge
tags: []
props:
  parameters:
    - context: item
      description: The current value
      label: Item
      name: item
      required: true
      type: TEXT
    - context: item
      description: The target value
      label: Target
      name: target
      required: false
      type: TEXT
    - context: item
      description: The min range
      label: MinItem
      name: minItem
      required: false
      type: TEXT
    - context: item
      description: The max range
      label: MaxItem
      name: maxItem
      required: false
      type: TEXT
    - context: number
      description: The min value
      label: Min
      name: min
      required: false
      type: TEXT
    - context: number
      description: The max value
      label: Max
      name: max
      required: false
      type: TEXT
    - context: string
      description: The name
      label: Name
      name: name
      required: false
      type: TEXT
    - context: number
      description: The height of widget
      label: Height
      name: height
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Oct 8, 2022, 6:19:35 PM
component: oh-chart
config:
  height: =props.height
slots:
  series:
    - component: oh-data-series
      config:
        anchor:
          itemStyle:
            color: "#000"
          show: true
          size: 20
        axisLabel:
          show: false
        axisLine:
          lineStyle:
            color:
              - - 1
                - "#fff"
            shadowBlur: 10
            shadowColor: rgba(0, 0, 0, 0.5)
            width: 10
        axisTick:
          show: false
        endAngle: -270
        pointer:
          show: false
        radius: 92%
        splitLine:
          show: false
        startAngle: 90
        title:
          show: false
        type: gauge
    - component: oh-data-series
      config:
        axisLabel:
          show: false
        axisLine:
          show: false
        axisTick:
          show: false
        data:
          - name: =props.name
            value: =Number.parseFloat(items[props.target].state)
        detail:
          show: false
        max: =props.max || 100
        min: =props.min || 0
        pointer:
          length: 80%
          show: =items[props.target].state !== "-"
        radius: 82%
        splitLine:
          show: false
        splitNumber: 6
        title:
          offsetCenter:
            - 0
            - -35%
        type: gauge
    - component: oh-data-series
      config:
        anchor:
          itemStyle:
            borderColor: "#000"
            borderWidth: 2
          show: true
          size: 14
        axisLabel:
          distance: 18
          fontSize: 18
        axisLine:
          lineStyle:
            color:
              - - =(Number.parseFloat(items[props.minItem].state) - props.min)/(props.max - props.min)
                - "#58D9F9"
              - - =(Number.parseFloat(items[props.maxItem].state) - props.min)/(props.max - props.min)
                - "#7CFFB2"
              - - 1
                - "#FF6E76"
            width: 10
        axisTick:
          distance: -10
          length: 10
        data:
          - name: =props.name
            value: =Number.parseFloat(items[props.item].state)
        detail:
          fontSize: 18
          formatter: ="{value}" + "\n" + items[props.item].state.split(" ")[1]
          offsetCenter:
            - 0
            - 45%
          valueAnimation: true
        max: =props.max || 100
        min: =props.min || 0
        pointer:
          icon: path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z
          itemStyle:
            color: "#f00"
          length: 100%
          offsetCenter:
            - 0
            - 10%
        radius: 82%
        splitLine:
          distance: -10
          length: 20
        splitNumber: 6
        title:
          offsetCenter:
            - 0
            - -35%
        type: gauge

[JustinG]

See here for some advice on basic widgets:

YAML Widget formatting

Honestly, in my experience you could do everything with rows because you can override the default flex settings (for that matter you could do nearly everything with just f7-blocks too). But I think that using the alternating rows and cols if you’re actually building a grid of component is just slightly cleaner and easier code to read. I do all my widget development in the MainUI editor. Nothing else that I’m aware of at the moment is going to give you the autocomplete ([ctrl] + [space]) fea…

However, the gauges you are referring to are charts and the chart system utilizes apache eCharts so the documentation for the complete list of those configurations is found on the eCharts pages.

Documentation - Apache ECharts