In ColdFusion, a date will be represented each as a date and as a quantity. And when you would possibly simply get via your total profession with out realizing about “numeric dates”, this CFML language function has some actually neat advantages. For instance, we will use flooring(date) with the intention to get the numeric illustration of the day on which a date happens. This permits us to shortly “bucket” a set of dates by day in ColdFusion.
Yesterday at work, I used to be constructing a easy bar chart in ColdFusion utilizing CSS Flexbox and “exercise” information. Basically, I used to be taking 30-days price of knowledge, slotting every worth right into a day-based bucket utilizing the aforementioned flooring(date) method, after which charting the depend of values in every bucket.
To see how numeric dates make this enjoyable and straightforward, let’s first generate some pattern information. For this demo, I created a perform that can randomly create exercise gadgets between two dates:
CAUTION: That is truly operating on Lucee CFML and makes use of some Lucee-specific syntax (
loop occasions).
<cfscript>
/**
* I generate a set of random exercise information between the 2 given dates. The
* generated exercise can occur at any time of the day on any date between the 2
* dates inclusive.
*/
public array perform getRandomActivityData(
required date fromDate,
required date toDate,
required numeric depend
) {
// Utilizing the numeric model of the ColdFusion dates, we will calculate the numeric
// delta between the dates. Then, producing random dates turns into a matter of
// selecting a decimal worth between the 2 end-dates after which changing that
// random worth again right into a native ColdFusion date.
var from = ( fromDate * 1 );
var to = ( toDate * 1 );
var delta = ( to - from );
var values = [];
loop occasions = depend {
values.append({
createdAt: dateAdd( "d", 0, ( from + ( delta * rand() ) ) ),
motion: "One thing occurred...."
});
}
return( values );
}
</cfscript>
Right here, we’re already starting to see the magic of numeric dates in ColdFusion. To generate random dates, all we’ve to do is convert the cap-dates into their numeric format; after which, decide a random decimal worth between the 2. This provides a random numeric date throughout the vary, which we then convert again to a local ColdFusion date utilizing dateAdd().
However that is not even the enjoyable a part of this weblog submit – that simply will get us the info to play with. Now, let us take a look at how can take that information and bucket it into day-based buckets. The next demo has two phases:
-
Create a knowledge construction to carry our chart-data. That is going to be a day-based timeline, the place every merchandise throughout the pattern information will likely be bucketed into an entry inside this information construction. It is essential that we create a full information construction first since we might not have exercise information for on daily basis. As such, it is essential that we pre-create buckets with no information in order that we do not rely upon the exercise information to drive creation.
-
Iterate over our pattern information, utilizing
flooring(date)to seek out the correct timeline bucket.
As soon as we’ve our exercise information bucketed and our timeline calculated, we then graph it utilizing some CSS Flexbox:
<cfscript>
embody "./random-data.cfm";
// Let's generate 30-days price of demo exercise information. An exercise entry can occur at
// any time of the day.
maxDate = now();
minDate = maxDate.add( "d", -30 );
fakeActivity = getRandomActivityData( minDate, maxDate, 1000 );
// In ColdFusion, dates will be represented as decimal values, the place the integer half
// of the numeric date represents the variety of days since ColdFusion's "Zero date"
// (to not be confused with Epoch, which is totally different); and the decimal a part of the
// numeric date represents the time of day. To construct up our bucketed timeline of
// dates, we will convert our min/max cap-dates to integers.
maxIndex = flooring( maxDate );
minIndex = flooring( minDate );
// Earlier than we study the demo information, let's build-out our timeline information construction. Every
// entry on this timeline will characterize a single day throughout the total time-span. As
// we built-out our timeline, we're additionally going to maintain an index of every entry that we
// can instantly entry utilizing the numeric model of a given date.
timeline = [];
dayIndex = {};
// By stepping over the numeric dates "1" at a time, every iteration of this loop will
// be capable to tackle a singular numeric date.
for ( i = minIndex ; i <= maxIndex ; i++ ) {
// On this loop, "i" is the numeric date. We will use this to each populate the
// index in addition to solid the numeric date again to a local ColdFusion date by
// including "no time" to it.
entry = dayIndex[ i ] = {
date: dateAdd( "d", 0, i ),
depend: 0,
values: []
};
// Regardless that we're including this worth to the timeline array, since structs in
// ColdFusion are passed-by-reference, we will use the dayIndex to mutate this
// construction at any time.
timeline.append( entry );
}
// Now that we've our primary timeline data-structure in place, let's loop over our
// demo exercise information and assign every one to one of many day-based buckets.
for ( report in fakeActivity ) {
// By changing the ColdFusion date (of the exercise) right into a floored-number, we
// get our bucket-index.
i = flooring( report.createdAt );
dayIndex[ i ].depend++;
dayIndex[ i ].values.append( report );
}
</cfscript>
<cfoutput>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<hyperlink rel="stylesheet" sort="textual content/css" href="https://www.bennadel.com/weblog/./kinds.css" />
</head>
<physique>
<h1>
Bucketing Dates With flooring() In ColdFusion
</h1>
<div class="chart">
<cfloop merchandise="entry" array="#timeline#">
<div class="datum">
<div class="bar" model="top: #( entry.depend * 5 )#px ;">
<div class="data">
Date: #dateFormat( entry.date, "mmm d, yyyy" )#<br />
Depend: #entry.depend#
</div>
</div>
</div>
</cfloop>
</div>
</physique>
</html>
</cfoutput>
Now if we run this ColdFusion code, we get the next output:
As you may see, we efficiently bucketed every exercise merchandise into the right day-based bucket utilizing our flooring(date) method. That is the ability of numeric dates in ColdFusion.
Additionally, how superior is ColdFusion that we will seamlessly transfer from a script-based syntax for our enterprise logic over to a tag-based syntax for our front-end templating. Freaking magical!
For the sake of completeness, right here is the CSS that I used to render the chart. It isn’t pertinent to the submit, essentially, however I’m simply eager on CSS Flexbox:
physique {
font-family: sans-serif ;
}
.chart {
background-color: #ffffff ;
border: 1px strong #cccccc ;
show: flex ;
padding: 4px 4px 4px 4px ;
place: relative ;
}
.datum {
background-color: #f5f5f5 ;
border-left: 2px strong #ffffff ;
border-radius: 2px 2px 2px 2px ;
border-right: 2px strong #ffffff ;
show: flex ;
flex: 1 1 auto ;
flex-direction: column ;
justify-content: flex-end ;
padding-top: 20px ;
}
.datum:first-child {
border-left-width: 0px ;
}
.datum:last-child {
border-right-width: 0px ;
}
.bar {
background-color: gold ;
border-radius: 2px 2px 0px 0px ;
}
.datum:hover .bar {
background-color: #ff3a83 ;
}
.data {
background-color: #121212 ;
border-radius: 5px 5px 5px 5px ;
coloration: #ffffff ;
show: none ;
font-size: 16px ;
left: 10px ;
line-height: 23px ;
padding: 10px 15px 10px 15px ;
place: absolute ;
prime: 10px ;
}
.datum:hover .data {
show: block ;
}
.datum:nth-child( 1 ):hover .data,
.datum:nth-child( 2 ):hover .data,
.datum:nth-child( 3 ):hover .data,
.datum:nth-child( 4 ):hover .data,
.datum:nth-child( 5 ):hover .data,
.datum:nth-child( 6 ):hover .data,
.datum:nth-child( 7 ):hover .data,
.datum:nth-child( 8 ):hover .data,
.datum:nth-child( 9 ):hover .data,
.datum:nth-child( 10 ):hover .data,
.datum:nth-child( 11 ):hover .data,
.datum:nth-child( 12 ):hover .data,
.datum:nth-child( 13 ):hover .data,
.datum:nth-child( 14 ):hover .data,
.datum:nth-child( 15 ):hover .data {
left: auto ;
proper: 10px ;
}
Anyway, comfortable Friday!
Wish to use code from this submit?
Try the license.
