Repository files navigation

This library provides an OpenUI5 API that acts as a wrapper for D3-based charting libraryC3.js. It offers a more detailed and attractive API design thansap.viz chart controls, which interacts harmoniously especially in XML Views in combination with data binding.

There are two options how to use the chart library in your UI5 project, depending of the project boilerplate you are using.

Addui5-lib-visualization as dev dependency:

yarn add ui5-lib-visualization --dev

Update ui5 library config in yourpackage.json:

"ui5"{// ..."library":[{"name":"ui5.viz","path":"node_modules/ui5-lib-visualization/dist/ui5/viz","prebuild":true}]// ...}

Finished, you can now use the library in your XML Views via e.g.xmlns:viz="ui5.viz" or in your controllers etc. If you want to upgrade the library, just use default yarn commands, the build process of the starter kit will handle the rest for you:

yarn upgrade ui5-lib-visualization

Download or clone this repository:

git clone git@github.com:pulseshift/ui5-lib-visualization.git

Copy the complete ready-to-use library from/dist to a target destination in your UI5 project (please keep the folder structure as isui5/viz/).

Add the library to thesap-ui-bootstrap resourceroots in yourindex.html:

data-sap-ui-resourceroots="{ "ui5.viz": "pathToTargetDestination/ui5/viz" }"

Please be aware that for option b) all manual steps must be repeated every time when you want to update the library version. Because this variant is more susceptible to errors, we recommend to use theOpenUI5 Starter Kit.

How to test real live samples please see sectionExample. Till then, please enjoy our firstbeta version of our automatcally created markdown API documentation:

• ui5.viz.Chart
• ui5.viz.ChartSeries
• ui5.viz.ChartDataPoint
• ui5.viz.ChartAxis
• ui5.viz.ChartAxisLabel
• ui5.viz.ChartLine
• ui5.viz.ChartArea
• ui5.viz.Color

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.

A brief overview of features, additional to C3.js line and area charts:

• Complete API coverage of properties and aggregations for a fully integrated feature set in XML views.
• If supported by C3.js, rerender will be avoided by the chart control to ensure smooth transitions in case of changes in the data.
• Support of chart annotations, like lines and areas in various designs.
• Support for special designs such as animated dashed lines or hatched areas.
• Convergence interval as a new display type of series.
• Simple color management by implementing color palettes or individual colors for specific series.

To execute the demo, please follow the instructions described in sectionDevelopment. At the time the demo is being refactored with the goal to provide you anSAP Explore like experience.

Here a basic sample of how to use the charts in an XML view:

<!-- ensure that the series data points and the x-axis labels have the exact same amount of entries--><Chartwidth="{store>/width}"height="{store>/height}"showTooltip="{store>/showTooltip}"groupedTooltip="{store>/groupedTooltip}"showLegend="{store>/showLegend}"xAxisType="Category"series="{store>/series}">  <series>    <ChartSeriestype="{store>type}"name="{store>name}"data="{        path: 'store>dataPoints',        templateShareable: false      }">      <ChartDataPointvalue="{store>}" />    </ChartSeries>  </series>  <xAxis>    <ChartAxislabels="{ path: 'store>/xAxis/labels'}">      <ChartAxisLabelvalue="{store>}" />    </ChartAxis>  </xAxis>  <yAxis>    <ChartAxistitle="{store>/yAxis/title}" />  </yAxis></Chart>

Respective controller code:

// define series color palette with a preset based on material design colorsui5.viz.setDefaultColorPalette(ui5.viz.ColorPalette.Material500)// define modelconstoModel=newJSONModel({title:'Chart',width:'100%',height:'300px',showTooltip:true,groupedTooltip:true,showLegend:true,xAxis:{labels:['April','May','June','July','August','September']},yAxis:{title:'Sightings in the woods 🌲'},series:[{name:'Foxes 🦊',dataPoints:[2,5,3,5,8,9],type:ui5.viz.ChartSeriesType.Spline},{name:'Bears 🐻',dataPoints:[1,2,0,2,1,3],type:ui5.viz.ChartSeriesType.Spline},{name:'Deers 🦌',dataPoints:[14,20,18,23,17,18],type:ui5.viz.ChartSeriesType.Spline}]})this.getView().setModel(oModel,'store')

Download or clone this repository:

git clone git@github.com:pulseshift/ui5-lib-visualization.git

Please ensure that you have installednode andyarn2 before you continue.

Install dependencies:

yarn

Start developing:Will build all resources start watcher task and start a HTTP server

yarn dev

The app should open in your browser automatically, otherwise open:http://localhost:3000/demo/index.html

Info: To get a more detailed logging, useyarn dev:verbose instead.

Start distribution build:Will create adist directory in your project root.

yarn dist

This will build the app, test the code with linters and updates all docs automatically. Afterwards, the production app build can be tested by runyarn start:dist. The app should open in your browser automatically, otherwise open:http://localhost:3000/demo/index.html

Increase version number according tosemantic versioning e.g.

yarn version patch

If the app build matches your requirements, upload your build tonpm:

yarn npm publish

Contributions, questions and comments are all welcome and encouraged.

Check ourcurrent issues or, if you have something in mind how to make it better,create your own issue. We would be happy to discuss how they can be solved.

Thanks goes to these wonderful people (emoji key):

Lena Serdarusic 💻💡🤔	Jascha A. Quintern 💻💬	Michael Dell 🤔

This project is licensed under the MIT license.Copyright 2017PulseShift GmbH