# freport

> front-end javascript business reporting

Latest version **0.1.0** (published 2017-02-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install freport
pnpm add freport
yarn add freport
bun add freport
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-02-14 |
| First published | 2017-02-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Fábio Nogueira |
| Maintainers | fabionogueira |
| Keywords | business, javascript, report, browser, front-end |

## Links

- npm: https://www.npmjs.com/package/freport
- Repository: https://github.com/fabionogueira/freport
- Homepage: https://github.com/fabionogueira/freport#readme
- Issues: https://github.com/fabionogueira/freport/issues
- npm.io page: https://npm.io/package/freport

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-02-14
- 0.0.8 — 2017-02-14
- 0.0.7 — 2017-02-14
- 0.0.6 — 2017-02-14
- 0.0.5 — 2017-02-14
- 0.0.4 — 2017-02-14
- 0.0.3 — 2017-02-13
- 0.0.2 — 2017-02-13
- 0.0.1 — 2017-02-13

## README

### Installation
```
$ npm install freport --save
```
### Browser
##### Script tag
```html
<script src="node_modules/freport/dist/index.js"></script>
```
### Babel
Babel is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.

```javascript
import {FReport} from "freport";
```
### Browserify/Webpack
There are several ways to use Browserify and Webpack. For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...

```javascript
var FReport = require("freport");
```
### Example Usage (JavaScript)

```javascript
var freport = require('freport');
var report = new freport.FReport(document.querySelector(document.body));

var reportDataArray = [
    //fields: product, price, group
    {"product":"ARROZ",       "price": 15.0, "group":"ALIMENTAÇÃO"},
    {"product":"FEIJÃO",      "price":  8.0, "group":"ALIMENTAÇÃO"},
    {"product":"SABÃO EM PÓ", "price":  7.0, "group":"LIMPEZA"},
    {"product":"AMACIANTE",   "price": 14.0, "group":"LIMPEZA"},
    {"product":"CAMISA",      "price": 47.0, "group":"VESTUÁRIO"}
];
var reportDefinitionJSON = {
    page:{
        paper: 'A4',
        orientation: 'portrait', //portrait|landscape default=portrait
        marginLeft: 2, //default 0
        marginRight: 2,//default 0
        marginTop: 3,  //default 0
        marginBottom: 3//default 0
    },
    vars:{
        subtotal: 0,
        total: 0,
        "qtd-itens-grupo": 0
    },
    on:{
        //evento
        groupStart:function(row, vars){
            vars['qtd-itens-grupo'] = 0;
        }
    },
    groups:[
        {
            groupBy:'group',

            //cabeçalho do grupo
            header:{
                y:10,
                height: 40,
                style:sectionStyle+'background:#9E9E9E;',
                on:{
                    start: function(row,vars){
                        vars.subtotal = 0;
                    }
                },
                children: [
                    {type:"Text", y:12, x:30, value:'GRUPO: ${group}'},
                    {type:"Text", value:'group header', style:descriptionStyle}
                ]
            },

            //rodapé do grupo
            footer:{
                y:4,
                height: 40,
                style:sectionStyle,
                on:{
                    start: function(row, vars){
                        
                    }
                },
                children: [
                    {type:"Text", y:12, x:40, value:'<b>TOTAL: R$ ${subtotal}, QUANTIDADE: ${qtd-itens-grupo}</b>'},
                    {type:"Text", value:'group footer', style:descriptionStyle}
                ]
            }
        }
    ],
    sections:{
        //título do relatório
        title:{
            height: 80,
            style: sectionStyle,
            children: [
                {type:"Text", y:35, x:240, style:"font-weight:bold;color:red", value:'TÍTULO DO RELATÓRIO'},
                {type:"Text", value:'report header', style:descriptionStyle}
            ]
        },

        //título da página
        header:{
            y:4,
            height: 40,
            style: sectionStyle,
            children: [
                {type:"Text", y:12, x:250, value:'TÍTULO DA PÁGINA'},
                {type:"Text", value:'page header', style:descriptionStyle}
            ]
        },

        //detalhes da página
        detail:{
            y:4,
            height: 40,
            style: sectionStyle,
            on:{
                start: function(row, vars){
                    vars['qtd-itens-grupo']++;
                    vars.total += row['price'];
                    vars.subtotal += row['price'];
                }
            },
            children: [
                {type:"Text", y:12, x:40, value:'${product} : R$ ${price}'},
                {type:"Text", value:'detail', style:descriptionStyle}
            ]
        },

        //rodapé da página
        footer:{
            height: 40,
            style: sectionStyle,
            children: [
                {type:"Text", y:12, x:10, value:'Página ${#page}/${#pages}'},
                {type:"Text", value:'page footer', style:descriptionStyle}
            ]
        },
        
        //sumário
        summary:{
            y:10,
            height: 40,
            style: sectionStyle,
            on:{
                start: function(row, vars){
                    //row['total'] = '<b>'+vars.total+'</b>';
                }
            },
            children:[
                {type:"Text", y:12, x:10, value:'<b>TOTAL GERAL: R$${total}</b>'},
                {type:"Text", value:'report summary', style:descriptionStyle}
            ]
        }
    }
};

report.definition(reportDefinitionJSON);
report.draw(reportDataArray);
```

### Example Usage (TypeScript)

```javascript
import {FReport} from "freport";
let report = new FReport(document.querySelector(document.body));

report.definition(reportDefinitionJSON);
report.draw(reportDataArray);
```

---
_Source: https://npm.io/package/freport · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._