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

@avinlab/d3-timeseries-multi-chart

v0.2.7

Published

Chart for multi timeseries datastreams

Downloads

40

Readme

d3-timeseries-multi-chart build

Chart for multi timeseries datastreams.

Features

  • Draw some data lines on same chart.
  • Draw separate axises or common one for data lines.
  • Canvas render mode for data lines to level up performance.
  • Zoom and drag time periods.
  • Use Line, Area or Bar drawing styles for data lines.
  • Some curve types for data lines.
  • Preview data values on mouse over.
  • Allow to live update chart's data.

Demo

[ >> Online demo << ]

Preview

Install

# Yarn
yarn add @avinlab/d3-timeseries-multi-chart

# NPM
npm install --save @avinlab/d3-timeseries-multi-chart

Usage

import TimeseriesMultiChart from '@avinlab/d3-timeseries-multi-chart';

const chart = new TimeseriesMultiChart({
    target: '#chartContainer',
    chartDuration: 3600 * 1000,
    width: 800,
    height: 600,
    showTimeAxis: false,
});
chart.render([
    {
        label: 'Data 1',
        color: '#F5498B',
        data: [
            [new Date('2019-01-05 13:00:00'), 1.5],
            [new Date('2019-01-05 13:01:00'), 1.2],
            [new Date('2019-01-05 13:02:00'), 1.0],
            [new Date('2019-01-05 13:03:00'), 0.5],
        ],
        showAxis: true,
        strokeWidth: 2,
    },
    {
        label: 'Data 2',
        color: '#43BF4D',
        data: [
            [new Date('2019-01-05 13:00:00'), 3.2],
            [new Date('2019-01-05 13:01:00'), 1.2],
            [new Date('2019-01-05 13:02:00'), 5.2],
            [new Date('2019-01-05 13:03:00'), 1.2],
        ],
        showAxis: true,
        showDots: true,
    },
]);

API

Chart options

  • target (String | Element) - target element to mount chart svg (default: #chart).
  • renderMode (String) - render mode for dataLines drawing (canvas | svg) (default: canvas).
  • width (Number) - width of chart (default: 500).
  • height (Number) - height of chart (default: 300).
  • chartDuration (Number) - default chart duration (default: 3600000 (1hour)).
  • showTimeAxis (Boolean) - show time axis (default: true).
  • timeAxisHeight (Number) - time axis height (default: 20).
  • tipTimeWidth (Number) - tip time width (default: 125).
  • tipTimeFormat (String) - tip time dateTime format string (default: %Y-%m-%d %H:%M:%S).
  • commonDataAxis (Boolean) - common axis for data lines (default: false).
  • commonDataAxisWidth (Number) - width of common data axis (default: 30).
  • autoScale (Boolean) - auto scale data points of visible part.
  • chartPaddingFactor (Number) - data lines padding factor : 1/N of chart height (less is more) (default: 30).
  • draggable (Boolean) - allow to drag (default: true).
  • zoomable (Boolean) - allow to zoom (default: true).
  • showMouseTip (Boolean) - enable on mouseover values display (default: ).
  • minZoomTime (Number) - min limit for zooming (-1 is disabled) (default: -1).
  • maxZoomTime (Number) - max limit for zooming (-1 is disabled) (default: -1).
  • dataAxisTickHeight (Number) - tick of data axis height (default: 20).

Chart methods

  • render - render data on chart. Params: (DataStreamsArray - required first time)
  • update - render method alias.
  • setChartDuration - update chart duration (change time zoom level). Params: (newChartDuration)
  • setLastChartTime - update last chart time (change chart position). Params: (newLastChartTime)
  • on - add event handler.
  • off - remove event handler.

Chart DataStreamsArray item options

  • data (Array) Required - array of data values. Array item structure: [date: DateTime, value: Number].
  • color (String) - color string for data line.
  • colorGradient (Array) - colors for data line gradient fill.
  • label (String) - dataStream human name.
  • showAxis (Boolean) - show Y axis for current dataStream (default: true).
  • strokeWidth (Number) - stroke width of data line (default: 1).
  • showDots (Boolean) - show data points on data line (default: false).
  • dotsRadius (Number) - data points radius (default: x2 of strokeWidth).
  • type (String) - type of data line (line | area | bar) (default: line).
  • areaFillOpacity (Number) - opacity factor for color filling of area data line type.
  • curve (String) - data line curve type (linear | stepAfter | stepBefore | monotoneX) (default: linear).
  • scaleRange (array) - Scale result range in percents of chart height [min, max]. For Example [0, 50] - draw data line in bottom part of chart and [50, 100] in top one.
  • scaleDomain (Array) - Custom scale domain [min, max].
  • scaleVisible (Boolean) - Auto scale data line in visible time period.

Event handlers params

zoom

  • beforeChartDuration - chart duration before zoom
  • afterChartDuration - chart duration after zoom
  • scaleFactor - zoom scale factor

dragStart

  • startX - mouse x value on start dragging

dragEnd

  • endX - mouse y value on finish dragging

drag

  • beforeLastChartTime - last chart time before drag
  • afterLastChartTime - last chart time after drag
  • diff - dragging diff in pixels

License

MIT © avin