fix: Add Date and Moment as valid types for chartjs-plugin-annotation… (#47317)

* fix: Add Date and Moment as valid types for chartjs-plugin-annotation xMin, xMax. Closes #47274

* Update types/chartjs-plugin-annotation/tslint.json

Co-authored-by: Piotr Błażejewicz (Peter Blazejewicz) <peterblazejewicz@users.noreply.github.com>

Co-authored-by: Piotr Błażejewicz (Peter Blazejewicz) <peterblazejewicz@users.noreply.github.com>
This commit is contained in:
Dan Manastireanu 2020-09-09 23:53:42 +03:00 committed by GitHub
parent 031ad1fc8e
commit 089c52f00f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 8 deletions

View File

@ -1,5 +1,6 @@
import * as Chart from 'chart.js';
import * as ChartJsAnnotation from 'chartjs-plugin-annotation';
import moment = require('moment');
Chart.pluginService.register(ChartJsAnnotation);
Chart.pluginService.unregister(ChartJsAnnotation);
@ -266,6 +267,16 @@ const boxAnnotation: ChartJsAnnotation.BoxAnnotationOptions = {
onWheel(e) { }
};
// Date and Moment support
// https://github.com/chartjs/chartjs-plugin-annotation/blob/v0.5.7/samples/line-time-scale.html#L171
const dateBox: ChartJsAnnotation.BoxAnnotationOptions = {
type: "box",
xMin: new Date('2020-01-01'),
xMax: new Date('2020-02-01'),
yMin: moment('2020-01-01'),
yMax: moment('2020-02-01'),
};
const annotatedChart = new Chart(ctx, {
type: 'bar',
data: chartData,
@ -273,7 +284,8 @@ const annotatedChart = new Chart(ctx, {
annotation: {
annotations: [
lineAnnotation,
boxAnnotation
boxAnnotation,
dateBox
]
}
}

View File

@ -5,6 +5,7 @@
// TypeScript Version: 2.4
import * as Chart from 'chart.js';
import { Moment } from 'moment';
// Extend the types from chart.js
declare module 'chart.js' {
@ -68,12 +69,14 @@ declare namespace ChartJsAnnotation {
onWheel?: (event: MouseEvent) => void;
}
type ChartPointValue = number | string | Date | Moment;
interface LineAnnotationOptions extends CommonAnnotationOptions {
type: 'line';
mode: 'horizontal' | 'vertical';
scaleID: string;
value: number | string; // value or label
endValue?: number | string; // value or label
value: ChartPointValue;
endValue?: ChartPointValue;
borderColor?: Chart.ChartColor;
borderWidth?: number;
@ -87,10 +90,10 @@ declare namespace ChartJsAnnotation {
type: 'box';
xScaleID?: string;
yScaleID?: string;
xMin: number | string; // value or label
xMax: number | string;
yMin: number | string;
yMax: number | string;
xMin: ChartPointValue;
xMax: ChartPointValue;
yMin: ChartPointValue;
yMax: ChartPointValue;
borderColor?: Chart.ChartColor;
borderWidth?: number;

View File

@ -0,0 +1,6 @@
{
"private": true,
"dependencies": {
"moment": "^2.10.2"
}
}

View File

@ -1 +1,3 @@
{ "extends": "dtslint/dt.json" }
{
"extends": "dtslint/dt.json"
}