anonimiza-canvas-chart

Canvas chart library for spline charts with customizable axis limits.

Installation

npm install anonimiza-canvas-chart

Usage

const { createSplineChart } = require('anonimiza-canvas-chart');

const base64Image = createSplineChart({
    primaryAxis: [...],
    secondaryAxis: [...],
    title: "Meu Gráfico",
    width: 800,
    height: 600,
    showXLabel: true,
    showYLabel: true,
    showTitle: true,
    showLegends: true,
    grid: true,
    zeroMargin: false,
    xAxisLabel: "Vazão (m³/h)",
    maxXOverride: 50,  // Limita o eixo X em 50
});

Parameters

| Parameter | Type | Description | |-----------|------|-------------| | primaryAxis | Array | Array de objetos com curvas para o eixo Y primário | | secondaryAxis | Array | Array de objetos com curvas para o eixo Y secundário | | title | String | Título do gráfico | | width | Number | Largura do canvas em pixels | | height | Number | Altura do canvas em pixels | | showXLabel | Boolean | Exibir labels do eixo X | | showYLabel | Boolean | Exibir labels do eixo Y | | showTitle | Boolean | Exibir título | | showLegends | Boolean | Exibir legendas | | grid | Boolean | Exibir grid | | zeroMargin | Boolean | Remover margens | | xAxisLabel | String | Label do eixo X | | maxXOverride | Number | Novo - Define limite máximo customizado para o eixo X | | maxYOverride | Number/Array | Novo - Define limite máximo customizado para o eixo Y primário | | maxYSecondaryOverride | Number/Array | Novo - Define limite máximo customizado para o eixo Y secundário |

Axis Structure

const primaryAxis = [
    {
        label: "AMT (m)",
        font: "14px Arial",
        curves: [
            {
                label: "60 Hz",
                color: "#6366f1",
                width: 2,
                data: [[0, 30], [10, 29], [20, 27], [30, 24], [40, 18], [50, 10]],
                point: [25, 24],  // Ponto de operação
                hideLegend: false,
            }
        ],
        geometry: {
            data: [],  // Coordenadas para área preenchida
            color: "rgba(0,0,0,0.1)"
        }
    }
];

Example: Limiting X Axis

// Sem limite - pega o maior valor das curvas (ex: curva do sistema vai até 180)
createSplineChart({
    primaryAxis: pumpCurves,
    secondaryAxis: systemCurve,
    // ... outras opções
});

// Com limite em 50 - corta a visualização no X = 50
createSplineChart({
    primaryAxis: pumpCurves,
    secondaryAxis: systemCurve,
    maxXOverride: 50,  // ← Força limite do eixo X
    // ... outras opções
});

Output

A função retorna uma string base64 da imagem PNG gerada.

const base64 = createSplineChart({ ... });

// Usar em HTML
const imgSrc = `data:image/png;base64,${base64}`;

// Salvar em arquivo
const fs = require('fs');
fs.writeFileSync('chart.png', Buffer.from(base64, 'base64'));

License

MIT