Skip to content
GitLab
Commit cdc6a56c authored by Koen van der Veen's avatar Koen van der Veen
Browse files

d3 init

parent 72c830cf
Pipeline #10889 failed with stages
in 1 minute and 51 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 291 additions and 0 deletions
+291 -0
assets/graph.html 0 → 100644
+ 66
- 0
View file @ cdc6a56c
<html>
<script src="https://d3js.org/d3.v4.js"></script>
<body onload="load()">
<svg id="myPlot" style="width:500px;height:500px"></svg>
<!-- <h2>ccc</h2> -->
<script>
function getData() { return [[100, 250], [100,200], [200, 150], [200, 250]]}
function load(){
// Set Dimensions
const xSize = 500;
const ySize = 500;
const margin = 40;
const xMax = xSize - margin*2;
const yMax = ySize - margin*2;
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Create Random Points
const numPoints = 100;
const data = getData();
// Append SVG Object to the Page
const svg = d3.select("#myPlot")
.append("svg")
.attr("transform","translate(" + margin + "," + margin + ")");
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#16161D");
// Dots
svg.append('g')
.selectAll("dot")
.data(data).enter()
.append("circle")
.attr("cx", function (d) { return d[0] } )
.attr("cy", function (d) { return d[1] } )
.attr("r", 3)
.style("fill", "#FFFFFF")
.on('mouseover', function (d, i) {
d3.select(this).transition()
.duration('100')
.attr("r", 7);
div.transition()
.duration(100)
.style("opacity", 1);
div.html("$" + d3.format(".2f")(d.wage))
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 15) + "px");
})
.on('mouseout', function (d, i) {
TestDartCallback("abc");
d3.select(this).transition()
.duration('200')
.attr("r", 5);
});
}
</script>
</body>
</html>
\ No newline at end of file
assets/graph2.html 0 → 100644
+ 98
- 0
View file @ cdc6a56c
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {
// Add X axis
var x = d3.scaleLinear()
.domain([0, 3000])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, 400000])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Add a tooltip div. Here I define the general feature of the tooltip: stuff that do not depend on the data point.
// Its opacity is set to 0: we don't see it by default.
var tooltip = d3.select("#my_dataviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px")
// A function that change this tooltip when the user hover a point.
// Its opacity is set to 1: we can now see it. Plus it set the text and position of tooltip depending on the datapoint (d)
var mouseover = function(d) {
tooltip
.style("opacity", 1)
}
var mousemove = function(d) {
tooltip
.html("The exact value of<br>the Ground Living area is: " + d.GrLivArea)
.style("left", (d3.mouse(this)[0]+90) + "px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
.style("top", (d3.mouse(this)[1]) + "px")
}
// A function that change this tooltip when the leaves a point: just need to set opacity to 0 again
var mouseleave = function(d) {
tooltip
.transition()
.duration(200)
.style("opacity", 0)
}
// Add dots
svg.append('g')
.selectAll("dot")
.data(data.filter(function(d,i){return i<50})) // the .filter part is just to keep a few dots on the chart, not all of them
.enter()
.append("circle")
.attr("cx", function (d) { return x(d.GrLivArea); } )
.attr("cy", function (d) { return y(d.SalePrice); } )
.attr("r", 7)
.style("fill", "#69b3a2")
.style("opacity", 0.3)
.style("stroke", "white")
.on("mouseover", mouseover )
.on("mousemove", mousemove )
.on("mouseleave", mouseleave )
})
</script>
\ No newline at end of file
lib/configs/routes/route_handler.dart
+ 4
- 0
View file @ cdc6a56c
......@@ -25,6 +25,8 @@ import 'package:memri/screens/workspace/projects/projects_summary_screen.dart';
import 'package:memri/screens/workspace/projects_screen.dart';
import 'package:memri/screens/workspace/workspace_screen.dart';
import '../../screens/workspace/chart_screen.dart';
var notFoundHandler = Handler(handlerFunc: (_, __) => NotFoundScreen());
///
......@@ -98,6 +100,8 @@ var appsFeedScreenHandler = Handler(
///
var projectsScreenHandler = Handler(handlerFunc: (_, __) => ProjectsScreen());
var chartScreenHandler = Handler(handlerFunc: (_, __) => ChartsScreen());
var projectsCreateScreenHandler =
Handler(handlerFunc: (_, Map<String, List<String>> params) {
final isSample =
......
lib/configs/routes/route_navigator.dart
+ 2
- 0
View file @ cdc6a56c
......@@ -21,6 +21,7 @@ class Routes {
static String importerError = '/workspace/data/importer/error';
static String projects = '/workspace/projects';
static String charts = '/workspace/chart';
static String projectsCreate = '/workspace/projects/create';
static String projectsSummary = '/workspace/projects/summary';
static String projectsLabelData = '/workspace/projects/create/label_data';
......@@ -60,6 +61,7 @@ class Routes {
router.define(feed, handler: appsFeedScreenHandler);
router.define(projects, handler: projectsScreenHandler);
router.define(charts, handler: chartScreenHandler);
router.define(projectsCreate, handler: projectsCreateScreenHandler);
router.define(projectsLabelData, handler: projectsLabelDataScreenHandler);
router.define(projectsSummary, handler: projectsSummaryScreenHandler);
......
lib/screens/workspace/chart_screen.dart 0 → 100644
+ 78
- 0
View file @ cdc6a56c
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:memri/providers/navigation_provider.dart';
import 'package:memri/utilities/helpers/app_helper.dart';
import 'package:memri/widgets/scaffold/workspace_scaffold.dart';
import 'package:provider/provider.dart';
import 'package:webviewx/webviewx.dart';
import 'package:flutter/widgets.dart';
class ChartsScreen extends StatefulWidget {
const ChartsScreen({Key? key}) : super(key: key);
@override
State<ChartsScreen> createState() => ChartsScreenState();
}
class ChartsScreenState extends State<ChartsScreen> {
late final _navigationProvider =
Provider.of<NavigationProvider>(context, listen: false);
late WebViewXController webviewController;
String html = "";
Set<EmbeddedJsContent> jsContent = {
EmbeddedJsContent(
js: 'function getData() { return [[100, 250], [200,200]];}')
};
String msg = '';
@override
initState() {
imageCache.clear();
loadHtml();
super.initState();
}
loadHtml() async {
// rootBundle.evict('assets/graph.html');
rootBundle.clear();
String _html = await rootBundle.loadString('assets/graph.html', cache: true);
print(_html);
setState(() {
html = _html;
});
}
@override
Widget build(BuildContext context) {
return WorkspaceScaffold(
currentItem: NavigationItem.projects,
backgroundColor: app.colors.greyBackGround,
child: Column(
children: [
Text(msg),
WebViewX(
initialContent: html,
jsContent: jsContent,
initialSourceType: SourceType.html,
onWebViewCreated: (controller) => webviewController = controller,
dartCallBacks: {
DartCallback(
name: 'TestDartCallback',
callBack: (msg) => showMsg(msg.toString()),
)
},
height: 800,
width: 800),
],
),
);
}
showMsg(String string) {
setState(() {
msg=string;
});
}
}
pubspec.lock
+ 42
- 0
View file @ cdc6a56c
......@@ -651,6 +651,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.2"
pointer_interceptor:
dependency: transitive
description:
name: pointer_interceptor
url: "https://pub.dartlang.org"
source: hosted
version: "0.9.3+3"
pool:
dependency: transitive
description:
......@@ -971,6 +978,41 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.2.0"
webview_flutter:
dependency: transitive
description:
name: webview_flutter
url: "https://pub.dartlang.org"
source: hosted
version: "2.8.0"
webview_flutter_android:
dependency: transitive
description:
name: webview_flutter_android
url: "https://pub.dartlang.org"
source: hosted
version: "2.10.4"
webview_flutter_platform_interface:
dependency: transitive
description:
name: webview_flutter_platform_interface
url: "https://pub.dartlang.org"
source: hosted
version: "1.9.5"
webview_flutter_wkwebview:
dependency: transitive
description:
name: webview_flutter_wkwebview
url: "https://pub.dartlang.org"
source: hosted
version: "2.9.5"
webviewx:
dependency: "direct main"
description:
name: webviewx
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.1"
win32:
dependency: transitive
description:
......
pubspec.yaml
+ 1
- 0
View file @ cdc6a56c
......@@ -52,6 +52,7 @@ dependencies:
scrollable_positioned_list: ^0.2.3
visibility_detector: ^0.2.2 # All
json_serializable: ^6.1.4 # Dart
webviewx: 0.2.1
dev_dependencies:
flutter_test:
......
Supports Markdown
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