Skip to content

Commit aa49e38

Browse files
AB-xdevAB-xdev
committed
Provide example implementation for using a date adapter
See #69
1 parent ae9b411 commit aa49e38

File tree

3 files changed

+201
-0
lines changed

3 files changed

+201
-0
lines changed

‎vaadin-chartjs-wrapper-demo/src/main/frontend/lib/chartjs-adapter-date-fns.js‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/*
2+
* This is a fork of chartjs-adapter-date-fns
3+
*
4+
* It was forked so that it's loaded correctly because datefns is otherwise not correctly imported
5+
*
6+
* Modifications:
7+
* 1. Explicitly imported date-fns
8+
* 2. Added this in the factory method and removed not needed code
9+
* 3. date-fns is now also provided globally (window.dateFns) for e.g. parsing strings to dates
10+
*/
11+
12+
/*!
13+
* chartjs-adapter-date-fns v3.0.0
14+
* https://www.chartjs.org
15+
* (c) 2022 chartjs-adapter-date-fns Contributors
16+
* Released under the MIT license
17+
*/
18+
19+
import * as datefnsImp from 'date-fns';
20+
21+
(function (global, factory) {
22+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Chart, datefnsImp));
23+
globalThis.dateFns = datefnsImp;
24+
})(this, (function (chart_js, dateFns) { 'use strict';
25+
26+
const FORMATS = {
27+
datetime: 'MMM d, yyyy, h:mm:ss aaaa',
28+
millisecond: 'h:mm:ss.SSS aaaa',
29+
second: 'h:mm:ss aaaa',
30+
minute: 'h:mm aaaa',
31+
hour: 'ha',
32+
day: 'MMM d',
33+
week: 'PP',
34+
month: 'MMM yyyy',
35+
quarter: 'qqq - yyyy',
36+
year: 'yyyy'
37+
};
38+
39+
chart_js._adapters._date.override({
40+
_id: 'date-fns', // DEBUG
41+
42+
formats: function() {
43+
return FORMATS;
44+
},
45+
46+
parse: function(value, fmt) {
47+
if (value === null || typeof value === 'undefined') {
48+
return null;
49+
}
50+
const type = typeof value;
51+
if (type === 'number' || value instanceof Date) {
52+
value = dateFns.toDate(value);
53+
} else if (type === 'string') {
54+
if (typeof fmt === 'string') {
55+
value = dateFns.parse(value, fmt, new Date(), this.options);
56+
} else {
57+
value = dateFns.parseISO(value, this.options);
58+
}
59+
}
60+
return dateFns.isValid(value) ? value.getTime() : null;
61+
},
62+
63+
format: function(time, fmt) {
64+
return dateFns.format(time, fmt, this.options);
65+
},
66+
67+
add: function(time, amount, unit) {
68+
switch (unit) {
69+
case 'millisecond': return dateFns.addMilliseconds(time, amount);
70+
case 'second': return dateFns.addSeconds(time, amount);
71+
case 'minute': return dateFns.addMinutes(time, amount);
72+
case 'hour': return dateFns.addHours(time, amount);
73+
case 'day': return dateFns.addDays(time, amount);
74+
case 'week': return dateFns.addWeeks(time, amount);
75+
case 'month': return dateFns.addMonths(time, amount);
76+
case 'quarter': return dateFns.addQuarters(time, amount);
77+
case 'year': return dateFns.addYears(time, amount);
78+
default: return time;
79+
}
80+
},
81+
82+
diff: function(max, min, unit) {
83+
switch (unit) {
84+
case 'millisecond': return dateFns.differenceInMilliseconds(max, min);
85+
case 'second': return dateFns.differenceInSeconds(max, min);
86+
case 'minute': return dateFns.differenceInMinutes(max, min);
87+
case 'hour': return dateFns.differenceInHours(max, min);
88+
case 'day': return dateFns.differenceInDays(max, min);
89+
case 'week': return dateFns.differenceInWeeks(max, min);
90+
case 'month': return dateFns.differenceInMonths(max, min);
91+
case 'quarter': return dateFns.differenceInQuarters(max, min);
92+
case 'year': return dateFns.differenceInYears(max, min);
93+
default: return 0;
94+
}
95+
},
96+
97+
startOf: function(time, unit, weekday) {
98+
switch (unit) {
99+
case 'second': return dateFns.startOfSecond(time);
100+
case 'minute': return dateFns.startOfMinute(time);
101+
case 'hour': return dateFns.startOfHour(time);
102+
case 'day': return dateFns.startOfDay(time);
103+
case 'week': return dateFns.startOfWeek(time);
104+
case 'isoWeek': return dateFns.startOfWeek(time, {weekStartsOn: +weekday});
105+
case 'month': return dateFns.startOfMonth(time);
106+
case 'quarter': return dateFns.startOfQuarter(time);
107+
case 'year': return dateFns.startOfYear(time);
108+
default: return time;
109+
}
110+
},
111+
112+
endOf: function(time, unit) {
113+
switch (unit) {
114+
case 'second': return dateFns.endOfSecond(time);
115+
case 'minute': return dateFns.endOfMinute(time);
116+
case 'hour': return dateFns.endOfHour(time);
117+
case 'day': return dateFns.endOfDay(time);
118+
case 'week': return dateFns.endOfWeek(time);
119+
case 'month': return dateFns.endOfMonth(time);
120+
case 'quarter': return dateFns.endOfQuarter(time);
121+
case 'year': return dateFns.endOfYear(time);
122+
default: return time;
123+
}
124+
}
125+
});
126+
127+
}));

‎vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/DemoView.java‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
import com.vaadin.flow.router.Route;
1515

1616
import software.xdev.vaadin.chartjs.demo.ClientToServerUpdateableDemo;
17+
import software.xdev.vaadin.chartjs.demo.DateAdapterDemo;
1718
import software.xdev.vaadin.chartjs.demo.FunctionalityShowcaseDemo;
1819
import software.xdev.vaadin.chartjs.demo.MinimalisticDemo;
1920

@@ -66,6 +67,11 @@ protected void onAttach(final AttachEvent attachEvent)
6667
ClientToServerUpdateableDemo.NAV,
6768
"Client to Server updateable",
6869
"Shows how charts can be dynamically requested by the client e.g. when using a Grid."
70+
),
71+
new Example(
72+
DateAdapterDemo.NAV,
73+
"DateAdapter",
74+
"Shows how a date adapter can be used."
6975
)
7076
));
7177
}

‎vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/demo/DateAdapterDemo.java‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
package software.xdev.vaadin.chartjs.demo;
2+
3+
import com.vaadin.flow.component.dependency.JsModule;
4+
import com.vaadin.flow.component.dependency.NpmPackage;
5+
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
6+
import com.vaadin.flow.router.Route;
7+
8+
import software.xdev.chartjs.model.charts.LineChart;
9+
import software.xdev.chartjs.model.data.LineData;
10+
import software.xdev.chartjs.model.dataset.LineDataset;
11+
import software.xdev.chartjs.model.javascript.JavaScriptFunction;
12+
import software.xdev.chartjs.model.options.LineOptions;
13+
import software.xdev.chartjs.model.options.scale.Scales;
14+
import software.xdev.chartjs.model.options.scale.cartesian.AbstractCartesianScaleOptions;
15+
import software.xdev.chartjs.model.options.scale.cartesian.time.TimeScaleOptions;
16+
import software.xdev.vaadin.chartjs.ChartContainer;
17+
18+
19+
@NpmPackage(value = "date-fns", version = "4.1.0")
20+
@JsModule("date-fns/index.js")
21+
@JsModule("./lib/chartjs-adapter-date-fns.js")
22+
@Route(DateAdapterDemo.NAV)
23+
public class DateAdapterDemo extends VerticalLayout
24+
{
25+
public static final String NAV = "/date-adapter";
26+
27+
public DateAdapterDemo()
28+
{
29+
this.setSizeFull();
30+
final ChartContainer chart = new ChartContainer();
31+
chart.setHeight("50%");
32+
33+
this.add(chart);
34+
35+
chart.showChart(new LineChart(new LineData()
36+
.addLabels(
37+
"2020-01-01",
38+
"2020-01-02",
39+
"2020-01-03")
40+
.addDataset(new LineDataset()
41+
.setBackgroundColor("#c02222")
42+
.setLabel("A")
43+
.addData(5)
44+
.addData(1)
45+
.addData(2))
46+
.addDataset(new LineDataset()
47+
.setBackgroundColor("orange")
48+
.setLabel("B")
49+
.addData(1)
50+
.addData(2)
51+
.addData(4)))
52+
.setOptions(new LineOptions()
53+
.setResponsive(true)
54+
.setMaintainAspectRatio(false)
55+
.setScales(new Scales()
56+
.addScale(
57+
Scales.ScaleAxis.X, new TimeScaleOptions()
58+
.setTime(new TimeScaleOptions.TimeOptions()
59+
.setParser(new JavaScriptFunction("s => window.dateFns.parseISO(s)"))
60+
.setTooltipFormat("eee, dd.MM.yyyy")
61+
.setUnit("day"))
62+
.setTitle(new AbstractCartesianScaleOptions.Title()
63+
.setDisplay(true)
64+
.setText("Date"))
65+
)))
66+
.toJson());
67+
}
68+
}

0 commit comments

Comments
 (0)