1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import { observer } from "mobx-react";
import * as React from "react";
import { Doc } from "../../../../fields/Doc";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
InteractionItem,
} from 'chart.js';
import { Bar, getDatasetAtEvent, getElementAtEvent } from 'react-chartjs-2';
import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
import { action, computed, observable } from "mobx";
export interface ChartBoxProps {
rootDoc: Doc;
pairs: {x: number, y:number}[];
}
export interface ChartJsData {
labels: number[];
datasets: {
label: string;
data: number[];
backgroundColor: string[];
}[]
}
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const primaryColor = 'rgba(53, 162, 235, 0.5)';
const selectedColor = 'rgba(255, 99, 132, 0.5)';
@observer
export class ChartBox extends React.Component<ChartBoxProps> {
private _chartRef: any = React.createRef<ChartJSOrUndefined<"bar", number[], string>>();
@observable private _prevColor: string | undefined= undefined;
@observable private _prevIndex: { dIndex: number, index: number} | undefined = undefined;
@observable private _chartJsData: ChartJsData | undefined= undefined;
@computed get options() {
return {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Bar Chart',
},
},
}
}
@action
generateChartJsData() {
const labels = this.props.pairs.map(p => p.x);
const dataset = {
label: 'Dataset 1',
data: this.props.pairs.map(p => p.y),
backgroundColor: this.props.pairs.map(p => primaryColor),
}
const data = {
labels,
datasets: [dataset]
};
this._chartJsData = data;
}
componentDidMount() {
this.generateChartJsData();
}
@action
onClick = (e: any) => {
e.preventDefault();
if (getDatasetAtEvent(this._chartRef.current, e).length == 0) return;
if (!this._chartJsData) return;
if (this._prevIndex && this._prevColor) {
this._chartJsData.datasets[this._prevIndex.dIndex].backgroundColor[this._prevIndex.index] = this._prevColor;
}
const currSelected = getElementAtEvent(this._chartRef.current, e);
const index = { datasetIndex: currSelected[0].datasetIndex, index: currSelected[0].index };
this._prevIndex = { dIndex: index.datasetIndex, index: index.index };
this._prevColor = this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index];
this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index] = selectedColor;
// TODO: nda - send data back to the backend so that we know how to render the chart
this._chartRef.current.update();
}
render() {
if (this.props.pairs && this._chartJsData) {
return <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={(e) => this.onClick(e)} />
} else {
return <div></div>
}
}
}
|
