chartjs / chartjs/chartjs-adapter-luxon
Import issue with ChartJS 3.8
- Dominant language
- JavaScript
- Stars
- 34
- Forks
- 21
- PR merge metrics
- No merged PRs in 30d
Description
After updating from ChartJS 3.7.1 to ChartJS 3.8, any charts that would use the Luxon adapter stopped working. It seems that ChartJS changed the way their modules are exported slightly and the patches that chartjs-adapter-luxon is making don't register any more, at least in my project.
Any charts that use datetimes don't display any more and the console shows this error message:
```
Uncaught (in promise) Error: This method is not implemented: Check that a complete date adapter is provided.
at abstract (chart.esm.js:56:62367)
at DateAdapter.formats (chart.esm.js:56:62543)
at TimeScale.init (chart.esm.js:56:280572)
at eval (chart.esm.js:56:148422)
at each (helpers.segment.js:129:2545)
at Chart.buildOrUpdateScales (chart.esm.js:56:147793)
at Chart._updateScales (chart.esm.js:56:152142)
at Chart.update (chart.esm.js:56:150911)
at new Chart (chart.esm.js:56:145260)
at ChartsPremadeAppVersionsComponent.render (app-versions.js:180:1)
```
My workaround for this right now has been to create a new helper file, `chart-js.js`, and doing the patching manually by copy/pasting the code from the adapter source. Then I can import the new Chart object from that helper file.
I realise this is probably very hacky, but I don't really have the experience to find out what the actual problem is.
Here's my new import:
```js
import { Chart } from 'ui/utils/chart-js';
```
And here's my `ui/utils/chart-js.js`:
```js
import { Chart, registerables, _adapters } from 'chart.js';
import { DateTime } from 'luxon';
const FORMATS = {
datetime: DateTime.DATETIME_MED_WITH_SECONDS,
millisecond: 'h:mm:ss.SSS a',
second: DateTime.TIME_WITH_SECONDS,
minute: DateTime.TIME_SIMPLE,
hour: { hour: 'numeric' },
day: { day: 'numeric', month: 'short' },
week: 'DD',
month: { month: 'short', year: 'numeric' },
quarter: "'Q'q - yyyy",
year: { year: 'numeric' },
};
_adapters._date.override({
_id: 'luxon', // DEBUG
/**
* @private
*/
_create: function (time) {
return DateTime.fromMillis(time, this.options);
},
formats: function () {
return FORMATS;
},
parse: function (value, format) {
const options = this.options;
if (value === null || typeof value === 'undefined') {
return null;
}
const type = typeof value;
if (type === 'number') {
value = this._create(value);
} else if (type === 'string') {
if (typeof format === 'string') {
value = DateTime.fromFormat(value, format, options);
} else {
value = DateTime.fromISO(value, options);
}
} else if (value instanceof Date) {
value = DateTime.fromJSDate(value, options);
} else if (type === 'object' && !(value instanceof DateTime)) {
value = DateTime.fromObject(value);
}
return value.isValid ? value.valueOf() : null;
},
format: function (time, format) {
const datetime = this._create(time);
return typeof format === 'string'
? datetime.toFormat(format, this.options)
: datetime.toLocaleString(format);
},
add: function (time, amount, unit) {
const args = {};
args[unit] = amount;
return this._create(time).plus(args).valueOf();
},
diff: function (max, min, unit) {
return this._create(max).diff(this._create(min)).as(unit).valueOf();
},
startOf: function (time, unit, weekday) {
if (unit === 'isoWeek') {
weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
const dateTime = this._create(time);
return dateTime
.minus({ days: (dateTime.weekday - weekday + 7) % 7 })
.startOf('day')
.valueOf();
}
return unit ? this._create(time).startOf(unit).valueOf() : time;
},
endOf: function (time, unit) {
return this._create(time).endOf(unit).valueOf();
},
});
Chart.register(...registerables);
export { Chart };
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Begin with the chartjs-adapter-luxon source and the Chart.js 3.8 import and registration path described in the report; reproduce the failure with a datetime chart and Luxon. Compare that behavior with the working ui/utils/chart-js.js workaround, then verify completion by confirming the adapter registers and datetime charts render without the “complete date adapter” error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- chart.js, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100