d3-dashboard-api
JavaScript library that bundles Adobe analytics APIs and D3 visualizations. You can use this module to create custom visualizations with Adobe Analytics data on third-party websites in a matter of minutes.
Goals
Make it easier for developers to create their own visualization using D3 and Adobe Analytics APIs. This library should allow developers to easily create their own D3 charts with Adobe Analytics data with just an API call.
Index
Steps to run:
- On Adobe I/O Console create an Integration
- Use
Cleint IDandCleint Secretto generate an access token. Postman (OAuth2.0) or Adobe I/O Playground can be used.
Anlytics Scopes: openid,AdobeID,read_organizations,additional_info.projectedProductContext,additional_info.job_function - Load d3-dashboard-api.min.js from this repo in your html file.
- Create three variables - query, file, company, accessToken:
- query : dictionary of dictionaries with chart details(html div id and type of chart) and api configuration(filters, dimensions etc.)
- company : org's name for e.g. adobe-io-solutions-demo
- accessToken : Token from step 1
Refer sample code
- In the HTML file add D3 CDN and create the divs with IDs mentioned in query.chart.id
- Call
dashboard(query, company, accessToken);- this will fetch data and create a svg div with visualization, just add it to the div you want.
Charts Available:
- Bubble Chart - type : 'bubble' (name to be mentioned in query.chart.type)
- Bar Chart - type : 'bar'
- Pie Chart - type : 'pie'
Code Sample
sample.js
const accessToken = '< ACCESS_TOKEN >'; //token from step 1
const company = '< company_name >'
const query = {
'chart' : {
'type' : 'bubble', // Type of D3 chart
'id' : 'bubblechart-container' //HTML div to which chart needs to be rendered
},
'api' : { // https://github.com/AdobeDocs/analytics-2.0-apis
'rsid' : ' report-suite-ID',
'end-point' : '/reports/ranked',
'dimension' : 'variables/browser',
'globalFilters' : [
{
'dateRange' : '2009-06-01T00:00/2018-08-21T00:00',
'type' : 'dateRange'
}
],
'metrics' : [
{
'columnId' : 'visits',
'id' : 'metrics/visits'
}
]
}
};
const html = dashboard(query, company, accessToken);
html.then((res) => {
$('#' + query.chart.id).append(res);
});
sample.html
<html>
<head>
<meta charset="utf-8"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="./d3-dashboard-api.min.js"></script>
<script src="./sample.js"></script>
</head>
<body>
<p>Welcome to new Dashbaord</p>
<div id="bubblechart-container"></div>
<div id="barchart-container"></div>
<div id="piechart-container"></div>
</body>
</html>
Contributing:
If you would like to contribute to this project in the form of filing issues, fixing bugs and creating pull requests. Please follow this document. Please also check our code of conduct
Steps to add a chart:
- Clone this repository
- Run
npm install - Add a chart class(in a js file) to /public/js/.
- Associate your chart class name with it's repective file name inside chartMapping dictionary /configs/mapping.js
- Build it
Steps to add an Adobe Anlytics API:
- Clone this repository
- Run
npm install - Add an API class(in a js file) to /utils/.
- Associate your API class name with it's repective file name inside apiMapping dictionary /configs/mapping.js
- Build it
Build It:
- Run command
npm run build
License:
Licensed under Apache-2
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent