1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-12 03:00:28 +00:00
TiddlyWiki5/plugins/tiddlywiki/d3/barwidget.js
Mario Pietsch 231a39e743
Fix whitespace in all plugins for v5.3.6 (#8285)
* Fix whitespace in all plugins for v5.3.5

* remove const to var chanes
2024-08-20 16:33:07 +01:00

205 lines
5.8 KiB
JavaScript

/*\
title: $:/plugins/tiddlywiki/d3/barwidget.js
type: application/javascript
module-type: widget
A widget for displaying stacked or grouped bar charts. Derived from http://bl.ocks.org/mbostock/3943967
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget,
d3 = require("$:/plugins/tiddlywiki/d3/d3.js").d3;
var BarWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
};
/*
Inherit from the base widget class
*/
BarWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
BarWidget.prototype.render = function(parent,nextSibling) {
// Save the parent dom node
this.parentDomNode = parent;
// Compute our attributes
this.computeAttributes();
// Execute our logic
this.execute();
// Create the chart
var chart = this.createChart(parent,nextSibling);
this.updateChart = chart.updateChart;
if(this.updateChart) {
this.updateChart();
}
// Insert the chart into the DOM and render any children
parent.insertBefore(chart.domNode,nextSibling);
this.domNodes.push(chart.domNode);
};
BarWidget.prototype.createChart = function(parent,nextSibling) {
// Get the data we're plotting
var data = this.wiki.getTiddlerData(this.barData),
n,m,stack,layers;
if(data) {
n = data.layers;
m = data.samples;
layers = data.data;
} else { // Use randomly generated data if we don't have any
n = 4; // number of layers
m = 58; // number of samples per layer
stack = d3.layout.stack();
layers = stack(d3.range(n).map(function() { return bumpLayer(m, 0.1); }));
}
// Calculate the maximum data values
var yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
// Calculate margins and width and height
var margin = {top: 40, right: 10, bottom: 20, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// x-scale
var x = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([0, width], 0.08);
// y-scale
var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);
// Array of colour values
var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);
// x-axis
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(0)
.tickPadding(6)
.orient("bottom");
// Create SVG element
var svgElement = d3.select(parent).insert("svg",function() {return nextSibling;})
.attr("viewBox", "0 0 960 500")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
// Create main group
var mainGroup = svgElement.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create the layers
var layer = mainGroup.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });
// Create the rectangles in each layer
var rect = layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", height)
.attr("width", x.rangeBand())
.attr("height", 0);
// Transition the rectangles to their final height
rect.transition()
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });
// Add to the DOM
mainGroup.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var self = this;
// Return the svg node
return {
domNode: svgElement[0][0],
updateChart: function() {
if(self.barGrouped !== "no") {
transitionGrouped();
} else {
transitionStacked();
}
}
};
function transitionGrouped() {
y.domain([0, yGroupMax]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
.attr("width", x.rangeBand() / n)
.transition()
.attr("y", function(d) { return y(d.y); })
.attr("height", function(d) { return height - y(d.y); });
}
function transitionStacked() {
y.domain([0, yStackMax]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.transition()
.attr("x", function(d) { return x(d.x); })
.attr("width", x.rangeBand());
}
// Inspired by Lee Byron's test data generator.
function bumpLayer(n, o) {
function bump(a) {
var x = 1 / (0.1 + Math.random()),
y = 2 * Math.random() - 0.5,
z = 10 / (0.1 + Math.random());
for(var i = 0; i < n; i++) {
var w = (i / n - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
var a = [], i;
for(i = 0; i < n; ++i) a[i] = o + o * Math.random();
for(i = 0; i < 5; ++i) bump(a);
return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}
};
/*
Compute the internal state of the widget
*/
BarWidget.prototype.execute = function() {
// Get the parameters from the attributes
this.barData = this.getAttribute("data");
this.barGrouped = this.getAttribute("grouped","no");
};
/*
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
*/
BarWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
if(changedAttributes.data || changedTiddlers[this.barData]) {
this.refreshSelf();
return true;
} else if(changedAttributes.grouped) {
this.execute();
if(this.updateChart) {
this.updateChart();
}
return true;
}
return false;
};
exports.d3bar = BarWidget;
})();