From 3de6b16262add591aed57450bc6b5ddaaec5ec01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Alberto=20Sol=C3=ADs=20Castro?= <66189900+JuanSolisCTJ13@users.noreply.github.com> Date: Tue, 22 Feb 2022 19:18:58 -0300 Subject: [PATCH 1/4] Creating RFC for Visualization tools. RFC for Viz Tools in the data monitoring squad. --- RFCs/0000-RFC-for-viz-tools .md | 53 +++++++++++++++++++++++++ RFCs/0000-template.md | 68 --------------------------------- 2 files changed, 53 insertions(+), 68 deletions(-) create mode 100644 RFCs/0000-RFC-for-viz-tools .md delete mode 100644 RFCs/0000-template.md diff --git a/RFCs/0000-RFC-for-viz-tools .md b/RFCs/0000-RFC-for-viz-tools .md new file mode 100644 index 0000000..e844ee7 --- /dev/null +++ b/RFCs/0000-RFC-for-viz-tools .md @@ -0,0 +1,53 @@ +- Start Date: 2022-02-21 +- Members: Yael Ramírez, Juan Alberto Solís (@juansolisctj13) +- RFC PR: (leave this empty) + +# Summary + +Implement an useful visualization for admin. + +# Basic example + +. + +# Motivation + +As part of data monitoring, we need to give practical information about the app performance and key parameters.This information will be displayed embedded in the app. + +# Detailed design + +Deliver practical data viz in accordance with the C9 team. For this purpose we are going to use libraries that can be embedded in the app. When the displayed metrics are defined we will define the respective visualization. +The options are: + +- Visx: JS components library for airbnb. +- streamlit.io: Python library. +- Nivo: JS components library. + +# Drawbacks + +For this topic we are going to discuss about the language the library is build. + +In the case of visx and nivo, both are built in JS and works with react and D3. Drawbacks for this: + +- The knowledge base for this squad apparently is more suited to use Python tecnologies and could be a time to master the libraries. + +In the case of Streamlit, drawbacks are: + +- The app will be developed in JS and this feature is in Python. + +# Alternatives + +There are plenty of alternative libraries for this purpose but this 3 options were the most mentioned in the first meetings. + +# Adoption strategy + +The frontend teams will have to work with this d3 and react components in their views for the respective user. For a correct adoption of this feature we will have to give them not only the general purpose graph but the customized viz for the view, including the respective group of tests. +The backend team will have to give us recommendations for embedding the viz without affecting the app performance. + +# How we teach this + +This feature will be named data and metrics visualization and the respective reading of the graphs will be explained in workshops. + +# Unresolved questions + +Almost everything in this feature is TBD. diff --git a/RFCs/0000-template.md b/RFCs/0000-template.md deleted file mode 100644 index 097f957..0000000 --- a/RFCs/0000-template.md +++ /dev/null @@ -1,68 +0,0 @@ -- Start Date: (fill me in with today's date, YYYY-MM-DD) -- Members: (fill me with the names of the RFC creators) -- RFC PR: (leave this empty) - -# Summary - -Brief explanation of the feature. - -# Basic example - -If the proposal involves a new or changed API, include a basic code example. -Omit this section if it's not applicable. - -# Motivation - -Why are we doing this? What use cases does it support? What is the expected -outcome? - -Please focus on explaining the motivation so that if this RFC is not accepted, -the motivation could be used to develop alternative solutions. In other words, -enumerate the constraints you are trying to solve without coupling them too -closely to the solution you have in mind. - -# Detailed design - -This is the bulk of the RFC. Explain the design in enough detail for somebody -familiar with React to understand, and for somebody familiar with the -implementation to implement. This should get into specifics and corner-cases, -and include examples of how the feature is used. Any new terminology should be -defined here. - -# Drawbacks - -Why should we *not* do this? Please consider: - -- implementation cost, both in term of code size and complexity -- whether the proposed feature can be implemented in user space -- the impact on teaching people React -- integration of this feature with other existing and planned features -- cost of migrating existing React applications (is it a breaking change?) - -There are tradeoffs to choosing any path. Attempt to identify them here. - -# Alternatives - -What other designs have been considered? What is the impact of not doing this? - -# Adoption strategy - -If we implement this proposal, how will existing C9 developers adopt it? Is -this a breaking change? Can we write a codemod? Should we coordinate with -other projects or libraries? - -# How we teach this - -What names and terminology work best for these concepts and why? How is this -idea best presented? As a continuation of existing C9 projects patterns? - -Would the acceptance of this proposal mean the C9 documentation must be -re-organized or altered? Does it change how C9 is taught to new developers -at any level? - -How should this feature be taught to existing C9 developers? - -# Unresolved questions - -Optional, but suggested for first drafts. What parts of the design are still -TBD? \ No newline at end of file From 4bdfd4b1076f8e17d878efdbba39df5d58acb365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Alberto=20Sol=C3=ADs=20Castro?= <66189900+JuanSolisCTJ13@users.noreply.github.com> Date: Tue, 1 Mar 2022 15:29:02 -0300 Subject: [PATCH 2/4] Update 0000-RFC-for-viz-tools .md Just in the process... --- RFCs/0000-RFC-for-viz-tools .md | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/RFCs/0000-RFC-for-viz-tools .md b/RFCs/0000-RFC-for-viz-tools .md index e844ee7..7775b01 100644 --- a/RFCs/0000-RFC-for-viz-tools .md +++ b/RFCs/0000-RFC-for-viz-tools .md @@ -16,28 +16,15 @@ As part of data monitoring, we need to give practical information about the app # Detailed design -Deliver practical data viz in accordance with the C9 team. For this purpose we are going to use libraries that can be embedded in the app. When the displayed metrics are defined we will define the respective visualization. -The options are: - -- Visx: JS components library for airbnb. -- streamlit.io: Python library. -- Nivo: JS components library. # Drawbacks -For this topic we are going to discuss about the language the library is build. - -In the case of visx and nivo, both are built in JS and works with react and D3. Drawbacks for this: - -- The knowledge base for this squad apparently is more suited to use Python tecnologies and could be a time to master the libraries. - -In the case of Streamlit, drawbacks are: - -- The app will be developed in JS and this feature is in Python. +The main drawback for this library is that the squad is mainly python-oriented, and the adoption inside the squad could take time. +Other drawbaks related with the first one are that this libraries use react and this is also not well known by almost everyone. # Alternatives -There are plenty of alternative libraries for this purpose but this 3 options were the most mentioned in the first meetings. +One of the alternatives could be some libraries in Python like Streamlit.io. # Adoption strategy @@ -50,4 +37,5 @@ This feature will be named data and metrics visualization and the respective rea # Unresolved questions -Almost everything in this feature is TBD. +We need to know what metrics we are going to provide to the rest of the teams and the format they are going to + From 93e0f1467d788e309d7d554048bae09292759e64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Alberto=20Sol=C3=ADs=20Castro?= <66189900+JuanSolisCTJ13@users.noreply.github.com> Date: Tue, 1 Mar 2022 16:18:07 -0300 Subject: [PATCH 3/4] Update 0000-RFC-for-viz-tools .md @JuanSolisCTJ13 --- RFCs/0000-RFC-for-viz-tools .md | 66 ++++++++++++++++++++++++++++----- 1 file changed, 56 insertions(+), 10 deletions(-) diff --git a/RFCs/0000-RFC-for-viz-tools .md b/RFCs/0000-RFC-for-viz-tools .md index 7775b01..b9d1b5a 100644 --- a/RFCs/0000-RFC-for-viz-tools .md +++ b/RFCs/0000-RFC-for-viz-tools .md @@ -1,30 +1,77 @@ - Start Date: 2022-02-21 -- Members: Yael Ramírez, Juan Alberto Solís (@juansolisctj13) +- Members: Yael Ramírez @YaelRmz, Juan Alberto Solís @JuanSolisCTJ13 - RFC PR: (leave this empty) # Summary -Implement an useful visualization for admin. +Provide a mechanism for the metrics vizualitation of the _host_ role + +# Definitions +_host_: Person who offers his property in the booking system. # Basic example +## Integration of D3 dashboards in the Website + +A section will be added where the host will be able to see a panel with metrics such as: + +- Number of active reservations. +- Reservation history +- History of cancelled reservations +- Revenue per property +- Reviews and rating per property + +It would look like this + +![](https://i.imgur.com/9uGFFqF.png) -. # Motivation -As part of data monitoring, we need to give practical information about the app performance and key parameters.This information will be displayed embedded in the app. +As part of data monitoring, we need to give practical information about the stadistic of his booking for the _host_ # Detailed design +## Usage + +### Installation + +We have a variety of ways to download and use D3. We will show two forms, this is the link to the [documentation](https://riptutorial.com/d3-js/example/2955/installation): + +#### NPM +- Initialize NPM in your project if you have not done so already: +` +npm init +` +- NPM install D3: +` +npm install --save d3 +` +- Reference d3.js (for development) or d3.min.js (for production) in your HTML: + - `` + +#### Directly +- To link directly to the latest release, copy this snippet: + - `` + + +### Examples + +We have a lot of possibilities to visualizations. In this [link](https://observablehq.com/@d3/gallery) you can see examples like this: +![](https://cdn.substack.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F4ff45cab-8501-487d-9a2c-42035bdbbb41_942x480.gif) + +![](https://www.abeamer.com/files/by-date/2018/10/d3-datamap/story-frames/story.gif) # Drawbacks -The main drawback for this library is that the squad is mainly python-oriented, and the adoption inside the squad could take time. -Other drawbaks related with the first one are that this libraries use react and this is also not well known by almost everyone. +- The knowledge base for this squad apparently is more suited to use Python tecnologies and could be a time to master: + - The library itself. + - React. + - JS. + # Alternatives -One of the alternatives could be some libraries in Python like Streamlit.io. +- streamlit.io: Python library. # Adoption strategy @@ -33,9 +80,8 @@ The backend team will have to give us recommendations for embedding the viz with # How we teach this -This feature will be named data and metrics visualization and the respective reading of the graphs will be explained in workshops. +We will create an MD file to explain how to use this feature # Unresolved questions -We need to know what metrics we are going to provide to the rest of the teams and the format they are going to - +Almost everything in this feature is TBD. From 67d32d26b438390f5da1088e4e54972dabe11bd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Alberto=20Sol=C3=ADs=20Castro?= <66189900+JuanSolisCTJ13@users.noreply.github.com> Date: Fri, 11 Mar 2022 12:44:47 -0300 Subject: [PATCH 4/4] including changes in the adaptation strategy only changes in the adoption methodology --- RFCs/0000-RFC-for-viz-tools .md | 1 + 1 file changed, 1 insertion(+) diff --git a/RFCs/0000-RFC-for-viz-tools .md b/RFCs/0000-RFC-for-viz-tools .md index b9d1b5a..e6b5799 100644 --- a/RFCs/0000-RFC-for-viz-tools .md +++ b/RFCs/0000-RFC-for-viz-tools .md @@ -75,6 +75,7 @@ We have a lot of possibilities to visualizations. In this [link](https://observa # Adoption strategy +At the initial sprints, we are going to work with stremlit.io so in the future sprints we can go over D3.js libraries. The frontend teams will have to work with this d3 and react components in their views for the respective user. For a correct adoption of this feature we will have to give them not only the general purpose graph but the customized viz for the view, including the respective group of tests. The backend team will have to give us recommendations for embedding the viz without affecting the app performance.