diff --git a/nvd3/nvd-test-bullet.ts b/nvd3/nvd-test-bullet.ts deleted file mode 100644 index 7ec2363e0..000000000 --- a/nvd3/nvd-test-bullet.ts +++ /dev/null @@ -1,46 +0,0 @@ -/// -/// - -var width = 960, - height = 55, - margin = {top: 5, right: 40, bottom: 20, left: 120}; - - var chart = nv.models.bullet() - .width(width - margin.right - margin.left) - .height(height - margin.top - margin.bottom); - - var data = [ - {"title":"Revenue","subtitle":"US$, in thousands","ranges":[-150,-225,-300],"measures":[-220],"markers":[-250]} - ]; - - //TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element - var vis = d3.select("#chart").selectAll("svg") - .data(data) - .enter().append("svg") - .attr("class", "bullet nvd3") - .attr("width", width) - .attr("height", height); - - vis.transition().duration(1000).call(chart); - - var transition = function() { - vis.datum(randomize); - vis.transition().duration(1000).call(chart); - }; - - function randomize(d) { - if (!d.randomizer) d.randomizer = randomizer(d); - d.ranges = d.ranges.map(d.randomizer); - d.markers = d.markers.map(d.randomizer); - d.measures = d.measures.map(d.randomizer); - return d; - } - - function randomizer(d) { - var k = d3.max(d.ranges) * .2; - return function(d) { - return Math.max(0, d + k * (Math.random() - .5)); - }; - } - - d3.select('body').on('click', transition); \ No newline at end of file diff --git a/nvd3/nvd-test-bulletChart.ts b/nvd3/nvd-test-bulletChart.ts deleted file mode 100644 index eb727589e..000000000 --- a/nvd3/nvd-test-bulletChart.ts +++ /dev/null @@ -1,72 +0,0 @@ -/// -/// - -var width = 960, - height = 80, - margin = {top: 5, right: 40, bottom: 20, left: 120}; - -var chart = nv.models.bulletChart() - .width(width - margin.right - margin.left) - .height(height - margin.top - margin.bottom); - -var chart2 = nv.models.bulletChart() - .width(width - margin.right - margin.left) - .height(height - margin.top - margin.bottom); - -var data = [ - {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220],"markers":[250]}, - {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100],"markers":[550]}, - {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]} -]; - -var dataWithLabels = [{ - "title":"Revenue", - "subtitle":"US$, in thousands", - "ranges":[150,225,300], - "measures":[220], - "markers":[250, 100], - "markerLabels":['Target Inventory', 'Low Inventory'], - "rangeLabels":['Maximum Inventory','Average Inventory','Minimum Inventory'], - "measureLabels":['Current Inventory'] -}]; - -//TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element -var vis = d3.select("#chart").selectAll("svg") - .data(data) - .enter().append("svg") - .attr("class", "bullet nvd3") - .attr("width", width) - .attr("height", height); - -vis.transition().duration(1000).call(chart); - -var vis2 = d3.select("#chart2").selectAll("svg") - .data(dataWithLabels) - .enter().append('svg') - .attr('class',"bullet nvd3") - .attr("width",width) - .attr("height",height); - -vis2.transition().duration(1000).call(chart2); - -var transition = function() { - vis.datum(randomize).transition().duration(1000).call(chart); - vis2.datum(randomize).transition().duration(1000).call(chart2); -}; - -function randomize(d) { - if (!d.randomizer) d.randomizer = randomizer(d); - d.ranges = d.ranges.map(d.randomizer); - d.markers = d.markers.map(d.randomizer); - d.measures = d.measures.map(d.randomizer); - return d; -} - -function randomizer(d) { - var k = d3.max(d.ranges) * .2; - return function(d) { - return Math.max(0, d + k * (Math.random() - .5)); - }; - } - - d3.select('body').on('click', transition); \ No newline at end of file diff --git a/nvd3/nvd3-test-bullet.ts b/nvd3/nvd3-test-bullet.ts new file mode 100644 index 000000000..6471ef023 --- /dev/null +++ b/nvd3/nvd3-test-bullet.ts @@ -0,0 +1,47 @@ +/// +/// +module nvd3_test_bullet { + var width = 960, + height = 55, + margin = { top: 5, right: 40, bottom: 20, left: 120 }; + + var chart = nv.models.bullet() + .width(width - margin.right - margin.left) + .height(height - margin.top - margin.bottom); + + var data = [ + { "title": "Revenue", "subtitle": "US$, in thousands", "ranges": [-150, -225, -300], "measures": [-220], "markers": [-250] } + ]; + + //TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element + var vis = d3.select("#chart").selectAll("svg") + .data(data) + .enter().append("svg") + .attr("class", "bullet nvd3") + .attr("width", width) + .attr("height", height); + + vis.transition().duration(1000).call(chart); + + var transition = function () { + vis.datum(randomize); + vis.transition().duration(1000).call(chart); + }; + + function randomize(d) { + if (!d.randomizer) d.randomizer = randomizer(d); + d.ranges = d.ranges.map(d.randomizer); + d.markers = d.markers.map(d.randomizer); + d.measures = d.measures.map(d.randomizer); + return d; + } + + function randomizer(d) { + var k = d3.max(d.ranges) * .2; + return function (d) { + return Math.max(0, d + k * (Math.random() - .5)); + }; + } + + d3.select('body').on('click', transition); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-bulletChart.ts b/nvd3/nvd3-test-bulletChart.ts new file mode 100644 index 000000000..1d126a4cf --- /dev/null +++ b/nvd3/nvd3-test-bulletChart.ts @@ -0,0 +1,73 @@ +/// +/// +module nvd3_test_bulletChart { + var width = 960, + height = 80, + margin = { top: 5, right: 40, bottom: 20, left: 120 }; + + var chart = nv.models.bulletChart() + .width(width - margin.right - margin.left) + .height(height - margin.top - margin.bottom); + + var chart2 = nv.models.bulletChart() + .width(width - margin.right - margin.left) + .height(height - margin.top - margin.bottom); + + var data = [ + { "title": "Revenue", "subtitle": "US$, in thousands", "ranges": [150, 225, 300], "measures": [220], "markers": [250] }, + { "title": "Order Size", "subtitle": "US$, average", "ranges": [350, 500, 600], "measures": [100], "markers": [550] }, + { "title": "Satisfaction", "subtitle": "out of 5", "ranges": [3.5, 4.25, 5], "measures": [3.2, 4.7], "markers": [4.4] } + ]; + + var dataWithLabels = [{ + "title": "Revenue", + "subtitle": "US$, in thousands", + "ranges": [150, 225, 300], + "measures": [220], + "markers": [250, 100], + "markerLabels": ['Target Inventory', 'Low Inventory'], + "rangeLabels": ['Maximum Inventory', 'Average Inventory', 'Minimum Inventory'], + "measureLabels": ['Current Inventory'] + }]; + + //TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element + var vis = d3.select("#chart").selectAll("svg") + .data(data) + .enter().append("svg") + .attr("class", "bullet nvd3") + .attr("width", width) + .attr("height", height); + + vis.transition().duration(1000).call(chart); + + var vis2 = d3.select("#chart2").selectAll("svg") + .data(dataWithLabels) + .enter().append('svg') + .attr('class', "bullet nvd3") + .attr("width", width) + .attr("height", height); + + vis2.transition().duration(1000).call(chart2); + + var transition = function () { + vis.datum(randomize).transition().duration(1000).call(chart); + vis2.datum(randomize).transition().duration(1000).call(chart2); + }; + + function randomize(d) { + if (!d.randomizer) d.randomizer = randomizer(d); + d.ranges = d.ranges.map(d.randomizer); + d.markers = d.markers.map(d.randomizer); + d.measures = d.measures.map(d.randomizer); + return d; + } + + function randomizer(d) { + var k = d3.max(d.ranges) * .2; + return function (d) { + return Math.max(0, d + k * (Math.random() - .5)); + }; + } + + d3.select('body').on('click', transition); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-candlestick.ts b/nvd3/nvd3-test-candlestick.ts new file mode 100644 index 000000000..6794b553c --- /dev/null +++ b/nvd3/nvd3-test-candlestick.ts @@ -0,0 +1,90 @@ +/// +module nvd3_test_candlestick { + var data = [{ + values: [ + { "date": 15854, "open": 165.42, "high": 165.8, "low": 164.34, "close": 165.22, "volume": 160363400, "adjusted": 164.35 }, + { "date": 15855, "open": 165.35, "high": 166.59, "low": 165.22, "close": 165.83, "volume": 107793800, "adjusted": 164.96 }, + { "date": 15856, "open": 165.37, "high": 166.31, "low": 163.13, "close": 163.45, "volume": 176850100, "adjusted": 162.59 }, + { "date": 15859, "open": 163.83, "high": 164.46, "low": 162.66, "close": 164.35, "volume": 168390700, "adjusted": 163.48 }, + { "date": 15860, "open": 164.44, "high": 165.1, "low": 162.73, "close": 163.56, "volume": 157631500, "adjusted": 162.7 }, + { "date": 15861, "open": 163.09, "high": 163.42, "low": 161.13, "close": 161.27, "volume": 211737800, "adjusted": 160.42 }, + { "date": 15862, "open": 161.2, "high": 162.74, "low": 160.25, "close": 162.73, "volume": 200225500, "adjusted": 161.87 }, + { "date": 15863, "open": 163.85, "high": 164.95, "low": 163.14, "close": 164.8, "volume": 188337800, "adjusted": 163.93 }, + { "date": 15866, "open": 165.31, "high": 165.4, "low": 164.37, "close": 164.8, "volume": 105667100, "adjusted": 163.93 }, + { "date": 15867, "open": 163.3, "high": 164.54, "low": 162.74, "close": 163.1, "volume": 159505400, "adjusted": 162.24 }, + { "date": 15868, "open": 164.22, "high": 164.39, "low": 161.6, "close": 161.75, "volume": 177361500, "adjusted": 160.9 }, + { "date": 15869, "open": 161.66, "high": 164.5, "low": 161.3, "close": 164.21, "volume": 163587800, "adjusted": 163.35 }, + { "date": 15870, "open": 164.03, "high": 164.67, "low": 162.91, "close": 163.18, "volume": 141197500, "adjusted": 162.32 }, + { "date": 15873, "open": 164.29, "high": 165.22, "low": 163.22, "close": 164.44, "volume": 136295600, "adjusted": 163.57 }, + { "date": 15874, "open": 164.53, "high": 165.99, "low": 164.52, "close": 165.74, "volume": 114695600, "adjusted": 164.87 }, + { "date": 15875, "open": 165.6, "high": 165.89, "low": 163.38, "close": 163.45, "volume": 206149500, "adjusted": 162.59 }, + { "date": 15876, "open": 161.86, "high": 163.47, "low": 158.98, "close": 159.4, "volume": 321255900, "adjusted": 158.56 }, + { "date": 15877, "open": 159.64, "high": 159.76, "low": 157.47, "close": 159.07, "volume": 271956800, "adjusted": 159.07 }, + { "date": 15880, "open": 157.41, "high": 158.43, "low": 155.73, "close": 157.06, "volume": 222329000, "adjusted": 157.06 }, + { "date": 15881, "open": 158.48, "high": 160.1, "low": 157.42, "close": 158.57, "volume": 162262200, "adjusted": 158.57 }, + { "date": 15882, "open": 159.87, "high": 160.5, "low": 159.25, "close": 160.14, "volume": 134848000, "adjusted": 160.14 }, + { "date": 15883, "open": 161.1, "high": 161.82, "low": 160.95, "close": 161.08, "volume": 129483700, "adjusted": 161.08 }, + { "date": 15884, "open": 160.63, "high": 161.4, "low": 159.86, "close": 160.42, "volume": 160402900, "adjusted": 160.42 }, + { "date": 15887, "open": 161.26, "high": 162.48, "low": 161.08, "close": 161.36, "volume": 131954800, "adjusted": 161.36 }, + { "date": 15888, "open": 161.12, "high": 162.3, "low": 160.5, "close": 161.21, "volume": 154863700, "adjusted": 161.21 }, + { "date": 15889, "open": 160.48, "high": 161.77, "low": 160.22, "close": 161.28, "volume": 75216400, "adjusted": 161.28 }, + { "date": 15891, "open": 162.47, "high": 163.08, "low": 161.3, "close": 163.02, "volume": 122416900, "adjusted": 163.02 }, + { "date": 15894, "open": 163.86, "high": 164.39, "low": 163.08, "close": 163.95, "volume": 108092500, "adjusted": 163.95 }, + { "date": 15895, "open": 164.98, "high": 165.33, "low": 164.27, "close": 165.13, "volume": 119298000, "adjusted": 165.13 }, + { "date": 15896, "open": 164.97, "high": 165.75, "low": 164.63, "close": 165.19, "volume": 121410100, "adjusted": 165.19 }, + { "date": 15897, "open": 167.11, "high": 167.61, "low": 165.18, "close": 167.44, "volume": 135592200, "adjusted": 167.44 }, + { "date": 15898, "open": 167.39, "high": 167.93, "low": 167.13, "close": 167.51, "volume": 104212700, "adjusted": 167.51 }, + { "date": 15901, "open": 167.97, "high": 168.39, "low": 167.68, "close": 168.15, "volume": 69450600, "adjusted": 168.15 }, + { "date": 15902, "open": 168.26, "high": 168.36, "low": 167.07, "close": 167.52, "volume": 88702100, "adjusted": 167.52 }, + { "date": 15903, "open": 168.16, "high": 168.48, "low": 167.73, "close": 167.95, "volume": 92873900, "adjusted": 167.95 }, + { "date": 15904, "open": 168.31, "high": 169.27, "low": 168.2, "close": 168.87, "volume": 103620100, "adjusted": 168.87 }, + { "date": 15905, "open": 168.52, "high": 169.23, "low": 168.31, "close": 169.17, "volume": 103831700, "adjusted": 169.17 }, + { "date": 15908, "open": 169.41, "high": 169.74, "low": 169.01, "close": 169.5, "volume": 79428600, "adjusted": 169.5 }, + { "date": 15909, "open": 169.8, "high": 169.83, "low": 169.05, "close": 169.14, "volume": 80829700, "adjusted": 169.14 }, + { "date": 15910, "open": 169.79, "high": 169.86, "low": 168.18, "close": 168.52, "volume": 112914000, "adjusted": 168.52 }, + { "date": 15911, "open": 168.22, "high": 169.08, "low": 167.94, "close": 168.93, "volume": 111088600, "adjusted": 168.93 }, + { "date": 15912, "open": 168.22, "high": 169.16, "low": 167.52, "close": 169.11, "volume": 107814600, "adjusted": 169.11 }, + { "date": 15915, "open": 168.68, "high": 169.06, "low": 168.11, "close": 168.59, "volume": 79695000, "adjusted": 168.59 }, + { "date": 15916, "open": 169.1, "high": 169.28, "low": 168.19, "close": 168.59, "volume": 85209600, "adjusted": 168.59 }, + { "date": 15917, "open": 168.94, "high": 169.85, "low": 168.49, "close": 168.71, "volume": 142388700, "adjusted": 168.71 }, + { "date": 15918, "open": 169.99, "high": 170.81, "low": 169.9, "close": 170.66, "volume": 110438400, "adjusted": 170.66 }, + { "date": 15919, "open": 170.28, "high": 170.97, "low": 170.05, "close": 170.95, "volume": 91116700, "adjusted": 170.95 }, + { "date": 15922, "open": 170.57, "high": 170.96, "low": 170.35, "close": 170.7, "volume": 54072700, "adjusted": 170.7 }, + { "date": 15923, "open": 170.37, "high": 170.74, "low": 169.35, "close": 169.73, "volume": 87495000, "adjusted": 169.73 }, + { "date": 15924, "open": 169.19, "high": 169.43, "low": 168.55, "close": 169.18, "volume": 84854700, "adjusted": 169.18 }, + { "date": 15925, "open": 169.98, "high": 170.18, "low": 168.93, "close": 169.8, "volume": 102181300, "adjusted": 169.8 }, + { "date": 15926, "open": 169.58, "high": 170.1, "low": 168.72, "close": 169.31, "volume": 91757700, "adjusted": 169.31 }, + { "date": 15929, "open": 168.46, "high": 169.31, "low": 168.38, "close": 169.11, "volume": 68593300, "adjusted": 169.11 }, + { "date": 15930, "open": 169.41, "high": 169.9, "low": 168.41, "close": 169.61, "volume": 80806000, "adjusted": 169.61 }, + { "date": 15931, "open": 169.53, "high": 169.8, "low": 168.7, "close": 168.74, "volume": 79829200, "adjusted": 168.74 }, + { "date": 15932, "open": 167.41, "high": 167.43, "low": 166.09, "close": 166.38, "volume": 152931800, "adjusted": 166.38 }, + { "date": 15933, "open": 166.06, "high": 166.63, "low": 165.5, "close": 165.83, "volume": 130868200, "adjusted": 165.83 }, + { "date": 15936, "open": 165.64, "high": 166.21, "low": 164.76, "close": 164.77, "volume": 96437600, "adjusted": 164.77 }, + { "date": 15937, "open": 165.04, "high": 166.2, "low": 164.86, "close": 165.58, "volume": 89294400, "adjusted": 165.58 }, + { "date": 15938, "open": 165.12, "high": 166.03, "low": 164.19, "close": 164.56, "volume": 159530500, "adjusted": 164.56 }, + { "date": 15939, "open": 164.9, "high": 166.3, "low": 164.89, "close": 166.06, "volume": 101471400, "adjusted": 166.06 }, + { "date": 15940, "open": 166.55, "high": 166.83, "low": 165.77, "close": 166.62, "volume": 90888900, "adjusted": 166.62 }, + { "date": 15943, "open": 166.79, "high": 167.3, "low": 165.89, "close": 166, "volume": 89702100, "adjusted": 166 }, + { "date": 15944, "open": 164.36, "high": 166, "low": 163.21, "close": 163.33, "volume": 158619400, "adjusted": 163.33 }, + { "date": 15945, "open": 163.26, "high": 164.49, "low": 163.05, "close": 163.91, "volume": 108113000, "adjusted": 163.91 }, + { "date": 15946, "open": 163.55, "high": 165.04, "low": 163.4, "close": 164.17, "volume": 119200500, "adjusted": 164.17 }, + { "date": 15947, "open": 164.51, "high": 164.53, "low": 163.17, "close": 163.65, "volume": 134560800, "adjusted": 163.65 }, + { "date": 15951, "open": 165.23, "high": 165.58, "low": 163.7, "close": 164.39, "volume": 142322300, "adjusted": 164.39 }, + { "date": 15952, "open": 164.43, "high": 166.03, "low": 164.13, "close": 165.75, "volume": 97304000, "adjusted": 165.75 }, + { "date": 15953, "open": 165.85, "high": 166.4, "low": 165.73, "close": 165.96, "volume": 62930500, "adjusted": 165.96 } + ] + }]; + + nv.addGraph(function () { + var chart = nv.models.candlestickBar() + .x(function (d) { return d['date'] }) + .y(function (d) { return d['close'] }); + d3.select("#chart1 svg") + .datum(data) + .transition().duration(500) + .call(chart); + + nv.utils.windowResize(chart.update); + return chart; + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-candlestickChart.ts b/nvd3/nvd3-test-candlestickChart.ts new file mode 100644 index 000000000..ac753341e --- /dev/null +++ b/nvd3/nvd3-test-candlestickChart.ts @@ -0,0 +1,108 @@ +/// +module nvd3_test_candlestickChart { + var data = [{ + values: [ + { "date": 15854, "open": 165.42, "high": 165.8, "low": 164.34, "close": 165.22, "volume": 160363400, "adjusted": 164.35 }, + { "date": 15855, "open": 165.35, "high": 166.59, "low": 165.22, "close": 165.83, "volume": 107793800, "adjusted": 164.96 }, + { "date": 15856, "open": 165.37, "high": 166.31, "low": 163.13, "close": 163.45, "volume": 176850100, "adjusted": 162.59 }, + { "date": 15859, "open": 163.83, "high": 164.46, "low": 162.66, "close": 164.35, "volume": 168390700, "adjusted": 163.48 }, + { "date": 15860, "open": 164.44, "high": 165.1, "low": 162.73, "close": 163.56, "volume": 157631500, "adjusted": 162.7 }, + { "date": 15861, "open": 163.09, "high": 163.42, "low": 161.13, "close": 161.27, "volume": 211737800, "adjusted": 160.42 }, + { "date": 15862, "open": 161.2, "high": 162.74, "low": 160.25, "close": 162.73, "volume": 200225500, "adjusted": 161.87 }, + { "date": 15863, "open": 163.85, "high": 164.95, "low": 163.14, "close": 164.8, "volume": 188337800, "adjusted": 163.93 }, + { "date": 15866, "open": 165.31, "high": 165.4, "low": 164.37, "close": 164.8, "volume": 105667100, "adjusted": 163.93 }, + { "date": 15867, "open": 163.3, "high": 164.54, "low": 162.74, "close": 163.1, "volume": 159505400, "adjusted": 162.24 }, + { "date": 15868, "open": 164.22, "high": 164.39, "low": 161.6, "close": 161.75, "volume": 177361500, "adjusted": 160.9 }, + { "date": 15869, "open": 161.66, "high": 164.5, "low": 161.3, "close": 164.21, "volume": 163587800, "adjusted": 163.35 }, + { "date": 15870, "open": 164.03, "high": 164.67, "low": 162.91, "close": 163.18, "volume": 141197500, "adjusted": 162.32 }, + { "date": 15873, "open": 164.29, "high": 165.22, "low": 163.22, "close": 164.44, "volume": 136295600, "adjusted": 163.57 }, + { "date": 15874, "open": 164.53, "high": 165.99, "low": 164.52, "close": 165.74, "volume": 114695600, "adjusted": 164.87 }, + { "date": 15875, "open": 165.6, "high": 165.89, "low": 163.38, "close": 163.45, "volume": 206149500, "adjusted": 162.59 }, + { "date": 15876, "open": 161.86, "high": 163.47, "low": 158.98, "close": 159.4, "volume": 321255900, "adjusted": 158.56 }, + { "date": 15877, "open": 159.64, "high": 159.76, "low": 157.47, "close": 159.07, "volume": 271956800, "adjusted": 159.07 }, + { "date": 15880, "open": 157.41, "high": 158.43, "low": 155.73, "close": 157.06, "volume": 222329000, "adjusted": 157.06 }, + { "date": 15881, "open": 158.48, "high": 160.1, "low": 157.42, "close": 158.57, "volume": 162262200, "adjusted": 158.57 }, + { "date": 15882, "open": 159.87, "high": 160.5, "low": 159.25, "close": 160.14, "volume": 134848000, "adjusted": 160.14 }, + { "date": 15883, "open": 161.1, "high": 161.82, "low": 160.95, "close": 161.08, "volume": 129483700, "adjusted": 161.08 }, + { "date": 15884, "open": 160.63, "high": 161.4, "low": 159.86, "close": 160.42, "volume": 160402900, "adjusted": 160.42 }, + { "date": 15887, "open": 161.26, "high": 162.48, "low": 161.08, "close": 161.36, "volume": 131954800, "adjusted": 161.36 }, + { "date": 15888, "open": 161.12, "high": 162.3, "low": 160.5, "close": 161.21, "volume": 154863700, "adjusted": 161.21 }, + { "date": 15889, "open": 160.48, "high": 161.77, "low": 160.22, "close": 161.28, "volume": 75216400, "adjusted": 161.28 }, + { "date": 15891, "open": 162.47, "high": 163.08, "low": 161.3, "close": 163.02, "volume": 122416900, "adjusted": 163.02 }, + { "date": 15894, "open": 163.86, "high": 164.39, "low": 163.08, "close": 163.95, "volume": 108092500, "adjusted": 163.95 }, + { "date": 15895, "open": 164.98, "high": 165.33, "low": 164.27, "close": 165.13, "volume": 119298000, "adjusted": 165.13 }, + { "date": 15896, "open": 164.97, "high": 165.75, "low": 164.63, "close": 165.19, "volume": 121410100, "adjusted": 165.19 }, + { "date": 15897, "open": 167.11, "high": 167.61, "low": 165.18, "close": 167.44, "volume": 135592200, "adjusted": 167.44 }, + { "date": 15898, "open": 167.39, "high": 167.93, "low": 167.13, "close": 167.51, "volume": 104212700, "adjusted": 167.51 }, + { "date": 15901, "open": 167.97, "high": 168.39, "low": 167.68, "close": 168.15, "volume": 69450600, "adjusted": 168.15 }, + { "date": 15902, "open": 168.26, "high": 168.36, "low": 167.07, "close": 167.52, "volume": 88702100, "adjusted": 167.52 }, + { "date": 15903, "open": 168.16, "high": 168.48, "low": 167.73, "close": 167.95, "volume": 92873900, "adjusted": 167.95 }, + { "date": 15904, "open": 168.31, "high": 169.27, "low": 168.2, "close": 168.87, "volume": 103620100, "adjusted": 168.87 }, + { "date": 15905, "open": 168.52, "high": 169.23, "low": 168.31, "close": 169.17, "volume": 103831700, "adjusted": 169.17 }, + { "date": 15908, "open": 169.41, "high": 169.74, "low": 169.01, "close": 169.5, "volume": 79428600, "adjusted": 169.5 }, + { "date": 15909, "open": 169.8, "high": 169.83, "low": 169.05, "close": 169.14, "volume": 80829700, "adjusted": 169.14 }, + { "date": 15910, "open": 169.79, "high": 169.86, "low": 168.18, "close": 168.52, "volume": 112914000, "adjusted": 168.52 }, + { "date": 15911, "open": 168.22, "high": 169.08, "low": 167.94, "close": 168.93, "volume": 111088600, "adjusted": 168.93 }, + { "date": 15912, "open": 168.22, "high": 169.16, "low": 167.52, "close": 169.11, "volume": 107814600, "adjusted": 169.11 }, + { "date": 15915, "open": 168.68, "high": 169.06, "low": 168.11, "close": 168.59, "volume": 79695000, "adjusted": 168.59 }, + { "date": 15916, "open": 169.1, "high": 169.28, "low": 168.19, "close": 168.59, "volume": 85209600, "adjusted": 168.59 }, + { "date": 15917, "open": 168.94, "high": 169.85, "low": 168.49, "close": 168.71, "volume": 142388700, "adjusted": 168.71 }, + { "date": 15918, "open": 169.99, "high": 170.81, "low": 169.9, "close": 170.66, "volume": 110438400, "adjusted": 170.66 }, + { "date": 15919, "open": 170.28, "high": 170.97, "low": 170.05, "close": 170.95, "volume": 91116700, "adjusted": 170.95 }, + { "date": 15922, "open": 170.57, "high": 170.96, "low": 170.35, "close": 170.7, "volume": 54072700, "adjusted": 170.7 }, + { "date": 15923, "open": 170.37, "high": 170.74, "low": 169.35, "close": 169.73, "volume": 87495000, "adjusted": 169.73 }, + { "date": 15924, "open": 169.19, "high": 169.43, "low": 168.55, "close": 169.18, "volume": 84854700, "adjusted": 169.18 }, + { "date": 15925, "open": 169.98, "high": 170.18, "low": 168.93, "close": 169.8, "volume": 102181300, "adjusted": 169.8 }, + { "date": 15926, "open": 169.58, "high": 170.1, "low": 168.72, "close": 169.31, "volume": 91757700, "adjusted": 169.31 }, + { "date": 15929, "open": 168.46, "high": 169.31, "low": 168.38, "close": 169.11, "volume": 68593300, "adjusted": 169.11 }, + { "date": 15930, "open": 169.41, "high": 169.9, "low": 168.41, "close": 169.61, "volume": 80806000, "adjusted": 169.61 }, + { "date": 15931, "open": 169.53, "high": 169.8, "low": 168.7, "close": 168.74, "volume": 79829200, "adjusted": 168.74 }, + { "date": 15932, "open": 167.41, "high": 167.43, "low": 166.09, "close": 166.38, "volume": 152931800, "adjusted": 166.38 }, + { "date": 15933, "open": 166.06, "high": 166.63, "low": 165.5, "close": 165.83, "volume": 130868200, "adjusted": 165.83 }, + { "date": 15936, "open": 165.64, "high": 166.21, "low": 164.76, "close": 164.77, "volume": 96437600, "adjusted": 164.77 }, + { "date": 15937, "open": 165.04, "high": 166.2, "low": 164.86, "close": 165.58, "volume": 89294400, "adjusted": 165.58 }, + { "date": 15938, "open": 165.12, "high": 166.03, "low": 164.19, "close": 164.56, "volume": 159530500, "adjusted": 164.56 }, + { "date": 15939, "open": 164.9, "high": 166.3, "low": 164.89, "close": 166.06, "volume": 101471400, "adjusted": 166.06 }, + { "date": 15940, "open": 166.55, "high": 166.83, "low": 165.77, "close": 166.62, "volume": 90888900, "adjusted": 166.62 }, + { "date": 15943, "open": 166.79, "high": 167.3, "low": 165.89, "close": 166, "volume": 89702100, "adjusted": 166 }, + { "date": 15944, "open": 164.36, "high": 166, "low": 163.21, "close": 163.33, "volume": 158619400, "adjusted": 163.33 }, + { "date": 15945, "open": 163.26, "high": 164.49, "low": 163.05, "close": 163.91, "volume": 108113000, "adjusted": 163.91 }, + { "date": 15946, "open": 163.55, "high": 165.04, "low": 163.4, "close": 164.17, "volume": 119200500, "adjusted": 164.17 }, + { "date": 15947, "open": 164.51, "high": 164.53, "low": 163.17, "close": 163.65, "volume": 134560800, "adjusted": 163.65 }, + { "date": 15951, "open": 165.23, "high": 165.58, "low": 163.7, "close": 164.39, "volume": 142322300, "adjusted": 164.39 }, + { "date": 15952, "open": 164.43, "high": 166.03, "low": 164.13, "close": 165.75, "volume": 97304000, "adjusted": 165.75 }, + { "date": 15953, "open": 165.85, "high": 166.4, "low": 165.73, "close": 165.96, "volume": 62930500, "adjusted": 165.96 } + ] + }]; + + nv.addGraph(function () { + var chart = nv.models.candlestickBarChart() + .x(function (d) { return d['date'] }) + .y(function (d) { return d['close'] }) + .duration(250) + .margin({ left: 75, bottom: 50 }); + + // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately + chart.xAxis + .axisLabel("Dates") + .tickFormat(function (d) { + // I didn't feel like changing all the above date values + // so I hack it to make each value fall on a different date + return d3.time.format('%x')(new Date(new Date().valueOf() - (20000 * 86400000) + (d * 86400000))); + }); + + chart.yAxis + .axisLabel('Stock Price') + .tickFormat(function (d, i) { return '$' + d3.format(',.1f')(d); }); + + + + d3.select("#chart1 svg") + .datum(data) + .transition().duration(500) + .call(chart); + + nv.utils.windowResize(chart.update); + return chart; + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-cumulativeLineChart.ts b/nvd3/nvd3-test-cumulativeLineChart.ts new file mode 100644 index 000000000..fc7df21ed --- /dev/null +++ b/nvd3/nvd3-test-cumulativeLineChart.ts @@ -0,0 +1,75 @@ +/// +module nvd3_test_cumulativeLineChart { + // Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, + // and may do more in the future... it's NOT required + nv.addGraph(function () { + var chart = nv.models.cumulativeLineChart() + .useInteractiveGuideline(true) + .x(function (d) { return d[0] }) + .y(function (d) { return d[1] / 100 }) + .color(d3.scale.category10().range()) + .average(function (d) { return d.mean / 100; }) + .duration(300) + .clipVoronoi(false); + chart.dispatch.on('renderEnd', function () { + console.log('render complete: cumulative line with guide line'); + }); + + chart.xAxis.tickFormat(function (d) { + return d3.time.format('%m/%d/%y')(new Date(d)) + }); + + chart.yAxis.tickFormat(d3.format(',.1%')); + + d3.select('#chart1 svg') + .datum(cumulativeTestData()) + .call(chart); + + //TODO: Figure out a good way to do this automatically + nv.utils.windowResize(chart.update); + + chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); }); + chart.state.dispatch.on('change', function (state) { + nv.log('state', JSON.stringify(state)); + }); + + return chart; + }); + + function flatTestData() { + return [{ + key: "Snakes", + values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (d) { + var currentDate = new Date(); + currentDate.setDate(currentDate.getDate() + d); + return [currentDate, 0] + }) + }]; + } + + function cumulativeTestData() { + return [ + { + key: "Long", + values: [[1083297600000, -2.974623048543], [1085976000000, -1.7740300785979], [1088568000000, 4.4681318138177], [1091246400000, 7.0242541001353], [1093924800000, 7.5709603667586], [1096516800000, 20.612245065736], [1099195200000, 21.698065237316], [1101790800000, 40.501189458018], [1104469200000, 50.464679413194], [1107147600000, 48.917421973355], [1109566800000, 63.750936549160], [1112245200000, 59.072499126460], [1114833600000, 43.373158880492], [1117512000000, 54.490918947556], [1120104000000, 56.661178852079], [1122782400000, 73.450103545496], [1125460800000, 71.714526354907], [1128052800000, 85.221664349607], [1130734800000, 77.769261392481], [1133326800000, 95.966528716500], [1136005200000, 107.59132116397], [1138683600000, 127.25740096723], [1141102800000, 122.13917498830], [1143781200000, 126.53657279774], [1146369600000, 132.39300992970], [1149048000000, 120.11238242904], [1151640000000, 118.41408917750], [1154318400000, 107.92918924621], [1156996800000, 110.28057249569], [1159588800000, 117.20485334692], [1162270800000, 141.33556756948], [1164862800000, 159.59452727893], [1167541200000, 167.09801853304], [1170219600000, 185.46849659215], [1172638800000, 184.82474099990], [1175313600000, 195.63155213887], [1177905600000, 207.40597044171], [1180584000000, 230.55966698196], [1183176000000, 239.55649035292], [1185854400000, 241.35915085208], [1188532800000, 239.89428956243], [1191124800000, 260.47781917715], [1193803200000, 276.39457482225], [1196398800000, 258.66530682672], [1199077200000, 250.98846121893], [1201755600000, 226.89902618127], [1204261200000, 227.29009273807], [1206936000000, 218.66476654350], [1209528000000, 232.46605902918], [1212206400000, 253.25667081117], [1214798400000, 235.82505363925], [1217476800000, 229.70112774254], [1220155200000, 225.18472705952], [1222747200000, 189.13661746552], [1225425600000, 149.46533007301], [1228021200000, 131.00340772114], [1230699600000, 135.18341728866], [1233378000000, 109.15296887173], [1235797200000, 84.614772549760], [1238472000000, 100.60810015326], [1241064000000, 141.50134895610], [1243742400000, 142.50405083675], [1246334400000, 139.81192372672], [1249012800000, 177.78205544583], [1251691200000, 194.73691933074], [1254283200000, 209.00838460225], [1256961600000, 198.19855877420], [1259557200000, 222.37102417812], [1262235600000, 234.24581081250], [1264914000000, 228.26087689346], [1267333200000, 248.81895126250], [1270008000000, 270.57301075186], [1272600000000, 292.64604322550], [1275278400000, 265.94088520518], [1277870400000, 237.82887467569], [1280548800000, 265.55973314204], [1283227200000, 248.30877330928], [1285819200000, 278.14870066912], [1288497600000, 292.69260960288], [1291093200000, 300.84263809599], [1293771600000, 326.17253914628], [1296450000000, 337.69335966505], [1298869200000, 339.73260965121], [1301544000000, 346.87865120765], [1304136000000, 347.92991526628], [1306814400000, 342.04627502669], [1309406400000, 333.45386231233], [1312084800000, 323.15034181243], [1314763200000, 295.66126882331], [1317355200000, 251.48014579253], [1320033600000, 295.15424257905], [1322629200000, 294.54766764397], [1325307600000, 295.72906119051], [1327986000000, 325.73351347613], [1330491600000, 340.16106061186], [1333166400000, 345.15514071490], [1335758400000, 337.10259395679], [1338436800000, 318.68216333837], [1341028800000, 317.03683945246], [1343707200000, 318.53549659997], [1346385600000, 332.85381464104], [1348977600000, 337.36534373477], [1351656000000, 350.27872156161], [1354251600000, 349.45128876100]] + , + mean: 250 + }, + { + key: "Short", + values: [[1083297600000, -0.77078283705125], [1085976000000, -1.8356366650335], [1088568000000, -5.3121322073127], [1091246400000, -4.9320975829662], [1093924800000, -3.9835408823225], [1096516800000, -6.8694685316805], [1099195200000, -8.4854877428545], [1101790800000, -15.933627197384], [1104469200000, -15.920980069544], [1107147600000, -12.478685045651], [1109566800000, -17.297761889305], [1112245200000, -15.247129891020], [1114833600000, -11.336459046839], [1117512000000, -13.298990907415], [1120104000000, -16.360027000056], [1122782400000, -18.527929522030], [1125460800000, -22.176516738685], [1128052800000, -23.309665368330], [1130734800000, -21.629973409748], [1133326800000, -24.186429093486], [1136005200000, -29.116707312531], [1138683600000, -37.188037874864], [1141102800000, -34.689264821198], [1143781200000, -39.505932105359], [1146369600000, -45.339572492759], [1149048000000, -43.849353192764], [1151640000000, -45.418353922571], [1154318400000, -44.579281059919], [1156996800000, -44.027098363370], [1159588800000, -41.261306759439], [1162270800000, -47.446018534027], [1164862800000, -53.413782948909], [1167541200000, -50.700723647419], [1170219600000, -56.374090913296], [1172638800000, -61.754245220322], [1175313600000, -66.246241587629], [1177905600000, -75.351650899999], [1180584000000, -81.699058262032], [1183176000000, -82.487023368081], [1185854400000, -86.230055113277], [1188532800000, -84.746914818507], [1191124800000, -100.77134971977], [1193803200000, -109.95435565947], [1196398800000, -99.605672965057], [1199077200000, -99.607249394382], [1201755600000, -94.874614950188], [1204261200000, -105.35899063105], [1206936000000, -106.01931193802], [1209528000000, -110.28883571771], [1212206400000, -119.60256203030], [1214798400000, -115.62201315802], [1217476800000, -106.63824185202], [1220155200000, -99.848746318951], [1222747200000, -85.631219602987], [1225425600000, -63.547909262067], [1228021200000, -59.753275364457], [1230699600000, -63.874977883542], [1233378000000, -56.865697387488], [1235797200000, -54.285579501988], [1238472000000, -56.474659581885], [1241064000000, -63.847137745644], [1243742400000, -68.754247867325], [1246334400000, -69.474257009155], [1249012800000, -75.084828197067], [1251691200000, -77.101028237237], [1254283200000, -80.454866854387], [1256961600000, -78.984349952220], [1259557200000, -83.041230807854], [1262235600000, -84.529748348935], [1264914000000, -83.837470195508], [1267333200000, -87.174487671969], [1270008000000, -90.342293007487], [1272600000000, -93.550928464991], [1275278400000, -85.833102140765], [1277870400000, -79.326501831592], [1280548800000, -87.986196903537], [1283227200000, -85.397862121771], [1285819200000, -94.738167050020], [1288497600000, -98.661952897151], [1291093200000, -99.609665952708], [1293771600000, -103.57099836183], [1296450000000, -104.04353411322], [1298869200000, -108.21382792587], [1301544000000, -108.74006900920], [1304136000000, -112.07766650960], [1306814400000, -109.63328199118], [1309406400000, -106.53578966772], [1312084800000, -103.16480871469], [1314763200000, -95.945078001828], [1317355200000, -81.226687340874], [1320033600000, -90.782206596168], [1322629200000, -89.484445370113], [1325307600000, -88.514723135326], [1327986000000, -93.381292724320], [1330491600000, -97.529705609172], [1333166400000, -99.520481439189], [1335758400000, -99.430184898669], [1338436800000, -93.349934521973], [1341028800000, -95.858475286491], [1343707200000, -95.522755836605], [1346385600000, -98.503848862036], [1348977600000, -101.49415251896], [1351656000000, -101.50099325672], [1354251600000, -99.487094927489]] + , + mean: -60 + }, + { + key: "Gross", + mean: 125, + values: [[1083297600000, -3.7454058855943], [1085976000000, -3.6096667436314], [1088568000000, -0.8440003934950], [1091246400000, 2.0921565171691], [1093924800000, 3.5874194844361], [1096516800000, 13.742776534056], [1099195200000, 13.212577494462], [1101790800000, 24.567562260634], [1104469200000, 34.543699343650], [1107147600000, 36.438736927704], [1109566800000, 46.453174659855], [1112245200000, 43.825369235440], [1114833600000, 32.036699833653], [1117512000000, 41.191928040141], [1120104000000, 40.301151852023], [1122782400000, 54.922174023466], [1125460800000, 49.538009616222], [1128052800000, 61.911998981277], [1130734800000, 56.139287982733], [1133326800000, 71.780099623014], [1136005200000, 78.474613851439], [1138683600000, 90.069363092366], [1141102800000, 87.449910167102], [1143781200000, 87.030640692381], [1146369600000, 87.053437436941], [1149048000000, 76.263029236276], [1151640000000, 72.995735254929], [1154318400000, 63.349908186291], [1156996800000, 66.253474132320], [1159588800000, 75.943546587481], [1162270800000, 93.889549035453], [1164862800000, 106.18074433002], [1167541200000, 116.39729488562], [1170219600000, 129.09440567885], [1172638800000, 123.07049577958], [1175313600000, 129.38531055124], [1177905600000, 132.05431954171], [1180584000000, 148.86060871993], [1183176000000, 157.06946698484], [1185854400000, 155.12909573880], [1188532800000, 155.14737474392], [1191124800000, 159.70646945738], [1193803200000, 166.44021916278], [1196398800000, 159.05963386166], [1199077200000, 151.38121182455], [1201755600000, 132.02441123108], [1204261200000, 121.93110210702], [1206936000000, 112.64545460548], [1209528000000, 122.17722331147], [1212206400000, 133.65410878087], [1214798400000, 120.20304048123], [1217476800000, 123.06288589052], [1220155200000, 125.33598074057], [1222747200000, 103.50539786253], [1225425600000, 85.917420810943], [1228021200000, 71.250132356683], [1230699600000, 71.308439405118], [1233378000000, 52.287271484242], [1235797200000, 30.329193047772], [1238472000000, 44.133440571375], [1241064000000, 77.654211210456], [1243742400000, 73.749802969425], [1246334400000, 70.337666717565], [1249012800000, 102.69722724876], [1251691200000, 117.63589109350], [1254283200000, 128.55351774786], [1256961600000, 119.21420882198], [1259557200000, 139.32979337027], [1262235600000, 149.71606246357], [1264914000000, 144.42340669795], [1267333200000, 161.64446359053], [1270008000000, 180.23071774437], [1272600000000, 199.09511476051], [1275278400000, 180.10778306442], [1277870400000, 158.50237284410], [1280548800000, 177.57353623850], [1283227200000, 162.91091118751], [1285819200000, 183.41053361910], [1288497600000, 194.03065670573], [1291093200000, 201.23297214328], [1293771600000, 222.60154078445], [1296450000000, 233.35556801977], [1298869200000, 231.22452435045], [1301544000000, 237.84432503045], [1304136000000, 235.55799131184], [1306814400000, 232.11873570751], [1309406400000, 226.62381538123], [1312084800000, 219.34811113539], [1314763200000, 198.69242285581], [1317355200000, 168.90235629066], [1320033600000, 202.64725756733], [1322629200000, 203.05389378105], [1325307600000, 204.85986680865], [1327986000000, 229.77085616585], [1330491600000, 239.65202435959], [1333166400000, 242.33012622734], [1335758400000, 234.11773262149], [1338436800000, 221.47846307887], [1341028800000, 216.98308827912], [1343707200000, 218.37781386755], [1346385600000, 229.39368622736], [1348977600000, 230.54656412916], [1351656000000, 243.06087025523], [1354251600000, 244.24733578385]] + }, + { + key: "S&P 1500", + values: [[1083297600000, -1.7798428181819], [1085976000000, -0.36883324836999], [1088568000000, 1.7312581046040], [1091246400000, -1.8356125950460], [1093924800000, -1.5396564170877], [1096516800000, -0.16867791409247], [1099195200000, 1.3754263993413], [1101790800000, 5.8171640898041], [1104469200000, 9.4350145241608], [1107147600000, 6.7649081510160], [1109566800000, 9.1568499314776], [1112245200000, 7.2485090994419], [1114833600000, 4.8762222306595], [1117512000000, 8.5992339354652], [1120104000000, 9.0896517982086], [1122782400000, 13.394644048577], [1125460800000, 12.311842010760], [1128052800000, 13.221003650717], [1130734800000, 11.218481009206], [1133326800000, 15.565352598445], [1136005200000, 15.623703865926], [1138683600000, 19.275255326383], [1141102800000, 19.432433717836], [1143781200000, 21.232881244655], [1146369600000, 22.798299192958], [1149048000000, 19.006125095476], [1151640000000, 19.151889158536], [1154318400000, 19.340022855452], [1156996800000, 22.027934841859], [1159588800000, 24.903300681329], [1162270800000, 29.146492833877], [1164862800000, 31.781626082589], [1167541200000, 33.358770738428], [1170219600000, 35.622684613497], [1172638800000, 33.332821711366], [1175313600000, 34.878748635832], [1177905600000, 40.582332613844], [1180584000000, 45.719535502920], [1183176000000, 43.239344722386], [1185854400000, 38.550955100342], [1188532800000, 40.585368816283], [1191124800000, 45.601374057981], [1193803200000, 48.051404337892], [1196398800000, 41.582581696032], [1199077200000, 40.650580792748], [1201755600000, 32.252222066493], [1204261200000, 28.106390258553], [1206936000000, 27.532698196687], [1209528000000, 33.986390463852], [1212206400000, 36.302660526438], [1214798400000, 25.015574480172], [1217476800000, 23.989494069029], [1220155200000, 25.934351445531], [1222747200000, 14.627592011699], [1225425600000, -5.2249403809749], [1228021200000, -12.330933408050], [1230699600000, -11.000291508188], [1233378000000, -18.563864948088], [1235797200000, -27.213097001687], [1238472000000, -20.834133840523], [1241064000000, -12.717886701719], [1243742400000, -8.1644613083526], [1246334400000, -7.9108408918201], [1249012800000, -0.77002391591209], [1251691200000, 2.8243816569672], [1254283200000, 6.8761411421070], [1256961600000, 4.5060912230294], [1259557200000, 10.487179794349], [1262235600000, 13.251375597594], [1264914000000, 9.2207594803415], [1267333200000, 12.836276936538], [1270008000000, 19.816793904978], [1272600000000, 22.156787167211], [1275278400000, 12.518039090576], [1277870400000, 6.4253587440854], [1280548800000, 13.847372028409], [1283227200000, 8.5454736090364], [1285819200000, 18.542801953304], [1288497600000, 23.037064683183], [1291093200000, 23.517422401888], [1293771600000, 31.804723416068], [1296450000000, 34.778247386072], [1298869200000, 39.584883855230], [1301544000000, 40.080647664875], [1304136000000, 44.180050667889], [1306814400000, 42.533535927221], [1309406400000, 40.105374449011], [1312084800000, 37.014659267156], [1314763200000, 29.263745084262], [1317355200000, 19.637463417584], [1320033600000, 33.157645345770], [1322629200000, 32.895053150988], [1325307600000, 34.111544824647], [1327986000000, 40.453985817473], [1330491600000, 46.435700783313], [1333166400000, 51.062385488671], [1335758400000, 50.130448220658], [1338436800000, 41.035476682018], [1341028800000, 46.591932296457], [1343707200000, 48.349391180634], [1346385600000, 51.913011286919], [1348977600000, 55.747238313752], [1351656000000, 52.991824077209], [1354251600000, 49.556311883284]] + } + ]; + } +} \ No newline at end of file diff --git a/nvd3/nvd3-test-discreteBarChart.ts b/nvd3/nvd3-test-discreteBarChart.ts new file mode 100644 index 000000000..cb7b444c6 --- /dev/null +++ b/nvd3/nvd3-test-discreteBarChart.ts @@ -0,0 +1,60 @@ +/// +module nvd3_test_discreteBarChart { + var historicalBarChart = [ + { + key: "Cumulative Return", + values: [ + { + "label": "A", + "value": 29.765957771107 + }, + { + "label": "B", + "value": 0 + }, + { + "label": "C", + "value": 32.807804682612 + }, + { + "label": "D", + "value": 196.45946739256 + }, + { + "label": "E", + "value": 0.19434030906893 + }, + { + "label": "F", + "value": 98.079782601442 + }, + { + "label": "G", + "value": 13.925743130903 + }, + { + "label": "H", + "value": 5.1387322875705 + } + ] + } + ]; + + nv.addGraph(function () { + var chart = nv.models.discreteBarChart() + .x(function (d) { return d.label }) + .y(function (d) { return d.value }) + .staggerLabels(true) + //.staggerLabels(historicalBarChart[0].values.length > 8) + .showValues(true) + .duration(250) + ; + + d3.select('#chart1 svg') + .datum(historicalBarChart) + .call(chart); + + nv.utils.windowResize(chart.update); + return chart; + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-donutChart.ts b/nvd3/nvd3-test-donutChart.ts new file mode 100644 index 000000000..69f4d6c1f --- /dev/null +++ b/nvd3/nvd3-test-donutChart.ts @@ -0,0 +1,93 @@ +/// +module nvd3_test_donutChart { + var testdata = [ + { key: "One", y: 5 }, + { key: "Two", y: 2 }, + { key: "Three", y: 9 }, + { key: "Four", y: 7 }, + { key: "Five", y: 4 }, + { key: "Six", y: 3 }, + { key: "Seven", y: 0.5 } + ]; + + var height = 350; + var width = 350; + + var chart1; + nv.addGraph(function () { + var chart1 = nv.models.pieChart() + .x(function (d) { return d.key }) + .y(function (d) { return d.y }) + .donut(true) + .width(width) + .height(height) + .padAngle(.08) + .cornerRadius(5) + .id('donut1'); // allow custom CSS for this one svg + + chart1.title("100%"); + chart1.pie.donutLabelsOutside(true).donut(true); + + d3.select("#test1") + .datum(testdata) + .transition().duration(1200) + .call(chart1); + + // LISTEN TO WINDOW RESIZE + // nv.utils.windowResize(chart1.update); + + // LISTEN TO CLICK EVENTS ON SLICES OF THE PIE/DONUT + // chart.pie.dispatch.on('elementClick', function() { + // code... + // }); + + // chart.pie.dispatch.on('chartClick', function() { + // code... + // }); + + // LISTEN TO DOUBLECLICK EVENTS ON SLICES OF THE PIE/DONUT + // chart.pie.dispatch.on('elementDblClick', function() { + // code... + // }); + + // LISTEN TO THE renderEnd EVENT OF THE PIE/DONUT + // chart.pie.dispatch.on('renderEnd', function() { + // code... + // }); + + // OTHER EVENTS DISPATCHED BY THE PIE INCLUDE: elementMouseover, elementMouseout, elementMousemove + // @see nv.models.pie + + return chart1; + + }); + + var chart2; + nv.addGraph(function () { + var chart2 = nv.models.pieChart() + .x(function (d) { return d.key }) + .y(function (d) { return d.y }) + //.labelThreshold(.08) + //.showLabels(false) + .color(d3.scale.category20().range().slice(10)) + .width(width) + .height(height) + .donut(true) + .id('donut2') + .titleOffset(-30) + .title("woot"); + + // MAKES IT HALF CIRCLE + chart2.pie + .startAngle(function (d) { return d.startAngle / 2 - Math.PI / 2 }) + .endAngle(function (d) { return d.endAngle / 2 - Math.PI / 2 }); + + d3.select("#test2") + //.datum(historicalBarChart) + .datum(testdata) + .transition().duration(1200) + .call(chart2); + + return chart2; + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-furiousLegend.ts b/nvd3/nvd3-test-furiousLegend.ts new file mode 100644 index 000000000..3477d064b --- /dev/null +++ b/nvd3/nvd3-test-furiousLegend.ts @@ -0,0 +1,72 @@ +/// +module nvd3_test_furiousLegend { + var width = 500, + height = 40; + + var legend = nv.models.legend().vers('furious'); + + d3.select('#test1') + .attr('width', width) + .attr('height', height) + .datum(sinAndCos()); + + var legend2 = nv.models.legend().vers('furious') + .align(false); + + d3.select('#test2') + .attr('width', width) + .attr('height', height) + .datum(sinAndCos()).call(legend2); + + var legend3 = nv.models.legend().vers('furious') + .width(900) + .padding(70); + + d3.select('#test3') + .attr('width', 900) + .attr('height', 200) + .datum(sinAndCos()).call(legend3); + + var update = function (i, l) { + d3.select('#test' + i).call(l); + } + + update(1, legend); + legend.dispatch.on('stateChange', function (d) { + console.log(d); + update(1, legend); + }); + + legend2.dispatch.on('stateChange', function (d) { + console.log(d); + update(2, legend2); + }); + + legend3.dispatch.on('stateChange', function (d) { + console.log(d); + update(3, legend3); + }); + + d3.select('#changeData').on('click', function () { + var exp = legend.expanded(); + + legend.expanded(!exp); + + d3.select('#test1') + .call(legend); + }); + + function sinAndCos() { + return [ + { key: "Sine Wave" }, + { key: "averylongserieslabelthatcontainsmorethantwentycharacters" }, + { key: "A Very Long Series Label" }, + { key: "A Very Long Series Label" }, + { key: "Cosine Wave" }, + { key: "Another test label" }, + { key: "Bonds", disengaged: true }, + { key: "Stocks", disengaged: true }, + { key: "Apple", disengaged: true } + ]; + } +} \ No newline at end of file diff --git a/nvd3/nvd3-test-legend.ts b/nvd3/nvd3-test-legend.ts index 81f39d2da..99f4de2b7 100644 --- a/nvd3/nvd3-test-legend.ts +++ b/nvd3/nvd3-test-legend.ts @@ -1,67 +1,69 @@ /// /// -var width = 500, - height = 20; +module nvd3_test_legend { + var width = 500, + height = 20; - var legend = nv.models.legend(); + var legend = nv.models.legend(); - d3.select('#test1') - .attr('width', width) - .attr('height', height) - .datum(sinAndCos()); + d3.select('#test1') + .attr('width', width) + .attr('height', height) + .datum(sinAndCos()); - var legend2 = nv.models.legend() - .align(false); + var legend2 = nv.models.legend() + .align(false); - d3.select('#test2') - .attr('width', width) - .attr('height', height) - .datum(sinAndCos()).call(legend2); + d3.select('#test2') + .attr('width', width) + .attr('height', height) + .datum(sinAndCos()).call(legend2); - var legend3 = nv.models.legend() - .width(900) - .padding(70); + var legend3 = nv.models.legend() + .width(900) + .padding(70); - d3.select('#test3') - .attr('width', 900) - .attr('height', 200) - .datum(sinAndCos()).call(legend3); + d3.select('#test3') + .attr('width', 900) + .attr('height', 200) + .datum(sinAndCos()).call(legend3); - var update = function() { - d3.select('#test1').call(legend); - } + var update = function () { + d3.select('#test1').call(legend); + } - update(); - legend.dispatch.on('stateChange', function(d) { - console.log(d); - update(); - }); + update(); + legend.dispatch.on('stateChange', function (d) { + console.log(d); + update(); + }); - d3.select('#changeData').on('click', function() { - d3.select('#test1') - .datum(differentData()) - .call(legend); - }); + d3.select('#changeData').on('click', function () { + d3.select('#test1') + .datum(differentData()) + .call(legend); + }); - function sinAndCos() { - return [ - {key: "Sine Wave"}, - {key: "A Very Long Label With Over Twenty Characters"}, - {key: "A Very Long Series Label With Over Twenty Characters"}, - {key: "A Very Long Series Label With Over Twenty Characters"}, - {key: "Cosine Wave"}, - {key: "Another test label"} - ]; - } + function sinAndCos() { + return [ + { key: "Sine Wave" }, + { key: "A Very Long Label With Over Twenty Characters" }, + { key: "A Very Long Series Label With Over Twenty Characters" }, + { key: "A Very Long Series Label With Over Twenty Characters" }, + { key: "Cosine Wave" }, + { key: "Another test label" } + ]; + } - function differentData() { - return [ - {key: "Fixed Income"}, - {key: "Derivatives"}, - {key: "Credit Default Swaps"}, - {key: "Equities"}, - {key: "Bonds"}, - {key: "Stocks"}, - {key: "Apple"} - ]; - } + function differentData() { + return [ + { key: "Fixed Income" }, + { key: "Derivatives" }, + { key: "Credit Default Swaps" }, + { key: "Equities" }, + { key: "Bonds" }, + { key: "Stocks" }, + { key: "Apple" } + ]; + } +} \ No newline at end of file diff --git a/nvd3/nvd3-test-line.ts b/nvd3/nvd3-test-line.ts new file mode 100644 index 000000000..b96bbfcb9 --- /dev/null +++ b/nvd3/nvd3-test-line.ts @@ -0,0 +1,71 @@ +/// +module nvd3_test_line { + nv.addGraph({ + generate: function () { + var width = nv.utils.windowSize().width - 40, + height = nv.utils.windowSize().height - 40; + + var chart = nv.models.line() + .width(width) + .height(height) + .margin({ top: 20, right: 20, bottom: 20, left: 20 }); + + chart.dispatch.on('renderEnd', function () { + console.log('render complete'); + }); + + d3.select('#test1') + .attr('width', width) + .attr('height', height) + .datum(sinAndCos()) + .call(chart); + + return chart; + }, + callback: function (graph) { + window.onresize = function () { + var width = nv.utils.windowSize().width - 40, + height = nv.utils.windowSize().height - 40, + margin = graph.margin(); + + if (width < margin.left + margin.right + 20) + width = margin.left + margin.right + 20; + + if (height < margin.top + margin.bottom + 20) + height = margin.top + margin.bottom + 20; + + graph.width(width).height(height); + + d3.select('#test1') + .attr('width', width) + .attr('height', height) + .call(graph); + }; + } + }); + + function sinAndCos() { + var sin = [], + cos = []; + + for (var i = 0; i < 100; i++) { + sin.push({ x: i, y: Math.sin(i / 10) }); + cos.push({ x: i, y: .5 * Math.cos(i / 10) }); + } + + return [ + { + values: sin, + key: "Sine Wave", + color: "#ff7f0e" + }, + { + values: cos, + key: "Cosine Wave", + color: "#2ca02c", + strokeWidth: 3 + } + ]; + } + +} \ No newline at end of file diff --git a/nvd3/nvd3-test-lineChart.ts b/nvd3/nvd3-test-lineChart.ts new file mode 100644 index 000000000..6591899ee --- /dev/null +++ b/nvd3/nvd3-test-lineChart.ts @@ -0,0 +1,103 @@ +/// +module nvd3_test_lineChart { + // Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required + var chart; + var data; + + var randomizeFillOpacity = function () { + var rand = Math.random(); + for (var i = 0; i < 100; i++) { // modify sine amplitude + data[4].values[i].y = Math.sin(i / (5 + rand)) * .4 * rand - .25; + } + data[4].fillOpacity = rand; + chart.update(); + }; + + nv.addGraph(function () { + chart = nv.models.lineChart() + .options({ + transitionDuration: 300, + useInteractiveGuideline: true + }) + ; + + // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately + chart.xAxis + .axisLabel("Time (s)") + .tickFormat(d3.format(',.1f')) + .staggerLabels(true) + ; + + chart.yAxis + .axisLabel('Voltage (v)') + .tickFormat(function (d) { + if (d == null) { + return 'N/A'; + } + return d3.format(',.2f')(d); + }) + ; + + data = sinAndCos(); + + d3.select('#chart1').append('svg') + .datum(data) + .call(chart); + + nv.utils.windowResize(chart.update); + + return chart; + }); + + function sinAndCos() { + var sin = [], + sin2 = [], + cos = [], + rand = [], + rand2 = [] + ; + + for (var i = 0; i < 100; i++) { + sin.push({ x: i, y: i % 10 == 5 ? null : Math.sin(i / 10) }); //the nulls are to show how defined works + sin2.push({ x: i, y: Math.sin(i / 5) * 0.4 - 0.25 }); + cos.push({ x: i, y: .5 * Math.cos(i / 10) }); + rand.push({ x: i, y: Math.random() / 10 }); + rand2.push({ x: i, y: Math.cos(i / 10) + Math.random() / 10 }) + } + + return [ + { + area: true, + values: sin, + key: "Sine Wave", + color: "#ff7f0e", + strokeWidth: 4, + classed: 'dashed' + }, + { + values: cos, + key: "Cosine Wave", + color: "#2ca02c" + }, + { + values: rand, + key: "Random Points", + color: "#2222ff" + }, + { + values: rand2, + key: "Random Cosine", + color: "#667711", + strokeWidth: 3.5 + }, + { + area: true, + values: sin2, + key: "Fill opacity", + color: "#EF9CFB", + fillOpacity: .1 + } + ]; + } + +} \ No newline at end of file diff --git a/nvd3/nvd3-test-lineChartLogScale.ts b/nvd3/nvd3-test-lineChartLogScale.ts new file mode 100644 index 000000000..bea43a5dc --- /dev/null +++ b/nvd3/nvd3-test-lineChartLogScale.ts @@ -0,0 +1,67 @@ +/// +module nvd3_test_lineChartLogScale { +var chart; + var data; + + + nv.addGraph(function () { + chart = nv.models.lineChart() + .x(function (d) { return d.x; }) + .options({ + showLegend: true, + showYAxis: true, + showXAxis: true, + useInteractiveGuideline: true + }); + + data = GenerateData(); + + chart.xAxis + .axisLabel("x axis") + .tickFormat(d3.format('0.2f')); + + chart.yScale(d3.scale.log()); + chart.yAxis + .axisLabel("Log axis") + .tickFormat(d3.format('.4e')); + + d3.select('#chart1').append('svg') + .datum(data) + .call(chart); + + nv.utils.windowResize(chart.update); + + return chart; + + }); + + function GenerateData() { + var sin = [], + sin2 = []; + + for (var i = 0; i < 100; i++) { + sin.push({ x: i, y: Math.abs(i % 10 == 5 ? null : Math.sin(i / 10)) }); //the nulls are to show how defined works + sin2.push({ x: i, y: Math.abs(Math.sin(i / 5) * 0.4 - 0.25) }); + + } + + return [ + { + area: true, + values: sin, + key: "l1", + color: "#ff7f0e", + strokeWidth: 4, + classed: 'dashed' + }, + { + values: sin2, + key: "l2", + color: "#2ca02c" + } + ]; + + } + + +} \ No newline at end of file diff --git a/nvd3/nvd3-test-lineChartSVGResize.ts b/nvd3/nvd3-test-lineChartSVGResize.ts new file mode 100644 index 000000000..3c6f7cd8d --- /dev/null +++ b/nvd3/nvd3-test-lineChartSVGResize.ts @@ -0,0 +1,108 @@ +/// +module nvd3_test_lineChartSVGResize { + nv.addGraph(function () { + var chart = nv.models.lineChart(); + var fitScreen = false; + var width = 600; + var height = 300; + var zoom = 1; + + chart.useInteractiveGuideline(true); + chart.xAxis + .tickFormat(d3.format(',r')); + + chart.lines.dispatch.on("elementClick", function (evt) { + console.log(evt); + }); + + chart.yAxis + .axisLabel('Voltage (v)') + .tickFormat(d3.format(',.2f')); + + d3.select('#chart1 svg') + .attr('perserveAspectRatio', 'xMinYMid') + .attr('width', width) + .attr('height', height) + .datum(sinAndCos()); + + setChartViewBox(); + resizeChart(); + + nv.utils.windowResize(resizeChart); + + d3.select('#zoomIn').on('click', zoomIn); + d3.select('#zoomOut').on('click', zoomOut); + + + function setChartViewBox() { + var w = width * zoom, + h = height * zoom; + + chart + .width(w) + .height(h); + + d3.select('#chart1 svg') + .attr('viewBox', '0 0 ' + w + ' ' + h) + .transition().duration(500) + .call(chart); + } + + function zoomOut() { + zoom += .25; + setChartViewBox(); + } + + function zoomIn() { + if (zoom <= .5) return; + zoom -= .25; + setChartViewBox(); + } + + // This resize simply sets the SVG's dimensions, without a need to recall the chart code + // Resizing because of the viewbox and perserveAspectRatio settings + // This scales the interior of the chart unlike the above + function resizeChart() { + var container = d3.select('#chart1'); + var svg = container.select('svg'); + + if (fitScreen) { + // resize based on container's width AND HEIGHT + var windowSize = nv.utils.windowSize(); + svg.attr("width", windowSize.width); + svg.attr("height", windowSize.height); + } else { + // resize based on container's width + var aspect = chart.width() / chart.height(); + var targetWidth = parseInt(container.style('width')); + svg.attr("width", targetWidth); + svg.attr("height", Math.round(targetWidth / aspect)); + } + } + return chart; + }); + + function sinAndCos() { + var sin = [], + cos = []; + + for (var i = 0; i < 100; i++) { + sin.push({ x: i, y: Math.sin(i / 10) }); + cos.push({ x: i, y: .5 * Math.cos(i / 10) }); + } + return [ + { + values: sin, + key: "Sine Wave", + color: "#ff7f0e" + }, + { + values: cos, + key: "Cosine Wave", + color: "#2ca02c" + } + ]; + } + + +} \ No newline at end of file diff --git a/nvd3/nvd3-test-linePlusBarChart.ts b/nvd3/nvd3-test-linePlusBarChart.ts new file mode 100644 index 000000000..1d7e71915 --- /dev/null +++ b/nvd3/nvd3-test-linePlusBarChart.ts @@ -0,0 +1,47 @@ +/// +module nvd3_test_linePlusBarChart { + var testdata = [ + { + "key": "Quantity", + "bar": true, + "values": [[1136005200000, 1271000.0], [1138683600000, 1271000.0], [1141102800000, 1271000.0], [1143781200000, 0], [1146369600000, 0], [1149048000000, 0], [1151640000000, 0], [1154318400000, 0], [1156996800000, 0], [1159588800000, 3899486.0], [1162270800000, 3899486.0], [1164862800000, 3899486.0], [1167541200000, 3564700.0], [1170219600000, 3564700.0], [1172638800000, 3564700.0], [1175313600000, 2648493.0], [1177905600000, 2648493.0], [1180584000000, 2648493.0], [1183176000000, 2522993.0], [1185854400000, 2522993.0], [1188532800000, 2522993.0], [1191124800000, 2906501.0], [1193803200000, 2906501.0], [1196398800000, 2906501.0], [1199077200000, 2206761.0], [1201755600000, 2206761.0], [1204261200000, 2206761.0], [1206936000000, 2287726.0], [1209528000000, 2287726.0], [1212206400000, 2287726.0], [1214798400000, 2732646.0], [1217476800000, 2732646.0], [1220155200000, 2732646.0], [1222747200000, 2599196.0], [1225425600000, 2599196.0], [1228021200000, 2599196.0], [1230699600000, 1924387.0], [1233378000000, 1924387.0], [1235797200000, 1924387.0], [1238472000000, 1756311.0], [1241064000000, 1756311.0], [1243742400000, 1756311.0], [1246334400000, 1743470.0], [1249012800000, 1743470.0], [1251691200000, 1743470.0], [1254283200000, 1519010.0], [1256961600000, 1519010.0], [1259557200000, 1519010.0], [1262235600000, 1591444.0], [1264914000000, 1591444.0], [1267333200000, 1591444.0], [1270008000000, 1543784.0], [1272600000000, 1543784.0], [1275278400000, 1543784.0], [1277870400000, 1309915.0], [1280548800000, 1309915.0], [1283227200000, 1309915.0], [1285819200000, 1331875.0], [1288497600000, 1331875.0], [1291093200000, 1331875.0], [1293771600000, 1331875.0], [1296450000000, 1154695.0], [1298869200000, 1154695.0], [1301544000000, 1194025.0], [1304136000000, 1194025.0], [1306814400000, 1194025.0], [1309406400000, 1194025.0], [1312084800000, 1194025.0], [1314763200000, 1244525.0], [1317355200000, 475000.0], [1320033600000, 475000.0], [1322629200000, 475000.0], [1325307600000, 690033.0], [1327986000000, 690033.0], [1330491600000, 690033.0], [1333166400000, 514733.0], [1335758400000, 514733.0]] + }, + { + "key": "Price", + "values": [[1136005200000, 71.89], [1138683600000, 75.51], [1141102800000, 68.49], [1143781200000, 62.72], [1146369600000, 70.39], [1149048000000, 59.77], [1151640000000, 57.27], [1154318400000, 67.96], [1156996800000, 67.85], [1159588800000, 76.98], [1162270800000, 81.08], [1164862800000, 91.66], [1167541200000, 84.84], [1170219600000, 85.73], [1172638800000, 84.61], [1175313600000, 92.91], [1177905600000, 99.8], [1180584000000, 121.191], [1183176000000, 122.04], [1185854400000, 131.76], [1188532800000, 138.48], [1191124800000, 153.47], [1193803200000, 189.95], [1196398800000, 182.22], [1199077200000, 198.08], [1201755600000, 135.36], [1204261200000, 125.02], [1206936000000, 143.5], [1209528000000, 173.95], [1212206400000, 188.75], [1214798400000, 167.44], [1217476800000, 158.95], [1220155200000, 169.53], [1222747200000, 113.66], [1225425600000, 107.59], [1228021200000, 92.67], [1230699600000, 85.35], [1233378000000, 90.13], [1235797200000, 89.31], [1238472000000, 105.12], [1241064000000, 125.83], [1243742400000, 135.81], [1246334400000, 142.43], [1249012800000, 163.39], [1251691200000, 168.21], [1254283200000, 185.35], [1256961600000, 188.5], [1259557200000, 199.91], [1262235600000, 210.732], [1264914000000, 192.063], [1267333200000, 204.62], [1270008000000, 235.0], [1272600000000, 261.09], [1275278400000, 256.88], [1277870400000, 251.53], [1280548800000, 257.25], [1283227200000, 243.1], [1285819200000, 283.75], [1288497600000, 300.98], [1291093200000, 311.15], [1293771600000, 322.56], [1296450000000, 339.32], [1298869200000, 353.21], [1301544000000, 348.5075], [1304136000000, 350.13], [1306814400000, 347.83], [1309406400000, 335.67], [1312084800000, 390.48], [1314763200000, 384.83], [1317355200000, 381.32], [1320033600000, 404.78], [1322629200000, 382.2], [1325307600000, 405.0], [1327986000000, 456.48], [1330491600000, 542.44], [1333166400000, 599.55], [1335758400000, 583.98]] + } + ].map(function (series) { + series.values = series.values.map(function (d) { return { x: d[0], y: d[1] } }); + return series; + }); + + var chart; + nv.addGraph(function () { + chart = nv.models.linePlusBarChart() + .margin({ top: 50, right: 80, bottom: 30, left: 80 }) + .legendRightAxisHint(' [Using Right Axis]') + .color(d3.scale.category10().range()); + + chart.xAxis.tickFormat(function (d) { + return d3.time.format('%x')(new Date(d)) + }) + .showMaxMin(false); + + chart.y1Axis.tickFormat(function (d) { return '$' + d3.format(',f')(d) }); + chart.bars.forceY([0]).padData(false); + + chart.x2Axis.tickFormat(function (d) { + return d3.time.format('%x')(new Date(d)) + }).showMaxMin(false); + + d3.select('#chart1 svg') + .datum(testdata) + .transition().duration(500).call(chart); + + nv.utils.windowResize(chart.update); + + chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); }); + + return chart; + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-lineWithFocusChart.ts b/nvd3/nvd3-test-lineWithFocusChart.ts new file mode 100644 index 000000000..5a0347647 --- /dev/null +++ b/nvd3/nvd3-test-lineWithFocusChart.ts @@ -0,0 +1,33 @@ +/// +module nvd3_test_lineWithFocusChart { + nv.addGraph(function () { + var chart = nv.models.lineWithFocusChart(); + + chart.brushExtent([50, 70]); + + chart.xAxis.tickFormat(d3.format(',f')).axisLabel("Stream - 3,128,.1"); + chart.x2Axis.tickFormat(d3.format(',f')); + chart.yAxis.tickFormat(d3.format(',.2f')); + chart.y2Axis.tickFormat(d3.format(',.2f')); + chart.useInteractiveGuideline(true); + + d3.select('#chart svg') + .datum(testData()) + .call(chart); + + nv.utils.windowResize(chart.update); + + return chart; + }); + + function testData() { + return [3, 128, .1].map(function (data, i) { + //todo resolve this return stream_layers(3, 128, .1).map(function (data, i) { + return { + key: 'Stream' + i, + area: i === 1, + values: data + }; + }); + } +} \ No newline at end of file diff --git a/nvd3/nvd3-test-lineWithFocusChartx2AxisLabel.ts b/nvd3/nvd3-test-lineWithFocusChartx2AxisLabel.ts new file mode 100644 index 000000000..16d79414c --- /dev/null +++ b/nvd3/nvd3-test-lineWithFocusChartx2AxisLabel.ts @@ -0,0 +1,36 @@ +/// +module nvd3_test_lineWithFocusChartx2AxisLabel { + + nv.addGraph(function () { + var chart = nv.models.lineWithFocusChart(); + + chart.brushExtent([50, 70]); + + chart.xAxis.tickFormat(d3.format(',f')); + chart.focusHeight(50 + 20); + chart.focusMargin({ "bottom": 20 + 20 }); + chart.x2Axis.tickFormat(d3.format(',f')).axisLabel("Stream - 3,128,.1"); + chart.yAxis.tickFormat(d3.format(',.2f')); + chart.y2Axis.tickFormat(d3.format(',.2f')); + chart.useInteractiveGuideline(true); + + d3.select('#chart svg') + .datum(testData()) + .call(chart); + + nv.utils.windowResize(chart.update); + + return chart; + }); + + function testData() { + return [3, 128, .1].map(function (data, i) { + // todo reolve stream_layers return stream_layers(3, 128, .1).map(function (data, i) { + return { + key: 'Stream' + i, + area: i === 1, + values: data + }; + }); + } +} \ No newline at end of file diff --git a/nvd3/nvd3-test-monitoringChart.ts b/nvd3/nvd3-test-monitoringChart.ts new file mode 100644 index 000000000..20e28da4f --- /dev/null +++ b/nvd3/nvd3-test-monitoringChart.ts @@ -0,0 +1,135 @@ +/// +module nvd3_test_monitoringChart { + + var testdata1 = [ + { key: "Updated", y: 0 }, + { key: "Pending", y: 100 } + ]; + + var arcRadius1 = [ + { inner: 0.6, outer: 1 }, + { inner: 0.65, outer: 0.95 } + ]; + + var colors = ["green", "gray"]; + + var testdata2 = [ + { key: "One", y: 1 }, + { key: "Two", y: 1 }, + { key: "Three", y: 1 }, + { key: "Four", y: 1 }, + { key: "Five", y: 1 }, + { key: "Six", y: 1 }, + { key: "Seven", y: 1 } + ]; + + var arcRadius2 = [ + { inner: 0.9, outer: 1 }, + { inner: 0.8, outer: 1 }, + { inner: 0.7, outer: 1 }, + { inner: 0.6, outer: 1 }, + { inner: 0.5, outer: 1 }, + { inner: 0.4, outer: 1 }, + { inner: 0.3, outer: 1 } + ]; + + var testdata3 = [ + { key: "Updated", y: 80 }, + { key: "Pending", y: 20 } + ]; + + var arcRadius3 = [ + { inner: 0, outer: 1 }, + { inner: 0, outer: 0.8 } + ]; + + var height = 350; + var width = 350; + + nv.addGraph(function () { + var chart = nv.models.pieChart() + .x(function (d) { return d.key }) + .y(function (d) { return d.y }) + .donut(true) + .showLabels(false) + .color(colors) + .width(width) + .height(height) + .growOnHover(false) + .arcsRadius(arcRadius1) + .id('donut1'); // allow custom CSS for this one svg + + chart.title("0%"); + + d3.select("#test1") + .datum(testdata1) + .transition().duration(1200) + .attr('width', width) + .attr('height', height) + .call(chart); + + // update chart data values randomly + setInterval(function () { + if (testdata1[0].y < 100) { + testdata1[0].y = testdata1[0].y + 1; + testdata1[1].y = testdata1[1].y - 1; + } + else { + testdata1[0].y = 0; + testdata1[1].y = 100; + } + chart.title(testdata1[0].y + "%"); + chart.update(); + }, 4000); + + return chart; + + }); + + nv.addGraph(function () { + var chart = nv.models.pieChart() + .x(function (d) { return d.key }) + .y(function (d) { return d.y }) + .donut(true) + .width(width) + .height(height) + .arcsRadius(arcRadius2) + .donutLabelsOutside(true) + .labelSunbeamLayout(true) + .id('donut2'); // allow custom CSS for this one svg + + d3.select("#test2") + .datum(testdata2) + .transition().duration(1200) + .attr('width', width) + .attr('height', height) + .call(chart); + + return chart; + + }); + + nv.addGraph(function () { + var chart = nv.models.pieChart() + .x(function (d) { return d.key }) + .y(function (d) { return d.y }) + .donut(true) + .showLabels(true) + .width(width) + .height(height) + .arcsRadius(arcRadius3) + .donutLabelsOutside(true) + .id('donut3'); // allow custom CSS for this one svg + + d3.select("#test3") + .datum(testdata3) + .transition().duration(1200) + .attr('width', width) + .attr('height', height) + .call(chart); + + return chart; + + }); + +} \ No newline at end of file diff --git a/nvd3/nvd3-test-multiChart.ts b/nvd3/nvd3-test-multiChart.ts new file mode 100644 index 000000000..7e30ff4ce --- /dev/null +++ b/nvd3/nvd3-test-multiChart.ts @@ -0,0 +1,53 @@ +/// +module nvd3_test_multiChart { + //todo resolve stream_layersIssue var testdata = stream_layers(9, 10 + Math.random() * 100, .1).map(function (data, i) { + // return { + // key: 'Stream' + i, + // values: data.map(function (a) { a.y = a.y * (i <= 1 ? -1 : 1); return a }) + // }; + //}); + + var testdata = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (data, i) { + return { + key: 'Stream' + i, + values: [1, 2], + type: '', + yAxis: 1 + }; + }); + + testdata[0].type = "area"; + testdata[0].yAxis = 1; + testdata[1].type = "area"; + testdata[1].yAxis = 1; + testdata[2].type = "line"; + testdata[2].yAxis = 1; + testdata[3].type = "line"; + testdata[3].yAxis = 2; + testdata[4].type = "scatter"; + testdata[4].yAxis = 1; + testdata[5].type = "scatter"; + testdata[5].yAxis = 2; + testdata[6].type = "bar"; + testdata[6].yAxis = 2; + testdata[7].type = "bar"; + testdata[7].yAxis = 2; + testdata[8].type = "bar"; + testdata[8].yAxis = 2; + + nv.addGraph(function () { + var chart = nv.models.multiChart() + .margin({ top: 30, right: 60, bottom: 50, left: 70 }) + .color(d3.scale.category10().range()); + + chart.xAxis.tickFormat(d3.format(',f')); + chart.yAxis1.tickFormat(d3.format(',.1f')); + chart.yAxis2.tickFormat(d3.format(',.1f')); + + d3.select('#chart1 svg') + .datum(testdata) + .transition().duration(500).call(chart); + + return chart; + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-multibarChart.ts b/nvd3/nvd3-test-multibarChart.ts new file mode 100644 index 000000000..c478d7e16 --- /dev/null +++ b/nvd3/nvd3-test-multibarChart.ts @@ -0,0 +1,69 @@ +/// +module nvd3_test_multibarChart { + //todo resolve stream_layers var test_data = stream_layers(3, 10 + Math.random() * 100, .1).map(function (data, i) { + var test_data = [3, 10 + Math.random() * 100, .1].map(function (data, i) { + return { + key: 'Stream' + i, + values: data + }; + }); + + console.log('td', test_data); + + var negative_test_data = d3.range(0, 3).map(function (d, i) { + return { + key: 'Stream' + i, + values: d3.range(0, 11).map(function (f, j) { + return { + y: 10 + Math.random() * 100 * (Math.floor(Math.random() * 100) % 2 ? 1 : -1), + x: j + } + }) + }; + }); + + var chart; + nv.addGraph(function () { + chart = nv.models.multiBarChart() + .barColor(d3.scale.category20().range()) + .duration(300) + .margin({ bottom: 100, left: 70 }) + .rotateLabels(45) + .groupSpacing(0.1) + ; + + chart.reduceXTicks(false).staggerLabels(true); + + chart.xAxis + .axisLabel("ID of Furry Cat Households") + .axisLabelDistance(35) + .showMaxMin(false) + .tickFormat(d3.format(',.6f')) + ; + + chart.yAxis + .axisLabel("Change in Furry Cat Population") + .axisLabelDistance(-5) + .tickFormat(d3.format(',.01f')) + ; + + chart.dispatch.on('renderEnd', function () { + nv.log('Render Complete'); + }); + + d3.select('#chart1 svg') + .datum(negative_test_data) + .call(chart); + + nv.utils.windowResize(chart.update); + + chart.dispatch.on('stateChange', function (e) { + nv.log('New State:', JSON.stringify(e)); + }); + chart.state.dispatch.on('change', function (state) { + nv.log('state', JSON.stringify(state)); + }); + + return chart; + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-multibarChart2.ts b/nvd3/nvd3-test-multibarChart2.ts new file mode 100644 index 000000000..4623514e9 --- /dev/null +++ b/nvd3/nvd3-test-multibarChart2.ts @@ -0,0 +1,47 @@ +/// +module nvd3_test_multibarChart2 { + //todo resolve stream_layers var test_data = stream_layers(3, 128, .1).map(function (data, i) { + var test_data = [3, 128, .1].map(function (data, i) { + return { + key: (i == 1) ? 'Non-stackable Stream' + i : 'Stream' + i, + nonStackable: (i == 1), + values: data + }; + }); + nv.addGraph({ + generate: function () { + var width = nv.utils.windowSize().width, + height = nv.utils.windowSize().height; + + var chart = nv.models.multiBarChart() + .width(width) + .height(height) + .stacked(true) + ; + + chart.dispatch.on('renderEnd', function () { + console.log('Render Complete'); + }); + + var svg = d3.select('#test1 svg').datum(test_data); + console.log('calling chart'); + svg.transition().duration(0).call(chart); + + return chart; + }, + callback: function (graph) { + nv.utils.windowResize(function () { + var width = nv.utils.windowSize().width; + var height = nv.utils.windowSize().height; + graph.width(width).height(height); + + d3.select('#test1 svg') + .attr('width', width) + .attr('height', height) + .transition().duration(0) + .call(graph); + + }); + } + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-multibarHorizontalChart.ts b/nvd3/nvd3-test-multibarHorizontalChart.ts new file mode 100644 index 000000000..61e6ee86d --- /dev/null +++ b/nvd3/nvd3-test-multibarHorizontalChart.ts @@ -0,0 +1,159 @@ +/// +module nvd3_test_multibarHorizontalChart { + var long_short_data = [ + { + key: 'Series1', + values: [ + { + "label": "Group A", + "value": -1.8746444827653 + }, + { + "label": "Group B", + "value": -8.0961543492239 + }, + { + "label": "Group C", + "value": -0.57072943117674 + }, + { + "label": "Group D", + "value": -2.4174010336624 + }, + { + "label": "Group E", + "value": -0.72009071426284 + }, + { + "label": "Group F", + "value": -2.77154485523777 + }, + { + "label": "Group G", + "value": -9.90152097798131 + }, + { + "label": "Group H", + "value": 14.91445417330854 + }, + { + "label": "Group I", + "value": -3.055746319141851 + } + ] + }, + { + key: 'Series2', + values: [ + { + "label": "Group A", + "value": 25.307646510375 + }, + { + "label": "Group B", + "value": 16.756779544553 + }, + { + "label": "Group C", + "value": 18.451534877007 + }, + { + "label": "Group D", + "value": 8.6142352811805 + }, + { + "label": "Group E", + "value": 7.8082472075876 + }, + { + "label": "Group F", + "value": 5.259101026956 + }, + { + "label": "Group G", + "value": 7.0947953487127 + }, + { + "label": "Group H", + "value": 8 + }, + { + "label": "Group I", + "value": 21 + } + ] + }, + { + key: 'Series3', + values: [ + { + "label": "Group A", + "value": -14.307646510375 + }, + { + "label": "Group B", + "value": 16.756779544553 + }, + { + "label": "Group C", + "value": -18.451534877007 + }, + { + "label": "Group D", + "value": 8.6142352811805 + }, + { + "label": "Group E", + "value": -7.8082472075876 + }, + { + "label": "Group F", + "value": 15.259101026956 + }, + { + "label": "Group G", + "value": -0.30947953487127 + }, + { + "label": "Group H", + "value": 0 + }, + { + "label": "Group I", + "value": 0 + } + ] + } + ]; + + + var chart; + nv.addGraph(function () { + chart = nv.models.multiBarHorizontalChart() + .x(function (d) { return d.label }) + .y(function (d) { return d.value }) + .yErr(function (d) { return [-Math.abs(d.value * Math.random() * 0.3), Math.abs(d.value * Math.random() * 0.3)] }) + .barColor(d3.scale.category20().range()) + .duration(250) + .margin({ left: 100 }) + .stacked(true); + + chart.yAxis.tickFormat(d3.format(',.2f')); + + chart.yAxis.axisLabel('Y Axis'); + chart.xAxis.axisLabel('X Axis').axisLabelDistance(20); + + d3.select('#chart1 svg') + .datum(long_short_data) + .call(chart); + + nv.utils.windowResize(chart.update); + + chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); }); + chart.state.dispatch.on('change', function (state) { + nv.log('state', JSON.stringify(state)); + }); + return chart; + }); + +} \ No newline at end of file diff --git a/nvd3/nvd3-test-ohlc.ts b/nvd3/nvd3-test-ohlc.ts new file mode 100644 index 000000000..efd069301 --- /dev/null +++ b/nvd3/nvd3-test-ohlc.ts @@ -0,0 +1,192 @@ +/// +/// +module nvd3_test_ohlc { + var data = [{ + values: [ + { "date": 15707, "open": 145.11, "high": 146.15, "low": 144.73, "close": 146.06, "volume": 192059000, "adjusted": 144.65 }, + { "date": 15708, "open": 145.99, "high": 146.37, "low": 145.34, "close": 145.73, "volume": 144761800, "adjusted": 144.32 }, + { "date": 15709, "open": 145.97, "high": 146.61, "low": 145.67, "close": 146.37, "volume": 116817700, "adjusted": 144.95 }, + { "date": 15712, "open": 145.85, "high": 146.11, "low": 145.43, "close": 145.97, "volume": 110002500, "adjusted": 144.56 }, + { "date": 15713, "open": 145.71, "high": 145.91, "low": 144.98, "close": 145.55, "volume": 121265100, "adjusted": 144.14 }, + { "date": 15714, "open": 145.87, "high": 146.32, "low": 145.64, "close": 145.92, "volume": 90745600, "adjusted": 144.51 }, + { "date": 15715, "open": 146.73, "high": 147.09, "low": 145.97, "close": 147.08, "volume": 130735400, "adjusted": 145.66 }, + { "date": 15716, "open": 147.04, "high": 147.15, "low": 146.61, "close": 147.07, "volume": 113917300, "adjusted": 145.65 }, + { "date": 15719, "open": 146.89, "high": 147.07, "low": 146.43, "close": 146.97, "volume": 89567200, "adjusted": 145.55 }, + { "date": 15720, "open": 146.29, "high": 147.21, "low": 146.2, "close": 147.07, "volume": 93172600, "adjusted": 145.65 }, + { "date": 15721, "open": 146.77, "high": 147.28, "low": 146.61, "close": 147.05, "volume": 104849500, "adjusted": 145.63 }, + { "date": 15722, "open": 147.7, "high": 148.42, "low": 147.15, "close": 148, "volume": 133833500, "adjusted": 146.57 }, + { "date": 15723, "open": 147.97, "high": 148.49, "low": 147.43, "close": 148.33, "volume": 169906000, "adjusted": 146.9 }, + { "date": 15727, "open": 148.33, "high": 149.13, "low": 147.98, "close": 149.13, "volume": 111797300, "adjusted": 147.69 }, + { "date": 15728, "open": 149.13, "high": 149.5, "low": 148.86, "close": 149.37, "volume": 104596100, "adjusted": 147.93 }, + { "date": 15729, "open": 149.15, "high": 150.14, "low": 149.01, "close": 149.41, "volume": 146426400, "adjusted": 147.97 }, + { "date": 15730, "open": 149.88, "high": 150.25, "low": 149.37, "close": 150.25, "volume": 147211600, "adjusted": 148.8 }, + { "date": 15733, "open": 150.29, "high": 150.33, "low": 149.51, "close": 150.07, "volume": 113357700, "adjusted": 148.62 }, + { "date": 15734, "open": 149.77, "high": 150.85, "low": 149.67, "close": 150.66, "volume": 105694400, "adjusted": 149.2 }, + { "date": 15735, "open": 150.64, "high": 150.94, "low": 149.93, "close": 150.07, "volume": 137447700, "adjusted": 148.62 }, + { "date": 15736, "open": 149.89, "high": 150.38, "low": 149.6, "close": 149.7, "volume": 108975800, "adjusted": 148.25 }, + { "date": 15737, "open": 150.65, "high": 151.42, "low": 150.39, "close": 151.24, "volume": 131173000, "adjusted": 149.78 }, + { "date": 15740, "open": 150.32, "high": 151.27, "low": 149.43, "close": 149.54, "volume": 159073600, "adjusted": 148.09 }, + { "date": 15741, "open": 150.35, "high": 151.48, "low": 150.29, "close": 151.05, "volume": 113912400, "adjusted": 149.59 }, + { "date": 15742, "open": 150.52, "high": 151.26, "low": 150.41, "close": 151.16, "volume": 138762800, "adjusted": 149.7 }, + { "date": 15743, "open": 151.21, "high": 151.35, "low": 149.86, "close": 150.96, "volume": 162490000, "adjusted": 149.5 }, + { "date": 15744, "open": 151.22, "high": 151.89, "low": 151.22, "close": 151.8, "volume": 103133700, "adjusted": 150.33 }, + { "date": 15747, "open": 151.74, "high": 151.9, "low": 151.39, "close": 151.77, "volume": 73775000, "adjusted": 150.3 }, + { "date": 15748, "open": 151.78, "high": 152.3, "low": 151.61, "close": 152.02, "volume": 65392700, "adjusted": 150.55 }, + { "date": 15749, "open": 152.33, "high": 152.61, "low": 151.72, "close": 152.15, "volume": 82322600, "adjusted": 150.68 }, + { "date": 15750, "open": 151.69, "high": 152.47, "low": 151.52, "close": 152.29, "volume": 80834300, "adjusted": 150.82 }, + { "date": 15751, "open": 152.43, "high": 152.59, "low": 151.55, "close": 152.11, "volume": 215226500, "adjusted": 150.64 }, + { "date": 15755, "open": 152.37, "high": 153.28, "low": 152.16, "close": 153.25, "volume": 95105400, "adjusted": 151.77 }, + { "date": 15756, "open": 153.14, "high": 153.19, "low": 151.26, "close": 151.34, "volume": 160574800, "adjusted": 149.88 }, + { "date": 15757, "open": 150.96, "high": 151.42, "low": 149.94, "close": 150.42, "volume": 183257000, "adjusted": 148.97 }, + { "date": 15758, "open": 151.15, "high": 151.89, "low": 150.49, "close": 151.89, "volume": 106356600, "adjusted": 150.42 }, + { "date": 15761, "open": 152.63, "high": 152.86, "low": 149, "close": 149, "volume": 245824800, "adjusted": 147.56 }, + { "date": 15762, "open": 149.72, "high": 150.2, "low": 148.73, "close": 150.02, "volume": 186596200, "adjusted": 148.57 }, + { "date": 15763, "open": 149.89, "high": 152.33, "low": 149.76, "close": 151.91, "volume": 150781900, "adjusted": 150.44 }, + { "date": 15764, "open": 151.9, "high": 152.87, "low": 151.41, "close": 151.61, "volume": 126866000, "adjusted": 150.14 }, + { "date": 15765, "open": 151.09, "high": 152.34, "low": 150.41, "close": 152.11, "volume": 170634800, "adjusted": 150.64 }, + { "date": 15768, "open": 151.76, "high": 152.92, "low": 151.52, "close": 152.92, "volume": 99010200, "adjusted": 151.44 }, + { "date": 15769, "open": 153.66, "high": 154.7, "low": 153.64, "close": 154.29, "volume": 121431900, "adjusted": 152.8 }, + { "date": 15770, "open": 154.84, "high": 154.92, "low": 154.16, "close": 154.5, "volume": 94469900, "adjusted": 153.01 }, + { "date": 15771, "open": 154.7, "high": 154.98, "low": 154.52, "close": 154.78, "volume": 86101400, "adjusted": 153.28 }, + { "date": 15772, "open": 155.46, "high": 155.65, "low": 154.66, "close": 155.44, "volume": 123477800, "adjusted": 153.94 }, + { "date": 15775, "open": 155.32, "high": 156.04, "low": 155.13, "close": 156.03, "volume": 83746800, "adjusted": 154.52 }, + { "date": 15776, "open": 155.92, "high": 156.1, "low": 155.21, "close": 155.68, "volume": 105755800, "adjusted": 154.17 }, + { "date": 15777, "open": 155.76, "high": 156.12, "low": 155.23, "close": 155.9, "volume": 92550900, "adjusted": 154.39 }, + { "date": 15778, "open": 156.31, "high": 156.8, "low": 155.91, "close": 156.73, "volume": 126329900, "adjusted": 155.21 }, + { "date": 15779, "open": 155.85, "high": 156.04, "low": 155.31, "close": 155.83, "volume": 138601100, "adjusted": 155.01 }, + { "date": 15782, "open": 154.34, "high": 155.64, "low": 154.2, "close": 154.97, "volume": 126704300, "adjusted": 154.15 }, + { "date": 15783, "open": 155.3, "high": 155.51, "low": 153.59, "close": 154.61, "volume": 167567300, "adjusted": 153.8 }, + { "date": 15784, "open": 155.52, "high": 155.95, "low": 155.26, "close": 155.69, "volume": 113759300, "adjusted": 154.87 }, + { "date": 15785, "open": 154.76, "high": 155.64, "low": 154.1, "close": 154.36, "volume": 128605000, "adjusted": 153.55 }, + { "date": 15786, "open": 154.85, "high": 155.6, "low": 154.73, "close": 155.6, "volume": 111163600, "adjusted": 154.78 }, + { "date": 15789, "open": 156.01, "high": 156.27, "low": 154.35, "close": 154.95, "volume": 151322300, "adjusted": 154.13 }, + { "date": 15790, "open": 155.59, "high": 156.23, "low": 155.42, "close": 156.19, "volume": 86856600, "adjusted": 155.37 }, + { "date": 15791, "open": 155.26, "high": 156.24, "low": 155, "close": 156.19, "volume": 99950600, "adjusted": 155.37 }, + { "date": 15792, "open": 156.09, "high": 156.85, "low": 155.75, "close": 156.67, "volume": 102932800, "adjusted": 155.85 }, + { "date": 15796, "open": 156.59, "high": 156.91, "low": 155.67, "close": 156.05, "volume": 99194100, "adjusted": 155.23 }, + { "date": 15797, "open": 156.61, "high": 157.21, "low": 156.37, "close": 156.82, "volume": 101504300, "adjusted": 155.99 }, + { "date": 15798, "open": 156.91, "high": 157.03, "low": 154.82, "close": 155.23, "volume": 154167400, "adjusted": 154.41 }, + { "date": 15799, "open": 155.43, "high": 156.17, "low": 155.09, "close": 155.86, "volume": 131885000, "adjusted": 155.04 }, + { "date": 15800, "open": 153.95, "high": 155.35, "low": 153.77, "close": 155.16, "volume": 159666000, "adjusted": 154.34 }, + { "date": 15803, "open": 155.27, "high": 156.22, "low": 154.75, "close": 156.21, "volume": 86571200, "adjusted": 155.39 }, + { "date": 15804, "open": 156.5, "high": 157.32, "low": 155.98, "close": 156.75, "volume": 101922200, "adjusted": 155.92 }, + { "date": 15805, "open": 157.17, "high": 158.87, "low": 157.13, "close": 158.67, "volume": 135711100, "adjusted": 157.83 }, + { "date": 15806, "open": 158.7, "high": 159.71, "low": 158.54, "close": 159.19, "volume": 110142500, "adjusted": 158.35 }, + { "date": 15807, "open": 158.68, "high": 159.04, "low": 157.92, "close": 158.8, "volume": 116359900, "adjusted": 157.96 }, + { "date": 15810, "open": 158, "high": 158.13, "low": 155.1, "close": 155.12, "volume": 217259000, "adjusted": 154.3 }, + { "date": 15811, "open": 156.29, "high": 157.49, "low": 155.91, "close": 157.41, "volume": 147507800, "adjusted": 156.58 }, + { "date": 15812, "open": 156.29, "high": 156.32, "low": 154.28, "close": 155.11, "volume": 226834800, "adjusted": 154.29 }, + { "date": 15813, "open": 155.37, "high": 155.41, "low": 153.55, "close": 154.14, "volume": 167583200, "adjusted": 153.33 }, + { "date": 15814, "open": 154.5, "high": 155.55, "low": 154.12, "close": 155.48, "volume": 149687600, "adjusted": 154.66 }, + { "date": 15817, "open": 155.78, "high": 156.54, "low": 154.75, "close": 156.17, "volume": 106553500, "adjusted": 155.35 }, + { "date": 15818, "open": 156.95, "high": 157.93, "low": 156.17, "close": 157.78, "volume": 166141300, "adjusted": 156.95 }, + { "date": 15819, "open": 157.83, "high": 158.3, "low": 157.54, "close": 157.88, "volume": 96781200, "adjusted": 157.05 }, + { "date": 15820, "open": 158.34, "high": 159.27, "low": 158.1, "close": 158.52, "volume": 131060600, "adjusted": 157.69 }, + { "date": 15821, "open": 158.33, "high": 158.6, "low": 157.73, "close": 158.24, "volume": 95918800, "adjusted": 157.41 }, + { "date": 15824, "open": 158.67, "high": 159.65, "low": 158.42, "close": 159.3, "volume": 88572800, "adjusted": 158.46 }, + { "date": 15825, "open": 159.27, "high": 159.72, "low": 158.61, "close": 159.68, "volume": 116010700, "adjusted": 158.84 }, + { "date": 15826, "open": 159.33, "high": 159.41, "low": 158.1, "close": 158.28, "volume": 138874200, "adjusted": 157.45 }, + { "date": 15827, "open": 158.68, "high": 159.89, "low": 158.53, "close": 159.75, "volume": 96407600, "adjusted": 158.91 }, + { "date": 15828, "open": 161.14, "high": 161.88, "low": 159.78, "close": 161.37, "volume": 144202300, "adjusted": 160.52 }, + { "date": 15831, "open": 161.49, "high": 162.01, "low": 161.42, "close": 161.78, "volume": 66882100, "adjusted": 160.93 }, + { "date": 15832, "open": 162.13, "high": 162.65, "low": 161.67, "close": 162.6, "volume": 90359200, "adjusted": 161.74 }, + { "date": 15833, "open": 162.42, "high": 163.39, "low": 162.33, "close": 163.34, "volume": 97419200, "adjusted": 162.48 }, + { "date": 15834, "open": 163.27, "high": 163.7, "low": 162.47, "close": 162.88, "volume": 106738600, "adjusted": 162.02 }, + { "date": 15835, "open": 162.99, "high": 163.55, "low": 162.51, "close": 163.41, "volume": 103203000, "adjusted": 162.55 }, + { "date": 15838, "open": 163.2, "high": 163.81, "low": 162.82, "close": 163.54, "volume": 81843200, "adjusted": 162.68 }, + { "date": 15839, "open": 163.67, "high": 165.35, "low": 163.67, "close": 165.23, "volume": 119000900, "adjusted": 164.36 }, + { "date": 15840, "open": 164.96, "high": 166.45, "low": 164.91, "close": 166.12, "volume": 120718500, "adjusted": 165.25 }, + { "date": 15841, "open": 165.78, "high": 166.36, "low": 165.09, "close": 165.34, "volume": 109913600, "adjusted": 164.47 }, + { "date": 15842, "open": 165.95, "high": 167.04, "low": 165.73, "close": 166.94, "volume": 129801000, "adjusted": 166.06 }, + { "date": 15845, "open": 166.78, "high": 167.58, "low": 166.61, "close": 166.93, "volume": 85071200, "adjusted": 166.05 }, + { "date": 15846, "open": 167.08, "high": 167.8, "low": 166.5, "close": 167.17, "volume": 95804200, "adjusted": 166.29 }, + { "date": 15847, "open": 167.34, "high": 169.07, "low": 165.17, "close": 165.93, "volume": 244031800, "adjusted": 165.06 }, + { "date": 15848, "open": 164.16, "high": 165.91, "low": 163.94, "close": 165.45, "volume": 211064400, "adjusted": 164.58 }, + { "date": 15849, "open": 164.47, "high": 165.38, "low": 163.98, "close": 165.31, "volume": 151573900, "adjusted": 164.44 }, + { "date": 15853, "open": 167.04, "high": 167.78, "low": 165.81, "close": 166.3, "volume": 143679800, "adjusted": 165.42 }, + { "date": 15854, "open": 165.42, "high": 165.8, "low": 164.34, "close": 165.22, "volume": 160363400, "adjusted": 164.35 }, + { "date": 15855, "open": 165.35, "high": 166.59, "low": 165.22, "close": 165.83, "volume": 107793800, "adjusted": 164.96 }, + { "date": 15856, "open": 165.37, "high": 166.31, "low": 163.13, "close": 163.45, "volume": 176850100, "adjusted": 162.59 }, + { "date": 15859, "open": 163.83, "high": 164.46, "low": 162.66, "close": 164.35, "volume": 168390700, "adjusted": 163.48 }, + { "date": 15860, "open": 164.44, "high": 165.1, "low": 162.73, "close": 163.56, "volume": 157631500, "adjusted": 162.7 }, + { "date": 15861, "open": 163.09, "high": 163.42, "low": 161.13, "close": 161.27, "volume": 211737800, "adjusted": 160.42 }, + { "date": 15862, "open": 161.2, "high": 162.74, "low": 160.25, "close": 162.73, "volume": 200225500, "adjusted": 161.87 }, + { "date": 15863, "open": 163.85, "high": 164.95, "low": 163.14, "close": 164.8, "volume": 188337800, "adjusted": 163.93 }, + { "date": 15866, "open": 165.31, "high": 165.4, "low": 164.37, "close": 164.8, "volume": 105667100, "adjusted": 163.93 }, + { "date": 15867, "open": 163.3, "high": 164.54, "low": 162.74, "close": 163.1, "volume": 159505400, "adjusted": 162.24 }, + { "date": 15868, "open": 164.22, "high": 164.39, "low": 161.6, "close": 161.75, "volume": 177361500, "adjusted": 160.9 }, + { "date": 15869, "open": 161.66, "high": 164.5, "low": 161.3, "close": 164.21, "volume": 163587800, "adjusted": 163.35 }, + { "date": 15870, "open": 164.03, "high": 164.67, "low": 162.91, "close": 163.18, "volume": 141197500, "adjusted": 162.32 }, + { "date": 15873, "open": 164.29, "high": 165.22, "low": 163.22, "close": 164.44, "volume": 136295600, "adjusted": 163.57 }, + { "date": 15874, "open": 164.53, "high": 165.99, "low": 164.52, "close": 165.74, "volume": 114695600, "adjusted": 164.87 }, + { "date": 15875, "open": 165.6, "high": 165.89, "low": 163.38, "close": 163.45, "volume": 206149500, "adjusted": 162.59 }, + { "date": 15876, "open": 161.86, "high": 163.47, "low": 158.98, "close": 159.4, "volume": 321255900, "adjusted": 158.56 }, + { "date": 15877, "open": 159.64, "high": 159.76, "low": 157.47, "close": 159.07, "volume": 271956800, "adjusted": 159.07 }, + { "date": 15880, "open": 157.41, "high": 158.43, "low": 155.73, "close": 157.06, "volume": 222329000, "adjusted": 157.06 }, + { "date": 15881, "open": 158.48, "high": 160.1, "low": 157.42, "close": 158.57, "volume": 162262200, "adjusted": 158.57 }, + { "date": 15882, "open": 159.87, "high": 160.5, "low": 159.25, "close": 160.14, "volume": 134848000, "adjusted": 160.14 }, + { "date": 15883, "open": 161.1, "high": 161.82, "low": 160.95, "close": 161.08, "volume": 129483700, "adjusted": 161.08 }, + { "date": 15884, "open": 160.63, "high": 161.4, "low": 159.86, "close": 160.42, "volume": 160402900, "adjusted": 160.42 }, + { "date": 15887, "open": 161.26, "high": 162.48, "low": 161.08, "close": 161.36, "volume": 131954800, "adjusted": 161.36 }, + { "date": 15888, "open": 161.12, "high": 162.3, "low": 160.5, "close": 161.21, "volume": 154863700, "adjusted": 161.21 }, + { "date": 15889, "open": 160.48, "high": 161.77, "low": 160.22, "close": 161.28, "volume": 75216400, "adjusted": 161.28 }, + { "date": 15891, "open": 162.47, "high": 163.08, "low": 161.3, "close": 163.02, "volume": 122416900, "adjusted": 163.02 }, + { "date": 15894, "open": 163.86, "high": 164.39, "low": 163.08, "close": 163.95, "volume": 108092500, "adjusted": 163.95 }, + { "date": 15895, "open": 164.98, "high": 165.33, "low": 164.27, "close": 165.13, "volume": 119298000, "adjusted": 165.13 }, + { "date": 15896, "open": 164.97, "high": 165.75, "low": 164.63, "close": 165.19, "volume": 121410100, "adjusted": 165.19 }, + { "date": 15897, "open": 167.11, "high": 167.61, "low": 165.18, "close": 167.44, "volume": 135592200, "adjusted": 167.44 }, + { "date": 15898, "open": 167.39, "high": 167.93, "low": 167.13, "close": 167.51, "volume": 104212700, "adjusted": 167.51 }, + { "date": 15901, "open": 167.97, "high": 168.39, "low": 167.68, "close": 168.15, "volume": 69450600, "adjusted": 168.15 }, + { "date": 15902, "open": 168.26, "high": 168.36, "low": 167.07, "close": 167.52, "volume": 88702100, "adjusted": 167.52 }, + { "date": 15903, "open": 168.16, "high": 168.48, "low": 167.73, "close": 167.95, "volume": 92873900, "adjusted": 167.95 }, + { "date": 15904, "open": 168.31, "high": 169.27, "low": 168.2, "close": 168.87, "volume": 103620100, "adjusted": 168.87 }, + { "date": 15905, "open": 168.52, "high": 169.23, "low": 168.31, "close": 169.17, "volume": 103831700, "adjusted": 169.17 }, + { "date": 15908, "open": 169.41, "high": 169.74, "low": 169.01, "close": 169.5, "volume": 79428600, "adjusted": 169.5 }, + { "date": 15909, "open": 169.8, "high": 169.83, "low": 169.05, "close": 169.14, "volume": 80829700, "adjusted": 169.14 }, + { "date": 15910, "open": 169.79, "high": 169.86, "low": 168.18, "close": 168.52, "volume": 112914000, "adjusted": 168.52 }, + { "date": 15911, "open": 168.22, "high": 169.08, "low": 167.94, "close": 168.93, "volume": 111088600, "adjusted": 168.93 }, + { "date": 15912, "open": 168.22, "high": 169.16, "low": 167.52, "close": 169.11, "volume": 107814600, "adjusted": 169.11 }, + { "date": 15915, "open": 168.68, "high": 169.06, "low": 168.11, "close": 168.59, "volume": 79695000, "adjusted": 168.59 }, + { "date": 15916, "open": 169.1, "high": 169.28, "low": 168.19, "close": 168.59, "volume": 85209600, "adjusted": 168.59 }, + { "date": 15917, "open": 168.94, "high": 169.85, "low": 168.49, "close": 168.71, "volume": 142388700, "adjusted": 168.71 }, + { "date": 15918, "open": 169.99, "high": 170.81, "low": 169.9, "close": 170.66, "volume": 110438400, "adjusted": 170.66 }, + { "date": 15919, "open": 170.28, "high": 170.97, "low": 170.05, "close": 170.95, "volume": 91116700, "adjusted": 170.95 }, + { "date": 15922, "open": 170.57, "high": 170.96, "low": 170.35, "close": 170.7, "volume": 54072700, "adjusted": 170.7 }, + { "date": 15923, "open": 170.37, "high": 170.74, "low": 169.35, "close": 169.73, "volume": 87495000, "adjusted": 169.73 }, + { "date": 15924, "open": 169.19, "high": 169.43, "low": 168.55, "close": 169.18, "volume": 84854700, "adjusted": 169.18 }, + { "date": 15925, "open": 169.98, "high": 170.18, "low": 168.93, "close": 169.8, "volume": 102181300, "adjusted": 169.8 }, + { "date": 15926, "open": 169.58, "high": 170.1, "low": 168.72, "close": 169.31, "volume": 91757700, "adjusted": 169.31 }, + { "date": 15929, "open": 168.46, "high": 169.31, "low": 168.38, "close": 169.11, "volume": 68593300, "adjusted": 169.11 }, + { "date": 15930, "open": 169.41, "high": 169.9, "low": 168.41, "close": 169.61, "volume": 80806000, "adjusted": 169.61 }, + { "date": 15931, "open": 169.53, "high": 169.8, "low": 168.7, "close": 168.74, "volume": 79829200, "adjusted": 168.74 }, + { "date": 15932, "open": 167.41, "high": 167.43, "low": 166.09, "close": 166.38, "volume": 152931800, "adjusted": 166.38 }, + { "date": 15933, "open": 166.06, "high": 166.63, "low": 165.5, "close": 165.83, "volume": 130868200, "adjusted": 165.83 }, + { "date": 15936, "open": 165.64, "high": 166.21, "low": 164.76, "close": 164.77, "volume": 96437600, "adjusted": 164.77 }, + { "date": 15937, "open": 165.04, "high": 166.2, "low": 164.86, "close": 165.58, "volume": 89294400, "adjusted": 165.58 }, + { "date": 15938, "open": 165.12, "high": 166.03, "low": 164.19, "close": 164.56, "volume": 159530500, "adjusted": 164.56 }, + { "date": 15939, "open": 164.9, "high": 166.3, "low": 164.89, "close": 166.06, "volume": 101471400, "adjusted": 166.06 }, + { "date": 15940, "open": 166.55, "high": 166.83, "low": 165.77, "close": 166.62, "volume": 90888900, "adjusted": 166.62 }, + { "date": 15943, "open": 166.79, "high": 167.3, "low": 165.89, "close": 166, "volume": 89702100, "adjusted": 166 }, + { "date": 15944, "open": 164.36, "high": 166, "low": 163.21, "close": 163.33, "volume": 158619400, "adjusted": 163.33 }, + { "date": 15945, "open": 163.26, "high": 164.49, "low": 163.05, "close": 163.91, "volume": 108113000, "adjusted": 163.91 }, + { "date": 15946, "open": 163.55, "high": 165.04, "low": 163.4, "close": 164.17, "volume": 119200500, "adjusted": 164.17 }, + { "date": 15947, "open": 164.51, "high": 164.53, "low": 163.17, "close": 163.65, "volume": 134560800, "adjusted": 163.65 }, + { "date": 15951, "open": 165.23, "high": 165.58, "low": 163.7, "close": 164.39, "volume": 142322300, "adjusted": 164.39 }, + { "date": 15952, "open": 164.43, "high": 166.03, "low": 164.13, "close": 165.75, "volume": 97304000, "adjusted": 165.75 }, + { "date": 15953, "open": 165.85, "high": 166.4, "low": 165.73, "close": 165.96, "volume": 62930500, "adjusted": 165.96 } + ] + }]; + + nv.addGraph(function () { + var chart = nv.models.ohlcBar() + .x(function (d) { return d['date'] }) + .y(function (d) { return d['close'] }); + d3.select("#chart1 svg") + .datum(data) + .transition().duration(500) + .call(chart); + + nv.utils.windowResize(chart.update); + return chart; + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-ohlcChart.ts b/nvd3/nvd3-test-ohlcChart.ts index b62027f63..b9d5d3560 100644 --- a/nvd3/nvd3-test-ohlcChart.ts +++ b/nvd3/nvd3-test-ohlcChart.ts @@ -1,36 +1,40 @@ /// /// -var data = [{values: [ - {"date": 15707, "open": 145.11, "high": 146.15, "low": 144.73, "close": 146.06, "volume": 192059000, "adjusted": 144.65}, - {"date": 15953, "open": 165.85, "high": 166.4, "low": 165.73, "close": 165.96, "volume": 62930500, "adjusted": 165.96} - ]}]; - -nv.addGraph(function() { - var chart = nv.models.ohlcBarChart() - .x(function(d) { return d['date'] }) - .y(function(d) { return d['close'] }) - .duration(250) - .margin({left: 75, bottom: 50}); +module nvd3_test_ohlcChart { + var data = [{ + values: [ + { "date": 15707, "open": 145.11, "high": 146.15, "low": 144.73, "close": 146.06, "volume": 192059000, "adjusted": 144.65 }, + { "date": 15953, "open": 165.85, "high": 166.4, "low": 165.73, "close": 165.96, "volume": 62930500, "adjusted": 165.96 } + ] + }]; - // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately - chart.xAxis - .axisLabel("Dates") - .tickFormat(function(d) { - // I didn't feel like changing all the above date values - // so I hack it to make each value fall on a different date - return d3.time.format('%x')(new Date(new Date().valueOf() - (20000 * 86400000) + (d * 86400000))); - }); + nv.addGraph(function () { + var chart = nv.models.ohlcBarChart() + .x(function (d) { return d['date'] }) + .y(function (d) { return d['close'] }) + .duration(250) + .margin({ left: 75, bottom: 50 }); - chart.yAxis - .axisLabel('Stock Price') - .tickFormat(function(d,i){ return '$' + d3.format(',.1f')(d); }); + // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately + chart.xAxis + .axisLabel("Dates") + .tickFormat(function (d) { + // I didn't feel like changing all the above date values + // so I hack it to make each value fall on a different date + return d3.time.format('%x')(new Date(new Date().valueOf() - (20000 * 86400000) + (d * 86400000))); + }); + + chart.yAxis + .axisLabel('Stock Price') + .tickFormat(function (d, i) { return '$' + d3.format(',.1f')(d); }); - d3.select("#chart1 svg") - .datum(data) - .transition().duration(500) - .call(chart); - nv.utils.windowResize(chart.update); - return chart; -}); \ No newline at end of file + d3.select("#chart1 svg") + .datum(data) + .transition().duration(500) + .call(chart); + nv.utils.windowResize(chart.update); + return chart; + }); +} \ No newline at end of file diff --git a/nvd3/nvd3-test-parallelCoordinates.ts b/nvd3/nvd3-test-parallelCoordinates.ts new file mode 100644 index 000000000..37d74a94b --- /dev/null +++ b/nvd3/nvd3-test-parallelCoordinates.ts @@ -0,0 +1,47 @@ +/// +/// +module nvd3_test_parallelCoordinates { + var chart; + nv.addGraph(function () { + + chart = nv.models.parallelCoordinates() + .dimensionNames(["economy (mpg)", "cylinders", "displacement (cc)", "power (hp)", "weight (lb)", "0-60 mph (s)", "year"]) + .dimensionFormats(["0.5f", "e", "g", "d", "", "%", "p"]) + .lineTension(0.85); + + + d3.select('#chart1 svg') + .datum(data()) + .call(chart); + + nv.utils.windowResize(chart.update); + + return chart; + }); + + function data() { + return [ + { + "name": "AMC Ambassador Brougham", + "economy (mpg)": "13", + "cylinders": "8", + "displacement (cc)": "360", + "power (hp)": "175", + "weight (lb)": "3821", + "0-60 mph (s)": "11", + "year": "73" + }, +//skip to the end... + { + "name": "Volvo Diesel", + "economy (mpg)": "30.7", + "cylinders": "6", + "displacement (cc)": "145", + "power (hp)": "76", + "weight (lb)": "3160", + "0-60 mph (s)": "19.6", + "year": "81" + } + ] + } +} \ No newline at end of file diff --git a/nvd3/nvd3-test-parallelCoordinatesChart.ts b/nvd3/nvd3-test-parallelCoordinatesChart.ts new file mode 100644 index 000000000..842caca6a --- /dev/null +++ b/nvd3/nvd3-test-parallelCoordinatesChart.ts @@ -0,0 +1,186 @@ +/// +/// +module nvd3_test_parallelCoordinatesChart { + var chart; + function resetBrush() { + chart.filters([]); + chart.active([]); + chart.displayBrush(true); + d3.select("#resetBrushButton").style("visibility", "hidden"); + chart.update(); + } + + function resetSorting() { + var dim = chart.dimensionData(); + dim.map(function (d) { return d.currentPosition = d.originalPosition; }); + dim.sort(function (a, b) { return a.originalPosition - b.originalPosition; }); + chart.dimensionData(dim); + d3.select("#resetSortingButton").style("visibility", "hidden"); + chart.update(); + } + + nv.addGraph(function () { + + var dim = dimensions(); + chart = nv.models.parallelCoordinatesChart() + .dimensionData(dim) + .displayBrush(false) + .lineTension(0.85); + + var data = mydata(); + d3.select('#test') + .datum(data) + .call(chart); + + nv.utils.windowResize(chart.update); + + chart.dispatch.on('brushEnd', function (e) { + d3.select("#resetBrushButton").style("visibility", "visible"); + }); + + chart.dispatch.on('dimensionsOrder', function (e, b) { + if (b) { + d3.select("#resetSortingButton").style("visibility", "visible"); + } + }); + + // update chart data values randomly + setInterval(function () { + data[0].values.P1 = Math.floor(Math.random() * 100).toString(); + chart.update(); + }, 4000); + + // update chart data dimension randomly + setInterval(function () { + var element = { + key: "P7", + format: "p", + tooltip: "year", + } + if (dim.length === 7) { + dim.splice(dim.indexOf(element), 1); + } else { + dim.push(element); + } + chart.dimensionData(dim); + chart.update(); + }, 10000); + + return chart; + }); + + function dimensions() { + return [ + { + key: "P1", + format: "0.5f", + tooltip: "economy (mpg)", + }, + { + key: "P2", + format: "e", + tooltip: "cylinders", + }, + { + key: "P3", + format: "g", + tooltip: "displacement (cc)", + }, + { + key: "P4", + format: "d", + tooltip: "power (hp)", + }, + { + key: "P5", + format: "", + tooltip: "weight (lb)", + }, + { + key: "P6", + format: "%", + tooltip: "0-60 mph (s)", + }, + { + key: "P7", + format: "p", + tooltip: "year", + } + ]; + } + + function mydata() { + return [ + { + name: "Current design point", + values: { + "P1": "13", + "P2": "8", + "P3": "360", + "P4": "175", + "P5": "3821", + "P6": "11", + "P7": "73" + }, + color: "red", + strokeWidth: 2 + }, + { + name: "DP1", + values: { + "P1": "15", + "P2": "8", + "P3": "390", + "P4": "190", + "P5": "3850", + "P6": "8.5", + "P7": "70" + }, + color: "blue", + strokeWidth: 1 + }, + { + name: "DP2", + values: { + "P1": "17", + "P2": "8", + "P3": "304", + "P4": "150", + "P5": "3672", + "P6": "11.5", + "P7": "72" + }, + color: "blue", + strokeWidth: 2 + }, + { + name: "DP3", + values: { + "P1": "20.2", + "P2": "6", + "P3": "232", + "P4": "", + "P5": "3265", + "P6": "18.2", + "P7": "79" + }, + color: "blue", + strokeWidth: 1 + }, + { + name: "DP4", + values: { + "P1": "18.1", + "P2": "6", + "P3": "258", + "P4": "120", + "P5": "3410", + "P6": "15.1", + "P7": "78" + }, + color: "blue", + strokeWidth: 1 + } + ]; + } +} \ No newline at end of file diff --git a/nvd3/nvd3-test-scatter.ts b/nvd3/nvd3-test-scatter.ts new file mode 100644 index 000000000..d8ffe959d --- /dev/null +++ b/nvd3/nvd3-test-scatter.ts @@ -0,0 +1,35 @@ +/// +module nvd3_test_scatter { + nv.addGraph(function () { + + var chart = nv.models.scatter() + .margin({ top: 20, right: 20, bottom: 20, left: 20 }) + .pointSize(function (d) { return d.z }) + .useVoronoi(false); + + d3.select('#test1') + .datum(randomData()) + .transition().duration(500) + .call(chart); + + nv.utils.windowResize(chart.update); + return chart; + }); + + function randomData() { + var data = []; + + for (var i = 0; i < 2; i++) { + data.push({ + key: 'Group ' + i, + values: [] + }); + + for (var j = 0; j < 100; j++) { + data[i].values.push({ x: Math.random(), y: Math.random(), z: Math.random() }); + } + } + + return data; + } +} \ No newline at end of file diff --git a/nvd3/nvd3-test-tooltip.ts b/nvd3/nvd3-test-tooltip.ts index ee45f9ea7..24a090922 100644 --- a/nvd3/nvd3-test-tooltip.ts +++ b/nvd3/nvd3-test-tooltip.ts @@ -1,55 +1,59 @@ /// /// -var width = 500, - height = 20; +module nvd3_test_tooltip { + var width = 500, + height = 20; - var tooltip = nv.models.tooltip(); - tooltip.duration(0); + var tooltip = nv.models.tooltip(); + tooltip.duration(0); - d3.select('.tooltip_me') - .on('mouseover', function(d,i) { - console.log("mouseover", d, i); - var data = {series: { - key: "title", - value: "the value", - color: "#229922" - }}; - tooltip.data(data).hidden(false); - }) - .on('mouseout', function(d,i) { - console.log("mouseout", d, i); - tooltip.hidden(true); - }) - .on('mousemove', function(d,i) { - console.log("mousemove", d, i); - tooltip.position({top: d3.event.pageY, left: d3.event.pageX})(); - }); + d3.select('.tooltip_me') + .on('mouseover', function (d, i) { + console.log("mouseover", d, i); + var data = { + series: { + key: "title", + value: "the value", + color: "#229922" + } + }; + tooltip.data(data).hidden(false); + }) + .on('mouseout', function (d, i) { + console.log("mouseout", d, i); + tooltip.hidden(true); + }) + .on('mousemove', function (d, i) { + console.log("mousemove", d, i); + //tooltip.position({ top: d3.event.pageY, left: d3.event.pageX })(); todo pageY and X not found on d3 definition + }); - // we must also test the scatter/line way of getting position - // Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required - var chart; - nv.addGraph(function() { - chart = nv.models.lineChart() - .showXAxis(false) - .showLegend(false) - .clipVoronoi(false) - .showVoronoi(true) - .showYAxis(false); - d3.select('#test2') - .datum(sinAndCos()) - .call(chart); - return chart; - }); + // we must also test the scatter/line way of getting position + // Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required + var chart; + nv.addGraph(function () { + chart = nv.models.lineChart() + .showXAxis(false) + .showLegend(false) + .clipVoronoi(false) + .showVoronoi(true) + .showYAxis(false); + d3.select('#test2') + .datum(sinAndCos()) + .call(chart); + return chart; + }); - function sinAndCos() { - var cos = []; - for (var i = 0; i < 5; i++) { - cos.push({x: i, y: Math.round(.5 * Math.cos(i/10) * 100) / 100}); - } - return [{ - values: cos, - key: "Cosine Wave", - color: "#2ca02c" - }]; - } + function sinAndCos() { + var cos = []; + for (var i = 0; i < 5; i++) { + cos.push({ x: i, y: Math.round(.5 * Math.cos(i / 10) * 100) / 100 }); + } + return [{ + values: cos, + key: "Cosine Wave", + color: "#2ca02c" + }]; + } +} \ No newline at end of file diff --git a/nvd3/nvd3.d.ts b/nvd3/nvd3.d.ts index 97e1ebf92..7e462248c 100644 --- a/nvd3/nvd3.d.ts +++ b/nvd3/nvd3.d.ts @@ -5,249 +5,2754 @@ /// declare module nv { - -// interface Datum{ -// values: any[], -// key: string, -// color: string -// } - +//#region Chart Component interface Margin { left?: number, right?: number, top?: number, bottom?: number } - - interface Legend extends Chart { - key(): any; - key(value: any): this; - align(): boolean; - align(value: boolean): this; - maxKeyLength(): number; - maxKeyLength(value: number): this; - rightAlign(): boolean; - rightAlign(value: boolean): this; - //define how much space between legend items. - recommend 32 for furious version - padding(): number; - //define how much space between legend items. - recommend 32 for furious version - padding(value: number): this; - //If true, legend will update data.disabled and trigger a 'stateChange' dispatch. - updateState(): boolean; - //If true, legend will update data.disabled and trigger a 'stateChange' dispatch. - updateState(value: boolean): this; - //If true, clicking legend items will cause it to behave like a radio button. (only one can be selected at - radioButtonMode(): boolean; - //If true, clicking legend items will cause it to behave like a radio button. (only one can be selected at - radioButtonMode(value: boolean): this; - expanded(): boolean; - expanded(value: boolean): this; - //Options are "classic" and "furious" - vers(): string; - //Options are "classic" and "furious" - vers(value: string): Legend; - } - - /** - *NVD3 extension of D3 Axis - */ - interface NvAxis extends d3.svg.Axis { - (selection: d3.Selection): void; - (selection: d3.Transition): void; - scale(): any; - scale(scale: any): NvAxis; + interface Size { + height: number; + width: number; + } - orient(): string; - orient(orientation: string): NvAxis; + interface Offset { + left?: number; + top?: number; + } - ticks(): any[]; - ticks(...args: any[]): NvAxis; - - tickValues(): any[]; - tickValues(values: any[]): NvAxis; - - tickSize(): number; - tickSize(size: number): NvAxis; - tickSize(inner: number, outer: number): NvAxis; - - innerTickSize(): number; - innerTickSize(size: number): NvAxis; - - outerTickSize(): number; - outerTickSize(size: number): NvAxis; - - tickPadding(): number; - tickPadding(padding: number): NvAxis; - - tickFormat(): (t: any) => string; - tickFormat(format: (t: any) => string): NvAxis; - tickFormat(format:string): NvAxis; - tickFormat(format: (t: any, i: any) => string): NvAxis; - - showMaxMin(value: boolean) : NvAxis; - axisLabel(value: string) : NvAxis; - - } - - interface InteractiveLayer { - tooltip : Tooltip - } - - interface ContentGenerator { - (arg: any) :string - } - - interface Tooltip { - - show([left , top]: [number,number], content: string, gravity: string) //todo sort out use on nv.tooltip. - cleanup():void; //todo sort out use on nv.tooltip. - contentGenerator(): ContentGenerator; - contentGenerator(func: (any) => string): void; - headerFormatter(func: (any)=> string): void; - } - - interface Utils { - windowResize(listener: (ev: Event) => any): void; - } - - interface ChartBase { - - } - - interface Chart { - margin() : Margin; - margin(value: Margin) : this; - width(): number; - width(value: number) : this; - height(): number; - height(value: number) : this; - color(value:string[]) : this; - color(value:string) : this; + interface State { dispatch: d3.Dispatch; + } + interface InteractiveLayer { + tooltip: Tooltip + } + + interface Nvd3Element { + dispatch: d3.Dispatch; + options(options: any) update(): void; - interactiveLayer: InteractiveLayer; - (transition: d3.Transition, ...args: any[]): any; (selection: d3.Selection, ...args: any[]): any; (transition: d3.Transition, ...args: any[]): any; (selection: d3.Selection, ...args: any[]): any; + } - } - - interface TwoDimensionalChart extends Chart - { - xAxis : NvAxis; - yAxis : NvAxis; - x(func: (any)=> any) : this; - y(func: (any) => any): this; - xScale(scale: d3.time.Scale): this; - xScale() : d3.time.Scale; - yScale(scale: d3.time.Scale): this; - yScale() : d3.time.Scale - forceX([xMin, xMax]: [number, number]): this; - forceY([xMin, xMax]: [number, number]): this; - - } - - interface HistoricalBarBase extends TwoDimensionalChart{ - - - } - - interface HistoricalBar extends HistoricalBarBase{ - - } - - interface HistoricalBarChart extends HistoricalBarBase{ - bars: HistoricalBar; - legend: Legend; - noData(): any //todo; - noData(value: any): this //todo; - defaultState(): any //todo; - defaultState(value: any): this //todo; - showXAxis(): boolean //todo; - showXAxis(value: boolean): this //todo; - showLegend(): boolean //todo; - showLegend(value: boolean): this //todo; - showYAxis(): boolean //todo; - showYAxis(value: boolean): this //todo; - rightAlignYAxis(): boolean //todo; - rightAlignYAxis(value: boolean): this //todo; - useInteractiveGuideline(value: boolean): this; - duration(value: number): this; - } - - - + interface Chart extends Nvd3Element { + state: State; + interactiveLayer: InteractiveLayer; + + } + //#region Chart Component + + interface Legend extends Nvd3Element { + align(): boolean; + align(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + expanded(): boolean; + expanded(value: boolean): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + key(): any; + key(value: any): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + /*Specifies how much spacing there is between legend items.*/ + padding(): number; + /*Specifies how much spacing there is between legend items.*/ + padding(value: number): this; + radioButtonMode(): boolean; + //If true, clicking legend items will cause it to behave like a radio button. (only one can be selected at + radioButtonMode(value: boolean): this; + rightAlign(): boolean; + rightAlign(value: boolean): this; + //If true, legend will update data.disabled and trigger a 'stateChange' dispatch. + updateState(): boolean; + //If true, legend will update data.disabled and trigger a 'stateChange' dispatch. + updateState(value: boolean): this; + //Options are "classic" and "furious" + vers(): string; + //Options are "classic" and "furious" + vers(value: string): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + } - interface BoxPlotChart extends TwoDimensionalChart{ - useInteractiveGuideline(value : boolean) : this; + /** + *NVD3 extension of D3 Axis + */ + interface Nvd3Axis extends d3.svg.Axis { + axisLabel(): string; + axisLabel(value: string): this; + axisLabelDistance(): number; + axisLabelDistance(value: number): this; + domain(): number[]; + domain(domain: number[]): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ duration(value: number): this; - - staggerLabels(value: boolean): this; - maxBoxWidth(value: number): this; - yDomain([xMin, xMax]: [number, number]): this; - xDomain([xMin, xMax]: [number, number]): this; - showXAxis(): boolean //todo; - showXAxis(value: boolean): this //todo; - showYAxis(): boolean //todo; - showYAxis(value: boolean): this //todo; - rightAlignYAxis(): boolean //todo; - rightAlignYAxis(value: boolean): this //todo; - } - - interface BulletBase extends Chart { - orient(): string; - orient(orientation: string): this; - tickFormat(): (t: any) => string; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + orient(): string; + orient(orientation: string): this; + range(): number[]; + range(range: number[]): this; + rangeBand(): number; + rangeBands(interval: [number, number], padding?: number, outerPadding?: number): this; + /*Rotates the X axis labels by the specified degree.*/ + rotateLabels(): number; + /*Rotates the X axis labels by the specified degree.*/ + rotateLabels(range: number): this; + rotateYLabels(): number; + rotateYLabels(range: number): this; + scale(): any; + scale(scale: any): this; + showMaxMin(value: boolean): this; + staggerLabels(): boolean; + staggerLabels(value: boolean): this; + tickFormat(): (d: any) => string; tickFormat(format: (t: any) => string): this; - tickFormat(format:string): NvAxis; - tickFormat(format: (t: any, i: any) => string): this; - forceX([xMin, xMax]: [number, number]): this; - ranges(): any //todo; - ranges(value: any): this //todo; - markers(): any //todo; - markers(value: any): this //todo; - measures(): any //todo; - measures(value: any): this //todo; + tickFormat(format: string): this; + tickFormat(format: (d: any, i: any) => string): this; + tickPadding(): number; + tickPadding(padding: number): this; + tickSize(): number; + tickSize(size: number): this; + tickSize(inner: number, outer: number): this; + tickValues(): any[]; + tickValues(values: any[]): this; + ticks(): any[]; + ticks(...args: any[]): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; } - interface Bullet extends BulletBase{ - + interface Tooltip { + + /*For tooltip: Parent dom element of the SVG that holds the chart. This will make the tooltip dom be created inside this container instead of on the document body.*/ + chartContainer(el: HTMLElement): this + /*For tooltip: Parent dom element of the SVG that holds the chart. This will make the tooltip dom be created inside this container instead of on the document body.*/ + chartContainer(): HTMLElement + /*Attaches additional CSS classes to the tooltip DIV that is created.*/ + classes(el: string): this + /*Attaches additional CSS classes to the tooltip DIV that is created.*/ + classes(): string + /*Function that generates the tooltip content html.*/ + contentGenerator(): (d :any) => string; + /*Function that generates the tooltip content html.*/ + contentGenerator(func: (d: any) => string): this; + data(): any; + data(value: any): this; + distance(): number; + distance(value: number): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /*For tooltip: completely enables or disabled the tooltip*/ + enabled(): boolean; + /*For tooltip: completely enables or disabled the tooltip*/ + enabled(value: boolean): this; + /*For tooltip: If not null, this fixes the top position of the tooltip.*/ + fixedTop(): number; + /*For tooltip: If not null, this fixes the top position of the tooltip.*/ + fixedTop(value: number): this; + /*Can be 'n','s','e','w'. Determines how tooltip is positioned*/ + gravity(): string; + /*Can be 'n','s','e','w'. Determines how tooltip is positioned*/ + gravity(value: string): this; + /*For tooltip: show the x axis value in the tooltip or not (not valid for pie charts for instance)*/ + headerEnabled(): boolean; + /*For tooltip: show the x axis value in the tooltip or not (not valid for pie charts for instance)*/ + headerEnabled(value: boolean): this; + /*For tooltip: formats the x axis value in the tooltip*/ + headerFormatter(func: (d: any) => string): this; + /*For tooltip: formats the x axis value in the tooltip*/ + headerFormatter(): (d: any) => string; + /*For tooltip: show or hide the tooltip by setting this to true or false. Tooltips used to be created and destroyed, but now we re-used the element and set opacity to 1 or 0.*/ + hidden(): boolean; + /*For tooltip: show or hide the tooltip by setting this to true or false. Tooltips used to be created and destroyed, but now we re-used the element and set opacity to 1 or 0.*/ + hidden(value: boolean): this; + /*Delay in ms before the tooltip hides itself after a mouseout event. A new mouseover event cancels the hide if within this timeout period.*/ + hideDelay(): number; + /*Delay in ms before the tooltip hides itself after a mouseout event. A new mouseover event cancels the hide if within this timeout period.*/ + hideDelay(value: number): this; + /**/ + id(): number; + keyFormatter(): (d: any, i: number) => string; + keyFormatter(func: (d: any, i: number) => string): this; + offset(): Offset; + offset(value: Offset): this; + /*sets the top/left positioning for the tooltip. Should be given an object with 'left' and/or 'top' attributes. You can override just one, just like the 'margin' option on charts*/ + position(): Offset; + /*sets the top/left positioning for the tooltip. Should be given an object with 'left' and/or 'top' attributes. You can override just one, just like the 'margin' option on charts*/ + position(value: Offset): this; + /*Tolerance allowed before tooltip is moved from its current position (creates 'snapping' effect)*/ + snapDistance(): number; + /*Tolerance allowed before tooltip is moved from its current position (creates 'snapping' effect)*/ + snapDistance(value: number): this; + /*returns the dom element of the tooltip.*/ + tooltipElem(): HTMLElement; + /*formats the y axis value(s) in the tooltip*/ + valueFormatter(): (d: any) => string; + /*formats the y axis value(s) in the tooltip*/ + valueFormatter(func: (d: any) => string): this; + } + + interface BoxPlot extends Nvd3Element { + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + id(): number; + id(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + maxBoxWidth(): number; + maxBoxWidth(value: number): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface Bullet extends Nvd3Element { + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + markers(): (d: any) => any //todo; + markers(func: (d: any) => any): this //todo; + measures(): (d: any) => any //todo; + measures(func: (d: any) => any): this //todo; + orient(): string; + orient(orientation: string): this; + ranges(): (d: any) => any //todo; + ranges(func: (d: any) => any): this //todo; + tickFormat(): (d: any) => string; + tickFormat(format: (d: any) => string): this; + tickFormat(format: string): this; + tickFormat(format: (d: any, i: any) => string): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + } + + interface CandlestickBar extends Nvd3Element { + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + close(): (d: any) => number; + close(func: (d:any) => number): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option*/ + forceY(): number[]; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + high(): (d: any) => number; + high(func: (d: any) => number): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + low(): (d: any) => number; + low(func: (d: any) => number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + open(): (d: any) => number; + open(func: (d: any) => number): this; + padData(): boolean; + padData(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface DiscreteBar extends Nvd3Element { + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(): number[]; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + id(): number; + id(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + rectClass(): string; + rectClass(value: string): this; + /*Prints the Y values on the top of the bars. Only recommended to use if there aren't many bars.*/ + showValues(): boolean; + /*Prints the Y values on the top of the bars. Only recommended to use if there aren't many bars.*/ + showValues(value: boolean): this; + /*D3 Format object for the label of pie/donut, discrete bar and multibar charts.*/ + valueFormat(): string; + /*D3 Format object for the label of pie/donut, discrete bar and multibar charts.*/ + valueFormat(value: string): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface HistoricalBar extends Nvd3Element { + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /* List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceX(): number[]; + /* List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceX(value: number[]): this; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(): number[]; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + /*.*/ + padData(): boolean; + /**/ + padData(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface Scatter extends Nvd3Element { + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(func: (d: any) => number): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(value: number): this; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(): boolean; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(): number[]; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(value: number[]): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(): number[]; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + /**/ + padData(): boolean; + /**/ + padData(value: boolean): this; + /**/ + padDataOuter(): number; + /**/ + padDataOuter(value: number): this; + /* Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(): (d: any) => boolean; + /*Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(func: (d: any) => boolean): this; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointxDomain(): number[]; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointDomain(value: number[]): this; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(): number[]; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(value: number[]): this; + /* Override the default scale type for the point axis*/ + pointScale(): any; + /* Override the default scale type for the point axis*/ + pointScale(value: any): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(): (d: any) => number; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(func: (d: any) => number): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(value: number): this; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(): boolean; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(value: boolean): this; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(): boolean; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + + } + + interface Line extends Scatter { + scatter: Scatter; + clearHighlights(): this; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(): (d: any, i: number) => boolean; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(func: (d: any, i: number) => boolean): this; + /**/ + highlightPoint(): (d: any) => boolean; + /**/ + highlightPoint(func: (d: any) => boolean): this; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(): string; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(value: string): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(): (d: any) => boolean; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(value: boolean): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(func: (d: any) => boolean): this; + + + } + + interface MultiBar extends Nvd3Element { + /*this option lets you specific a color for each bar group to have the same color but differentiated by shading.*/ + barColor(value: string[]): this; + /*this option lets you specific a color for each bar group to have the same color but differentiated by shading.*/ + barColor(func: (d: any, i: number) => string): this; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /**/ + disabled(): boolean[]; + /**/ + disabled(value: boolean[]): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(): number[]; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(value: number[]): this; + /*The padding between bar groups, this is passed as the padding attribute of rangeBands*/ + groupSpacing(): number; + /*The padding between bar groups, this is passed as the padding attribute of rangeBands*/ + groupSpacing(value: number): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /*.*/ + hideable(): boolean; + /**/ + hideable(value: boolean): this; + id(): number; + id(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + /*.*/ + stacked(): boolean; + /**/ + stacked(value: boolean): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'silhouette'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'wiggle'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'expand'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'zero'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: string): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: (data: Array<[number, number]>) => number[]): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface MultiBarHorizontal extends Nvd3Element { + /*this option lets you specific a color for each bar group to have the same color but differentiated by shading.*/ + barColor(value: string[]): this; + /*this option lets you specific a color for each bar group to have the same color but differentiated by shading.*/ + barColor(func: (d: any, i: number) => string): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /**/ + disabled(): boolean[]; + /**/ + disabled(value: boolean[]): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(): number[]; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(value: number[]): this; + /*The padding between bar groups, this is passed as the padding attribute of rangeBands*/ + groupSpacing(): number; + /*The padding between bar groups, this is passed as the padding attribute of rangeBands*/ + groupSpacing(value: number): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + id(): number; + id(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + /*Prints the Y values on the top of the bars. Only recommended to use if there aren't many bars.*/ + showValues(): boolean; + /*Prints the Y values on the top of the bars. Only recommended to use if there aren't many bars.*/ + showValues(value: boolean): this; + /*.*/ + stacked(): boolean; + /**/ + stacked(value: boolean): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'silhouette'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'wiggle'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'expand'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'zero'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: string): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: (data: Array<[number, number]>) => number[]): this; + /*D3 Format object for the label of pie/donut, discrete bar and multibar charts.*/ + valueFormat(): string; + /*D3 Format object for the label of pie/donut, discrete bar and multibar charts.*/ + valueFormat(value: string): this; + /*.*/ + valuePadding(): number; + /**/ + valuePadding(value: number): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /**/ + yErr(): (d: any, i: number) => number|number[]; + /**/ + yErr(func: (d: any, i: number) => number | number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface OhlcBar extends Nvd3Element { + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + close(): (d: any) => number; + close(func: (d: any) => number): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option*/ + forceY(): number[]; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + high(): (d: any) => number; + high(func: (d: any) => number): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + low(): (d: any) => number; + low(func: (d: any) => number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + open(): (d: any) => number; + open(func: (d: any) => number): this; + padData(): boolean; + padData(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface ParallelCoordinates extends Nvd3Element { + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + dimensionData(): any + dimensionData(d: any): this + /*D3 format for each x axis*/ + dimensionFormats(): string[]; + /*D3 format for each x axis*/ + dimensionFormats(value: string[]): this; + /*Name of each dimension, used for each axis.*/ + dimensionNames(): string[]; + /*Name of each dimension, used for each axis.*/ + dimensionNames(value: string[]): this; + /*Deprecated. Use dimensionsNames instead. */ + dimensions(): any; + /*Deprecated. Use dimensionsNames instead. .*/ + dimensions(value: any): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /*Specifies each line tension. Values between 0 and 1.*/ + lineTension(): number; + /*Specifies each line tension. Values between 0 and 1.*/ + lineTension(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + } +//#endregion + +//#region Charts + interface BoxPlotChart extends Chart { + boxplot: BoxPlot; + xAxis: Nvd3Axis; + yAxis: Nvd3Axis; + tooltip: Tooltip; + + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + id(): number; + id(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + maxBoxWidth(): number; + maxBoxWidth(value: number): this; + noData(): string; + noData(value: string): this; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(): boolean; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(value: boolean): this; + /*Display or hide the X axis*/ + showXAxis(): boolean; + /*Display or hide the X axis*/ + showXAxis(value: boolean): this; + /*Display or hide the Y axis*/ + showYAxis(): boolean; + /*Display or hide the Y axis*/ + showYAxis(value: boolean): this; + /*Makes the X labels stagger at different distances from the axis so they're less likely to overlap.*/ + staggerLabels(): boolean; + /*Makes the X labels stagger at different distances from the axis so they're less likely to overlap.*/ + staggerLabels(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } - interface BulletChart extends BulletBase{ - bullet: Bullet - ticks(): any //todo; - ticks(value: any): this //todo; - noData(): any //todo; - noData(value: any): this //todo; + + interface BulletChart extends Chart{ + bullet: Bullet; + tooltip: Tooltip; + + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + markers(): (d: any) => any //todo; + markers(func: (d: any) => any): this //todo; + measures(): (d: any) => any //todo; + measures(func: (d: any) => any): this //todo; + noData(): string; + noData(value: string): this; + orient(): string; + orient(orientation: string): this; + ranges(): (d: any) => any //todo; + ranges(func: (d: any) => any): this //todo; + tickFormat(): (d: any) => string; + tickFormat(format: (d: any) => string): this; + tickFormat(format: string): this; + tickFormat(format: (d: any, i: any) => string): this; + ticks(): any[]; + ticks(...args: any[]): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; } - interface Models{ + + interface CandlestickBarChart extends Chart { + bars: CandlestickBar; + legend: Legend; + xAxis: Nvd3Axis; + yAxis: Nvd3Axis; + tooltip: Tooltip; + + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + close(): (d: any) => number; + close(func: (d: any) => number): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option*/ + forceY(): number[]; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + high(): (d: any) => number; + high(func: (d: any) => number): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + low(): (d: any) => number; + low(func: (d: any) => number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + open(): (d: any) => number; + open(func: (d: any) => number): this; + padData(): boolean; + padData(value: boolean): this; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(): boolean; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(value: boolean): this; + /*Whether to display the legend or not*/ + showLegend(): boolean; + /*Whether to display the legend or not*/ + showLegend(value: boolean): this; + /*Display or hide the X axis*/ + showXAxis(): boolean; + /*Display or hide the X axis*/ + showXAxis(value: boolean): this; + /*Display or hide the Y axis*/ + showYAxis(): boolean; + /*Display or hide the Y axis*/ + showYAxis(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(): boolean; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface CumulativeLineChart extends LineChart { + controls: Legend; + average(func: (d: any) => number): this; + average(): (d: any) => number; + noErrorCheck(value: boolean): this; + noErrorCheck(): boolean; + } + + interface DiscreteBarChart extends Chart { + discretebar: DiscreteBar; + legend: Legend; + xAxis: Nvd3Axis; + yAxis: Nvd3Axis; + tooltip: Tooltip; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(): number[]; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + id(): number; + id(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + rectClass(): string; + rectClass(value: string): this; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(): boolean; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(value: boolean): this; + /*Prints the Y values on the top of the bars. Only recommended to use if there aren't many bars.*/ + showValues(): boolean; + /*Prints the Y values on the top of the bars. Only recommended to use if there aren't many bars.*/ + showValues(value: boolean): this; + /*Display or hide the X axis*/ + showXAxis(): boolean; + /*Display or hide the X axis*/ + showXAxis(value: boolean): this; + /*Display or hide the Y axis*/ + showYAxis(): boolean; + /*Display or hide the Y axis*/ + showYAxis(value: boolean): this; + /*Makes the X labels stagger at different distances from the axis so they're less likely to overlap.*/ + staggerLabels(): boolean; + /*Makes the X labels stagger at different distances from the axis so they're less likely to overlap.*/ + staggerLabels(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /*D3 Format object for the label of pie/donut, discrete bar and multibar charts.*/ + valueFormat(): string; + /*D3 Format object for the label of pie/donut, discrete bar and multibar charts.*/ + valueFormat(value: string): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface HistoricalBarChart extends Chart { + bars: HistoricalBar; + legend: Legend; + xAxis: Nvd3Axis; + yAxis: Nvd3Axis; + tooltip: Tooltip; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /* List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceX(): number[]; + /* List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceX(value: number[]): this; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(): number[]; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + /**/ + padData(): boolean; + /**/ + padData(value: boolean): this; + rightAlignYAxis(): boolean; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(value: boolean): this; + /*Whether to display the legend or not.*/ + showLegend(): boolean; + /*Whether to display the legend or not.*/ + showLegend(value: boolean): this; + /*Display or hide the X axis*/ + showXAxis(): boolean; + /*Display or hide the X axis*/ + showXAxis(value: boolean): this; + /*Display or hide the Y axis*/ + showYAxis(): boolean; + /*Display or hide the Y axis*/ + showYAxis(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(): boolean; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface LineChart extends Chart { + lines: Line; + xAxis: Nvd3Axis; + yAxis: Nvd3Axis; + legend: Legend; + + clearHighlights(): this; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(func: (d: any) => number): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(value: number): this; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(): boolean; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(): (d: any, i: number) => boolean; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(func: (d: any, i: number) => boolean): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(): number[]; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(value: number[]): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(): number[]; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /**/ + highlightPoint(): (d: any) => boolean; + /**/ + highlightPoint(func: (d: any) => boolean): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(): string; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(value: string): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(): (d: any) => boolean; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(value: boolean): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(func: (d: any) => boolean): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + /**/ + padData(): boolean; + /**/ + padData(value: boolean): this; + /**/ + padDataOuter(): number; + /**/ + padDataOuter(value: number): this; + /* Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(): (d: any) => boolean; + /*Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(func: (d: any) => boolean): this; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointxDomain(): number[]; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointDomain(value: number[]): this; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(): number[]; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(value: number[]): this; + /* Override the default scale type for the point axis*/ + pointScale(): any; + /* Override the default scale type for the point axis*/ + pointScale(value: any): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(): (d: any) => number; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(func: (d: any) => number): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(value: number): this; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(): boolean; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(value: boolean): this; + /*Whether to display the legend or not.*/ + showLegend(): boolean; + /*Whether to display the legend or not.*/ + showLegend(value: boolean): this; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(): boolean; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(value: boolean): this; + /*Display or hide the X axis*/ + showXAxis(): boolean; + /*Display or hide the X axis*/ + showXAxis(value: boolean): this; + /*Display or hide the Y axis*/ + showYAxis(): boolean; + /*Display or hide the Y axis*/ + showYAxis(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(): boolean; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(value: boolean): this; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(): boolean; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface LinePlusBarChart extends Chart { + legend: Legend; + lines: Line; + lines2: Line; + bars: HistoricalBar; + bars2: HistoricalBar; + xAxis: Nvd3Axis; + x2Axis: Nvd3Axis; + y1Axis: Nvd3Axis; + y2Axis: Nvd3Axis; + y3Axis: Nvd3Axis; + y4Axis: Nvd3Axis; + tooltip: Tooltip; + + brushExtent(): [number, number] | [[number, number], [number, number]]; + brushExtent(value: [number, number] | [[number, number], [number, number]]) : this; + clearHighlights(): this; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(func: (d: any) => number): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(value: number): this; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(): boolean; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(): (d: any, i: number) => boolean; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(func: (d: any, i: number) => boolean): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + focusEnable(): boolean; + focusEnable(value: boolean): this; + focusHeight(): number; + focusHeight(value: number): this; + focusShowAxisX(): boolean; + focusShowAxisX(value: boolean): this; + focusShowAxisY(): boolean; + focusShowAxisY(value: boolean): this; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(): number[]; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(value: number[]): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(): number[]; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /**/ + highlightPoint(): (d: any) => boolean; + /**/ + highlightPoint(func: (d: any) => boolean): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(): string; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(value: string): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(): (d: any) => boolean; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(value: boolean): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(func: (d: any) => boolean): this; + /*The extra text after the label in the legend that tells what axis the series belongs to, for any series on the left axis.*/ + legendLeftAxisHint(): string; + /*The extra text after the label in the legend that tells what axis the series belongs to, for any series on the left axis.*/ + legendLeftAxisHint(value: string): this + /*The extra text after the label in the legend that tells what axis the series belongs to, for any seris on the right axis.*/ + legendRightAxisHint(): string; + /*The extra text after the label in the legend that tells what axis the series belongs to, for any seris on the right axis.*/ + legendRightAxisHint(value: string): this + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + /**/ + padData(): boolean; + /**/ + padData(value: boolean): this; + /**/ + padDataOuter(): number; + /**/ + padDataOuter(value: number): this; + /* Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(): (d: any) => boolean; + /*Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(func: (d: any) => boolean): this; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointxDomain(): number[]; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointDomain(value: number[]): this; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(): number[]; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(value: number[]): this; + /* Override the default scale type for the point axis*/ + pointScale(): any; + /* Override the default scale type for the point axis*/ + pointScale(value: any): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(): (d: any) => number; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(func: (d: any) => number): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(value: number): this; + /*Whether to display the legend or not.*/ + showLegend(): boolean; + /*Whether to display the legend or not.*/ + showLegend(value: boolean): this; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(): boolean; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(): boolean; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(value: boolean): this; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(): boolean; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface LineWithFocusChart extends Chart { + legend: Legend; + lines: Line; + lines2: Line; + xAxis: Nvd3Axis; + x2Axis: Nvd3Axis; + yAxis: Nvd3Axis; + y2Axis: Nvd3Axis; + tooltip: Tooltip; + + brushExtent(): [number, number] | [[number, number], [number, number]]; + brushExtent(value: [number, number] | [[number, number], [number, number]]): this; + clearHighlights(): this; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(func: (d: any) => number): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(value: number): this; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(): boolean; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(): (d: any, i: number) => boolean; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(func: (d: any, i: number) => boolean): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + focusHeight(): number; + focusHeight(value: number): this; + focusMargin(): Margin; + focusMargin(value: Margin): this; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(): number[]; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(value: number[]): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(): number[]; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /**/ + highlightPoint(): (d: any) => boolean; + /**/ + highlightPoint(func: (d: any) => boolean): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(): string; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(value: string): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(): (d: any) => boolean; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(value: boolean): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(func: (d: any) => boolean): this; + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + /**/ + padData(): boolean; + /**/ + padData(value: boolean): this; + /**/ + padDataOuter(): number; + /**/ + padDataOuter(value: number): this; + /* Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(): (d: any) => boolean; + /*Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(func: (d: any) => boolean): this; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointxDomain(): number[]; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointDomain(value: number[]): this; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(): number[]; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(value: number[]): this; + /* Override the default scale type for the point axis*/ + pointScale(): any; + /* Override the default scale type for the point axis*/ + pointScale(value: any): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(): (d: any) => number; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(func: (d: any) => number): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(value: number): this; + /*Whether to display the legend or not.*/ + showLegend(): boolean; + /*Whether to display the legend or not.*/ + showLegend(value: boolean): this; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(): boolean; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(): boolean; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(value: boolean): this; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(): boolean; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + xTickFormat(): (d: any) => string; + xTickFormat(format: (t: any) => string): this; + xTickFormat(format: string): this; + xTickFormat(format: (d: any, i: any) => string): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + yTickFormat(): (d: any) => string; + yTickFormat(format: (t: any) => string): this; + yTickFormat(format: string): this; + yTickFormat(format: (d: any, i: any) => string): this; + } + + interface MultiBarChart extends Chart { + multibar: MultiBar; + legend: Legend; + controls: Legend; + xAxis: Nvd3Axis; + yAxis: Nvd3Axis; + tooltip: Tooltip; + + /*this option lets you specific a color for each bar group to have the same color but differentiated by shading.*/ + barColor(value: string[]): this; + /*this option lets you specific a color for each bar group to have the same color but differentiated by shading.*/ + barColor(func: (d: any, i: number) => string): this; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*Object that defines the labels for control items in the graph. For instance, in the stackedAreaChart, there are controls for making it stacked, expanded, or stream. For stacked bar charts, there is stacked and grouped.*/ + controlLabels(): any; + /*Object that defines the labels for control items in the graph. For instance, in the stackedAreaChart, there are controls for making it stacked, expanded, or stream. For stacked bar charts, there is stacked and grouped.*/ + controlLabels(value: any): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + /**/ + disabled(): boolean[]; + /**/ + disabled(value: boolean[]): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(): number[]; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(value: number[]): this; + /*The padding between bar groups, this is passed as the padding attribute of rangeBands*/ + groupSpacing(): number; + /*The padding between bar groups, this is passed as the padding attribute of rangeBands*/ + groupSpacing(value: number): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /*.*/ + hideable(): boolean; + /**/ + hideable(value: boolean): this; + id(): number; + id(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + reduceXTicks(): boolean; + reduceXTicks(value: boolean): this; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(): boolean; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(value: boolean): this; + /*Rotates the X axis labels by the specified degree.*/ + rotateLabels(): number; + /*Rotates the X axis labels by the specified degree.*/ + rotateLabels(value: number): this; + /*Whether to show extra controls or not. Extra controls include things like making mulitBar charts stacked or side by side.*/ + showControls(): boolean; + /*Whether to show extra controls or not. Extra controls include things like making mulitBar charts stacked or side by side.*/ + showControls(value: boolean): this; + /*Whether to display the legend or not.*/ + showLegend(): boolean; + /*Whether to display the legend or not.*/ + showLegend(value: boolean): this; + /*Display or hide the X axis*/ + showXAxis(): boolean; + /*Display or hide the X axis*/ + showXAxis(value: boolean): this; + /*Display or hide the Y axis*/ + showYAxis(): boolean; + /*Display or hide the Y axis*/ + showYAxis(value: boolean): this; + /*.*/ + stacked(): boolean; + /**/ + stacked(value: boolean): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'silhouette'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'wiggle'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'expand'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: 'zero'): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: string): this; + /* options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function*/ + stackOffset(offset: (data: Array<[number, number]>) => number[]): this; + /*Makes the X labels stagger at different distances from the axis so they're less likely to overlap.*/ + staggerLabels(): boolean; + /*Makes the X labels stagger at different distances from the axis so they're less likely to overlap.*/ + staggerLabels(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + + } + + interface MultiBarHorizontalChart extends Chart { + multibar: MultiBar; + legend: Legend; + controls: Legend; + xAxis: Nvd3Axis; + yAxis: Nvd3Axis; + tooltip: Tooltip; + + /*this option lets you specific a color for each bar group to have the same color but differentiated by shading.*/ + barColor(value: string[]): this; + /*this option lets you specific a color for each bar group to have the same color but differentiated by shading.*/ + barColor(func: (d: any, i: number) => string): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*Object that defines the labels for control items in the graph. For instance, in the stackedAreaChart, there are controls for making it stacked, expanded, or stream. For stacked bar charts, there is stacked and grouped.*/ + controlLabels(): any; + /*Object that defines the labels for control items in the graph. For instance, in the stackedAreaChart, there are controls for making it stacked, expanded, or stream. For stacked bar charts, there is stacked and grouped.*/ + controlLabels(value: any): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + /**/ + disabled(): boolean[]; + /**/ + disabled(value: boolean[]): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(): number[]; + /* List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the Y domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option.*/ + forceY(value: number[]): this; + /*The padding between bar groups, this is passed as the padding attribute of rangeBands*/ + groupSpacing(): number; + /*The padding between bar groups, this is passed as the padding attribute of rangeBands*/ + groupSpacing(value: number): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + id(): number; + id(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + showControls(): boolean; + /*Whether to show extra controls or not. Extra controls include things like making mulitBar charts stacked or side by side.*/ + showControls(value: boolean): this; + /*Whether to display the legend or not.*/ + showLegend(): boolean; + /*Whether to display the legend or not.*/ + showLegend(value: boolean): this; + /*Prints the Y values on the top of the bars. Only recommended to use if there aren't many bars.*/ + showValues(): boolean; + /*Prints the Y values on the top of the bars. Only recommended to use if there aren't many bars.*/ + showValues(value: boolean): this; + /*Display or hide the X axis*/ + showXAxis(): boolean; + /*Display or hide the X axis*/ + showXAxis(value: boolean): this; + /*Display or hide the Y axis*/ + showYAxis(): boolean; + /*Display or hide the Y axis*/ + showYAxis(value: boolean): this; + /*.*/ + stacked(): boolean; + /**/ + stacked(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /*D3 Format object for the label of pie/donut, discrete bar and multibar charts.*/ + valueFormat(): string; + /*D3 Format object for the label of pie/donut, discrete bar and multibar charts.*/ + valueFormat(value: string): this; + /*.*/ + valuePadding(): number; + /**/ + valuePadding(value: number): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /**/ + yErr(): (d: any, i: number) => number | number[]; + /**/ + yErr(func: (d: any, i: number) => number | number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + + } + //todo complete + interface MultiChart extends Chart { + lines1: Line; + lines2: Line; + bars1: HistoricalBar; + bars2: HistoricalBar; + stack1: HistoricalBar; + stack2: HistoricalBar; + xAxis: Nvd3Axis; + yAxis1: Nvd3Axis; + yAxis2: Nvd3Axis; + tooltip: Tooltip; + + brushExtent(): [number, number] | [[number, number], [number, number]]; + brushExtent(value: [number, number] | [[number, number], [number, number]]): this; + clearHighlights(): this; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(func: (d: any) => number): this; + /*When useVoronoi and clipVoronoi are true, you can control the clip radius with this option. Essentially this lets you set how far away from the actual point you can put the mouse for it to select the point.*/ + clipRadius(value: number): this; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(): boolean; + /*When useVoronoi is on, this masks each voronoi section with a circle to limit selection to smaller area.*/ + clipVoronoi(value: boolean): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(): (d: any, i: number) => boolean; + /*A provided function that allows a line to be non-continuous when not defined.*/ + defined(func: (d: any, i: number) => boolean): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + focusEnable(): boolean; + focusEnable(value: boolean): this; + focusHeight(): number; + focusHeight(value: number): this; + focusShowAxisX(): boolean; + focusShowAxisX(value: boolean): this; + focusShowAxisY(): boolean; + focusShowAxisY(value: boolean): this; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(): number[]; + /*List of numbers to Force into the point scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forcePoint(value: number[]): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(): number[]; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /**/ + highlightPoint(): (d: any) => boolean; + /**/ + highlightPoint(func: (d: any) => boolean): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(): string; + /*controls the line interpolation between points, many options exist, see the D3 reference:*/ + interpolate(value: string): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(): (d: any) => boolean; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(value: boolean): this; + /*Function to define if a line is a normal line or if it fills in the area. Notice the default gets the value from the line's definition in data. If a non-function is given, it the value is used for all lines.*/ + isArea(func: (d: any) => boolean): this; + /*The extra text after the label in the legend that tells what axis the series belongs to, for any series on the left axis.*/ + legendLeftAxisHint(): string; + /*The extra text after the label in the legend that tells what axis the series belongs to, for any series on the left axis.*/ + legendLeftAxisHint(value: string): this + /*The extra text after the label in the legend that tells what axis the series belongs to, for any seris on the right axis.*/ + legendRightAxisHint(): string; + /*The extra text after the label in the legend that tells what axis the series belongs to, for any seris on the right axis.*/ + legendRightAxisHint(value: string): this + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + /**/ + padData(): boolean; + /**/ + padData(value: boolean): this; + /**/ + padDataOuter(): number; + /**/ + padDataOuter(value: number): this; + /* Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(): (d: any) => boolean; + /*Function used to determine if scatter points are active or not, returns false to denote them as inactive and true for active.*/ + pointActive(func: (d: any) => boolean): this; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointxDomain(): number[]; + /* Defines the whole point scale's domain. Using this will disable calculating the domain based on the data.*/ + pointDomain(value: number[]): this; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(): number[]; + /* Override the point scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + pointRange(value: number[]): this; + /* Override the default scale type for the point axis*/ + pointScale(): any; + /* Override the default scale type for the point axis*/ + pointScale(value: any): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(): (d: any) => number; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(func: (d: any) => number): this; + /* Specifies the size of the points in a scatter. Scatter is also used to make the hover points on lines.*/ + pointSize(value: number): this; + /*Whether to display the legend or not.*/ + showLegend(): boolean; + /*Whether to display the legend or not.*/ + showLegend(value: boolean): this; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(): boolean; + /*Displays the voronoi areas on the chart. This is mostly helpful when debugging issues.*/ + showVoronoi(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(): boolean; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(value: boolean): this; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(): boolean; + /*Use voronoi diagram to select nearest point to display tooltip instead of requiring a hover over the specific point itself. Setting this to false will also set clipVoronoi to false.*/ + useVoronoi(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface OhlcBarChart extends Chart { + bars: OhlcBar; + legend: Legend; + xAxis: Nvd3Axis; + yAxis: Nvd3Axis; + tooltip: Tooltip; + + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(): boolean; + /*If true, masks lines within the X and Y scales using a clip-path*/ + clipEdge(value: boolean): this; + close(): (d: any) => number; + close(func: (d: any) => number): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(): number; + /*Duration in ms to take when updating chart. For things like bar charts, each bar can animate by itself but the total time taken should be this value.*/ + duration(value: number): this; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(): number[]; + /*List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the xDomain option*/ + forceX(value: number[]): this; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option*/ + forceY(): number[]; + /*List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). This ensures the numbers are in the X domain but doesn't override the whole domain. This option only applies if you have not overridden the whole domain with the yDomain option*/ + forceY(value: number[]): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + high(): (d: any) => number; + high(func: (d: any) => number): this; + id(): number; + id(value: number): this; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(): boolean; + /*A master flag for turning chart interaction on and off. This overrides all tooltip, voronoi, and guideline options.*/ + interactive(value: boolean): this; + low(): (d: any) => number; + low(func: (d: any) => number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + noData(): string; + noData(value: string): this; + open(): (d: any) => number; + open(func: (d: any) => number): this; + padData(): boolean; + padData(value: boolean): this; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(): boolean; + /*When only one Y axis is used, this puts the Y axis on the right side instead of the left.*/ + rightAlignYAxis(value: boolean): this; + /*Whether to display the legend or not*/ + showLegend(): boolean; + /*Whether to display the legend or not*/ + showLegend(value: boolean): this; + /*Display or hide the X axis*/ + showXAxis(): boolean; + /*Display or hide the X axis*/ + showXAxis(value: boolean): this; + /*Display or hide the Y axis*/ + showYAxis(): boolean; + /*Display or hide the Y axis*/ + showYAxis(value: boolean): this; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(): (d: any) => string; + /*Deprecated. Use chart.tooltip.contentGenerator or chart.interactiveGuideline.tooltip.contentGenerator to control tooltip content.*/ + tooltipContent(func: (d: any) => string): this; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(): boolean; + /*Deprecated. Use chart.tooltip.enabled or chart.interactive to control if tooltips are enabled or not.*/ + tooltips(value: boolean): this; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(): boolean; + /*Sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots. Turning this on will set the 'interactive' and 'useVoronoi' options to false to avoid conflicting.*/ + useInteractiveGuideline(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(): (d: any) => number; + /* Proxy function to return the X value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + x(func: (d: any) => number): this; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(): number[]; + /* Defines the whole X scale's domain. Using this will disable calculating the domain based on the data.*/ + xDomain(value: number[]): this; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(): number[]; + /* Override the X scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + xRange(value: number[]): this; + /* Override the default scale type for the X axis*/ + xScale(): any; + /* Override the default scale type for the X axis*/ + xScale(value: any): this; + y(): (d: any) => number; + /* Proxy function to return the y value so adjustments can be made if needed. For pie/donut chart this returns the key for the slice.*/ + y(func: (d: any) => number): this; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(): number[]; + /* Defines the whole y scale's domain. Using this will disable calculating the domain based on the data.*/ + yDomain(value: number[]): this; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(): number[]; + /* Override the y scale's range. Using this will disable calculating the range based on the data and chart width/height.*/ + yRange(value: number[]): this; + /* Override the default scale type for the y axis*/ + yScale(): any; + /* Override the default scale type for the y axis*/ + yScale(value: any): this; + } + + interface ParallelCoordinatesChart extends Chart { + parallelCoordinates: ParallelCoordinates; + legend: Legend; + tooltip: Tooltip; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(value: string[]): this; + /*Colors to use for the different data. If an array is given, it is converted to a function automatically.*/ + color(func: (d: any, i: number) => string): this; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(): any; + /*No longer used.Use chart.dispatch.changeState(...) instead*/ + defaultState(value: any): this; + dimensionData(): any + dimensionData(d:any) : this + /*D3 format for each x axis*/ + dimensionFormats(): string[]; + /*D3 format for each x axis*/ + dimensionFormats(value: string[]): this; + /*Name of each dimension, used for each axis.*/ + dimensionNames(): string[]; + /*Name of each dimension, used for each axis.*/ + dimensionNames(value: string[]): this; + /*Deprecated. Use dimensionsNames instead. */ + dimensions(): any; + /*Deprecated. Use dimensionsNames instead. .*/ + dimensions(value: any): this; + /**/ + displayBrush(): boolean; + /**/ + displayBrush(value: boolean): this; + /*The height the graph or component created inside the SVG should be made*/ + height(): number; + /*The height the graph or component created inside the SVG should be made.*/ + height(value: number): this; + /*Specifies each line tension. Values between 0 and 1.*/ + lineTension(): number; + /*Specifies each line tension. Values between 0 and 1.*/ + lineTension(value: number): this; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(): Margin; + /*Object containing the margins for the chart or component. You can specify only certain margins in the object to change just those parts.*/ + margin(value: Margin): this; + /**/ + noData(): string; + /**/ + noData(value: string): this; + /**/ + showLegend(): boolean; + /**/ + showLegend(value: boolean): this; + /* The width the graph or component created inside the SVG should be made*/ + width(): number; + /*The width the graph or component created inside the SVG should be made.*/ + width(value: number): this; + } + +//#endregion + + + interface Models{ + boxPlotChart(): BoxPlotChart; + bullet(): Bullet; + bulletChart(): BulletChart; + candlestickBar(): CandlestickBar; + candlestickBarChart(): CandlestickBarChart; + cumulativeLineChart(): CumulativeLineChart; + discreteBar(): DiscreteBar; + discreteBarChart(): DiscreteBarChart; historicalBar(): HistoricalBar; - historicalBarChart(bar_model?: HistoricalBar): HistoricalBarChart; - ohlcBarChart(): HistoricalBarChart; - bullet(): Bullet; - bulletChart(): BulletChart; - boxPlotChart(): BoxPlotChart; - legend(): Legend; + historicalBarChart(bar_model?: HistoricalBar): HistoricalBarChart; + ohlcBar(): OhlcBar; + ohlcBarChart(): OhlcBarChart; + legend(): Legend; + line(): Line; + lineChart(): LineChart; + linePlusBarChart(): LinePlusBarChart; + lineWithFocusChart(): LineWithFocusChart; + multiBarChart(): MultiBarChart; + multiBarHorizontalChart(): MultiBarHorizontalChart; + parallelCoordinates(): ParallelCoordinates; + parallelCoordinatesChart(): ParallelCoordinatesChart; + scatter(): Scatter; tooltip(): Tooltip; } - - interface ChartFactory { + + interface Utils { + windowResize(listener: (ev: Event) => any): void; + windowSize(): Size; + state(): State; + } + interface ChartFactory { generate: () => TChart; callback?: (chart: TChart)=> void; } - + + interface nvTooltipStatic { + show([left, top]: [number, number], content: string, gravity: string) //todo sort out use on nv.tooltip. + cleanup(): void; //todo sort out use on nv.tooltip. + } interface nvStatic{ models: Models; - tooltip: Tooltip; + tooltip: nvTooltipStatic; utils: Utils; - addGraph(factory: ChartFactory); - addGraph(generate: () => TChart, callBack?: (chart: TChart)=> void) ; + addGraph(factory: ChartFactory); + addGraph(generate: () => TChart, callBack?: (chart: TChart) => void); + log: (topic:string, value?:string)=> void } } declare var nv : nv.nvStatic; \ No newline at end of file