Skip to content

Commit

Permalink
Merge pull request #849 from finos/theme-refactor
Browse files Browse the repository at this point in the history 
Refactor `perspective-viewer` themes to include css classes
  • Loading branch information
@texodus
texodus authored Dec 18, 2019
2 parents 051d45a + bb51cce commit 88c58df
Show file tree
Hide file tree
Showing 13 changed files with 161 additions and 72 deletions.
59 changes: 42 additions & 17 deletions docs/md/js.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const perspective = require("@finos/perspective");

`@finos/perspective` also comes with pre-built bundle which exports the global
`perspective` module name in vanilla Javascript, when e.g. importing
[via a CDN](https://unpkg.com/@finos/perspective/build/perspective.js).
[via a CDN](https://unpkg.com/@finos/perspective).

```html
<script src="perspective.js"></script>
Expand Down Expand Up @@ -427,32 +427,57 @@ import "@finos/perspective-viewer-d3fc/xy-scatter";
import "@finos/perspective-viewer-highcharts/treemap";
```

You may also import a theme when bundling perspective-viewer. Even though there
are only 2 of them.
Once imported, the `<perspective-viewer>` Web Component will be available in any
standard HTML on your site. A simple example:

```html
<perspective-viewer id="view1"></perspective-viewer>
```

### Theming
Theming is supported in `perspective-viewer` and it's accompanying plugins.
A number of themes come bundled with `perspective-viewer`. You can import
any of these themes directly into your app and the `perspective-viewer`s
will be themed accordingly.

```javascript
// A theme based on Google's Material Design Language
import "@finos/perspective-viewer/build/material.css";
//Themes based on Google's Material Design Language
import "@finos/perspective-viewer/themes/material.css";
import "@finos/perspective-viewer/themes/material.dark.css";
import "@finos/perspective-viewer/themes/material-dense.css";
import "@finos/perspective-viewer/themes/material-dense.dark.css";

//Vaporwave theme
import "@finos/perspective-viewer/themes/vaporwave.css";
```

Alternatively, if you're fine with a default theme and don't want to bundle
yourself, you can just import the pre-bundled assets from their respective
modules, which export their default visualizations.
***Note that importing multiple themes may override each other***

```html
<script src="perspective-viewer.js"></script>
<script src="perspective-viewer-hypergrid.js"></script>
<script src="perspective-viewer-d3fc.js"></script>
Alternatively, you may use `all-themes.css`, which exposes all available
themes as css classes. This allows you to trivially apply different themes
to multiple `perspective-viewer`s by simply setting the `class`
attribute on each `perspective-viewer`

<!-- Theme available separately if you are so inclined -->
<link rel="stylesheet" href="material.css" />
*index.js*
```javascript
//Exposes all themes as css classes
import "@finos/perspective-viewer/themes/all-themes.css";
```

Once imported, the `<perspective-viewer>` Web Component will be available in any
standard HTML on your site. A simple example:
*index.html*
```html
<perspective-viewer class='perspective-viewer-material'></perspective-viewer>
<perspective-viewer class='perspective-viewer-material-dark'></perspective-viewer>
<perspective-viewer class='perspective-viewer-material-dense'></perspective-viewer>
<perspective-viewer class='perspective-viewer-material-dense-dark'></perspective-viewer>
<perspective-viewer class='perspective-viewer-vaporwave'></perspective-viewer>
```

If you choose not to bundle the themes yourself, they are available on the [CDN](https://unpkg.com/@finos/perspective-viewer/dist/umd/). These can be directly linked in your html e.g.


```html
<perspective-viewer id="view1"></perspective-viewer>
<link rel="stylesheet" href="https://unpkg.com/@finos/perspective-viewer/dist/umd/material.css"/>
```

### Loading data
Expand Down
16 changes: 9 additions & 7 deletions examples/simple/citibike.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

<script src="perspective.js"></script>

<link rel='stylesheet' href="material.css" is="custom-style">
<link rel='stylesheet' href="all-themes.css" is="custom-style">

<style>

Expand Down Expand Up @@ -67,12 +67,14 @@
<body>

<div id="grid">
<perspective-viewer
row-pivots='["name"]'
columns='["num_bikes_available"]'
sort='[["num_bikes_available","desc"]]'>
</perspective-viewer>
<perspective-viewer
<perspective-viewer
class='perspective-viewer-material-dark'
row-pivots='["name"]'
columns='["num_bikes_available"]'
sort='[["num_bikes_available","desc"]]'>
</perspective-viewer>
<perspective-viewer
class='perspective-viewer-material'
plugin='d3_xy_scatter'
row-pivots='["name"]'
columns='["lon","lat","num_bikes_available"]'
Expand Down
7 changes: 4 additions & 3 deletions packages/perspective-jupyterlab/src/less/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "~@finos/perspective-viewer/src/less/variables.less";
@import (reference) "~@finos/perspective-viewer/src/themes/material.less";
@import (reference) "~@finos/perspective-viewer/src/themes/material.dark.less";

div.PSPContainer,
div.PSPContainer-dark {
Expand All @@ -11,11 +12,11 @@ div.PSPContainer-dark {
}

div.PSPContainer {
@import "~@finos/perspective-viewer/src/themes/material.less";
.perspective-viewer-material();
}

div.PSPContainer-dark {
@import "~@finos/perspective-viewer/src/themes/material.dark.less";
.perspective-viewer-material-dark();
}

div.PSPContainer perspective-viewer,
Expand Down
8 changes: 5 additions & 3 deletions packages/perspective-phosphor/src/less/widget.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@
* the Apache License 2.0. The full license can be found in the LICENSE file.
*
*/
@import (reference) "~@finos/perspective-viewer/src/themes/material-dense.less";
@import (reference) "~@finos/perspective-viewer/src/themes/material-dense.dark.less";

div.PSPContainer {
@import (less) "../../../perspective-viewer/src/themes/material-dense.less";
div.PSPContainer {
.perspective-viewer-material-dense()
}

div.PSPContainer-dark {
@import (less) "../../../perspective-viewer/src/themes/material-dense.dark.less";
.perspective-viewer-material-dense-dark()
}
3 changes: 2 additions & 1 deletion packages/perspective-phosphor/src/theme/vaporwave/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "../material/material-phosphor.less";
@import (reference) "~@finos/perspective-viewer/dist/themes/vaporwave.less";

.p-DockPanel {
background-color: #150442;
Expand All @@ -21,7 +22,7 @@ div.PSPContainer perspective-viewer[settings] {
}

div.PSPContainer, div.PSPContainer-dark {
@import "~@finos/perspective-viewer/dist/themes/vaporwave.less";
.perspective-viewer-vaporwave()
}

div.PSPContainer {
Expand Down
17 changes: 15 additions & 2 deletions packages/perspective-viewer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,23 @@
"name": "@finos/perspective-viewer",
"version": "0.4.0-rc.4",
"description": "Perspective.js",
"main": "dist/cjs/perspective-viewer.js",
"browser": "dist/cjs/perspective-viewer.js",
"main": "dist/cjs/perspective-viewer.js",
"module": "dist/cjs/perspective-viewer.js",
"unpkg": "dist/umd/perspective-viewer.js",
"browser": {
"themes/all-themes.less": "./dist/themes/all-themes.less",
"themes/all-themes.css": "./dist/umd/all-themes.css",
"themes/material.less": "./dist/themes/material.less",
"themes/material.css": "./dist/umd/material.css",
"themes/material.dark.less": "./dist/themes/material.dark.less",
"themes/material.dark.css": "./dist/umd/material.dark.css",
"themes/vaporwave.less": "./dist/themes/vaporwave.less",
"themes/vaporwave.css": "./dist/umd/vaporwave.css",
"themes/material-dense.less": "./dist/themes/material-dense.less",
"themes/material-dense.css": "./dist/umd/material-dense.css",
"themes/material-dense.dark.less": "./dist/themes/material-dense.dark.less",
"themes/material-dense.dark.css": "./dist/umd/material-dense.dark.css"
},
"files": [
"dist/**/*",
"index.d.ts"
Expand Down
3 changes: 3 additions & 0 deletions packages/perspective-viewer/src/less/fonts.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import (css) url("https://fonts.googleapis.com/css?family=Material+Icons");
@import (css) url("https://fonts.googleapis.com/css?family=Open+Sans");// ~typeface-open-sans/index.css");
@import (css) url("https://fonts.googleapis.com/css?family=Roboto+Mono"); // ~typeface-roboto-mono/index.css");
37 changes: 37 additions & 0 deletions packages/perspective-viewer/src/themes/all-themes.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/******************************************************************************
*
* Copyright (c) 2017, the Perspective Authors.
*
* This file is part of the Perspective library, distributed under the terms of
* the Apache License 2.0. The full license can be found in the LICENSE file.
*
*/

@import "../less/fonts.less";
@import (css) url("https://fonts.googleapis.com/css?family=Orbitron");

@import (reference) "material";
@import (reference) "material-dense";
@import (reference) "material-dense.dark.less";
@import (reference) "material.dark.less";
@import (reference) "vaporwave.less";

.perspective-viewer-material{
.perspective-viewer-material()
}

.perspective-viewer-material-dark{
.perspective-viewer-material-dark()
}

.perspective-viewer-material-dense{
.perspective-viewer-material-dense()
}

.perspective-viewer-material-dense-dark{
.perspective-viewer-material-dense-dark()
}

.perspective-viewer-vaporwave{
.perspective-viewer-vaporwave()
}
11 changes: 8 additions & 3 deletions packages/perspective-viewer/src/themes/material-dense.dark.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
*
*/

@import "../less/variables";
@import "./material.dark.less";
@import "./material-dense.less";
@import "../less/fonts";
@import (reference) "./material.dark.less";
@import (reference) "./material-dense.less";

perspective-viewer, .perspective-viewer-material-dense-dark{
.perspective-viewer-material-dark();
.perspective-viewer-material-dense-base();
}
27 changes: 16 additions & 11 deletions packages/perspective-viewer/src/themes/material-dense.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,22 @@
*
*/

@import "../less/variables";
@import "material";
@import "../less/fonts";
@import (reference) "material";

perspective-viewer {
--hypergrid--padding: 12px 12px 12px 12px;
--hypergrid-row--height: 20px;
--side_panel--padding: 12px 12px 12px 10px;
--top_panel--padding: 0px 0px 12px 0px;
--column-drop-container--margin: 12px 12px 0px 0px;
--column-container--margin: 12px 0px 0px 0px;
--row_draggable--animation: none;
--button--padding: 1px 9px;
perspective-viewer, .perspective-viewer-material-dense{
.perspective-viewer-material();
.perspective-viewer-material-dense-base();
}

.perspective-viewer-material-dense-base(){
--hypergrid--padding: 12px 12px 12px 12px;
--hypergrid-row--height: 20px;
--side_panel--padding: 12px 12px 12px 10px;
--top_panel--padding: 0px 0px 12px 0px;
--column-drop-container--margin: 12px 12px 0px 0px;
--column-container--margin: 12px 0px 0px 0px;
--row_draggable--animation: none;
--button--padding: 1px 9px;
}

14 changes: 4 additions & 10 deletions packages/perspective-viewer/src/themes/material.dark.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,13 @@
*
*/

@import "../less/fonts";
@import "../less/variables";
@import "material";
@import (reference) "material";

@import (css) url("https://fonts.googleapis.com/css?family=Open+Sans");
@import (css) url("https://fonts.googleapis.com/css?family=Material+Icons");
@import (css) url("https://fonts.googleapis.com/css?family=Roboto+Mono");

perspective-viewer {
perspective-viewer, .perspective-viewer-material-dark{
.perspective-viewer-material-base();
background-color: @coolgrey800;
color: #cfd8dc;

Expand All @@ -39,11 +38,6 @@ perspective-viewer {
--hypergrid-positive--color: @lightblue600;
--hypergrid-negative--color: rgb(255, 136, 136);

--hypergrid--font-size: 12px;
--hypergrid-header--font-size: 12px;
--hypergrid--font-family: "Open Sans";
--hypergrid-header--font-family: "Open Sans";

--hypergrid-row-hover--background: #555;
--hypergrid-row-hover--color: #eee;
--hypergrid-cell-hover--background: #444;
Expand Down
26 changes: 13 additions & 13 deletions packages/perspective-viewer/src/themes/material.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,26 @@
*
*/

@import "../less/fonts";
@import "../less/variables";

@import (css) url("https://fonts.googleapis.com/css?family=Material+Icons");
@import (css) url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");// ~typeface-open-sans/index.css");
@import (css) url("https://fonts.googleapis.com/css?family=Roboto+Mono"); // ~typeface-roboto-mono/index.css");
perspective-viewer, .perspective-viewer-material{
.perspective-viewer-material-base();
--active--color: @blue800;

--hypergrid--color: #666;
--hypergrid--background: #fff;

--hypergrid-positive--color: #1078d1;
--hypergrid-negative--color: #de3838;
}

perspective-viewer {
.perspective-viewer-material-base(){
font-family: "Open Sans";

--interface-monospace--font-family: "Roboto Mono";
--inactive-column-selector--content: "\E835";
--active-column-selector--content: "\E834";
--active--color: @blue800;
--column--background: none;
--column--height: 21px;
--active-column--height: 51px;
Expand Down Expand Up @@ -76,8 +83,6 @@ perspective-viewer {
--column_selector--font-size: 16px;

--hypergrid-gridline--color: #ddd;

--hypergrid--color: #666;
--hypergrid--padding: 24px;
--side_panel--padding: 24px 24px 24px 17px;
--button--padding: 24px 17px 0px 17px;
Expand All @@ -87,11 +92,6 @@ perspective-viewer {
--hypergrid-scrollbar--width: 8px;
--hypergrid-scrollbar--border-radius: 5px;

--hypergrid--background: #fff;

--hypergrid-positive--color: #1078d1;
--hypergrid-negative--color: #de3838;

--hypergrid--font-size: 12px;
--hypergrid-header--font-size: 12px;
--hypergrid--font-family: "Open Sans";
Expand All @@ -100,4 +100,4 @@ perspective-viewer {
--hypergrid-selection--background: rgba(0, 0, 0, 0.1);

--d3fc-treedata-axis--lines: none;
}
}
5 changes: 3 additions & 2 deletions packages/perspective-viewer/src/themes/vaporwave.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

@import "../less/variables";
@import "material";
@import (reference) "material";

@import (css) url("https://fonts.googleapis.com/css?family=Material+Icons");
@import (css) url("https://fonts.googleapis.com/css?family=Roboto+Mono");
Expand All @@ -23,7 +23,8 @@ perspective-viewer[settings] {
--settings-button--content: "check_box_outline_blank";
}

perspective-viewer {
perspective-viewer, .perspective-viewer-vaporwave{
.perspective-viewer-material-base();
padding: 24px;
background-color: @background;
color: #cfd8dc;
Expand Down

0 comments on commit 88c58df

Please sign in to comment.