Skip to content

Commit 0dc8651

Browse files
fuchsvomwaldefuchsvomwalde
committed
Finalize docs and build script.
1 parent 0c9ccc2 commit 0dc8651

File tree

1 file changed

+108
-5
lines changed

1 file changed

+108
-5
lines changed

‎README.md‎

Lines changed: 108 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,30 @@ This library provides an OpenUI5 API that acts as a wrapper for D3-based chartin
99
1010
## Usage
1111

12-
tbd: how to use this lib in your project...
12+
This npm module already provides all content to use the library immediately: the folder `/src` contains all source files (written in LESS and ES6/ES7), in the folder `/dist` you will find the library, completely ready for use. Now there are two ways to use the library in your npm project:
13+
14+
1. You can go the way recommended by [UI5Lab](https://github.com/UI5Lab/UI5Lab-library-simple) which ends up with copying the resources and files from the cloned npm project to your project either manually or via a custom script. We do not recommend that you go this way, because changes to the library must always be copied manually and this variant is more susceptible to errors.
15+
16+
1. The way we recommend you is to use our OpenUI5 Starter-Kit for embedding. The prerequisite is that your project uses the build process of the starter kit (see instructions [here](https://github.com/pulseshift/openui5-gulp-starter-kit)). All you have to do then is:
17+
* Download our library as dev-dependency with `yarn add ui5-lib-visualization --dev`.
18+
* Add the library to your UI5 build settings in the `package. json`_\*_.
19+
* Finished, you can now integrate the library into your XML Views via `xmlns: viz="ui5. viz"` or use it in your controllers etc..
20+
21+
_\*snipped to include the library via ui5 config in `package. json`:_
22+
23+
```json
24+
"library":[
25+
{
26+
"name": "ui5. viz",
27+
"path": "node_modules/ui5-lib-visualization/dist/ui5/viz",
28+
"prebuild": true
29+
}
30+
]
31+
```
1332

1433
### Documentation
1534

16-
Real live samples are beeing published, soon. Till then, please enjoy our first `beta` version of our automatcally created markdown API documentation:
35+
How to test real live samples please see section `Example`. Till then, please enjoy our first `beta` version of our automatcally created markdown API documentation:
1736

1837
* [ui5.viz.Chart](./docs/Chart.md)
1938
* [ui5.viz.ChartSeries](./docs/ChartSeries.md)
@@ -26,12 +45,86 @@ Real live samples are beeing published, soon. Till then, please enjoy our first
2645

2746
### Features
2847

29-
tbd: brief overview about the main features...
48+
_Hint: This overview is not yet complete. In the course of time we will point out all important new functions and add these points to the new demo app, too._
49+
50+
A brief overview of features, additional to C3.js line and area charts:
3051

3152
### Example
3253

54+
To execute the demo, please follow the instructions described in section `Development`. At the time the demo is being refactored with the goal to provide you an SAP explored like experience.
55+
56+
Here a basic sample of how to use the charts in an XML view:
57+
58+
```xml
59+
<!-- ensure that the series data points and the x-axis labels have the exact same amount of entries -->
60+
<Chart
61+
width="{store>/width}"
62+
height="{store>/height}"
63+
showTooltip="{store>/showTooltip}"
64+
groupedTooltip="{store>/groupedTooltip}"
65+
showLegend="{store>/showLegend}"
66+
xAxisType="Indexed"
67+
series="{store>/series}">
68+
<series>
69+
<ChartSeries
70+
type="{store>type}"
71+
name=" {store>name}"
72+
data="{
73+
path: 'store>dataPoints',
74+
templateShareable: false
75+
}">
76+
<data>
77+
<ChartDataPoint value="{store>}" />
78+
</data>
79+
</ChartSeries>
80+
</series>
81+
<xAxis>
82+
<ChartAxis labels="{ path: 'store>/xAxis/0/labels'}">
83+
<labels>
84+
<ChartAxisLabel value="{store>}" />
85+
</labels>
86+
</ChartAxis>
87+
</xAxis>
88+
<yAxis>
89+
<ChartAxis title="{store>/yAxis/0/title}" />
90+
</yAxis>
91+
</Chart>
92+
```
93+
94+
Respective controller code:
95+
3396
```js
34-
// samples are coming soon
97+
// define series color palette with a preset based on material design colors
98+
ui5.viz.setDefaultColorPalette(ui5.viz.ColorPalette.Material500)
99+
100+
// define model
101+
const oModel = new JSONModel({
102+
title: 'Area line chart',
103+
width: '100%',
104+
height: '300px',
105+
showTooltip: true,
106+
groupedTooltip: true,
107+
showLegend: true,
108+
xAxis: [
109+
{
110+
labels: ['April', 'May', 'June', 'July', 'August', 'September']
111+
}
112+
],
113+
yAxis: [
114+
{
115+
title: 'Sightings in the woods 🍃'
116+
}
117+
],
118+
series: [
119+
{
120+
name: 'Foxes 🦊',
121+
dataPoints: [2, 5, 3, 5, 8, 9],
122+
type: 'area'
123+
}
124+
]
125+
})
126+
127+
this.getView().setModel(oModel, 'store')
35128
```
36129

37130
## Development
@@ -57,7 +150,7 @@ _Will build all resources start watcher task and start a HTTP server_
57150
yarn start
58151
```
59152

60-
The app should open in your browser automatically, otherwise open: `http://localhost:3000`
153+
The app should open in your browser automatically, otherwise open: `http://localhost:3000/demo/index.html`
61154

62155
Info: To get a more detailed logging, use `yarn start:verbose` instead.
63156

@@ -80,6 +173,16 @@ Contributions, questions and comments are all welcome and encouraged.
80173

81174
Check our [current issues](https://github.com/pulseshift/ui5-lib-visualization/issues) or, if you have something in mind how to make it better, [create your own issue](https://github.com/pulseshift/ui5-lib-visualization/issues/new). We would be happy to discuss how they can be solved.
82175

176+
### Contributors
177+
178+
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
179+
180+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
181+
182+
| [<img src="https://avatars1.githubusercontent.com/u/28702172?s=460&v=4" width="100px;"/><br /><sub><b>Lena Serdarusic</b></sub>](https://github.com/lenasrd)<br />[💻](https://github.com/pulseshift/ui5-lib-visualization/commits?author=lenasrd 'Code')💡🤔 | [<img src="https://avatars2.githubusercontent.com/u/8706643?s=460&v=4" width="100px;"/><br /><sub><b>Jascha A. Quintern</b></sub>](http://jascha-quintern.de)<br />[💻](https://github.com/pulseshift/ui5-lib-visualization/commits?author=fuchsvomwalde 'Code')💬 |
183+
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
184+
185+
83186
### License
84187

85188
This project is licensed under the MIT license.

0 commit comments

Comments
 (0)