Ractive Code

Template

<div class="mainBack">
    <table class="s-table">
        <tr>
            <td class="tableDataHeader view-superman-value">Meter</td>
            <td class="tableDataHeader view-superman-value">Description</td>
            <td class="tableDataHeader view-superman-value">Location</td>
            <td class="tableDataHeader view-superman-value" on-click="usage"><div class="tooltip">Usage<span class="tooltiptext">Click to sort writeDef</span></div></td>
        </tr>
        {{#myPoints}}
        <tr>
            <td class="tableData {{#if @index % 2 == 0}} s-even {{else}} s-odd{{/if}}" on-click="magicB">{{idDis}}</td>
            <td class="tableData {{#if @index % 2 == 0}} s-even {{else}} s-odd{{/if}}" on-click="magicB">{{equipRefDis}}</td>
            <td class="tableData {{#if @index % 2 == 0}} s-even {{else}} s-odd{{/if}}" on-click="magicB">{{siteRefDis}}</td>
            <td class="tableData {{#if @index % 2 == 0}} s-even {{else}} s-odd{{/if}}" on-click="magicB">{{writeDef.toFixed(2)}}{{unit}}</td>
        </tr>
        {{/myPoints}}
    </table>
</div>

This specific code returns the idDis, equipRefDis, siteRefDis, and writeDef from the query.  To return something different, just change the desired value to the new value in all three spots in the code.

Model

{
    data:
    {
        myPoints:[]
    }
}

This sets up myPoints to get the data from the query.  It also sets up ascending and descending order for when the header is clicked

Style

.mainBack{
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 5px;
    /*background-color: #f5f5f5;*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.s-table{
    width: 100%;
}
.tableDataHeader{
    height: 30px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    /*background-color: #d5d5d5;*/
}
.tableData{
    height: 30px;
    padding: 10px;
    border-radius: 5px;
}
.s-size{
    height: 30px;
    padding: 10px;
    border-radius: 5px;
}
.s-horizontal{
    display: flex;
    flex-direction: row;
}
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    font-size: 10px;
    font-weight: 100;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.s-horizontal{
    display: flex;
    flex-direction: row;
}
.s-even{
    background-color: #d2d2d2;
    font-weight: bold;
}

.s-odd{
    background-color: #c1c1c1;
    font-weight: bold;
}

s-pointer changes the cursor to a pointer to let the user know that the table headers are clickable

s-width will change the length of the table to the desired size the programer sets

INIT

this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
var usageAZ = true;
 this.ractive.on("magicB", function(event) {
    var item    = this.get(event.keypath);
    if (item)
    top.app.ShowRelatedBubbles(item.id, item.id, false, event);
});

this.ractive.on("usage", function(event) {
if (usageAZ === true){
finstack.eval('readAll(energy).map(row=> row.set("energyData",readById(row->id).hisRead(thisMonth).hisRollup(max,1mo).toRecList()[0]->v0)).sortr("writeDef")', function(data){
        var myValue = data.result.toObj();
        model.set('myPoints', myValue);
});
    usageAZ = false;
}
else{
    finstack.eval('readAll(energy).map(row=> row.set("energyData",readById(row->id).hisRead(thisMonth).hisRollup(max,1mo).toRecList()[0]->v0)).sort("writeDef")', function(data){
        var myValue = data.result.toObj();
        model.set('myPoints', myValue);
});
    usageAZ = true;
}
});
 

obtainData is what connects the Ractive model to the program, and the rest sorts the data

Program

var ractive = this;
finstack.eval('readAll(energy).map(row=> row.set("energyData",readById(row->id).hisRead(thisMonth).hisRollup(max,1mo).toRecList()[0]->v0))', function(data){
ractive.myPoints = data.result.toObj();
});

dataQuery is what is getting the query

How To Make your Own

• Bring Ractive out from components on the left side menu, and click on it to have the green outline
  
  
  
• Under properties open the ractive editor, and copy and paste from the Ractive Code given above for template, model, style, and init
• After copying and pasting, should look like the screenshots below
  
  
  
  
• After saving go to programs and add a new program
  
  
  • Name your program, and set the program target filter to stackRactive
  • Top right of program editor, click the three dots, and select variables
  • Click the gear that appears as you hover over this
  • turn Invokes the Function on and change the dropdown to Custom Event
  • Type in obtainData in the line below and save
  • Copy and paste the above code for program into the main part and save
    
• Go under properties and select the advanced tab
• On the bottom left select the plus icon
• Call it dataQuery, and next to it define the query you want to be displayed
• Below is what we set as our query, but it can be changed for a different output: 
  •  readAll(energy).map(row=> row.set("energyData",readById(row->id).hisRead(thisMonth).hisRollup(max,1mo).toRecList()[0]->v0))
• Save and you're done!