@domoinc/titled-sales-marker v6.0.6
TitledSalesMarker
Configuration Options
animationDelay
Type: number
Default: 500
Units: ms
Specify the delay for app animations
animationDuration
Type: number
Default: 2000
Units: ms
Specify the length you want the animation to animate for
chartName
Type: string
Default: "TitledSalesMarker"
Name of chart for Reporting.
fontWeight
Type: number
Default: 400
Units: px
The font weight for the names, and numbers
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.
letterSpacing
Type: number
Default: 1
Units: px
The letter spacing for the names, and numbers
lineAnimationDuration
Type: number
Default: 500
Units: ms
Specify the length you want the animation to animate for
lineColor
Type: color
Default: "#F68C35"
The line and circle color
lineWidth
Type: number
Default: 2
Units: px
The width of the line
manualTransition
Type: boolean
Default: false
Specify your own circle transition
pulseSetting
Type: string
Default: "function widthPulse(selection) {\n\t selection\n\t .transition()\n\t .ease('linear')\n\t .duration(_Chart.c('lineAnimationDuration') / 2)\n\t .attr('stroke-width', _Chart.c('lineWidth') * 1.5)\n\t .transition()\n\t .ease('linear')\n\t .duration(_Chart.c('lineAnimationDuration') / 2)\n\t .attr('stroke-width', _Chart.c('lineWidth'));\n\t }"
After the chart update the circle will pulse
radiusSize
Type: number
Default: 10
Units: px
Specify your own circle pulse
scale
Type: scale
Default: "function scale(x) {\n\t return output(x);\n\t }"
The scale for the lines
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textColor
Type: color
Default: "#333"
The Color of the names, and numbers
textFontFamily
Type: string
Default: "Open Sans"
Font family for any text.
textSize
Type: number
Default: 12
Units: px
The font size for the names, initials, and numbers
transitionSetting
Type: string
Default: "zoom"
The circle transition
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Units: px
Data Definition
Image
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return String(line[2]); }Name
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return String(line[0]).toUpperCase(); }Value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }Default accessor:
function (line) { return Number(line[1]); }Events
Dispatch Events
External Events
Example
// Ideal Data
// var myScale = d3.scale.linear()
// .domain([0, 50000]) //min and max number of sales
// .range([0, 500])
// .clamp(true);
var data = [
["Chris Williams", 167, 'https://domo.domo.com/domoweb/avatar/full/domo/857654287']
// ['Karen Damaso', 16700,123]
];
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr({
height: '500px',
width: '1000px'
})
.chart('TitledSalesMarker')
.c({
width: 0,
height: 100,
//'textSize': 40,
'radiusSize': 10,
pulseSetting: 'widthPulse',
'transitionSetting': 'zoom',
'lineWidth': 2
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);