Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

XY Chart: Add area and scatter chart styles #399

Closed
wants to merge 1 commit into from
Closed

XY Chart: Add area and scatter chart styles #399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 223 additions & 21 deletions packages/react-components/src/components/xy-output-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { AbstractOutputProps, AbstractOutputState } from './abstract-output-comp
import { AbstractTreeOutputComponent } from './abstract-tree-output-component';
import * as React from 'react';
import { Line } from 'react-chartjs-2';
import {Scatter} from 'react-chartjs-2';
import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
import { Entry } from 'tsp-typescript-client/lib/models/entry';
import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/responses';
Expand All @@ -12,23 +13,35 @@ import { EntryTree } from './utils/filtrer-tree/entry-tree';
import { getAllExpandedNodeIds } from './utils/filtrer-tree/utils';
import { TreeNode } from './utils/filtrer-tree/tree-node';
import ColumnHeader from './utils/filtrer-tree/column-header';
import { ChangeEvent } from 'react';

type XYOuputState = AbstractOutputState & {
selectedSeriesId: number[];
xyTree: Entry[];
checkedSeries: number[];
collapsedNodes: number[];
orderedNodes: number[];
chartStyle: any;
// FIXME Type this properly
xyData: any;
columns: ColumnHeader[];
};

class xyPair {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}

export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutputProps, XYOuputState> {
private currentColorIndex = 0;
private colorMap: Map<string, number> = new Map();

private lineChartRef: any;
protected desiredChartStyle: any;
private chartRef: any;
private mouseIsDown = false;
private posPixelSelect = 0;
private plugin = {
Expand All @@ -40,7 +53,7 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
const scale = this.props.viewRange.getEnd() - this.props.viewRange.getstart();
this.props.unitController.selectionRange = {
start: xStartPos,
end: xStartPos + ((event.screenX - this.posPixelSelect) / this.lineChartRef.current.chartInstance.width) * scale
end: xStartPos + ((event.screenX - this.posPixelSelect) / this.chartRef.current.chartInstance.width) * scale
};
}
};
Expand All @@ -54,6 +67,7 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
constructor(props: AbstractOutputProps) {
super(props);
this.state = {
chartStyle: 'line',
outputStatus: ResponseStatus.RUNNING,
selectedSeriesId: [],
xyTree: [],
Expand All @@ -65,7 +79,7 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
};

this.afterChartDraw = this.afterChartDraw.bind(this);
this.lineChartRef = React.createRef();
this.chartRef = React.createRef();
}

componentDidMount(): void {
Expand Down Expand Up @@ -108,19 +122,41 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
if (needToUpdate || prevState.outputStatus === ResponseStatus.RUNNING) {
this.updateXY();
}
if (this.lineChartRef.current) {
this.lineChartRef.current.chartInstance.render();
if (this.chartRef.current) {
this.chartRef.current.chartInstance.render();
}
}

synchronizeTreeScroll(): void { /* Nothing to do by default */ }

changeChartStyle(e: ChangeEvent<HTMLSelectElement>): void {
const value = e.target.value.toString();
this.desiredChartStyle = value;
this.updateXY()
.then(() => {
this.setState({chartStyle:value});
});
}

renderTree(): React.ReactNode | undefined {
this.onToggleCheck = this.onToggleCheck.bind(this);
this.onToggleCollapse = this.onToggleCollapse.bind(this);
this.onOrderChange = this.onOrderChange.bind(this);
return this.state.xyTree.length
? <EntryTree
? <>
<select
className="theia-select"
value={this.state.chartStyle}
onChange={
e => this.changeChartStyle(e)
}
id="xy-dropdown"
>
<option value="line">Line</option>
<option value="scatter">Scatter</option>
<option value="area">Stacked Area</option>
</select>
<EntryTree
entries={this.state.xyTree}
showCheckboxes={true}
collapsedNodes={this.state.collapsedNodes}
Expand All @@ -130,16 +166,20 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
onOrderChange={this.onOrderChange}
headers={this.state.columns}
/>
</>
: undefined
;
}

renderChart(): React.ReactNode {
chooseChart(): React.ReactNode {

const lineOptions: Chart.ChartOptions = {
responsive: true,
elements: {
point: { radius: 0 },
line: { tension: 0 }
line: { tension: 0,
borderWidth: 2
}
},
maintainAspectRatio: false,
legend: { display: false },
Expand All @@ -153,22 +193,116 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
},
scales: {
xAxes: [{ id: 'time-axis', display: false }],
yAxes: [{ display: false }]
yAxes: [{
display: false,
stacked: false
}]
},
animation: { duration: 0 },
events: [ 'mousedown' ],
};

const areaOptions: Chart.ChartOptions = {
responsive: true,
elements: {
point: { radius: 0 },
line: { tension: 0,
borderWidth: 0
}
},
maintainAspectRatio: false,
legend: { display: false },
layout: {
padding: {
left: 0,
right: 0,
top: 15,
bottom: 5
}
},
scales: {
xAxes: [{
id: 'time-axis',
display: false
}],
yAxes: [{
stacked: true,
display: false
}]
},
animation: { duration: 0 },
events: [ 'mousedown' ],
};

const scatterOptions: Chart.ChartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: { display: false },
layout: {
padding: {
left: 0,
right: 0,
top: 15,
bottom: 5
}
},
scales: {
xAxes: [{
id: 'time-axis',
display: false,
ticks: {
min: this.props.viewRange?.getstart(),
max: this.props.viewRange?.getEnd()
}
}],
yAxes: [
{
display: false,
},
],
},
animation: { duration: 0 },
events: [ 'mousedown' ]
};

switch (this.state.chartStyle) {
case 'scatter':
return <Scatter
data={this.state.xyData}
height={parseInt(this.props.style.height.toString())}
options={scatterOptions}
ref={this.chartRef}
plugins={[this.plugin]}
>
</Scatter>;
case 'area':
return <Line
data={this.state.xyData}
height={parseInt(this.props.style.height.toString())}
options={areaOptions}
ref={this.chartRef}
plugins={[this.plugin]}
>
</Line>;
case 'line':
return <Line
data={this.state.xyData}
height={parseInt(this.props.style.height.toString())}
options={lineOptions}
ref={this.chartRef}
plugins={[this.plugin]}
>
</Line>;
}

}

renderChart(): React.ReactNode {
// width={this.props.style.chartWidth}
return <React.Fragment>
{this.state.outputStatus === ResponseStatus.COMPLETED ?
<div id='xy-main' onMouseDown={event => this.beginSelection(event)} style={{ height: this.props.style.height }} >
<Line
data={this.state.xyData}
height={parseInt(this.props.style.height.toString())}
options={lineOptions}
ref={this.lineChartRef}
plugins={[this.plugin]}>
</Line>
{this.chooseChart()}
</div> :
<div className='analysis-running'>
{(
Expand Down Expand Up @@ -279,7 +413,7 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
const offset = this.props.viewRange.getOffset() ?? 0;
const scale = this.props.viewRange.getEnd() - this.props.viewRange.getstart();
const xPos = this.props.viewRange.getstart() - offset +
(event.nativeEvent.offsetX / this.lineChartRef.current.chartInstance.width) * scale;
(event.nativeEvent.offsetX / this.chartRef.current.chartInstance.width) * scale;
this.props.unitController.selectionRange = {
start: xPos,
end: xPos
Expand All @@ -288,7 +422,7 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
document.addEventListener('mouseup', this.endSelection);
}

private async updateXY() {
private async updateXY(): Promise<void> {
let start = 1332170682440133097;
let end = 1332170682540133097;
const viewRange = this.props.viewRange;
Expand All @@ -303,11 +437,80 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
const tspClientResponse = await this.props.tspClient.fetchXY(this.props.traceId, this.props.outputDescriptor.id, xyDataParameters);
const xyDataResponse = tspClientResponse.getModel();
if (tspClientResponse.isOk() && xyDataResponse) {
this.buildXYData(xyDataResponse.model.series);
switch (this.desiredChartStyle) {
case 'scatter':
this.buildScatterData(xyDataResponse.model.series);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed offline, if different types of chart require the data to be formatted differently, they should be encapsulated together in a single class so that there can be no mismatch. You could add separate widget classes for each series type (in react, it is suggested to multiply small stateless classes instead of big ones with ton of stuff in it). So you could have ScatterXy, LineXy, AreaXy, which would take the series as props and would format the data appropriately and render the proper line type.

Here, you could definitely have a race condition between changing the chart type and zooming in with the old chart type and get the view to temporarily render wrong, until it is rendered right ;-)

But I'll let the maintainers of the extension decide if my comment is purely informative or if you should act on it

break;
case 'area':
this.buildAreaData(xyDataResponse.model.series);
break;
case 'line':
this.buildLineData(xyDataResponse.model.series);
break;
default:
this.buildLineData(xyDataResponse.model.series);
break;
}
}
}

private buildXYData(seriesObj: XYSeries[]) {
private buildScatterData(seriesObj: XYSeries[]) {
const dataSetArray = new Array<any>();
let xValues: number[] = [];
let yValues: number[] = [];
let pairs: xyPair[] = [];
seriesObj.forEach(series => {
const color = this.getSeriesColor(series.seriesName);
xValues = series.xValues;
yValues = series.yValues;

xValues.forEach((value, index) => {
pairs.push(new xyPair(value, yValues[index]));
});

dataSetArray.push({
label: series.seriesName,
data: pairs,
backgroundColor: color,
borderColor: color,
});
pairs = [];
});
const scatterData = {
labels: xValues,
datasets: dataSetArray
};

this.setState({
xyData: scatterData
});
}

private buildAreaData(seriesObj: XYSeries[]) {
const dataSetArray = new Array<any>();
let xValues: number[] = [];
seriesObj.forEach(series => {
const color = this.getSeriesColor(series.seriesName);
xValues = series.xValues;
dataSetArray.push({
label: series.seriesName,
fill: 'start',
backgroundColor: color,
data: series.yValues
});
});
dataSetArray.shift();
const areaData = {
labels: xValues,
datasets: dataSetArray
};

this.setState({
xyData: areaData
});
}

private buildLineData(seriesObj: XYSeries[]) {
const dataSetArray = new Array<any>();
let xValues: number[] = [];
seriesObj.forEach(series => {
Expand All @@ -317,7 +520,6 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
label: series.seriesName,
fill: false,
borderColor: color,
borderWidth: 2,
data: series.yValues
});
});
Expand Down
4 changes: 4 additions & 0 deletions packages/react-components/style/output-components-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,10 @@ canvas {
padding: 0 0;
}

#xy-dropdown {
margin-bottom: 5px;
}

#input-filter-tree {
background-color: var(--theia-input-background);
border: none;
Expand Down