mz-health/OMOP
mz-health
/
OMOP
mirror of https://github.com/OHDSI/CommonDataModel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add zoom function to erd

This commit is contained in:
Clair Blacketer 2023-02-21 12:59:28 -05:00
parent c61839c26b
commit eeb4f27985
2 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/cdm54erd.html
View File

@ -423,14 +423,33 @@ $(document).ready(function () {
</div>
<style type="text/css">
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
</style>
<script type="text/javascript">
$(document).ready(function() {
$('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
// onClick function for all plots (img's)
$('img:not(.zoomImg)').click(function() {
$('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
$('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
});
// onClick function for zoomImg
$('img.zoomImg').click(function() {
$('.zoomDiv').css({opacity: '0', width: '0%'});
});
});
</script>
<p>Late in 2022 we held a community contest to find the best
entity-relationship diagram and we crowned two winners! Martijn Schuemie
and Renske Los created the best printable version and Vishnu
Chandrabalan created the best <a
href="http://omop-erd.surge.sh/">interactive version</a>.</p>
<div class="figure">
<img src="images/erd.jpg" alt="" />
<p class="caption">CDM v5.4 Printable ERD</p>
<img src="images/erd.jpg" style="width:150.0%" alt="" />
<p class="caption">CDM v5.4 Printable ERD - <a
href="https://github.com/OHDSI/CommonDataModel/raw/main/rmd/images/erd.jpg">click
here to download</a></p>
</div>

21
rmd/cdm54erd.Rmd
View File

@ -4,6 +4,25 @@ output:
html_document
---
```{css zoom-lib-src, echo = FALSE}
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
```
```{js zoom-jquery, echo = FALSE}
$(document).ready(function() {
$('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
// onClick function for all plots (img's)
$('img:not(.zoomImg)').click(function() {
$('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
$('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
});
// onClick function for zoomImg
$('img.zoomImg').click(function() {
$('.zoomDiv').css({opacity: '0', width: '0%'});
});
});
```
Late in 2022 we held a community contest to find the best entity-relationship diagram and we crowned two winners! Martijn Schuemie and Renske Los created the best printable version and Vishnu Chandrabalan created the best [interactive version](http://omop-erd.surge.sh/).
![CDM v5.4 Printable ERD](images/erd.jpg)
![CDM v5.4 Printable ERD - [click here to download](https://github.com/OHDSI/CommonDataModel/raw/main/rmd/images/erd.jpg)](images/erd.jpg){width=150%}