forked from predixdesignsystem/px-vis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpx-vis-api-scale.html
56 lines (49 loc) · 2.12 KB
/
px-vis-api-scale.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>px-vis</title>
<!-- Import custom element. Note: see comment about relative paths to dependencies in the *.html file referenced below -->
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../px-theme/px-theme-styles.html">
<style include="px-theme-styles" is="custom-style"></style>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="import" href="demos/px-vis-demo-api.html">
<link rel="import" href="demos/px-vis-scale-demo.html">
</head>
<body>
<template id="just-for-demo" is="dom-bind">
<px-vis-demo-api
component-name="px-vis-scale"
description="{{description}}"
elemprop-line="{{elempropLine}}"
codepen-link="http://codepen.io/menkhakl/pen/GjOVvr"
>
<!--add demo tag-->
<px-vis-scale-demo></px-vis-scale-demo>
</px-vis-demo-api>
</template>
</body>
<script>
var template = document.querySelector('template[is=dom-bind]'),
elempropLine = {
"xAxisType":"time",
"yAxisType":"linear",
"completeSeriesConfig":"[[seriesConfig]]",
"chartExtents":"[[chartExtents]]",
"width":"[[width]]",
"height":"[[height]]",
"margin":"[[margin]]",
"chartData":"{{chartData}}",
"x":"{{x}}",
"y":"{{y}}",
"currentDomainX":"{{currentDomainX}}",
"currentDomainY":"{{currentDomainY}}",
"selectedDomain":"[[selectedDomain]]"
},
description = "All charts need an interpretor component. These cannot be seen but provide the basic framework for drawing objects to be displayed. Interpretor components convert data into drawing space coordinates. The scale component creates 'x' & 'y' and 'currentDomainX' & 'currentDomainY' variables which can be passed into drawing components. Note: All the subsequent charts will have this component, but they will not be shown in the code snippet.";
template.elempropLine = elempropLine;
template.description = description;
</script>
</html>