Make a custom html block look like a regular widget

Help
1

I need to use a custom html block for grabbing some data, but I would like to display it as if it was a regular losant widget (like a gauge widget for example). I’ve inspected the losant widgets on the dashboard and it looks like there’s a lot of stuff going on in the html. I was hoping there was an easy, out of the box way to do it.

1 Like
2

there’s a lot of stuff going on in the html

Indeed. :slight_smile: The Losant UI is a custom, React.js based web application that is a combination of proprietary code and third-party, open source libraries.

Some of the gauge types are powered by third-party libraries under the covers (needle, dial); others were created by our front-end developer team (battery, thermometer, tank, number). Which type were you hoping to replicate?

And also, I’m curious why you need to use a Custom HTML Block to do the data query instead of the simpler Gauge Block; there may be a separate feature request hidden in here.

3

I need to grab data that matches multiple queries and also query by the date range/time of the dashboard. As far as I know I don’t think there are any widgets that support that so I have to use a custom HTML block. I’d just like to replicate the look/responsiveness of the gauge block, but I’m not sure what the CSS would even look like for it. That’s why I was hoping there was some sort of workaround.

4

The Gauge Block has several different styles. Which style are you trying to replicate?

5

I was trying to replicate the number styling, but I think I figured it out! Might have to fiddle with it a little bit, but the below HTML ended up working for me. Not sure if all the classes are necessary. In the javascript part, you just need to grab the p tag with the “number” id and set it’s innerHTML to whatever you need.

<div class="sc-IQBGL bCGFcu react-grid-item cssTransforms react-resizable-hide react-resizable" style="background: rgb(245, 246, 247); height: 183px; width: 182px;">
  <div>
    <div>
      <div class="dashboard-block dashboard-block-gauge " style="background-color: rgb(245, 246, 247); overflow: hidden; position: absolute; inset: 0px;">
        <div style="position: absolute; inset: 5px; overflow: auto;">
          <div>
            <div style="position: absolute; inset: 0px; overflow: hidden;">
              <div style="text-align: center; display: table; width: 100%; height: 100%;">
                <div style="display: table-cell; vertical-align: middle;">
                  <span style="line-height: 1; color: rgb(17, 26, 43); font-family: &quot;Alternate Gothic&quot;, &quot;Franklin Gothic Medium&quot;, &quot;Arial Narrow&quot;, sans-serif; font-weight: bold; font-size: 55px;">
                    <div class="markdown gauge-value">
                      <p id="number" style=“margin: 0;”></p>
                    </div>
                  </span>
                  <span style="color: rgb(136, 140, 149); font-size: 15px;">
                    <div class="markdown gauge-label">
                      <p style=“margin: 0;”>WIDGET TITLE</p>
                    </div>
                  </span>
                </div>
              </div>
            </div>
            <div style="font-weight: normal; font-size: 10px; position: absolute; padding: 2px; z-index: 3; bottom: 0px; right: 0px; background: rgb(245, 246, 247); color: rgb(136, 140, 149);">an hour ago</div>
          </div>
        </div>
      </div>
      <div class="overlay"></div>
    </div>
  </div>
  <span class="react-resizable-handle react-resizable-handle-se"></span>
</div>

<style>
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>
1 Like
6

You could probably simplify that a great deal. A lot of those classes and inline styles are related to our drag-and-drop dashboard interface (“react-grid-item react-grid-item cssTransforms react-resizable-hide react-resizable”; styled components; and, honestly, some nine-year-old CSS tricks for centered vertical alignment that are overdue for modernization. :slight_smile:

As for the fonts, if necessary you can load them from https://app.losant.com/fonts/font-declarations.css.

All that said, are you sure the Indicator Block won’t suffice for your needs? It allows you to make multiple queries and determine the presentation of the block based on the results of those queries. And its style can be awfully close to the Gauge Block’s “Number” style.

7

Are you able to filter out devices by tags? The gist of the issue is being able to filter out devices with certain tags that have reported data within the date range specified by the dashboard and display the number of devices returned.

8

Not yet, but we do have a feature in progress (enabling advanced queries for more dashboard block types) that we hope to have out in October.

2 Likes