Hello

The adapter need an update for version 2.0 of date-fns Its explain here: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md

Old: https://github.com/chartjs/chartjs-adapter-date-fns/blob/46c3bb8f33891e5a9934e1ab41788d858f2f8c14/src/index.js#L15-L26

New version

var FORMATS = {
	datetime: 'MMM d, yyyy, h:mm:ss a',
	millisecond: 'h:mm:ss.SSS a',
	second: 'h:mm:ss a',
	minute: 'h:mm a',
	hour: 'ha',
	day: 'MMM d',
	week: 'w',
	month: 'MMM yyyy',
	quarter: '[Q]Q - yyyy',
	year: 'yyyy'
};

May be show the version of date-fns for backward compatibility

Problem:

• current plugin imports directly from date-fns which causes the entire lib to be bundled

Solution:

• updated the imports to target the actual modules which export the utility methods used

Documentation:

• https://date-fns.org/v2.9.0/docs/ECMAScript-Modules

Benefits:

• 2x bundle size reduction 221kb vs 486kb

This has the benefit of both correctly installing required packages for end-user, as a well as formalize which version of date-fns is supported or not.

I'm trying to use this with Chart.js in my Stencil web component project, which also uses date-fns (not moment.js).

Per the instructions, here is what I added to the particular component.tsx file:

import Chart from 'chart.js';
import 'chartjs-adapter-date-fns';

Still, NG throws this warning: Module not found: Error: Can't resolve './locale' in '/Users/..../stencil/oia-collection/dist/esm/es5/build'

Anything I missed?

Btw I'm using date-fns v2 - not sure if that makes a difference as it indeed is different to date-fns in some areas, such as a new formats API (Unicode Technical Standard #35).

Re. date-fns v2 support, I will open a new issue, perhaps I can contribute a PR - shouldn't be a big change.

EDIT: The error is thrown on the Ionic project level, not during the Stencil build process.

I use chart.js and just found out that I can also use date-fns with it by installing this adapter. I install it and imported it as instructed...

import { Chart } from 'chart.js';
import 'chartjs-adapter-date-fns';

But now I receive the following error:

TypeError: 3 arguments required, but only 2 present
    at Module.parse (index.js:350)
    at DateAdapter.parse (chartjs-adapter-date-fns.js:37)
    at toTimestamp (Chart.js:12736)
    at parse (Chart.js:12763)
    at ChartElement.determineDataLimits (Chart.js:13056)
    at ChartElement.update (Chart.js:10310)
    at ChartElement.update (Chart.js:13027)
    at getMinimumBoxSize (Chart.js:6368)
    at Object.each (Chart.js:1801)
    at Object.update (Chart.js:6382)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:25999)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

I use date-fns 2.4.1. This could be an issue since there were some breaking changes when upgrading to v2 and this error seems to be a result of the new parse function that I guess requires a 3rd argument https://date-fns.org/v2.4.1/docs/parse

With that being said I suppose this is more a feature request to upgrade the adapter to handle date-fns v2

Hii, I recently tried to install chartjs-adapter-date-fns using npm install date-fns chartjs-adapter-date-fns --save. But I am using React with typecript and it is giving me following error "Could not find declaration file for module". I tried to install the module with @types/ but the type version of the adapter is not available. Question: How do add this adapter to my .tsx file?

I think it’s possible to change time.scale with this adapter, but not possible to change time.displayFormat using this adapter.

For example, you can change time.unit to 'month' to use date-fns to display the month, but you cannot use time.displayFormats to change the display of month from the default of MMM yyyy to your custom string MMMM.

This Pull Request adds an option to pass in formats to modify the default FORMATS object.

If there’s a different way of doing that already, that’s fine too! I intentionally didn’t call it displayFormats as it seems confusing to have time.displayFormats and also adapters.data.displayFormats, but maybe it’s also confusing to have them not match.

This does use Object.assign for convenience, which I think works fine based on Chart.js’ browser support. If that’s an issue, the option could override the whole object instead.

This error keeps popping up, Error: No "exports" main defined in C:\Users\info\3D Objects\4-Soft\investors\node_modules\chart.js\package.json

My code looks like this and it works without date fns:

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
  TimeScale,
} from "chart.js";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
  TimeScale
);

import "chartjs-adapter-date-fns";
import { Line } from "react-chartjs-2";

if i remove the import the code works fine

Bumps qs and body-parser. These dependencies needed to be updated together. Updates qs from 6.7.0 to 6.11.0

Updates body-parser from 1.19.0 to 1.20.1

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps socket.io-parser from 4.0.4 to 4.0.5.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps karma from 6.3.2 to 6.3.14.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

chartjs-adapter-date-fns.bundle.js:6225 Uncaught TypeError: Cannot read properties of undefined (reading '_adapters') at chartjs-adapter-date-fns.bundle.js:6225:10 at chartjs-adapter-date-fns.bundle.js:4:76 at chartjs-adapter-date-fns.bundle.js:5:2 (anonymous) @ chartjs-adapter-date-fns.bundle.js:6225 (anonymous) @ chartjs-adapter-date-fns.bundle.js:4 (anonymous) @ chartjs-adapter-date-fns.bundle.js:5

In order to support npm aliases, please let us pass the Chart object to a register function of this plugin. This helps to use this plugin if the chart.js version in use is not installed via chart.js specifically but for example an npm alias or other means.

Hi,

This adapter doesn't allow to specify a timezone when parsing/formatting dates, since, unline Luxon, date-fns options don't support timezones. There is an official complementary library, date-fns-tz, that adds functions with timezone support:

• zonedTimeToUtc - Given a date and any time zone, returns a Date with the equivalent UTC time
• utcToZonedTime - Get a date/time representing local time in a given time zone from the UTC date
• getTimezoneOffset - Gets the offset in milliseconds between the time zone and UTC time
• format - Extends date-fns/format with full time zone support
• toDate - Can be used to create a zoned Date from a string containing an offset or IANA time zone

I wonder what is the best strategy to support timezones:

• Create a chartjs-adapter-date-fns-tz adapter that extends this one,
• Or add a timezone option in this adapter, then calling date-fns-tz functions (I guess we should then make the dependency optional)?

Since there is no too much logic in date adapters (i.e we just pass options to the underlying library), creating a distinct adapter may be a cleaner option?

version: 2.0.0

Here is the relevant configuration snippet:

        adapters: {
          date: {
            locale: nl,
          },
        },
        type: 'time',
        time: {
          unit: 'month',
          displayFormats: {
            month: 'dd MMM yy',
          },
        },

As you can see the first value is empty:

Hi, I updated our project our project dependecies to

chart.js@>=3.0.2, chart.js@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.0.2.tgz#5893b0548714445b5190cbda9ac307357a56a0c7"
  integrity sha512-DR0GmFSlxcFJp/w//ZmbxSduAkH/AqwxoiZxK97KHnWZf6gvsKWS3160WvNMMHYvzW9OXqGWjPjVh1Qu+xDabg==

chartjs-adapter-date-fns@>=2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b"
  integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==

and have (testing) graph like

async renderChart2() {
    var speedCanvas = document.querySelector("#chart-2 canvas")

    var speedData = {
      labels: ["2021-01-01T23:00:00.000Z", "2021-01-02T23:00:00.000Z", "2021-01-03T23:00:00.000Z", "2021-01-04T23:00:00.000Z", "2021-01-05T23:00:00.000Z", "2021-01-06T23:00:00.000Z", "2021-01-07T23:00:00.000Z"],
      datasets: [{
        label: "Car Speed",
        data: [0, 59, 75, 20, 20, 55, 40],
        lineTension: 0,
        fill: false,
        borderColor: 'orange',
        backgroundColor: 'transparent',
        pointBorderColor: 'orange',
        pointBackgroundColor: 'rgba(255,150,0,0.5)',
        borderDash: [5, 5],
        pointRadius: 5,
        pointHoverRadius: 10,
        pointHitRadius: 30,
        pointBorderWidth: 2,
        pointStyle: 'rectRounded'
      }]
    }

    var chartOptions = {
      responsive: true,
      legend: {
        display: true,
        position: 'top',
        labels: {
          boxWidth: 80,
          fontColor: 'black'
        }
      },
      scales: {
        x: {
          type: "time",
          grid: {
            display: false,
            color: "black"
          },
          title: {
            display: true,
            text: "Time in Seconds",
            color: "red"
          }
        },
        y: {
          grid: {
            color: "black",
            borderDash: [2, 5],
          },
          title: {
            display: true,
            text: "Speed in Miles per Hour",
            color: "green"
          }
        }
      }
    }
    const Chart = await this.chart()

    var lineChart = new Chart(speedCanvas, {
      type: 'line',
      data: speedData,
      options: chartOptions
    })
  }

  async chart() {
      const { Chart, registerables } = await import('chart.js')
      Chart.register(...registerables)

      return Chart
    }

And when I set some axis to be type: "time" , rendering of graphs fails

I am not strong in JS, but I digg deep and it seems to me that this

import { toDate, parse, parseISO, isValid, format, addYears, addQuarters, addMonths, addWeeks, addDays, addHours, addMinutes, addSeconds, addMilliseconds, differenceInYears, differenceInQuarters, differenceInMonths, differenceInWeeks, differenceInDays, differenceInHours, differenceInMinutes, differenceInSeconds, differenceInMilliseconds, startOfYear, startOfQuarter, startOfMonth, startOfWeek, startOfDay, startOfHour, startOfMinute, startOfSecond, endOfYear, endOfQuarter, endOfMonth, endOfWeek, endOfDay, endOfHour, endOfMinute, endOfSecond } from 'date-fns';

....

_adapters._date.override({
....
  format: function(time, fmt) {
    return format(time, fmt, this.options);
  },

do not call date-fns.format but itself again.

When I did litlle rename and change call in chart.js _tickFormatFunction(time, index, ticks, format):

  xformat: function(time, fmt) {
    return format(time, fmt, this.options);
  },

all went OK