|
|
@ -14,7 +14,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
areaGenerator = null; |
|
|
|
areaGenerator = null; |
|
|
|
|
|
|
|
|
|
|
|
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { |
|
|
|
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { |
|
|
|
super(d3, _el, _series, _options); |
|
|
|
super(_el, _series, _options); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
renderMetrics(): void { |
|
|
|
renderMetrics(): void { |
|
|
@ -62,13 +62,13 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
initLineGenerator(): void { |
|
|
|
initLineGenerator(): void { |
|
|
|
this.lineGenerator = this.d3.line() |
|
|
|
this.lineGenerator = d3.line() |
|
|
|
.x(d => this.xScale(d[0])) |
|
|
|
.x(d => this.xScale(d[0])) |
|
|
|
.y(d => this.yScale(d[1])); |
|
|
|
.y(d => this.yScale(d[1])); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
initAreaGenerator(): void { |
|
|
|
initAreaGenerator(): void { |
|
|
|
this.areaGenerator = this.d3.area() |
|
|
|
this.areaGenerator = d3.area() |
|
|
|
.x(d => this.xScale(d[0])) |
|
|
|
.x(d => this.xScale(d[0])) |
|
|
|
.y1(d => this.yScale(d[1])) |
|
|
|
.y1(d => this.yScale(d[1])) |
|
|
|
.y0(d => this.height); |
|
|
|
.y0(d => this.height); |
|
|
@ -169,7 +169,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if(metricOptions.mode === Mode.CHARGE) { |
|
|
|
if(metricOptions.mode === Mode.CHARGE) { |
|
|
|
const dataPairs = this.d3.pairs(datapoints); |
|
|
|
const dataPairs = d3.pairs(datapoints); |
|
|
|
this.metricContainer.selectAll(null) |
|
|
|
this.metricContainer.selectAll(null) |
|
|
|
.data(dataPairs) |
|
|
|
.data(dataPairs) |
|
|
|
.enter() |
|
|
|
.enter() |
|
|
@ -325,7 +325,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// TODO: d3.bisect is not the best way. Use binary search
|
|
|
|
// TODO: d3.bisect is not the best way. Use binary search
|
|
|
|
const bisectIndex = this.d3.bisector((d: [number, number]) => d[columnIdx]).left; |
|
|
|
const bisectIndex = d3.bisector((d: [number, number]) => d[columnIdx]).left; |
|
|
|
let closestIdx = bisectIndex(datapoints, value); |
|
|
|
let closestIdx = bisectIndex(datapoints, value); |
|
|
|
|
|
|
|
|
|
|
|
// TODO: refactor corner cases
|
|
|
|
// TODO: refactor corner cases
|
|
|
@ -364,8 +364,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
onMouseMove(): void { |
|
|
|
onMouseMove(): void { |
|
|
|
const eventX = this.d3.mouse(this.chartContainer.node())[0]; |
|
|
|
const eventX = d3.mouse(this.chartContainer.node())[0]; |
|
|
|
const eventY = this.d3.mouse(this.chartContainer.node())[1]; |
|
|
|
const eventY = d3.mouse(this.chartContainer.node())[1]; |
|
|
|
const xValue = this.xScale.invert(eventX); // mouse x position in xScale
|
|
|
|
const xValue = this.xScale.invert(eventX); // mouse x position in xScale
|
|
|
|
const yValue = this.yScale.invert(eventY); |
|
|
|
const yValue = this.yScale.invert(eventY); |
|
|
|
// TODO: isOutOfChart is a hack, use clip path correctly
|
|
|
|
// TODO: isOutOfChart is a hack, use clip path correctly
|
|
|
@ -383,8 +383,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
// TDOO: is shift key pressed
|
|
|
|
// TDOO: is shift key pressed
|
|
|
|
// TODO: need to refactor this object
|
|
|
|
// TODO: need to refactor this object
|
|
|
|
this.options.eventsCallbacks.mouseMove({ |
|
|
|
this.options.eventsCallbacks.mouseMove({ |
|
|
|
x: this.d3.event.pageX, |
|
|
|
x: d3.event.pageX, |
|
|
|
y: this.d3.event.pageY, |
|
|
|
y: d3.event.pageY, |
|
|
|
xVal: xValue, |
|
|
|
xVal: xValue, |
|
|
|
yVal: yValue, |
|
|
|
yVal: yValue, |
|
|
|
series: datapoints, |
|
|
|
series: datapoints, |
|
|
@ -481,7 +481,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
if(this.isOutOfChart() === true) { |
|
|
|
if(this.isOutOfChart() === true) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
if(this.d3.event.type === 'dblclick' && !this.isDoubleClickActive()) { |
|
|
|
if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
// TODO: its not clear, why we use this orientation here. Mb its better to use separate option
|
|
|
|
// TODO: its not clear, why we use this orientation here. Mb its better to use separate option
|
|
|
|