New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@flourish/chart-layout

Package Overview
Dependencies
Maintainers
10
Versions
66
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@flourish/chart-layout - npm Package Compare versions

Comparing version 1.0.0-prerelease.7 to 1.0.0-prerelease.8

2

package.json
{
"name": "@flourish/chart-layout",
"version": "1.0.0-prerelease.7",
"version": "1.0.0-prerelease.8",
"description": "Create axes",

@@ -5,0 +5,0 @@ "main": "chart-layout.js",

5

src/chart/axes.js

@@ -11,2 +11,7 @@ function addAxes(chart) {

var top = x_axes.append("g").attr("class", "fl-axis fl-x-axis fl-top-axis");
top.append("g").attr("class", "fl-axis-line");
top.append("g").attr("class", "fl-axis-ticks");
top.append("g").attr("class", "fl-axis-title");
var left = y_axes.append("g").attr("class", "fl-axis fl-y-axis fl-left-axis");

@@ -13,0 +18,0 @@ left.append("g").attr("class", "fl-axis-line");

28

src/scales/index.js

@@ -80,3 +80,15 @@ import { scaleLinear, scaleLog, scalePoint } from "d3-scale";

function getTopMargin(instance) {
function getXAxisSpace(instance, state) {
var x = state.x;
var ticks = instance._xTicks();
var tick_space = ticks.length ? remToPx(x.tick_length + x.tick_padding) : 0;
var tick_label_space = ticks.max_box_height;
var title_space = getXTitleHeight(instance, state);
return tick_space + tick_label_space + title_space;
}
function getTopMargin(instance, state) {
var x = state.x;
if (x.position === "top") return getXAxisSpace(instance, state);
var margin = remToPx(1);

@@ -95,7 +107,11 @@ var ticks = instance._yTicks();

var x = state.x;
var ticks = instance._xTicks();
var tick_space = ticks.length ? remToPx(x.tick_length + x.tick_padding) : 0;
var tick_label_space = ticks.max_box_height;
var title_space = getXTitleHeight(instance, state);
return tick_space + tick_label_space + title_space;
if (x.position === "bottom") return getXAxisSpace(instance, state);
var margin = remToPx(1);
var ticks = instance._yTicks();
if (ticks.length) {
var first_tick = ticks[0];
// Assume last tick is placed at the top of the axis and add a little breathing room
margin = Math.max(margin, 1.2*first_tick.box_height_above);
}
return margin;
}

@@ -102,0 +118,0 @@

3

src/state/x.js
var X_DEFAULTS = Object.freeze({
numeric_scale_type: "linear",
position: "bottom",
linear_min: null,

@@ -4,0 +7,0 @@ linear_max: null,

561

src/update/axes/x-axes.js

@@ -7,167 +7,239 @@ import { select } from "d3-selection";

function initXAxisUpdating(instance, state) {
var bottom = instance.chart.select("g.fl-bottom-axis");
var line_container = bottom.select("g.fl-axis-line");
var tick_container = bottom.select("g.fl-axis-ticks");
var title_container = bottom.select("g.fl-axis-title");
var x = state.x;
var oldXScale;
var oldYScale;
var xScale, yScale, animation_duration, x0;
var line_color, line_width, tick_label_color;
var tick_length, tick_label_size, tick_label_distance;
var title_size, x_mid;
var oldXScale, enteringXScale, exitingXScale, oldYScale;
return function() {
var xScale = instance.xScale();
var yScale = instance.yScale();
var ticks = instance._xTicks();
var animation_duration = oldXScale ? instance.animationDuration() : 0;
function setValues() {
xScale = instance.xScale();
yScale = instance.yScale();
animation_duration = oldXScale ? instance.animationDuration() : 0;
var range = xScale.range();
var x0 = range[0];
x_mid = (x0 + range[1]) / 2;
if (!oldXScale) oldXScale = xScale;
var x0 = xScale.range()[0];
var y0 = yScale.range()[0];
var old_y0 = (oldYScale || yScale).range()[0];
var enteringXScale = oldXScale.type === xScale.type ? oldXScale : xScale.copy().range([x0, x0]);
var exitingXScale = oldXScale.type === xScale.type ? xScale : oldXScale.copy().range([x0, x0]);
enteringXScale = oldXScale.type === xScale.type ? oldXScale : xScale.copy().range([x0, x0]);
exitingXScale = oldXScale.type === xScale.type ? xScale : oldXScale.copy().range([x0, x0]);
line_color = x.line_and_tick_color;
line_width = remToPx(x.line_and_tick_width);
tick_label_color = x.tick_label_color;
tick_length = remToPx(x.tick_length);
tick_label_size = remToPx(x.tick_label_size);
tick_label_distance = tick_length + remToPx(x.tick_padding);
title_size = remToPx(x.title_size);
}
var line_color = x.line_and_tick_color;
var line_width = remToPx(x.line_and_tick_width);
var tick_label_color = x.tick_label_color;
var updateBottomAxis = (function() {
var bottom = instance.chart.select("g.fl-bottom-axis");
var line_container = bottom.select("g.fl-axis-line");
var tick_container = bottom.select("g.fl-axis-ticks");
var title_container = bottom.select("g.fl-axis-title");
var tick_length = remToPx(x.tick_length);
var tick_label_size = remToPx(x.tick_label_size);
var tick_label_distance = tick_length + remToPx(x.tick_padding);
var title_size = remToPx(x.title_size);
var title_distance = y0 + tick_label_distance + ticks.max_box_height + remToPx(x.title_padding);
var range = xScale.range();
var x_mid = (range[0] + range[1]) / 2;
return function() {
var show_this_axis = x.position === "bottom";
var ticks = show_this_axis ? instance._xTicks() : [];
var y0 = yScale.range()[0];
var old_y0 = (oldYScale || yScale).range()[0];
var title_distance = y0 + tick_label_distance + ticks.max_box_height + remToPx(x.title_padding);
var line = line_container.selectAll("line")
.data(x.line_visible ? [xScale.domain()] : []);
var line = line_container.selectAll("line")
.data(show_this_axis && x.line_visible ? [xScale.domain()] : []);
line.exit()
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
.duration(animation_duration)
.attr("x1", x0)
.attr("x2", x0)
.remove();
line.exit()
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
.duration(animation_duration)
.attr("x1", x0)
.attr("x2", x0)
.remove();
var line_enter = line.enter()
.append("line")
.style("shape-rendering", "crispEdges")
.style("stroke-linecap", "square")
.style("stroke-width", line_width)
.attr("x1", enteringXScale.range()[0])
.attr("x2", enteringXScale.range()[0])
.attr("y1", old_y0)
.attr("y2", old_y0);
var line_enter = line.enter()
.append("line")
.style("shape-rendering", "crispEdges")
.style("stroke-linecap", "square")
.style("stroke-width", line_width)
.attr("x1", enteringXScale.range()[0])
.attr("x2", enteringXScale.range()[0])
.attr("y1", old_y0)
.attr("y2", old_y0);
line.merge(line_enter)
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
.duration(animation_duration)
.attr("x1", xScale.range()[0])
.attr("x2", xScale.range()[1])
.attr("y1", y0)
.attr("y2", y0);
line.merge(line_enter)
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
.duration(animation_duration)
.attr("x1", xScale.range()[0])
.attr("x2", xScale.range()[1])
.attr("y1", y0)
.attr("y2", y0);
var sorted_ticks = ticks.type === "numeric" ? ticks.slice().sort(tickSorter) : ticks;
var sorted_ticks = ticks.type === "numeric" ? ticks.slice().sort(tickSorter) : ticks;
var tickLabelTransform = function(d) {
var angle = -x.tick_label_angle;
var rotate = angleToRotate(angle, 0, 0);
if (angle === 0) {
return xyToTranslate(d.text_width/2, tick_label_distance + tick_label_size*0.66);
}
else if (angle === -90) {
return xyToTranslate(0, tick_label_distance) + " " + rotate + " " + xyToTranslate(0, tick_label_size*0.33);
}
else {
return xyToTranslate(0, tick_label_distance) + " " + rotate + " " + xyToTranslate(0, tick_label_size*0.66);
}
};
var tickLabelTransform = function(d) {
var angle = -x.tick_label_angle;
var rotate = angleToRotate(angle, 0, 0);
if (angle === 0) {
return xyToTranslate(d.text_width/2, tick_label_distance + tick_label_size*0.66);
}
else if (angle === -90) {
return xyToTranslate(0, tick_label_distance) + " " + rotate + " " + xyToTranslate(0, tick_label_size*0.33);
}
else {
return xyToTranslate(0, tick_label_distance) + " " + rotate + " " + xyToTranslate(0, tick_label_size*0.66);
}
};
var tick_g = tick_container.selectAll("g")
.data(sorted_ticks, function(d) { return d.type + "-" + d.value; });
var tick_g = tick_container.selectAll("g")
.data(sorted_ticks, function(d) { return d.type + "-" + d.value; });
var tick_g_exit = tick_g.exit();
var tick_g_exit = tick_g.exit();
tick_g_exit.transition()
.duration(animation_duration)
.attr("transform", function(d) {
var x = exitingXScale(d.value);
// Prevent errors being thrown when x is +/- Infinity
if (Math.abs(x) > 1e6) x = 1e6 * (x > 0 ? 1 : -1);
return xyToTranslate(x, y0);
})
.style("opacity", 0)
.remove();
tick_g_exit.each(function() {
var sel = select(this);
// Tick lines
sel.select("line")
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
tick_g_exit.transition()
.duration(animation_duration)
.attr("y2", tick_length);
// Tick labels
sel.select("text")
.text(function(d) { return d.text; })
.style("fill", tick_label_color)
.style("font-size", tick_label_size)
.style("font-weight", x.tick_label_weight)
.attr("transform", tickLabelTransform)
.transition()
.duration(animation_duration);
});
.attr("transform", function(d) {
var x = exitingXScale(d.value);
// Prevent errors being thrown when x is +/- Infinity
if (Math.abs(x) > 1e6) x = 1e6 * (x > 0 ? 1 : -1);
return xyToTranslate(x, y0);
})
.style("opacity", 0)
.remove();
var tick_g_enter = tick_g.enter().append("g");
tick_g_exit.each(function() {
var sel = select(this);
// Tick lines
sel.select("line")
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
.duration(animation_duration)
.attr("y2", tick_length);
// Tick labels
sel.select("text")
.text(function(d) { return d.text; })
.style("fill", tick_label_color)
.style("font-size", tick_label_size)
.style("font-weight", x.tick_label_weight)
.attr("transform", tickLabelTransform)
.transition()
.duration(animation_duration);
});
tick_g_enter
.attr("transform", function(d) { return xyToTranslate(enteringXScale(d.value), old_y0); });
var tick_g_enter = tick_g.enter().append("g");
tick_g_enter.each(function() {
var sel = select(this);
// Tick lines
sel.append("line")
.attr("y2", tick_length);
// Tick labels
sel.append("text").attr("text-anchor", "middle")
.attr("transform", tickLabelTransform);
});
tick_g_enter
.attr("transform", function(d) { return xyToTranslate(enteringXScale(d.value), old_y0); });
var tick_g_update = tick_g.merge(tick_g_enter);
tick_g_enter.each(function() {
var sel = select(this);
// Tick lines
sel.append("line")
.attr("y2", tick_length);
// Tick labels
sel.append("text").attr("text-anchor", "middle")
.attr("transform", tickLabelTransform);
});
tick_g_update.transition()
.duration(animation_duration)
.attr("transform", function(d) { return xyToTranslate(xScale(d.value), y0); });
var tick_g_update = tick_g.merge(tick_g_enter);
var setTickOpacity = (function() {
var placed_ticks = [];
var y_anchor = y0 + tick_label_distance;
return function(d) {
var x_anchor = xScale(d.value);
var p1q1 = [ x_anchor, y_anchor ];
var p2 = [ x_anchor + d.box_width_right, y_anchor + d.box_height_right];
var q2 = [ x_anchor - d.box_width_left, y_anchor + d.box_height_left];
var p = [ p1q1, p2 ];
var q = [ p1q1, q2 ];
for (var i = 0; i < placed_ticks.length; i++) {
var placed_tick = placed_ticks[i];
if (x_anchor <= placed_tick.x_anchor) {
if (linesIntersect(p, placed_tick.q)) return 0;
tick_g_update.transition()
.duration(animation_duration)
.attr("transform", function(d) { return xyToTranslate(xScale(d.value), y0); });
var setTickOpacity = (function() {
var placed_ticks = [];
var y_anchor = y0 + tick_label_distance;
return function(d) {
var x_anchor = xScale(d.value);
var p1q1 = [ x_anchor, y_anchor ];
var p2 = [ x_anchor + d.box_width_right, y_anchor + d.box_height_right];
var q2 = [ x_anchor - d.box_width_left, y_anchor + d.box_height_left];
var p = [ p1q1, p2 ];
var q = [ p1q1, q2 ];
for (var i = 0; i < placed_ticks.length; i++) {
var placed_tick = placed_ticks[i];
if (x_anchor <= placed_tick.x_anchor) {
if (linesIntersect(p, placed_tick.q)) return 0;
}
else {
if (linesIntersect(placed_tick.p, q)) return 0; // eslint-disable-line no-lonely-if
}
}
else {
if (linesIntersect(placed_tick.p, q)) return 0; // eslint-disable-line no-lonely-if
}
}
placed_ticks.push({ x_anchor: x_anchor, p: p, q: q });
return 1;
};
})();
placed_ticks.push({ x_anchor: x_anchor, p: p, q: q });
return 1;
};
})();
tick_g_update.each(function() {
var sel = select(this);
// Tick lines
sel.select("line")
tick_g_update.each(function() {
var sel = select(this);
// Tick lines
sel.select("line")
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
.duration(animation_duration)
.attr("y2", tick_length);
// Tick labels
sel.select("text")
.text(function(d) { return d.text; })
.attr("text-anchor", "end")
.style("fill", tick_label_color)
.style("font-size", tick_label_size)
.style("font-weight", x.tick_label_weight)
.transition()
.duration(animation_duration)
.style("opacity", setTickOpacity)
.attr("transform", tickLabelTransform);
});
var title = title_container.selectAll("text")
.data(show_this_axis && x.title ? [x.title] : []);
title.exit().remove();
title.enter().append("text")
.attr("text-anchor", "middle")
.style("font-size", title_size)
.style("fill", x.title_color)
.style("font-weight", x.title_weight)
.transition()
.duration(0)
.delay(animation_duration)
.text(function(d) { return d; })
.attr("x", x_mid)
.attr("y", title_distance)
.attr("dy", 0.66 * title_size);
title.text(function(d) { return d; })
.style("fill", x.title_color)
.style("font-size", title_size)
.style("font-weight", x.title_weight)
.transition()
.duration(animation_duration)
.attr("x", x_mid)
.attr("y", title_distance)
.attr("dy", 0.66 * title_size);
};
})();
var updateTopAxis = (function() {
var top = instance.chart.select("g.fl-top-axis");
var line_container = top.select("g.fl-axis-line");
var tick_container = top.select("g.fl-axis-ticks");
var title_container = top.select("g.fl-axis-title");
return function() {
var show_this_axis = x.position === "top";
var ticks = show_this_axis ? instance._xTicks() : [];
var y0 = yScale.range()[1];
var old_y0 = (oldYScale || yScale).range()[1];
var title_distance = y0 - (tick_label_distance + ticks.max_box_height + remToPx(x.title_padding));
var line = line_container.selectAll("line")
.data(show_this_axis && x.line_visible ? [xScale.domain()] : []);
line.exit()
.style("stroke", line_color)

@@ -177,44 +249,179 @@ .style("stroke-width", line_width)

.duration(animation_duration)
.attr("y2", tick_length);
// Tick labels
sel.select("text")
.text(function(d) { return d.text; })
.attr("text-anchor", "end")
.style("fill", tick_label_color)
.style("font-size", tick_label_size)
.style("font-weight", x.tick_label_weight)
.attr("x1", x0)
.attr("x2", x0)
.remove();
var line_enter = line.enter()
.append("line")
.style("shape-rendering", "crispEdges")
.style("stroke-linecap", "square")
.style("stroke-width", line_width)
.attr("x1", enteringXScale.range()[0])
.attr("x2", enteringXScale.range()[0])
.attr("y1", old_y0)
.attr("y2", old_y0);
line.merge(line_enter)
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
.duration(animation_duration)
.style("opacity", setTickOpacity)
.attr("transform", tickLabelTransform);
});
.attr("x1", xScale.range()[0])
.attr("x2", xScale.range()[1])
.attr("y1", y0)
.attr("y2", y0);
var title = title_container.selectAll("text")
.data(x.title ? [x.title] : []);
var sorted_ticks = ticks.type === "numeric" ? ticks.slice().sort(tickSorter) : ticks;
title.exit().remove();
var tickLabelTransform = function(d) {
var angle = -x.tick_label_angle;
var rotate = angleToRotate(angle, 0, 0);
if (angle === 0) {
return xyToTranslate(-d.text_width/2, -(tick_label_distance + tick_label_size*0.33));
}
else if (angle === -90) {
return xyToTranslate(0, -tick_label_distance) + " " + rotate + " " + xyToTranslate(0, tick_label_size*0.33);
}
else {
return xyToTranslate(0, -tick_label_distance) + " " + rotate; // + " " + xyToTranslate(0, tick_label_size*0.66);
}
};
title.enter().append("text")
.attr("text-anchor", "middle")
.style("font-size", title_size)
.style("fill", x.title_color)
.style("font-weight", x.title_weight)
.transition()
.duration(0)
.delay(animation_duration)
.text(function(d) { return d; })
.attr("x", x_mid)
.attr("y", title_distance)
.attr("dy", 0.66 * title_size);
var tick_g = tick_container.selectAll("g")
.data(sorted_ticks, function(d) { return d.type + "-" + d.value; });
title.text(function(d) { return d; })
.style("fill", x.title_color)
.style("font-size", title_size)
.style("font-weight", x.title_weight)
.transition()
.duration(animation_duration)
.attr("x", x_mid)
.attr("y", title_distance)
.attr("dy", 0.66 * title_size);
var tick_g_exit = tick_g.exit();
tick_g_exit.transition()
.duration(animation_duration)
.attr("transform", function(d) {
var x = exitingXScale(d.value);
// Prevent errors being thrown when x is +/- Infinity
if (Math.abs(x) > 1e6) x = 1e6 * (x > 0 ? 1 : -1);
return xyToTranslate(x, y0);
})
.style("opacity", 0)
.remove();
tick_g_exit.each(function() {
var sel = select(this);
// Tick lines
sel.select("line")
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
.duration(animation_duration)
.attr("y2", -tick_length);
// Tick labels
sel.select("text")
.text(function(d) { return d.text; })
.style("fill", tick_label_color)
.style("font-size", tick_label_size)
.style("font-weight", x.tick_label_weight)
.attr("transform", tickLabelTransform)
.transition()
.duration(animation_duration);
});
var tick_g_enter = tick_g.enter().append("g");
tick_g_enter
.attr("transform", function(d) { return xyToTranslate(enteringXScale(d.value), old_y0); });
tick_g_enter.each(function() {
var sel = select(this);
// Tick lines
sel.append("line")
.attr("y2", -tick_length);
// Tick labels
sel.append("text").attr("text-anchor", "middle")
.attr("transform", tickLabelTransform);
});
var tick_g_update = tick_g.merge(tick_g_enter);
tick_g_update.transition()
.duration(animation_duration)
.attr("transform", function(d) { return xyToTranslate(xScale(d.value), y0); });
var setTickOpacity = (function() {
var placed_ticks = [];
var y_anchor = y0 + tick_label_distance;
return function(d) {
var x_anchor = xScale(d.value);
var p1q1 = [ x_anchor, y_anchor ];
var p2 = [ x_anchor + d.box_width_right, y_anchor + d.box_height_right];
var q2 = [ x_anchor - d.box_width_left, y_anchor + d.box_height_left];
var p = [ p1q1, p2 ];
var q = [ p1q1, q2 ];
for (var i = 0; i < placed_ticks.length; i++) {
var placed_tick = placed_ticks[i];
if (x_anchor <= placed_tick.x_anchor) {
if (linesIntersect(p, placed_tick.q)) return 0;
}
else {
if (linesIntersect(placed_tick.p, q)) return 0; // eslint-disable-line no-lonely-if
}
}
placed_ticks.push({ x_anchor: x_anchor, p: p, q: q });
return 1;
};
})();
tick_g_update.each(function() {
var sel = select(this);
// Tick lines
sel.select("line")
.style("stroke", line_color)
.style("stroke-width", line_width)
.transition()
.duration(animation_duration)
.attr("y2", -tick_length);
// Tick labels
sel.select("text")
.text(function(d) { return d.text; })
.attr("text-anchor", "start")
.style("fill", tick_label_color)
.style("font-size", tick_label_size)
.style("font-weight", x.tick_label_weight)
.transition()
.duration(animation_duration)
.style("opacity", setTickOpacity)
.attr("transform", tickLabelTransform);
});
var title = title_container.selectAll("text")
.data(show_this_axis && x.title ? [x.title] : []);
title.exit().remove();
title.enter().append("text")
.attr("text-anchor", "middle")
.style("font-size", title_size)
.style("fill", x.title_color)
.style("font-weight", x.title_weight)
.transition()
.duration(0)
.delay(animation_duration)
.text(function(d) { return d; })
.attr("x", x_mid)
.attr("y", title_distance)
.attr("dy", -0.33 * title_size);
title.text(function(d) { return d; })
.style("fill", x.title_color)
.style("font-size", title_size)
.style("font-weight", x.title_weight)
.transition()
.duration(animation_duration)
.attr("x", x_mid)
.attr("y", title_distance)
.attr("dy", -0.33 * title_size);
};
})();
return function() {
setValues();
updateBottomAxis();
updateTopAxis();
oldXScale = xScale;

@@ -221,0 +428,0 @@ oldYScale = yScale;

chart-layout.js

Sorry, the diff of this file is too big to display

x/settings.yml

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc