Date Selector Brick

MichalFabich
MichalFabich Member
in Apps

I want to use Date selector brick.

image.png

-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,
};
}

image.png

Tagged:

Best Answer

Answers

Categories