Error occurs when import plugin

[mouni521]

Hi, I'm using Angular 16 with cal-heatmap v4.2.4. When I import the plugins Legend and CalendarLabel like this way:

import Legend from 'cal-heatmap/src/plugins/Legend';

and then I got the error below:

Error: node_modules/cal-heatmap/src/calendar/Populator.ts:37:23 - error TS2349: This expression is not callable.
  Not all constituents of type 'string | ((timestamp: number, value: string | number, backgroundColor: string) => string)' are callable.
    Type 'string' has no call signatures.

37               color = color(d.t, d.v, colorScale?.apply(d.v));
                         ~~~~~

The other problem is when I add the code:

[
        [
          Legend,
          {
            label: 'Max daily temperature (°C)',
            itemSelector: '#legend-label',
          },
        ],
      ]

it returns me

Object literal may only specify known properties, and 'label' does not exist in type 'Partial<PluginOptions>'.

does not exist in type 'Partial' problem also occurs in other plugin like CalendarLabel. Is this a bug? Or could you tell who to fix it, thank you very much.

[wa0x6e]

There's an issue with typescript and legend. A fix is in progress (https://github.com/wa0x6e/cal-heatmap/issues/487), in the meantime, all you can do is disabled typescript with // ts-ignore

[mouni521]

Thanks, it helps, but got the other error

Module not found: Error: Package path ./dist/plugins/CalendarLabel is not exported from package /Users/userName/projectName/node_modules/cal-heatmap

After I modified the exports field in package.json then solved it.

"./plugins/CalendarLabel": {
      "import": "./dist/plugins/CalendarLabel.esm.js",
      "require": "./dist/plugins/CalendarLabel.js"
    }

./plugins/CalendarLabel -> ./dist/plugins/CalendarLabel

Now it works well.