g1eb / angular2-calendar-heatmap Goto Github PK

The demo screen just displays "Loading.." when I opened the link

Tooltip positioning logic is not considering relative position of the element within which heatmap is rendered. Its y position is computed on the basis of week-day and x position is computed based on the week number. But no consideration is made about the parent element position within which heat map is rendered. This causing me issues while rendering the tooltip because in my case heatmap component is added in between the page and its not even using 100% width.

Also, tooltip content is very tightly coupled. Is there a way we can customise tooltip. May be you can provide one more handler and we can handle on our own what to display in tooltip box when we hover on element.

Hi, this is a great project! It would be nice to be able to support values that are not measured as time. I have a requirement where I just want the number of occurrences in a day however because the map deals with totals and values as time it makes the month, week and day views blank.

Hi there,

I'm trying to import this to my Ionic project. For some reason it's not displaying ... Do you have an idea why?

Hi, i have followed your install guide and yet i'm getting an error.
I'm using angular 8 and the latest moment.js & d3.js library

I'm getting the following stack trace:
this.items.selectAll(...).data(...).enter(...).append(...).attr(...).attr(...).attr(...).attr(...).attr(...).on(...).style(...).on(...).on(...).transition is not a function
at CalendarHeatmap.push../node_modules/angular2-calendar-heatmap/dist/calendar-heatmap.js.CalendarHeatmap.drawGlobalOverview (:4500/defaultdashboards-project-project-modulemain-ui-ui-module.js:479)
at CalendarHeatmap.push../node_modules/angular2-calendar-heatmap/dist/calendar-heatmap.js.CalendarHeatmap.drawChart (:4500/defaultdashboards-project-project-modulemain-ui-ui-module.js:304)
at CalendarHeatmap.push../node_modules/angular2-calendar-heatmap/dist/calendar-heatmap.js.CalendarHeatmap.ngAfterViewInit (:4500/defaultdashboards-project-project-modulemain-ui-ui-module.js:224)
at callProviderLifecycles (:4500/vendor.js:86636)
at callElementProvidersLifecycles (:4500/vendor.js:86601)
at callLifecycleHooksChildrenFirst (:4500/vendor.js:86583)
at checkAndUpdateView (:4500/vendor.js:96816)
at callViewAction (:4500/vendor.js:97172)
at execEmbeddedViewsAction (:4500/vendor.js:97129)
at checkAndUpdateView (:4500/vendor.js:96807)

Hi!
I have long list of users and it is look like "overflowed stack"
How can I fix it? screenshot

The demo link is not working please check it thanks apart from that nice job...

Labels should be requested at runtime, to take account of the locale.

For example if you need the label for 'Week' you should call a function returning the label if such function is specified, or use the current behaviour.

I can contribute to the project myself, but I failed to build the project and produce a valid npm module.

Can you guide me a little ?

1. it possible to only display date range (e.g. last 6 months). If we're currently in january, the whole current year is displayed with 11 empty months ...
2. Is it possible to customize more in deep the colors ? I would like to avoid to display transparent dot

Hello,
Is this version compatible with angular 4 and latest version of d3 js?

Great job the calendar works just fine! I have few questions or maybe enhancements.

1. Ability to change the background color
2. Ability to show different dates with different colors (eg: Working days as green and holidays as red etc, or based on the type of meeting in a day change color)
3. Border between months. I have a sample image below which resembles these ideas

4. Also more documentation (I can help you with this)

Hello,
I get below error after including this statement import { CalendarHeatmap } from 'angular2-calendar-heatmap';

ERROR in Error encountered resolving symbol values statically. Could not resolve
angular2-calendar-heatmap relative to E:/angmarc/src/app/app.module.ts., resolv
ing symbol AppModule in E:/angmarc/src/app/app.module.ts, resolving symbol AppMo
dule in E:/angmarc/src/app/app.module.ts

Please suggest asap. Its urgent

Hi, I wonder if its possible to fetch the time period(in terms of timestamp range or start date/end date), from the heatmap.
I want to display some more data below the heatmap based on the time period.
Thank you in advance.

The import statement in the installation section is incorrect, to import the heatmap one needs to import 'angular2-calendar-heatmap' instead of 'calendar-heatmap'.

Is it possible to have something like this?
The year overview could still be monochromatic, but when showing specific projects like in week and day overview, it would be nice if they could have different colors. Maybe doing something like below..

"details": [{
    "name": "Project 1",
    "date": "2016-01-01 12:30:45",
    "value": 9192,
    "color": '#ff4500'
  }]

Hi,
I've followed as per the README and am encountering the same issues as the person below. I've reviewed all closed issues in case this is a known issue already resolved but couldn't find anything specifically relating to Angular versions 9+ (I'm using 10).

Cannot declare 'CalendarHeatmap' in an NgModule as it's not a part of the current compilation angular2 calendar heatmap

https://stackoverflow.com/questions/60834457/importing-angular2-calendar-heatmap-causes-jit-compilation-error

Error is:
Cannot declare 'CalendarHeatmap' in an NgModule as it's not a part of the current compilation.

So following other suggestions, I attempted something like https://stackoverflow.com/questions/60248428/angular-app-cannot-compile-after-update-from-v8-to-v9 (see below) and used MyCalendarHeatmap in the declarations. This just prints out the div (unsurprisingly).

@Component({
  selector: 'calendar-heatmap',
  template: `<div #heatmap></div>`
})
export class MyCalendarHeatmap extends CalendarHeatmap {}

I see recent questions (so am assuming people using relatively recent Angular versions) so thinking someone must have a workaround?

thanks

UPDATE: FIXED

Just needed to use the right hook.
For anyone else needing the info, I've added the full error message above.
I plonked the below directly above my @NgModule declaration, but you may wish to extract it out to a shared module and then import that module for neatness.

@Component({
  selector: 'calendar-heatmap',
  template: `<div #root></div>`
})
export class MyCalendarHeatmap extends CalendarHeatmap {}

Haven't used this fully yet, but it looks great - thanks!

I got an error when I try to build a production build.

..../src/$$_gendir/node_modules/angular2-calendar-heatmap/dist/calendar-heatmap.ngfactory.ts (10,21): Cannot find module 'calendar-heatmap'.

So I made a fresh ng environment and try it again. But still same issue.

Thank you for this great widget. I was wondering how one could use this heatmap with other kinds of data. For example I would like to use it display unemployment chronology similarly to bokeh plot here: https://bokeh.pydata.org/en/latest/docs/gallery/unemployment.html

ERROR in ./node_modules/angular2-calendar-heatmap/dist/calendar-heatmap.js
Module not found: Error: Can't resolve 'd3/index' in 'D:\projects\Angular 8\machstatz\node_modules\angular2-calendar-heatmap\dist