Skip to content

O
OpenXG-AIEngine
Commit f9d0ee15 authored by wangdong's avatar wangdong
Browse files
Options

111

parent 189830f0
Show whitespace changes
Inline Side-by-side
Showing with 393 additions and 0 deletions
src/utils/timechart.js 0 → 100644
View file @ f9d0ee15
import * as d3 from 'd3';
export default function legend() {
var legendValues=[{color: "red", stop: [0,1]},{color: "blue", stop: [1,2]},{color: "purple", stop: [2,3]},{color: "yellow", stop: [3,4]},{color: "Aquamarine", stop: [4,5]}];
var legendScale;
var cellWidth = 30;
var cellHeight = 20;
var adjustable = false;
var labelFormat = d3.format(".01f");
var coordinates = {x:0, y:0};
var labelUnits = "units";
var lastValue = 6;
var changeValue = 1;
var orientation = "horizontal";
var cellPadding = 0;
function legend(svg) {
updateBGSize = function(legend){
var margin = 10;
dim = legend.target.node().getBBox();
dim.height += margin * 2;
dim.width += margin * 2;
dim.y -= margin;
dim.x -= margin;
legend.parentGroup.select(".mutLegendBG")
.attr(dim)
};
drag = d3.behavior.drag()
.on("drag", function(d,i) {
console.log(this);
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this).attr("transform", function(d,i){
return "translate(" + [ d.x,d.y ] + ")"
})
})
.on("dragstart", function() {
d3.event.sourceEvent.stopPropagation(); // silence other listeners
});
function init() {
var mutLegendGroup = svg.append("g")
.attr("class", "mutLegendGroup")
.data([ coordinates ])
.attr("transform", "translate(" + coordinates.x + "," + coordinates.y + ")");
var target = mutLegendGroup
.insert("g")
.attr("class", "mutLegendGroupText");
// set legend background
var mutLegendBG = mutLegendGroup
.insert("rect", ":first-child")
.attr("class", "mutLegendBG")
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", "1px");
return {
parentGroup: mutLegendGroup,
target: target
}
};
function cellRange(valuePosition, changeVal) {
legendValues[valuePosition].stop[0] += changeVal;
legendValues[valuePosition - 1].stop[1] += changeVal;
redraw();
}
function redraw() {
legend.target.selectAll("g.legendCells").data(legendValues).exit().remove();
legend.target.selectAll("g.legendCells").select("rect").style("fill", function(d) {return d.color});
if (orientation == "vertical") {
legend.target.selectAll("g.legendCells").select("text.breakLabels").style("display", "block").style("text-anchor", "start").attr("x", cellWidth + cellPadding).attr("y", 5 + (cellHeight / 2)).text(function(d) {return labelFormat(d.stop[0]) + (d.stop[1].length > 0 ? " - " + labelFormat(d.stop[1]) : "")})
legend.target.selectAll("g.legendCells").attr("transform", function(d,i) {return "translate(0," + (i * (cellHeight + cellPadding)) + ")" });
}
else {
legend.target.selectAll("g.legendCells").attr("transform", function(d,i) {return "translate(" + (i * cellWidth) + ",0)" });
legend.target.selectAll("text.breakLabels").style("text-anchor", "middle").attr("x", 0).attr("y", -7).style("display", function(d,i) {return i == 0 ? "none" : "block"}).text(function(d) {return labelFormat(d.stop[0])});
}
}
// init
if (!legend.initDone) {
var initObj = init();
legend.target = initObj.target;
legend.parentGroup = initObj.parentGroup;
legend.parentGroup.call(drag);
legend.initDone = true;
}
// remove previously painted rect and text
legend.target.selectAll("g.legendCells").select("text.breakLabels").remove();
legend.target.selectAll("g.legendCells").select("rect").remove();
legend.target.selectAll(".legendTitle").remove();
legend.target.selectAll("g.legendCells")
.data(legendValues)
.enter()
.append("g")
.attr("class", "legendCells")
.attr("transform", function(d,i) {return "translate(" + (i * (cellWidth + cellPadding)) + ",0)" })
legend.target.selectAll("g.legendCells")
.append("rect")
.attr("class", "breakRect")
.attr("height", cellHeight)
.attr("width", cellWidth)
.style("fill", function(d) {return d.color})
.style("stroke", function(d) {return d3.rgb(d.color).darker();});
legend.target.selectAll("g.legendCells")
.append("text")
.attr("class", "breakLabels")
.style("pointer-events", "none");
legend.target.append("text")
.text(labelUnits)
.attr("y", -7)
.attr("class", "legendTitle");
redraw();
updateBGSize(legend);
}
legend.initDone = false;
legend.target;
legend.inputScale = function(newScale) {
if (!arguments.length) return scale;
scale = newScale;
legendValues = [];
if (scale.invertExtent) {
//Is a quantile scale
scale.range().forEach(function(el) {
var cellObject = {color: el, stop: scale.invertExtent(el)}
legendValues.push(cellObject)
})
}
else {
scale.domain().forEach(function (el) {
var cellObject = {color: scale(el), stop: [el,""]}
legendValues.push(cellObject)
})
}
return this;
}
legend.scale = function(testValue) {
var foundColor = legendValues[legendValues.length - 1].color;
for (el in legendValues) {
if(testValue < legendValues[el].stop[1]) {
foundColor = legendValues[el].color;
break;
}
}
return foundColor;
}
legend.cellWidth = function(newCellSize) {
if (!arguments.length) return cellWidth;
cellWidth = newCellSize;
return this;
}
legend.cellHeight = function(newCellSize) {
if (!arguments.length) return cellHeight;
cellHeight = newCellSize;
return this;
}
legend.cellPadding = function(newCellPadding) {
if (!arguments.length) return cellPadding;
cellPadding = newCellPadding;
return this;
}
legend.cellExtent = function(incColor,newExtent) {
var selectedStop = legendValues.filter(function(el) {return el.color == incColor})[0].stop;
if (arguments.length == 1) return selectedStop;
legendValues.filter(function(el) {return el.color == incColor})[0].stop = newExtent;
return this;
}
legend.cellStepping = function(incStep) {
if (!arguments.length) return changeValue;
changeValue = incStep;
return this;
}
legend.units = function(incUnits) {
if (!arguments.length) return labelUnits;
labelUnits = incUnits;
return this;
}
legend.orientation = function(incOrient) {
if (!arguments.length) return orientation;
orientation = incOrient;
return this;
}
legend.labelFormat = function(incFormat) {
if (!arguments.length) return labelFormat;
labelFormat = incFormat;
if (incFormat == "none") {
labelFormat = function(inc) {return inc};
}
return this;
}
legend.place = function(incCoordinates) {
if (!arguments.length) return incCoordinates;
coordinates = incCoordinates;
return this;
}
return legend;
}
export function timechart(g, width, height, duration, mode) {
var x_values = [];
var y_values = [];
var y = d3.scaleLog()
.range([height, 0])
.domain([1, 18])
var x = d3.scaleLinear()
.range([0, width])
.domain([duration, 0])
// y = d3.scaleLinear().range([height, 0]),
console.log(mode)
if (mode == "rate") {
y = d3.scaleLinear()
.range([height, 0])
.domain([1, 18])
var y_axis = g.append("g")
.attr("class", "axis y")
.attr("transform", "translate(" + width + ")")
.call(d3.axisRight(y)
// .tickFormat(d3.format('.2s'))
//.tickValues([1000000, 2000000, 4000000,8000000,16000000, 32000000])
// .tickSize(-width)
);
}
else {
y = d3.scaleSqrt()
.range([height, 0])
.domain([0, 400])
var y_axis = g.append("g")
.attr("class", "axis y")
.attr("transform", "translate(" + width + ")")
.call(d3.axisRight(y)
.tickFormat(d3.format('.2s'))
.tickValues([30, 100,400])
// .tickSize(-width)
);
}
var z = d3.scaleOrdinal(d3.schemeCategory10);
var x_axis = g.append("g")
.attr("class", "axis x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.ticks(5)
.tickSize(2)
.tickPadding(1));
var paths = g.append("g").attr("class", "linepath");
var line = d3.line()
// .curve(d3.curveBasis)
.curve(d3.curveMonotoneX)
.x(function (_, i) { return x(x_values[x_values.length - 1] - x_values[i]); })
.y(function (d, i) { return y(Math.max(d, 1)); });
var smooth_transform = 'translate(-' + width + ')';
function append(time, sample) {
while (y_values.length < sample.length) {
var data = {
values: d3.range(x_values.length).map(function (d) { return undefined; })
};
data.path = paths.append('path')
.data([data.values])
.attr('fill', 'none')
.style('stroke', z(y_values.length));
y_values.push(data);
data.path.call(hover, data.path);
}
x_values.push(time);
// Prune off too old values (at least one sample remains)
var dropoff = time - duration;
while (x_values[0] < dropoff) {
x_values.shift();
for (i = 0; i < y_values.length; ++i)
y_values[i].values.shift();
}
for (var i = 0; i < y_values.length; ++i) {
y_values[i].values.push(sample[i]);
y_values[i].path.attr('d', line);
}
// Smooth update (optional -- remove if gets heavy)
console.log(paths)
// paths.attr('transform', null)
// .transition()
// .duration(1000*duration)
// .ease(d3.easeLinear)
// .attr('transform', smooth_transform);
}
function hover(svg, path) {
if ("ontouchstart" in document) svg
.style("-webkit-tap-highlight-color", "transparent")
.on("touchmove", moved)
.on("touchstart", entered)
.on("touchend", left)
else svg
.on("mousemove", moved)
.on("mouseenter", entered)
.on("mouseleave", left);
const dot = svg.append("g")
.attr("display", "none");
dot.append("circle")
.attr("r", 2.5);
dot.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "middle")
.attr("y", -8);
function moved(event) {
console.log("moved ")
console.log(event)
// event.preventDefault();
// const pointer = d3.pointer(event, this);
// const xm = x.invert(pointer[0]);
// const ym = y.invert(pointer[1]);
// const i = d3.bisectCenter(data.dates, xm);
// const s = d3.least(data.series, d => Math.abs(d.values[i] - ym));
// path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise();
// dot.attr("transform", `translate(${x(data.dates[i])},${y(s.values[i])})`);
// dot.select("text").text(s.name);
}
function entered() {
console.log("entered")
path.style("mix-blend-mode", null).attr("stroke", "#ddd");
dot.attr("display", null);
}
function left() {
console.log("left ")
}
}
return {
append: append
};
}
export function append(time, sample) {
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment