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
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 14 deletions
example/dist/index.html
View file @ 15afbdf8
......@@ -7,8 +7,6 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/index.fd532818.js"></script>
</head>
<body>
<!--[if lt IE 8]>
......@@ -19,6 +17,16 @@
</p>
<![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>
</html>
example/index.html
View file @ 15afbdf8
......@@ -7,8 +7,6 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<!--[if lt IE 8]>
......@@ -19,6 +17,16 @@
</p>
<![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>
</html>
example/index.js
View file @ 15afbdf8
......@@ -344,6 +344,49 @@ var PS = {};
};
exports["unsafeForeignFunction"] = unsafeForeignFunction;
})(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) {
'use strict';
var d3 =require("d3/dist/d3.js");
......@@ -417,6 +460,121 @@ var PS = {};
exports["toFunction"] = toFunction;
exports["scaleLinear"] = scaleLinear;
})(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) {
// Generated by purs version 0.14.1
"use strict";
......@@ -424,14 +582,32 @@ var PS = {};
var exports = $PS["Main"];
var Control_Bind = $PS["Control.Bind"];
var DOM_Simple_Console = $PS["DOM.Simple.Console"];
var Data_Show = $PS["Data.Show"];
var Effect = $PS["Effect"];
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() {
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))();
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;
})(PS);
......
example/spago.dhall
View file @ 15afbdf8
......@@ -11,13 +11,16 @@ When creating a new Spago project, you can use
to generate this file without the comments in this block.
-}
{ name = "example"
, dependencies = [ "console"
, "d3"
, "dom-simple"
, "effect"
, "prelude"
, "psci-support"
, "reactix-d3" ]
, dependencies =
[ "console"
, "d3"
, "dom-simple"
, "effect"
, "math"
, "prelude"
, "psci-support"
, "reactix-d3"
]
, packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs" ]
}
example/src/Main.purs
View file @ 15afbdf8
module Main where
import Prelude
import Prelude hiding (append)
import DOM.Simple.Console (log2)
import Effect (Effect)
import Math
import Graphics.D3.Base
import Graphics.D3.Scale
import Graphics.D3.Selection
main :: Effect Unit
main = do
......@@ -17,3 +19,19 @@ main = do
>>= toFunction
log2 "after scaleLinear" scale
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