nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.staggerLabels(false)
.showValues(true)
.staggerLabels(true)
.width(dim.width)
.tooltips(false)
.x(function(d) {
return d.label;
})
.y(function(d) {
return d.value;
});
var data = (scope.parseFn && scope.parseFn(newVal)) || _.identity(newVal);
svg.datum(data).transition().duration(100).call(chart);
nv.utils.windowResize(chart.update);
});
nv.addGraph(function() {
chart = nv.models.stackedAreaChart()
.useInteractiveGuideline(true)
.showControls(false)
.x(function(d) {
return d[0];
})
.y(function(d) {
return d[1];
})
.color(keyColor)
.duration(300);
chart.stacked.style('stack');
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d));
});
chart.yAxisTickFormat(d3.format('d'));
d3.select(element[0])
.data([scope.data])
//.transition().duration(1000)
.call(chart);
/*.each('start', function() {
setTimeout(function() {
d3.selectAll('#chart1 *').each(function() {
if (this.__transition__)
this.__transition__.duration = 1;
});
}, 0);
});*/
nv.utils.windowResize(chart.update);
return chart;
});
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart().width(this.$el.width()).height(this.$el.height());
// chart.transitionDuration(500);
chart.xAxis
.tickFormat(d3.format(',f'));
chart.x2Axis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.y2Axis
.tickFormat(d3.format(',.2f'));
d3.select('#chart')
.datum(this.data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
}.bind(this));
nv.addGraph(() => {
const chart = nv.models.stackedAreaChart()
.x(R.head)
.y(R.last)
.clipEdge(true)
.showControls(false)
.useInteractiveGuideline(true)
.color([
'#61BD4F',
'#0079BF',
'#FFAB4A',
'#FF80CE',
'#F2D600',
'#42548E',
'#EB5A46',
'#C377E0',
]);
chart.xAxis
.showMaxMin(false)
.tickFormat((d) => d3.time.format('%d/%m/%y')(new Date(d)));
chart.yAxis
.tickFormat(d3.format(',.0f'));
d3.select(selector)
.datum(data)
.transition()
.duration(500)
.call(chart);
// Force tooltips to be removed after data refresh.
// See: https://github.com/nvd3-community/nvd3/issues/100
d3.selectAll(`${selector} + .nvtooltip`).remove();
nv.utils.windowResize(chart.update);
return chart;
});
nvd3.addGraph(() => {
this.chart = nvd3.models.multiBarChart()
.stacked(true)
.showLegend(true)
.showControls(false)
.margin({"left":50,"right":10,"top":10,"bottom":20})
.groupSpacing(0.05)
.height(this.props.height)
.clipEdge(true)
//.rotateLabels(-45)
this.chart.xAxis.tickFormat(d3.format(',f'))
this.chart.yAxis.tickFormat(d3.format(',.1f'))
d3.select(this.refs.svg)
.datum(this.props.datum)
.transition()
.duration(1000)
.call(this.chart)
nvd3.utils.windowResize(this.chart.update)
return this.chart
})
nv.addGraph(function () {
var chart = nv.models.lineChart()
.x(function (d) {
if (d) {
return d.label
}
})
.y(function (d) {
if (d) {
return d.value
}
})
.margin({top: 30, right: 10, bottom: 60, left: 100})
.useInteractiveGuideline(true)
.showYAxis(true)
.showXAxis(true)
.showLegend(inputOptions.showLegend)
chart.legend.margin({top: 20, right: 0, bottom: 15, left: 0})
chart.xAxis
.axisLabel(inputOptions.xAxisLabel)
if (inputOptions.yMax < 100) {
chart.yAxis
.tickFormat(d3.format(',.1f'))
} else {
chart.yAxis
.tickFormat(d3.format(',.0d'))
}
chart.yAxis
.axisLabel(config['y-title'])
.axisLabelDistance(config['y-title-offset'])
if (config.hasOwnProperty('x-tick-interval')) {
const numValues = inputOptions.data[0].values.length
const tickInterval = config['x-tick-interval']
let tickValues = []
switch (tickInterval) {
case 'months':
const numYears = Math.ceil(numValues / 12)
tickValues = _.times(numYears, (index) => {
return index * 12
})
break
case 'quarters':
const intervalCount = Math.ceil(numValues / 4)
tickValues = _.times(intervalCount, (index) => {
return index * 4
})
break
}
chart.xAxis.tickValues(tickValues)
}
chart.xAxis
.axisLabel(config['x-title'])
.axisLabelDistance(config['x-title-offset'])
.showMaxMin(false)
var yMin = 0
var yMax = 100000
if (config.hasOwnProperty(['y-min'])) {
yMin = config['y-min']
}
if (config.hasOwnProperty('y-max')) {
yMax = config['y-max']
} else if (inputOptions.hasOwnProperty('yMax')) {
yMax = inputOptions.yMax
}
if (config.hasOwnProperty('y-axis-tick-format')) {
const yAxisTickFormat = config['y-axis-tick-format']
switch (yAxisTickFormat) {
case 'currency':
chart.yAxis.tickFormat(function (d, index) {
if (d) {
return numeral(d).format('$0,0')
}
})
break
case 'percent':
chart.yAxis.tickFormat(function (d, index) {
if (d) {
return d + '%'
}
})
break
}
}
chart.forceY([yMin, yMax])
chart.yAxis.scale().domain([yMin, yMax])
chart.xAxis.tickFormat(function (d, index) {
if (d) {
return inputOptions.xTickLabels[d]
}
})
chart.xAxis.rotateLabels(-45)
chart.lines.dispatch.on('elementClick', function (e) {
inputOptions.chartEvents(inputOptions.xTickLabels[e[0].point.label], e[0].point.value)
chart.lines.clearHighlights()
chart.lines.highlightPoint(inputOptions.xTickLabels[e[0].point.label], e[0].point.value, true)
})
chart.interactiveLayer.dispatch.on('elementMousemove', function (e) {
inputOptions.chartEvents(inputOptions.xTickLabels[e[0].point.label], e[0].point.value)
chart.lines.clearHighlights()
chart.lines.highlightPoint(inputOptions.xTickLabels[e[0].point.label], e[0].point.value, true)
})
chart.interactiveLayer.dispatch.on('elementMouseout', function (e) {
chart.lines.clearHighlights()
})
var id = '#' + inputOptions.id
d3.select(id + ' svg')
.datum(inputOptions.data)
.call(chart)
var titleOffset = document.getElementById(inputOptions.id).offsetWidth / 2
d3.selectAll('.nv-axisMax-y').remove()
d3.select(id + ' svg').select('svg > text').remove()
d3.select(id + ' svg')
.append('text')
.attr('x', titleOffset)
.attr('y', 20)
.attr('text-anchor', 'middle')
.text(config['title'])
nv.utils.windowResize(chart.update)
return chart
})