Skip to content

Instantly share code, notes, and snippets.

@mrcrnkovich

mrcrnkovich/index.html

Created February 11, 2021 02:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mrcrnkovich/2fcf3bee3b5708da1cb24341d7929340 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mrcrnkovich/2fcf3bee3b5708da1cb24341d7929340 to your computer and use it in GitHub Desktop.
Download ZIP
PHL St Dept Fines table
Raw
index.html
<html>
<head>
</head>
<body>
<div id="layout">
</div>
</body>
</html>
Raw
script.babel
const baseURL = 'https://phl.carto.com/api/v2/sql?q=';
const q = 'SELECT violation_code, '
+ 'violation_description, '
+ 'EXTRACT(YEAR from date_added) as year, '
+ 'SUM(fine_amount) as sum '
+ 'FROM streets_code_violation_notices '
+ 'GROUP BY 1,2,3 '
+ 'ORDER BY 1,2,3';
function TableRows(props){
function createRow(r){
const col1 = r.violation_code;
const year = r.year;
const col2 = (r.violation_description?r.violation_description:"");
const col3 = (r.sum?r.sum:0);
return(
<tr key={col1+year+col3}>
<td key={col1+year+col3+5}> {col1} </td>
<td key={col1+year+col3+7}> {year} </td>
<td key={col1+year+col3+10}>{col2.toUpperCase()}</td>
<td key={col1+year+col3+20} className="accounting">
{col3.toLocaleString()}
</td>
</tr>
)};
return (
<table>
<thead>
<th key="heading1.1">Violation Code</th>
<th key="heading1.0">Year</th>
<th key="heading1.2">Violation Desc</th>
<th key="heading1.3">Total Amount</th>
</thead>
<tbody>
{ props.data && props.data.map(r => createRow(r)) }
</tbody>
</table>
);
}
function SideBar(){
const bar = [{name:"home", attr:{
class:"fa fa-home fa-2x",
text:"Home",
link: ""}},
];
return (
<ul className="sidebar">
<li>
<a>
<i className="fa fa-home fa-2x"></i>
<span>Home</span>
</a>
</li>
<li>
<a>
<i className="fa fa-laptop fa-2x"></i>
<span>Download</span>
</a>
</li>
<li>
<a>
<i className="fa fa-folder-open fa-2x"></i>
<span>Save</span>
</a>
</li>
<li>
<a>
<i className="fa fa-bookmark fa-2x"></i>
<span>Bookmark</span>
</a>
</li>
</ul>
);
}
function App (){
const [data, setData] = React.useState(null);
fetch(baseURL+q)
.then(resp => resp.json())
.then(j => setData(j.rows));
return(
<div className="page-wrapper">
<div className="header shadow">
<h2>PHL Open Data</h2>
<h4>Street Dept Fines - PHL by code</h4>
</div>
<div className="content shadow">
<SideBar />
<div className="main">
<TableRows data={data} />
</div>
</div>
<div className="footer shadow">
<h5>Michael Crnkovich</h5>
<h5>All this is a test</h5>
</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('layout'));
Raw
scripts
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/0.10.4/lodash-fp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-plotlyjs/0.4.4/PlotlyComponent.js"></script>
Raw
style.css
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300&display=swap');
#layout{
min-height: 100vh;
max-height: 100vh;
}
body{
margin: 0;
}
.page-wrapper{
display: grid;
min-height: 100vh;
max-height: 100vh;
padding: 0.75em;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
gap: 0.5em;
}
.content{
grid-row: 2;
display: flex;
justify-content: flex-stretch;
overflow: auto;
}
.header{
display: flex;
align-content: bottom;
justify-content: space-between;
grid-row: 1;
background-color: #E8E8E8;
padding: 0.5em;
margin-bottom: 0.5em;
}
.sidebar{
grid-row:2;
border-radius: 5px;
width: 60px;
overflow: hidden;
transition: 0.35s;
}
.sidebar:hover{
width: 250px;
}
.footer{
grid-row: 3;
display: flex;
justify-content: space-between;
background-color: #E8E8E8;
text-align: center;
margin-top: 0.25em;
margin-bottom: 0;
}
.accounting{
text-align:right;
padding-right:0.5em;
}
.main{
display: grid;
grid-template-rows: auto auto;
gap: 0.5em;
margin-left: 1em;
overflow: auto;
flex-grow: 5;
}
.shadow{
border-radius: 5px;
border: 2px #ccc;
box-shadow: 0 0.05em 0.05em #ccc,
0 0.05em 0.05em #ccc,
0 0.10em 0.10em #ccc,
0 0.10em 0.10em #ccc,
0 0.25em 0.25em #ccc;
}
table{
display: block;
grid-row: 2;
overflow: auto;
flex-grow: 5;
}
thead{
position: sticky;
}
tbody{
overflow: auto;
}
span {
color: #e6ffff;
visibility: hidden;
overflow: hidden;
}
ul>li:hover{
background-color: #24daff;
}
li:hover>a>span{
visibility: visible;
}
ul{
background-color:#212121;
padding: 0.5em;
margin-bottom: 0;
}
li{
display: block;
position:relative;
border-radius: 5px;
padding-left:0;
margin-left:0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
i{
display:block;
color: #e6ffff;
padding: 0.25em;
}
thead{
padding-bottom: 2em;
border: 1px solid;
background-color: #212121;
position: sticky;
top: 0;
}
th{
padding-right: 0.5em;
padding-left: 0.5em;
color: #e6ffff;
font-family: 'Big Shoulders Display', cursive;
font-weight: 500;
}
tr{
padding: 1em;
border-bottom: 1px solid;
transition: background-color 0.05s;
}
tr:nth-child(odd){
background-color: #E8E8E8;
}
tr:hover{
background-color: hsl(179, 40%, 89%);
}
td{
padding-left:0.5em;
font-family: 'Big Shoulders Display', cursive;
font-weight: 100;
}
h2, h4, h5{
font-family: 'Big Shoulders Display', cursive;
font-weight: 100;
}
@font-face {
font-family: 'BigFont';
src: url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100&display=swap');
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment