timelines-chart

v2.14.0

A parallel (swimlanes) timelines D3 chart for representing state of time-series over time. For more information about how to use this package see README

Latest version published 16 days ago

License: MIT

NPM

GitHub

Package Health Score

65 / 100

security
No known security issues
popularity
Small
maintenance
Sustainable
community
Limited

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.14.0	\|	12/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.13.0	\|	10/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.12.1	\|	02/2023	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.0.2	\|	10/2016		0 C 0 H 0 M 0 L	1 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (2,170)

GitHub Stars: 570
Forks: 123
Contributors: 6

Direct Usage Popularity

The npm package timelines-chart receives a total of 2,170 downloads a week. As such, we scored timelines-chart popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package timelines-chart, we found that it has been starred 570 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Limited

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 6
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like timelines-chart is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Sustainable

Commit Frequency

Open Issues: 63
Open PR: 3
Last Release: 16 days ago
Last Commit: 16 days ago

Further analysis of the maintenance status of timelines-chart based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that timelines-chart demonstrates a positive version release cadence with at least one new version released in the past 3 months.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >=12

Age: 8 years
Dependencies: 12 Direct
Versions: 48
Install Size: 1.42 MB
Dist-tags: 1
# of Files: 14
Maintainers: 1
TS Typings: Yes

timelines-chart has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

Timelines Chart

A parallel timelines layout (swimlanes) for representing state of time-series over time. Each timeline segment can be assigned a value on a color scale, either continuous (heatmap mode) or ordinal (for categorical representation). Time-series can be grouped into logical groups, represented as distinct sections. Allows for exploration using drag-to-zoom or a timeline brush.

Check out the examples:

Quick start

import TimelinesChart from 'timelines-chart';

or using a script tag

then

const myChart = new TimelinesChart()
  .data();

API reference

Method	Description	Default
data([array])	Getter/setter for chart data (see below for syntax details).	`[]`
width([number])	Getter/setter for the chart width in px.	<window width>
maxHeight([number])	Getter/setter for the chart's maximum height in px.	640
maxLineHeight([number])	Getter/setter for the maximum height of each line, in px.	12
leftMargin([number])	Getter/setter for the chart's left margin, which contains the left-side group axis labels.	90
rightMargin([number])	Getter/setter for the chart's right margin, which contains the right-side series axis labels.	100
topMargin([number])	Getter/setter for the chart's top margin, which contains the color legend.	26
bottomMargin([number])	Getter/setter for the chart's bottom margin, which contains the time axis labels.	30
useUtc([boolean])	Getter/setter for whether to display time in the local time zone (`false`) or in UTC (`true`).	false
timeFormat([string])	Getter/setter for the time format to use in tooltips. See d3-time-format for available options.	`%Y-%m-%d %-I:%M:%S %p`
xTickFormat([function])	X axis tick label formatter function, as pass-through to d3-axis. By default, it uses a multi-scale time format.
dateMarker([date object])	Getter/setter for the date marker to show as a vertical line. If a falsy value is used, no marker is shown.	`null`
minSegmentDuration([number])	Getter/setter for the minimum time duration (in msecs) of a segment in order for it to be shown.	0
minSegmentWidth([number])	Getter/setter for the minimum displayed px width of a segment.	1
getNLines()	Returns number of timelines currently visible in the chart.	-
getTotalNLines()	Returns total number of timelines in the chart.	-
zQualitative([boolean])	Getter/setter for whether the segment data color values are categorical (true) or quantitative (false). This will affect how the color legend is presented, and changing it will automatically toggle the `zColorScale` between defaults.	false
zColorScale([d3 scale object])	Getter/setter for the color scale to be used for coloring the segments according to their data values. This object should be a D3 color scale object.	qualitative: `d3.scaleOrdinal()` quantitative: `d3.scaleSequential()`
zDataLabel([string])	Getter/setter for the units of z data. Used in the tooltip descriptions.
zScaleLabel([string])	Getter/setter for the color scale label. Only applicable to quantitative z scales.
sort([[function, function]])	Sorts the timelines and groups according to two name comparison functions: `function(labelCmpFn, groupCompFn)`. Each comparison function should follow the signature `function(nameA, nameB)` and return a numeric value.	`(, )`
sortAlpha([[boolean]])	Sorts the timelines and groups in alpha-numeric order. The boolean parameter indicates whether the order should be ascending (`true`) or descending (`false`).	true
sortChrono([[boolean]])	Sorts the timelines and groups in chronological order of their most recent data point. The boolean parameter indicates whether the order should be ascending (`true`) or descending (`false`).	true
zoomX([[startDate, endDate]])	Getter/setter for the chart's time (horizontal) zoom. A null value indicates a zoom reset to full extent.	`null`
zoomY([[number, number]])	Getter/setter for the chart's vertical zoom. The parameter should follow the syntax `[, ]`. A null value indicates a zoom reset to full extent.	`null`
zoomYLabels([[number, number]])	Getter/setter for the chart's vertical zoom in terms of timeline labels. The parameter should follow the syntax `[, ]`. A null value indicates a zoom reset to full extent.	`null`
onZoom([function])	Getter/setter for the callback function for user initiated zoom (incl. zoom resets). Callback will have two parameters: `onZoom([startDate, endDate], [startY, endY])`.	`null`
enableOverview([boolean])	Getter/setter for whether to show an interactive timeline overview below the chart.	true
overviewDomain([[startDate, endDate]])	Getter/setter for the time extent shown in the overview section below the chart.	<auto-derived from data: `[minTs, maxTs]`>
getVisibleStructure()	Returns data representation of timelines currently visible in the chart.	-
getSvg()	Returns graphic (SVG) representation of currently visible chart.	-
enableAnimations([boolean])	Getter/setter for whether to animate transitions.	true
onLabelClick([function])	Getter/setter for the callback function for clicking on the Y axis labels. Callback will include the clicked label (if applicable) and group parameter: `onLabelClick(, )`.	`null`
onSegmentClick([function])	Getter/setter for the callback function for clicking on a segment. Callback will return a segment object: `onSegmentClick(segment)`.	`null`
segmentTooltipContent([function])	Getter/setter for the callback function to populate a custom tooltip for segments. The segment data point is provided as sole argument: `segmentTooltipContent(d)`. Supports plain text or HTML content.	`null`
refresh()	Rerenders chart.	-

Data syntax

[
  {
    group: "group1name",
    data: [
      {
        label: "label1name",
        data: [
          {
            timeRange: [, ],
            val: 
          },
          {
            timeRange: [, ],
            val: 
          },
          ...
        ]
      },
      {
        label: "label2name",
        data: [...]
      },
      ...
    ],
  },
  {
    group: "group2name",
    data: [...]
  },
  ...
]

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!

timelines-chart dependencies

d3-array d3-axis d3-brush d3-color-legend d3-scale d3-scale-chromatic d3-selection d3-time-format d3-tip kapsule svg-text-fit svg-utils

timelines-chart development dependencies

@babel/core @babel/preset-env @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-terser postcss postcss-nested postcss-simple-vars rimraf rollup rollup-plugin-dts rollup-plugin-postcss typescript

FAQs

What is timelines-chart?

A parallel (swimlanes) timelines D3 chart for representing state of time-series over time. Visit Snyk Advisor to see a full health score report for timelines-chart, including popularity, security, maintenance & community analysis.

Is timelines-chart popular?

The npm package timelines-chart receives a total of 2,170 weekly downloads. As such, timelines-chart popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is timelines-chart well maintained?

We found indications that timelines-chart maintenance is sustainable demonstrating some project activity. We saw a total of 6 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is timelines-chart safe to use?

The npm package timelines-chart was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 19 December-2024, at 19:30 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP