Browse Source

time/value order change attempt

merge-requests/8/head
Alexey Velikiy 3 years ago
parent
commit
8f49dc681d
  1. 6
      examples/demo.html
  2. 12
      examples/demo_live.html
  3. 4
      examples/demo_vertical.html
  4. 2
      package.json
  5. 52
      src/index.ts

6
examples/demo.html

@ -12,9 +12,9 @@
<script type="text/javascript">
const startTime = 1590590148;
const arrayLength = 20;
const data1 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 40), startTime + idx * 10000]);
const data2 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 100), startTime + idx * 10000]);
const data3 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 20) + 90, startTime + idx * 10000]);
const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
const zoomIn = (ranges) => { const range = ranges[0]; options.axis.x.range = range; pod.updateData(undefined, options) }
const zoomOut = (ranges) => { console.log('zoomout'); options.axis.x.range = undefined; pod.updateData(undefined, options) }
let options = {

12
examples/demo_live.html

@ -14,9 +14,9 @@
<script type="text/javascript">
const startTime = 1590590148;
const arrayLength = 100;
const data1 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 40), startTime + idx * 10000]);
const data2 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 100), startTime + idx * 10000]);
const data3 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 20) + 90, startTime + idx * 10000]);
const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
let options = { renderLegend: false, usePanning: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } } };
var pod = new LinePod(
document.getElementById('chart'),
@ -31,9 +31,9 @@
let rerenderIdx = arrayLength;
var test = setInterval(() => {
rerenderIdx += 1;
const d1 = [Math.floor(Math.random() * 40), startTime + rerenderIdx * 10000];
const d2 = [Math.floor(Math.random() * 100), startTime + rerenderIdx * 10000];
const d3 = [Math.floor(Math.random() * 20) + 90, startTime + rerenderIdx * 10000];
const d1 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
const d2 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 100)];
const d3 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
console.time('rerender');
pod.appendData([d1, d2, d3]);

4
examples/demo_vertical.html

@ -66,8 +66,8 @@
function createDatapoints(arrayLength, startTime, randomValue, randomOffset = 0) {
return Array.from({ length: arrayLength }, (el, idx) => [
startTime + idx * 10000, // y axis
Math.floor(Math.random() * randomValue) + randomOffset // x axis
Math.floor(Math.random() * randomValue) + randomOffset, // x axis
startTime + idx * 10000 // y axis
]);
}

2
package.json

@ -15,7 +15,7 @@
"author": "CorpGlory",
"license": "ISC",
"dependencies": {
"@chartwerk/core": "^0.1.1"
"@chartwerk/core": "^0.2.0"
},
"devDependencies": {
"@types/d3": "5.16.4",

52
src/index.ts

@ -93,8 +93,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
if(this.series[idx].renderDots === true) {
this.metricContainer.selectAll(`.metric-circle-${idx}`)
.data(this.series[idx].datapoints)
.attr('cx', d => this.xScale(d[1]))
.attr('cy', d => this.yScale(d[0]));
.attr('cx', d => this.xScale(d[0]))
.attr('cy', d => this.yScale(d[1]));
this._renderDots([data[idx]], idx);
}
@ -114,8 +114,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('fill', this.getSerieColor(serieIdx))
.attr('r', METRIC_CIRCLE_RADIUS)
.style('pointer-events', 'none')
.attr('cx', d => this.xScale(d[1]))
.attr('cy', d => this.yScale(d[0]));
.attr('cx', d => this.xScale(d[0]))
.attr('cy', d => this.yScale(d[1]));
}
_renderLines(datapoints: number[][], serieIdx: number): void {
@ -153,10 +153,10 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.data(dataPairs)
.enter()
.append('line')
.attr('x1', d => this.xScale(d[0][1]))
.attr('x2', d => this.xScale(d[1][1]))
.attr('y1', d => this.yScale(d[0][0]))
.attr('y2', d => this.yScale(d[1][0]))
.attr('x1', d => this.xScale(d[0][0]))
.attr('x2', d => this.xScale(d[1][0]))
.attr('y1', d => this.yScale(d[0][1]))
.attr('y2', d => this.yScale(d[1][1]))
.attr('stroke-opacity', 0.7)
.style('stroke-width', 1)
.style('stroke', d => {
@ -197,7 +197,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
}
if(upperBoundDatapoints.length > 0 && lowerBoundDatapoints.length > 0) {
const zip = (arr1, arr2) => arr1.map((k, i) => [k[0],k[1], arr2[i][0]]);
const zip = (arr1, arr2) => arr1.map((k, i) => [k[0], k[1], arr2[i][1]]);
const data = zip(upperBoundDatapoints, lowerBoundDatapoints);
this.metricContainer.append('path')
@ -206,8 +206,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('stroke', 'none')
.attr('opacity', '0.3')
.attr('d', this.d3.area()
.x((d: number[]) => this.xScale(d[1]))
.y0((d: number[]) => this.yScale(d[0]))
.x((d: number[]) => this.xScale(d[0]))
.y0((d: number[]) => this.yScale(d[1]))
.y1((d: number[]) => this.yScale(d[2]))
)
}
@ -219,9 +219,9 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('stroke', 'none')
.attr('opacity', '0.3')
.attr('d', this.d3.area()
.x((d: [number, number]) => this.xScale(d[1]))
.y0((d: [number, number]) => this.yScale(d[0] + metricOptions.confidence))
.y1((d: [number, number]) => this.yScale(d[0] - metricOptions.confidence))
.x((d: [number, number]) => this.xScale(d[0]))
.y0((d: [number, number]) => this.yScale(d[1] + metricOptions.confidence))
.y1((d: [number, number]) => this.yScale(d[1] - metricOptions.confidence))
)
}
}
@ -324,16 +324,16 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
}
getClosestIndex(datapoints: [number, number][], xValue: number, yValue: number): number {
let columnIdx; // 0 for y value, 1 for x value
let columnIdx; // 1 for y value, 0 for x value
let value; // xValue ot y Value
switch(this.options.crosshair.orientation) {
case CrosshairOrientation.HORIZONTAL:
columnIdx = 0;
value = yValue;
value = xValue;
break;
case CrosshairOrientation.VERTICAL:
columnIdx = 1;
value = xValue;
value = yValue;
break;
case CrosshairOrientation.BOTH:
// TODO: maybe use voronoi
@ -364,7 +364,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
}
getValueInterval(columnIdx: number): number | undefined {
// columnIdx: 0 for y, 1 for x
// columnIdx: 1 for y, 0 for x
// inverval: x/y value interval between data points
// TODO: move it to base/state instead of timeInterval
const intervals = _.map(this.series, serie => {
@ -429,8 +429,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
return;
}
const yPosition = this.yScale(closestDatapoint[0]);
const xPosition = this.xScale(closestDatapoint[1]);
const xPosition = this.xScale(closestDatapoint[0]);
const yPosition = this.yScale(closestDatapoint[1]);
this.moveCrosshairCircle(xPosition, yPosition, serieIdx);
points.push({
@ -448,20 +448,20 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
if(useOutOfRange === false) {
return false;
}
let columnIdx; // 0 for y value, 1 for x value
let columnIdx; // 1 for y value, 0 for x value
let value; // xValue ot y Value
switch(this.options.crosshair.orientation) {
case CrosshairOrientation.HORIZONTAL:
case CrosshairOrientation.VERTICAL:
columnIdx = 0;
value = yValue;
value = xValue;
break;
case CrosshairOrientation.VERTICAL:
case CrosshairOrientation.HORIZONTAL:
columnIdx = 1;
value = xValue;
value = yValue;
break;
case CrosshairOrientation.BOTH:
// TODO: maybe use voronoi
columnIdx = 0;
columnIdx = 1;
value = yValue;
default:
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`);

Loading…
Cancel
Save