Need better rendering tests for each of the chart types. Specifically I'd like to do the following:

• [x] Break test/static.html out into a single html page for each type of chart under the directory test/basic/*.html
• [x] Break test/time.html out into a single html page for each type of chart under the directory test/realtime/*.html
• [x] Provide a test landing page at test/index.html where you can move back and forth between tests

To test these changes checkout the rsandor/better-tests branch, run cake build, and open test/index.html in a browser.

For ease of implementation we chose to have set data formats for each of the types of plot. This can be a bit painful for simpler data (especially for time series data). Consider allowing each of the plots to accept multiple formats for the data.

I'd like to allow for more "flat" data to be used without having to explicitly specify the layer structure. For instance, instead of having to do this:

data = [
    { label: 'Layer 1', values: [ {time: 0, y: 0}, ... ] }
]

one could simply define the same single layer data set like so:

data = [ {time: 0, y: 0}, ... ]

Additionally it would be nice to allow for a series of basic numbers:

data = [ 0, 1, 2, 3, 20302 ]

For basic plots we could simply use the index as the x value. For real-time plots it's less nice since the time parameter expects a unix timestamp. Perhaps we could just count back from the current second in the browser?

Either way having simpler data formats should make it easier to get up and running with the library. And one can always use a more formal format as needed.

tickFormat.left in this case works, however.

This is with v0.6.0

Snippet:

$('#some-id').epoch({
  type: 'time.line',
  axes: ['right', 'bottom'],
  data: data,
  tickFormats: {
    right: function(d) {
      return '$' + (d / 100000).toFixed(3);
    }
  }
});

The homepage of this package lists only d3 as a dependency. However, every example seems to use jQuery. I see that Issue #62 seems to be complete, but I am unable to get it completely working with only d3. It looks as though an adapter (jQuery, MooTools, zepto) is needed.

One example:

new Epoch.Time.Line({el: '#graph', data: []})

If I try to declare a real-time line chart (without including width and height), I see failures due to this line: https://github.com/fastly/epoch/blob/master/src/core/chart.coffee#L41 This is because d3 selectors do not have a width function like jQuery does. Doing this prevents the issue, but I would like to be able to use the auto width/height functionality.

new Epoch.Time.Line({el: '#graph', data: [], width: 300, height: 300})

This may just be a documentation issue, or it may be a bug, depending on the goal of the library. If the goal is to only have d3 as a dependency, there are some spots where the code needs fixing. If the goal is to have one of the provided adapters be a dependency, this probably needs to be reflected in the docs somehow

I am fairly confident that this will work, but I would feel a lot better if we had unit tests in place to make sure it continues to do so. For the time being I'd like to get it in as an experimental / untested feature. Might think about bumping up #24 into release 0.6.0.

@bontibon - Can you give this a quick look for me?

Description

This adds left/right multi-axis support to all real-time plots, and specific support for the real-time line chart. We abstract the range option to allow the programmer to supply a left and right range if they so desire.

TODO

• [x] Add support for basic line charts with multi-axes
• [x] Test: Epoch.Time.Plot
• [x] Test: Epoch.Time.Line
• [x] Test: Epoch.Util.flatten

Code Example

// Specify the left and right ranges
var leftRange = [0, 100];
var rightRange = [-10, 10];

// Setup two series, each using a different range
var data = [
  {
    label: 'Left Ranged Series',
    values: [
      { time: 0, y: 0 },
      { time: 1, y: 10 },
      { time: 2, y: 99 },
      ...
    ],
    // This is how your tell a layer to use a specific range...
    range: leftRange
  },
  {
    label: 'Right Ranged Series',
    values: [
      { time: 0, y: -9.8 },
      { time: 1, y: 2.4 },
      { time: 2, y: -0.5 },
      ...
    ],
    // Again, we must define the range for this particular series...
    range: rightRange
  }
];

// Create the real-time line plot with two ranges
var chart = new Epoch.Time.Line({
  range: {
    left: leftRange,
    right: rightRange
  },
  data: data,
  axes: ['left', 'right', 'bottom']
});

• Renamed package to epoch-charting to avoid clashing with existing node module epoch.
• Added description, keywords, homepage, author, licenses, repository.
• Changed dependencies to devDependencies, changed the version prefixes to caret ^ (i.e. compatible).
• Added d3 to package dependencies.

cc @tuanasaurus @fastly/app

For the gh-pages site, the footer containing the "Fork" and "Star" GitHub buttons isn't rending properly. What I'm seeing in FF and Chrome:

The code in question

<div id="social" class="clearfix">
            <iframe src="http://ghbtns.com/github-btn.html?user=fastly&amp;repo=epoch&amp;type=watch&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30"></iframe>

            <iframe src="http://ghbtns.com/github-btn.html?user=fastly&amp;repo=epoch&amp;type=fork&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30"></iframe>

            <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/tweet_button.1403226798.html#_=1403900563061&amp;count=none&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=https%3A%2F%2Ffastly.github.io%2Fepoch%2F&amp;related=jasoncosta&amp;size=l&amp;text=Epoch%20by%20Fastly&amp;url=https%3A%2F%2Ffastly.github.io%2Fepoch%2F" class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-none" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 76px; height: 28px;"></iframe>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
          </div>

The buttons themselves appear to be working (button1 button2) so this may be a problem with the iframe syntax.

Because Epoch seems to lack a lot of documentation right now, I'm not entirely sure how to use it, and tracebacks from minified JS are utterly unhelpful in figuring that out. Please consider making an unminified version of epoch.js available for easy debugging!

Analogous to https://github.com/fastly/epoch/pull/117/, and so it's exactly the same change.

Additionally, removed the redundant y() function in time/line to avoid having to duplicate that change in another place.

E.g. I have this graph representing memory useage of a process:

Now I can't set a fixed range from 0 to let's say 1GiB, because memory useage depends heavily on the circumstances, or in this example the memory useage doesn't change for the duration of the plot, as you can see, that really messes with Epoch, also triggering an exception (line 8, Uncaught TypeError: Cannot read property 'x' of undefined):

    Plot.prototype._updateTicks = function(newTime) {
      if (!(this.hasAxis('top') || this.hasAxis('bottom'))) {
        return;
      }
      if (!((++this._tickTimer) % this.options.ticks.time)) {
        this._pushTick(this.options.windowSize, newTime, true);
      }
      if (!(this._ticks[0].x - (this.w() / this.pixelRatio) >= 0)) {
        return this._ticks[0].exit = true;
      }
    };

I am not sure how to properly fix this, maybe replace the range option with an extent function (as called from the code)? Or an extent option which takes precedence over the range option.

ENV

• OS: WINDOWS
• nodejs 14.16.1
• electron #error

Uncaught TypeError: Cannot read property 'format' of undefined
    at epoch.min.js:1
Uncaught TypeError: $(...).epoch is not a function
    at test_epoch.html:34

test file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/d3/dist/d3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./node_modules/epoch-charting/dist/css/epoch.min.css">
    <script src="./node_modules/epoch-charting/dist/js/epoch.min.js"></script>

    <script type="module">

        import * as d3 from "https://cdn.skypack.dev/d3@7";

        const div = d3.selectAll("div");

    </script>

    <title>show</title>
</head>

<body>

    <div id="area" class="epoch category10" style="height: 200px;"></div>
    <script>
        const $ = require("jquery")
        var data = [
            { label: 'Layer 1', values: [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }] },
            { label: 'Layer 2', values: [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 4 }] }
        ];
        var areaChartInstance = $('#area').epoch({
            type: 'area',
            data: data,
            axes: ['left', 'right', 'bottom']
        });
    </script>


</body>


</html>

Being not updated several years ago, and with the current version of D3.js not compatible with this package, it seems this project is no longer relevant nor feasible to use under a production environment.

If anybody has a better replacement than plotly.js for doing real time charts, you are welcome.

I am trying to perform plasma oscillation using 1-D epoch code. However, there is no density evolution occur in the output. kindly help me in digging out the error. I am attaching it input file here.

begin:control nx = 30000 x_min = 0 x_max = 2*pi npart = 100 * nx t_end = 1.77e-8 end:control

begin:boundaries bc_x_min = periodic bc_x_max = periodic end:boundaries

begin:constant den_peak = 1.0e18 end:constant

begin:species name = Electron density = den_peak*((0.1cos(2pi*x/length_x))+1) charge = -1.0 mass = 1.0 frac = 0.5 end:species

begin:species name = Proton density = den_peak charge = 1.0 mass = 1836.2 frac = 0.5 end:species

begin:output

number of timesteps between output dumps

dt_snapshot = 1.77e-11

Number of dt_snapshot between full dumps

full_dump_every = 1

Properties at particle positions

particles = always px = always

Properties on grid

grid = always ex = always ey = always ez = always bx = always by = always bz = always jx = always ekbar = always mass_density = never + species charge_density = always number_density = always + species

extended io

distribution_functions = always end:output

npm ERR! Linux 4.4.0-1092-aws npm ERR! argv "/usr/local/lib/nodejs/node-v4.1.1-linux-x64/bin/node" "/usr/local/lib/nodejs/node-v4.1.1-linux-x64/bin/npm" "run" "build" npm ERR! node v4.1.1 npm ERR! npm v2.14.4 npm ERR! code ELIFECYCLE npm ERR! [email protected] build: gulp build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script 'gulp build'. npm ERR! This is most likely a problem with the epoch-charting package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! gulp build npm ERR! You can get their info via: npm ERR! npm owner ls epoch-charting npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /home/ubuntu/epoch-0.8.4/npm-debug.log npm ERR! Test failed. See above for more details.

Hi, Thanks for your work on this library. I found a small bug in the documentation:

On this page: https://epochjs.github.io/epoch/real-time/

in the common option area, one can see this example:

tickFormats: { time: function(d) { return new Date(time*1000).toString(); } }

This is actually incorrect and it should be in fact:

tickFormats: { bottom: function(d) { return new Date(time*1000).toString(); } }

Also, it may be useful to insert an example about how to display nothing as tick's text, ie:

tickFormats: { bottom: function(d) { } }

Thank you.

I currently want to write a chrome app that contains a epoch graph. Heres my index.html:

<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link href="styles/main.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/epoch.min.css">
</head>
<body>
  <h1>Test</h1>
  <div id="pie" style="width: 400px; height: 400px"></div>

  <script src="js/d3.js"></script>
  <script src="js/epoch.js"></script>
</body>
</html>

Heres my main.js:

chrome.app.runtime.onLaunched.addListener(function() {
  var screenWidth = screen.availWidth;
  var screenHeight = screen.availHeight;
  var width = 500;
  var height = 300;

  chrome.app.window.create('index.html', {
    id: "helloWorldID",
    outerBounds: {
      width: width,
      height: height,
      left: Math.round((screenWidth-width)/2),
      top: Math.round((screenHeight-height)/2)
    }
  });
});

var pieData = [
  { label: 'Slice 1', value: 10 },
  { label: 'Slice 2', value: 20 },
  { label: 'Slice 3', value: 40 },
  { label: 'Slice 4', value: 30 }
]

$('#pie').epoch({
  type: 'pie',
  data: pieData
});

When I run this, the chart area stays empty and the error "Uncaught TypeError: Cannot read property 'format' of undefined" appears. The line the error occurs at is 429 which contains this: d3Seconds = d3.time.format('%I:%M:%S %p'); My guess is that the error appears because d3 wasnt properly loaded but I dont know how to fix this as I think I followed the guide.