Skip to content

Commit

Permalink
fix(tabengine-link): update to better tabulation (#7)
Browse files Browse the repository at this point in the history 
RJE-1
  • Loading branch information
@wallace41290
wallace41290 authored May 22, 2020
1 parent 6584d84 commit 840e777
Showing 1 changed file with 38 additions and 77 deletions.
115 changes: 38 additions & 77 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,9 @@
<meta charset="utf-8">
<title>COVID-19 RDS</title>

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
href="./styles.scss">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./styles.scss">
</head>

<body class="mdc-typography">
Expand All @@ -25,9 +22,8 @@ <h2 class="mdc-typography--headline4">
<h1 class="txt-green mdc-typography--headline2">Overwhelmed by the data?</h1>
<h4 class="mdc-typography--headline5">We make data easy to work with so you can focus on what you do best.
</h4>
<a class="mdc-button mdc-button--outlined white-outlined-button"
href="https://www.richdataservices.com"
target="_blank">
<a class="mdc-button mdc-button--outlined white-outlined-button" href="https://www.richdataservices.com"
target="_blank">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Learn More about RDS</span>
<i class="material-icons mdc-button__icon" aria-hidden="true">open_in_new</i>
Expand All @@ -39,14 +35,12 @@ <h4 class="mdc-typography--headline5">We make data easy to work with so you can
</div>
</div>
<include src="src/containers/rds-story.html"></include>
<hr id="select-query"
class="section-divider"
style="margin-top:64px">
<hr id="select-query" class="section-divider" style="margin-top:64px">
<div class="white-section-container">
<section class="mdc-layout-grid container">
<div class="mdc-layout-grid__inner line-chart chart-section">
<div
class="text-section mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-12-tablet">
class="text-section mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-12-tablet">
<h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered, and deaths</h4>
<p class="mat-typography--body1">
The data we are using for this visualization has already been aggregated to indicate the total counts per
Expand All @@ -73,41 +67,33 @@ <h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
<ul class="mdc-list">
<li aria-selected="true"
class="mdc-list-item mdc-list-item--selected"
data-value="AMCHARTS">
<li aria-selected="true" class="mdc-list-item mdc-list-item--selected" data-value="AMCHARTS">
<span class="mdc-list-item__text">
AM Charts
</span>
AM Charts
</span>
</li>
<li class="mdc-list-item"
data-value="GCHARTS">
<li class="mdc-list-item" data-value="GCHARTS">
<span class="mdc-list-item__text">
Google Charts
</span>
Google Charts
</span>
</li>
<li class="mdc-list-item"
data-value="PLOTLY">
<li class="mdc-list-item" data-value="PLOTLY">
<span class="mdc-list-item__text">
Plotly
</span>
Plotly
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1 mdc-layout-grid__cell--span-0-tablet"></div>
<div
class="tab-section mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--span-12-tablet">
<div class="mdc-tab-bar"
role="tablist">
class="tab-section mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--span-12-tablet">
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active"
role="tab"
aria-selected="true"
tabindex="0">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Chart</span>
</span>
Expand All @@ -116,10 +102,7 @@ <h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab"
role="tab"
aria-selected="false"
tabindex="1">
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="1">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Code with RDS</span>
</span>
Expand All @@ -128,10 +111,7 @@ <h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab"
role="tab"
aria-selected="false"
tabindex="2">
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="2">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Code without RDS</span>
</span>
Expand All @@ -144,8 +124,7 @@ <h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered
</div>
</div>
</div>
<div id="line-chart-div"
class="tab-contents active"></div>
<div id="line-chart-div" class="tab-contents active"></div>
<div class="tab-contents">
<div id="line-stackblitz"></div>
</div>
Expand All @@ -156,22 +135,17 @@ <h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered
</div>
</section>
</div>
<hr id="tabulate-query"
class="section-divider">
<hr id="tabulate-query" class="section-divider">
<div class="white-section-container">
<section class="mdc-layout-grid container">
<div class="mdc-layout-grid__inner line-chart bar-chart chart-section">
<div
class="tab-section mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--span-12-tablet">
<div class="mdc-tab-bar mdc-bar-tab-bar"
role="tablist">
class="tab-section mdc-layout-grid__cell mdc-layout-grid__cell--span-7 mdc-layout-grid__cell--span-12-tablet">
<div class="mdc-tab-bar mdc-bar-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active"
role="tab"
aria-selected="true"
tabindex="0">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Chart</span>
</span>
Expand All @@ -180,10 +154,7 @@ <h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab"
role="tab"
aria-selected="false"
tabindex="1">
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="1">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Code with RDS</span>
</span>
Expand All @@ -192,10 +163,7 @@ <h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab"
role="tab"
aria-selected="false"
tabindex="2">
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="2">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Code without RDS</span>
</span>
Expand All @@ -208,8 +176,7 @@ <h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered
</div>
</div>
</div>
<div id="bar-chart-div"
class="tab-contents active"></div>
<div id="bar-chart-div" class="tab-contents active"></div>
<div class="tab-contents">
<div id="bar-stackblitz"></div>
</div>
Expand All @@ -219,7 +186,7 @@ <h4 class="mdc-typography--headline4 text-blue">Total cases confirmed, recovered
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1 mdc-layout-grid__cell--span-0-tablet"></div>
<div
class="text-section mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-12-tablet">
class="text-section mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-12-tablet">
<h4 class="mdc-typography--headline4 text-blue">Visualize confirmed cases across gender and age</h4>
<p class="mat-typography--body1">The Canadian dataset we are using for this visualization is record level
data. So each row(record) in the data file represents a single reported confirmed case. Data like this can
Expand Down Expand Up @@ -249,15 +216,12 @@ <h4 class="mdc-typography--headline4 text-blue">Visualize confirmed cases across
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
<ul class="mdc-list">
<li aria-selected="true"
class="mdc-list-item mdc-list-item--selected"
data-value="AMCHARTS">
<li aria-selected="true" class="mdc-list-item mdc-list-item--selected" data-value="AMCHARTS">
<span class="mdc-list-item__text">
AM Charts
</span>
</li>
<li class="mdc-list-item"
data-value="PLOTLY">
<li class="mdc-list-item" data-value="PLOTLY">
<span class="mdc-list-item__text">
Plotly
</span>
Expand All @@ -269,33 +233,30 @@ <h4 class="mdc-typography--headline4 text-blue">Visualize confirmed cases across
</div>
</section>
</div>
<div id="rds-products"
class="explorer-tabengine">
<div id="rds-products" class="explorer-tabengine">
<section class="mdc-layout-grid container">
<div class="mdc-layout-grid__inner">
<div
class="rds-text mdc-layout-grid__cell mdc-layout-grid__cell--span-5 mdc-layout-grid__cell--span-12-tablet">
class="rds-text mdc-layout-grid__cell mdc-layout-grid__cell--span-5 mdc-layout-grid__cell--span-12-tablet">
<h4 class="mdc-typography--headline4">RDS Explorer</h4>
<p class="mat-typography--body1">
View, filter and understand the data before using it.
</p>
<a href="https://covid19.richdataservices.com/rds-explorer/explore/int/jhu_country/data?collimit=25&coloffset=0&count=true&offset=0&limit=25&where=(iso3166_1%3DUS)"
target="_blank"
class="mdc-button mdc-button--outlined white-outlined-button">
target="_blank" class="mdc-button mdc-button--outlined white-outlined-button">
Go To RDS Explorer
</a>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2 mdc-layout-grid__cell--span-0-tablet">
</div>
<div
class="rds-text mdc-layout-grid__cell mdc-layout-grid__cell--span-5 mdc-layout-grid__cell--span-12-tablet">
class="rds-text mdc-layout-grid__cell mdc-layout-grid__cell--span-5 mdc-layout-grid__cell--span-12-tablet">
<h4 class="mdc-typography--headline4">RDS Tab Engine</h4>
<p class="mat-typography--body1">
Let us do the tabulations for you.
</p>
<a href="https://covid19.richdataservices.com/rds-tabengine/analysis/int/jhu_country/custom-tables?rows=iso3166_1&where=(iso3166_1%3DUS%20OR%20iso3166_1%3DCN%20OR%20iso3166_1%3DIT%20OR%20iso3166_1%3DES%20OR%20iso3166_1%3DDE%20OR%20iso3166_1%3DFR%20OR%20iso3166_1%3DIR%20OR%20iso3166_1%3DGB%20OR%20iso3166_1%3DTR%20OR%20iso3166_1%3DCH)&measure=cnt_death:SUM(cnt_death)"
target="_blank"
class="mdc-button mdc-button--outlined white-outlined-button">Go To RDS Tab Engine</a>
<a href="https://covid19.richdataservices.com/rds-tabengine/analysis/int/jhu_country/custom-tables;showTotals=true,true,false,false;sortRows=NAME,ASC;sortCols=NAME,ASC;filterEmpty=true?cols=iso3166_1&rows=date_stamp&where=(year_stamp%3D2020)%20AND%20(iso3166_1%3DUS%20OR%20iso3166_1%3DCA%20OR%20iso3166_1%3DES%20OR%20iso3166_1%3DIT%20OR%20iso3166_1%3DCN)&measure=cnt_confirmed:SUM(cnt_confirmed)"
target="_blank" class="mdc-button mdc-button--outlined white-outlined-button">Go To RDS Tab Engine</a>
</div>
</div>
</section>
Expand Down

0 comments on commit 840e777

Please sign in to comment.