Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preload fonts #1481

Merged
merged 3 commits into from
Jul 21, 2021
Merged

Preload fonts #1481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a79b7fa
Add throttle control to docs site
texodus Jul 16, 2021
1a67768
Include View construction in render lock
texodus Jul 21, 2021
3de4ca4
Preload google web fonts via `webfontloader`
texodus Jul 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/js/concepts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ import perspective from "@finos/perspective";
const worker = perspective.shared_worker();

async function main() {
if (window.location.pathname === "/" || window.location.pathname === "/index.html") {
return;
}

const arrow = await fetch("../../arrow/superstore.arrow");
const table = await worker.table(await arrow.arrayBuffer());

Expand Down
4 changes: 3 additions & 1 deletion docs/js/examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,10 @@ async function run_with_theme(page, is_dark = false) {
</perspective-viewer>
<script>
const WORKER = window.perspective.worker();
function on_load() {
async function on_load() {
var el = document.getElementsByTagName('perspective-viewer')[0];
const plugin = await el._vieux.get_plugin("Heatmap");
plugin.render_warning = false;
WORKER.table(this.response).then(table => {
el.load(table);
el.toggleConfig();
Expand Down
12 changes: 12 additions & 0 deletions docs/js/features.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -846,5 +846,17 @@ exports.EXAMPLES = [
sort: [["Discount", "col asc"]]
},
viewport: {width: 600, height: 450}
},
{
name: "Heatmap 4",
config: {
plugin: "Heatmap",
columns: ["Profit"],
expressions: ['bucket("Profit", 100)', "bucket(\"Order Date\", 'M')"],
"row-pivots": ["bucket(\"Order Date\", 'M')"],
"column-pivots": ['bucket("Profit", 100)'],
plugin_config: {}
},
viewport: {width: 600, height: 450}
}
];
7 changes: 7 additions & 0 deletions docs/js/fonts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const WebFont = require("webfontloader");

WebFont.load({
google: {
families: ["Roboto Mono:200,400", "Material Icons", "Orbitron:900", "Open Sans:300,400"]
}
});
97 changes: 57 additions & 40 deletions docs/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,36 @@ import {appendChild} from "domutils";
import {div} from "prelude-ls";
import {getEffectiveConstraintOfTypeParameter} from "typescript";

var SECURITIES = ["AAPL.N", "MSFT.N", "AMZN.N", "GOOGL.N", "FB.N", "TSLA.N", "BABA.N", "TSM.N", "V.N", "NVDA.N", "JPM.N", "JNJ.N", "WMT.N", "UNH.N", "MA.N", "BAC.N"];
var CLIENTS = ["Homer", "Marge", "Bart", "Lisa", "Maggie"];
var SECURITIES = [
"AAPL.N",
"MSFT.N",
"AMZN.N",
"GOOGL.N",
"FB.N",
"TSLA.N",
"BABA.N",
"TSM.N",
"V.N",
"NVDA.N",
"JPM.N",
"JNJ.N",
"WMT.N",
"UNH.N",
"MA.N",
"BAC.N",
"DIS.N",
"ASML.N",
"ADBE.N",
"CMCSA.N",
"NKE.N",
"XOM.N",
"TM.N",
"KO.N",
"ORCL.N",
"NFLX.N"
];

var CLIENTS = ["Homer", "Marge", "Bart", "Lisa", "Maggie", "Barney", "Ned", "Moe"];
var id = 0;

function randn_bm() {
Expand All @@ -24,7 +52,7 @@ function randn_bm() {
}

function newRow() {
id = id % 500;
id = id % 1000;
return {
name: SECURITIES[Math.floor(Math.random() * SECURITIES.length)],
client: CLIENTS[Math.floor(Math.random() * CLIENTS.length)],
Expand All @@ -37,39 +65,18 @@ function newRow() {
};
}

var styleElement = document.createElement("style");
styleElement.innerText = `
.homeContainer perspective-viewer, perspective-viewer {
box-shadow: none !important;
overflow: visible !important;
--plugin--box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
}

.homeContainer perspective-viewer {
background: none !important;
}`;

document.head.appendChild(styleElement);

var freq = 1,
freqdir = 1,
var freq = 100,
elem;

function update(table) {
var viewport_height = document.documentElement.clientHeight;
if (viewport_height - window.scrollY > 0) {
table.update([newRow(), newRow(), newRow()]);
if (freq !== 190) {
var viewport_height = document.documentElement.clientHeight;
if (viewport_height - window.scrollY > 0) {
table.update([newRow(), newRow(), newRow()]);
}
}
// if (freq === 0) {
// setTimeout(() => update(table), 3000);
// // freqdir = 1;
// } else {
setTimeout(() => update(table), 100);
// }
// if (freq > 60) {
// freqdir = -1;
// }
// freq += freqdir;

setTimeout(() => update(table), freq);
}

function select(id) {
Expand Down Expand Up @@ -170,12 +177,18 @@ function get_arrow(callback) {
}

window.addEventListener("DOMContentLoaded", async function() {
for (const img of document.querySelectorAll("img")) {
if (img.dataset.src) {
img.setAttribute("src", img.dataset.src);
}
}

if (window.location.pathname !== "/" && window.location.pathname !== "/index.html") {
return;
}

var data = [];
for (var x = 0; x < 500; x++) {
for (var x = 0; x < 1000; x++) {
data.push(newRow());
}
elem = Array.prototype.slice.call(document.querySelectorAll("perspective-viewer"))[0];
Expand All @@ -188,13 +201,17 @@ window.addEventListener("DOMContentLoaded", async function() {
update(tbl, 0);
});

document.querySelector("#grid").addEventListener("mouseenter", () => select("#grid"));
document.querySelector("#grid2").addEventListener("mouseenter", () => select("#grid2"));
document.querySelector("#cyclone").addEventListener("mouseenter", () => select("#cyclone"));
document.querySelector("#pivot").addEventListener("mouseenter", () => select("#pivot"));
document.querySelector("#crosssect").addEventListener("mouseenter", () => select("#crosssect"));
document.querySelector("#intersect").addEventListener("mouseenter", () => select("#intersect"));
document.querySelector("#enhance").addEventListener("mouseenter", () => select("#enhance"));
document.querySelector("#velocity").addEventListener("input", function(event) {
freq = (-9 / 5) * this.value + 190;
});

document.querySelector("#grid").addEventListener("mousedown", () => select("#grid"));
document.querySelector("#grid2").addEventListener("mousedown", () => select("#grid2"));
document.querySelector("#cyclone").addEventListener("mousedown", () => select("#cyclone"));
document.querySelector("#pivot").addEventListener("mousedown", () => select("#pivot"));
document.querySelector("#crosssect").addEventListener("mousedown", () => select("#crosssect"));
document.querySelector("#intersect").addEventListener("mousedown", () => select("#intersect"));
document.querySelector("#enhance").addEventListener("mousedown", () => select("#enhance"));

select("#grid");

Expand Down
15 changes: 8 additions & 7 deletions docs/pages/en/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const SplashContainer = props => (

const Logo = props => (
<div className="projectLogo">
<img src={props.img_src} />
<img data-src={props.img_src} />
</div>
);

Expand Down Expand Up @@ -90,6 +90,7 @@ class HomeSplash extends React.Component {
<Button id="intersect">Treemap</Button>
<Button id="pivot">Heatmap</Button>
</PromoSection>
<input id="velocity" type="range" class="slider"></input>
</div>
</SplashContainer>
);
Expand Down Expand Up @@ -156,7 +157,7 @@ const GalleryBlock = props => {
.map((user, i) => {
return (
<a href={user.infoLink} key={i}>
<img style={{width: "33.3%"}} src={user.image} alt={user.caption} title={user.caption} />
<img style={{width: "33.3%"}} data-src={user.image} alt={user.caption} title={user.caption} />
</a>
);
});
Expand Down Expand Up @@ -450,7 +451,7 @@ const Showcase = props => {
return (
<a href={user.infoLink} key={i}>
<h4>{user.caption}</h4>
<img src={user.image} alt={user.caption} title={user.caption} />
<img data-src={user.image} alt={user.caption} title={user.caption} />
</a>
);
});
Expand All @@ -468,18 +469,18 @@ const ChartTypes = props => {
return null;
}

const showcase_light = Array.from(Array(74).keys()).map((user, i) => {
const showcase_light = Array.from(Array(75).keys()).map((user, i) => {
return (
<a className="feature" key={i} data-key={i}>
<img src={`features/feature_${i}.png`} />
<img data-src={`features/feature_${i}.png`} />
</a>
);
});

const showcase_dark = Array.from(Array(74).keys()).map((user, i) => {
const showcase_dark = Array.from(Array(75).keys()).map((user, i) => {
return (
<a className="feature" key={i} data-key={i}>
<img src={`features/feature_${i}_dark.png`} />
<img data-src={`features/feature_${i}_dark.png`} />
</a>
);
});
Expand Down
16 changes: 8 additions & 8 deletions docs/siteConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,14 @@ const siteConfig = {
highlight: {
theme: "atom-one-light"
},
scripts: ["https://buttons.github.io/buttons.js", "js/index.js"],
stylesheets: [
"https://fonts.googleapis.com/css?family=Material+Icons",
"https://fonts.googleapis.com/css?family=Open+Sans",
"https://fonts.googleapis.com/css?family=Public+Sans",
"https://fonts.googleapis.com/css?family=Roboto+Mono",
"https://fonts.googleapis.com/css2?family=Orbitron:wght@900"
],
scripts: ["js/fonts.js", "https://buttons.github.io/buttons.js", "js/index.js"],
// stylesheets: [
// "https://fonts.googleapis.com/css?family=Material+Icons",
// "https://fonts.googleapis.com/css?family=Open+Sans",
// "https://fonts.googleapis.com/css?family=Public+Sans",
// "https://fonts.googleapis.com/css?family=Roboto+Mono",
// "https://fonts.googleapis.com/css2?family=Orbitron:wght@900"
// ],
onPageNav: "separate",
ogImage: "img/perspective.png",
twitterImage: "img/perspective.png"
Expand Down
60 changes: 54 additions & 6 deletions docs/static/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ body {
background: #242526;
}

.homeContainer .projectTitle {
font-family: "Open Sans";
}

.darkBackground, .darkBackground perspective-viewer {
background-color: #242526 !important;
}
Expand Down Expand Up @@ -84,7 +88,7 @@ body {
}

h2.headerTitle {
font-family: "Public Sans", Arial, Helvetica, sans-serif;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
color: #f9f9f9 !important;
transition: opacity 0.1s ease-in;
}
Expand All @@ -98,7 +102,7 @@ h2.headerTitle {
}

.logo {
font-family: "Public Sans", Arial, Helvetica, sans-serif;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
height: 50% !important;
opacity: 0;
transition: opacity 0.2s;
Expand Down Expand Up @@ -133,7 +137,7 @@ h2.headerTitle {

.homeContainer .projectTitle {
color: #f9f9f9;
font-family: "Public Sans";
font-family: "Open Sans";
}

.homeContainer .projectTitle i {
Expand Down Expand Up @@ -163,6 +167,50 @@ h2.headerTitle {
border: 1px solid #333;
}

.homeContainer perspective-viewer, perspective-viewer {
box-shadow: none !important;
/* overflow: visible !important; */
--plugin--box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
}

.slider {
margin-top: 12px;
width: 200px;
-webkit-appearance: none;
height: 10px;
border-radius: 5px;
background: rgba(0,0,0,0.5);
border-color: #f9f9f9;
border: 1px solid #666;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #242526;
border: 1px solid #666;
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
}

.homeContainer perspective-viewer {
background: none !important;
}

.homeContainer perspective-viewer, perspective-viewer {
--d3fc-full--gradient: linear-gradient(#4d342f 0%, #e4521b 22.5%, #feeb65 42.5%, #f0f0f0 50%, #dcedc8 57.5%, #42b3d5 67.5%, #1a237e 100%);
--d3fc-positive--gradient: linear-gradient(#222222 0%, #1a237e 35%, #42b3d5 70%, #dcedc8 100%);
Expand Down Expand Up @@ -265,20 +313,20 @@ ol li::before {
content: counter(list-counter) ".";
font-weight: bold;
margin-right: 0.5rem;
font-family: "Public Sans", Arial, Helvetica, sans-serif;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
line-height: 1;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Public Sans", Arial, Helvetica, sans-serif;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

h1, h2 {
margin-top: 1em;
}

p, span, oi, li {
font-family: "Public Sans", Arial, Helvetica, sans-serif;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

code *, pre * {
Expand Down