view client/docs/developers.md @ 4352:6365466ead83

client, docs: add example for diagram testing * Add example for AvailableFairwayDepthLNWLDiagram, where data is set directly in the browser.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 09 Sep 2019 14:43:49 +0200
parents dc5a10542e16
children d6439e7c8b1c
line wrap: on
line source

When developing wamos, check out

* [How translations are handled](dev-translations.md)
* [Rationale of some choices](dev-generalconsiderations.md)

## Hints

### svg2pdf

https://github.com/yWorks/svg2pdf.js has known shortcomings,
which we work around.

Not all layout possibilities of webbrowser are not supported!

Our tactics is to report the problems, but work around them, if we can,
some examples:

 * https://github.com/yWorks/svg2pdf.js/issues/82 (Unsupported features/Known issues)
 * https://github.com/yWorks/svg2pdf.js/issues/109 (alignment-baseline attribute does not work)
 * https://github.com/yWorks/svg2pdf.js/issues/100 (Font-size in `em` unit does not work)


### Testing diagram layout and pdf export

When testing the vuex store object can be accessed from the
webbrowsers console like

```javascript
store = document.getElementsByTagName('a')[0].__vue__.$store
```

This allows for setting test values where getting real test data
is complicated. For example testing the diagramm for the
fairwayavailability (tested with Chromium 73 und gemma-2019-09-04):

```javascript
data = store.state.fairwayavailability.csv  // see current data

data=`#time,# < LDC (164.0) [h],# >= LDC (164.0) [h],# < 230.0 [h],# >= 230.0 [h],# >= 250.0 [h]
01-2019,0  ,744,  0,  0,744
02-2019,324,324,150,174,324
03-2019, 24,696, 80, 45, 50
04-2019,120,600, 24, 24,672.5
05-2019,140,80 , 80, 45, 50
06-2019,  0,  0,  0,  0,  0.000
07-2019,  0,300,  0,  0,  0
08-2019,  0,  0,744,  0,  0
09-2019,  0,720,  0, 96,624
`

store.commit("fairwayavailability/setAvailableFairwayDepthData", data)
```

Or for the AvailableFairwayDepthLNWLDiagram:
```javascript
data = store.state.fairwayavailability.csv  // see current data

data=`
#time,# < LDC (162.0) [h],# >= LDC (162.0) [h],#d < 230.0 [%],#d >= 230.0 [%],#d >= 250.0 [%]
09-2018,100,  0,100  ,    0,  0
10-2018,100,  0, 80  ,   20,  0
11-2018,100,  0,  0  ,  100,  0
12-2018, 80, 20, 50  ,   50,  0
01-2019, 70, 30, 15  ,   60, 25
02-2019, 65, 35, 40  ,   40, 20
03-2019, 55, 45, 42  ,   42, 16
04-2019, 42, 58, 40  , 20  , 40
05-2019, 30, 70, 2   , 30  , 68
06-2019, 30, 70, 0   , 25  , 75
07-2019, 20, 80, 25  ,  0  , 75
08-2019,  0,100, 10.1,  1.5, 88.4
09-2019,  0,100, 23.5,  2.4, 74.1
`

store.commit("fairwayavailability/setAvailableFairwayDepthLNWLData", data)
```


(Depends on the code structure in store/fairwayavailability.js.)