mirror of
https://github.com/Karaka-Management/jsOMS.git
synced 2026-01-26 00:18:40 +00:00
Code pull out
This commit is contained in:
parent
234ab60a26
commit
6fe8c278df
|
|
@ -0,0 +1,188 @@
|
|||
(function (jsOMS)
|
||||
{
|
||||
"use strict";
|
||||
|
||||
jsOMS.Chart.CandlestickChart = function (id)
|
||||
{
|
||||
this.chart = new jsOMS.Chart.ChartAbstract(id);
|
||||
|
||||
// Setting default chart values
|
||||
this.chart.margin = {top: 5, right: 0, bottom: 0, left: 0};
|
||||
this.chart.color = d3.scale.category10();
|
||||
this.chart.axis = {
|
||||
x: {
|
||||
visible: true,
|
||||
label: {
|
||||
visible: true,
|
||||
text: 'X-Axis',
|
||||
position: "center",
|
||||
anchor: 'middle'
|
||||
},
|
||||
tick: {
|
||||
prefix: '',
|
||||
orientation: 'bottom',
|
||||
size: 7
|
||||
},
|
||||
min: 0,
|
||||
max: 0
|
||||
},
|
||||
y: {
|
||||
visible: true,
|
||||
label: {
|
||||
visible: true,
|
||||
text: 'Y-Axis',
|
||||
position: 'center',
|
||||
anchor: 'middle'
|
||||
},
|
||||
tick: {
|
||||
prefix: '',
|
||||
orientation: 'bottom',
|
||||
size: 7
|
||||
},
|
||||
min: 0,
|
||||
max: 0
|
||||
}
|
||||
};
|
||||
|
||||
this.chart.grid = {
|
||||
x: {
|
||||
visible: false
|
||||
},
|
||||
y: {
|
||||
visible: true
|
||||
}
|
||||
};
|
||||
this.chart.subtype = 'waterfall';
|
||||
};
|
||||
|
||||
jsOMS.Chart.CandlestickChart.prototype.getChart = function ()
|
||||
{
|
||||
return this.chart;
|
||||
};
|
||||
|
||||
jsOMS.Chart.CandlestickChart.prototype.setData = function (data)
|
||||
{
|
||||
this.chart.setData(dataset);
|
||||
};
|
||||
|
||||
jsOMS.Chart.CandlestickChart.prototype.draw = function ()
|
||||
{
|
||||
let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
|
||||
|
||||
this.chart.dimension = {
|
||||
width: box.width,
|
||||
height: box.height
|
||||
};
|
||||
|
||||
x = d3.scale.linear().range([
|
||||
0,
|
||||
this.chart.dimension.width
|
||||
- this.chart.margin.right
|
||||
- this.chart.margin.left
|
||||
]);
|
||||
|
||||
y = d3.scale.linear().range([
|
||||
this.chart.dimension.height
|
||||
- this.chart.margin.top
|
||||
- this.chart.margin.bottom,
|
||||
10
|
||||
]);
|
||||
|
||||
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.x.tick.prefix + d;
|
||||
}).orient("bottom").outerTickSize(this.chart.axis.x.tick.size)
|
||||
.innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
|
||||
|
||||
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.y.tick.prefix + d;
|
||||
}).orient("left").outerTickSize(this.chart.axis.y.tick.size)
|
||||
.innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
|
||||
|
||||
xGrid = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-(this.chart.dimension.height
|
||||
- this.chart.margin.top - 10
|
||||
- this.chart.margin.bottom), 0, 0)
|
||||
.tickFormat("");
|
||||
|
||||
yGrid = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-this.chart.dimension.width
|
||||
+ this.chart.margin.right
|
||||
+ this.chart.margin.left, 0, 0)
|
||||
.tickFormat("");
|
||||
|
||||
x.domain(this.chart.dataset[0].points.map(function(d) { return d.name; }));
|
||||
y.domain([0, d3.max(this.chart.dataset[0].points, function(d) { return d.y*1.05; })]);
|
||||
|
||||
svg = this.chart.chartSelect.append("svg")
|
||||
.attr("width", this.chart.dimension.width)
|
||||
.attr("height", this.chart.dimension.height)
|
||||
.append("g").attr("transform", "translate("
|
||||
+ (this.chart.margin.left) + ","
|
||||
+ (this.chart.margin.top) + ")");
|
||||
|
||||
this.chart.drawGrid(svg, xGrid, yGrid);
|
||||
|
||||
let dataPoint, dataPointEnter,
|
||||
temp = this.drawData(svg, x, y, dataPointEnter, dataPoint);
|
||||
dataPointEnter = temp[0];
|
||||
dataPoint = temp[1];
|
||||
|
||||
this.chart.drawText(svg);
|
||||
this.chart.drawAxis(svg, xAxis1, yAxis1);
|
||||
|
||||
if (this.chart.shouldRedraw) {
|
||||
this.redraw();
|
||||
}
|
||||
};
|
||||
|
||||
jsOMS.Chart.CandlestickChart.prototype.redraw = function ()
|
||||
{
|
||||
this.chart.shouldRedraw = false;
|
||||
this.chart.chartSelect.select("*").remove();
|
||||
this.draw();
|
||||
};
|
||||
|
||||
jsOMS.Chart.CandlestickChart.prototype.drawData = function (svg, x, y, dataPointEnter, dataPoint)
|
||||
{
|
||||
let self = this;
|
||||
|
||||
dataPoint = svg.selectAll(".dataPoint").data(this.chart.dataset[0].points, function (c)
|
||||
{
|
||||
return c.id;
|
||||
});
|
||||
|
||||
dataPointEnter = dataPoint.enter().append("g")
|
||||
.attr("class", function(d) { return "dataPoint " + (d.y < d.y0 ? 'negative' : 'positive'); })
|
||||
.attr("transform", function(d) { return "translate(" + x(d.name) + ",0)"; });
|
||||
|
||||
dataPointEnter.append("rect")
|
||||
.attr("y", function(d) { return y( Math.max(d.y0, d.y) ); })
|
||||
.attr("height", function(d) { return Math.abs( y(d.y0) - y(d.y) ); })
|
||||
.attr("width", x.rangeBand());
|
||||
|
||||
dataPointEnter.append("text")
|
||||
.attr("x", x.rangeBand() / 2)
|
||||
.attr("y", function(d) { return y(d.y) + 5; })
|
||||
.attr("dy", function(d) { return ((d.y < d.y0) ? '-' : '') + ".75em" })
|
||||
.text(function(d) { return d.y - d.y0; });
|
||||
|
||||
dataPointEnter.filter(function(d) { return d.class != "total" }).append("line")
|
||||
.attr("class", "connector")
|
||||
.attr("x1", x.rangeBand() + 5 )
|
||||
.attr("y1", function(d) { return y(d.y) } )
|
||||
.attr("x2", x.rangeBand() / ( 1 - 5) - 5 )
|
||||
.attr("y2", function(d) { return y(d.y) } );
|
||||
|
||||
return [dataPointEnter, dataPoint];
|
||||
};
|
||||
}(window.jsOMS = window.jsOMS || {}));
|
||||
|
|
@ -55,6 +55,9 @@
|
|||
interpolate: "linear" /* splines interpolation? */
|
||||
};
|
||||
|
||||
this.dimension = {width: 0, height: 0};
|
||||
this.margin = {top: 0, right: 0, bottom: 0, left: 0};
|
||||
|
||||
this.axis = {};
|
||||
this.grid = {};
|
||||
this.subtype = '';
|
||||
|
|
@ -497,6 +500,88 @@
|
|||
}
|
||||
};
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.createXScale = function (type)
|
||||
{
|
||||
if(type === 'ordinal') {
|
||||
return d3.scale.ordinal().rangeRoundBands([
|
||||
0,
|
||||
this.dimension.width
|
||||
- this.margin.right
|
||||
- this.margin.left
|
||||
], 0.3);
|
||||
} else {
|
||||
return d3.scale.linear().range([
|
||||
0,
|
||||
this.dimension.width
|
||||
- this.margin.right
|
||||
- this.margin.left
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.createYScale = function (type)
|
||||
{
|
||||
if(type === 'ordinal') {
|
||||
return d3.scale.ordinal().rangeRoundBands([
|
||||
0,
|
||||
this.dimension.height
|
||||
- this.margin.top
|
||||
- this.margin.bottom,
|
||||
], 0.3);
|
||||
} else {
|
||||
return d3.scale.linear().range([
|
||||
this.dimension.height
|
||||
- this.margin.top
|
||||
- this.margin.bottom,
|
||||
10
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.createXAxis = function (x) {
|
||||
let self = this;
|
||||
|
||||
return d3.svg.axis().scale(x).tickFormat(function (d)
|
||||
{
|
||||
return self.axis.x.tick.prefix + d;
|
||||
}).orient("bottom").outerTickSize(self.axis.x.tick.size)
|
||||
.innerTickSize(self.axis.x.tick.size).tickPadding(7);
|
||||
}
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.createYAxis = function (y) {
|
||||
let self = this;
|
||||
|
||||
return d3.svg.axis().scale(y).tickFormat(function (d)
|
||||
{
|
||||
return self.axis.y.tick.prefix + d;
|
||||
}).orient("left").outerTickSize(this.axis.y.tick.size)
|
||||
.innerTickSize(this.axis.y.tick.size).tickPadding(7);
|
||||
}
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.createXGrid = function (x) {
|
||||
return d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-(this.dimension.height
|
||||
- this.margin.top - 10
|
||||
- this.margin.bottom), 0, 0)
|
||||
.tickFormat("");
|
||||
}
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.createYGrid = function (y) {
|
||||
return d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-this.dimension.width
|
||||
+ this.margin.right
|
||||
+ this.margin.left, 0, 0)
|
||||
.tickFormat("");
|
||||
}
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.clean = function ()
|
||||
{
|
||||
this.margin = {top: 0, right: 0, bottom: 0, left: 0};
|
||||
|
|
|
|||
|
|
@ -94,50 +94,12 @@
|
|||
height: box.height
|
||||
};
|
||||
|
||||
x = d3.scale.ordinal().range([
|
||||
0,
|
||||
this.chart.dimension.width
|
||||
- this.chart.margin.right
|
||||
- this.chart.margin.left
|
||||
]);
|
||||
|
||||
y = d3.scale.linear().range([
|
||||
this.chart.dimension.height
|
||||
- this.chart.margin.top
|
||||
- this.chart.margin.bottom,
|
||||
10
|
||||
]);
|
||||
|
||||
// axis
|
||||
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.x.tick.prefix + d;
|
||||
}).orient("bottom").outerTickSize(this.chart.axis.x.tick.size).innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
|
||||
|
||||
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.y.tick.prefix + d;
|
||||
}).orient("left").outerTickSize(this.chart.axis.y.tick.size).innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
|
||||
|
||||
xGrid = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-(this.chart.dimension.height
|
||||
- this.chart.margin.top - 10
|
||||
- this.chart.margin.bottom), 0, 0)
|
||||
.tickFormat("");
|
||||
|
||||
yGrid = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-this.chart.dimension.width
|
||||
+ this.chart.margin.right
|
||||
+ this.chart.margin.left, 0, 0)
|
||||
.tickFormat("");
|
||||
x = this.chart.createXScale('ordinal');
|
||||
y = this.chart.createYScale('linear');
|
||||
xAxis1 = this.chart.createXAxis(x);
|
||||
yAxis1 = this.chart.createYAxis(y);
|
||||
xGrid = this.chart.createXGrid(x);
|
||||
yGrid = this.chart.createYGrid(y);
|
||||
|
||||
x.domain(d3.range(this.chart.dataset[0].points.length)).rangeRoundBands([0, this.chart.dimension.width - this.chart.margin.right - this.chart.margin.left], .1);
|
||||
y.domain([0, this.chart.axis.y.max + 1]);
|
||||
|
|
|
|||
|
|
@ -75,52 +75,12 @@
|
|||
height: box.height
|
||||
};
|
||||
|
||||
// todo: allow ordinal data axis
|
||||
x = d3.scale.linear().range([
|
||||
0,
|
||||
this.chart.dimension.width
|
||||
- this.chart.margin.right
|
||||
- this.chart.margin.left
|
||||
]);
|
||||
|
||||
y = d3.scale.linear().range([
|
||||
this.chart.dimension.height
|
||||
- this.chart.margin.top
|
||||
- this.chart.margin.bottom,
|
||||
10
|
||||
]);
|
||||
|
||||
// axis
|
||||
// todo: implement manual tick (e.g. .ticks(6)) setting for axis
|
||||
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.x.tick.prefix + d;
|
||||
}).orient("bottom").outerTickSize(this.chart.axis.x.tick.size).innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
|
||||
|
||||
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.y.tick.prefix + d;
|
||||
}).orient("left").outerTickSize(this.chart.axis.y.tick.size).innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
|
||||
|
||||
xGrid = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-(this.chart.dimension.height
|
||||
- this.chart.margin.top - 10
|
||||
- this.chart.margin.bottom), 0, 0)
|
||||
.tickFormat("");
|
||||
|
||||
yGrid = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-this.chart.dimension.width
|
||||
+ this.chart.margin.right
|
||||
+ this.chart.margin.left, 0, 0)
|
||||
.tickFormat("");
|
||||
x = this.chart.createXScale('linear');
|
||||
y = this.chart.createYScale('linear');
|
||||
xAxis1 = this.chart.createXAxis(x);
|
||||
yAxis1 = this.chart.createYAxis(y);
|
||||
xGrid = this.chart.createXGrid(x);
|
||||
yGrid = this.chart.createYGrid(y);
|
||||
|
||||
x.domain([this.chart.axis.x.min, this.chart.axis.x.max + 1]);
|
||||
y.domain([this.chart.axis.y.min - 1, this.chart.axis.y.max + 1]);
|
||||
|
|
|
|||
|
|
@ -74,51 +74,12 @@
|
|||
height: box.height
|
||||
};
|
||||
|
||||
x = d3.scale.linear().range([
|
||||
0,
|
||||
this.chart.dimension.width
|
||||
- this.chart.margin.right
|
||||
- this.chart.margin.left
|
||||
]);
|
||||
|
||||
y = d3.scale.linear().range([
|
||||
this.chart.dimension.height
|
||||
- this.chart.margin.top
|
||||
- this.chart.margin.bottom,
|
||||
10
|
||||
]);
|
||||
|
||||
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.x.tick.prefix + d;
|
||||
}).orient("bottom").outerTickSize(this.chart.axis.x.tick.size)
|
||||
.innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
|
||||
|
||||
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.y.tick.prefix + d;
|
||||
}).orient("left").outerTickSize(this.chart.axis.y.tick.size)
|
||||
.innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
|
||||
|
||||
xGrid = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-(this.chart.dimension.height
|
||||
- this.chart.margin.top - 10
|
||||
- this.chart.margin.bottom), 0, 0)
|
||||
.tickFormat("");
|
||||
|
||||
yGrid = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-this.chart.dimension.width
|
||||
+ this.chart.margin.right
|
||||
+ this.chart.margin.left, 0, 0)
|
||||
.tickFormat("");
|
||||
x = this.chart.createXScale('linear');
|
||||
y = this.chart.createYScale('linear');
|
||||
xAxis1 = this.chart.createXAxis(x);
|
||||
yAxis1 = this.chart.createYAxis(y);
|
||||
xGrid = this.chart.createXGrid(x);
|
||||
yGrid = this.chart.createYGrid(y);
|
||||
|
||||
x.domain([this.chart.axis.x.min, this.chart.axis.x.max + 1]);
|
||||
y.domain([this.chart.axis.y.min - 1, this.chart.axis.y.max + 1]);
|
||||
|
|
|
|||
|
|
@ -86,51 +86,12 @@
|
|||
height: box.height
|
||||
};
|
||||
|
||||
x = d3.scale.ordinal().rangeRoundBands([
|
||||
0,
|
||||
this.chart.dimension.width
|
||||
- this.chart.margin.right
|
||||
- this.chart.margin.left
|
||||
], 0.3);
|
||||
|
||||
y = d3.scale.linear().range([
|
||||
this.chart.dimension.height
|
||||
- this.chart.margin.top
|
||||
- this.chart.margin.bottom,
|
||||
10
|
||||
]);
|
||||
|
||||
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.x.tick.prefix + d;
|
||||
}).orient("bottom").outerTickSize(this.chart.axis.x.tick.size)
|
||||
.innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
|
||||
|
||||
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.y.tick.prefix + d;
|
||||
}).orient("left").outerTickSize(this.chart.axis.y.tick.size)
|
||||
.innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
|
||||
|
||||
xGrid = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-(this.chart.dimension.height
|
||||
- this.chart.margin.top - 10
|
||||
- this.chart.margin.bottom), 0, 0)
|
||||
.tickFormat("");
|
||||
|
||||
yGrid = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-this.chart.dimension.width
|
||||
+ this.chart.margin.right
|
||||
+ this.chart.margin.left, 0, 0)
|
||||
.tickFormat("");
|
||||
x = this.chart.createXScale('ordinal');
|
||||
y = this.chart.createYScale('linear');
|
||||
xAxis1 = this.chart.createXAxis(x);
|
||||
yAxis1 = this.chart.createYAxis(y);
|
||||
xGrid = this.chart.createXGrid(x);
|
||||
yGrid = this.chart.createYGrid(y);
|
||||
|
||||
x.domain(this.chart.dataset[0].points.map(function(d) { return d.name; }));
|
||||
y.domain([0, d3.max(this.chart.dataset[0].points, function(d) { return d.y*1.05; })]);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user