matseee / ng-calendar-heatmap

:fire: d3 calendar heatmap for angular

matse.dev · ·

my webpage based on jeykll.

bundle install
bundle exec jekyll serve

ng-calendar-heatmap's Issues

fix tooltip position

make it responsive

rerender after data changed

implement basic visualization

• add dependencies to project
• create a typescript wrapper for the current available functions
• create api

Tooltip date format (evolution)

Hello,
Very good module, can you however add a functionality (missing for me), namely the format of the date in the tooltip?

Currently the format is 'ddd, MMM Do YYYY' which is not suitable for my country (France).

I think the following code should suffice in calendar.local.d.ts (models folder):

export interface CalendarLocale {
    months: string [];
    days: string [];
    no: string;
    on: string;
    less: string;
    more: string;
    dateMomentFormat: string;
}

Then change into ng-calendar-heatmap.js.map file change getDefaultOptions () function to:

function getDefaultOptions () {
    return {
        width: 705,
        height: 110,
        responsive: false,
        legendWidth: 95,
        SQUARE_LENGTH: 11,
        SQUARE_PADDING: 2,
        MONTH_LABEL_PADDING: 6,
        DAY_WIDTH: 12,
        MONTH_LABEL_HEIGHT: 10,
        now: new Date (),
        yearAgo: new Date (),
        startDate: null,
        max: null,
        colorRange: ['# D8E6E7', '# 218380'],
        tooltipEnabled: true,
        tooltipUnit: 'contribution',
        legendEnabled: true,
        onClick: null,
        weekStart: CalendarWeekStart.SUNDAY,
        local: {
            months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
            days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
            no: 'No',
            on: 'on',
            less: 'Less',
            more: 'More',
            dateMomentFormat: 'ddd, MMM Do YYYY'
        }
    };
}

Finally, by modifying the tooltipHTMLForDate (d) function:

tooltipHTMLForDate(d) {
        const dateStr = time (d).format(this.options.locale.dateMomentFormat);
        const count = this.countForDate(d);
        return '<span> <strong>'
            + (count? count: this.options.locale.no)
            + '' + this.pluralizedTooltipUnit(count)
            + '</strong>' + this.options.locale.on + '' + dateStr
            + '</span>';
}

If you could do that it will be perfect (for me among others).
Good continuation.

wrong color code after empty data

draw even without data