Bar-type widget based on apache echarts?

[11194 (Вася Пупкин)]

Hi, is it possible to create bar-type widget, maybe apache echarts based? Managed to create humidity widget like that:

uid: widget_gauge
tags: []
props:
  parameters:
    - context: item
      description: Humidity value
      label: Item
      name: item
      required: true
      type: TEXT
    - context: number
      description: The height of widget
      label: Height
      name: height
      required: false
      type: TEXT
timestamp: Dec 25, 2022, 3:23:18 PM
component: oh-chart
config:
  height: =props.height+"px"
  style:
    background: transparent
slots:
  series:
    - component: oh-data-series
      config:
        radius: 100%
        type: gauge
        startAngle: 0
        endAngle: 360
        axisLine:
          lineStyle:
            width: =props.height/10
            color:
              - - 1
                - white
            shadowColor: rgba(0, 0, 0, 0.5)
            shadowBlur: 10
        axisTick:
          show: false
        splitLine:
          show: false
        axisLabel:
          show: false
    - component: oh-data-series
      config:
        radius: 84%
        splitNumber: 3
        type: gauge
        min: 0
        max: 100
        data:
          - value: =Number.parseFloat(items[props.item].state)
        axisLine:
          lineStyle:
            width: =props.height/8
            color:
              - - 0.2
                - red
              - - 0.35
                - yellow
              - - 0.6
                - "#23C703"
              - - 1
                - blue
        axisTick:
          show: false
        splitLine:
          show: false
        axisLabel:
          show: false
        detail:
          show: false
        pointer:
          offsetCenter:
            - 0
            - 10%
          icon: path://M98.3,111.6l17.1-88.1l17.7,88.5l0,0c2,6.2,0.5,13.4-4.4,18.4c-15.1,14.8-36.7-2.8-30.3-19.2L98.3,111.6z
          keepAspect: true
          length: 100%
          width: =props.height
          itemStyle:
            color: "#fff"
        anchor:
          show: true
          size: =props.height/2.5
          itemStyle:
            color: DeepSkyBlue
            borderColor: "#000"
            borderWidth: 1
          keepAspect: true
          offsetCenter:
            - 0
            - 70%
          icon: path://M155.9,114c0-18.3-39.1-62.9-39.1-62.9S77.7,95.6,77.7,114C78,157.5,155.7,157.4,155.9,114z

And now I want to draw something like that with a bar inside, dynamically changing it’s height:

Is it possible, @crnjan ?

[crnjan]

I guess not using echarts, but you can try css way … found this example and migrated it to MainUI with some minor modifications (please note I’m no CSS expert so there are probably better ways to do it):

uid: widget_cf9d3a29b5
tags: []
props:
  parameters:
    - context: item
      description: An item to control
      label: Item
      name: item
      required: true
      type: TEXT
    - description: A text prop
      label: Max
      name: max
      required: false
      type: TEXT
    - description: A text prop
      label: Min
      name: min
      required: false
      type: TEXT
    - description: A text prop
      label: Title
      name: title
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 6, 2023, 12:21:45 AM
component: f7-card
config:
  title: =props.title
  stylesheet: >
    .thermometer{
        margin:32px auto;
        width:22px;
        height:150px;
        display:block;
        font:bold 14px/152px helvetica, arial, sans-serif;
        text-indent: 36px;
        white-space: nowrap;
        background: linear-gradient(top, #fff 0%, #fff 50%, #db3f02 50%, #db3f02 100%);
        border-radius:22px 22px 0 0;
        border:5px solid #4a1c03;
        border-bottom:none;
        position:relative;
        box-shadow:inset 0 0 0 4px #fff;
        color:#4a1c03;
        z-index:10
    } .bulb{
        margin:auto;
        content:' ';
        width:44px;
        height:44px;
        display:block;
        position:relative;
        bottom:40px;
        background:#db3f02;
        border-radius:44px;
        border:5px solid #4a1c03;
        box-shadow:inset 0 0 0 4px #fff;
    } .container{
        margin:auto;
        width:14px;
        position:relative;
    } .fill{
        bottom:78px;
        width:14px;
        display:block;
        position:absolute;
        background:#db3f02;
        border-radius:44px;
        z-index:12
    }
slots:
  default:
    - component: Label
      config:
        class: thermometer
        text: =@props.item
    - component: div
      config:
        class: bulb
    - component: div
      config:
        class: container
      slots:
        default:
          - component: div
            config:
              class: fill
              style:
                height: =((Number.parseFloat(@props.item) - Number.parseFloat(props.min || 0)) / (Number.parseFloat(props.max || 40) - Number.parseFloat(props.min || 0)) * 140 + 10) + "px"

usage

- component: widget:widget_cf9d3a29b5
    config:
    item: gOutdoor_WeatherStation_OutdoorTemperature
    title: Outdoor
    max: "40"
    min: "0"

where min and max can be omitted (0 and 40 are default values). Example:

Did not test it throughly, but should give you an idea on how to proceed …