Develop Reference

How to add a 'Business Year' condition to the AG Grid filter?

We use AG Grid and I can see that in the date filter we have 'This Week', 'This Quarter', 'This Month', 'This Year' etc. But our year is a business year that runs from April to March. How can I add that option to the filter?

Based on the date filters that you list, I am fairly sure that you are using AdapTable - our AG Grid add-on.
If so, then you simply need to add a Custom Predicate in the AdapTableQLOptions section of AdapTable Options and make it available for all Date column filters.
Based on your question something like this should do the trick:
adaptableQLOptions: {
customPredicateDefs: [
{
id: 'business_year',
moduleScope: ['filter'],
columnScope: {
DataTypes: ['Date']
},
label: 'Business Year',
handler: ({ value, inputs }) => {
const businessYearStart: Date = new Date(2022, 3, 1);
const businessYeaEnd: Date = new Date(2023, 2, 31);
return value >= businessYearStart && value <= businessYeaEnd;
},
},
],
}
This will make that filter appear in Quick Filter bar dropdown for all Column Filters.
See more at: https://docs.adaptabletools.com/guide/adaptable-ql-predicate-custom

By using an external framework, Is there a way to have an event always equal to true in the console without knowing the props itself?

I have an input field where when you click it it opens a calendar. This is coming from a library. The problem is that when I want to change the styles of the calendar and check them (props) in the console I can't.
So basically:
I click the input field, the calendar opens in a small modal
I see a div (referring to the calendar) appearing in the elements
section in the console
As soon as I click that div in the console (element section) the
calendar disappear from the screen so I cannot check the styles of
it
So the question is how can I display the calendar as the input field is always clicked by using the console? By using an external framerwork I do not see any onClick events. either any props that set the calendar to open, I tried to force all the element states (options on the devTools to force your input field to be focused:
DevTools force element state) but nothing works. Any ideas? enter code here
This is the code:
// DATE PICKER
const defaultFrom = {
year: new Date().getFullYear(),
month: new Date().getMonth(),
day: new Date().getDate(),
};
const defaultTo = {
year: new Date().getFullYear(),
month: new Date().getMonth(),
day: new Date().getDate(),
};
const defaultValue = {
from: defaultFrom,
to: defaultTo,
};
const [selectedDayRange, setSelectedDayRange] = useState(defaultValue);
/* const formatInputValue = () => {
if (!selectedDayRange) return new Date().getDate();
console.log(selectedDayRange, "day selected")
return `From: ${selectedDayRange.from.day}/${selectedDayRange.from.month}
To: ${selectedDayRange.to.day}/${selectedDayRange.to.month}`;
}; */
const myCustomLocale = {
// months list by order
months: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
// week days by order
weekDays: [
{
name: 'Monday',
short: 'M',
},
{
name: 'Tuesday',
short: 'T',
},
{
name: 'Wednesday',
short: 'W',
},
{
name: 'Thursday',
short: 'T',
},
{
name: 'Friday',
short: 'F',
},
{
name: 'Saturday',
short: 'S',
},
{
name: 'Sunday', // used for accessibility
short: 'S', // displayed at the top of days' rows
// isWeekend: true, // is it a formal weekend or not?
},
],
// just play around with this number between 0 and 6
weekStartingIndex: 4,
// return a { year: number, month: number, day: number } object
getToday(gregorainTodayObject) {
return gregorainTodayObject;
},
// return a native JavaScript date here
toNativeDate(date) {
return new Date(date.year, date.month, date.day);
},
// return a number for date's month length
getMonthLength(date) {
return new Date(date.year, date.month, 0).getDate();
},
// return a transformed digit to your locale
transformDigit(digit) {
return digit;
},
// texts in the date picker
nextMonth: 'Next Month',
previousMonth: 'Previous Month',
openMonthSelector: 'Open Month Selector',
openYearSelector: 'Open Year Selector',
closeMonthSelector: 'Close Month Selector',
closeYearSelector: 'Close Year Selector',
defaultPlaceholder: 'Select...',
// for input range value
from: 'from',
to: 'to',
// used for input value when multi dates are selected
digitSeparator: ',',
// if your provide -2 for example, year will be 2 digited
yearLetterSkip: 0,
// is your language rtl or ltr?
isRtl: false,
};
// component
<DateInput>
<DatePicker
value={selectedDayRange}
onChange={setSelectedDayRange}
inputPlaceholder="Select a date" // placeholder
// formatInputText={formatInputValue} // format value
inputClassName="my-custom-input" // custom class
shouldHighlightWeekends
colorPrimary="rgba(4, 173, 147, 255)" // added this
calendarClassName="custom-calendar" // and this
calendarTodayClassName="custom-today-day" // also thi
calendarClassName="responsive-calendar" // added this
locale={myCustomLocale} // custom locale object
data-testid="datepicker-input"
/>
</DateInput>
the reasons of checking the style of the calendar is because I need an option where the user can both select one day or a range of dates. But here in order to select just one day I need to double click, because it requires a FROM and a TO date. So I wanted to play with the style as well as with the props to let the user click just once if he does not have a range. In other words, if you click the same day, twice you got a range but on the same date. What I want is a single value when the user click one date and if the user select another date then the range option opens. But not sure how to implement it with this library because, first of all I cannot even open the calendar options. does it make sense?

You can use these options on the devTools to force your input field to be focused:
DevTools force element state

Pikaday - Trying to figure out why I'm getting an area when trying to set my own values.

const Pikaday = require('pikaday');
class datePickerModule {
init() {
let picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'DD/MM/YYYY',
yearRange: [1900, 2017],
maxDate: new Date(),
i18n: {
weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
}
});
}
}
Everything with this code works until I add the i18n: property.. I want to change the weekdaysShort to be in this format instead of mon, tues etc.
But for some reason I'm getting the below error when trying to do so.
Cannot read property '0' of undefined
It is worth noting that I am using Typescript to do this and this followed by Webpack.
Any Ideas why this simple code is breaking?
Ta

How to render vis.js timeline elements in Portuguese?

I was tasked to do a basic timeline using the components of vis.js, the question is that I'm from Brazil, and the timeline os vis.js displays months in English and I need them to be in Portuguese, studying the docs I found something about locale that allows the change in language, but as much as I tried, I couldn't change it.
It would be of great help if you could help me do it, here is my code regarding the change in language:
var options = {
width: "100%",
height: "381px",
timeAxis: {scale: 'year', step: 1},
zoomable: false,
maxMinorChars: 1,
locales: {
mylocale: {
current: 'atual',
time: 'tempo'
}
},
locale: 'mylocale',
format: {
minorLabels: {
day: 'DD',
month: 'MMMM',
year: 'YYYY'
},
majorLabels: {
day: 'DD',
month: 'MMMM',
year: 'YYYY'
}
}
};
Code was based on this links:
(http://visjs.org/docs/timeline/)
(http://momentjs.com/)

I know this question is old and I don't know if the version of vis.js supported this when you asked the question, but...
the minorLabels and majorLabels can be functions instead of an object and you can return whatever string you want. The functions take 3 arguments (date, scale, step).
options: {
format: {
minorLabels: function (date, scale, step) {
// return minor label with date in your locale
},
majorLabels: function (date, scale, step) {
// return major label with date in your locale
}
}
}

Customize amCharts date aggregation level

I would like to customize the date aggregate(axis labels) for amCharts, but I couldn't find a provision to do this in amCharts docs. Googling the same just pointed me to the dateFormats documentation.
amCharts provides an option for aggregating date by setting parseDates to true and adding dateFormats as shown below. This option aggregates date by doing some calculation by amCharts itself, let's say 25 days for week aggregation(Jan 5), 65 days for month aggregation(Jan) and so on, but I would like to customize the default date aggregation level.
parseDates: true,
dateFormats: [{
fff: 'period',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD', // day level
format: 'MM/DD/YYYY'
}, {
period: 'WW', // week level
format: 'MM/W/YYYY'
}, {
period: 'MM', // month level
format: 'MMM YYYY'
}, {
period: 'YYYY',
format: 'YYYY'
}]
I would like to change the default day, week, month levels in the following manner.
DAY LEVEL: <= 14 days
WEEK LEVEL: 14 < x <= 91
MONTH LEVEL: 91 < x <= 731
I would like to customize the date aggregation levels in amCharts. How could I do this? Any help would be appreciated. Thanks in advance.

You can't set this so precisely. The next period is chosen when there are too many items in the selected period. You can try adjusting minHorizontalGap value of CategoryAxis: http://docs.amcharts.com/3/javascriptcharts/CategoryAxis#minHorizontalGap (default is 75). If you make it smaller, more items will fit and you'll have more labels.