attestate/svg-line-chart

SVG chart generator library (works fully server-side)

svg-line-chart

SVG chart generator library (works fully server-side)

API Documentation | Changelog

---

Why another library for charts?

• Runs on the server - unlike all 99% available libraries
• Minimum size - browser-svg-line-chart.js is 34KB (d3.min.js is 264KB!); anyway size doesn't matter here as it runs on your server!
• Just generates a <svg> line chart. NO EXTRA JS OR CSS.
• Responsiveness through <svg> tag
• Unit tests & Small code base
• CJS and ESM bundles

About

svg-line-chart is a server side charting library. Create a simple line chart with numbers on the y-axis and Date or Integers on the x-axis.

Screenshot

We use this in production at https://news.kiwistand.com/stats

Installation

$ npm i svg-line-chart vhtml htm

Usage

A working example can be found in ./scripts/serve.mjs.

import htm from "htm";
import vhtml from "vhtml";

const html = htm.bind(vhtml);

import { plot } from 'svg-line-chart'

const x = [
  "2021-01-01",
  "2021-02-01",
  "2021-03-01",
  "2021-04-01",
  "2021-05-01",
].map((d) => new Date(d));

const y = [1, 2, 3, 4, 5];

// chart is a html string that can be rendered by the browser
const chart = plot(html)(
  { x, y },
  {
    props: {
      style: "display:block;margin:0 auto;",
    },
    margin: 25,
    width: 70,
    height: 20,
    title: "A line chart",
    polygon: {
      fill: 'none',
      style: 'fill:url(#polygrad);',
      strokeWidth: 0.01,
      stroke: "white",
    },
    line: {
      fill: "none",
      strokeWidth: 0.1,
      stroke: "black",
    },
    polygonGradient: {
      offSet1: "0%",
      stopColor1: "#ffffff00",
      offSet2: "100%",
      stopColor2: "#ffffff00",
    },
    xAxis: {
      strokeWidth: 0.1,
      stroke: "black",
    },
    yAxis: {
      strokeWidth: 0.1,
      stroke: "black",
    },
    xLabel: {
      fontSize: 1.5,
      name: "Date"
    },
    yLabel: {
      fontSize: 1.5,
      name: "PRICE (EUR)",
      locale: "en-US",
    },
    xGrid: {
      strokeWidth: 0.05,
      stroke: "lightgrey",
    },
    yGrid: {
      strokeWidth: 0.05,
      stroke: "lightgrey",
    },
    yNumLabels: 10,
  }
)

Notes

• plot will try to automatically scale the y labels based on how many labels you prefer using yNumLabels. Please note that the algorithm behind yNumLabels is based on a best-effort strategy. There won't be a guarantee that it'll return the number specified.
• You will probably need more than 31 days on the x axis for the date scaling to work.

API

The API documentation is available at API.md.

Contributing

We love contributions from the community. Find a good first issue.

Want to suggest a feature or even better raise a PR for it? Head over to the issues section.

Changelog

The changelog is avaliable at CHANGELOG.md.

License

See License.

References

• https://css-tricks.com/how-to-make-charts-with-svg/

svg-line-chart's Issues

Latest data points of chart plot rectangular curve

Scope

• The end of the svg-line-chart on rugpullindex.com currently shows a weird rectangular shape in the curve which makes no sense. Given my observations, this is happening every since we're crawling hourly.

- Is this a problem with svg-line-chart and the recent [changes](https://github.com/rugpullindex/svg-line-chart/commit/ef181196a95ff7138251b9e1dcb5343cbf26cc06) that now measure time distances in hours?

Deliverable

• Seek understanding if this is a problem with svg-line-chart or with the data provided by the RPI backend
• If issue is in svg-line-chart, send fix via PR.

NextJS?

Can this be implemented on NextJS? and if so, can you please show me how or atleast give me an easy explanation on how to? Thanks!

scaleDates function doesn't properly consider svg real estate and renders beyond the right border

On PDT timezone, "if labels are shown at right position" test fails with a negative value

Indeed after changing my Mac's timezone to PDT, I get a similar error:

npm run test -- --match="*if labels are shown*"

> [email protected] test /Users/user/Projects/node-svg-line-chart
> ava --verbose "--match=*if labels are shown*"


{ pos: -1.5254237288135595, name: 'Dec 2020' } { pos: 0, name: 'Jan 2021' } { pos: 1.576271186440678, name: 'Feb 2021' }
  ✖ if labels are shown at right position
  ─

  if labels are shown at right position

  Value is not `true`:

  false

  › file://test/index_test.mjs:180:9

  ─

  1 test failed

Originally posted by @TimDaub in #20 (comment)

define `.prettierrc` in the repo

Prettier is a useful tool which increases code readability. Since many people are working on the repo it is important that everyone uses the same formatting configuration.

An example where a formatting problem arose: #34 (comment)

Deliverables

• define prettierrc
• define .prettierignore for build folders

Test Usage section in readme.md with test-readme-md

Scope

• With eth-fun, we're already using https://github.com/timdaub/test-readme-md to test its readme.md: https://github.com/rugpullindex/eth-fun/blob/master/test/readme_test.js That's great as it allows us to control the user experience of a new users trying our samples. They're almost guaranteed to have success with our libraries when copying snippets!
• But with svg-line-chart, we're not testing the readme.md, so there's a risk that even the current "Usage" section doesn't work

Deliverables

• Using test-readme-md, test the JS code in the readme.md and make sure the GH Action tests are failing if the readme's example doesn't work properly

Time Estimate

• 2h

id of linearGradient shouldn't be supplied by the user

Right now, line 44 is necessary for the gradient to be shown.

https://github.com/rugpullindex/svg-line-chart/blob/b2b3bc2b15224af6b141d6dc318186064d477625/scripts/serve.mjs#L42-L47

This is because the <polygon> element creates the gradient and it needs an id of a <linearGradient>. The id of the <linearGradient> is hard-coded as polygrad.

https://github.com/rugpullindex/svg-line-chart/blob/b2b3bc2b15224af6b141d6dc318186064d477625/src/index.mjs#L105-L114

Deliverables

Hard-code fill:url(#polygrad) in the polygon function so the user does not need to pass it.

Time Estimate

1-2 hr

Add test coverage checks into Github Action checks

svg-line-chart has a good test coverage. For future PRs and changes, we want to continue having a good test coverage. Hence, for all new PRs, we want to add a check to GitHub Actions that checks if the test coverage has fallen below a certain threshold. If it did, we want to block a PR from being merged.

• Decide on a test coverage tool that works with ava
• Implement test coverage tool with ava into repository
• Integrate test coverage tool in Github Actions yml to have it run on every PR.

Some data makes chart scale weirdly

Scope

• We want svg-line-chart to capture all necessary information of price over a period of time
• However, it seems like that for data set tickers like TACWHA-52/EUR or TREPEL-36/EUR, the chart doesn't scale well on the vertical price axis.
• E.g. for TACWHA-52/EUR it'd be sufficient to scale between 0-14 EUR but the scale goes beyond 35 EUR

Deliverables

• Write a unit test to cover the bug
• Find out what causes the error and propose a minimal solution

Note

rugpullindex.com currently uses "svg-line-chart: 0.3.0". Please make sure you understand if the problem also happens on the current master etc.

give option to color the area under the function line

Compare l2beat's chart

with the chart of RPI:

Scope

In the options object passed to plot, allow a user to specify e.g. two colors that allow creating a gradient and below the chart's function (as can be seen on L2Beat).

scaleDates function assumes uniform distribution of input dates (e.g. they're all 1 day apart)

update readme for better reach

Based on the points listed at https://skerritt.blog/make-popular-open-source-projects/ I propose the following changes.

Deliverables

• Add a header that includes the following
  • Logo
  • One line slogan
• Quick Install / Usage
  The current usage doesn't work.
• Create a separate file for API documentation. Link this into the Readme.
• Create a separate file for changelog
• Update screenshot

Do we need to add anything else?

Time Estimate

4 hours

add eslint linting to GitHub Actions to prevent e.g. underscore naming of variable names

To the GitHub Actions workflow file, add a command that lints the whole codebase in the ./src folder for its validity. Have this action run every time someone is pushing to master or is proposing a PR.

Make sure that the camelcase rule is activated too - in case it isn't by default.

Gradient is painted over x-axis

Make price symbol a configurable part of y axis label

Scope

• Example of a chart I find nicely laid out

• You can see that for the price labels, the currency (or unit) has simply been formatted into the numbers "$5,94B"
• IMO, that's much clearer than for svg-line-chart as e.g. the current price label simply vanishes if the svg's scaling is manipulated with.
• Additionally, IMO, having the unit right at the number makes thinking about it more intuitive

Deliverables

• Allow the user to define a template string style format on options.yLabel.format, e.g. <%= price %>€
• For lazy evaluating the template, e.g. lodash's _template could be used: https://lodash.com/docs/4.17.15#template

Time estimate

• 2h

Since introduction of hourly crawl, chart looks weird at the tail

deliverables

• to confirm that it's a problem with this library, reproduce the bug using the debug script
• If confirmed, find and publish solution as a PR

time estimate

• I'm speculating that it can be the differenceInHours function of date-fns and that e.g. we should use differenceInMinutes. If so, I'd guess it would take about 1-2h to fix
• if it's something else in the library 2-4h

Hide cut off texts

When you currently visit rugpullindex.com (screenshot above), you can see that the x-label text showing the months, for "September", we can only see a half-cut off "S". Similarly, the same can happen on the y-axis with the prices.

Deliverables:

• For any text that can't make it into the full view; make sure to hide it: Specifically, this means that the half-cut of "S" shouldn't show up anymore.
• Write tests that reproduces and confirms this issue

remove redundant 2021 mention in x-axis

See x-axis, it says: "Jan 2021 Feb 2021 Mar 2021 ..." etc. However, it's unnecessary to mention 12 times to the user that this month is in 2021. Once would be enough. Hence, we should remove the year and put it once somewhere.

peerDependencies require manual installation from package user

allow dual use cjs and esm

Currently, any build of svg-line-chart is targeting nodejs14 and commonjs: https://github.com/rugpullindex/svg-line-chart/blob/f205d99c088033e1b7d0a6732e4d948628f25d33/package.json#L8

However, there's an option that allows making modules available under /esm path. For a guide, see option 2: https://2ality.com/2019/10/hybrid-npm-packages.html

Deliverables:

• Preserve the option to import svg-line-chart as commonjs
• Add an option to import svg-line-chart under /esm as an ECMAScript module

Grey lines cut into x and y axis

If you look closely at the provided image:

You can see that the grey lines that mark a price or date point cut a little bit into the x and y axis.

last datapoint on chart is always pointing downwards

Scope

See chart on rugpullindex.com

• For some reason, by observing it for multiple days now, I have a feeling that the last data point is always pointing down

• I'm wondering fit it's an issue with svg-line-chart or the data of rugpullindex.com; the RPI backend currently uses "svg-line-chart": "0.3.1",

Deliverables

• Go to the 0.3.1 tag and check through some examples if indeed the chart is always rendered falsely with a downward pointing data point.
• The actual deliverable can be one of two things: A statement confirming that it's the RPI backend data fault; or that the svg-line-chart lib has a problem.
• If svg-line-chart has a bug: Deliverable is creating a new issue to fix it

time estimate

• <= 1h

in inputs `xLabel` and `yLabel` the `stroke` and `strokeWidth`parameter also changes the font's style

See screenshot:

Here yLabel is setup as:

{
  strokeWidth: 0.05,
  stroke: "lightgrey",
  fontSize: 1.5,
}

where strokeWidth and stroke both set the stroke on the text and on the small grey horizontal line. However, we don't want to also set a stroke on the text. The text's styles should be set separately.

Deliverables

• Separate style settings for label texts and label lines in options object

chart reserves too much unnecessary space on the left side

Scope

• To display numerical values of arbitrary length, svg-line chart reserves some fixed space on the left side.
• But when those numbers aren't big (in terms of the number of digits that they use), then when trying to center the resulting chart can look false as there's a lot of whitespace on the left side: see screenshot

Deliverables

• Somehow measure the pixel length of the biggest number on the y axis and use minimal space on the left such that when the chart is centered in e.g. a container element it actually looks centered too.
• Another option would be to simply add the same amount of white space to the right side. That'd probably yield an easier solution but would be more difficult to integrate for a user later.

Time estimate

• I'd guess that this issue is rather complex. I'd say an easy solution can take up to 4 hrs.

release a new version for dual use bundle

For big numbers, separate a number's magnitudes with e.g. a comma

Scope

• Currently, this is how big numbers are displayed, e.g. "100000"

Deliverables

• Make it such that all numbers are formatted using e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat such that for a website with locale "en-US", "100000" becomes "100,000"

Time estimate

• 1-2h

Allow plotting multiple functions in one graph

on y axis if there's lot's of elements, it is not properly scaled

setup a GitHub Action machine that runs tests in PST timezone

Scope

• With #24, we have noticed that the library doesn't behave equally in all time zones
• We want to deliver upon the expectation that the library works well on all time zones

Deliverables

• Similar to the current unit testing .yml file, setup a GitHub Action that runs the tests in another time zone e.g. PST
• The idea is that through regularly running the tests in that time zone, we can find issues we may not be aware of today

Time estimate

• I'd say it's fairly straightforward. You have to copy the current unit test .yml and then find a command or GitHub Action to change the machine's time zone before running the tests.

Paid task

This task is paid. Check out our handbook to see how you can get paid: https://github.com/rugpullindex/documents/blob/master/handbook.md#how-to-get-an-offer-approved-to-start-working-on-rpi

In example and screenshot, all fonts should have "fill": "black"

`options.yAxis` and `options.xAxis` are passed to the opposite lines

This function call renders the x-axis but passes the options for yAxis: https://github.com/rugpullindex/svg-line-chart/blob/68077d4c1180dcb4d2a5015a644d882bb2980873/src/index.mjs#L42

It's vice versa for the other axis too.

Deliverables

• Switch the two options