Author: | DrA1ex |
---|---|
Views Total: | 165 views |
Official Page: | Go to website |
Last Update: | September 27, 2023 |
License: | MIT |
Preview:

Description:
text-graph.js is a lightweight TypeScript library for generating text-based line charts to visualize data in the terminal or right in your browser’s console.
The library provides several components for plotting single- or multi-series line charts using only text and ASCII characters.
How to use it:
1. Install and import the text-graph.js components.
# NPM $ npm i text-graph.js
import { Plot, MultiPlotChart, LabelPositionFlags, PlotAxisScale, PlotSeriesAggregationFn, PlotSeriesOverflow, Color, BackgroundColor, } from 'text-graph.js';
2. Create a new instance of the Plot class. Available parameters:
- width: Chart width (number of characters)
- height: Chart height (number of characters)
- options: Plot options
// Plot(width, height, options) const plot = new Plot(80, 20, { showAxis: boolean, horizontalBoundary: number verticalBoundary: number title: string, titlePosition: LabelPositionFlags, titleForeground: Color, titleBackground: BackgroundColor, titleSpacing: number, axisScale: PlotAxisScale, aggregation: Utils.AggregationFn, axisLabelsFraction: number });
3. Define the series configuration.
const seriesConfig = { color: Color.yellow, overflow: PlotSeriesOverflow.linearScale, };
4. Add new plot series.
const seriesId = plot.addSeries(seriesConfig);
5. Add data entries to the series.
const fn = (x: number) => -Math.pow(x, 2) + plot.width * x; for (let i = 0; i <= plot.width; i++) { plot.addSeriesEntry(seriesId, fn(i)); }
6. Generate and print the chart data.
const chartData = plot.paint(); console.log(chartData);
7. This example shows how to generate a multi-series line chart.
import {Plot, Color, PlotAxisScale, PlotSeriesAggregationFn, PlotSeriesOverflow, LabelPositionFlags} from "../src"; const plotOptions = { showAxis: true, // Show vertical axis title: "Multi-Series Demo", // Title of the chart titlePosition: LabelPositionFlags.top, // Position of the title axisScale: PlotAxisScale.linear, // Scale of the axis aggregation: PlotSeriesAggregationFn.mean, // Aggregation type for data points }; const plot = new Plot(80, 20, plotOptions); const scale = PlotSeriesOverflow.linearScale // Overflow behavior of the series const seriesConfig1 = { color: Color.red, // Color of the first series overflow: scale }; const seriesConfig2 = { color: Color.green, // Color of the second series overflow: scale }; const seriesConfig3 = { color: Color.cyan, // Color of the third series overflow: scale }; const seriesId1 = plot.addSeries(seriesConfig1); const seriesId2 = plot.addSeries(seriesConfig2); const seriesId3 = plot.addSeries(seriesConfig3); const fn1 = (x: number) => Math.sin(x) * Math.exp(-0.1 * x); const fn2 = (x: number) => 0.8 * Math.sin(x) + 0.6 * Math.sin(2 * x) + 0.4 * Math.sin(3 * x); const fn3 = (x: number) => Math.sin(x) * Math.cos(2 * x) + Math.cos(x) * Math.sin(2 * x); const delay = 66; async function draw() { for (let x = -2; x <= 2; x += 0.03) { plot.addSeriesEntry(seriesId1, fn1(x)); plot.addSeriesEntry(seriesId2, fn2(x)); plot.addSeriesEntry(seriesId3, fn3(x)); const chartData = plot.paint(); console.clear(); console.log(chartData); await _delay(delay); } } // Start animated drawing draw(); // Auxiliary function to avoid setTimeout in loop function _delay(d: number) { return new Promise(resolve => setTimeout(resolve, d))}
8. This example shows how to generate a multi-chart graph.
const chart = new MultiPlotChart({ title: "Dashboard chart", titleBoundary: 2, titleSpacing: 8, titleForeground: Color.blue, titleBackground: BackgroundColor.black, }); chart.addPlot({xOffset: 0, yOffset: 0, width: 40, height: 31}, { title: "overflow: skip", }); chart.addPlot({xOffset: 42, yOffset: 0, width: 60, height: 15}, { title: "overflow: logScale (agg: max)", axisScale: PlotAxisScale.log, }); chart.addPlot({xOffset: 42, yOffset: 16, width: 60, height: 15}, { title: "overflow: linearScale (agg: mean)", axisScale: PlotAxisScale.logInverted, aggregation: PlotSeriesAggregationFn.mean }); chart.addPlotSeries(0, {color: Color.red, overflow: PlotSeriesOverflow.clamp}); chart.addPlotSeries(1, {color: Color.blue, overflow: PlotSeriesOverflow.linearScale}); chart.addPlotSeries(2, {color: Color.yellow}); let delay = 66; // Delay in milliseconds for (let i = 0; i < 2000; i++) { setTimeout(() => { chart.addSeriesEntry(0, 0, Math.cos(i * Math.PI / 15)); chart.addSeriesEntry(1, 0, Math.sin(i * Math.PI / 30) * 100 + 2); chart.addSeriesEntry(2, 0, Math.cos(i * Math.PI / 30) * 100 + 2); const chartData = chart.paint(); console.clear(); console.log(chartData); }, delay * i); }
Changelog:
09/27/2023
- v1.1.2