npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@domoinc/axis

v4.4.0

Published

Axis - Domo Widget

Downloads

26

Readme

Axis

Configuration Options

addBaseline

Type: boolean
Default: false

Adds the baseline path above the labels

addGridlines

Type: boolean
Default: false

Flag to show vertical or horizontal grid lines.

addLabels

Type: boolean
Default: true

Flag to show the text labels on the axis

addTicks

Type: boolean
Default: false

Flag to show the tick lines on the axis.

addZeroline

Type: boolean
Default: false

Makes the gridline corresponding to the zero tick show, and have increased stroke width

axesLabelColor

Type: color
Default: #888

Color of all the labels on the axes

axesLabelFontFamily

Type: string
Default: Open Sans

Font family for axes labels

axesLabelLetterSpacing

Type: number
Default: 0
Units: px

Letter spacing for the axes labels.

axesLabelSize

Type: number
Default: 11
Units: px

Size of the labels

axesLineColor

Type: color
Default: #E3E3E3

Color of all lines found in the axes

chartName

Type: string
Default: Axis

Name of chart for Reporting.

duration

Type: number
Default: 750
Units: ms

Duration of the animation

height

Type: number
Default: 250
Units: px

intelligentTicks

Type: boolean
Default: true

Try and show an appropriate number of ticks given available space.

intelligentTrunc

Type: boolean
Default: true

Truncate the labels so they do not over lap.

maxLegendSpace

Type: number
Default: 50

orient

Type: string
Default: bottom

Sets the orientation of the axis. Options: bottom, top, left, right

scale

Type: scale
Default: function scale(x) { return output(x); }

d3 scale object for the axis.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showTooltip

Type: boolean
Default: false

undefined

textFontFamily

Type: string
Default: Open Sans

tickFormat

Type: function
Default: function (d) { return i18n.summaryNumber(d); }

Label format function for the tick labels.

tickPadding

Type: number
Default: 7

Padding between the tick line and text.

tickSize

Type: number
Default: 5

Size of the tick line.

tickSpacing

Type: number
Default: 40

Space between each tick.

tooltipBackgroundColor

Type: color
Default: #555555

tooltipTextColor

Type: color
Default: #FFFFFF

tooltipTextSize

Type: number
Default: 14
Units: px

undefined

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

x

Type: number
Default: 0

The x coordinate for the axis.

y

Type: number
Default: 0

The y coordinate for the axis.

Data Definition

Events

Dispatch Events

External Events

Example

var aHeight = 400;
var aWidth = 400;

// var ascale = d3.scale.ordinal().domain(d3.range(0, 1000)).rangePoints([0,aWidth], 0);
// var ascale = d3.scale.linear().domain([-1000, 1000]).range([0, aWidth]);
var ascale = d3.time.scale().domain([new Date('2014-01-11'), new Date('2014-12-29')]).range([0,500]);
// var ascale = d3.scale.ordinal().domain(['A','B','C']).rangeRoundBands([0, aWidth], 0.25);

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr('width', 500)
  .attr('height', 500)
  .append("g")
  .attr("transform", "translate(50,250)")
  .chart("Axis")
  .c({
    'width': aWidth,
    'height': aHeight,
    'scale': ascale,

    //'addGridlines': true,
    // 'addGridlines': false,
    //'addZeroline': true,
    // 'addZeroline': false,
    //'addTicks': true,
    // 'addTicks': false,

    //'addBaseline': true,
    // 'addBaseline': false,
    //'tickSize': 5,

    // 'orient': 'top',
    'orient': 'bottom',
    // 'orient': 'top',
    // 'orient': 'right',

    showTooltip: true,
  })


//Render the chart with data
chart._notifier.showMessage(true);
chart.draw();


// var orient = 'top';
// var orient = 'bottom';
// var orient = 'left';
var orient = 'right';

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': true,
//     'addTicks': true,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': true,
//     'addZeroline': false,
//     'addTicks': true,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': true,
//     'addZeroline': true,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': false,
//     'addTicks': true,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': true,
//     'addZeroline': false,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': true,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': false,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)