Support for label override about angular2-calendar-heatmap HOT 18 CLOSED

Hi there! Thanks for the suggestion, sounds like a good idea to add this.

If you'd like to contribute, simply fork the repo, test your changes and submit a PR.

You don't have to build the project or generate the npm module.
Were you able to run the project in development?

from angular2-calendar-heatmap.

Ahh you mean I could test using the test app/module inside the app folder ?
What I wanted to do is to build the project and 'npm link' it in my real project.

from angular2-calendar-heatmap.

Oh I see, to build you can run npm run build - this should regenerate built files inside the dist folder. Using npm link creates a symlink and you can import the module in your project for testing.

Alternatively, you could use the demo included in the app folder.

Let me know if you run into anything, I can help with debugging.

from angular2-calendar-heatmap.

If I try to link the project in my project library it doesn't work :

ERROR: @angular/core/core.ts(756,18): Error during template compile of 'Component'
Function calls are not supported in decorators.
Unexpected value 'CalendarHeatmap in C:/Users/amoscatelli/Documents/Visual Studio Code/angular2-calendar-heatmap/dist/calendar-heatmap.d.ts' declared by the module 'NgxVisiontechMaterialModule in C:/Users/amoscatelli/Documents/Visual Studio Code/ngx-visiontech/projects/ngx-visiontech-material/src/lib/ngx-visiontech-material.module.ts'. Please add a @Pipe/@Directive/@component annotation.

How can I use the demo in the app folter ? That is not an angular project ...

from angular2-calendar-heatmap.

#15

from angular2-calendar-heatmap.

Please help me testing.
I am confident it made only safe changes but please help since I couln't test it. (Read previous comment).

Also please ensure the typings are exported and usable from outside the library.

from angular2-calendar-heatmap.

Hi! Thanks for submitting the PR, I had a quick look, couple of things:

1. to test the changes you can use the app that comes with the lib (in the app folder)

You can use something like https://www.npmjs.com/package/serve to serve the files from the root folder, it should automatically pick up the changes you've made in the src/calendar-heatmap.component.ts (your browser might cache the source files, make sure you use hard-refresh to see the changes)

2. The error I get right out of the gate is the missing dependency on line 2: import { UnaryFunction } from 'rxjs/interfaces';

To fix this you'd have to update rxjs requirement to use a newer version, and perhaps even include the rxjs-compat package. We'd have to see what else this would break then. Is there any other way to work around this dependency requirement?

3. This is a minor detail but did you commit everything at the same time? Hard to tell what the progression is of the changes without specific commits.

Could you see if you can test this on your machine using the method described above? Thanks!

from angular2-calendar-heatmap.

1. Ok I'll try thank you
2. I'll get rid of that dependency.
3. Yea sorry, maybe different commit would have been a better choice.

I'll test and let you know

from angular2-calendar-heatmap.

Ok now everything should work.
I tested everything (every input function I created) and it's good for me.
Let me know.

from angular2-calendar-heatmap.

Thanks again for the update! Looks like it's working on my end too, good stuff.

Could you provide an example of how you would use your changes to override the labels?
I'm curious to see this addition work the way you intended it/ need for your project :)

Also why did you remove the /dist folder from the repo? AFAIK it did have a purpose. I think it was that we were using dist files hosted on raw github for some demos before (such as jsfiddle)

from angular2-calendar-heatmap.

I will send you the complete example after the pull is accepted as I need the new package (I didn't manage to make it work with npm link) to work with my project.

I removed /dist folder because AFAIK it's not a best practice to push compiled code, but if you want I can put it back.

I need the new package as soon as possible, what do you need to accept my changes and publish the new package ?

from angular2-calendar-heatmap.

I pushed back the content of dist folder.

Is this ok now ?

from angular2-calendar-heatmap.

Sorry haven't had a chance to check in and look at this myself yet.

I agree it's not the best practice, not sure who depends on that though.
I'll update the dist folder with the latest build before merging.

I'd like to include an example of how to customize the tooltip in the demo app shipped with the project. Just something simple to demonstrate the new functionality. What do you think?

from angular2-calendar-heatmap.

I am going to use ngx-translate (http://www.ngx-translate.com/) and angular locale support to have localized translations at runtime.
I now provide a snipshot of my code but I recall you I can't test or integrate the your new functionalities in my project since npm link didn't work between our projects (yours and mine).

For now I can tell you I am going to inject the LOCAL_ID in my component using your calendar heatmap:

import { LOCALE_ID } from '@angular/core';

constructor(
@Inject(LOCALE_ID) public localeId: string,
) {
}

I also define this provider to have the correct LOCALE_ID at runtime (such provider must be also declared among providers in your modules of course):

import { LOCALE_ID, StaticProvider } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

export class DynamicLocaleId extends String {
	constructor(protected service: TranslateService) {
		super();
	}

	toString() {
		return this.service.currentLang;
	}
}

export const LocaleProvider: StaticProvider = {
	provide: LOCALE_ID,
	useClass: DynamicLocaleId,
	deps: [TranslateService]
};

I also define these functions:

import { formatDate } from '@angular/common';

export function formatDateToIso(date: Date | number, format: ISODateFormats, lang: string): string {
	return formatDate(date, format, lang);
}

export enum ISODateFormats {
	short = 'short',
	medium = 'medium',
	shortDate = 'shortDate',
	mediumDate = 'mediumDate',
	longDate = 'longDate',
	fullDate = 'fullDate',
	shortTime = 'shortTime',
	mediumTim = 'mediumTime'
}

Finally my component using your heatmap can do something like this:

public formatTime(seconds: number): string {
	return formatDateToIso(new Date().setHours(0, 0, seconds), ISODateFormats.shortTime, this.localeId);
}

<calendar-heatmap
  [data]="data"
  [color]="color"
  [overview]="overview"
  [formatTime]="this.formatTime"
  (handler)="print($event)"
  (onChange)="handleOnChange($event)">
</calendar-heatmap>

Of course I can also use label localized translations provided by TranslateService for any of the other new function we defined for your calendar heatmap:

import { TranslateService } from '@ngx-translate/core';

constructor(
	private translateService: TranslateService
) {
}

weekLabel(weekNumber: number): string {
	return  this.translateService.instant('calendar.week.label') + ' ' + weekNumber;
}

Also you have to support locale changing/setting/storing somehow in your application with something like this (registering and storing localizations using localstorage to keep language when refreshing, for example):

import localeIt from '@angular/common/locales/it';

if (!localStorage.getItem('locale')) {
  if (!this.translate.getBrowserLang()) {
	localStorage.setItem('locale', 'en');
  } else {
	localStorage.setItem('locale', this.translate.getBrowserLang());
  }
}
registerLocaleData(localeIt, 'it');

this.translate.setDefaultLang(localStorage.getItem('locale'));
this.translate.use(localStorage.getItem('locale'));

Yea, my example/integration is really complex. If you want something simpler, I tested the new functionalities by simply create a test method (inside your app.component.ts):

public test = value => 'HI THERE!' + value;

and then:

<calendar-heatmap
  [data]="data"
  [color]="color"
  [overview]="overview"
  [formatTime]="test"
  [yearLabel]="test"
  [monthLabel]="test"
  [weekLabel]="test"
  [dayOfWeekLabel]="test"
  [timeLabel]="test"
  [buildGlobalTooltip]="test"
  [buildYearTooltip]="test"
  [buildMonthTooltip]="test"
  [buildWeekTooltip]="test"
  [buildDayTooltip]="test"
  (handler)="print($event)"
  (onChange)="handleOnChange($event)">
</calendar-heatmap>

You will see all of your labels will be overridden.

I wait for the new package as I need it for my work.
Thank you

from angular2-calendar-heatmap.

Thanks! I've published the update under v0.2.0, please let me know if that works for you.

from angular2-calendar-heatmap.

#16

from angular2-calendar-heatmap.

Yea it works. I just pushed a minor fix to handle empty array of data.

The workaround till the pull request is accepted is :

this.calendar.data =
  this.calendar.data && this.calendar.data.length > 0 ?
    this.calendar.data :
    [
      <CalendarHeatmapData>{
        'details': []
      }
    ];

from angular2-calendar-heatmap.

Merged and published on npm.

v0.2.2

from angular2-calendar-heatmap.