Merge 3a6fc1c into 54ab80e

deprecate · Dec 19, 2017 · ae01449 · ae01449
2 parents 54ab80e + 3a6fc1c
commit ae01449
Show file tree

Hide file tree

Showing 10 changed files with 272 additions and 113 deletions.
diff --git a/packages/clay-charts/demos/index.html b/packages/clay-charts/demos/index.html
@@ -5,6 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Demo: Clay Charts</title>
 
+	<link rel="stylesheet" href="../../../node_modules/clay/build/css/atlas.css">
 	<link rel="stylesheet" href="../build/clay-charts.css">
 
 	<script src="../build/globals/clay-charts.js"></script>
@@ -25,8 +26,60 @@
 			padding: 10px;
 		}
 	</style>
+
+
 </head>
 <body>
+
+	<svg>
+		<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>
+		</defs>
+	</svg>
+
 	<h1>Clay Charts</h1>
 
 	<p>See <a href="https://naver.github.io/billboard.js/demo/">billboard.js</a> for more examples.</p>
@@ -86,8 +139,6 @@ <h2>Gauge</h2>
 		<div id="gauge"></div>
 	</div>
 
-
-
 	<div id="controls" style="display: none;">
 		<label>
 			Change type:
@@ -214,12 +265,24 @@ <h2>Gauge</h2>
 			],
 			columns_4: [
 				{
-					data: [50],
+					data: [10],
 					id: 'data1'
 				},
 				{
 					data: [50],
 					id: 'data2'
+				},
+				{
+					data: [20],
+					id: 'data3'
+				},
+        {
+          data: [15],
+          id: 'data4'
+        },
+				{
+					data: [5],
+					id: 'data5'
 				}
 			]
 		};
@@ -295,12 +358,21 @@ <h2>Gauge</h2>
 		createChartControls(scatterChart, 'scatter');
 
 		var pieChart = new metal.PieChart({
-			columns: dummyPercentData.columns_1
+			columns: dummyPercentData.columns_1,
+			color: {
+				tiles() {
+					return [
+						document.querySelector('#circles'),
+						document.querySelector('#horizontal-large'),
+						document.querySelector('#vertical-small'),
+					];
+				}
+			}
 		}, '#pie');
 		createChartControls(pieChart, 'pie', dummyPercentData);
 
 		var donutChart = new metal.DonutChart({
-			columns: dummyPercentData.columns_1
+			columns: dummyPercentData.columns_1,
 		}, '#donut');
 		createChartControls(donutChart, 'donut', dummyPercentData);
 

diff --git a/packages/clay-charts/demos/jsx.html b/packages/clay-charts/demos/jsx.html
@@ -5,6 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Demo: Clay Charts</title>
 
+	<link rel="stylesheet" href="../../../node_modules/clay/build/css/atlas.css">
 	<link rel="stylesheet" href="../build/clay-charts.css">
 
 	<script src="../build/globals/clay-charts-jsx.js"></script>
@@ -27,6 +28,56 @@
 	</style>
 </head>
 <body>
+
+	<svg>
+		<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>
+		</defs>
+	</svg>
+
 	<h1>Clay Charts</h1>
 
 	<p>See <a href="https://naver.github.io/billboard.js/demo/">billboard.js</a> for more examples.</p>

diff --git a/packages/clay-charts/package.json b/packages/clay-charts/package.json
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "billboard.js": "^1.0.1",
+    "billboard.js": "^1.2.0",
     "d3": "^4.10.0",
     "metal-component": "^2.13.2",
     "metal-jsx": "^2.13.2",

diff --git a/packages/clay-charts/src/Chart.soy b/packages/clay-charts/src/Chart.soy
@@ -31,104 +31,7 @@
  * This renders the component's loading graphic.
  */
 {template .loading}
-	<svg viewBox="0 0 770 320" xmlns="http://www.w3.org/2000/svg" >
-		<g transform="translate(40.5, 4.5)">
-			<g class="bb-axis bb-axis-x" transform="translate(0, 266)">
-				<g class="tick" transform="translate(8, 0)" >
-					<line y2="6" x1="0" x2="0" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text y="9" x="0" transform="" style="text-anchor: middle; display: block;font: 10px sans-serif;">
-						<tspan x="0" dy=".71em" dx="0">0</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(150, 0)" >
-					<line y2="6" x1="0" x2="0" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text y="9" x="0" transform="" style="text-anchor: middle; display: block;font: 10px sans-serif;">
-						<tspan x="0" dy=".71em" dx="0">1</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(293, 0)" >
-					<line y2="6" x1="0" x2="0" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text y="9" x="0" transform="" style="text-anchor: middle; display: block;font: 10px sans-serif;">
-						<tspan x="0" dy=".71em" dx="0">2</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(435, 0)" >
-					<line y2="6" x1="0" x2="0" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text y="9" x="0" transform="" style="text-anchor: middle; display: block;font: 10px sans-serif;">
-						<tspan x="0" dy=".71em" dx="0">3</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(578, 0)" >
-					<line y2="6" x1="0" x2="0" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text y="9" x="0" transform="" style="text-anchor: middle; display: block;font: 10px sans-serif;">
-						<tspan x="0" dy=".71em" dx="0">4</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(720, 0)" >
-					<line y2="6" x1="0" x2="0" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text y="9" x="0" transform="" style="text-anchor: middle; display: block;font: 10px sans-serif;">
-						<tspan x="0" dy=".71em" dx="0">5</tspan>
-					</text>
-				</g>
-				<path class="domain" d="M0,6V0H727V6" style="fill: none;stroke: #000;stroke-width: 1px;"></path>
-			</g>
-			<g class="bb-axis bb-axis-y" transform="translate(0, 0)">
-				<g class="tick" transform="translate(0,250)" >
-					<line x2="-6" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text x="-9" y="0" style="text-anchor: end;font: 10px sans-serif;">
-						<tspan x="-9" dy="3">0</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(0,222)" >
-					<line x2="-6" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text x="-9" y="0" style="text-anchor: end;font: 10px sans-serif;">
-						<tspan x="-9" dy="3">50</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(0,193)" >
-					<line x2="-6" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text x="-9" y="0" style="text-anchor: end;font: 10px sans-serif;">
-						<tspan x="-9" dy="3">100</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(0,165)" >
-					<line x2="-6" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text x="-9" y="0" style="text-anchor: end;font: 10px sans-serif;">
-						<tspan x="-9" dy="3">150</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(0,137)" >
-					<line x2="-6" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text x="-9" y="0" style="text-anchor: end;font: 10px sans-serif;">
-						<tspan x="-9" dy="3">200</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(0,109)" >
-					<line x2="-6" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text x="-9" y="0" style="text-anchor: end;font: 10px sans-serif;">
-						<tspan x="-9" dy="3">250</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(0,80)" >
-					<line x2="-6" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text x="-9" y="0" style="text-anchor: end;font: 10px sans-serif;">
-						<tspan x="-9" dy="3">300</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(0,52)" >
-					<line x2="-6" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text x="-9" y="0" style="text-anchor: end;font: 10px sans-serif;">
-						<tspan x="-9" dy="3">350</tspan>
-					</text>
-				</g>
-				<g class="tick" transform="translate(0,24)" >
-					<line x2="-6" style="fill: none;stroke: #000;stroke-width: 1px;"></line>
-					<text x="-9" y="0" style="text-anchor: end;font: 10px sans-serif;">
-						<tspan x="-9" dy="3">400</tspan>
-					</text>
-				</g>
-				<path class="domain" d="M-6,1H0V266H-6" style="fill: none;stroke: #000;stroke-width: 1px;"></path>
-			</g>
-		</g>
-	</svg>
+	<div aria-hidden="true" class="loading-icon loading-icon-dotted">
+		<span class="loading-icon-indicator"></span>
+	</div>
 {/template}
diff --git a/packages/clay-charts/src/ChartBase.js b/packages/clay-charts/src/ChartBase.js
@@ -24,6 +24,30 @@ const DEFAULT_COLORS = [
 	'#5FC8FF',
 ];
 
+const DEFAULT_LINE_CASSES = [
+	'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',
+];
+
+const DEFAULT_PATTERNS = [
+	'circles',
+	'diagonal-left-large',
+	'diagonal-left-small',
+	'diagonal-right-large',
+	'diagonal-right-small',
+	'horizontal-large',
+	'horizontal-small',
+	'vertical-large',
+	'vertical-small',
+];
+
 /**
  * Chart Base prototype.
  *
@@ -36,6 +60,14 @@ const ChartBase = {
 	attached: function() {
 		const config = this.constructChartConfig_();
 
+		const existingPatterns = DEFAULT_PATTERNS.filter(val => {
+			return document.querySelector(`#${val}`);
+		}).map(val => document.querySelector(`#${val}`));
+
+		if (existingPatterns.length > 0) {
+			config.color.tiles = () => existingPatterns;
+		}
+
 		this.bbChart = bb.generate(config);
 
 		this.on('columnsChanged', this.handleColumnsChanged_.bind(this));
@@ -598,9 +630,9 @@ ChartBase.STATE = {
 			value: Config.array(),
 			max: Config.number(),
 		}),
+		tiles: Config.func(),
 	}).value({
 		pattern: DEFAULT_COLORS,
-		threshhold: null,
 	}),
 
 	/**
@@ -861,10 +893,13 @@ ChartBase.STATE = {
 	 * @default undefined
 	 */
 	line: Config.shapeOf({
+		classes: Config.array(),
 		connectNull: Config.bool(),
 		step: Config.shapeOf({
 			type: Config.oneOf(['step', 'step-after', 'step-before']),
 		}),
+	}).value({
+		classes: DEFAULT_LINE_CASSES,
 	}),
 
 	/**

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\\"],\\"threshhold\\":null},\\"data\\":{\\"colors\\":{},\\"hide\\":false,\\"order\\":\\"desc\\",\\"type\\":\\"line\\",\\"columns\\":[]},\\"grid\\":{\\"x\\":{\\"show\\":true},\\"y\\":{\\"show\\":true}},\\"loading\\":false,\\"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\\":false,\\"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\\"],\\"threshhold\\":null},\\"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}},\\"loading\\":false,\\"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,\\"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]]}"`;