Nonchalantly Perusing Magazines
    Wondering what’s next for npm?Check out our public roadmap! »

    @domoinc/needle-gauge

    6.1.1 • Public • Published

    NeedleGauge

    A gauge that shows a value within ranges.

    Configuration Options

    animationDuration

    Type: number
    Default: 2000
    Units: milliseconds

    Duration of the needle animation in milliseconds

    chartLabelColor

    Type: color
    Default: "#888888"

    Color for the minimum and maximum labels

    chartName

    Type: string
    Default: "NeedleGauge"

    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

    gaugeFillPrimaryColor

    Type: color
    Default: "#73B0D7"

    Color for the value text and labels' color

    gaugeStrokeWidth

    Type: number
    Default: 1
    Units: px

    Stroke width of the arcs

    gaugeWidth

    Type: number
    Default: 63
    Units: px

    Width of the arcs

    generalSeparatorColor

    Type: color
    Default: "#FFFFFF"

    Stroke color of the arcs

    height

    Type: number
    Default: 250
    Units: px

    label

    Type: string
    Default: "Sales"

    Label for the gauge

    labelTextSize

    Type: number
    Default: 22.5
    Units: px

    Text size for all labels

    needleColor

    Type: color
    Default: "#333"

    Color of the needle

    needleWidth

    Type: number
    Default: 36
    Units: px

    Width of the needle indicator at the base

    outerRadius

    Type: number
    Default: 225
    Units: px

    Radius of the outside of the gauge.

    ranges

    Type: array
    Default: [[75,100],[25,50],[0,25],[50,75]]

    Range of the minimum and maximum values for the gauge

    shouldValidate

    Type: boolean
    Default: true

    Flag for turning off data validation

    textFontFamily

    Type: string
    Default: "Open Sans"

    Font family of all labels and values

    updateSizeableConfigs

    Type: boolean
    Default: true

    Flag for turning off the mimic of illustrator's scale functionality

    valueTextSize

    Type: number
    Default: 45
    Units: px

    Text size for the value

    width

    Type: number
    Default: 250
    Units: px

    Data Definition

    Label

    Type: string

    Default validate:

    function (d) { return this.accessor(d) !== undefined; }

    Default accessor:

    function (line) { return line[0] === undefined ? undefined : String(line[0]); }

    Value

    Type: number

    Default validate:

    function (d) { return !isNaN(this.accessor(d)); }

    Default accessor:

    function (line) { return parseFloat(line[1]);
                }

    Events

    Dispatch Events

    External Events

    Example

    //Setup some fake data
    var data = [
      ['Sales', 77]
    ];
     
    var aHeight = 500;
    var aWidth = 500;
    //Initialze the widget
    var chart = d3.select('#vis')
      .append('svg')
      .attr('width', aWidth)
      .attr('height', aHeight)
      .append('g')
      .chart('NeedleGauge')
      .c('label', 'Sales')
      .c('height', aHeight)
      .c('width', aWidth)
      .c('ranges', [
        [125, 150],
        [100, 125],
        [75, 100],
        [50, 75],
        [25, 50],
        [0, 25]
      ]);
     
    //Render the chart with data
    chart._notifier.showMessage(true);
    chart.draw(data);

    Keywords

    Install

    npm i @domoinc/needle-gauge

    DownloadsWeekly Downloads

    4

    Version

    6.1.1

    License

    SEE LICENSE IN LICENSE

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar