How to use pondjs - 10 common examples

const name = "AAPL-price";
const columns = ["time", "open", "close", "low", "high"];
const events = aapl.map(item => {
    const timestamp = moment(new Date(item.date));
    const { open, close, low, high } = item;
    return new TimeEvent(timestamp.toDate(), {
        open: +open,
        close: +close,
        low: +low,
        high: +high
    });
});
const collection = new Collection(events);
const sortedCollection = collection.sortByTime();
const series = new TimeSeries({ name, columns, collection: sortedCollection });

//
// Volume
//

const volumeEvents = aapl.map(item => {
    const index = item.date.replace(/\//g, "-");
    const { volume } = item;
    return new IndexedEvent(index, { volume: +volume });
});
const volumeCollection = new Collection(volumeEvents);
const sortedVolumeCollection = volumeCollection.sortByTime();

const seriesVolume = new TimeSeries({
    name: "AAPL-volume",
    utc: false,

const name = "AAPL-price";
const columns = ["time", "open", "close", "low", "high"];
const events = aapl.map(item => {
    const timestamp = moment(new Date(item.date));
    const { open, close, low, high } = item;
    return new TimeEvent(timestamp.toDate(), {
        open: +open,
        close: +close,
        low: +low,
        high: +high
    });
});
const collection = new Collection(events);
const sortedCollection = collection.sortByTime();
const series = new TimeSeries({ name, columns, collection: sortedCollection });

//
// Volume
//

const volumeEvents = aapl.map(item => {
    const index = item.date.replace(/\//g, "-");
    const { volume } = item;
    return new IndexedEvent(index, { volume: +volume });
});
const volumeCollection = new Collection(volumeEvents);
const sortedVolumeCollection = volumeCollection.sortByTime();

const seriesVolume = new TimeSeries({
    name: "AAPL-volume",
    utc: false,

return new IndexedEvent(
        date,
        {
            temp: [
                +record_min_temp, //eslint-disable-line
                +actual_min_temp, //eslint-disable-line
                +actual_max_temp, //eslint-disable-line
                +record_max_temp //eslint-disable-line
            ]
        },
        false
    );
});

const collection = new Collection(events);
const series = new TimeSeries({ name, collection });

//
// Styles
//

class nyc extends React.Component {
    //eslint-disable-line
    state = {
        timerange: new TimeRange([1425168000000, 1433116800000]),
        selection: null
    };

    handleTimeRangeChange = timerange => {
        this.setState({ timerange });
    };

: tb;
                newEnd =
                    this.state.brushingInitializationSite === "brush" ||
                    this.state.brushingInitializationSite === "handle-right"
                        ? Math.round(te - endOffsetConstrain)
                        : te;

                // Swap if needed
                if (newBegin > newEnd) {
                    [newBegin, newEnd] = [newEnd, newBegin];
                }
            }

            if (this.props.onTimeRangeChanged) {
                this.props.onTimeRangeChanged(
                    new TimeRange(newBegin, newEnd),
                    this.state.brushIndex
                );
            }
        }
    }

}

                    newBegin = this.state.brushingInitializationSite === "brush" || this.state.brushingInitializationSite === "handle-left" ? parseInt(tb - startOffsetConstraint, 10) : tb;
                    newEnd = this.state.brushingInitializationSite === "brush" || this.state.brushingInitializationSite === "handle-right" ? parseInt(te - endOffsetConstrain, 10) : te;

                    // Swap if needed
                    if (newBegin > newEnd) {
                        ;
                        var _ref = [newEnd, newBegin];
                        newBegin = _ref[0];
                        newEnd = _ref[1];
                    }
                }

                if (this.props.onTimeRangeChanged) {
                    this.props.onTimeRangeChanged(new _pondjs.TimeRange(newBegin, newEnd), this.state.brushIndex);
                }
            }
        }

{graphData.map(set => {
                  const series = new TimeSeries({
                    name: set.label,
                    columns: ['time', 'value'],
                    points: set.data,
                  });
                  const style = { value: { normal: { stroke: this.state.lineColors[set.label], strokeWidth: 2 } } };
                  return ;
                })}

{graphData.map(set => {
                    const series = new TimeSeries({
                      name: set.label,
                      columns: ['time', 'value'],
                      points: set.data,
                    });
                    const style = { value: { normal: { stroke: this.state.lineColors[set.label], strokeWidth: 2 } } };
                    return ;
                  })}

constructor(props) {
    super(props);

    const { event } = props;

    const start = event.target_event_start_timestamp_ms;
    const end = event.target_event_end_timestamp_ms;

    this.state = {
      waveforms: [],
      waveformsVisible: {},
      timeRange: new TimeRange(start, end),
      start,
      end,
    };
  }

let newBegin = parseInt(this.state.initialPanBegin - timeOffset, 10);
            let newEnd = parseInt(this.state.initialPanEnd - timeOffset, 10);
            const duration = parseInt(this.state.initialPanEnd - this.state.initialPanBegin, 10);

            if (this.props.minTime && newBegin < this.props.minTime.getTime()) {
                newBegin = this.props.minTime.getTime();
                newEnd = newBegin + duration;
            }

            if (this.props.maxTime && newEnd > this.props.maxTime.getTime()) {
                newEnd = this.props.maxTime.getTime();
                newBegin = newEnd - duration;
            }

            const newTimeRange = new TimeRange(newBegin, newEnd);
            if (this.props.onZoom) {
                this.props.onZoom(newTimeRange);
            }
        } else if (this.props.onMouseMove) {
            const mousePosition = this.getOffsetMousePosition(e);
            if (this.props.onMouseMove) {
                this.props.onMouseMove(mousePosition[0], mousePosition[1]);
            }
        }
    }

var newBegin = parseInt(this.state.initialPanBegin - timeOffset, 10);
                var newEnd = parseInt(this.state.initialPanEnd - timeOffset, 10);
                var duration = parseInt(this.state.initialPanEnd - this.state.initialPanBegin, 10);

                if (this.props.minTime && newBegin < this.props.minTime.getTime()) {
                    newBegin = this.props.minTime.getTime();
                    newEnd = newBegin + duration;
                }

                if (this.props.maxTime && newEnd > this.props.maxTime.getTime()) {
                    newEnd = this.props.maxTime.getTime();
                    newBegin = newEnd - duration;
                }

                var newTimeRange = new _pondjs.TimeRange(newBegin, newEnd);
                if (this.props.onZoom) {
                    this.props.onZoom(newTimeRange);
                }
            } else if (this.props.onMouseMove) {
                var mousePosition = this.getOffsetMousePosition(e);
                if (this.props.onMouseMove) {
                    this.props.onMouseMove(mousePosition[0], mousePosition[1]);
                }
            }
        }
    }, {