@record-evolution/widget-linechart 1.4.10 → 1.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/src/widget-linechart.d.ts +1 -1
  2. package/dist/tsconfig.tsbuildinfo +1 -1
  3. package/dist/widget-linechart.js +170 -118
  4. package/dist/widget-linechart.js.map +1 -1
  5. package/package.json +3 -3
  6. package/src/definition-schema.json +12 -4
  7. package/src/widget-linechart.ts +418 -340
  8. package/dist/src/types.d.ts +0 -32
  9. package/src/types.ts +0 -34
package/src/widget-linechart.ts CHANGED
@@ -1,244 +1,254 @@
1
- import { html, css, LitElement } from 'lit';
1
+ import { html, css, LitElement } from 'lit'
2
2
  import { repeat } from 'lit/directives/repeat.js'
3
- import { property, state } from 'lit/decorators.js';
4
- import Chart, { ChartDataset } from 'chart.js/auto';
5
- import tinycolor from "tinycolor2";
3
+ import { property, state } from 'lit/decorators.js'
4
+ import Chart, { ChartDataset } from 'chart.js/auto'
5
+ import tinycolor from 'tinycolor2'
6
6
  // This does not work. See comments at the end of the file.
7
7
  // import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
8
8
  // import 'chartjs-adapter-moment';
9
9
  // import 'chartjs-adapter-date-fns';
10
- import { ConfigureTheChart } from './definition-schema.js';
10
+ import { ConfigureTheChart } from './definition-schema.js'
11
11
 
12
12
  type Dataseries = Exclude<ConfigureTheChart['dataseries'], undefined>[number]
13
13
  type Data = Exclude<Dataseries['data'], undefined>[number]
14
14
 
15
15
  export class WidgetLinechart extends LitElement {
16
-
17
- @property({type: Object})
18
- inputData?: ConfigureTheChart
19
-
20
- @state()
21
- private canvasList: Map<string, {chart?: any, dataSets: Dataseries[]}> = new Map()
22
-
23
- version: string = 'versionplaceholder'
24
-
25
- update(changedProperties: Map<string, any>) {
26
- if (changedProperties.has('inputData')) {
27
- this.transformInputData()
28
- this.applyInputData()
16
+ @property({ type: Object })
17
+ inputData?: ConfigureTheChart
18
+
19
+ @state()
20
+ private canvasList: Map<string, { chart?: any; dataSets: Dataseries[] }> = new Map()
21
+
22
+ version: string = 'versionplaceholder'
23
+
24
+ update(changedProperties: Map<string, any>) {
25
+ if (changedProperties.has('inputData')) {
26
+ this.transformInputData()
27
+ this.applyInputData()
28
+ }
29
+ super.update(changedProperties)
29
30
  }
30
- super.update(changedProperties)
31
- }
32
-
33
- protected firstUpdated(): void {
34
- this.applyInputData()
35
- }
36
-
37
- transformInputData() {
38
-
39
- if (!this?.inputData?.dataseries?.length) return
40
-
41
- // reset all existing chart dataseries
42
- this.canvasList.forEach(chartM => chartM.dataSets = [])
43
- this.inputData.dataseries.forEach(ds => {
44
- ds.chartName = ds.chartName ?? ''
45
- if (ds.borderDash && typeof ds.borderDash === 'string') {
46
- ds.borderDash = JSON.parse(ds.borderDash)
47
- } else {
48
- ds.borderDash = undefined
49
- }
50
-
51
- // pivot data
52
- const distincts = [...new Set(ds.data?.map((d: Data) => d.pivot))]
53
- const derivedBgColors = tinycolor(ds.backgroundColor).monochromatic(distincts.length).map((c: any) => c.toHexString())
54
- const derivedBdColors = tinycolor(ds.borderColor).monochromatic(distincts.length).map((c: any) => c.toHexString())
55
-
56
- if (distincts.length > 1) {
57
- distincts.forEach((piv, i) => {
58
- const pds: any = {
59
- label: ds.label + ' ' + piv,
60
- type: ds.type,
61
- showLine: true,
62
- radius: ds.radius,
63
- pointStyle: ds.pointStyle,
64
- backgroundColor: derivedBgColors[i],
65
- borderColor: derivedBdColors[i],
66
- borderWidth: ds.borderWidth,
67
- borderDash: ds.borderDash,
68
- fill: ds.fill,
69
- data: ds.data?.filter(d => d.pivot === piv)
70
- }
71
- // If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
72
- const chartName = ds.chartName?.endsWith('#pivot#') ? ds.chartName + piv : ds.chartName ?? ''
73
- if (!this.canvasList.has(chartName)) {
74
- // initialize new charts
75
- this.canvasList.set(chartName, {chart: undefined, dataSets: [] as Dataseries[]})
76
- }
77
- this.canvasList.get(chartName)?.dataSets.push(pds)
78
- })
79
- } else {
80
- if (!this.canvasList.has(ds.chartName)) {
81
- // initialize new charts
82
- this.canvasList.set(ds.chartName, {chart: undefined, dataSets: [] as Dataseries[]})
83
- }
84
- this.canvasList.get(ds.chartName)?.dataSets.push(ds)
85
- }
86
- })
87
- // prevent duplicate transformation
88
- this.inputData.dataseries = []
89
- // console.log('new linechart datasets', this.canvasList)
90
- }
91
-
92
-
93
- applyInputData() {
94
- this.setupCharts()
95
-
96
- this.canvasList.forEach(({chart, dataSets}) => {
97
- if (chart) {
98
- chart.data.datasets = dataSets
99
- chart.options.scales.x.type = this.xAxisType()
100
- chart.options.scales.x.title.display = !!this.inputData?.settings?.xAxisLabel
101
- chart.options.scales.x.title.text = this.inputData?.settings?.xAxisLabel
102
- chart.options.scales.y.title.display = !!this.inputData?.settings?.yAxisLabel
103
- chart.options.scales.y.title.text = this.inputData?.settings?.yAxisLabel
104
- chart?.update('resize')
105
- }
106
- })
107
- }
108
-
109
- xAxisType(): "linear" | "logarithmic" | "category" | "time" | "timeseries" | undefined {
110
- if (this.inputData?.settings?.timeseries) return 'time'
111
- const onePoint = this.inputData?.dataseries?.[0].data?.[0]
112
- if (!isNaN(Number(onePoint?.x))) return 'linear'
113
- return 'category'
114
- }
115
-
116
- setupCharts() {
117
-
118
- this.canvasList.forEach((chartM, chartName) => {
119
- if (!chartM.dataSets.length) this.canvasList.delete(chartName)
120
- if (chartM.chart) return
121
- const canvas = this.shadowRoot?.querySelector(`[name="${chartName}"]`) as HTMLCanvasElement
122
- if (!canvas) return
123
- // console.log('chartM', canvas, chartM.chart)
124
- chartM.chart = new Chart(
125
- canvas,
126
- {
127
- type: 'line',
128
- data: {
129
- // @ts-ignore
130
- datasets: chartM.dataSets
131
- },
132
- options: {
133
- responsive: true,
134
- maintainAspectRatio: false,
135
- animations: {
136
- "colors": false,
137
- "x": false,
138
- },
139
- transitions: {
140
- "active": {
141
- "animation": {
142
- "duration": 100
143
- }
144
- }
145
- },
146
- scales: {
147
- x: {
148
- type: this.xAxisType(),
149
- title: {
150
- display: !!this.inputData?.settings?.xAxisLabel,
151
- text: this.inputData?.settings?.xAxisLabel
31
+
32
+ protected firstUpdated(): void {
33
+ this.applyInputData()
34
+ }
35
+
36
+ transformInputData() {
37
+ if (!this?.inputData?.dataseries?.length) return
38
+
39
+ // reset all existing chart dataseries
40
+ this.canvasList.forEach((chartM) => (chartM.dataSets = []))
41
+ this.inputData.dataseries.forEach((ds) => {
42
+ ds.chartName = ds.chartName ?? ''
43
+ if (ds.borderDash && typeof ds.borderDash === 'string') {
44
+ ds.borderDash = JSON.parse(ds.borderDash)
45
+ } else {
46
+ ds.borderDash = undefined
47
+ }
48
+
49
+ // pivot data
50
+ const distincts = [...new Set(ds.data?.map((d: Data) => d.pivot))]
51
+ const derivedBgColors = tinycolor(ds.backgroundColor)
52
+ .monochromatic(distincts.length)
53
+ .map((c: any) => c.toHexString())
54
+ const derivedBdColors = tinycolor(ds.borderColor)
55
+ .monochromatic(distincts.length)
56
+ .map((c: any) => c.toHexString())
57
+
58
+ if (distincts.length > 1) {
59
+ distincts.forEach((piv, i) => {
60
+ const pds: any = {
61
+ label: ds.label + ' ' + piv,
62
+ type: ds.type,
63
+ showLine: true,
64
+ radius: ds.radius,
65
+ pointStyle: ds.pointStyle,
66
+ backgroundColor: derivedBgColors[i],
67
+ borderColor: derivedBdColors[i],
68
+ borderWidth: ds.borderWidth,
69
+ borderDash: ds.borderDash,
70
+ fill: ds.fill,
71
+ data: ds.data?.filter((d) => d.pivot === piv)
72
+ }
73
+ // If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
74
+ const chartName = ds.chartName?.endsWith('#pivot#')
75
+ ? ds.chartName + piv
76
+ : ds.chartName ?? ''
77
+ if (!this.canvasList.has(chartName)) {
78
+ // initialize new charts
79
+ this.canvasList.set(chartName, { chart: undefined, dataSets: [] as Dataseries[] })
80
+ }
81
+ this.canvasList.get(chartName)?.dataSets.push(pds)
82
+ })
83
+ } else {
84
+ if (!this.canvasList.has(ds.chartName)) {
85
+ // initialize new charts
86
+ this.canvasList.set(ds.chartName, { chart: undefined, dataSets: [] as Dataseries[] })
152
87
  }
153
- },
154
- y: {
155
- title: {
156
- display: !!this.inputData?.settings?.yAxisLabel,
157
- text: this.inputData?.settings?.yAxisLabel
88
+ this.canvasList.get(ds.chartName)?.dataSets.push(ds)
89
+ }
90
+ })
91
+ // prevent duplicate transformation
92
+ this.inputData.dataseries = []
93
+ // console.log('new linechart datasets', this.canvasList)
94
+ }
95
+
96
+ applyInputData() {
97
+ this.setupCharts()
98
+
99
+ this.requestUpdate()
100
+ this.canvasList.forEach(({ chart, dataSets }) => {
101
+ if (chart) {
102
+ chart.data.datasets = dataSets
103
+ chart.options.scales.x.type = this.xAxisType()
104
+ chart.options.scales.x.title.display = !!this.inputData?.settings?.xAxisLabel
105
+ chart.options.scales.x.title.text = this.inputData?.settings?.xAxisLabel
106
+ chart.options.scales.y.title.display = !!this.inputData?.settings?.yAxisLabel
107
+ chart.options.scales.y.title.text = this.inputData?.settings?.yAxisLabel
108
+ chart?.update('resize')
109
+ }
110
+ })
111
+ }
112
+
113
+ xAxisType(): 'linear' | 'logarithmic' | 'category' | 'time' | 'timeseries' | undefined {
114
+ if (this.inputData?.settings?.timeseries) return 'time'
115
+ const onePoint = this.inputData?.dataseries?.[0].data?.[0]
116
+ if (!isNaN(Number(onePoint?.x))) return 'linear'
117
+ return 'category'
118
+ }
119
+
120
+ setupCharts() {
121
+ this.canvasList.forEach((chartM, chartName) => {
122
+ if (!chartM.dataSets.length) this.canvasList.delete(chartName)
123
+ if (chartM.chart) return
124
+ const canvas = this.shadowRoot?.querySelector(`[name="${chartName}"]`) as HTMLCanvasElement
125
+ if (!canvas) return
126
+ // console.log('chartM', canvas, chartM.chart)
127
+ chartM.chart = new Chart(canvas, {
128
+ type: 'line',
129
+ data: {
130
+ // @ts-ignore
131
+ datasets: chartM.dataSets
132
+ },
133
+ options: {
134
+ responsive: true,
135
+ maintainAspectRatio: false,
136
+ animations: {
137
+ colors: false,
138
+ x: false
139
+ },
140
+ transitions: {
141
+ active: {
142
+ animation: {
143
+ duration: 100
144
+ }
145
+ }
146
+ },
147
+ scales: {
148
+ x: {
149
+ type: this.xAxisType(),
150
+ title: {
151
+ display: !!this.inputData?.settings?.xAxisLabel,
152
+ text: this.inputData?.settings?.xAxisLabel
153
+ }
154
+ },
155
+ y: {
156
+ title: {
157
+ display: !!this.inputData?.settings?.yAxisLabel,
158
+ text: this.inputData?.settings?.yAxisLabel
159
+ }
160
+ }
161
+ }
158
162
  }
159
- }
160
- },
161
- },
162
- }
163
- )
164
- })
165
- }
166
-
167
- static styles = css`
168
- :host {
169
- display: block;
170
- color: var(--re-text-color, #000);
171
-
172
- font-family: sans-serif;
173
- padding: 16px;
174
- box-sizing: border-box;
175
- margin: auto;
176
- }
177
-
178
- .paging:not([active]) { display: none !important; }
179
-
180
- .columnLayout {
181
- flex-direction: column;
182
- }
183
-
184
- .wrapper {
185
- display: flex;
186
- flex-direction: column;
187
- height: 100%;
188
- width: 100%;
189
- }
190
-
191
- .chart-container {
192
- display: flex;
193
- flex: 1;
194
- overflow: hidden;
195
- position: relative;
163
+ })
164
+ })
196
165
  }
197
166
 
198
- .sizer {
199
- flex: 1;
200
- overflow: hidden;
201
- position: relative;
202
- }
203
-
204
- header {
205
- display: flex;
206
- flex-direction: column;
207
- margin: 0 0 16px 0;
208
- }
209
- h3 {
210
- margin: 0;
211
- max-width: 300px;
212
- overflow: hidden;
213
- text-overflow: ellipsis;
214
- white-space: nowrap;
215
- }
216
- p {
217
- margin: 10px 0 0 0;
218
- max-width: 300px;
219
- font-size: 14px;
220
- line-height: 17px;
221
- }
222
- `;
223
-
224
- render() {
225
- return html`
226
- <div class="wrapper">
227
- <header>
228
- <h3 class="paging" ?active=${this.inputData?.settings?.title}>${this.inputData?.settings?.title}</h3>
229
- <p class="paging" ?active=${this.inputData?.settings?.subTitle}>${this.inputData?.settings?.subTitle}</p>
230
- </header>
231
-
232
- <div class="chart-container ${this?.inputData?.settings?.columnLayout ? 'columnLayout': ''}">
233
- ${repeat(this.canvasList, ([chartName, chartM]) => chartName, ([chartName]) => html`
234
- <div class="sizer">
235
- <canvas name="${chartName}"></canvas>
167
+ static styles = css`
168
+ :host {
169
+ display: block;
170
+ color: var(--re-text-color, #000);
171
+
172
+ font-family: sans-serif;
173
+ padding: 16px;
174
+ box-sizing: border-box;
175
+ margin: auto;
176
+ }
177
+
178
+ .paging:not([active]) {
179
+ display: none !important;
180
+ }
181
+
182
+ .columnLayout {
183
+ flex-direction: column;
184
+ }
185
+
186
+ .wrapper {
187
+ display: flex;
188
+ flex-direction: column;
189
+ height: 100%;
190
+ width: 100%;
191
+ }
192
+
193
+ .chart-container {
194
+ display: flex;
195
+ flex: 1;
196
+ overflow: hidden;
197
+ position: relative;
198
+ }
199
+
200
+ .sizer {
201
+ flex: 1;
202
+ overflow: hidden;
203
+ position: relative;
204
+ }
205
+
206
+ header {
207
+ display: flex;
208
+ flex-direction: column;
209
+ margin: 0 0 16px 0;
210
+ }
211
+ h3 {
212
+ margin: 0;
213
+ max-width: 300px;
214
+ overflow: hidden;
215
+ text-overflow: ellipsis;
216
+ white-space: nowrap;
217
+ }
218
+ p {
219
+ margin: 10px 0 0 0;
220
+ max-width: 300px;
221
+ font-size: 14px;
222
+ line-height: 17px;
223
+ }
224
+ `
225
+
226
+ render() {
227
+ return html`
228
+ <div class="wrapper">
229
+ <header>
230
+ <h3 class="paging" ?active=${this.inputData?.settings?.title}>
231
+ ${this.inputData?.settings?.title}
232
+ </h3>
233
+ <p class="paging" ?active=${this.inputData?.settings?.subTitle}>
234
+ ${this.inputData?.settings?.subTitle}
235
+ </p>
236
+ </header>
237
+
238
+ <div class="chart-container ${this?.inputData?.settings?.columnLayout ? 'columnLayout' : ''}">
239
+ ${repeat(
240
+ [...this.canvasList.entries()].sort(),
241
+ ([chartName, chartM]) => chartName,
242
+ ([chartName]) => html`
243
+ <div class="sizer">
244
+ <canvas name="${chartName}"></canvas>
245
+ </div>
246
+ `
247
+ )}
248
+ </div>
236
249
  </div>
237
- `)}
238
- </div>
239
- </div>
240
- `;
241
- }
250
+ `
251
+ }
242
252
  }
243
253
  window.customElements.define('widget-linechart-versionplaceholder', WidgetLinechart)
244
254
 
@@ -249,125 +259,193 @@ window.customElements.define('widget-linechart-versionplaceholder', WidgetLinech
249
259
  // So the current solution is to execute the source code here in-line. (moving this to a local file and importing that does not work!)
250
260
  // This is the source code of https://github.com/chartjs/chartjs-adapter-date-fns/blob/master/src/index.js
251
261
 
252
- import {_adapters} from 'chart.js';
262
+ import { _adapters } from 'chart.js'
253
263
 
254
264
  import {
255
- parse, parseISO, toDate, isValid, format,
256
- startOfSecond, startOfMinute, startOfHour, startOfDay,
257
- startOfWeek, startOfMonth, startOfQuarter, startOfYear,
258
- addMilliseconds, addSeconds, addMinutes, addHours,
259
- addDays, addWeeks, addMonths, addQuarters, addYears,
260
- differenceInMilliseconds, differenceInSeconds, differenceInMinutes,
261
- differenceInHours, differenceInDays, differenceInWeeks,
262
- differenceInMonths, differenceInQuarters, differenceInYears,
263
- endOfSecond, endOfMinute, endOfHour, endOfDay,
264
- endOfWeek, endOfMonth, endOfQuarter, endOfYear
265
- } from 'date-fns';
265
+ parse,
266
+ parseISO,
267
+ toDate,
268
+ isValid,
269
+ format,
270
+ startOfSecond,
271
+ startOfMinute,
272
+ startOfHour,
273
+ startOfDay,
274
+ startOfWeek,
275
+ startOfMonth,
276
+ startOfQuarter,
277
+ startOfYear,
278
+ addMilliseconds,
279
+ addSeconds,
280
+ addMinutes,
281
+ addHours,
282
+ addDays,
283
+ addWeeks,
284
+ addMonths,
285
+ addQuarters,
286
+ addYears,
287
+ differenceInMilliseconds,
288
+ differenceInSeconds,
289
+ differenceInMinutes,
290
+ differenceInHours,
291
+ differenceInDays,
292
+ differenceInWeeks,
293
+ differenceInMonths,
294
+ differenceInQuarters,
295
+ differenceInYears,
296
+ endOfSecond,
297
+ endOfMinute,
298
+ endOfHour,
299
+ endOfDay,
300
+ endOfWeek,
301
+ endOfMonth,
302
+ endOfQuarter,
303
+ endOfYear
304
+ } from 'date-fns'
266
305
 
267
306
  const FORMATS = {
268
- datetime: 'MMM d, yyyy, h:mm:ss aaaa',
269
- millisecond: 'h:mm:ss.SSS aaaa',
270
- second: 'h:mm:ss aaaa',
271
- minute: 'h:mm aaaa',
272
- hour: 'ha',
273
- day: 'MMM d',
274
- week: 'PP',
275
- month: 'MMM yyyy',
276
- quarter: 'qqq - yyyy',
277
- year: 'yyyy'
278
- };
307
+ datetime: 'MMM d, yyyy, h:mm:ss aaaa',
308
+ millisecond: 'h:mm:ss.SSS aaaa',
309
+ second: 'h:mm:ss aaaa',
310
+ minute: 'h:mm aaaa',
311
+ hour: 'ha',
312
+ day: 'MMM d',
313
+ week: 'PP',
314
+ month: 'MMM yyyy',
315
+ quarter: 'qqq - yyyy',
316
+ year: 'yyyy'
317
+ }
279
318
 
280
319
  _adapters._date.override({
281
- _id: 'date-fns', // DEBUG
282
- formats: function() {
283
- return FORMATS;
284
- },
285
-
286
- parse: function(value, fmt) {
287
- if (value === null || typeof value === 'undefined') {
288
- return null;
289
- }
290
- const type = typeof value;
291
- if (type === 'number' || value instanceof Date) {
292
- // @ts-ignore
293
- value = toDate(value);
294
- } else if (type === 'string') {
295
- if (typeof fmt === 'string') {
296
- // @ts-ignore
297
- value = parse(value, fmt, new Date(), this.options);
298
- } else {
299
- // @ts-ignore
300
- value = parseISO(value, this.options);
301
- }
302
- }
303
- // @ts-ignore
304
- return isValid(value) ? value.getTime() : null;
305
- },
306
-
307
- format: function(time, fmt) {
308
- return format(time, fmt, this.options);
309
- },
310
-
311
- // @ts-ignore
312
- add: function(time, amount, unit) {
313
- switch (unit) {
314
- case 'millisecond': return addMilliseconds(time, amount);
315
- case 'second': return addSeconds(time, amount);
316
- case 'minute': return addMinutes(time, amount);
317
- case 'hour': return addHours(time, amount);
318
- case 'day': return addDays(time, amount);
319
- case 'week': return addWeeks(time, amount);
320
- case 'month': return addMonths(time, amount);
321
- case 'quarter': return addQuarters(time, amount);
322
- case 'year': return addYears(time, amount);
323
- default: return time;
324
- }
325
- },
326
-
327
- diff: function(max, min, unit) {
328
- switch (unit) {
329
- case 'millisecond': return differenceInMilliseconds(max, min);
330
- case 'second': return differenceInSeconds(max, min);
331
- case 'minute': return differenceInMinutes(max, min);
332
- case 'hour': return differenceInHours(max, min);
333
- case 'day': return differenceInDays(max, min);
334
- case 'week': return differenceInWeeks(max, min);
335
- case 'month': return differenceInMonths(max, min);
336
- case 'quarter': return differenceInQuarters(max, min);
337
- case 'year': return differenceInYears(max, min);
338
- default: return 0;
339
- }
340
- },
341
-
342
- // @ts-ignore
343
- startOf: function(time, unit, weekday) {
344
- switch (unit) {
345
- case 'second': return startOfSecond(time);
346
- case 'minute': return startOfMinute(time);
347
- case 'hour': return startOfHour(time);
348
- case 'day': return startOfDay(time);
349
- case 'week': return startOfWeek(time);
350
- // @ts-ignore
351
- case 'isoWeek': return startOfWeek(time, {weekStartsOn: +weekday});
352
- case 'month': return startOfMonth(time);
353
- case 'quarter': return startOfQuarter(time);
354
- case 'year': return startOfYear(time);
355
- default: return time;
356
- }
357
- },
358
-
359
- // @ts-ignore
360
- endOf: function(time, unit) {
361
- switch (unit) {
362
- case 'second': return endOfSecond(time);
363
- case 'minute': return endOfMinute(time);
364
- case 'hour': return endOfHour(time);
365
- case 'day': return endOfDay(time);
366
- case 'week': return endOfWeek(time);
367
- case 'month': return endOfMonth(time);
368
- case 'quarter': return endOfQuarter(time);
369
- case 'year': return endOfYear(time);
370
- default: return time;
320
+ _id: 'date-fns', // DEBUG
321
+ formats: function () {
322
+ return FORMATS
323
+ },
324
+
325
+ parse: function (value, fmt) {
326
+ if (value === null || typeof value === 'undefined') {
327
+ return null
328
+ }
329
+ const type = typeof value
330
+ if (type === 'number' || value instanceof Date) {
331
+ // @ts-ignore
332
+ value = toDate(value)
333
+ } else if (type === 'string') {
334
+ if (typeof fmt === 'string') {
335
+ // @ts-ignore
336
+ value = parse(value, fmt, new Date(), this.options)
337
+ } else {
338
+ // @ts-ignore
339
+ value = parseISO(value, this.options)
340
+ }
341
+ }
342
+ // @ts-ignore
343
+ return isValid(value) ? value.getTime() : null
344
+ },
345
+
346
+ format: function (time, fmt) {
347
+ return format(time, fmt, this.options)
348
+ },
349
+
350
+ // @ts-ignore
351
+ add: function (time, amount, unit) {
352
+ switch (unit) {
353
+ case 'millisecond':
354
+ return addMilliseconds(time, amount)
355
+ case 'second':
356
+ return addSeconds(time, amount)
357
+ case 'minute':
358
+ return addMinutes(time, amount)
359
+ case 'hour':
360
+ return addHours(time, amount)
361
+ case 'day':
362
+ return addDays(time, amount)
363
+ case 'week':
364
+ return addWeeks(time, amount)
365
+ case 'month':
366
+ return addMonths(time, amount)
367
+ case 'quarter':
368
+ return addQuarters(time, amount)
369
+ case 'year':
370
+ return addYears(time, amount)
371
+ default:
372
+ return time
373
+ }
374
+ },
375
+
376
+ diff: function (max, min, unit) {
377
+ switch (unit) {
378
+ case 'millisecond':
379
+ return differenceInMilliseconds(max, min)
380
+ case 'second':
381
+ return differenceInSeconds(max, min)
382
+ case 'minute':
383
+ return differenceInMinutes(max, min)
384
+ case 'hour':
385
+ return differenceInHours(max, min)
386
+ case 'day':
387
+ return differenceInDays(max, min)
388
+ case 'week':
389
+ return differenceInWeeks(max, min)
390
+ case 'month':
391
+ return differenceInMonths(max, min)
392
+ case 'quarter':
393
+ return differenceInQuarters(max, min)
394
+ case 'year':
395
+ return differenceInYears(max, min)
396
+ default:
397
+ return 0
398
+ }
399
+ },
400
+
401
+ // @ts-ignore
402
+ startOf: function (time, unit, weekday) {
403
+ switch (unit) {
404
+ case 'second':
405
+ return startOfSecond(time)
406
+ case 'minute':
407
+ return startOfMinute(time)
408
+ case 'hour':
409
+ return startOfHour(time)
410
+ case 'day':
411
+ return startOfDay(time)
412
+ case 'week':
413
+ return startOfWeek(time)
414
+ case 'isoWeek':
415
+ // @ts-ignore
416
+ return startOfWeek(time, { weekStartsOn: +weekday })
417
+ case 'month':
418
+ return startOfMonth(time)
419
+ case 'quarter':
420
+ return startOfQuarter(time)
421
+ case 'year':
422
+ return startOfYear(time)
423
+ default:
424
+ return time
425
+ }
426
+ },
427
+
428
+ // @ts-ignore
429
+ endOf: function (time, unit) {
430
+ switch (unit) {
431
+ case 'second':
432
+ return endOfSecond(time)
433
+ case 'minute':
434
+ return endOfMinute(time)
435
+ case 'hour':
436
+ return endOfHour(time)
437
+ case 'day':
438
+ return endOfDay(time)
439
+ case 'week':
440
+ return endOfWeek(time)
441
+ case 'month':
442
+ return endOfMonth(time)
443
+ case 'quarter':
444
+ return endOfQuarter(time)
445
+ case 'year':
446
+ return endOfYear(time)
447
+ default:
448
+ return time
449
+ }
371
450
  }
372
- }
373
- });
451
+ })