Date Selector Brick
I want to use Date selector brick.
-How Can i put internal filters in below Jacasvript code to restrict the data flowing to this card? (similar to card filters)?
-How can I refer best modes here?
Code starts here:
// DDX Bricks Wiki - https://developer.domo.com/docs/ddx-bricks/getting-started-using-ddx-bricks
// Tips for getting started, linking to Domo data and debugging your app
// Step 1. Select your data from the link in the bottom left corner
// Step 2. Style your chart using the following properties
//--------------------------------------------------
// Properties
//--------------------------------------------------
var sortOnTotals = 'Default'; //'None', 'Ascending', 'Descending', 'A-Z', 'Z-A'
var dataLabelText = ''; //'%_VALUE'
var xAxisTitle = 'Sales Motion';
var yAxisTitle = 'Product ACV USD';
var chartMargin = 20; //space to leave around chart (in pixels)
var enableFiltering = true; //set to false to disable page filtering (cardbus)
//--------------------------------------------------
// For ultimate flexibility, modify the code below!
//--------------------------------------------------
//Available globals
var domo = window.domo; // For more on domo.js: https://developer.domo.com/docs/dev-studio-guides/domo-js#domo.get
var datasets = window.datasets;
var DomoPhoenix = window.DomoPhoenix;
var chartContainer = document.getElementById('myDiv'); //get "myDiv" from the html tab
var buttonGroup = document.getElementById("btn-group");
//Data Column Names
var dataDateColumnName = "Date";
var dataNameColumnName = 'Name';
var dataValueColumnName = 'Value';
var dataSeriesColumnName = 'Series';
// Form the data query: https://developer.domo.com/docs/dev-studio-guides/data-queries
var fields = [dataNameColumnName, dataSeriesColumnName, dataValueColumnName, dataDateColumnName];
var groupby = [dataNameColumnName, dataSeriesColumnName ];
var dategrain = [dataDateColumnName + ' by year'];
var query = /data/v1/${datasets[0]}?limit=100000&fields=${fields.join()}&dategrain=${dategrain.join()}&groupby=${groupby.join()}
;
var years = [2023,2022];
var allData;
getTheData();
//Get all the years represented in the data and add year controls
function getTheData(){
//Form the year query
var yearQuery = /data/v1/${datasets[0]}?fields=
+ dataDateColumnName + &dategrain=${dategrain.join()}
;
Promise.all([
domo.get(query),
domo.get(yearQuery)
]).then(function([chartData, yearResult]){
if (yearResult && yearResult.length > 0) {
buildYearSelector(yearResult);
}
allData = chartData;
var yearData = chartData.filter(d => d.Year == years[0]);
chartIt(yearData);
});
}
function buildYearSelector(yearResult){
for(var i = 0; i < yearResult.length; i++) {
years.push(yearResult[i].Year);
addSelector(yearResult[i].Year, i);
}
}
// Read more about data types and mappings here: https://domoapps.github.io/domo-phoenix/#/domo-phoenix/api
var columns = [
{
type: DomoPhoenix.DATA_TYPE.STRING,
name: dataNameColumnName,
mapping: DomoPhoenix.MAPPING.ITEM,
},
{
type: DomoPhoenix.DATA_TYPE.STRING,
name: dataSeriesColumnName,
mapping: DomoPhoenix.MAPPING.SERIES
},{
type: DomoPhoenix.DATA_TYPE.DOUBLE,
name: dataValueColumnName,
mapping: DomoPhoenix.MAPPING.VALUE
}
];
var chart;
var cardBus = new CardBus();
function chartIt(data){
// Set a chart type using the correct enum: https://domoapps.github.io/domo-phoenix/#/domo-phoenix/properties
var chartType = DomoPhoenix.CHART_TYPE.STACKED_BAR;
var propertyOverrides = {
font_size: 'Larger',
total_sort: sortOnTotals,
datalabel_text : dataLabelText || undefined,
title_x : xAxisTitle || undefined,
title_y : yAxisTitle || undefined,
};
// Set your "Chart Options": https://domoapps.github.io/domo-phoenix/#/domo-phoenix/api
var size = getChartSize();
var options = {
width: size.width,
height: size.height,
properties: propertyOverrides
};
// Create the Phoenix Chart
var phoenixData = {columns: columns, rows: data};
chart = new DomoPhoenix.Chart(chartType, phoenixData, options);
// Append the canvas element to your div
chartContainer.appendChild(chart.canvas);
chartContainer.style.margin = chartMargin + 'px';
// Handle click events
enableFiltering && cardBus.addChart(chart);
// Render the chart when you're ready for the user to see it
chart.render();
return chart;
}
function getChartSize(){
var buttonGroupOffset = buttonGroup.offsetHeight;
return {
width: window.innerWidth - chartMargin * 2,
height: window.innerHeight - (chartMargin * 2) - buttonGroupOffset,
}
}
window.addEventListener && window.addEventListener('resize', function(){
var size = getChartSize();
chart && chart.resize(size.width, size.height);
});
function addSelector(year, index) {
var input = document.createElement("input");
var radioName = "btnradio" + (index+1);
input.setAttribute("type", "radio");
input.setAttribute("class", "btn-check");
input.setAttribute("name", "btnradio");
input.setAttribute("id", radioName);
input.setAttribute("autocomplete", "off");
input.setAttribute("data-index", index);
if (index === 0) input.checked = true;
input.onclick = function(){
setToYear(year);
}
var label = document.createElement("label");
label.setAttribute("class", "btn btn-outline-primary");label.setAttribute("for", radioName);
label.innerHTML = year;
buttonGroup.appendChild(input);
buttonGroup.appendChild(label);
}
function setToYear(year) {
var yearData = allData.filter(d => d.Year == year);
var phoenixData = {columns: columns, rows: yearData};
chart.update(phoenixData);
}
function CardBus() {
var charts = [];
function triggerBus(srcChart, ev){
charts.forEach(function(chart) {
if(srcChart == chart){
var isHighlightEvent = ev.highlight !== undefined;
var isDrillEvent = ev.applyfilters !== undefined;
if(isHighlightEvent){
var filters = ev.highlight;
chart.highlight(filters);
}
if(isDrillEvent){
var filters = ev.applyfilters;
console && console.log("Drill event", filters);
if (filters != null){
for (var i=0; i < filters.length; i++){
filters[i].operator = filters[i].operand;
}
}
domo.filterContainer(filters);
}
}
})
}
function addChart(chart){
charts.push(chart);
chart.addEventListener('cardbus', (ev) => triggerBus(chart, ev));
}
return {
addChart: addChart,
triggerBus: triggerBus,
};
}
Best Answer
-
You can filter the data being pulled into your card directly from the dataset using a where clause in your domo.get operation. Refer to
As for query beast modes there are specific flags that need to be set. Domo already provides a Beast Modes brick example for reference here:
Depending on which base Brick you're using it may or may not have been built to allow querying beast modes so I'd recommend using this example app as a starting point.
**Was this post helpful? Click Agree or Like below**
**Did this solve your problem? Accept it as a solution!**0
Answers
-
You can filter the data being pulled into your card directly from the dataset using a where clause in your domo.get operation. Refer to
As for query beast modes there are specific flags that need to be set. Domo already provides a Beast Modes brick example for reference here:
Depending on which base Brick you're using it may or may not have been built to allow querying beast modes so I'd recommend using this example app as a starting point.
**Was this post helpful? Click Agree or Like below**
**Did this solve your problem? Accept it as a solution!**0
Categories
- All Categories
- 1.8K Product Ideas
- 1.8K Ideas Exchange
- 1.6K Connect
- 1.2K Connectors
- 300 Workbench
- 6 Cloud Amplifier
- 9 Federated
- 2.9K Transform
- 101 SQL DataFlows
- 623 Datasets
- 2.2K Magic ETL
- 3.9K Visualize
- 2.5K Charting
- 748 Beast Mode
- 60 App Studio
- 41 Variables
- 690 Automate
- 177 Apps
- 455 APIs & Domo Developer
- 48 Workflows
- 10 DomoAI
- 36 Predict
- 15 Jupyter Workspaces
- 21 R & Python Tiles
- 397 Distribute
- 114 Domo Everywhere
- 276 Scheduled Reports
- 7 Software Integrations
- 127 Manage
- 124 Governance & Security
- 8 Domo Community Gallery
- 38 Product Releases
- 10 Domo University
- 5.4K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 109 Community Announcements
- 4.8K Archive