Skip to content

P
purescript-reactix-d3
Commit 15afbdf8 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[example] some more examples showing that d3 works

parent 4c88eb39
Show whitespace changes
Inline Side-by-side
Showing with 227 additions and 14 deletions
example/dist/index.html
View file @ 15afbdf8
...@@ -7,8 +7,6 @@ ...@@ -7,8 +7,6 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/index.fd532818.js"></script>
</head> </head>
<body> <body>
<!--[if lt IE 8]> <!--[if lt IE 8]>
...@@ -19,6 +17,16 @@ ...@@ -19,6 +17,16 @@
</p> </p>
<![endif]--> <![endif]-->
<div id="select-me">select me</div>
<div id="simple-data">
<p>first element</p>
<p>second element</p>
</div>
<div id="data-with-append">
</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>
</body> </body>
</html> </html>
example/index.html
View file @ 15afbdf8
...@@ -7,8 +7,6 @@ ...@@ -7,8 +7,6 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="index.js"></script>
</head> </head>
<body> <body>
<!--[if lt IE 8]> <!--[if lt IE 8]>
...@@ -19,6 +17,16 @@ ...@@ -19,6 +17,16 @@
</p> </p>
<![endif]--> <![endif]-->
<div id="select-me">select me</div>
<div id="simple-data">
<p>first element</p>
<p>second element</p>
</div>
<div id="data-with-append">
</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>
</body> </body>
</html> </html>
example/index.js
View file @ 15afbdf8
...@@ -344,6 +344,49 @@ var PS = {}; ...@@ -344,6 +344,49 @@ var PS = {};
}; };
exports["unsafeForeignFunction"] = unsafeForeignFunction; exports["unsafeForeignFunction"] = unsafeForeignFunction;
})(PS); })(PS);
(function(exports) {
"use strict";
exports.showStringImpl = function (s) {
var l = s.length;
return "\"" + s.replace(
/[\0-\x1F\x7F"\\]/g, // eslint-disable-line no-control-regex
function (c, i) {
switch (c) {
case "\"":
case "\\":
return "\\" + c;
case "\x07": return "\\a";
case "\b": return "\\b";
case "\f": return "\\f";
case "\n": return "\\n";
case "\r": return "\\r";
case "\t": return "\\t";
case "\v": return "\\v";
}
var k = i + 1;
var empty = k < l && s[k] >= "0" && s[k] <= "9" ? "\\&" : "";
return "\\" + c.charCodeAt(0).toString(10) + empty;
}
) + "\"";
};
})(PS["Data.Show"] = PS["Data.Show"] || {});
(function($PS) {
// Generated by purs version 0.14.1
"use strict";
$PS["Data.Show"] = $PS["Data.Show"] || {};
var exports = $PS["Data.Show"];
var $foreign = $PS["Data.Show"];
var Show = function (show) {
this.show = show;
};
var showString = new Show($foreign.showStringImpl);
var show = function (dict) {
return dict.show;
};
exports["show"] = show;
exports["showString"] = showString;
})(PS);
(function(exports) { (function(exports) {
'use strict'; 'use strict';
var d3 =require("d3/dist/d3.js"); var d3 =require("d3/dist/d3.js");
...@@ -417,6 +460,121 @@ var PS = {}; ...@@ -417,6 +460,121 @@ var PS = {};
exports["toFunction"] = toFunction; exports["toFunction"] = toFunction;
exports["scaleLinear"] = scaleLinear; exports["scaleLinear"] = scaleLinear;
})(PS); })(PS);
(function($PS) {
// Generated by purs version 0.14.1
"use strict";
$PS["Graphics.D3.Selection"] = $PS["Graphics.D3.Selection"] || {};
var exports = $PS["Graphics.D3.Selection"];
var Data_Foreign_EasyFFI = $PS["Data.Foreign.EasyFFI"];
var Existing = function (attr, attr$prime, attr$prime$prime, remove, style, style$prime, style$prime$prime, text, text$prime, text$prime$prime) {
this.attr = attr;
this["attr'"] = attr$prime;
this["attr''"] = attr$prime$prime;
this.remove = remove;
this.style = style;
this["style'"] = style$prime;
this["style''"] = style$prime$prime;
this.text = text;
this["text'"] = text$prime;
this["text''"] = text$prime$prime;
};
var Appendable = function (append) {
this.append = append;
};
var text$prime = function (dict) {
return dict["text'"];
};
var style$prime$prime = function (dict) {
return dict["style''"];
};
var ffi = Data_Foreign_EasyFFI.unsafeForeignFunction;
var rootSelect = ffi([ "selector", "" ])("d3.select(selector)");
var selectAll = ffi([ "selector", "selection", "" ])("selection.selectAll(selector)");
var unsafeAppend = ffi([ "tag", "selection", "" ])("selection.append(tag)");
var unsafeAttr = function (dictAttrValue) {
return ffi([ "key", "val", "selection", "" ])("selection.attr(key, val)");
};
var unsafeAttr$prime = function (dictAttrValue) {
return ffi([ "key", "val", "selection", "" ])("selection.attr(key, val)");
};
var unsafeAttr$prime$prime = function (dictAttrValue) {
return ffi([ "key", "val", "selection", "" ])("selection.attr(key, function (d, i) { return val(d)(i); })");
};
var unsafeRemove = ffi([ "selection", "" ])("selection.remove()");
var unsafeStyle = ffi([ "key", "val", "selection", "" ])("selection.style(key, val)");
var unsafeStyle$prime = ffi([ "key", "val", "selection", "" ])("selection.style(key, val)");
var unsafeStyle$prime$prime = ffi([ "key", "val", "selection", "" ])("selection.style(key, function (d, i) { return val(d)(i); })");
var unsafeText = ffi([ "text", "selection", "" ])("selection.text(text)");
var unsafeText$prime = ffi([ "text", "selection", "" ])("selection.text(text)");
var unsafeText$prime$prime = ffi([ "text", "selection", "" ])("selection.text(function (d, i) { return text(d)(i); })");
var existingUpdate = new Existing(function (dictAttrValue) {
return unsafeAttr();
}, function (dictAttrValue) {
return unsafeAttr$prime();
}, function (dictAttrValue) {
return unsafeAttr$prime$prime();
}, unsafeRemove, unsafeStyle, unsafeStyle$prime, unsafeStyle$prime$prime, unsafeText, unsafeText$prime, unsafeText$prime$prime);
var existingSelection = new Existing(function (dictAttrValue) {
return unsafeAttr();
}, function (dictAttrValue) {
return unsafeAttr$prime();
}, function (dictAttrValue) {
return unsafeAttr$prime$prime();
}, unsafeRemove, unsafeStyle, unsafeStyle$prime, unsafeStyle$prime$prime, unsafeText, unsafeText$prime, unsafeText$prime$prime);
var enter = ffi([ "update", "" ])("update.enter()");
var bindData = ffi([ "array", "selection", "" ])("selection.data(array)");
var appendableEnter = new Appendable(unsafeAppend);
var append = function (dict) {
return dict.append;
};
exports["rootSelect"] = rootSelect;
exports["selectAll"] = selectAll;
exports["bindData"] = bindData;
exports["enter"] = enter;
exports["append"] = append;
exports["style''"] = style$prime$prime;
exports["text'"] = text$prime;
exports["appendableEnter"] = appendableEnter;
exports["existingSelection"] = existingSelection;
exports["existingUpdate"] = existingUpdate;
})(PS);
(function(exports) {
"use strict";
function nativeImul(a) {
return function (b) {
return Math.imul(a, b);
};
}
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul
function emulatedImul(a) {
/*jshint bitwise: false*/
return function (b) {
var ah = a >>> 16 & 0xffff;
var al = a & 0xffff;
var bh = b >>> 16 & 0xffff;
var bl = b & 0xffff;
// the shift by 0 fixes the sign on the high part
// the final |0 converts the unsigned value into a signed value
return al * bl + (ah * bl + al * bh << 16 >>> 0) | 0;
};
}
exports.remainder = function (n) {
return function (m) {
return n % m;
};
};
})(PS["Math"] = PS["Math"] || {});
(function($PS) {
// Generated by purs version 0.14.1
"use strict";
$PS["Math"] = $PS["Math"] || {};
var exports = $PS["Math"];
var $foreign = $PS["Math"];
exports["remainder"] = $foreign.remainder;
})(PS);
(function($PS) { (function($PS) {
// Generated by purs version 0.14.1 // Generated by purs version 0.14.1
"use strict"; "use strict";
...@@ -424,14 +582,32 @@ var PS = {}; ...@@ -424,14 +582,32 @@ var PS = {};
var exports = $PS["Main"]; var exports = $PS["Main"];
var Control_Bind = $PS["Control.Bind"]; var Control_Bind = $PS["Control.Bind"];
var DOM_Simple_Console = $PS["DOM.Simple.Console"]; var DOM_Simple_Console = $PS["DOM.Simple.Console"];
var Data_Show = $PS["Data.Show"];
var Effect = $PS["Effect"]; var Effect = $PS["Effect"];
var Graphics_D3_Base = $PS["Graphics.D3.Base"]; var Graphics_D3_Base = $PS["Graphics.D3.Base"];
var Graphics_D3_Scale = $PS["Graphics.D3.Scale"]; var Graphics_D3_Scale = $PS["Graphics.D3.Scale"];
var Graphics_D3_Selection = $PS["Graphics.D3.Selection"];
var $$Math = $PS["Math"];
var main = function __do() { var main = function __do() {
DOM_Simple_Console.log2("d3")(Graphics_D3_Base.d3)(); DOM_Simple_Console.log2("d3")(Graphics_D3_Base.d3)();
var scale = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Scale.linearScale)(Graphics_D3_Scale.domain(Graphics_D3_Scale.scaleLinear)([ -10.0, 10.0 ])))(Graphics_D3_Scale.range(Graphics_D3_Scale.scaleLinear)([ 0.0, 1.0 ])))(Graphics_D3_Scale.toFunction(Graphics_D3_Scale.scaleLinear))(); var scale = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Scale.linearScale)(Graphics_D3_Scale.domain(Graphics_D3_Scale.scaleLinear)([ -10.0, 10.0 ])))(Graphics_D3_Scale.range(Graphics_D3_Scale.scaleLinear)([ 0.0, 1.0 ])))(Graphics_D3_Scale.toFunction(Graphics_D3_Scale.scaleLinear))();
DOM_Simple_Console.log2("after scaleLinear")(scale)(); DOM_Simple_Console.log2("after scaleLinear")(scale)();
return DOM_Simple_Console.log2("scale @ 5")(scale(5.0))(); DOM_Simple_Console.log2("scale @ 5")(scale(5.0))();
var selected = Graphics_D3_Selection.rootSelect("#select-me")();
DOM_Simple_Console.log2("selected '#select-me'")(selected)();
var data$prime = [ "first data", "second data" ];
var simpleData = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#simple-data"))(Graphics_D3_Selection.selectAll("p")))(Graphics_D3_Selection.bindData(data$prime)))(Graphics_D3_Selection["text'"](Graphics_D3_Selection.existingUpdate)(Data_Show.show(Data_Show.showString)))();
DOM_Simple_Console.log2("simpleData")(simpleData)();
var dataWithAppend = 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)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#data-with-append"))(Graphics_D3_Selection.selectAll("p")))(Graphics_D3_Selection.bindData(data$prime)))(Graphics_D3_Selection.enter))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableEnter)("p")))(Graphics_D3_Selection["style''"](Graphics_D3_Selection.existingSelection)("color")(function (d) {
return function (idx) {
var $0 = $$Math.remainder(idx)(2.0) === 0.0;
if ($0) {
return "green";
};
return "red";
};
})))(Graphics_D3_Selection["text'"](Graphics_D3_Selection.existingSelection)(Data_Show.show(Data_Show.showString)))();
return DOM_Simple_Console.log2("dataWithAppend")(dataWithAppend)();
}; };
exports["main"] = main; exports["main"] = main;
})(PS); })(PS);
......
example/spago.dhall
View file @ 15afbdf8
...@@ -11,13 +11,16 @@ When creating a new Spago project, you can use ...@@ -11,13 +11,16 @@ When creating a new Spago project, you can use
to generate this file without the comments in this block. to generate this file without the comments in this block.
-} -}
{ name = "example" { name = "example"
, dependencies = [ "console" , dependencies =
[ "console"
, "d3" , "d3"
, "dom-simple" , "dom-simple"
, "effect" , "effect"
, "math"
, "prelude" , "prelude"
, "psci-support" , "psci-support"
, "reactix-d3" ] , "reactix-d3"
]
, packages = ./packages.dhall , packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs" ] , sources = [ "src/**/*.purs", "test/**/*.purs" ]
} }
example/src/Main.purs
View file @ 15afbdf8
module Main where module Main where
import Prelude import Prelude hiding (append)
import DOM.Simple.Console (log2) import DOM.Simple.Console (log2)
import Effect (Effect) import Effect (Effect)
import Math
import Graphics.D3.Base import Graphics.D3.Base
import Graphics.D3.Scale import Graphics.D3.Scale
import Graphics.D3.Selection
main :: Effect Unit main :: Effect Unit
main = do main = do
...@@ -17,3 +19,19 @@ main = do ...@@ -17,3 +19,19 @@ main = do
>>= toFunction >>= toFunction
log2 "after scaleLinear" scale log2 "after scaleLinear" scale
log2 "scale @ 5" $ scale 5.0 log2 "scale @ 5" $ scale 5.0
selected <- rootSelect "#select-me"
log2 "selected '#select-me'" selected
let data' = [ "first data", "second data" ]
simpleData <- rootSelect "#simple-data"
>>= selectAll "p"
>>= bindData data'
>>= text' show
log2 "simpleData" simpleData
dataWithAppend <- rootSelect "#data-with-append"
>>= selectAll "p"
>>= bindData data'
>>= enter
>>= append "p"
>>= style'' "color" (\d idx -> if idx `remainder` 2.0 == 0.0 then "green" else "red")
>>= text' show
log2 "dataWithAppend" dataWithAppend
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment