TypeError: t.details is undefined

[callum-gander]

Hi,

I'm fairly certain this repo is no longer active but this component looks amazing and exactly what I'm looking for so I thought I submit this issue in the long shot someone sees it and decides to fix it. I installed the module with npm, initially said it couldn't resolve d3, installed d3 and my react app started. However, the component wouldn't load and I got a blank page with the error message "TypeError: t.details is undefined" in the console. There seemed to be a lot of deprecated packages when I installed the module, not sure if this affected it at all. I really hope this component gets fixed, the demo is brilliant. Thanks

[g1eb]

Just to be clear, you are installing this module into a separate react app project with npm right? What react version are you using? I'm going to test creating a new project with the create-react-app tool.

Let me see if I can reproduce your issue and maybe fix the broken dependencies on the way.

[g1eb]

Could you try this package instead? https://github.com/g1eb/reactjs-calendar-heatmap

[callum-gander]

Yes, I'm using this in a separate react app project, I installed the module with npm 6.14.4. The React version on the project is 16.13.1. I did actually download the reactjs version of your module, version 0.0.10 to be exact, the above error was from the reactjs version, not this version. Not sure how I ended up commenting on the non-react version, must have had both versions open and accidentally opened the issue on this version. Hope this helps, thanks for the quick response

[g1eb]

Strange, I did test with a newly created react app and did not see the error you are referring to.

Could you share the source of what your component looks like where you add the calendar heatmap?

[callum-gander]

Sure, it essentially looks like this, it's a conditional chart component designed to give different charts on different props, though it isn't shown here the data is imported and console.logs fine

`export const Chart = (props) => {

if (props.display === "calendar"){
    return (
        <>
            <div >
                <CalendarHeatmap
                    data={data}
                    >
                </CalendarHeatmap>
            </div>
        </>
    )`

An example of the data is shown below, I'm not sure if using booleans caused any problems but I'm guessing not as I tested mapping each value to either 1 or 0 before and the page the component is on still wouldn't load and I was still getting the t.details is undefined error, which I will also include below as the stack trace might help

const data = [ { "day": "2020-08-02", "value": false }, { "day": "2020-07-23", "value": false }, { "day": "2020-08-17", "value": true } ... ]

[g1eb]

At a glance it looks like you're using a different data structure than what is described here: https://github.com/g1eb/reactjs-calendar-heatmap#example-data I suspect that error has to do with with the missing details key in the data.

Can you try swapping the data you have now for this random example set to see if that would help it load? This is the example I used to test the component, taken directly from the demo example that is on github https://github.com/g1eb/reactjs-calendar-heatmap/blob/master/index.html

import React from 'react';
import CalendarHeatmap from 'reactjs-calendar-heatmap'
import moment from 'moment';
import * as d3 from 'd3';

// Initialize random data for the demo
let now = moment().endOf('day').toDate()
let time_ago = moment().startOf('day').subtract(10, 'year').toDate()
let data = d3.timeDays(time_ago, now).map(function (dateElement, index) {
  return {
    date: dateElement,
    details: Array.apply(null, new Array(Math.floor(Math.random() * 15))).map(function(e, i, arr) {
      return {
        'name': 'Project ' + Math.ceil(Math.random() * 10),
        'date': function () {
          let projectDate = new Date(dateElement.getTime())
          projectDate.setHours(Math.floor(Math.random() * 24))
          projectDate.setMinutes(Math.floor(Math.random() * 60))
          return projectDate
        }(),
        'value': 3600 * ((arr.length - i) / 5) + Math.floor(Math.random() * 3600) * Math.round(Math.random() * (index / 365))
      }
    }),
    init: function () {
      this.total = this.details.reduce(function (prev, e) {
        return prev + e.value
      }, 0)
      return this
    }
  }.init()
})

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <CalendarHeatmap data={data}>
        </CalendarHeatmap>
      </header>
    </div>
  );
}

export default App;

[callum-gander]

Yes, you're right. I tried using the example data and it worked fine. After I got that to work, it took me a while to figure out exactly how to use your example function to generate my own data, I couldn't get the heatmap to render for a while because I was missing the total property. My fault for misunderstanding how the data neeeded to be structured for the heatmap to work correctly. Thank you for helping me clear this up and sorry for using up your time

[g1eb]

No problem at all, glad you got it to work!