Compare commits
5 Commits
c208bb5179
...
e51166527f
Author | SHA1 | Date |
---|---|---|
Yandrik | e51166527f | |
Yandrik | c00f31e5b8 | |
Yandrik | 1e6b416b6a | |
Yandrik | bb7e364270 | |
Yandrik | 47389a273f |
|
@ -1,5 +1,5 @@
|
||||||
# Presentation for the Methoden des IT-Projektmanagement Case Study
|
# Presentation for the Methoden des IT-Projektmanagement Case Study
|
||||||
<center>Ulm University, SoSe 2022</center>
|
<center>Ulm University, SoSe 2022</center>
|
||||||
<center>Group: Yannik Bretschneider, Jonas Schwedler, Megi Hoxhalli, Sebastian Wünsch, Jana Leinmüller</center>
|
<center>Group: Sebastian Wünsch, Yannik Bretschneider, Jonas Schwedler, Megi Hoxhalli, Jana Leinmüller</center>
|
||||||
|
|
||||||
To view, clone the Git repo, and open the `index.html` file in a browser, or run `npm start` to start a development server.
|
To view, clone the Git repo, and open the `index.html` file in a browser, or run `npm start` to start a development server.
|
|
@ -0,0 +1,79 @@
|
||||||
|
Team Product Page Backlog,,,,,,,,,,,Ranking,High,Sprints,PI2 - Sprint 1
|
||||||
|
Total Capacity,,Testing Capacity,,per Sprint,,,,,,,,Medium,,PI2 - Sprint 2
|
||||||
|
189,,0 (because Test-Driven Development),,31.5,,,,,,,,Low,,PI2 - Sprint 3
|
||||||
|
,,,,,,,,,,,,,,PI2 - Sprint 4
|
||||||
|
,,,,,,,,,,,,,,PI2 - Sprint 5
|
||||||
|
,,,,,,,,,,,,,,PI2 - Sprint 6
|
||||||
|
,,,,,,,,,,,,,,
|
||||||
|
,,,,,,,,,,,,,,
|
||||||
|
,,,,,,,,,,,,,,
|
||||||
|
,,,,,,,,,,,,,,
|
||||||
|
,,,,,,,,,,,,,,
|
||||||
|
Feature ID,Feature (Short Description),Description,Acceptance Criteria,Priority,Rank,Size,Dependency,Risk,Sprint assigned,,,,,
|
||||||
|
SFEAT00124,Product Title Display,"As a customer, I want to see a unique identifiable product title, so that I can intuitively identify the product across the website. ",1. Display the title at the top of the website next to the picture on the right side.,High,7,3,Testing Accuracy Increase,,PI2 - Sprint 2,,,,,
|
||||||
|
SFEAT00114,Product Page Picture and Alternate Views Display,"As a customer, I need to have as many visual information as possible, so that I can get a good overview of the various parts of the product.","1. The main picture shall be displayed on the top left of the product page.
|
||||||
|
1.2. Customer shall be able to zoom into main picture displayed.
|
||||||
|
1.3. Main picture shall be changing according to selection from entire list.
|
||||||
|
2. Additional product picture shall be displayed at 75% size reduction centered and beneath the main picture.
|
||||||
|
3. 3 detailed pictures shall be displayed at the same time before scrolling through the list of pictures.
|
||||||
|
4. List of pictures shall entail at least the following kinds: Product (alone), Product (in usage)",High,3,8,Testing Accuracy Increase,"Subpar Implementation might cause Loading Time Problems because of high-res images
|
||||||
|
Mitigation: Page Speed Increase Feature at the end, so that flaws in all features can be found",PI2 - Sprint 1,,,,,
|
||||||
|
SFEAT00125,Pricing information,"As a customer, I want to have an overview of the product's price and possible discount options, so that I can get full transparency on costs. ","1. Display the product price beneath the reviews summary
|
||||||
|
2. Adjust the price based on sales & quantity regulations
|
||||||
|
3. Inform the customer via a pop-up message on the availability of discounts or promotional offers.
|
||||||
|
4. Reduced prices shall be displayed next to the reguar price which gets crossed",High,2,6,Testing Accuracy Increase,,PI2 - Sprint 1,,,,,
|
||||||
|
SFEAT00112,Testing Accuracy Increase,"As a webshop provider, I need to ensure that my features are deployed correctly, so that my customers do have a high quality user experience. ","1. Identification of tests which can be automated
|
||||||
|
2. Automation of highly repetitive testing tasks",High,1,14,,"Developers need to be familiar with TDD, otherwise improper test cases might be written",PI2 - Sprint 1,,,,,
|
||||||
|
SFEAT00111,Webshop - Page Speed Increase ,"As an online customer, I need to have a responsive website, so that I do not bounce from the website.","1. Load the website in maximum 3 seconds
|
||||||
|
2. Ensure high picture resolution quality
|
||||||
|
3. Reduce Java Script Usage whereever possible (spike task)",High,5,12,Everything,,PI2 - Sprint 5,PI2 - Sprint 6,,,,
|
||||||
|
SFEAT00127,Product Quantity,"As a customer, I want to be able to change the quantity to purchase, so that I can directly buy the correct number of products I require. ","1. Display the purchase quantity below the product price
|
||||||
|
2. Customers should not be able to purchase more than stock is available
|
||||||
|
3. Display an out of stock message in case products are not available
|
||||||
|
4. Display a notification on earliest shipment for which information is available",Low,14,6,Testing Accuracy Increase,,PI2 - Sprint 2,,,,,
|
||||||
|
SFEAT00122,Add to cart function,"As a customer, I want to have the possibility to add items to my shopping cart, so that I can continue shopping for other items and return to payment at a later point in time. ","a) Display button
|
||||||
|
1. Display below Product Variables
|
||||||
|
2. Display bigger in size than Product Variables
|
||||||
|
3. Display next to product image
|
||||||
|
|
||||||
|
b) Place item in cart
|
||||||
|
1. adjust cart value
|
||||||
|
2. calculate based on size/amount",High,6,10,"Testing Accuracy Increase
|
||||||
|
Pricing Information",,PI2 - Sprint 2,,,,,
|
||||||
|
SFEAT00116,Product Description Display,"As a customer, I want to have an informative product description, so that I can get a good overview of the product characteristics.","1. Display the product description as a related tab beneath the basic production information and general interaction section
|
||||||
|
2. Display all relevant product and brand information available",Medium,4,4,Testing Accuracy Increase,,PI2 - Sprint 2,,,,,
|
||||||
|
SFEAT00126,Product Star Review / Ranking,"As a customer, I want to give a star ranking for a product, so that I can feedback and share my experience. ","1. Display the Product Review beneath the product title.
|
||||||
|
A. Display the overall average rating in te format of stars as X/5
|
||||||
|
B. Display the number of ratings made
|
||||||
|
2. Allow guest accounts to view the ranking
|
||||||
|
3. Allow logged-in users to rank products",Low,15,8,Testing Accuracy Increase,,PI2 - Sprint 5,,,,,
|
||||||
|
SFEAT00117,Consumer reviews on product,"As a customer, I want to have an overview of past reviews, so that I can get information about the quality and user experience of former buyers. ","1. Display the product reviews as a related tab beneath the basic production information and general interaction section
|
||||||
|
2. Display reviews in chronological order starting with the most recent ones
|
||||||
|
3. Customers can filter reviews according to ranking given
|
||||||
|
",Low,16,12,"Testing Accuracy Increase
|
||||||
|
Star Review
|
||||||
|
",,PI2 - Sprint 5,,,,,
|
||||||
|
SFEAT00128,Trust Signals,"As a customer, I want to see trusted signs along the purchasing process, so that I am reassured to be operating on a trustworthy website","1. Display the signals below the ""add to cart"" button",Medium,9,3,Testing Accuracy Increase,,PI2 - Sprint 3,,,,,
|
||||||
|
SFEAT00121,Product Variables Overview,"As a webshop, I want to provide the customer with different product varieties, so that the customer can take a look at the entire product range.","1. Display coloring options
|
||||||
|
2. Display sizing options",High,8,6,Testing Accuracy Increase,,PI2 - Sprint 1,,,,,
|
||||||
|
SFEAT00115,Product Page View Different colors,"As a customer, I want to change colors of my product displayed, so that I can compare them with each other.","1. The pictures displayed on the product page shall be displayed according to the color being selected.
|
||||||
|
2. Available colors shall be taken from the product variables section.",Medium,12,7,"Testing Accuracy Increase
|
||||||
|
Product Page Picture and Alternate Views Display
|
||||||
|
Product Variables Overview","Subpar Implementation might cause Loading Time Problems because of high-res images
|
||||||
|
Mitigation: Page Speed Increase Feature at the end, so that flaws in all features can be found",PI2 - Sprint 4,,,,,
|
||||||
|
SFEAT00129,Social Share Buttons,"As a customer, I want to have the possbility to share products with my community, so that I can engage with others about the products I am interested in.","1. Display the buttons below the ""add to wishlist"" button
|
||||||
|
2. Add instagram, facebook, pinterest, tiktok, snapchat",Medium,10,22,Testing Accuracy Increase,Effort to implement Social Share Buttons is probably heavily overestimated,PI2 - Sprint 3,,,,,
|
||||||
|
SFEAT00119,Add to wishlist function,"As a customer, I want to have the possibility to add items to my wishlist, so that I can save my favourite items for a later point in time. ",1. Display the wishlist button beneath the purchasing process,Low,17,6,Testing Accuracy Increase,,PI2 - Sprint 4,,,,,
|
||||||
|
SFEAT00120,Add to comparison function,"As a customer, I want to have the possibility to compare items with each other, so that I can make an informed decision about different product options.",1. Display the comparison button next to the watchlist button on the right side,Low,13,8,"Testing Accuracy Increase
|
||||||
|
Pricing Information",,PI2 - Sprint 4,,,,,
|
||||||
|
SFEAT00118,Related products,"As a customer, I want to be informed about related products, so that I can be holistically informed about product usage. ","1. Display related products at the bottom of the page
|
||||||
|
2. Show items ranked by customer reviews starting with highly ranked products first
|
||||||
|
3. Show items first being bought by other customers in the past. ",Medium,11,6,Testing Accuracy Increase,"Algorithm (delayed for 2 sprints) might be delayed more
|
||||||
|
Mitigation: Sprint 4 so that the other team has 1 Sprint as buffer",PI2 - Sprint 4,,,,,
|
||||||
|
SFEAT00113,Enable English language,"As an online customer, I need to have an English version of the pages, so that I can find all relevant information in an internationally known language. ",,High,7,5,Testing Accuracy Increase,,PI2 - Sprint 2,PI2 – Sprint 6,,,,
|
||||||
|
SFEAT00123,Live-Chat,"As a customer, I want to have the possibility to chat with a bot, so that I can get immediate answers to initial questions or be better directed to a customer service representative. ","1. Display the chat-bot at the bottom right corner of the page
|
||||||
|
2. Chat-Bot icon display after 10 seconds are spent by the user on the page
|
||||||
|
3. Create a welcome message for the initial contact with customer saying ""Got any questions? I am happy to help""
|
||||||
|
4. Set different bot actions which include FAQ website and book a customer service appointment. ",Low,18,27,Testing Accuracy Increase,"Full-Capacity Sprints at the end
|
||||||
|
=> Feature may not be finished in time
|
||||||
|
Mitigation: Live-Chat Feature can be released after the Webshop Launch, so no time pressure",PI2 - Sprint 6,,,,,
|
|
Binary file not shown.
|
@ -0,0 +1,3 @@
|
||||||
|
Feature Name,Product Title Display,Product Page Picture and Alternate Views Display,Pricing information,Testing Accuracy Increase,Webshop - Page Speed Increase,Product Quantity,Add to cart function,Product Description Display,Product Star Review / Ranking,Consumer reviews on product,Trust Signals,Product Variables Overview,Product Page View Different colors,Social Share Buttons,Add to wishlist function,Add to comparison function,Related products,Enable English language,Live-Chat
|
||||||
|
Size,3,8,6,14,12,6,10,4,8,12,3,6,7,22,6,8,6,5,27
|
||||||
|
Rank,7,3,2,1,5,14,6,4,15,16,9,8,12,10,17,13,11,7,18
|
|
231
index.html
231
index.html
|
@ -1,40 +1,207 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
<title>reveal.js</title>
|
<title>reveal.js</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="dist/reset.css">
|
<link rel="stylesheet" href="dist/reset.css">
|
||||||
<link rel="stylesheet" href="dist/reveal.css">
|
<link rel="stylesheet" href="dist/reveal.css">
|
||||||
<link rel="stylesheet" href="dist/theme/black.css">
|
<link rel="stylesheet" href="dist/theme/blood.css">
|
||||||
|
|
||||||
<!-- Theme used for syntax highlighted code -->
|
<!-- Theme used for syntax highlighted code -->
|
||||||
<link rel="stylesheet" href="plugin/highlight/monokai.css">
|
<link rel="stylesheet" href="plugin/highlight/monokai.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="reveal">
|
<div class="reveal">
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
<section>Slide 1</section>
|
<section>
|
||||||
<section>Slide 2</section>
|
<h1 class="r-fit-text">PI2<br/>Sprint Planning</h1>
|
||||||
</div>
|
<p style="color: grey; font-size: 50%;">
|
||||||
</div>
|
Sebastian Wünsch,
|
||||||
|
Yannik Bretschneider,
|
||||||
|
Jonas Schwedler,
|
||||||
|
Megi Hoxhalli,
|
||||||
|
Jana Leinmüller
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Goals</h2>
|
||||||
|
<ul>
|
||||||
|
<li class="fragment fade-up">Transition to Test-Driven Development</li>
|
||||||
|
<li class="fragment fade-up">Implement Core Features before Mid-September</li>
|
||||||
|
</ul>
|
||||||
|
<aside class="notes" data-markdown>
|
||||||
|
- transition to tdd
|
||||||
|
- tried-and-true method to improve code quality
|
||||||
|
- will ensure that the system will be testable in the future
|
||||||
|
- implement core features before Mid-September
|
||||||
|
- product launch
|
||||||
|
- a at least partially working version should be up-and-running then
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
<!--
|
||||||
|
<section>
|
||||||
|
<div class="r-stretch">
|
||||||
|
<canvas data-chart="bar" data-chart-src="cost-graph.csv">
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
{
|
||||||
|
"data" : {
|
||||||
|
"datasets" : [{ "backgroundColor": "#0f0" }, { "backgroundColor": "#0ff" } ]
|
||||||
|
},
|
||||||
|
"options": { "scales": { "x": { }, "y": { } } }
|
||||||
|
}
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
</canvas>
|
||||||
|
</div>
|
||||||
|
<aside class="notes" data-markdown>
|
||||||
|
- Graph of feature priority and feature size
|
||||||
|
- *big* features generally have a *higher* rank
|
||||||
|
|
||||||
<script src="dist/reveal.js"></script>
|
</aside>
|
||||||
<script src="plugin/notes/notes.js"></script>
|
</section>
|
||||||
<script src="plugin/markdown/markdown.js"></script>
|
-->
|
||||||
<script src="plugin/highlight/highlight.js"></script>
|
<section>
|
||||||
<script>
|
<h2>Development Schedule</h2>
|
||||||
// More info about initialization & config:
|
<pre><code style="overflow: hidden; font-size: 70%; line-height: 100%" data-trim data-noescape class="yaml" data-line-numbers="1-8|9-17|18-23|24-31|32-38|39-45">
|
||||||
// - https://revealjs.com/initialization/
|
S1:
|
||||||
// - https://revealjs.com/config/
|
cap: 36
|
||||||
Reveal.initialize({
|
tasks:
|
||||||
hash: true,
|
- Testing Accuracy Increase (14P) (focus on test-driven development)
|
||||||
|
- Pricing information (+++) (6P)
|
||||||
|
- Product Page Picture and Alternate Views Display (+++) (8P)
|
||||||
|
- Product Variables Overview (+++) (6P)
|
||||||
|
load_capacity: 94%
|
||||||
|
S2:
|
||||||
|
cap: 32
|
||||||
|
tasks:
|
||||||
|
- Add to cart function (+++)(10P)
|
||||||
|
- Product Quantity (6P) (+)
|
||||||
|
- Product Title Display (++) (3P)
|
||||||
|
- Product Description Display (++) (4P)
|
||||||
|
- Enable English Language (first half) (3P)
|
||||||
|
load_capacity: approx 81%
|
||||||
|
S3:
|
||||||
|
cap: 31
|
||||||
|
tasks:
|
||||||
|
- Social Share Buttons (+ for current cost, ++ for less points) (22P)
|
||||||
|
- Trust Signals (first part) (++) (3P)
|
||||||
|
load_capacity: 80%
|
||||||
|
S4:
|
||||||
|
cap: 29
|
||||||
|
tasks:
|
||||||
|
- Related products (6P)
|
||||||
|
- Product Page View Different colors (7P)
|
||||||
|
- Add to comparison function (8P)(0)
|
||||||
|
- Add to wishlist function (6P) (+)
|
||||||
|
load_capacity: 93%
|
||||||
|
S5:
|
||||||
|
cap: 25
|
||||||
|
tasks:
|
||||||
|
- Product Star Review / Ranking (8P) (+)
|
||||||
|
- Consumer reviews on product (12P) (0)
|
||||||
|
- Webshop - Page Speed Increase (first part) (5P)
|
||||||
|
load_capacity: 100%
|
||||||
|
S6:
|
||||||
|
cap: 36
|
||||||
|
tasks:
|
||||||
|
- Webshop - Page Speed Increase (second part) (7P)
|
||||||
|
- Live-Chat (0) (27P)
|
||||||
|
- Enable English Language (second half) (2P)
|
||||||
|
load_capacity: 100%
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
// Learn about plugins: https://revealjs.com/plugins/
|
<aside class="notes" data-markdown>
|
||||||
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
|
- We're not gonna go through everything, but we are going to talk about why we made the decisions we made
|
||||||
});
|
1. Sprint
|
||||||
</script>
|
- Testing Accuracy Increase is early to ensure that *all future code will
|
||||||
</body>
|
be developed in a testable way*
|
||||||
|
- Instruct the team on how to carry out TDD
|
||||||
|
- TDD is a skill that all professional developers should have
|
||||||
|
- Other than that, some core features are done early on
|
||||||
|
2. Sprint
|
||||||
|
- Thematically similar features to Sprint 1
|
||||||
|
- Core Features of the webshop
|
||||||
|
- First Part of the english translation to have a sample to review the translation quality
|
||||||
|
3. Sprint
|
||||||
|
- Development of Social Share Button is extremely expensive
|
||||||
|
- Wierd, as there are libraries out there to do this in a single LoC
|
||||||
|
- If development finishes early, features from later sprints should be started
|
||||||
|
4. Sprint
|
||||||
|
- Focus on low-priority features that are still important parts of the webshop
|
||||||
|
- Related Products are placed here
|
||||||
|
- Reason is that the team working on the algorithm needed two more sprints to get the algorithm ready
|
||||||
|
- We gave them three to account for possible delays
|
||||||
|
5. Sprint
|
||||||
|
- Similar to the previous sprint
|
||||||
|
- Webshop should be deployed now because of timeline, product launch
|
||||||
|
- Here, first part of increasing the webshop speed is started
|
||||||
|
- Optimization is done at the end to *ensure that all components have been developed already*
|
||||||
|
- leads to more accurate profiling of the application
|
||||||
|
- better / bigger speed improvements
|
||||||
|
- "cleanup" of speed problems that were caused by development
|
||||||
|
6. Sprint
|
||||||
|
- More Speed Increase
|
||||||
|
- Second part of the english translation (released after the sprint)
|
||||||
|
- Live Chat is really expensive, but basically irrelevant
|
||||||
|
- Can be temporarily replaced with a simple FAQ page
|
||||||
|
- If the time is not enough, it might be sacrificed for more important features
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>No extra testing capacity needed</h2>
|
||||||
|
<aside class="notes" data-markdown>
|
||||||
|
- No extra testing capacity is needed because:
|
||||||
|
- Team develops through TDD
|
||||||
|
- Tests are written before the code is
|
||||||
|
- Tests are automatically executed all the time
|
||||||
|
- That's also the reason for being able to release the not-finished version of the webshop
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h4>Lastly: A Note on Social Share Buttons</h4>
|
||||||
|
<pre><code data-trim data-line-numbers="2-7" class="jsx">
|
||||||
|
<!--
|
||||||
|
<TwitterShareButton
|
||||||
|
url={shareUrl}
|
||||||
|
title={title}
|
||||||
|
className="...">
|
||||||
|
<TwitterIcon size={32} round />
|
||||||
|
</TwitterShareButton>
|
||||||
|
-->
|
||||||
|
</code></pre>
|
||||||
|
<a href="https://github.com/nygardk/react-share">nygarkd/react-share on GitHub</a>
|
||||||
|
<aside class="notes" data-markdown>
|
||||||
|
- Implementing Social Share Buttons is easy
|
||||||
|
- Libraries exist to do this in a couple lines of code
|
||||||
|
- Our Estimation is 2 Points instead of 22
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="dist/reveal.js"></script>
|
||||||
|
<script src="plugin/notes/notes.js"></script>
|
||||||
|
<script src="plugin/markdown/markdown.js"></script>
|
||||||
|
<script src="plugin/highlight/highlight.js"></script>
|
||||||
|
<script src="plugin/chart/plugin.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// More info about initialization & config:
|
||||||
|
// - https://revealjs.com/initialization/
|
||||||
|
// - https://revealjs.com/config/
|
||||||
|
Reveal.initialize({
|
||||||
|
hash: true,
|
||||||
|
showNotes: false,
|
||||||
|
|
||||||
|
// Learn about plugins: https://revealjs.com/plugins/
|
||||||
|
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealChart]
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
|
"name": "reveal.js",
|
||||||
"version": "4.3.1",
|
"version": "4.3.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -0,0 +1,198 @@
|
||||||
|
/*****************************************************************
|
||||||
|
** Author: Asvin Goel, goel@telematique.eu
|
||||||
|
** Fixed for Reveal4: kotborealis@awooo.ru
|
||||||
|
**
|
||||||
|
** A plugin for reveal.js allowing to integrate Chart.js
|
||||||
|
**
|
||||||
|
** Version: 1.3.1
|
||||||
|
**
|
||||||
|
** License: MIT license (see LICENSE.md)
|
||||||
|
**
|
||||||
|
******************************************************************/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reveal Plugin
|
||||||
|
* https://revealjs.com/creating-plugins/
|
||||||
|
*/
|
||||||
|
window.RevealChart = window.RevealChart || {
|
||||||
|
id: 'RevealChart',
|
||||||
|
init: function(deck) {
|
||||||
|
initChart(deck);
|
||||||
|
},
|
||||||
|
update: function(canvas, idx, data) { update(canvas, idx, data); },
|
||||||
|
};
|
||||||
|
|
||||||
|
const initChart = function(Reveal){
|
||||||
|
function parseJSON(str) {
|
||||||
|
var json;
|
||||||
|
try {
|
||||||
|
json = JSON.parse(str);
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return json;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Recursively merge properties of two objects
|
||||||
|
*/
|
||||||
|
function mergeRecursive(obj1, obj2) {
|
||||||
|
|
||||||
|
for (var p in obj2) {
|
||||||
|
try {
|
||||||
|
// Property in destination object set; update its value.
|
||||||
|
if ( obj1[p] !== null && typeof obj1[p] === 'object' && typeof obj2[p] === 'object' ) {
|
||||||
|
obj1[p] = mergeRecursive(obj1[p], obj2[p]);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
obj1[p] = obj2[p];
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
// Property in destination object not set; create it and set its value.
|
||||||
|
obj1[p] = obj2[p];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function createChart(canvas, CSV, comments) {
|
||||||
|
canvas.chart = null;
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
var chartOptions = { responsive: true, maintainAspectRatio: false };
|
||||||
|
var chartData = { labels: null, datasets: []};
|
||||||
|
if ( comments !== null ) for (var j = 0; j < comments.length; j++ ){
|
||||||
|
comments[j] = comments[j].replace(/<!--/,'');
|
||||||
|
comments[j] = comments[j].replace(/-->/,'');
|
||||||
|
var config = parseJSON(comments[j]);
|
||||||
|
if ( config ) {
|
||||||
|
if ( config.data ) {
|
||||||
|
mergeRecursive( chartData, config.data);
|
||||||
|
}
|
||||||
|
if ( config.options ) {
|
||||||
|
mergeRecursive( chartOptions, config.options);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var lines = CSV.split('\n').filter(function(v){return v!==''});
|
||||||
|
// if labels are not defined, get them from first line
|
||||||
|
if ( chartData.labels === null && lines.length > 0 ) {
|
||||||
|
chartData.labels = lines[0].split(',');
|
||||||
|
chartData.labels.shift();
|
||||||
|
lines.shift();
|
||||||
|
}
|
||||||
|
// get data values
|
||||||
|
for (var j = 0; j < lines.length; j++ ){
|
||||||
|
if (chartData.datasets.length <= j) chartData.datasets[j] = {};
|
||||||
|
chartData.datasets[j].data = lines[j].split(','); //.filter(function(v){return v!==''});
|
||||||
|
chartData.datasets[j].label = chartData.datasets[j].data[0];
|
||||||
|
chartData.datasets[j].data.shift();
|
||||||
|
for (var k = 0; k < chartData.datasets[j].data.length; k++ ){
|
||||||
|
chartData.datasets[j].data[k] = Number(chartData.datasets[j].data[k]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// add chart options
|
||||||
|
var config = chartConfig[canvas.getAttribute("data-chart")];
|
||||||
|
if ( config ) {
|
||||||
|
for (var j = 0; j < chartData.datasets.length; j++ ){
|
||||||
|
for (var attrname in config) {
|
||||||
|
if ( !chartData.datasets[j][attrname] ) {
|
||||||
|
chartData.datasets[j][attrname] = config[attrname][j%config[attrname].length];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.chart = new Chart(ctx, { type: canvas.getAttribute("data-chart"), data: chartData, options: chartOptions });
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateChart(canvas, idx, data) {
|
||||||
|
canvas.chart.data.datasets[idx].data = data;
|
||||||
|
recreateChart( canvas );
|
||||||
|
}
|
||||||
|
|
||||||
|
var initializeCharts = function(){
|
||||||
|
// Get all canvases
|
||||||
|
var canvases = document.querySelectorAll("canvas");
|
||||||
|
for (var i = 0; i < canvases.length; i++ ){
|
||||||
|
// check if canvas has data-chart attribute
|
||||||
|
if ( canvases[i].hasAttribute("data-chart") ){
|
||||||
|
var CSV = canvases[i].innerHTML.trim();
|
||||||
|
var comments = CSV.match(/<!--[\s\S]*?-->/g);
|
||||||
|
CSV = CSV.replace(/<!--[\s\S]*?-->/g,'').replace(/^\s*\n/gm, "")
|
||||||
|
if ( ! canvases[i].hasAttribute("data-chart-src") ) {
|
||||||
|
createChart(canvases[i], CSV, comments);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var canvas = canvases[i];
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.onload = function() {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
createChart(canvas, xhr.responseText, comments);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") +". ReadyState: " + xhr.readyState + ", Status: " + xhr.status);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.open( 'GET', canvas.getAttribute("data-chart-src"), false );
|
||||||
|
try {
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
catch ( error ) {
|
||||||
|
console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + error );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function recreateChart(canvas) {
|
||||||
|
// clear data to redraw animation
|
||||||
|
var data = canvas.chart.data.datasets;
|
||||||
|
canvas.chart.data.datasets = [];
|
||||||
|
canvas.chart.update();
|
||||||
|
canvas.style.visibility = "hidden";
|
||||||
|
setTimeout( function(canvas, data) {
|
||||||
|
canvas.chart.data.datasets = data;
|
||||||
|
canvas.style.visibility = "visible";
|
||||||
|
canvas.chart.update();
|
||||||
|
}, 500, canvas, data); // wait for slide transition to re-add data and animation
|
||||||
|
/*
|
||||||
|
var config = canvas.chart.config;
|
||||||
|
canvas.chart.destroy();
|
||||||
|
setTimeout( function() { canvas.chart = new Chart(canvas, config);}, 500); // wait for slide transition
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
// check if chart option is given or not
|
||||||
|
var chartConfig = Reveal.getConfig().chart || {};
|
||||||
|
|
||||||
|
// set global chart options
|
||||||
|
var config = chartConfig.defaults;
|
||||||
|
if ( config ) {
|
||||||
|
mergeRecursive(Chart.defaults, config);
|
||||||
|
}
|
||||||
|
|
||||||
|
Reveal.addEventListener('ready', function(){
|
||||||
|
initializeCharts();
|
||||||
|
Reveal.addEventListener('slidechanged', function(){
|
||||||
|
var canvases = Reveal.getCurrentSlide().querySelectorAll("canvas[data-chart]");
|
||||||
|
for (var i = 0; i < canvases.length; i++ ){
|
||||||
|
if ( canvases[i].chart && canvases[i].chart.config.options.animation !== false ) {
|
||||||
|
recreateChart( canvases[i] );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.update = updateChart;
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
Loading…
Reference in New Issue