From bba27604cf0084f836524839cb4b7fa2329cd1a8 Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Sun, 3 Nov 2019 16:00:04 -0500 Subject: [PATCH] New logo & demo gif --- README.md | 5 +-- docs/logo.config.js | 11 ++++++ docs/logo.js | 65 +++++++++++++++++++++++++++++++ docs/package.json | 6 ++- docs/pages/en/index.js | 59 +++++++++++++++++++++------- docs/siteConfig.js | 14 ++++--- docs/static/css/custom.css | 23 ++++++++++- docs/static/css/material.dark.css | 24 ++++++------ docs/static/js/animation.js | 51 ++++++++++++++++++------ 9 files changed, 208 insertions(+), 50 deletions(-) create mode 100644 docs/logo.config.js create mode 100644 docs/logo.js diff --git a/README.md b/README.md index e76a9396e4..86e194a3c0 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,15 @@ -# [![Perspective](https://perspective.finos.org/img/title.png)](https://perspective.finos.org/) +# [![Perspective](https://perspective.finos.org/img/logo_inverted_tiny.png)](https://perspective.finos.org/) [![Build Status](https://travis-ci.org/finos/perspective.svg?branch=master)](https://travis-ci.org/finos/perspective) [![Appveyor](https://ci.appveyor.com/api/projects/status/github/finos/perspective?svg=true)](https://ci.appveyor.com/project/neilslinger/perspective) [![npm](https://img.shields.io/npm/v/@finos/perspective.svg?style=flat-square)](https://www.npmjs.com/package/@finos/perspective) -[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![FINOS - Operating](https://cdn.rawgit.com/finos/contrib-toolbox/master/images/badge-operating.svg)](https://finosfoundation.atlassian.net/wiki/display/FINOS/Operating) A streaming data visualization engine for Javascript, Perspective makes it simple to build real-time & user configurable analytics entirely in the browser. - + ## Features diff --git a/docs/logo.config.js b/docs/logo.config.js new file mode 100644 index 0000000000..b876915b03 --- /dev/null +++ b/docs/logo.config.js @@ -0,0 +1,11 @@ +const path = require("path"); +const common = require("@finos/perspective/src/config/common.config.js"); + +module.exports = Object.assign({}, common(), { + entry: "./logo.js", + output: { + filename: "logo.js", + libraryTarget: "umd", + path: path.resolve(__dirname, "static/js") + } +}); diff --git a/docs/logo.js b/docs/logo.js new file mode 100644 index 0000000000..e6628ef5ee --- /dev/null +++ b/docs/logo.js @@ -0,0 +1,65 @@ +import {render, html} from "lit-html"; + +class PerspectiveLogo extends HTMLElement { + constructor() { + super(); + const shadowRoot = this.attachShadow({mode: "open"}); + this._inverted = false; + render(this._template, shadowRoot); + } + + get _template() { + return html` + ${this._style} +
+
PERSPECTIVE
+
+ `; + } + + get _style() { + let x = "", + y = ""; + if (this._inverted) { + x = "background-"; + } else { + y = "background-"; + } + let content = ` +:host .inner { + line-height: initial; + margin-bottom: -0.28em; + margin-top: -0.35em; +} + +:host .outer { + overflow: hidden; +} + +:host { + display: inline-block; + position: relative; + ${x}color: rgb(249, 249, 249); + ${y}color: #242526; + font-family: "Source Code Pro"; + font-weight: bold; + font-size: 2em; + padding: 24px; + letter-spacing: -0.166em; +} + +:host span { + padding-left: 0.05em; + margin-left: -0.05em; + ${x}color: #242526; + ${y}color: rgb(249, 249, 249); +}`; + return html` + + `; + } +} + +window.customElements.define("perspective-logo", PerspectiveLogo); diff --git a/docs/package.json b/docs/package.json index 132359fac9..f0e3c1f48d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -6,8 +6,9 @@ "theme": "lessc static/css/material.dark.less > static/css/material.dark.css", "examples": "docusaurus-examples", "start": "npm run build:arrow && npm run theme && docusaurus-start", + "build:logo": "webpack --config logo.config.js --color", "build:arrow": "cpx ../examples/simple/superstore.arrow static/arrow/", - "docs": "npm run build:arrow && npm run theme && docusaurus-build", + "docs": "npm run build:arrow && npm run build:logo && npm run theme && docusaurus-build", "publish-gh-pages": "npm run theme && docusaurus-publish", "write-translations": "docusaurus-write-translations" }, @@ -19,6 +20,7 @@ "less": "^3.9.0" }, "dependencies": { - "@babel/preset-react": "^7.0.0" + "@babel/preset-react": "^7.0.0", + "lit-html": "^1.1.2" } } diff --git a/docs/pages/en/index.js b/docs/pages/en/index.js index e52df18137..71c8c30601 100755 --- a/docs/pages/en/index.js +++ b/docs/pages/en/index.js @@ -20,7 +20,9 @@ function imgUrl(img) { } function docUrl(doc, language) { - return siteConfig.baseUrl + "docs/" + (language ? language + "/" : "") + doc; + return ( + siteConfig.baseUrl + "docs/" + (language ? language + "/" : "") + doc + ); } function pageUrl(page, language) { @@ -57,7 +59,7 @@ const Logo = props => ( const ProjectTitle = props => (

- {siteConfig.title} + Streaming Analytics via WebAssembly @@ -96,7 +98,11 @@ class HomeSplash extends React.Component { } const Block = props => ( - + ); @@ -118,8 +124,19 @@ const PerspectiveBlock = props => { ); } return ( - -
+ +
{beforeImage}

@@ -137,19 +154,22 @@ const Features = props => ( {[ { - content: "Quickly answer any question about your data through a set of flexible transforms, such as pivots, filters, and aggregations", + content: + "Quickly answer any question about your data through a set of flexible transforms, such as pivots, filters, and aggregations", image: imgUrl("baseline-settings-20px.svg"), imageAlign: "top", title: "Simple" }, { - content: "Utilizing bleeding-edge browser technology such as Web Assembly and Apache Arrow, Perspective is unmatched in browser performance", + content: + "Utilizing bleeding-edge browser technology such as Web Assembly and Apache Arrow, Perspective is unmatched in browser performance", image: imgUrl("baseline-trending_up-24px.svg"), imageAlign: "top", title: "Powerful" }, { - content: "Engineered for reliability and production-vetted on the J.P. Morgan trading floor, now available to the development community as Open Source", + content: + "Engineered for reliability and production-vetted on the J.P. Morgan trading floor, now available to the development community as Open Source", image: imgUrl("baseline-security-24px.svg"), imageAlign: "top", title: "Industrial" @@ -162,13 +182,19 @@ const FeatureCallout = props => (

Features

- A fast, memory efficient streaming pivot engine written principally in C++ and compiled to WebAssembly via the [emscripten](https://github.com/kripken/emscripten) compiler. + A fast, memory efficient streaming pivot engine written principally + in C++ and compiled to WebAssembly via the + [emscripten](https://github.com/kripken/emscripten) compiler. - An embeddable, framework-agnostic configuration UI, based on [Web Components](https://www.webcomponents.org/), and a WebWorker engine host for responsiveness at high frequency. + An embeddable, framework-agnostic configuration UI, based on [Web + Components](https://www.webcomponents.org/), and a WebWorker engine + host for responsiveness at high frequency. - A suite of simple visualization plugins for some common Javascript libraries such as [D3FC](), [Hypergrid](https://github.com/fin-hypergrid/core) and + A suite of simple visualization plugins for some common Javascript + libraries such as [D3FC](), + [Hypergrid](https://github.com/fin-hypergrid/core) and [HighCharts](https://github.com/highcharts/highcharts). Integration with Jupyterlab. @@ -239,7 +265,11 @@ const Showcase = props => { .map((user, i) => { return ( - {user.caption} + {user.caption} ); }); @@ -250,7 +280,10 @@ const Showcase = props => {

This project is used by all these people

{showcase}
diff --git a/docs/siteConfig.js b/docs/siteConfig.js index 82c7b06956..0578ffa121 100644 --- a/docs/siteConfig.js +++ b/docs/siteConfig.js @@ -6,7 +6,7 @@ */ const siteConfig = { - title: "Perspective" /* title for your website */, + title: "" /* title for your website */, tagline: "Streaming Analytics via WebAssembly", url: "https://perspective.finos.org/" /* your website url */, cname: "perspective.finos.org", @@ -22,13 +22,13 @@ const siteConfig = { {href: "https://github.com/finos/perspective/", label: "GitHub"} ], - //headerIcon: "img/perspective2.svg", + headerIcon: "img/logo.png", // footerIcon: "img/perspective2.svg", favicon: "img/favicon.png", colors: { - primaryColor: "#1A7DA1", - secondaryColor: "#1A7DA1" + primaryColor: "#242526", + secondaryColor: "#242526" }, copyright: "Copyright © " + new Date().getFullYear() + " Perspective Authors", @@ -43,14 +43,16 @@ const siteConfig = { "https://unpkg.com/@finos/perspective-viewer/dist/umd/perspective-viewer.js", "https://unpkg.com/@finos/perspective-viewer-hypergrid/dist/umd/perspective-viewer-hypergrid.js", "https://unpkg.com/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js", - "js/animation.js" + "js/animation.js", + "js/logo.js" ], stylesheets: [ "https://fonts.googleapis.com/css?family=Montserrat:300", "https://fonts.googleapis.com/css?family=Material+Icons", "https://fonts.googleapis.com/css?family=Open+Sans", - "https://fonts.googleapis.com/css?family=Roboto+Mono" + "https://fonts.googleapis.com/css?family=Roboto+Mono", + "https://fonts.googleapis.com/css?family=Source+Code+Pro:900&display=swap" ], onPageNav: "separate", diff --git a/docs/static/css/custom.css b/docs/static/css/custom.css index 4911cd77fe..01e3871857 100644 --- a/docs/static/css/custom.css +++ b/docs/static/css/custom.css @@ -4,6 +4,11 @@ } @media only screen and (min-width: 1024px) { + body { + left: 0; + right: 0; + } + } @media only screen and (max-width: 1023px) { @@ -15,6 +20,9 @@ @media only screen and (min-width: 1500px) { } + + + .promoSection .buttonWrapper { transition: color 0.2s ease-in-out; } @@ -23,6 +31,10 @@ background: #242526; } +body { + position: absolute; /* mobile fix */ +} + .homeContainer .buttonWrapper.selected a { border: 1px solid #f9f9f9; color: #f9f9f9 @@ -64,12 +76,17 @@ color: #1A7DA1 !important; } -h2.headerTitle, h2.headerTitleWithLogo { +h2.headerTitle, h2.headerTitleWithLogo, .logo { font-family: "Montserrat"; color: #f9f9f9 !important; transition: opacity 0.1s ease-in; } +.logo { + height: 50% !important; + opacity: 0; +} + .mainContainer .blockImage img { width: 100px; } @@ -79,6 +96,10 @@ h2.headerTitle, h2.headerTitleWithLogo { padding-bottom: 96px; } +.projectTitle small { + margin: 0em 0 2em; +} + .homeContainer .projectTitle { color: #f9f9f9; font-family: "Montserrat"; diff --git a/docs/static/css/material.dark.css b/docs/static/css/material.dark.css index ba4c0f768a..4f5a5f6c41 100644 --- a/docs/static/css/material.dark.css +++ b/docs/static/css/material.dark.css @@ -18,20 +18,20 @@ @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700"); @import url("https://fonts.googleapis.com/css?family=Roboto+Mono"); perspective-viewer { - --interface--font-family: "Open Sans"; + font-family: "Open Sans"; --interface-monospace--font-family: "Roboto Mono"; --inactive-column-selector--content: "\E835"; --active-column-selector--content: "\E834"; - --active-column-selector--color: #1a7da1; - --active-column--background: none; + --active--color: #1a7da1; + --column--background: none; --column--height: 21px; --active-column--height: 51px; --inactive-column--height: 24px; --active-columns--justify-content: space-evenly; --inactive-column--opacity: 0.3; - --column_type-float--color: #1a7da1; - --column_type-string--color: #ff8888; - --config_button--before: "more_vert"; + --float--column-type--color: #1a7da1; + --string--column-type--color: #ff8888; + --settings-button--content: "more_vert"; --button--font-family: "Material Icons"; --overflow_hint--before: "error_outline"; --overflow_hint--font-family: "Material Icons"; @@ -67,15 +67,16 @@ perspective-viewer { --active-column-selector--height: 45px; --column_selector--width: 31px; --column_selector--font-size: 16px; + --hypergrid-gridline--color: #AAA; --hypergrid--color: #666; --hypergrid--padding: 24px; --side_panel--padding: 24px 24px 24px 17px; --button--padding: 24px 17px 0px 17px; --button--font-size: 16px; - --button-hover--color: #1a7da1; --top_panel--padding: 0px 0px 24px 0px; --hypergrid-scrollbar--width: 8px; --hypergrid-scrollbar--border-radius: 5px; + --hypergrid--background: #fff; --hypergrid-positive--color: #1078d1; --hypergrid-negative--color: #de3838; --hypergrid--font-size: 12px; @@ -103,14 +104,11 @@ perspective-viewer { background-color: #2a2c2f; color: #cfd8dc; --plugin--background: #2f3136; - --column-drop-label--color: #666; - --column--border-color: #3b3f46; - --column-drop-target--background: #135d78; - --active-column-selector--color: #22a0ce; + --inactive--color: #666; + --active--background: #135d78; + --active--color: #22a0ce; --column_type-float--color: #22a0ce; --column_type-string--color: #ff8888; - --psp-text-field--border-color: #22a0ce; - --button-hover--color: #22a0ce; --hypergrid--color: #eee; --hypergrid-tree-header--background: #2f3136; --hypergrid--background: #2f3136; diff --git a/docs/static/js/animation.js b/docs/static/js/animation.js index dd3dc4a475..8aeafd958a 100644 --- a/docs/static/js/animation.js +++ b/docs/static/js/animation.js @@ -1,4 +1,15 @@ -var SECURITIES = ["AAPL.N", "AMZN.N", "QQQ.N", "NVDA.N", "TSLA.N", "FB.N", "MSFT.N", "CSCO.N", "GOOGL.N", "PCLN.N"]; +var SECURITIES = [ + "AAPL.N", + "AMZN.N", + "QQQ.N", + "NVDA.N", + "TSLA.N", + "FB.N", + "MSFT.N", + "CSCO.N", + "GOOGL.N", + "PCLN.N" +]; var CLIENTS = ["Homer", "Marge", "Bart", "Lisa", "Maggie"]; var id = 0; @@ -57,7 +68,9 @@ function update() { } function select(id) { - Array.prototype.slice.call(document.querySelectorAll(".buttonWrapper")).map(x => x.classList.remove("selected")); + Array.prototype.slice + .call(document.querySelectorAll(".buttonWrapper")) + .map(x => x.classList.remove("selected")); document.querySelector(id).classList.add("selected"); const viewer = document.querySelector("perspective-viewer"); viewer.restore( @@ -128,7 +141,9 @@ window.addEventListener("WebComponentsReady", function() { for (var x = 0; x < 100; x++) { data.push(newRow()); } - elem = Array.prototype.slice.call(document.querySelectorAll("perspective-viewer"))[0]; + elem = Array.prototype.slice.call( + document.querySelectorAll("perspective-viewer") + )[0]; var worker = elem.worker; var tbl = worker.table(data, {index: "id"}); elem.load(tbl); @@ -138,12 +153,24 @@ window.addEventListener("WebComponentsReady", function() { update(0); }); - document.querySelector("#grid").addEventListener("mouseenter", () => select("#grid")); - 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("#grid") + .addEventListener("mouseenter", () => select("#grid")); + 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")); select("#grid"); @@ -171,13 +198,13 @@ window.addEventListener("WebComponentsReady", function() { }); setTimeout(() => { - document.querySelector(".headerTitle").style.opacity = 0; + document.querySelector(".logo").style.opacity = 0; }); window.addEventListener("scroll", () => { if (window.scrollY > 100) { - document.querySelector(".headerTitle").style.opacity = 1; + document.querySelector(".logo").style.opacity = 1; } else { - document.querySelector(".headerTitle").style.opacity = 0; + document.querySelector(".logo").style.opacity = 0; } });