Hi have used this component inside a React card component and this card has been looped through a map. This is how it is rendered

Any reason why it is rendered in a stacked manner?. Here is the card component

import React from "react";
import CalendarHeatmap from "reactjs-calendar-heatmap";

let chekc = [
  {
    date: "2016-01-01",
    total: 17164,
    details: [
      {
        name: "Project 1",
        date: "2016-01-01 12:30:45",
        value: 9192,
      },
      {
        name: "Project 2",
        date: "2016-01-01 13:37:00",
        value: 6753,
      },
      {
        name: "Project N",
        date: "2016-01-01 17:52:41",
        value: 1219,
      },
    ],
  },
];

function CheckCard({ name, runs, period, type, regions, data }) {
  return (
    <div className="raven-card raven-check">
      <div className="row">
        <div className="col-1 col-md-1"></div>
        <div className="col-5 col-md-5">
          <h4>{name}</h4>
        </div>
        <div className="col-1 col-md-1"></div>
        <div className="col-5  col-md-5"></div>
      </div>
      <div className="row">
        <div className="col-1 col-md-1"></div>
        <div className="col-5 col-md-5">
          <h6>{period}</h6>
        </div>
        <div className="col-1 col-md-1"></div>
        <div className="col-5  col-md-5"></div>
      </div>
      <hr />
      <div className="row">
        <div className="col-1  col-md-1"></div>
        <div className="col-10  col-md-10">
          <CalendarHeatmap data={chekc} overview="day"></CalendarHeatmap>
        </div>
        <div className="col-1  col-md-1"></div>
      </div>
    </div>
  );
}

export default CheckCard;

By default weeks begin with Sundays, I want them to begin with Mondays, and I can't seem to find a way to change that.

Hello,

While running my webapplication, it works initially. When clicking about, I run into the error below:

Also, I cannot see data displayed when showcasing the year (much like the other issue posted half a year ago).

This is how my code looks like:

I'm a bit new to React, so it might be a stupid problem on my end, but I can't seem to debug it. If you want to attempt to recreate the issue, the repo is here:
https://github.com/SoerenToennesen/Website
where I the calendar heat map is created under CalendarHeatMap.js

There is also another error, which I'm not sure why is created, as seen in the gif provided below (year_label.year is not a function).

Hi,
I really like your chart and wanted to reuse it. I just have a problem when I put overview={'year'} . The data aren't displayed when the page is done loading, I have to go on global mode before going back to the year one in order for my data to be displayed. I didn't have the problem when I tried to put overview={'day'} or overview={'global'} . But I really wished to be able to display the year mode first.
thanks :)

The current package depends on d3 and moment, both of which are very large. Can moment be replaced by dayjs?

Hi, I am getting a error when I use your heatmap!

app.8afff0433bef2cc43286.js:138753 Uncaught TypeError: p.scaleLinear is not a function
at e.value (app.8afff0433bef2cc43286.js:138753)
at e.value (app.8afff0433bef2cc43286.js:138753)
at e.value (app.8afff0433bef2cc43286.js:138753)
at app.8afff0433bef2cc43286.js:58828
at measureLifeCyclePerf (app.8afff0433bef2cc43286.js:58639)
at app.8afff0433bef2cc43286.js:58827
at CallbackQueue.notifyAll (app.8afff0433bef2cc43286.js:26305)
at ReactReconcileTransaction.close (app.8afff0433bef2cc43286.js:60755)
at ReactReconcileTransaction.closeAll (app.8afff0433bef2cc43286.js:15364)
at ReactReconcileTransaction.perform (app.8afff0433bef2cc43286.js:15311)

Usage:

export default class PostHeatMap extends Component {

	constructor(props) {
		super(props)

		var data = [{
			"date": "2016-01-01",
			"total": 17164,
			"details": [{
				"name": "Project 1",
				"date": "2016-01-01 12:30:45",
				"value": 9192
			},
			{
				"name": "Project 2",
				"date": "2016-01-01 13:37:00",
				"value": 6753
			},
			{
				"name": "Project N",
				"date": "2016-01-01 17:52:41",
				"value": 1219
			}]
		}]

		this.state = {
			data: data,
		}

	}

	render() {
		return (
			<div>
				<CalendarHeatmap
					data={this.state.data}
					color='#45ff00'
				>
				</CalendarHeatmap>
			</div>
		)
	}
}

Can you please fix it? Thank you, it's amazing heat map.. :-)

Can the peer dependency please be updated to react v18?

How would you go about increasing the default height, so that more "Projects" could be shown in an expanding-height fashion rather than being smushed together.

Hi, your demo on https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/ not working.
There are a lot of errors in console...

Hi @g1eb, I think this is a known issue, wonder why it's not reflecting in reactjs-calendar-heatmap even though a release with this fix was made on calendar-heatmap. I'm using the latest version.

    "reactjs-calendar-heatmap": "^0.2.0",

Any solution for this?

@g1eb Can we use minimum value calculated from the data that we process and use them to generate color code generator instead of passing (-0.15 * max_value) as the lower value for the domain.

.attr('fill', d => {
        let color = d3.scaleLinear()
          .range(['#ffffff', this.props.color])
          .domain([-0.15 * max_value, max_value])
        return color(d.total) || '#ff4500'
      })

And can you explain the reason, if any, behind using (-0.15 * max_value) as the lower value in the domain.

Cool library, I want to use it, but I'm getting some errors:

Was also curious of there was any chance to pass through some props to set the height and width?

Thanks!

Hi,

Is there anyway to change the size of the heatmap? I really love it but unfortunately it doesn't seem to be mobile responsive.

Thanks

Hi, Can you specify if this code is available under a licence such as MIT?

Thank you.

great charts!
is there any way i can use just the 'day overview' ?
thanks :)

I was trying to find an answer from the closed issue but there was no answer...so I post my react+jsx code here to see why it happens.

import CalendarHeatmap from 'reactjs-calendar-heatmap';
import React from 'react';

function HeatMap() {
    let data = [{
        "date": "2016-01-01",
        "total": 17164,
        "details": [{
            "name": "Project 1",
            "date": "2016-01-01 12:30:45",
            "value": 9192
        }, {
            "name": "Project 2",
            "date": "2016-01-01 13:37:00",
            "value": 6753
        },

            {
                "name": "Project N",
                "date": "2016-01-01 17:52:41",
                "value": 1219
            }]
    }];

    let print = (value) => {
        console.log(value);
    };

    let overview = {
        year:'year',
        month:'month',
        day:'day'
    };


    return (
        <CalendarHeatmap
            data={data}
            color={'#45ff00'}
            overview={overview.year}
            handler={print.bind(this)}>
        </CalendarHeatmap>
    )

};

export default HeatMap;

I have installed d3 and moment via npm.

It'd be nice if the package published typescript types alongside the package.