[example] add time-axis sample

example/dist/index.html

@@ -25,6 +25,7 @@
         <div id="data-with-append"></div>
         <div id="contour"></div>
         <div id="axis"></div>
+        <div id="time-axis"></div>
 
         <!-- NOTE: it's important that this is at the end so that the DOM is ready -->
         <script type="text/javascript" src="/index.fd532818.js"></script>

example/index.html

@@ -25,6 +25,7 @@
         <div id="data-with-append"></div>
         <div id="contour"></div>
         <div id="axis"></div>
+        <div id="time-axis"></div>
 
         <!-- NOTE: it's important that this is at the end so that the DOM is ready -->
         <script type="text/javascript" src="index.js"></script>

example/index.js

@@ -2982,6 +2982,7 @@ var PS = {};
   var domain = function (dict) {
       return dict.domain;
   };
+  exports["Scale"] = Scale;
   exports["linearScale"] = linearScale;
   exports["domain"] = domain;
   exports["range"] = range;
@@ -3071,6 +3072,28 @@ var PS = {};
   exports["existingSelection"] = existingSelection;
   exports["existingUpdate"] = existingUpdate;
 })(PS);
+(function(exports) {
+  /* global exports */
+  "use strict";
+
+  // module Graphics.D3.Time
+
+  exports.scaleTimeImpl = function(d3) { return d3.scaleTime; };
+})(PS["Graphics.D3.Time"] = PS["Graphics.D3.Time"] || {});
+(function($PS) {
+  // Generated by purs version 0.14.1
+  "use strict";
+  $PS["Graphics.D3.Time"] = $PS["Graphics.D3.Time"] || {};
+  var exports = $PS["Graphics.D3.Time"];
+  var $foreign = $PS["Graphics.D3.Time"];
+  var Graphics_D3_Base = $PS["Graphics.D3.Base"];
+  var Graphics_D3_Scale = $PS["Graphics.D3.Scale"];
+  var Graphics_D3_Unsafe = $PS["Graphics.D3.Unsafe"];                
+  var scaleTimeScale = new Graphics_D3_Scale.Scale(Graphics_D3_Unsafe.unsafeCopy, Graphics_D3_Unsafe.unsafeDomain, Graphics_D3_Unsafe.unsafeRange, Graphics_D3_Unsafe.unsafeToFunction);
+  var scaleTime = $foreign.scaleTimeImpl(Graphics_D3_Base.d3);
+  exports["scaleTime"] = scaleTime;
+  exports["scaleTimeScale"] = scaleTimeScale;
+})(PS);
 (function(exports) {
   "use strict";              
 
@@ -3136,6 +3159,7 @@ var PS = {};
   var Graphics_D3_SVG_Axis = $PS["Graphics.D3.SVG.Axis"];
   var Graphics_D3_Scale = $PS["Graphics.D3.Scale"];
   var Graphics_D3_Selection = $PS["Graphics.D3.Selection"];
+  var Graphics_D3_Time = $PS["Graphics.D3.Time"];
   var $$Math = $PS["Math"];                
   var main = function __do() {
       DOM_Simple_Console.log2("d3")(Graphics_D3_Base.d3)();
@@ -3225,8 +3249,12 @@ var PS = {};
       DOM_Simple_Console.log2("svg")(svg)();
       var axisScale = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Scale.linearScale)(Graphics_D3_Scale.domain(Graphics_D3_Scale.scaleLinear)([ -1.0, 10.0 ])))(Graphics_D3_Scale.range(Graphics_D3_Scale.scaleLinear)([ 0.0, 400.0 ]))();
       var xAxis = Graphics_D3_SVG_Axis.axisBottom(Graphics_D3_Scale.scaleLinear)(axisScale)();
-      var axisSvg = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#time-scale"))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("svg")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("width")(400)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("height")(50)))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("g")))(Graphics_D3_SVG_Axis.renderAxis(Graphics_D3_Selection.existingSelection)(xAxis))();
-      return DOM_Simple_Console.log2("axisScale")(axisScale)();
+      var axisSvg = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#axis"))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("svg")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("width")(400)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("height")(50)))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("g")))(Graphics_D3_SVG_Axis.renderAxis(Graphics_D3_Selection.existingSelection)(xAxis))();
+      DOM_Simple_Console.log2("axisScale")(axisScale)();
+      var timeScale = Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Time.scaleTime)(Graphics_D3_Scale.range(Graphics_D3_Time.scaleTimeScale)([ 0.0, 400.0 ]))();
+      var timeAxis = Graphics_D3_SVG_Axis.axisBottom(Graphics_D3_Time.scaleTimeScale)(timeScale)();
+      var timeSvg = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#time-axis"))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("svg")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("width")(400)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("height")(50)))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("g")))(Graphics_D3_SVG_Axis.renderAxis(Graphics_D3_Selection.existingSelection)(timeAxis))();
+      return DOM_Simple_Console.log2("timeScale")(timeScale)();
   };
   exports["main"] = main;
 })(PS);

example/src/Main.purs

@@ -110,8 +110,7 @@ main = do
         pure unit
   log2 "svg" svg
 
-  -- visualize time scale
-  -- timeScale <- Time.scaleTime
+  -- visualize axis
   axisScale <- Scale.linearScale
     >>= Scale.domain [-1.0, 10.0]
     >>= Scale.range [0.0, 400.0]
@@ -123,3 +122,14 @@ main = do
     >>= Selection.append "g"
     >>= Axis.renderAxis xAxis
   log2 "axisScale" axisScale
+
+  timeScale <- Time.scaleTime
+    >>= Scale.range [0.0, 400.0]
+  timeAxis <- Axis.axisBottom timeScale
+  timeSvg <- Selection.rootSelect "#time-axis"
+    >>= Selection.append "svg"
+    >>= Selection.attr "width" 400
+    >>= Selection.attr "height" 50
+    >>= Selection.append "g"
+    >>= Axis.renderAxis timeAxis
+  log2 "timeScale" timeScale