Skip to content
This repository has been archived by the owner on Jan 16, 2018. It is now read-only.

Add loading indicator styles #251

Merged
merged 2 commits into from
Jan 10, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .soycriticrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@
}
],
"implicitParams": {
"Chart*": ["loading"]
"Chart*": ["loading_"]
}
}
92 changes: 47 additions & 45 deletions packages/clay-charts/demos/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,52 +31,52 @@
</head>
<body>

<svg>
<svg style="display:none">
<defs>
<pattern id="circles" patternUnits="userSpaceOnUse" width="16" height="16" style="fill:rgba(0,0,0,0.3)">
<circle cx="4" cy="4" r="2"/>
<circle cx="12" cy="12" r="2"/>
</pattern>

<pattern id="diagonal-left-large" patternUnits="userSpaceOnUse" width="10" height="10" style="fill:rgba(0,0,0,0.3)">
<polygon points="9.3,0 10,0.7 10,0 "/>
<polygon points="0,0 0,0.7 9.3,10 10,10 10,9.3 0.7,0 "/>
<polygon points="0,9.3 0,10 0.7,10 "/>
</pattern>

<pattern id="diagonal-left-small" patternUnits="userSpaceOnUse" width="5" height="5" style="fill:rgba(0,0,0,0.3)">
<polygon points="5,0 4.3,0 5,0.7 "/>
<polygon points="0.7,0 0,0 0,0.7 4.3,5 5,5 5,4.3 "/>
<polygon points="0,4.3 0,5 0.7,5 "/>
</pattern>

<pattern id="diagonal-right-large" patternUnits="userSpaceOnUse" width="10" height="10" style="fill:rgba(0,0,0,0.3)">
<polygon points="10,9.3 9.3,10 10,10 "/>
<polygon points="10,0 9.3,0 0,9.3 0,10 0.7,10 10,0.7 "/>
<polygon points="0.7,0 0,0 0,0.7 "/>
</pattern>

<pattern id="diagonal-right-small" patternUnits="userSpaceOnUse" width="5" height="5" style="fill:rgba(0,0,0,0.3)">
<polygon points="5,4.3 4.3,5 5,5 "/>
<polygon points="5,0 4.3,0 0,4.3 0,5 0.7,5 5,0.7 "/>
<polygon points="0.7,0 0,0 0,0.7 "/>
</pattern>

<pattern id="horizontal-large" patternUnits="userSpaceOnUse" width="8" height="8" style="fill:rgba(0,0,0,0.3)">
<rect y="7" width="8" height="1"/>
</pattern>

<pattern id="horizontal-small" patternUnits="userSpaceOnUse" width="4" height="4" style="fill:rgba(0,0,0,0.3)">
<rect y="3" width="4" height="1"/>
</pattern>

<pattern id="vertical-large" patternUnits="userSpaceOnUse" width="8" height="8" style="fill:rgba(0,0,0,0.3)">
<rect x="7" y="0" width="1" height="8"/>
</pattern>

<pattern id="vertical-small" patternUnits="userSpaceOnUse" width="4" height="4" style="fill:rgba(0,0,0,0.3)">
<rect x="3" width="1" height="4"/>
</pattern>
<pattern id="circles" patternUnits="userSpaceOnUse" width="16" height="16" style="fill:rgba(0,0,0,0.3)">
<circle cx="4" cy="4" r="2"/>
<circle cx="12" cy="12" r="2"/>
</pattern>

<pattern id="diagonal-left-large" patternUnits="userSpaceOnUse" width="10" height="10" style="fill:rgba(0,0,0,0.3)">
<polygon points="9.3,0 10,0.7 10,0 "/>
<polygon points="0,0 0,0.7 9.3,10 10,10 10,9.3 0.7,0 "/>
<polygon points="0,9.3 0,10 0.7,10 "/>
</pattern>

<pattern id="diagonal-left-small" patternUnits="userSpaceOnUse" width="5" height="5" style="fill:rgba(0,0,0,0.3)">
<polygon points="5,0 4.3,0 5,0.7 "/>
<polygon points="0.7,0 0,0 0,0.7 4.3,5 5,5 5,4.3 "/>
<polygon points="0,4.3 0,5 0.7,5 "/>
</pattern>

<pattern id="diagonal-right-large" patternUnits="userSpaceOnUse" width="10" height="10" style="fill:rgba(0,0,0,0.3)">
<polygon points="10,9.3 9.3,10 10,10 "/>
<polygon points="10,0 9.3,0 0,9.3 0,10 0.7,10 10,0.7 "/>
<polygon points="0.7,0 0,0 0,0.7 "/>
</pattern>

<pattern id="diagonal-right-small" patternUnits="userSpaceOnUse" width="5" height="5" style="fill:rgba(0,0,0,0.3)">
<polygon points="5,4.3 4.3,5 5,5 "/>
<polygon points="5,0 4.3,0 0,4.3 0,5 0.7,5 5,0.7 "/>
<polygon points="0.7,0 0,0 0,0.7 "/>
</pattern>

<pattern id="horizontal-large" patternUnits="userSpaceOnUse" width="8" height="8" style="fill:rgba(0,0,0,0.3)">
<rect y="7" width="8" height="1"/>
</pattern>

<pattern id="horizontal-small" patternUnits="userSpaceOnUse" width="4" height="4" style="fill:rgba(0,0,0,0.3)">
<rect y="3" width="4" height="1"/>
</pattern>

<pattern id="vertical-large" patternUnits="userSpaceOnUse" width="8" height="8" style="fill:rgba(0,0,0,0.3)">
<rect x="7" y="0" width="1" height="8"/>
</pattern>

<pattern id="vertical-small" patternUnits="userSpaceOnUse" width="4" height="4" style="fill:rgba(0,0,0,0.3)">
<rect x="3" width="1" height="4"/>
</pattern>
</defs>
</svg>

Expand Down Expand Up @@ -394,12 +394,14 @@ <h2>Gauge</h2>
typeSelect.value = type;

typeSelect.addEventListener('change', function(event) {
chart.loading = false;
chart.type = typeSelect.value;
});

var dataSelect = chartControls.querySelector('.data');

dataSelect.addEventListener('change', function(event) {
chart.loading = false;
chart.columns = data ? data[dataSelect.value] : dummyData[dataSelect.value];
});

Expand Down
2 changes: 1 addition & 1 deletion packages/clay-charts/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"babel-preset-metal": "^4.0.0",
"babel-preset-metal-jsx": "^0.1.1",
"browserslist-config-clay-components": "^1.0.0-alpha.2",
"clay": "^2.0.0-beta.4",
"clay": "^2.0.0-beta.5",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.1",
"metal-tools-soy": "^4.2.1",
Expand Down
14 changes: 9 additions & 5 deletions packages/clay-charts/src/Chart.soy
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,28 @@
* This renders the component's whole content.
*/
{template .render}
{@param? loading: bool}
{@param? loading_: bool}

<div class="metal-chart-container">
{let $chartAttrs kind="attributes"}
{if $loading}
{if $loading_}
hidden
{/if}

ref="chart"
{/let}

<div class="metal-chart" ref="chart" {$chartAttrs}></div>
<div class="metal-chart" {$chartAttrs}></div>

{let $placeholderAttrs kind="attributes"}
{if not $loading}
{if not $loading_}
hidden
{/if}

ref="placeholder"
{/let}

<div ref="placeholder" {$placeholderAttrs}>
<div {$placeholderAttrs}>
{call .loading /}
</div>
</div>
Expand Down
10 changes: 7 additions & 3 deletions packages/clay-charts/src/ChartBase.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const ChartBase = {
/**
* @inheritDoc
*/
attached: function() {
attached() {
const config = this.constructChartConfig_();

const existingTiles = DEFAULT_TILES.filter(val => {
Expand All @@ -84,11 +84,13 @@ const ChartBase = {

this.on('columnsChanged', this.handleColumnsChanged_.bind(this));
this.on('groupsChanged', this.handleGroupsChanged_.bind(this));
this.on('loadingChanged', this.handleLoadingChanged_.bind(this));
this.on('loading_Changed', this.handleLoadingChanged_.bind(this));
this.on('regionsChanged', this.handleRegionsChanged_.bind(this));
this.on('sizeChanged', this.handleSizeChanged_.bind(this));
this.on('typeChanged', this.handleTypeChanged_.bind(this));
this.on('xChanged', this.handleXChanged_.bind(this));

this.loading_ = false;
},

/**
Expand Down Expand Up @@ -917,7 +919,9 @@ ChartBase.STATE = {
/**
* Sets the `loading` state.
*/
loading: Config.bool().value(false),
loading_: Config.bool()
.internal()
.value(true),

/**
* Sets billboard's data.mimeType config.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Chart should be pass correctly formatted configuration options to billboard.js 1`] = `"{\\"axis\\":{},\\"color\\":{\\"pattern\\":[\\"#4B9BFF\\",\\"#FFD76E\\",\\"#FF5F5F\\",\\"#9CE269\\",\\"#AF78FF\\",\\"#50D2A0\\",\\"#FF73C3\\",\\"#FFB64E\\",\\"#5FC8FF\\"]},\\"data\\":{\\"colors\\":{},\\"hide\\":false,\\"order\\":\\"desc\\",\\"type\\":\\"line\\",\\"columns\\":[]},\\"grid\\":{\\"x\\":{\\"show\\":true},\\"y\\":{\\"show\\":true}},\\"line\\":{\\"classes\\":[\\"bb-line-dashed-2-2\\",\\"bb-line-dashed-2-3\\",\\"bb-line-dashed-2-4\\",\\"bb-line-dashed-3-2\\",\\"bb-line-dashed-3-3\\",\\"bb-line-dashed-3-4\\",\\"bb-line-dashed-4-2\\",\\"bb-line-dashed-4-3\\",\\"bb-line-dashed-4-4\\"]},\\"loading\\":false,\\"point\\":{\\"pattern\\":[\\"circle\\",\\"rectangle\\",\\"<polygon points=\\\\\\"2.5 0 0 5 5 5\\\\\\"></polygon>\\",\\"<polygon points=\\\\\\"2.5 0 0 2.5 2.5 5 5 2.5\\\\\\"></polygon>\\",\\"<polygon points=\\\\\\"0 0 2.5 5 5 0\\\\\\"></polygon>\\",\\"<path d=\\\\\\"M5,5 a1,1 0 1,1 5,0\\\\\\">\\",\\"<path d=\\\\\\"M0,0 a1,1 0 0,0 5,0\\\\\\">\\",\\"<rect width=\\\\\\"5\\\\\\" height=\\\\\\"2.5\\\\\\"></rect>\\",\\"<rect width=\\\\\\"2.5\\\\\\" height=\\\\\\"5\\\\\\"></rect>\\"]},\\"zoom\\":{}}"`;
exports[`Chart should be pass correctly formatted configuration options to billboard.js 1`] = `"{\\"axis\\":{},\\"color\\":{\\"pattern\\":[\\"#4B9BFF\\",\\"#FFD76E\\",\\"#FF5F5F\\",\\"#9CE269\\",\\"#AF78FF\\",\\"#50D2A0\\",\\"#FF73C3\\",\\"#FFB64E\\",\\"#5FC8FF\\"]},\\"data\\":{\\"colors\\":{},\\"hide\\":false,\\"order\\":\\"desc\\",\\"type\\":\\"line\\",\\"columns\\":[]},\\"grid\\":{\\"x\\":{\\"show\\":true},\\"y\\":{\\"show\\":true}},\\"line\\":{\\"classes\\":[\\"bb-line-dashed-2-2\\",\\"bb-line-dashed-2-3\\",\\"bb-line-dashed-2-4\\",\\"bb-line-dashed-3-2\\",\\"bb-line-dashed-3-3\\",\\"bb-line-dashed-3-4\\",\\"bb-line-dashed-4-2\\",\\"bb-line-dashed-4-3\\",\\"bb-line-dashed-4-4\\"]},\\"point\\":{\\"pattern\\":[\\"circle\\",\\"rectangle\\",\\"<polygon points=\\\\\\"2.5 0 0 5 5 5\\\\\\"></polygon>\\",\\"<polygon points=\\\\\\"2.5 0 0 2.5 2.5 5 5 2.5\\\\\\"></polygon>\\",\\"<polygon points=\\\\\\"0 0 2.5 5 5 0\\\\\\"></polygon>\\",\\"<path d=\\\\\\"M5,5 a1,1 0 1,1 5,0\\\\\\">\\",\\"<path d=\\\\\\"M0,0 a1,1 0 0,0 5,0\\\\\\">\\",\\"<rect width=\\\\\\"5\\\\\\" height=\\\\\\"2.5\\\\\\"></rect>\\",\\"<rect width=\\\\\\"2.5\\\\\\" height=\\\\\\"5\\\\\\"></rect>\\"]},\\"zoom\\":{}}"`;

exports[`Chart should format columns array into billboard.js compatible data 1`] = `"{\\"axis\\":{},\\"color\\":{\\"pattern\\":[\\"#4B9BFF\\",\\"#FFD76E\\",\\"#FF5F5F\\",\\"#9CE269\\",\\"#AF78FF\\",\\"#50D2A0\\",\\"#FF73C3\\",\\"#FFB64E\\",\\"#5FC8FF\\"]},\\"data\\":{\\"colors\\":{\\"data1\\":\\"red\\",\\"data2\\":\\"blue\\"},\\"hide\\":[\\"data1\\"],\\"order\\":\\"desc\\",\\"type\\":\\"line\\",\\"xs\\":{\\"data1\\":\\"x1\\",\\"data2\\":\\"x2\\"},\\"columns\\":[[\\"data1\\",1,2,3],[\\"data2\\",1,2,3]],\\"axes\\":{\\"data1\\":\\"y\\",\\"data2\\":\\"y2\\"},\\"classes\\":{\\"data1\\":\\"data1\\",\\"data2\\":\\"data2\\"},\\"names\\":{\\"data1\\":\\"Data 1\\",\\"data2\\":\\"Data 2\\"},\\"regions\\":{\\"data1\\":[{\\"end\\":2,\\"start\\":1,\\"style\\":\\"dashed\\"}],\\"data2\\":[{\\"end\\":3,\\"start\\":2,\\"style\\":\\"dashed\\"}]},\\"types\\":{\\"data1\\":\\"line\\",\\"data2\\":\\"spline\\"}},\\"grid\\":{\\"x\\":{\\"show\\":true},\\"y\\":{\\"show\\":true}},\\"line\\":{\\"classes\\":[\\"bb-line-dashed-2-2\\",\\"bb-line-dashed-2-3\\",\\"bb-line-dashed-2-4\\",\\"bb-line-dashed-3-2\\",\\"bb-line-dashed-3-3\\",\\"bb-line-dashed-3-4\\",\\"bb-line-dashed-4-2\\",\\"bb-line-dashed-4-3\\",\\"bb-line-dashed-4-4\\"]},\\"loading\\":false,\\"point\\":{\\"pattern\\":[\\"circle\\",\\"rectangle\\",\\"<polygon points=\\\\\\"2.5 0 0 5 5 5\\\\\\"></polygon>\\",\\"<polygon points=\\\\\\"2.5 0 0 2.5 2.5 5 5 2.5\\\\\\"></polygon>\\",\\"<polygon points=\\\\\\"0 0 2.5 5 5 0\\\\\\"></polygon>\\",\\"<path d=\\\\\\"M5,5 a1,1 0 1,1 5,0\\\\\\">\\",\\"<path d=\\\\\\"M0,0 a1,1 0 0,0 5,0\\\\\\">\\",\\"<rect width=\\\\\\"5\\\\\\" height=\\\\\\"2.5\\\\\\"></rect>\\",\\"<rect width=\\\\\\"2.5\\\\\\" height=\\\\\\"5\\\\\\"></rect>\\"]},\\"zoom\\":{}}"`;
exports[`Chart should format columns array into billboard.js compatible data 1`] = `"{\\"axis\\":{},\\"color\\":{\\"pattern\\":[\\"#4B9BFF\\",\\"#FFD76E\\",\\"#FF5F5F\\",\\"#9CE269\\",\\"#AF78FF\\",\\"#50D2A0\\",\\"#FF73C3\\",\\"#FFB64E\\",\\"#5FC8FF\\"]},\\"data\\":{\\"colors\\":{\\"data1\\":\\"red\\",\\"data2\\":\\"blue\\"},\\"hide\\":[\\"data1\\"],\\"order\\":\\"desc\\",\\"type\\":\\"line\\",\\"xs\\":{\\"data1\\":\\"x1\\",\\"data2\\":\\"x2\\"},\\"columns\\":[[\\"data1\\",1,2,3],[\\"data2\\",1,2,3]],\\"axes\\":{\\"data1\\":\\"y\\",\\"data2\\":\\"y2\\"},\\"classes\\":{\\"data1\\":\\"data1\\",\\"data2\\":\\"data2\\"},\\"names\\":{\\"data1\\":\\"Data 1\\",\\"data2\\":\\"Data 2\\"},\\"regions\\":{\\"data1\\":[{\\"end\\":2,\\"start\\":1,\\"style\\":\\"dashed\\"}],\\"data2\\":[{\\"end\\":3,\\"start\\":2,\\"style\\":\\"dashed\\"}]},\\"types\\":{\\"data1\\":\\"line\\",\\"data2\\":\\"spline\\"}},\\"grid\\":{\\"x\\":{\\"show\\":true},\\"y\\":{\\"show\\":true}},\\"line\\":{\\"classes\\":[\\"bb-line-dashed-2-2\\",\\"bb-line-dashed-2-3\\",\\"bb-line-dashed-2-4\\",\\"bb-line-dashed-3-2\\",\\"bb-line-dashed-3-3\\",\\"bb-line-dashed-3-4\\",\\"bb-line-dashed-4-2\\",\\"bb-line-dashed-4-3\\",\\"bb-line-dashed-4-4\\"]},\\"point\\":{\\"pattern\\":[\\"circle\\",\\"rectangle\\",\\"<polygon points=\\\\\\"2.5 0 0 5 5 5\\\\\\"></polygon>\\",\\"<polygon points=\\\\\\"2.5 0 0 2.5 2.5 5 5 2.5\\\\\\"></polygon>\\",\\"<polygon points=\\\\\\"0 0 2.5 5 5 0\\\\\\"></polygon>\\",\\"<path d=\\\\\\"M5,5 a1,1 0 1,1 5,0\\\\\\">\\",\\"<path d=\\\\\\"M0,0 a1,1 0 0,0 5,0\\\\\\">\\",\\"<rect width=\\\\\\"5\\\\\\" height=\\\\\\"2.5\\\\\\"></rect>\\",\\"<rect width=\\\\\\"2.5\\\\\\" height=\\\\\\"5\\\\\\"></rect>\\"]},\\"zoom\\":{}}"`;

exports[`Chart should rerender chart when new columns are passed 1`] = `"{\\"colors\\":{},\\"hide\\":false,\\"order\\":\\"desc\\",\\"type\\":\\"line\\",\\"columns\\":[[\\"data1\\",1,2,3,4]]}"`;

Expand Down
8 changes: 8 additions & 0 deletions packages/clay-charts/src/scss/components/_loading.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.loading-icon {
min-height: 320px;

.loading-icon-indicator {
top: 50%;
transform: scale(0.33334) translateY(-100%);
}
}
1 change: 1 addition & 0 deletions packages/clay-charts/src/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@import "components/grid";
@import "components/legend";
@import "components/line";
@import "components/loading";
@import "components/point";
@import "components/region";
@import "components/select_drag";
Expand Down
4 changes: 0 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1460,10 +1460,6 @@ class-utils@^0.3.5:
lazy-cache "^2.0.2"
static-extend "^0.1.1"

clay@^2.0.0-beta.4:
version "2.0.0-beta.4"
resolved "https://registry.yarnpkg.com/clay/-/clay-2.0.0-beta.4.tgz#b69f326602ca8e67b41eab5cdc50ecbff9bf9b3b"

clay@^2.0.0-beta.5:
version "2.0.0-beta.5"
resolved "https://registry.yarnpkg.com/clay/-/clay-2.0.0-beta.5.tgz#0a615ea7753d20ecea8236c3e05e7a8f72462639"
Expand Down