Get Indian financial year based on date

This function lets you get the start and end date of Indian financial year based on given date.

This can also be modified for US financial year.

function getCurrentFinancialYear(strDocDate) {

var startYear = "";

var endYear = "";

var docDate = new Date(strDocDate);

if ((docDate.getMonth() + 1) <= 3) {

startYear = docDate.getFullYear() - 1;

endYear = docDate.getFullYear();

} else {

startYear = docDate.getFullYear();

endYear = docDate.getFullYear() + 1;

}

return {startDate : "01-Apr-" + startYear, endDate: "31-Mar-" + endYear };

}

alert(getCurrentFinancialYear("4/1/2018").startDate);

React 16 not working in IE11, blank screen

I got these errors in IE11 and the React app was not rendering in IE11, it just shows a blank screen.

SCRIPT5009: 'fetch' is undefined
main.chunk.js (1020,3)

SCRIPT5009: 'Promise' is undefined
1.chunk.js (29037,9)


Fix,

Installed whatwg-fetch  and @babel/polyfill

npm install whatwg-fetch --save
npm install @babel/polyfill --save

After installation we need to include it in index.js

import 'whatwg-fetch';

import '@babel/polyfill';

This has to be done before importing React.

React JS set focus on a input

Use the prop autoFocus in a input to make it auto focus

eg:

<input autoFocus className="btn" type="text" />

Recharts - Show dashed line

If you need to show dashed line for a line chart use the below code.

<Line type="linear" dataKey="trend" strokeDasharray="3 3"
stroke="#69C568" dot={{strokeDasharray: 'none'}} />

You need to add property strokeDasharray="3 3" to the <Line /> You can change the values if needed.

The legend dots will also be plotted as dotted lines. If you want to remove that use the dot prop.

dot={{strokeDasharray: 'none'}}

React JS send custom parameter to onClick

If you need to send a custom parameter to your onClick event handler, do like this

<a href="" onClick={()=> {this.tabClicked("Exceptions")}}>Exceptions</a>

if you need to pass the event as well to the onClick handler use like this

<a href="" onClick={(evt)=> {this.tabClicked(evt,"Exceptions")}}>Exceptions</a>

and in your tabClicked() you can get the parameters like this

tabClicked(evt, tab) {

evt.preventDefault(); // Let's stop this event.

alert(tab); // should alert Exceptions

}

create-react-app custom build to subfolder

Add a key "homepage": "your-subfolder/"  in your package.json 
All static files will be loaded from "your-subfolder"

If there is no subfolder and you need to load from same folder you need to add the path as "./"

"homepage": "./",

Link Bootstrap to your React JS application.

Once you have already installed the Bootstrap using npm command do the below to include the Bootstrap in your React app


index.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

App.js (to test)

<button type="button" className="btn btn-primary">Primary</button>

The entire App.js will something like this

import React, { Component } from 'react'; 

class App extends Component { 

 render() { 
 return ( 
 <div> 
 <button type="button" className="btn btn-primary">Primary</button> 
 </div> );
 } 
} 
export default App;

Install old version of Bootstrap using npm

Go to your project folder and execute the below command 

npm install bootstrap@3.3.5 --save

This will install the bootstrap version 3.3.5 and save the entry in your package.json

Angular find the version of CLI

Find version of the Angular CLI using the command

ng --version 

or

ng -v

C:\Users\xxx>ng -v


This will show the version

C:\Users\xxxx>ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.1
Node: 9.11.1
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.1
@angular-devkit/core         0.7.1
@angular-devkit/schematics   0.7.1
@schematics/angular          0.7.1
@schematics/update           0.7.1
rxjs                         6.2.2

typescript                   2.7.2

Angular - deploy your app in a sub folder

 

If you want to deploy your app in a sub folder you need to add the build flag --base-href

This will set the <base href> in the html.

eg: ng build --prod --base-href=/dist/my-app/

Example

C:\Users\xxxx\Documents\works\ng\my-app>ng build --prod --base-href=/dist/my-app/

Date: 2018-08-01T09:13:50.591Z

Hash: 54082fcc1c77e8124a32

Time: 56271ms

chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]

chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]

chunk {2} polyfills.2f4a59095805af02bd79.js (polyfills) 59.6 kB [initial] [rendered]

chunk {3} main.ca74553da7e3e55d6410.js (main) 171 kB [initial] [rendered]

D3 tooltips - show tooltip in a different location

Sometimes you need to manually specify a target to act on. For instance, maybe you want the tooltip to appear over a different element than the one that triggered a mouseover event. You can specify an explicit target by passing an SVGElement as the last argument.

tip.show(data, target)

Check working example here 

The API for the above code is found here under Explicit targets

Get last element using D3

Method 1

You can use the selector :last-of-type to get the last element

var lastElement = parentObject.selectAll("rect:last-of-type");  

Method 2

Use selectAll and get the last element in array.

var lastElement = parentObject.selectAll("rect");

lastElement = lastElement[lastElement.length - 1]; // this will have the last element

Bootstrap 4 to Bulma conversion table

Bootstrap 4 class	Bulma class
.rows	.columns
.col	.column

Bulma - How to make text unselectable

Requirement: I want to restrict users selecting text in my website. How do I do this using Bulma

Use the class

.is-unselectable

See the Pen Bulma - make text unselectable by Kiran (@kiranvj) on CodePen.

Malayalam matrix screen

മലയാളം മാട്രിക്സ്

See the Pen Malayalam Matrix by Kiran (@kiranvj) on CodePen.

Bulma - left or right align an element

How to left or right align an element in Bulma

Use class .is-pulled-left to left align an element.

Use class .is-pulled-right to right align an element.

See the Pen Bulma - pull an element to right by Kiran (@kiranvj) on CodePen.

Code highlighter for blog

http://markup.su/highlighter

Bootstrap - show text in a single link

To show text in a single line you need to added the Bootstrap class "text-nowrap"

Example

<span class="nowrap">Your text here.</span>

JavaScript - Check if object is empty

function isEmptyObject ( obj ) {
    var name;
    for ( name in obj ) {
        return false;
    }
    return true;
}

JavaScript set object key by variable

ES6

var key = "name";
var person = {[key]:"John"};
console.log(person); // should print  Object { name="John"}

Before ES6

var person = {};
var key = "name";

person[key] /* this is same as person.name */ = "John";

console.log(person); // should print  Object { name="John"}

Give random colors to text in a page using D3

d3.selectAll("*").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});