Add loading indicator styles

deprecate · Jan 10, 2018 · 0ebb471 · 0ebb471
1 parent 5a85f33
commit 0ebb471
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 53 deletions.
diff --git a/packages/clay-charts/demos/index.html b/packages/clay-charts/demos/index.html
@@ -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>
 
@@ -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];
 			});
 

diff --git a/packages/clay-charts/package.json b/packages/clay-charts/package.json
@@ -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",

diff --git a/packages/clay-charts/src/ChartBase.js b/packages/clay-charts/src/ChartBase.js
@@ -69,7 +69,14 @@ const ChartBase = {
 	/**
 	 * @inheritDoc
 	 */
-	attached: function() {
+	created() {
+		this.loading = true;
+	},
+
+	/**
+	 * @inheritDoc
+	 */
+	attached() {
 		const config = this.constructChartConfig_();
 
 		const existingTiles = DEFAULT_TILES.filter(val => {
@@ -89,6 +96,8 @@ const ChartBase = {
 		this.on('sizeChanged', this.handleSizeChanged_.bind(this));
 		this.on('typeChanged', this.handleTypeChanged_.bind(this));
 		this.on('xChanged', this.handleXChanged_.bind(this));
+
+		this.loading = false;
 	},
 
 	/**

diff --git a/packages/clay-charts/src/__tests__/__snapshots__/Chart.js.snap b/packages/clay-charts/src/__tests__/__snapshots__/Chart.js.snap
@@ -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\\"]},\\"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\\"]},\\"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\\"]},\\"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 rerender chart when new columns are passed 1`] = `"{\\"colors\\":{},\\"hide\\":false,\\"order\\":\\"desc\\",\\"type\\":\\"line\\",\\"columns\\":[[\\"data1\\",1,2,3,4]]}"`;
 

diff --git a/packages/clay-charts/src/scss/components/_loading.scss b/packages/clay-charts/src/scss/components/_loading.scss
@@ -0,0 +1,8 @@
+.loading-icon {
+	min-height: 320px;
+
+	.loading-icon-indicator {
+		top: 50%;
+		transform: scale(0.33334) translateY(-100%);
+	}
+}
diff --git a/packages/clay-charts/src/scss/main.scss b/packages/clay-charts/src/scss/main.scss
@@ -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";

diff --git a/yarn.lock b/yarn.lock
@@ -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"