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

Commit

Permalink
Change loading to loading_
Browse files Browse the repository at this point in the history
  • Loading branch information
Julien Castelain committed Jan 10, 2018
1 parent 0ebb471 commit d5648c5
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 18 deletions.
2 changes: 1 addition & 1 deletion .soycriticrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@
}
],
"implicitParams": {
"Chart*": ["loading"]
"Chart*": ["loading_"]
}
}
14 changes: 9 additions & 5 deletions packages/clay-charts/src/Chart.soy
View file
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
15 changes: 5 additions & 10 deletions packages/clay-charts/src/ChartBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,6 @@ const DEFAULT_POINT_PATTERNS = [
* @mixin
*/
const ChartBase = {
/**
* @inheritDoc
*/
created() {
this.loading = true;
},

/**
* @inheritDoc
*/
Expand All @@ -91,13 +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;
this.loading_ = false;
},

/**
Expand Down Expand Up @@ -926,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
4 changes: 2 additions & 2 deletions packages/clay-charts/src/__tests__/__snapshots__/Chart.js.snap
View file
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\\":true,\\"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\\":true,\\"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

0 comments on commit d5648c5

Please sign in to comment.