npm package: @ijusplab/svg-mapa
Description: Componente Vue para renderização de mapa interativo da Seção Judiciária e de suas Subseções
Latest version: 2.0.1

<div style="display: flex; align-items: center; justify-content: space-around;">
    <img src="src/assets/ijusplab.jpg" height="90px" alt="" />
    <img src="src/assets/incubadora.png" height="50px" alt="" />
</div>

<h1 style="font-family: Roboto, sans-serif; text-align: center; color: #0D47A1; text-decoration: underline; padding: 20px 0;">
    Componente svg-mapa
</h1>

Componente criado em [Vue](https://vuejs.org/) para a renderização de mapa interativo em svg da Seção Judiciária.

O mapa é descrito inteiramente em um objeto Javascript, com ou sem metadados de agrupamento das unidades territoriais (definidos em outro objeto Javascript), permitindo customização de tamanho, cores e isolamento de partes do mapa para visualização destacada.

O componente permite também captar eventos de clique em cada uma das unidades territoriais, retornando o código da unidade e, se houver, do grupo ao qual ela pertence. 

O *screenshot* abaixo ilustra o mapa da Seção Judiciária de São Paulo, com suas Subseções, renderizado pelo componente:

<div style="display: flex; align-items: center; justify-content: space-around;">
    <img src="https://github.com/ijusplab/assets/blob/master/screenshot.png?raw=true" alt="screenshot" />
</div>


#### 1. Incluindo o componente em seu projeto

Para incorporar o componente ao seu projeto, digite:

```node
yarn add @ijusplab/svg-mapa

// ou

npm install @ijusplab/svg-mapa --save
```

Alternativamente, no `Laravel`, você pode instalar o componente como dependência de desenvolvimento:

```node
yarn add -D @ijusplab/svg-mapa

// ou

npm install @ijusplab/svg-mapa --save-dev
```

Em seguida, você porde importar o componente para uso em seu projeto do seguinte modo:

```javascript
import SvgMapa from '@ijusplab/svg-mapa';
import '@ijusplab/svg-mapa/dist/svg-mapa.css';

...

export default {
  name: 'app',
  components: {
    SvgMapa
  },
  ...

}
```

#### 2. Configurando o mapa

Os parâmetros do mapa devem ser fornecidos pelo desenvolvedor, conforme descrito a seguir.

1.1. A aplicação deve fornecer ao componente um objeto `Javascript`, com a estrutura dada pelo `json` a seguir.

```json
{
    "title": {
        "name": "Seção Judiciária de São Paulo",
        "style": {
            "fill": "#212121",
            "font-family": "Segoe UI",
            "font-size": 24,
            "font-weight": "normal"
        },
        "containerStyle": {
            "stroke": "#212121",
            "stroke-width": "2px",
            "fill": "#E0E0E0",
            "rx": "5px",
            "ry": "5px",
            "padding": "5px"
        },
        "off-set": {
            "x": 220,
            "y": 310
        }
    },
    "svg": {
        "width": "1086.4963",
        "height": "707.90271",
        "viewBox": "0 0 1086.4963 707.90271",
        "style": {
            "stroke": "#ffffff",
            "stroke-width": "0.1px",
            "stroke-linecap": "butt",
            "stroke-linejoin": "miter"
        }
    },
    "paths": [ // array de paths (cada path deve corresponder a uma unidade territorial)
        {
            "name": "..." // nome da unidade,
            "label": {
                "style": {
                    "fill": "#000000",
                    "font-family": "Segoe UI",
                    "font-size": "16px",
                    "font-weight": "bold",
                    "stroke": "#ffffff",
                    "stroke-width": "0px",
                    "stroke-linecap": "round"
                },
                "containerStyle": {
                    "stroke": "#212121",
                    "stroke-width": "0px",
                    "fill": "none",
                    "rx": "5px",
                    "padding": "5px"
                },
                "off-set": { // off-set em relação ao centroid calculado automaticamente
                    "x": 0,
                    "y": 0
                }
            },
            "id": 5, // código numérico
            "d": "...", // elemento <d></d> do path
            "style": { // parâmetro opcional; na ausência, aplica-se o estilo do grupo ou um estilo default
                "stroke": "#ffffff",
                "stroke-width": "0.1px",
                "stroke-linecap": "round"
            }
        },
        ...
    ]
}
```

1.2. Opcionalmente, os `paths` podem ser agrupados fornecendo ao componente um objeto com a seguinte estrutura:

```json
{
    "name": "...", // nome do agrupamento
    "groups": [ // array com os grupos pertencentes ao agrupamento
        {
            "name": "Presidente\nPrudente", // utilize \n para dividir o texto
            "label": {
                "style": {
                    "fill": "#000000",
                    "font-family": "Segoe UI",
                    "font-size": "10",
                    "font-weight": "bold",
                    "stroke": "#ffffff",
                    "stroke-width": "0px",
                    "stroke-linecap": "round"            
                },
                "containerStyle": {
                    "stroke": "#212121",
                    "stroke-width": "0px",
                    "fill": "none",
                    "rx": "5px",
                    "padding": "5px"
                },
                "off-set": { // off-set em relação à posição do centroid calculado automaticamente
                    "x": 2,
                    "y": -10
                }
            },
            "id": 30,
            "paths": [ 30 ],
            "style": { // parâmetro opcional; na ausência, aplica-se o estilo default
                "fill": "#FFEBEE",
                "stroke": "#ffffff",
                "stroke-width": "3px",
                "stroke-linecap": "round"            
            }
        },
        ...
    ]
}
```

1.3. Também opcionalmente, os `paths` podem ser coloridos segundo o padrão fornecido por um objeto `chart` com a estrutura abaixo. Sendo habilitada a opção de exibir legenda, o componente criará a legenda automaticamente.

```json
{
    "name": "Teste",
    "legend": {
        "width": 300,
        "height": 100,
        "x": 30,
        "y": 480
    },
    "groups": [
        {
            "name": "Item 1",
            "label": {
                "style": {
                    "fill": "#000000",
                    "font-family": "Segoe UI",
                    "font-size": "20",
                    "font-weight": "bold",
                    "stroke": "#ffffff",
                    "stroke-width": "0px",
                    "stroke-linecap": "round"            
                },
                "containerStyle": {
                    "stroke": "#212121",
                    "stroke-width": "1px",
                    "fill": "#E0E0E0",
                    "rx": "5px",
                    "padding": "5px"
                },
                "off-set": {
                    "x": null,
                    "y": null
                }
            },
            "paths": [
                40, 17, 25, 33, 35, 26, 27, 8
            ],
            "style": {
                "fill": "#90CAF9"
            }
        },
        ...
    ]
}
```

1.4. Observação: os parâmetros `style` e `containerStyle` nos três objetos acima podem receber qualquer propriedade `CSS` aplicável aos elementos do `svg`. O `containerStyle` permite, ainda, a utilização das propriedades `padding`, `padding-top`, `padding-bottom`, `padding-left` e/ou `padding-right`, que são convertidas em espaçamento entre o texto do _label_ (elementos `text` e `tspan`) e o seu container (elementos `rect` e `svg`). 

#### 2. Lista das propriedades 

| Propriedade | Valor | Finalidade |
| ----------- | ----- | ---------- |
| `map` | `Object` | Objeto descrito no item 1.1 |
| `width` | `String` | Valor da propriedade `width` do objeto de estilo (`css`) do `div` em que está contido o elemento `svg`. O valor default é `100%` |
| `height` | `String` | Valor da propriedade `height` do objeto de estilo (`css`) do `div` em que está contido o elemento `svg`. O valor default é `auto` |
| `show-title` | `Boolean` | Indica se o título do mapa deve ser exibido. Default: `false` |
| `show-labels` | `Boolean` | Indica se os rótulos devem ser mostrados. Default: `false`. Se `true`, não exibe `tooltips` para os mesmos elementos, ainda que a opção `showTooltips` seja também `true` |
| `show-tooltips` | `Boolean` | Indica se os `tooltips` (elemento `title`) serão exibidos no evento `hover`. Caso `show-labels` também for `true`, os `tooltips` não será exibidos para o mesmo elemento em que houver um `label` sendo exibido. |
| `visible-paths` | `Array` | Um `array` de números correspondentes aos códigos dos `paths` que deverão ficar visíveis. Todos os demais deixarão de ser renderizados. Se fornecida uma lista vazia, todos os `paths` são renderizados. |
| `detach-path` | `Number` | Código do `path` a ser destacado e renderizado isoladamente. Para desabilitar a opção, basta atribuir valor `-1` à propriedade. |
| `grouping` | `Object` | Objeto descrito no item 1.2 |
| `visible-groups` | `Array` | Um `array` de números correspondentes aos códigos dos grupos definidos no `grouping` que deverão ficar visíveis. Todos os demais grupos deixarão de ser renderizados. Se fornecida uma lista vazia, todos os grupos serão renderizados. | 
| `detach-group` | `Number` | Código do grupo em `grouping` a ser destacado e renderizado isoladamente. Esse grupo passa a ocupar todo o espaço do `viewBox`. Para desabilitar a opção, basta atribuir valor `-1` à propriedade. A opção será ignorada se houver um path selecionado em `detach-path`. |
| `chart` | `Object` | Objecto descrito no item 1.3 |
| `show-legend` | `Boolean` | Indica se a legenda do `chart` deve ser exibida. |
| `enable-group-hover` | `Boolean` | Quando `true`, os elementos `path` do grupo sofrem decréscimo da opacidade no evento `hover` em qualquer um dos `paths` do mesmo grupo. O valor default é `false`. Pode ser utilizado em conjunto com `enable-path-hover`, caso em que os dois efeitos são percebidos simultaneamente.|
| `enable-path-hover` | `Boolean` | Quanto `true`, o elemento `path` sofre sofre decréscimo da opacidade no evento `hover`. O valor default é `true`. Pode ser utilizado em conjunto com `enable-group-hover`, caso em que os dois efeitos são percebidos simultaneamente. |

#### 3. Dados sobre as versões

> Atenção: A versão `2.0.0` traz algumas alterações na API do componente que o tornam incompatível com as versões anteriores.


#### 4. Dependências

O componente foi desenhado para funcionar com [Vue](https://vuejs.org/).

---
<div style="display: flex; align-items: center; justify-content: space-around;">
    &copy; 2019 - Incubadora de Soluções Tecnológicas - iJuspLab
</div>
<div style="display: flex; align-items: center; justify-content: space-around;">
    Licença MIT
</div>