<!doctype html>
<html lang="en"><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Qlik Sense: Mashup</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="cleartype" content="on">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Reenie+Beanie" rel="stylesheet">
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
<script src="../../resources/assets/external/requirejs/require.js"></script>
<script src="accessible-straight-table-mashup.js"></script>
</head>
<body role="application">
<div class="content">
<div class="section info">
<div class="image">
<div class="overlay">
<div class="textWrapper">
<h1 class="header">Accessible Straight Table</h1>
<div class="divider"></div>
<div class="description-text"> Data view lets you toggle any qvisualization into a table to view the data behind the chart. After toggling you can enter the visualization with space/enter and use the navigation keys to navigate the table. While navigating you can select values and sort headers. When you are done, you can toggle back to chart with escape.</div>
<div class="buttons-container">
<button class="rounded-button" id="toggle1">Toggle linechart</button>
<button class="rounded-button" id="toggle2">Toggle barchart</button>
<button class="rounded-button" id="clear">Clear selections</button>
</div>
</div>
<div class="hint">
<p>You can also press enter while focusing<br> a visualization to toggle data view!</p>
</div>
</div>
</div>
</div>
<div class="section">
<div class="visualizations-wrapper">
<div id="linechart" tabindex="0" class="chart-padding-container" aria-label="Linechart">
<div id="QV01" class="object"></div>
</div>
<div id="barchart" tabindex="0" class="chart-padding-container" aria-label="Barchart">
<div id="QV02" class="object"></div>
</div>
</div>
</div>
</div>
</body>
<style>
body, html {
font-family: 'Open Sans', sans-serif;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.content{
height: 100%;
width: 100%;
display: flex;
overflow-y: hidden;
overflow-x: hidden;
}
.section {
flex: 1 0 auto;
height: 100%;
width: 50%;
}
.hint {
display: flex;
font-family: 'Reenie Beanie', cursive;
bottom: 10%;
right: 5%;
color:white;
font-size: 30px;
text-align: center;
}
.hint img {
align-self: center;
transform: translate(-10px, -5px) rotateX(180deg);
}
.section.info {
position: relative;
box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.55);
}
.visualizations-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, rgba(0,0,0,0.05) 0%, rgba(75,122,102,0.5) 100%);
flex-direction: column;
}
.chart-padding-container {
height: calc(50% - 125px);
width: calc(100% - 250px);
border: 1px rgba(75,122,102,0.4) solid;
background-color: rgba(255,255,255, 0.8);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.20);
border-radius: 2px;
padding: 30px;
margin: 20px;
}
.object {
position: relative;
width:100%;
height:100%;
min-height: 100%;
min-width: 100%;
}
.chart-padding-container:focus {
outline: 2px rgb(255, 174, 0) solid;
outline-offset: -1px;
}
.header {
font-size: 40px;
color: white;
text-align: center;
font-weight: 500;
}
.divider {
width: 100%;
height: 1px;
min-height: 1px;
margin: 5px 0 25px;
background-color: rgb(255, 174, 0);
}
.description-text {
font-size: 18px;
margin-bottom: 20px;
color:rgb(234, 236, 234);
font-weight: 100;
text-align: center;
width:100%;
}
.buttons-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.rounded-button {
flex: 0 0 auto;
font: inherit;
cursor: pointer;
outline: inherit;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
border-radius: 30px;
background-color: rgba(0,0,0,0.2);
margin-top: 10px;
margin-right: 10px;
border: 1px transparent solid;
font-size: 12px;
color: whitesmoke;
transition: background-color 0.2s;
}
.rounded-button:hover {
background-color: rgba(0,0,0,0.35);
}
.rounded-button:focus {
border: 1px rgb(255, 174, 0) solid;
box-shadow: 0px 0px 20px -4px rgba(255, 174, 0);
}
.textWrapper {
width: 80%;
height: 50%;
margin-top: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image {
width: 100%;
height: 100%;
background-position: bottom;
background-size: cover;
}
.overlay {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(142deg, rgba(75,122,102,1) 0%,rgba(0,0,0,0) 100%);
}
.qv-st-data-cell-null-value {
background-color: transparent;
}
.qv-st-data-cell:focus, .qv-st-header-cell:focus {
outline: 2px rgb(255, 174, 0) solid;
}
.qv-st-data-cell, .qv-st-header-cell {
overflow: visible;
}
.qv-selection-toolbar {
background: linear-gradient(135deg, rgb(255,255,255) 0%, rgb(241, 241, 241) 100%);
}
@media only screen and (max-width: 1200px) {
body, html {
height: 100%;
}
.content{
flex-direction: column;
overflow-y: auto;
}
.section {
width: 100%;
height: 1000px;
}
.section.info {
height: 800px;
}
.hint {
bottom: 20%;
left: 5%;
right:auto;
transform: rotate(25deg);
}
.hint img {
transform: translate(-10px, 5px);
}
}
@media only screen and (max-width: 650px), only screen and (max-height: 800px) and (min-width: 1200px){
.qvobject {
height: calc(50% - 125px);
margin: 15px;
}
.description-text {
font-size: 15px;
}
.header {
font-size: 35px;
}
.rounded-button {
font-size: 10px;
}
.hint {
bottom: calc(10% + 30px);
font-size: 25px;
}
}
</style>
</html>