Need help with creating Analysis "Cards".

  • 0
  • 1
  • Question
  • Updated 3 years ago
  • Answered
I would like to create Analysis "Cards" (See Attached image) using my quickbase data. My goal is to have my Quickbase record form look just like the attachment. 

Not sure how to go about formatting.


Is this possible? 


Thanks for any help/advice

Photo of rocketc

rocketc

  • 774 Points 500 badge 2x thumb

Posted 3 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,064 Points 20k badge 2x thumb
Yes it is possible using (1) script, (2) the QuickBase API along with (3) various JavaSrpt libraries. The approach I would take would be to build an data object that contains all the numeric and text data and merge it with a template that defines the HTML structure for the fonts, colors, layout or other presentation details. I would use the Mustache library to do the merging of data and the template.

The data object would look something like this:

data = {
  RevenueYTD: {
    value1: "$159M",
    value2: "+4.08 %",
    value3: "+6.24M"
  },
  ExpensesYTD: {
    value1: "$30.6M",
    value2: "+0.05 %",
    value3: "+15.3K"
  },
  ProfitYTD: {
    value1: "$129M",
    value2: "+5.09 %",
    value3: "+6.23M"
  },
  AvgOrderSize: {
    value1: "$955K",
    value2: "+13.54 %",
    value3: "+114K"
  },
  NewCustomers: {
    value1: "207K",
    value2: "+8.24 %",
    value3: "+15.8K"
  },
  MarketShare: {
    value1: "23%"
  },
  Chart: {
    title: "Top 5 Products - Monthly Sales",
    product1: "Mountain-100",
    product2: "Mountain-200",
    product3: "Road-150",
    product4: "Road-250",
    product5: "Touring-1000",
    data1: [10,30,40,50,40,20,30,50,50,60,40,20],
    data2: [40,50,40,40,20,20,30,50,50,60,10,30],
    data3: [20,40,20,30,50,50,60,10,30,40,50,40],
    data4: [10,30,40,50,40,40,20,20,30,50,50,60],
    data5: [50,40,40,20,20,30,50,50,60,10,30,40]
  }
}

Building up this data object would require multiple AJAX calls to (1) request the raw underlying data from your tables, (2)  summarize the data for the current an previous years, and (3) add the various adornments for $, %, M and K.

To build the HTML template you would need to create an appropriate layout and I would use flexbox for this. The chart itself would probably have to be created using HighCharts becuase a native QuickBase chart  would not insert itself very well and there are a lot of features you would loose control over. Then you would generate the HTML markup using the render() Mustache  method:

var markup = Mustache.render(template, data, partials);


The partials argument is an extra argument that supplies sub templates for the seven (six information panels and one chart) individual templates.

There are a lot of details to attend to but when fully developed the result will probably look incredibly compact.

I will not be creating a demo for this as a solution would depend a lot on how your data is organized in various tables. However you are fee to contact me off world if you want to pursue a solution.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,064 Points 20k badge 2x thumb
FWIW, I was able to generate a quick mock-up of these analysis cards using the data object referenced in my prior answer. See attached screenshot. My primary interest in doing this was to just gain greater familiarity with using the new CSS flexbox

CSS Flexible Box Layout Module Level 1
https://www.w3.org/TR/css-flexbox-1/

As outlined previously, I created a Mustache template using seven partials (six panels and one chart) as follows:

    <script id="template" type="text/html">
      <div class="grid">
        <div class="grid__row grid__row--lg">
          <div class="grid__item">
            <div class="grid">
              <div class="grid__row grid__row--lg">
                <div id="panel1" class="grid__item">{{> panel1}}</div>
                <div id="panel2" class="grid__item">{{> panel2}}</div>
              </div>
              <div class="grid__row grid__row--lg">
                <div id="panel3" class="grid__item">{{> panel3}}</div>
                <div id="panel4" class="grid__item">{{> panel4}}</div>
              </div>
              <div class="grid__row grid__row--lg">
                <div id="panel5" class="grid__item">{{> panel5}}</div>
                <div id="panel6" class="grid__item">{{> panel6}}</div>
              </div>
            </div>
          </div>
          <div class="grid__item">{{> chart}}</div>
        </div>
      </div>
    </script>

and merged the data object into the template with the Mustache render() method:

        var markup = Mustache.render(template, data, partials);


The chart itself was generated using a directly  coded HighChart based on this demo:


http://www.highcharts.com/demo/line-basic


Again my primary goal was to just get more experience using flexbox - every thing else is pretty easy although there are a lot of details to attend to.  The only part missing would be to gather the data from the various tables using AJAX calls and the QuickBase API and build the data object on which I generated the analysis cards - this is an easy task..

I should also mention that the CSS I used was taken from a public source and used a system of naming classes called BEM (Block Element Modifier) which uses double underscores and hyphens to demarcate the block, element and modifier names::


grid__row--lg

See:

https://css-tricks.com/bem-101/

I would like to develop a set of these BEM classes to make this type of GUI display easier to create.
Flexbox has wide support so I would expect to see more of it (even from QuickBase):
http://caniuse.com/#feat=flexbox
In any event this is just one of the dozens of experiments I create every week to keep up to pace with web development trends. If you want to pursue a solution based on this approach please feel free to contact me offline.