Skip to content
Snippets Groups Projects
Commit c10a8194 authored by SaifFGit's avatar SaifFGit
Browse files

Create MG close #2

parent 198e24c8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Doc/Design/MG/MG.pdf
+ 0
− 0
View file @ c10a8194
No preview for this file type
Doc/Design/MG/MG.tex
+ 358
− 140
View file @ c10a8194
...@@ -12,10 +12,11 @@ ...@@ -12,10 +12,11 @@
colorlinks, colorlinks,
citecolor=black, citecolor=black,
filecolor=black, filecolor=black,
linkcolor=red, linkcolor=blue,
urlcolor=blue urlcolor=blue
} }
\usepackage[round]{natbib} \usepackage[round]{natbib}
% \usepackage[normalem]{ulem}
\newcounter{acnum} \newcounter{acnum}
\newcommand{\actheacnum}{AC\theacnum} \newcommand{\actheacnum}{AC\theacnum}
...@@ -29,17 +30,15 @@ ...@@ -29,17 +30,15 @@
\newcommand{\mthemnum}{M\themnum} \newcommand{\mthemnum}{M\themnum}
\newcommand{\mref}[1]{M\ref{#1}} \newcommand{\mref}[1]{M\ref{#1}}
\title{SE 3XA3: Software Requirements Specification\\Title of Project} \title{SE 3XA3: Software Requirements Specification\\CryptoMetrics}
\author{Team \#, Team Name \author{Team 15
\\ Student 1 name and macid \\ Saif Fadhel, fadhels
\\ Student 2 name and macid \\ Vanshaj Verma, vermav2
\\ Student 3 name and macid \\ Himanshu Aggarwal, aggarwah
} }
\date{\today} \date{March 18, 2022}
\input{../../Comments}
\begin{document} \begin{document}
...@@ -49,14 +48,16 @@ ...@@ -49,14 +48,16 @@
\tableofcontents \tableofcontents
\listoftables \listoftables
\listoffigures \listoffigures
\newpage
\begin{table}[bp] \begin{table}[h!]
\caption{\bf Revision History} \caption{\bf Revision History}
\begin{tabularx}{\textwidth}{p{3cm}p{2cm}X} \begin{tabularx}{\textwidth}{p{3cm}p{2cm}X}
\toprule {\bf Date} & {\bf Version} & {\bf Notes}\\ \toprule {\bf Date} & {\bf Version} & {\bf Notes}\\
\midrule \midrule
Date 1 & 1.0 & Notes\\ Mar. 14, 2022 & 1.0 & Creation of MG Doc\\
Date 2 & 1.1 & Notes\\ Mar. 15, 2022 & 1.1 & Add Introduction\\
Mar. 17, 2022 & 1.1 & Complete Majority of sections\\
Mar. 18, 2022 & 1.1 & All sections complete\\
\bottomrule \bottomrule
\end{tabularx} \end{tabularx}
\end{table} \end{table}
...@@ -67,44 +68,43 @@ Date 2 & 1.1 & Notes\\ ...@@ -67,44 +68,43 @@ Date 2 & 1.1 & Notes\\
\section{Introduction} \section{Introduction}
Decomposing a system into modules is a commonly accepted approach to developing \subsection{Overview}
software. A module is a work assignment for a programmer or programming
team~\citep{ParnasEtAl1984}. We advocate a decomposition
based on the principle of information hiding~\citep{Parnas1972a}. This
principle supports design for change, because the ``secrets'' that each module
hides represent likely future changes. Design for change is valuable in SC,
where modifications are frequent, especially during initial development as the
solution space is explored.
Our design follows the rules layed out by \citet{ParnasEtAl1984}, as follows: CryptoMetrics is a re-implementation of an open-source project called Cryptodash which analyzes historical trends related to various cryptocurrencies in order to help users make educated investment decisions.
\begin{itemize}
\item System details that are likely to change independently should be the
secrets of separate modules.
\item Each data structure is used in only one module.
\item Any other program that requires information stored in a module's data
structures must obtain it by calling access programs belonging to that module.
\end{itemize}
After completing the first stage of the design, the Software Requirements \subsection{Context}
Specification (SRS), the Module Guide (MG) is developed~\citep{ParnasEtAl1984}. The MG
specifies the modular structure of the system and is intended to allow both The context of this document is that it will build upon what the Software Requirements Specification Document started which is that in addition to identifying the functional and non-functional requirements proposed by the SRS, the Design document will elaborate on how these requirements can be achieved. Once completed, this document will be sent to different groups to get them familiar with the design of the project. These groups can be identified as follows:
designers and maintainers to easily identify the parts of the software. The
potential readers of this document are as follows:
\begin{itemize} \begin{itemize}
\item New project members: This document can be a guide for a new project member \item \textbf{New project members:} This document can be a guide for a new project member
to easily understand the overall structure and quickly find the to easily understand the overall structure and quickly find the
relevant modules they are searching for. relevant modules they are searching for.
\item Maintainers: The hierarchical structure of the module guide improves the \item \textbf{Maintainers:} The hierarchical structure of the module guide improves the
maintainers' understanding when they need to make changes to the system. It is maintainers' understanding when they need to make changes to the system. It is
important for a maintainer to update the relevant sections of the document important for a maintainer to update the relevant sections of the document
after changes have been made. after changes have been made.
\item Designers: Once the module guide has been written, it can be used to \item \textbf{Designers:} Once the module guide has been written, it can be used to
check for consistency, feasibility and flexibility. Designers can verify the check for consistency, feasibility and flexibility. Designers can verify the
system in various ways, such as consistency among modules, feasibility of the system in various ways, such as consistency among modules, feasibility of the
decomposition, and flexibility of the design. decomposition, and flexibility of the design.
\end{itemize} \end{itemize}
This document will assist in the creation of the Module Interface Specification (MIS) which is a detailed outline for all of the modules the are a part of CryptoMetrics. This includes all their state/environment variables, exported access programs, and their access program semantics.
\subsection{Design Principles}
The design principles that are used by the system includes:
\begin{itemize}
\item \textbf{Separation of Concerns:} Involves separating an application into distinct sections, so each section addresses a separate concern. Each module has its own assigned role that is distinct from every other module which is why it follows this design principle.
\item \textbf{Low Coupling:} Coupling determines how closely related modules are to one another. Low Coupling is ideal since it allows for more modular code design. The implementation of modules follows low coupling since each of the modules are independent of one another by performing functionality required for a specific task only within a module assigned to that task and no other modules.
\item \textbf{High Cohesion:} Cohesion determines how closely related elements inside a module are with one another. High cohesion is desirable since it allows the modules to be more easily understandable to anyone unfamiliar with the implementation. The implementation of modules follows this design principle of high cohesion since each component module contains methods and data closely related to one another.
\item \textbf{Encapsulation:} Is a principle in object-oriented programming which refers to the packaging of closely related data and functions into classes or objects. It is followed since each component module can be viewed as an object of closely related data that can be reused as many times as needed.
\end{itemize}
\subsection{Document Structure}
The rest of the document is organized as follows. Section The rest of the document is organized as follows. Section
\ref{SecChange} lists the anticipated and unlikely changes of the software \ref{SecChange} lists the anticipated and unlikely changes of the software
requirements. Section \ref{SecMH} summarizes the module decomposition that requirements. Section \ref{SecMH} summarizes the module decomposition that
...@@ -116,44 +116,23 @@ the completeness of the design against the requirements provided in the SRS. The ...@@ -116,44 +116,23 @@ the completeness of the design against the requirements provided in the SRS. The
other shows the relation between anticipated changes and the modules. Section other shows the relation between anticipated changes and the modules. Section
\ref{SecUse} describes the use relation between modules. \ref{SecUse} describes the use relation between modules.
\section{Anticipated and Unlikely Changes} \label{SecChange}
This section lists possible changes to the system. According to the likeliness \section{Anticipated and Unlikely Changes} \label{SecChange}
of the change, the possible changes are classified into two
categories. Anticipated changes are listed in Section \ref{SecAchange}, and
unlikely changes are listed in Section \ref{SecUchange}.
\subsection{Anticipated Changes} \label{SecAchange} \subsection{Anticipated Changes} \label{SecAchange}
Anticipated changes are the source of the information that is to be hidden
inside the modules. Ideally, changing one of the anticipated changes will only
require changing the one module that hides the associated decision. The approach
adapted here is called design for
change.
\begin{description} \begin{description}
\item[\refstepcounter{acnum} \actheacnum \label{acHardware}:] The specific \item[\refstepcounter{acnum} \actheacnum \label{acMulti}:] The user able to compare multiple cryptocurrency's graphs stacked together.
hardware on which the software is running. \item[\refstepcounter{acnum} \actheacnum \label{acCoin}:] Clicking on the cryptocurrency card to get more information about the coin.
\item[\refstepcounter{acnum} \actheacnum \label{acInput}:] The format of the \item[\refstepcounter{acnum} \actheacnum \label{acError}:] Web application giving a pop up to the user when is unable to pull data through the API.
initial input data.
\item ...
\end{description} \end{description}
\subsection{Unlikely Changes} \label{SecUchange} \subsection{Unlikely Changes} \label{SecUchange}
The module design should be as general as possible. However, a general system is
more complex. Sometimes this complexity is not necessary. Fixing some design
decisions at the system architecture stage can simplify the software design. If
these decision should later need to be changed, then many parts of the design
will potentially need to be modified. Hence, it is not intended that these
decisions will be changed.
\begin{description} \begin{description}
\item[\refstepcounter{ucnum} \uctheucnum \label{ucIO}:] Input/Output devices \item[\refstepcounter{ucnum} \uctheucnum :] The web application able to run on different screen sizes with different aspect ratios.
(Input: File and/or Keyboard, Output: File, Memory, and/or Screen). \item[\refstepcounter{ucnum} \uctheucnum :] User able to shift and move cryptocurrency and its associated pricing information around the web application.
\item[\refstepcounter{ucnum} \uctheucnum \label{ucInput}:] There will always be \item[\refstepcounter{ucnum} \uctheucnum :] User able to have their preferences saved and loaded back up upon launching the web application.
a source of input data external to the software.
\item ...
\end{description} \end{description}
\section{Module Hierarchy} \label{SecMH} \section{Module Hierarchy} \label{SecMH}
...@@ -163,12 +142,6 @@ in a hierarchy decomposed by secrets in Table \ref{TblMH}. The modules listed ...@@ -163,12 +142,6 @@ in a hierarchy decomposed by secrets in Table \ref{TblMH}. The modules listed
below, which are leaves in the hierarchy tree, are the modules that will below, which are leaves in the hierarchy tree, are the modules that will
actually be implemented. actually be implemented.
\begin{description}
\item [\refstepcounter{mnum} \mthemnum \label{mHH}:] Hardware-Hiding Module
\item ...
\end{description}
\begin{table}[h!] \begin{table}[h!]
\centering \centering
\begin{tabular}{p{0.3\textwidth} p{0.6\textwidth}} \begin{tabular}{p{0.3\textwidth} p{0.6\textwidth}}
...@@ -176,22 +149,47 @@ actually be implemented. ...@@ -176,22 +149,47 @@ actually be implemented.
\textbf{Level 1} & \textbf{Level 2}\\ \textbf{Level 1} & \textbf{Level 2}\\
\midrule \midrule
{Hardware-Hiding Module} & ~ \\ {Hardware-Hiding Module} & N/A\\
\midrule \midrule
\multirow{7}{0.3\textwidth}{Behaviour-Hiding Module} & ?\\ \multirow{7}{0.3\textwidth}{Behaviour-Hiding Module}
& ?\\ & Button Module (\mref{mButtonModule})\\
& ?\\ & ToggleButton Module (\mref{mToggleButtonModule})\\
& ?\\ & FilterButton Module (\mref{mFilterButtonModule})\\
& ?\\ & CryptoChartCard Module (\mref{mCryptoChartCardModule})\\
& ?\\ & CompareChart Module (\mref{mCompareChartModule})\\
& ?\\ & CryptoRowLineChart Module (\mref{mCryptoRowLineChartModule})\\
& ?\\ & Container Module (\mref{mContainerModule})\\
& Main Module (\mref{mMainModule})\\
& Wrapper Module (\mref{mWrapperModule})\\
& Dropdown Module (\mref{mDropdownModule})\\
& DropdownItem Module (\mref{mDropdownItemModule})\\
& FilterDropdown Module (\mref{mFilterDropdownModule})\\
& SecondaryFilterDropdown Module (\mref{mSecondaryFilterDropdownModule}) \\
& Filter Module (\mref{mFilterModule})\\
& Filters Module (\mref{mFiltersModule})\\
& Input Module (\mref{mInputModule})\\
& SearchInput Module (\mref{mSearchInputModule})\\
& RadioInputForm Module (\mref{mRadioInputFormModule})\\
& Radio Module (\mref{mRadioModule})\\
& PlaceholderSkeleton Module (\mref{mPlaceholderSkeletonModule})\\
& Sidebar Module (\mref{mSidebarModule})\\
& SidebarItem Module (\mref{mSidebarItemModule})\\
& Table Module (\mref{mTableModule})\\
& TableRow Module (\mref{mTableRowModule})\\
& TableHeader Module (\mref{mTableHeaderModule})\\
& TableCell Module (\mref{mTableCellModule})\\
& Tab Module (\mref{mTabModule})\\
& Tabs Module (\mref{mTabsModule})\\
& BoldGradientHeading Module (\mref{mBoldGradientHeadingModule})\\
& Home Module (\mref{mHomeModule})\\
& Compare Module(\mref{mCompareModule})\\
& Hooks Module(\mref{mHooksModule})\\
& Queries Module(\mref{mQueriesModule})\\
\midrule \midrule
\multirow{3}{0.3\textwidth}{Software Decision Module} & {?}\\ \multirow{3}{0.3\textwidth}{Software Decision Module}\\
& ?\\ & N/A\\
& ?\\
\bottomrule \bottomrule
\end{tabular} \end{tabular}
...@@ -199,31 +197,35 @@ actually be implemented. ...@@ -199,31 +197,35 @@ actually be implemented.
\label{TblMH} \label{TblMH}
\end{table} \end{table}
\newpage
\section{Connection Between Requirements and Design} \label{SecConnection} \section{Connection Between Requirements and Design} \label{SecConnection}
The design of the system is intended to satisfy the requirements developed in The design of the system is intended to satisfy the requirements developed in
the SRS. In this stage, the system is decomposed into modules. The connection the SRS. In this stage, the system is decomposed into modules. The connection
between requirements and modules is listed in Table \ref{TblRT}. between requirements and modules is listed in Table \ref{TblRT}.
The system's requirements essentially require that the system allow users to view all cryptocurrency price data within a given time frame in multiple views, and enable the ability to compare them with one another. Each of the modules have met all of the requirements specified. Table Module along with its assistants TableHeader Module, TableRow Module, and TableCell Module all work together to provide a tabular view of all of the cryptocurrencies in the home page of the web application. ToggleButton Module and CompareChart Module are responsible for displaying historical data and allowing users to compare between two different cryptocurrencies price data.
\section{Module Decomposition} \label{SecMD} \section{Module Decomposition} \label{SecMD}
Modules are decomposed according to the principle of ``information hiding'' % Modules are decomposed according to the principle of ``information hiding''
proposed by \citet{ParnasEtAl1984}. The \emph{Secrets} field in a module % proposed by \citet{ParnasEtAl1984}. The \emph{Secrets} field in a module
decomposition is a brief statement of the design decision hidden by the % decomposition is a brief statement of the design decision hidden by the
module. The \emph{Services} field specifies \emph{what} the module will do % module. The \emph{Services} field specifies \emph{what} the module will do
without documenting \emph{how} to do it. For each module, a suggestion for the % without documenting \emph{how} to do it. For each module, a suggestion for the
implementing software is given under the \emph{Implemented By} title. If the % implementing software is given under the \emph{Implemented By} title. If the
entry is \emph{OS}, this means that the module is provided by the operating % entry is \emph{OS}, this means that the module is provided by the operating
system or by standard programming language libraries. Also indicate if the % system or by standard programming language libraries. Also indicate if the
module will be implemented specifically for the software. % module will be implemented specifically for the software.
Only the leaf modules in the % Only the leaf modules in the
hierarchy have to be implemented. If a dash (\emph{--}) is shown, this means % hierarchy have to be implemented. If a dash (\emph{--}) is shown, this means
that the module is not a leaf and will not have to be implemented. Whether or % that the module is not a leaf and will not have to be implemented. Whether or
not this module is implemented depends on the programming language % not this module is implemented depends on the programming language
selected. % selected.
\subsection{Hardware Hiding Modules (\mref{mHH})} \subsection{Hardware Hiding Module}
\begin{description} \begin{description}
\item[Secrets:]The data structure and algorithm used to implement the virtual \item[Secrets:]The data structure and algorithm used to implement the virtual
...@@ -243,35 +245,253 @@ selected. ...@@ -243,35 +245,253 @@ selected.
documents. This module serves as a communication layer between the documents. This module serves as a communication layer between the
hardware-hiding module and the software decision module. The programs in this hardware-hiding module and the software decision module. The programs in this
module will need to change if there are changes in the SRS. module will need to change if there are changes in the SRS.
\item[Implemented By:] -- \item[Implemented By:] ReactJS
\end{description} \end{description}
\subsubsection{Input Format Module (\mref{mInput})}
% \begin{description}
% \item[Secrets:]The format and structure of the input data.
% \item[Services:]Converts the input data into the data structure used by the
% input parameters module.
% \item[Implemented By:] ReactJS
% \end{description}
\subsubsection{Button Module \label{mButtonModule}}
\begin{description} \begin{description}
\item[Secrets:]The format and structure of the input data. \item[Secrets:]Button styles and features.
\item[Services:]Converts the input data into the data structure used by the \item[Services:]Adds a styled HTML button to the page with \texttt{onClick} events.
input parameters module. \item[Implemented By:] ReactJS
\item[Implemented By:] [Your Program Name Here]
\end{description} \end{description}
\subsubsection{Etc.} \subsubsection{ToggleButton Module \label{mToggleButtonModule}}
\begin{description}
\item[Secrets:]Toggle Button styles and features.
\item[Services:]Wraps the Button component such that it can be toggled on/off by clicking on it.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{FilterButton Module \label{mFilterButtonModule}}
\begin{description}
\item[Secrets:]Filter Button styles.
\item[Services:]Wraps the Button component such that it can be used to open the FiltersDropdown component.
\item[Implemented By:] ReactJS
\end{description}
\subsection{Software Decision Module} \subsubsection{CryptoChartCard Module \label{mCryptoChartCardModule}}
\begin{description}
\item[Secrets:]The format and styling of crypto charts.
\item[Services:]Renders card with cryptocurrency information and an embedded chart.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{CompareChart Module \label{mCompareChartModule}}
\begin{description}
\item[Secrets:]Data and logic for displaying multiple charts.
\item[Services:]Renders multiple charts for comparison and displays options to configure specific settings for the charts.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{CryptoRowLineChart Module \label{mCryptoRowLineChartModule}}
\begin{description}
\item[Secrets:]The format and styling of crypto charts.
\item[Services:]Renders a chart inline with the other components
\item[Implemented By:] ReactJS.
\end{description}
\subsubsection{Container Module \label{mContainerModule}}
\begin{description}
\item[Secrets:]Properties for enclosing other components.
\item[Services:]Wraps a set of components with certain properties.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Main Module \label{mMainModule}}
\begin{description}
\item[Secrets:]Properties for main portion of the page.
\item[Services:]Wraps the main portion of the page with certain properties (this portion excludes the sidebar)
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Wrapper Module \label{mWrapperModule}}
\begin{description}
\item[Secrets:]Properties for wrapping components.
\item[Services:]Wraps the entire page and provides them with certain properties.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Dropdown Module \label{mDropdownModule}}
\begin{description} \begin{description}
\item[Secrets:] The design decision based on mathematical theorems, physical \item[Secrets:]Properties for displaying a list of options.
facts, or programming considerations. The secrets of this module are \item[Services:]Renders a dropdown with a list of options.
\emph{not} described in the SRS. \item[Implemented By:] ReactJS
\item[Services:] Includes data structure and algorithms used in the system that
do not provide direct interaction with the user.
% Changes in these modules are more likely to be motivated by a desire to
% improve performance than by externally imposed changes.
\item[Implemented By:] --
\end{description} \end{description}
\subsubsection{Etc.} \subsubsection{DropdownItem Module \label{mDropdownItemModule}}
\begin{description}
\item[Secrets:]Styles for displaying a dropdown item.
\item[Services:]Renders an item inside a dropdown.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{FilterDropdown Module \label{mFilterDropdownModule}}
\begin{description}
\item[Secrets:]Properties for displaying a set of filters.
\item[Services:]Renders a multi-level dropdown with a list of filters.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{SecondaryFilterDropdown Module \label{mSecondaryFilterDropdownModule}}
\begin{description}
\item[Secrets:]Advanced properties for selecting a set of filters.
\item[Services:]Renders a secondary-level dropdown view with advanced options for a filter.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Filter Module \label{mFilterModule}}
\begin{description}
\item[Secrets:]Filter data and properties.
\item[Services:]Renders a tag with filter data and a button to remove the filter.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Filters Module \label{mFiltersModule}}
\begin{description}
\item[Secrets:]Properties for encapsulating multiple Filter Modules.
\item[Services:]Takes as input several Filter components and renders them in a horizontal fashion.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Input Module \label{mInputModule}}
\begin{description}
\item[Secrets:]Styles and properties for input fields.
\item[Services:]Renders an HTML input field and provides advanced customization.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{SearchInput Module \label{mSearchInputModule}}
\begin{description}
\item[Secrets:]Styles and properties for search input field.
\item[Services:]Wraps the Input component to add a search icon.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{RadioInputForm Module \label{mRadioInputFormModule}}
\begin{description}
\item[Secrets:]Form properties.
\item[Services:]Renders a form with radio elements, each with an input field.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Radio Module \label{mRadioModule}}
\begin{description}
\item[Secrets:]Properties and styles for radio.
\item[Services:]Renders radio elements.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{PlaceholderSkeleton Module \label{mPlaceholderSkeletonModule}}
\begin{description}
\item[Secrets:]Styles for skeleton.
\item[Services:]Renders a skeleton component when data is loading.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Sidebar Module \label{mSidebarModule}}
\begin{description}
\item[Secrets:]Sidebar options and properties.
\item[Services:]Renders a sidebar to the page with navigation links to other pages.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{SidebarItem Module \label{mSidebarItemModule}}
\begin{description}
\item[Secrets:]Styles for the sidebar item.
\item[Services:]Renders a sidebar item with an icon.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Table Module \label{mTableModule}}
\begin{description}
\item[Secrets:]Properties for enclosing multiple table rows.
\item[Services:]Wraps a set of table rows together with specific properties.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{TableRow Module \label{mTableRowModule}}
\begin{description}
\item[Secrets:]Properties for enclosing multiple table cells.
\item[Services:]Wraps a set of table cells together with specific properties.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{TableHeader Module \label{mTableHeaderModule}}
\begin{description}
\item[Secrets:]Properties for enclosing multiple table cells for the header.
\item[Services:]Wraps a set of table cells together with specific properties for the header.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{TableCell Module \label{mTableCellModule}}
\begin{description}
\item[Secrets:]Styles and properties of a table cell.
\item[Services:]Renders a table cell with specific properties.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Tab Module \label{mTabModule}}
\begin{description}
\item[Secrets:]Styles and properties.
\item[Services:]Acts as a button to trigger switching components.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Tabs Module \label{mTabsModule}}
\begin{description}
\item[Secrets:]Data and logic for switching components.
\item[Services:]Wraps multiple Tab components and conditionally renders different components.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{BoldGradientHeading Module \label{mBoldGradientHeadingModule}}
\begin{description}
\item[Secrets:]Styles for the heading.
\item[Services:]Renders a gradient header.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Home Module \label{mHomeModule}}
\begin{description}
\item[Secrets:]Data and logic to control flow between different components.
\item[Services:]Renders the home page with all components.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Compare Module \label{mCompareModule}}
\begin{description}
\item[Secrets:]Properties for handling different components.
\item[Services:]Renders the compare page with the required components.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Hooks Module \label{mHooksModule}}
\begin{description}
\item[Secrets:]Logic and data.
\item[Services:]Help to hook-into state and lifecycle methods of different components.
\item[Implemented By:] ReactJS
\end{description}
\subsubsection{Queries Module \label{mQueriesModule}}
\begin{description}
\item[Secrets:]APIs and their properties.
\item[Services:]Provides Hooks to fetch data from APIs.
\item[Implemented By:] ReactJS
\end{description}
\subsection{Software Decision Module}
N/A
\section{Traceability Matrix} \label{SecTM} \section{Traceability Matrix} \label{SecTM}
...@@ -286,17 +506,24 @@ requirements and between the modules and the anticipated changes. ...@@ -286,17 +506,24 @@ requirements and between the modules and the anticipated changes.
\toprule \toprule
\textbf{Req.} & \textbf{Modules}\\ \textbf{Req.} & \textbf{Modules}\\
\midrule \midrule
R1 & \mref{mHH}, \mref{mInput}, \mref{mParams}, \mref{mControl}\\ FR-1 & \mref{mTableModule}, \mref{mTableHeaderModule}, \mref{mTableRowModule}, \mref{mTableCellModule}\\
R2 & \mref{mInput}, \mref{mParams}\\ FR-2 & \mref{mSearchInputModule}, \mref{mInputModule}\\
R3 & \mref{mVerify}\\ FR-3 & \mref{mCompareChartModule}, \mref{mToggleButtonModule}\\
R4 & \mref{mOutput}, \mref{mControl}\\ FR-4 & \mref{mCompareChartModule}, \mref{mDropdownModule}, \mref{mDropdownItemModule}\\
R5 & \mref{mOutput}, \mref{mODEs}, \mref{mControl}, \mref{mSeqDS}, \mref{mSolver}, \mref{mPlot}\\ FR-5 & \mref{mFilterButtonModule}, \mref{mFilterDropdownModule}, \mref{mSecondaryFilterDropdownModule} \mref{mFilterModule}, \mref{mFiltersModule}, \mref{mRadioInputFormModule}, \mref{mRadioModule}, \mref{mButtonModule}\\
R6 & \mref{mOutput}, \mref{mODEs}, \mref{mControl}, \mref{mSeqDS}, \mref{mSolver}, \mref{mPlot}\\ FR-6 & Pending\\
R7 & \mref{mOutput}, \mref{mEnergy}, \mref{mControl}, \mref{mSeqDS}, \mref{mPlot}\\ FR-7 & \mref{mQueriesModule}\\
R8 & \mref{mOutput}, \mref{mEnergy}, \mref{mControl}, \mref{mSeqDS}, \mref{mPlot}\\ FR-8 & \mref{mQueriesModule}\\
R9 & \mref{mVerifyOut}\\ FR-9 & \mref{mQueriesModule}\\
R10 & \mref{mOutput}, \mref{mODEs}, \mref{mControl}\\ FR-10 & \mref{mPlaceholderSkeletonModule}\\
R11 & \mref{mOutput}, \mref{mODEs}, \mref{mEnergy}, \mref{mControl}\\ FR-11 & \mref{mQueriesModule}\\
FR-12 & \mref{mSidebarModule}, \mref{mSidebarItemModule}\\
FR-13 & Pending\\
NFR-1 & \mref{mWrapperModule}, \mref{mContainerModule}, \mref{mMainModule}, \mref{mSidebarModule}, \mref{mSidebarItemModule}\\
NFR-2 & \mref{mHomeModule}, \mref{mCompareModule}\\
NFR-3 & \mref{mTabModule}, \mref{mTabsModule}\\
NFR-4 & \mref{mBoldGradientHeadingModule}\\
\bottomrule \bottomrule
\end{tabular} \end{tabular}
\caption{Trace Between Requirements and Modules} \caption{Trace Between Requirements and Modules}
...@@ -309,18 +536,9 @@ R11 & \mref{mOutput}, \mref{mODEs}, \mref{mEnergy}, \mref{mControl}\\ ...@@ -309,18 +536,9 @@ R11 & \mref{mOutput}, \mref{mODEs}, \mref{mEnergy}, \mref{mControl}\\
\toprule \toprule
\textbf{AC} & \textbf{Modules}\\ \textbf{AC} & \textbf{Modules}\\
\midrule \midrule
\acref{acHardware} & \mref{mHH}\\ \acref{acMulti} & \mref{mCompareModule}, \mref{mCompareChartModule}\\
\acref{acInput} & \mref{mInput}\\ \acref{acCoin} & \mref{mHomeModule}\\
\acref{acParams} & \mref{mParams}\\ \acref{acError} & \mref{mHomeModule}, \mref{mCompareModule}, \mref{mQueriesModule} \\
\acref{acVerify} & \mref{mVerify}\\
\acref{acOutput} & \mref{mOutput}\\
\acref{acVerifyOut} & \mref{mVerifyOut}\\
\acref{acODEs} & \mref{mODEs}\\
\acref{acEnergy} & \mref{mEnergy}\\
\acref{acControl} & \mref{mControl}\\
\acref{acSeqDS} & \mref{mSeqDS}\\
\acref{acSolver} & \mref{mSolver}\\
\acref{acPlot} & \mref{mPlot}\\
\bottomrule \bottomrule
\end{tabular} \end{tabular}
\caption{Trace Between Anticipated Changes and Modules} \caption{Trace Between Anticipated Changes and Modules}
...@@ -342,7 +560,7 @@ because they use modules from the lower levels. ...@@ -342,7 +560,7 @@ because they use modules from the lower levels.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
%\includegraphics[width=0.7\textwidth]{UsesHierarchy.png} \includegraphics[width=0.9\textwidth]{./images/usehier.png}
\caption{Use hierarchy among modules} \caption{Use hierarchy among modules}
\label{FigUH} \label{FigUH}
\end{figure} \end{figure}
...@@ -352,4 +570,4 @@ because they use modules from the lower levels. ...@@ -352,4 +570,4 @@ because they use modules from the lower levels.
\bibliographystyle {plainnat} \bibliographystyle {plainnat}
\bibliography {MG} \bibliography {MG}
\end{document} \end{document}
\ No newline at end of file
Doc/Design/MG/images/usehier.png 0 → 100644
+ 0
− 0
View file @ c10a8194
Doc/Design/MG/images/usehier.png

72 KiB

Doc/Design/MIS/MIS.pdf 0 → 100644
+ 0
− 0
View file @ c10a8194
File added
Doc/Design/MIS/MIS.tex 0 → 100644
+ 1164
− 0
View file @ c10a8194
\documentclass[12pt]{article}
\usepackage{graphicx}
\usepackage{paralist}
\usepackage{hyperref}
\usepackage{xspace}
\usepackage{amsfonts}
\usepackage{amsmath}
\hypersetup{
colorlinks,
citecolor=black,
filecolor=black,
linkcolor=blue,
urlcolor=blue
}
\newcommand{\latex}{\LaTeX\xspace}
\oddsidemargin 0mm
\evensidemargin 0mm
\textwidth 160mm
\textheight 200mm
\renewcommand\baselinestretch{1.0}
\pagestyle {plain}
\pagenumbering{arabic}
\newcounter{stepnum}
\title{SE 3XA3: Module Interface Specification\\CryptoMetrics}
\author{Team 15
\\ Saif Fadhel, fadhels
\\ Vanshaj Verma, vermav2
\\ Himanshu Aggarwal, aggarwah
}
\date{March 18, 2022}
\begin {document}
\maketitle
\newpage
\tableofcontents
\newpage
\section{Button Module}
\subsection{Module}
Button
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{8cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the button\\ \hline
className & string & Additional CSS classes for the button\\ \hline
onClick & function & The function to run when button is pressed\\ \hline
type & string & The type of the button\\ \hline
disabled & boolean & Whether the button is disabled\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{ToggleButton Module}
\subsection{Module}
ToggleButton
\subsection{Uses}
Button
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{8cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the button\\ \hline
setActive & function & The function to set the button active\\ \hline
active & string & The id of the function that is currently active\\ \hline
id & string & Unique identifier for the button\\ \hline
className & string & Additional CSS classes for the button\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{FilterButton Module}
\subsection{Module}
FilterButton
\subsection{Uses}
Button
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
icon & node & The icon to be displayed\\ \hline
onClick & function & The function to run when this button is pressed\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{CryptoChartCard Module}
\subsection{Module}
CryptoChartCard
\subsection{Uses}
PlaceholderSkeleton \\
Queries
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
currencyName & string & The name of the cryptocurrency\\ \hline
currencyId & string & The id of the cryptocurrency\\ \hline
symbol & string & The symbol of the cryptocurrency\\ \hline
icon & string & The icon of the cryptocurrency\\ \hline
info & string & Any specific info for the cryptocurrency\\ \hline
detail & string & Any specific detail for the cryptocurrency\\ \hline
detailColor & string & A color for the detail text\\ \hline
options & object & The options for the embedded chart\\ \hline
type & string & The type of the chart\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{CompareChart Module}
\subsection{Module}
CompareChart
\subsection{Uses}
ToggleButton\\
Dropdown \\
Queries
\subsection{Semantics}
\subsubsection{Environment Variables}
None
\subsubsection{State Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
timerange & string & The current timerange for the chart\\ \hline
firstCrypto & string & The id of the first cryptocurrency to compare\\ \hline
secondCrypto & string & The id of the second cryptocurrency to compare\\ \hline
\end{tabular}
\subsubsection{State Invariant}
$firstCrypto \neq null \land
secondCrypto \neq null \land
timerange \neq null$
\subsubsection{Assumptions}
None
\newpage
\section{CryptoRowLineChart Module}
\subsection{Module}
CryptoRowLineChart
\subsection{Uses}
Queries
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
currencyId & string & The id of the cryptocurrency\\ \hline
color & string & The color of the chart\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Container Module}
\subsection{Module}
Container
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the container\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Main Module}
\subsection{Module}
Main
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the container\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Wrapper Module}
\subsection{Module}
Wrapper
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the container\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Dropdown Module}
\subsection{Module}
Dropdown
\subsection{Uses}
DropdownItem \\
Hooks
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
list & array of objects & The list of options in the dropdown\\ \hline
value & string & The current selected option in the dropdown\\ \hline
setValue & function & The function to call when an option is selected\\ \hline
disabled & array of strings & The id(s) of objects to disable in the dropdown\\ \hline
className & string & Additional CSS classes for the button\\ \hline
\end{tabular}
\subsubsection{State Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
open & boolean & Whether the dropdown component is open or closed\\ \hline
\end{tabular}
\subsubsection{State Invariant}
$open = true \lor open = false$
\subsubsection{Assumptions}
None
\newpage
\section{DropdownItem Module}
\subsection{Module}
DropdownItem
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the DropdownItem\\ \hline
onClick & function & The function that is called when clicked on DropdownItem\\ \hline
selected & boolean & A boolean that represents if the DropdownItem is selected\\ \hline
disabled & boolean & A boolean that represents if the DropdownItem is disabled\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{FilterDropdown Module}
\subsection{Module}
FilterDropdown
\subsection{Uses}
SecondaryFilterDropdown
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
filterOptions & object & The options to display in the dropdown\\ \hline
setOpen & function & The function to open/close the dropdown\\ \hline
addFilter & function & The function to add the filter\\ \hline
dropdownRef & node & Reference to the dropdown\\ \hline
\end{tabular}
\subsubsection{State Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
selectedFilter & string & The id of the selected filter\\ \hline
radioValue & string & The value of the selected radio field\\ \hline
inputValue & string & The value of the input field\\ \hline
\end{tabular}
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{SecondaryFilterDropdown Module}
\subsection{Module}
SecondaryFilterDropdown
\subsection{Uses}
Button Module\\
RadioInputForm Module
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
open & boolean & Whether the dropdown is open or closed\\ \hline
onSelectedFilterChange & function & The function to call when a filter is modified\\ \hline
radioOptions & object & The options for the radio fields\\ \hline
radioValue & string & The value of the radio field\\ \hline
onRadioChange & function & The function to call when radio value changes\\ \hline
inputValue & string & The value of the input field\\ \hline
onInputChange & function & The function to call when input value changes\\ \hline
onFilterAdd & function & The function to call when a filter is added\\ \hline
inputLeftSymbol & string & The symbol to display on the left side of the input field\\ \hline
inputRightSymbol & string & The symbol to display on the right side of the input field\\ \hline
inputType & string & The type of the input field\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Filter Module}
\subsection{Module}
Filter
\subsection{Uses}
Button
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
subject & string & The subject of the filter\\ \hline
condition & string & The condition of the filter\\ \hline
value & string & The value of the filter\\ \hline
symbolLeft & string & Any symbol on the left of the value\\ \hline
symbolRight & string & Any symbol on the right of the value\\ \hline
buttonIcon & node & The icon for the button\\ \hline
onButtonClick & string & The function to call when button is clicked\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Filters Module}
\subsection{Module}
Filters
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the component\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Input Module}
\subsection{Module}
Input
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
className & string & Additional CSS classes for the input\\ \hline
placeholder & string & The placeholder for the input field\\ \hline
type & string & The type of the input field\\ \hline
onChange & function & The function to call when input value changes\\ \hline
initialValue & string & The initialValue of the input field\\ \hline
symbolLeft & node & The icon to display on the left side of the input field\\ \hline
symbolRight & node & The icon to display on the right side of the input field\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{SearchInput Module}
\subsection{Module}
SearchInput
\subsection{Uses}
Input
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
onChange & function & The function to call when input value changes\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{RadioInputForm Module}
\subsection{Module}
RadioInputForm
\subsection{Uses}
Radio \\
Input \\
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
inputLeftSymbol & string & The symbol to display on the left side of the input field\\ \hline
inputRightSymbol & string & The symbol to display on the right side of the input field\\ \hline
inputType & string & The type of the input field\\ \hline
options & object & The options for the radio fields\\ \hline
radioValue & string & The value of the radio field\\ \hline
onRadioChange & function & The function to call when radio value changes\\ \hline
inputValue & string & The value of the input field\\ \hline
onInputChange & function & The function to call when input value changes\\ \hline
onSubmit & function & The function to call when the form is submitted\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Radio Module}
\subsection{Module}
Radio
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
selected & string & It represents the value of the selected radio\\ \hline
radioValue & string & It represents the value of the radio\\ \hline
radioLabel & string & It represents the label of the radio\\ \hline
onChange & function & It is run everytime the radio value changes\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{PlaceholderSkeleton Module}
\subsection{Module}
PlaceholderSkeleton
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
className & string & Additional CSS classes for the skeleton\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Sidebar Module}
\subsection{Module}
Sidebar
\subsection{Uses}
SidebarItem
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
active & string & The id of the SidebarItem that is currently active\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{SidebarItem Module}
\subsection{Module}
SidebarItem
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
title & string & The title of the SidebarItem\\ \hline
icon & node & The icon of the SidebarItem\\ \hline
active & boolean & It represents if the SidebarItem is active\\ \hline
to & string & It represents the link to the respective SidebarItem page\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Table Module}
\subsection{Module}
Table
\subsection{Uses}
Button
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the table\\ \hline
className & string & Additional CSS classes for the table\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{TableHeader Module}
\subsection{Module}
TableHeader
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the table header\\ \hline
className & string & Additional CSS classes for the table header\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{TableRow Module}
\subsection{Module}
TableRow
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the table row\\ \hline
className & string & Additional CSS classes for the table row\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{TableCell Module}
\subsection{Module}
TableCell
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & node & The content inside the table cell\\ \hline
className & string & Additional CSS classes for the table cell\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Tab Module}
\subsection{Module}
Tab
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
content & node & The content to display\\ \hline
onClick & function & The function to run when tab is clicked\\ \hline
activeTab & string & The id of the currently active tab\\ \hline
id & string & Unique identifier for the tab\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Tabs Module}
\subsection{Module}
Tabs
\subsection{Uses}
Tab
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & array of nodes & The Tab elements to group together\\ \hline
\end{tabular}
\subsubsection{State Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
tab & string & The id of the currently active tab\\ \hline
\end{tabular}
\subsubsection{State Invariant}
$tab \neq null$
\subsubsection{Assumptions}
None
\newpage
\section{BoldGradientHeading Module}
\subsection{Module}
BoldGradientHeading
\subsection{Uses}
None
\subsection{Semantics}
\subsubsection{Environment Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
children & string & The text displayed inside the header\\ \hline
\end{tabular}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Home Module}
\subsection{Module}
Home
\subsection{Uses}
Container\\
Main\\
SearchInput\\
BoldGradientHeading\\
Queries\\
CryptoChartCard\\
Wrapper\\
Sidebar\\
Tabs\\
Tab\\
Hooks\\
FilterDropdown\\
Filter\\
Filters\\
FilterButton\\
CryptoRowLineChart\\
Table\\
TableCell\\
TableHeader\\
TableRow
\subsection{Semantics}
\subsubsection{Environment Variables}
\subsubsection{State Variables}
\begin{tabular}{| l | l | p{10cm} |}
\hline
\textbf{Name} & \textbf{Type} & \textbf{Description}\\ \hline
dropdownOpen & boolean & Whether the dropdown is open\\ \hline
searchText & string & The string to store the text being searched\\ \hline
filters & object & The object for storing the applied filters \\ \hline
\end{tabular}
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\newpage
\section{Hooks Module}
\subsection{Module}
Hooks
\subsection{Uses}
None
\subsection{Syntax}
\subsubsection{Exported Constants}
None
\subsubsection{Exported Types}
None
\subsubsection{Exported Access Programs}
\begin{tabular}{| l | l | l | p{5cm} |}
\hline
\textbf{Routine name} & \textbf{In} & \textbf{Out} & \textbf{Exceptions}\\
\hline
useFilters & Seq of objects & & \\
\hline
useOnClickOutside & node, function & object, function, function & \\
\hline
\end{tabular}
\subsection{Semantics}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\subsubsection{Access Routine Semantics}
\noindent useFilters(Seq of objects):
\begin{itemize}
\item output: An object representing the applied filters, and two methods to add and remove a filter
\item exception: none
\end{itemize}
\noindent useOnClickOutside(node ref, function handler):
\begin{itemize}
\item output: none
\item exception: none
\end{itemize}
\newpage
\section{Queries Module}
\subsection{Module}
Queries
\subsection{Uses}
None
\subsection{Syntax}
\subsubsection{Exported Constants}
None
\subsubsection{Exported Types}
None
\subsubsection{Exported Access Programs}
\begin{tabular}{| l | l | l | p{5cm} |}
\hline
\textbf{Routine name} & \textbf{In} & \textbf{Out} & \textbf{Exceptions}\\
\hline
useCryptoTimeSeriesData & String, integer, String & Object & \\
\hline
useCryptoTimeSeriesRangeData & String, String, String & Object & \\
\hline
useCryptoList & String, integer, boolean & Object & \\
\hline
\end{tabular}
\subsection{Semantics}
\subsubsection{State Variables}
None
\subsubsection{State Invariant}
None
\subsubsection{Assumptions}
None
\subsubsection{Access Routine Semantics}
\noindent useCryptoTimeSeriesData(String name, integer days, String interval):
\begin{itemize}
\item output: An object consisting of the fetched API data
\item exception: none
\end{itemize}
\noindent useCryptoTimeSeriesRangeData(String name, String from, String to):
\begin{itemize}
\item output: An object consisting of the fetched API data
\item exception: none
\end{itemize}
\noindent useCryptoList(String currency, integer numberOfCurrencies, boolean sparkline):
\begin{itemize}
\item output: An object consisting of the fetched API data
\item exception: none
\end{itemize}
\newpage
\section{Major Revision History}
March 14, 2022 - Rough draft created of the sections \\
March 18, 2022 - Final draft of all of the sections complete \\
\end {document}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment