org.webjars.bower:angular-cal-heatmap-directive
Advanced tools
WebJar for angular-cal-heatmap-directive
#Cal Heatmap AngularJS Directive#
This is an AngularJS directive for cal-heatmap http://kamisama.github.io/cal-heatmap/
##How to use it##
Use bower to install the library
$ bower install angular-cal-heatmap-directive
Create an index.html as shown below.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<title>Angular Cal Heatmap directive</title>
<link rel="stylesheet" type="text/css" href="bower_components/cal-heatmap/cal-heatmap.css">
</head>
<body ng-app="myapp">
<cal-heatmap></cal-heatmap>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/d3/d3.js"></script>
<script type="text/javascript" src="bower_components/cal-heatmap/cal-heatmap.js"></script>
<script type="text/javascript" src="bower_components/angular-cal-heatmap-directive/app/scripts/calHeatmap.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
The app.js is the application Angualar app. Add the dependency to the calHeatmap directive in the app.js as shown below.
angular.module('myapp',['calHeatmap']);
This will generate a default Cal Heatmap as shown below.
To add your own configuration, you can use config attribute as shown below.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<title>Angular Cal Heatmap directive</title>
<link rel="stylesheet" type="text/css" href="bower_components/cal-heatmap/cal-heatmap.css">
</head>
<body ng-app="myapp">
<cal-heatmap config="{domain:'year',range:1,cellSize:15}"></cal-heatmap>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/d3/d3.js"></script>
<script type="text/javascript" src="bower_components/cal-heatmap/cal-heatmap.js"></script>
<script type="text/javascript" src="bower_components/angular-cal-heatmap-directive/app/scripts/calHeatmap.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
This will produce the heatmap as shown below.
This directive supports most of the options supported by cal-heatmap library http://kamisama.github.io/cal-heatmap/#options
FAQs
WebJar for angular-cal-heatmap-directive
We found that org.webjars.bower:angular-cal-heatmap-directive demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.