@domoinc/funnel-total-layer v1.0.1
FunnelTotalLayer
Configuration Options
barLineTransitionTime
Type: number
Default: null
Units: ms
undefined
barTextSize
Type: number
Default: 12
Units: px
barTransitionTime
Type: number
Default: 250
Units: ms
undefined
barsPercent
Type: number
Default: 0.775
Percent of width allocated to bars.
barsTextColor
Type: undefined
Default: "#FFF"
Color of text inside bars
chartName
Type: string
Default: "FunnelLayer"
Name of chart for Reporting.
chartPrimarySeriesColors
Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]
The primary colors used to represent series data
generalWashoutColor
Type: color
Default: "#E4E5E5"
Color used to indicate elements that are not being highlighted
height
Type: number
Default: 250
Units: px
isOnMobile
Type: boolean
Default: false
If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.
labelBarPaddingPercent
Type: number
Default: 0.174
Percent of width allocated to padding between labels and bars.
labelPercent
Type: number
Default: 0.174
Percent of width allocated to labels.
lineColor
Type: color
Default: "#E3E3E3"
undefined
lineStartOffset
Type: number
Default: 5
Units: px
undefined
outerPadding
Type: number
Default: 0
Units: decimal
Range Band Outer Padding 0,1. 0.5 means padding and bar width are equal. Outer === on outer edges.
padding
Type: number
Default: 0.2
Units: decimal
Range Band Padding 0,1. 0.5 means padding and bar width are equal.
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textColor
Type: undefined
Default: "#FFF"
Color of text inside bars
textFontFamily
Type: string
Default: "Open Sans"
textSize
Type: number
Default: 12
Units: px
totalBarWidthPaddingPercent
Type: number
Default: 0.15
Percent of the total charts width allocated to padding.
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueColor
Type: color
Default: "#333"
width
Type: number
Default: 250
Units: px
Data Definition
label
Type: string
Default validate:
undefined
Default accessor:
function (line) {
return line[0] === undefined ? undefined : String(line[0]);
}
value
Type: number
Default validate:
undefined
Default accessor:
function (line) {
return Number(line[1]);
}
Events
Dispatch Events
dispatch:mouseenter
dispatch:mouseleave
dispatch:mouseover
dispatch:mouseout
External Events
external:mouseover
external:mouseout
external:mouseenter
external:mouseleave
Example
//Setup some fake data
var data = {
// max: 8000,
max: 3000,
layer: 'Prospects',
data: [
['SEM', 1000],
['DISPLAY', 2000],
['SOCIAL', 700],
['FIELD', 600]
]
};
var aHeight = 60;
var aWidth = 820;
//Initialze the widget
var chart = d3.select("#vis")
.append("svg")
.attr({
height: '5000px',
width: '5000px'
})
.append("g")
.chart("FunnelTotalLayer")
.c({
width: aWidth,
height: aHeight
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);
//chart.draw({
// max: 8000,
// layer: 'Prospects',
// data: [
// ['SEM2', 1100],
// ['DISPLAY2', 2100],
// ['SOCIAL2', 710],
// ['FIELD2', 610]
// ]
//});
// setTimeout(function() {
// var fun = {
// max: 8000,
// layer: 'Prospects',
// data: [
// ['SEM2', 1100],
// ['DISPLAY2', 2100],
// ['SOCIAL2', 710],
// ['FIELD2', 610]
// ]
// };
// chart.draw(fun);
// }, 2000);
// TEST Hovers
// setTimeout(function () {
// chart.trigger('external:mouseover', {name: 'SEM', data: ['SEM', 4000]});
// }, 1000);
// setTimeout(function () {
// chart.trigger('external:mouseover', ['hjusjM', 4000], 0);
// }, 2000);
// setTimeout(function () {
// chart.trigger('external:mouseover', ['DISPLAY', 201230], 0);
// }, 3000);
// d3.select("svg").insert("rect", ":first-child")
// .attr("height", aHeight)
// .attr("width", aWidth)
// .attr("stroke", "black")
// .style("fill", "#2F3132")
// .style("fill", "white")
// .style("fill-opacity", 1);
// //----------------------------------------------------------------------------------
// // FUNNEL LABEL
// //----------------------------------------------------------------------------------
// var aWidth2 = 70;
// Initialze the widget
// var chart2 = d3.select("svg")
// .append('g').attr('class', 'chart2')
// .attr("transform", "translate(" + 50 + "," + 300 + ")")
// .chart("FunnelLabel")
// .c({
// width: aWidth2,
// textSize: 10,
// });
// d3.select(".chart2").insert("rect", ":first-child")
// .attr("height", 1)
// .attr("width", aWidth2)
// .attr("stroke", "black")
// .style("fill", "#2F3132")
// .style("fill", "white")
// .style("fill-opacity", 1);
// Render the chart with data
// chart2.draw([
// ['Prospects', 3400]
// ]);
// setTimeout(function () {
// chart2.trigger('showHighlight', 3400, 'lightblue');
// }, 1000);
// setTimeout(function () {
// chart2.trigger('removeHighlight');
// }, 2000);