Have ideas to improve npm?Join in the discussion! »

    @domoinc/nested-pie

    4.0.1 • Public • Published

    NestedPie

    A pie chart with an inner pie chart, where the outer is showing capacity and the inner is portraying actual

    Configuration Options

    chartName

    Type: string
    Default: "NestedPie"

    Nested Pie Chart

    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

    chartSecondarySeriesColors

    Type: colorArray
    Default: ["#4E8CBA","#D9EBFD","#31689B","#D9EBFD","#D9EBFD","#559E38","#DDF4BA","#387B26","#DDF4BA","#DDF4BA","#E45621","#FDECAD","#A43724","#FDECAD","#FDECAD","#FDECAD"]

    The secondary colors used to represent series data

    colorScale

    Type: function
    Default: ""

    undefined

    generalSeparatorColor

    Type: color
    Default: "#FFFFFF"

    Color for element separators

    generalWashoutColor

    Type: color
    Default: "#E4E5E5"

    Color used to indicate elements that are not being highlighted

    height

    Type: number
    Default: 250
    Units: px

    numberOfCategories

    Type: number
    Default: 50

    Number Of Categories

    radius

    Type: number
    Default: 10

    Chart Radius

    secondaryColorScale

    Type: function
    Default: ""

    undefined

    shouldValidate

    Type: boolean
    Default: true

    Flag for turning off data validation

    textFontFamily

    Type: string
    Default: "Open Sans"

    tooltipBackgroundColor

    Type: color
    Default: "#555555"

    Background color of the tooltip

    tooltipTextColor

    Type: color
    Default: "#FFFFFF"

    Color of the tooltip text

    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

    Category

    Type: string

    Default validate:

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

    Default accessor:

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

    Current Value

    Type: number

    Default validate:

    function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) !== null && this.accessor(d) >= 0;}

    Default accessor:

    function (line) { return ((line[2] === undefined || line[2] === null) ? line[2] : Number(line[2])); }

    Max Value

    Type: number

    Default validate:

    function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) !== null && this.accessor(d) >= 0; }

    Default accessor:

    function (line) { return ((line[1] === undefined || line[1] === null) ? line[1] : Number(line[1])); }

    Events

    Dispatch Events

    External Events

    Example

    //Setup some fake data
    var data = [
      ['North', 50, 20],
      ['South', 20, 15],
      ['East', 100, 60],
      ['West', 60, 30]
    ];
     
    var aHeight = 500;
    var aWidth = 500;
     
    //Initialze the widget
    var chart = d3.select('body')
      .append('svg')
      .attr({
        'width': aWidth + 'px',
        'height': aHeight + 'px'
      })
      .append('g').attr('transform', 'translate(' + 50 + ',' + 50 + ')')
      .chart('NestedPie')
      .c({
        'height': 400,
        'width': 400
      });
     
    //Render the chart with data
    chart.draw(data);
     
     

    Keywords

    Install

    npm i @domoinc/nested-pie

    DownloadsWeekly Downloads

    6

    Version

    4.0.1

    License

    SEE LICENSE IN LICENSE

    Last publish

    Collaborators

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