Timeline widget

[ricardoj (Ricardo Jorge)]

I changed the code of another widget and this is the resulting view.

The original is at the link below:

Oh-chart multiple Switch items timeline widget

I have been trying to move away from Grafana. It’s one more thing to manage, and is quite tricky to get looking good and set up, and doesn’t always integrate perfectly with OpenHAB; zooming etc. I’ve seen a few posts requesting a way to show multiple switch items in a timeline similar to HA. I’ve managed to hack together something that might be of interest to people. And maybe someone is clever enough to help me make this work with a repeater somehow to make it easier to populate and add/remo…

I would like to be able to create a version that automatically takes the number of items and creates the code.

The current version has a fixed number (6) of items.

Can anyone help?

uid: motionHistory
tags: []
props:
  parameters:
    - default: Timeline
      description: A text prop
      label: Card Title
      name: cTitle
      required: false
      type: TEXT
    - default: Device-1,Device-2,Device-3,Device-4,Device-5,Device-6
      description: A text prop
      label: Locations
      name: locations
      required: false
      type: TEXT
    - default: gItem-1,gItem-2,gItem-3,gItem-4,gItem-5,gItem-6
      description: A text prop
      label: Graphical Items Elements
      name: gItems
      required: false
      type: TEXT
    - default: "20"
      description: A text prop
      label: Line Height
      name: height
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 30, 2024, 10:09:46 AM
component: f7-card
config:
  noShadow: true
  style:
    background-color: green
    height: 200px
  title: =props.cTitle
slots:
  default:
    - component: oh-chart
      config:
        label: Motion history
        period: 12H
      slots:
        dataZoom:
          - component: oh-chart-datazoom
            config:
              show: true
              type: inside
              xAxisIndex:
                - 0
                - 1
                - 2
                - 3
                - 4
                - 5
        grid:
          - component: oh-chart-grid
            config:
              height: 20
              left: 120
              right: 20
              top: 50
          - component: oh-chart-grid
            config:
              height: 20
              left: 120
              right: 20
              top: 70
          - component: oh-chart-grid
            config:
              height: 20
              left: 120
              right: 20
              top: 90
          - component: oh-chart-grid
            config:
              height: 20
              left: 120
              right: 20
              top: 110
          - component: oh-chart-grid
            config:
              height: "20"
              left: 120
              right: 20
              top: 130
          - component: oh-chart-grid
            config:
              height: 20
              left: 120
              right: 20
              top: "150"
        series:
          - component: oh-time-series
            config:
              gridIndex: 0
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: =props.gItems.split(",")[0]
          - component: oh-time-series
            config:
              gridIndex: 1
              type: line
              xAxisIndex: 1
              yAxisIndex: 1
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: =props.gItems.split(",")[1]
          - component: oh-time-series
            config:
              gridIndex: 2
              type: line
              xAxisIndex: 2
              yAxisIndex: 2
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: =props.gItems.split(",")[2]
          - component: oh-time-series
            config:
              gridIndex: 3
              type: line
              xAxisIndex: 3
              yAxisIndex: 3
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: =props.gItems.split(",")[3]
          - component: oh-time-series
            config:
              gridIndex: 4
              type: line
              xAxisIndex: 4
              yAxisIndex: 4
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: =props.gItems.split(",")[4]
          - component: oh-time-series
            config:
              gridIndex: 5
              type: line
              xAxisIndex: 5
              yAxisIndex: 5
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: =props.gItems.split(",")[5]
        tooltip:
          - component: oh-chart-tooltip
            config:
              show: false
        xAxis:
          - component: oh-time-axis
            config:
              axisLabel:
                show: false
              axisTick:
                show: false
              gridIndex: 0
          - component: oh-time-axis
            config:
              axisLabel:
                show: false
              axisTick:
                show: false
              gridIndex: 1
          - component: oh-time-axis
            config:
              axisLabel:
                show: false
              axisTick:
                show: false
              gridIndex: 2
          - component: oh-time-axis
            config:
              axisLabel:
                show: false
              axisTick:
                show: false
              gridIndex: 3
          - component: oh-time-axis
            config:
              axisLabel:
                show: false
              axisTick:
                show: false
              gridIndex: 4
          - component: oh-time-axis
            config:
              axisLabel:
                show: false
              axisTick:
                show: false
              gridIndex: 5
        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0
              name: =props.locations.split(",")[0]
              nameGap: -20
              nameTextStyle:
                align: right
              offset: 10
              position: left
          - component: oh-value-axis
            config:
              gridIndex: 1
              name: =props.locations.split(",")[1]
              nameGap: -20
              nameTextStyle:
                align: right
              offset: 10
          - component: oh-value-axis
            config:
              gridIndex: 2
              name: =props.locations.split(",")[2]
              nameGap: -20
              nameTextStyle:
                align: right
              offset: 10
          - component: oh-value-axis
            config:
              gridIndex: 3
              name: =props.locations.split(",")[3]
              nameGap: -20
              nameTextStyle:
                align: right
              offset: 10
          - component: oh-value-axis
            config:
              gridIndex: 4
              name: =props.locations.split(",")[4]
              nameGap: -20
              nameTextStyle:
                align: right
              offset: 10
              position: left
          - component: oh-value-axis
            config:
              gridIndex: 5
              name: =props.locations.split(",")[5]
              nameGap: -20
              nameTextStyle:
                align: right
              offset: 10

[JustinG]

@ricardoj

I would like to be able to create a version that automatically takes the number of items and creates the code.

I have not done a dive into the chart code recently, but I think that this is still not supported. The oh-chart component, is not the same system as the other basic components (because it ultimately sends its configuration to a different library). So things like the oh-repeater which would allow you to do this in other instances, don’t work here.

[ricardoj (Ricardo Jorge)]

Thanks for clarifying.

So the widget cannot be automated at this time.