@d3fc/d3fc-chart - npm Package Compare versions

Comparing version 4.0.7 to 5.0.1

build/d3fc-chart.js

@@ -83,2 +83,3 @@ (function (global, factory) {
       var isContextLost = false;
+      var useDevicePixelRatio = true;
       var xAxisStore = store('tickFormat', 'ticks', 'tickArguments', 'tickSize', 'tickSizeInner', 'tickSizeOuter', 'tickValues', 'tickPadding', 'tickCenterLabel');
@@ -136,5 +137,7 @@
           }).text(yLabel(data));
-          webglDataJoin(container, webglPlotArea ? [data] : []).attr('set-webgl-viewport', '').classed('plot-area', true).on('draw', function (d, i, nodes) {
-            var canvas = d3Selection.select(nodes[i]).select('canvas').node();
-            webglPlotArea.context(isContextLost ? null : canvas.getContext('webgl')).xScale(xScale).yScale(yScale);
+          webglDataJoin(container, webglPlotArea ? [data] : []).attr('set-webgl-viewport', '').classed('plot-area', true).attr('use-device-pixel-ratio', useDevicePixelRatio).on('draw', function (d) {
+            var _event$detail = d3Selection.event.detail,
+                child = _event$detail.child,
+                pixelRatio = _event$detail.pixelRatio;
+            webglPlotArea.context(isContextLost ? null : child.getContext('webgl')).pixelRatio(pixelRatio).xScale(xScale).yScale(yScale);
             webglPlotArea(d);
@@ -152,44 +155,59 @@ });
           });
-          canvasDataJoin(container, canvasPlotArea ? [data] : []).classed('plot-area', true).on('draw', function (d, i, nodes) {
-            var canvas = d3Selection.select(nodes[i]).select('canvas').node();
-            canvasPlotArea.context(canvas.getContext('2d')).xScale(xScale).yScale(yScale);
+          canvasDataJoin(container, canvasPlotArea ? [data] : []).classed('plot-area', true).attr('use-device-pixel-ratio', useDevicePixelRatio).on('draw', function (d) {
+            var _event$detail2 = d3Selection.event.detail,
+                child = _event$detail2.child,
+                pixelRatio = _event$detail2.pixelRatio;
+            var context = child.getContext('2d');
+            context.save();
+
+            if (useDevicePixelRatio) {
+              context.scale(pixelRatio, pixelRatio);
+            }
+
+            canvasPlotArea.context(context).xScale(xScale).yScale(yScale);
             canvasPlotArea(d);
+            context.restore();
           });
           svgDataJoin(container, svgPlotArea ? [data] : []).classed('plot-area', true).on('draw', function (d, i, nodes) {
+            var child = d3Selection.event.detail.child;
             svgPlotArea.xScale(xScale).yScale(yScale);
-            transitionPropagator(d3Selection.select(nodes[i])).select('svg').call(svgPlotArea);
+            transitionPropagator(d3Selection.select(child).datum(d)).call(svgPlotArea);
           });
           xAxisDataJoin(container, [xOrient(data)]).attr('class', function (d) {
             return "x-axis ".concat(d, "-axis");
-          }).style('height', xAxisHeight(data)).on('measure', function (d, i, nodes) {
-            var _event$detail = d3Selection.event.detail,
-                width = _event$detail.width,
-                height = _event$detail.height;
+          }).style('height', xAxisHeight(data)).on('measure', function (d) {
+            var _event$detail3 = d3Selection.event.detail,
+                width = _event$detail3.width,
+                height = _event$detail3.height,
+                child = _event$detail3.child;
 
             if (d === 'top') {
-              d3Selection.select(nodes[i]).select('svg').attr('viewBox', "0 ".concat(-height, " ").concat(width, " ").concat(height));
+              d3Selection.select(child).attr('viewBox', "0 ".concat(-height, " ").concat(width, " ").concat(height));
             }
 
             xScale.range([0, width]);
-          }).on('draw', function (d, i, nodes) {
+          }).on('draw', function (d) {
+            var child = d3Selection.event.detail.child;
             var xAxisComponent = d === 'top' ? xAxis.top(xScale) : xAxis.bottom(xScale);
             xAxisComponent.decorate(xDecorate);
-            transitionPropagator(d3Selection.select(nodes[i])).select('svg').call(xAxisStore(xAxisComponent));
+            transitionPropagator(d3Selection.select(child).datum(d)).call(xAxisStore(xAxisComponent));
           });
           yAxisDataJoin(container, [yOrient(data)]).attr('class', function (d) {
             return "y-axis ".concat(d, "-axis");
-          }).style('width', yAxisWidth(data)).on('measure', function (d, i, nodes) {
-            var _event$detail2 = d3Selection.event.detail,
-                width = _event$detail2.width,
-                height = _event$detail2.height;
+          }).style('width', yAxisWidth(data)).on('measure', function (d) {
+            var _event$detail4 = d3Selection.event.detail,
+                width = _event$detail4.width,
+                height = _event$detail4.height,
+                child = _event$detail4.child;
 
             if (d === 'left') {
-              d3Selection.select(nodes[i]).select('svg').attr('viewBox', "".concat(-width, " 0 ").concat(width, " ").concat(height));
+              d3Selection.select(child).attr('viewBox', "".concat(-width, " 0 ").concat(width, " ").concat(height));
             }
 
             yScale.range([height, 0]);
-          }).on('draw', function (d, i, nodes) {
+          }).on('draw', function (d) {
+            var child = d3Selection.event.detail.child;
             var yAxisComponent = d === 'left' ? yAxis.left(yScale) : yAxis.right(yScale);
             yAxisComponent.decorate(yDecorate);
-            transitionPropagator(d3Selection.select(nodes[i])).select('svg').call(yAxisStore(yAxisComponent));
+            transitionPropagator(d3Selection.select(child).datum(d)).call(yAxisStore(yAxisComponent));
           });
@@ -328,2 +346,11 @@ container.each(function (d, i, nodes) {
 
+      cartesian.useDevicePixelRatio = function () {
+        if (!arguments.length) {
+          return useDevicePixelRatio;
+        }
+
+        useDevicePixelRatio = arguments.length <= 0 ? undefined : arguments[0];
+        return cartesian;
+      };
+
       return cartesian;
@@ -330,0 +357,0 @@ });

build/d3fc-chart.min.js

@@ -1,1 +0,1 @@
-(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports,require("@d3fc/d3fc-rebind"),require("d3-selection"),require("d3-scale"),require("@d3fc/d3fc-axis"),require("@d3fc/d3fc-data-join"),require("@d3fc/d3fc-series")):"function"==typeof define&&define.amd?define(["exports","@d3fc/d3fc-rebind","d3-selection","d3-scale","@d3fc/d3fc-axis","@d3fc/d3fc-data-join","@d3fc/d3fc-series"],b):(a=a||self,b(a.fc=a.fc||{},a.fc,a.d3,a.d3,a.fc,a.fc,a.fc))})(this,function(a,b,c,d,e,f,g){'use strict';var h=function(){for(var a={},b=function(b){for(var c,d=0,e=Object.keys(a);d<e.length;d++)c=e[d],b[c].apply(null,a[c]);return b},c=arguments.length,d=Array(c),e=0;e<c;e++)d[e]=arguments[e];for(var f=function(){var c=h[g];b[c]=function(){for(var d=arguments.length,e=Array(d),f=0;f<d;f++)e[f]=arguments[f];return e.length?(a[c]=e,b):a[c]}},g=0,h=d;g<h.length;g++)f();return b},i="d3fc-group.cartesian-chart{width:100%;height:100%;overflow:hidden;display:grid;display:-ms-grid;grid-template-columns:minmax(1em,max-content) auto 1fr auto minmax(1em,max-content);-ms-grid-columns:minmax(1em,max-content) auto 1fr auto minmax(1em,max-content);grid-template-rows:minmax(1em,max-content) auto 1fr auto minmax(1em,max-content);-ms-grid-rows:minmax(1em,max-content) auto 1fr auto minmax(1em,max-content);}\nd3fc-group.cartesian-chart>.top-label{align-self:center;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:center;grid-column:3;-ms-grid-column:3;grid-row:1;-ms-grid-row:1;}\nd3fc-group.cartesian-chart>.top-axis{height:2em;grid-column:3;-ms-grid-column:3;grid-row:2;-ms-grid-row:2;}\nd3fc-group.cartesian-chart>.left-label{align-self:center;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:center;grid-column:1;-ms-grid-column:1;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.left-axis{width:3em;grid-column:2;-ms-grid-column:2;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.plot-area{overflow:hidden;grid-column:3;-ms-grid-column:3;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.right-axis{width:3em;grid-column:4;-ms-grid-column:4;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.right-label{align-self:center;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:center;grid-column:5;-ms-grid-column:5;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.bottom-axis{height:2em;grid-column:3;-ms-grid-column:3;grid-row:4;-ms-grid-row:4;}\nd3fc-group.cartesian-chart>.bottom-label{align-self:center;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:center;grid-column:3;-ms-grid-column:3;grid-row:5;-ms-grid-row:5;}\nd3fc-group.cartesian-chart>.y-label{display:flex;transform:rotate(-90deg);width:1em;white-space:nowrap;justify-content:center;}",j=document.createElement("style");j.setAttribute("type","text/css"),document.querySelector("head").appendChild(j),j.styleSheet?j.styleSheet.cssText+=i:j.textContent+=i;var k=function(a){return"function"==typeof a?a:function(){return a}},l=function(){var a=m.apply(void 0,arguments),e=a.xScale,g=a.yScale,j=a.xAxis,l=a.yAxis,n=k(""),o=k(""),p=k(""),q=k(null),r=k(null),s=k("right"),t=k("bottom"),u=null,v=null,w=null,x=!1,y=h("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel"),z=function(){},A=h("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel"),B=function(){},C=function(){},D=f.dataJoin("d3fc-group","cartesian-chart"),E=f.dataJoin("d3fc-canvas","webgl-plot-area"),F=f.dataJoin("d3fc-canvas","canvas-plot-area"),G=f.dataJoin("d3fc-svg","svg-plot-area"),H=f.dataJoin("d3fc-svg","x-axis").key(function(a){return a}),I=f.dataJoin("d3fc-svg","y-axis").key(function(a){return a}),J=f.dataJoin("div","chart-label"),K=f.dataJoin("div","x-label").key(function(a){return a}),L=f.dataJoin("div","y-label").key(function(a){return a}),M=function(a){return function(b){return a.selection?b.transition(a):b}},N=function(a){var b=M(a);a.each(function(a,d,f){var h=D(c.select(f[d]),[a]);h.enter().attr("auto-resize",""),J(h,[t(a)]).attr("class",function(a){return"top"===a?"chart-label bottom-label":"chart-label top-label"}).style("margin-bottom",function(a){return"top"===a?0:"1em"}).style("margin-top",function(a){return"top"===a?"1em":0}).text(n(a)),K(h,[t(a)]).attr("class",function(a){return"x-label ".concat(a,"-label")}).text(o(a)),L(h,[s(a)]).attr("class",function(a){return"y-label ".concat(a,"-label")}).text(p(a)),E(h,u?[a]:[]).attr("set-webgl-viewport","").classed("plot-area",!0).on("draw",function(a,b,d){var f=c.select(d[b]).select("canvas").node();u.context(x?null:f.getContext("webgl")).xScale(e).yScale(g),u(a)}),h.select(".webgl-plot-area>canvas").on("webglcontextlost",function(){console.warn("WebGLRenderingContext lost"),c.event.preventDefault(),x=!0,h.node().requestRedraw()}).on("webglcontextrestored",function(){console.info("WebGLRenderingContext restored"),x=!1,h.node().requestRedraw()}),F(h,v?[a]:[]).classed("plot-area",!0).on("draw",function(a,b,d){var f=c.select(d[b]).select("canvas").node();v.context(f.getContext("2d")).xScale(e).yScale(g),v(a)}),G(h,w?[a]:[]).classed("plot-area",!0).on("draw",function(a,d,f){w.xScale(e).yScale(g),b(c.select(f[d])).select("svg").call(w)}),H(h,[t(a)]).attr("class",function(a){return"x-axis ".concat(a,"-axis")}).style("height",q(a)).on("measure",function(a,b,d){var f=c.event.detail,g=f.width,h=f.height;"top"===a&&c.select(d[b]).select("svg").attr("viewBox","0 ".concat(-h," ").concat(g," ").concat(h)),e.range([0,g])}).on("draw",function(a,d,f){var g="top"===a?j.top(e):j.bottom(e);g.decorate(z),b(c.select(f[d])).select("svg").call(y(g))}),I(h,[s(a)]).attr("class",function(a){return"y-axis ".concat(a,"-axis")}).style("width",r(a)).on("measure",function(a,b,d){var e=c.event.detail,f=e.width,h=e.height;"left"===a&&c.select(d[b]).select("svg").attr("viewBox","".concat(-f," 0 ").concat(f," ").concat(h)),g.range([h,0])}).on("draw",function(a,d,e){var f="left"===a?l.left(g):l.right(g);f.decorate(B),b(c.select(e[d])).select("svg").call(A(f))}),h.each(function(a,b,c){return c[b].requestRedraw()}),C(h,a,d)})},O=b.exclude(/range\w*/,/tickFormat/);return b.rebindAll(N,e,O,b.prefix("x")),b.rebindAll(N,g,O,b.prefix("y")),b.rebindAll(N,y,b.prefix("x")),b.rebindAll(N,A,b.prefix("y")),N.xOrient=function(){return arguments.length?(t=k(0>=arguments.length?void 0:arguments[0]),N):t},N.yOrient=function(){return arguments.length?(s=k(0>=arguments.length?void 0:arguments[0]),N):s},N.xDecorate=function(){return arguments.length?(z=0>=arguments.length?void 0:arguments[0],N):z},N.yDecorate=function(){return arguments.length?(B=0>=arguments.length?void 0:arguments[0],N):B},N.chartLabel=function(){return arguments.length?(n=k(0>=arguments.length?void 0:arguments[0]),N):n},N.xLabel=function(){return arguments.length?(o=k(0>=arguments.length?void 0:arguments[0]),N):o},N.yLabel=function(){return arguments.length?(p=k(0>=arguments.length?void 0:arguments[0]),N):p},N.xAxisHeight=function(){return arguments.length?(q=k(0>=arguments.length?void 0:arguments[0]),N):q},N.yAxisWidth=function(){return arguments.length?(r=k(0>=arguments.length?void 0:arguments[0]),N):r},N.webglPlotArea=function(){return arguments.length?(u=0>=arguments.length?void 0:arguments[0],N):u},N.canvasPlotArea=function(){return arguments.length?(v=0>=arguments.length?void 0:arguments[0],N):v},N.svgPlotArea=function(){return arguments.length?(w=0>=arguments.length?void 0:arguments[0],N):w},N.decorate=function(){return arguments.length?(C=0>=arguments.length?void 0:arguments[0],N):C},N},m=function(){for(var a={xScale:d.scaleIdentity(),yScale:d.scaleIdentity(),xAxis:{bottom:e.axisBottom,top:e.axisTop},yAxis:{right:e.axisRight,left:e.axisLeft}},b=arguments.length,c=Array(b),f=0;f<b;f++)c[f]=arguments[f];return 1!==c.length||c[0].domain||c[0].range?Object.assign(a,{xScale:c[0]||a.xScale,yScale:c[1]||a.yScale}):Object.assign(a,c[0])},n=function(a){return"function"==typeof a?a:function(){return a}},o=function(a,c){return function(){var d=n(""),e=c,f=function(){},g=l.apply(void 0,arguments),h=function(b){a(g,e),g.decorate(function(a,b,c){a.enter().select(".x-label").style("height","1em").style("line-height","1em");var e=g.yOrient()(b);a.enter().append("div").attr("class","y-label-container").style("grid-column","left"===e?1:5).style("-ms-grid-column","left"===e?1:5).style("grid-row",3).style("-ms-grid-row",3).style("width","1em").style("display","flex").style("align-items","center").style("justify-content","center").style("white-space","nowrap").append("div").attr("class","y-label").style("transform","rotate(-90deg)"),a.select(".y-label-container>.y-label").text(d),f(a,b,c)}),b.call(g)};return b.rebindAll(h,g,b.include(/^x/,/^y/,"chartLabel")),h.yLabel=function(){return arguments.length?(d=n(0>=arguments.length?void 0:arguments[0]),h):d},h.plotArea=function(){return arguments.length?(e=0>=arguments.length?void 0:arguments[0],h):e},h.decorate=function(){return arguments.length?(f=0>=arguments.length?void 0:arguments[0],h):f},h}},p=o(function(a,b){return a.svgPlotArea(b)},g.seriesSvgLine),q=o(function(a,b){return a.canvasPlotArea(b)},g.seriesCanvasLine);a.chartCanvasCartesian=q,a.chartCartesian=l,a.chartSvgCartesian=p,Object.defineProperty(a,"__esModule",{value:!0})});
+(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports,require("@d3fc/d3fc-rebind"),require("d3-selection"),require("d3-scale"),require("@d3fc/d3fc-axis"),require("@d3fc/d3fc-data-join"),require("@d3fc/d3fc-series")):"function"==typeof define&&define.amd?define(["exports","@d3fc/d3fc-rebind","d3-selection","d3-scale","@d3fc/d3fc-axis","@d3fc/d3fc-data-join","@d3fc/d3fc-series"],b):(a=a||self,b(a.fc=a.fc||{},a.fc,a.d3,a.d3,a.fc,a.fc,a.fc))})(this,function(a,b,c,d,e,f,g){'use strict';var h=function(){for(var a={},b=function(b){for(var c,d=0,e=Object.keys(a);d<e.length;d++)c=e[d],b[c].apply(null,a[c]);return b},c=arguments.length,d=Array(c),e=0;e<c;e++)d[e]=arguments[e];for(var f=function(){var c=h[g];b[c]=function(){for(var d=arguments.length,e=Array(d),f=0;f<d;f++)e[f]=arguments[f];return e.length?(a[c]=e,b):a[c]}},g=0,h=d;g<h.length;g++)f();return b},i="d3fc-group.cartesian-chart{width:100%;height:100%;overflow:hidden;display:grid;display:-ms-grid;grid-template-columns:minmax(1em,max-content) auto 1fr auto minmax(1em,max-content);-ms-grid-columns:minmax(1em,max-content) auto 1fr auto minmax(1em,max-content);grid-template-rows:minmax(1em,max-content) auto 1fr auto minmax(1em,max-content);-ms-grid-rows:minmax(1em,max-content) auto 1fr auto minmax(1em,max-content);}\nd3fc-group.cartesian-chart>.top-label{align-self:center;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:center;grid-column:3;-ms-grid-column:3;grid-row:1;-ms-grid-row:1;}\nd3fc-group.cartesian-chart>.top-axis{height:2em;grid-column:3;-ms-grid-column:3;grid-row:2;-ms-grid-row:2;}\nd3fc-group.cartesian-chart>.left-label{align-self:center;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:center;grid-column:1;-ms-grid-column:1;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.left-axis{width:3em;grid-column:2;-ms-grid-column:2;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.plot-area{overflow:hidden;grid-column:3;-ms-grid-column:3;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.right-axis{width:3em;grid-column:4;-ms-grid-column:4;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.right-label{align-self:center;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:center;grid-column:5;-ms-grid-column:5;grid-row:3;-ms-grid-row:3;}\nd3fc-group.cartesian-chart>.bottom-axis{height:2em;grid-column:3;-ms-grid-column:3;grid-row:4;-ms-grid-row:4;}\nd3fc-group.cartesian-chart>.bottom-label{align-self:center;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:center;grid-column:3;-ms-grid-column:3;grid-row:5;-ms-grid-row:5;}\nd3fc-group.cartesian-chart>.y-label{display:flex;transform:rotate(-90deg);width:1em;white-space:nowrap;justify-content:center;}",j=document.createElement("style");j.setAttribute("type","text/css"),document.querySelector("head").appendChild(j),j.styleSheet?j.styleSheet.cssText+=i:j.textContent+=i;var k=function(a){return"function"==typeof a?a:function(){return a}},l=function(){var a=m.apply(void 0,arguments),e=a.xScale,g=a.yScale,i=a.xAxis,j=a.yAxis,l=k(""),n=k(""),o=k(""),p=k(null),q=k(null),r=k("right"),s=k("bottom"),t=null,u=null,v=null,w=!1,x=!0,y=h("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel"),z=function(){},A=h("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel"),B=function(){},C=function(){},D=f.dataJoin("d3fc-group","cartesian-chart"),E=f.dataJoin("d3fc-canvas","webgl-plot-area"),F=f.dataJoin("d3fc-canvas","canvas-plot-area"),G=f.dataJoin("d3fc-svg","svg-plot-area"),H=f.dataJoin("d3fc-svg","x-axis").key(function(a){return a}),I=f.dataJoin("d3fc-svg","y-axis").key(function(a){return a}),J=f.dataJoin("div","chart-label"),K=f.dataJoin("div","x-label").key(function(a){return a}),L=f.dataJoin("div","y-label").key(function(a){return a}),M=function(a){return function(b){return a.selection?b.transition(a):b}},N=function(a){var b=M(a);a.each(function(a,d,f){var h=D(c.select(f[d]),[a]);h.enter().attr("auto-resize",""),J(h,[s(a)]).attr("class",function(a){return"top"===a?"chart-label bottom-label":"chart-label top-label"}).style("margin-bottom",function(a){return"top"===a?0:"1em"}).style("margin-top",function(a){return"top"===a?"1em":0}).text(l(a)),K(h,[s(a)]).attr("class",function(a){return"x-label ".concat(a,"-label")}).text(n(a)),L(h,[r(a)]).attr("class",function(a){return"y-label ".concat(a,"-label")}).text(o(a)),E(h,t?[a]:[]).attr("set-webgl-viewport","").classed("plot-area",!0).attr("use-device-pixel-ratio",x).on("draw",function(a){var b=c.event.detail,d=b.child,f=b.pixelRatio;t.context(w?null:d.getContext("webgl")).pixelRatio(f).xScale(e).yScale(g),t(a)}),h.select(".webgl-plot-area>canvas").on("webglcontextlost",function(){console.warn("WebGLRenderingContext lost"),c.event.preventDefault(),w=!0,h.node().requestRedraw()}).on("webglcontextrestored",function(){console.info("WebGLRenderingContext restored"),w=!1,h.node().requestRedraw()}),F(h,u?[a]:[]).classed("plot-area",!0).attr("use-device-pixel-ratio",x).on("draw",function(a){var b=c.event.detail,d=b.child,f=b.pixelRatio,h=d.getContext("2d");h.save(),x&&h.scale(f,f),u.context(h).xScale(e).yScale(g),u(a),h.restore()}),G(h,v?[a]:[]).classed("plot-area",!0).on("draw",function(a){var d=c.event.detail.child;v.xScale(e).yScale(g),b(c.select(d).datum(a)).call(v)}),H(h,[s(a)]).attr("class",function(a){return"x-axis ".concat(a,"-axis")}).style("height",p(a)).on("measure",function(a){var b=c.event.detail,d=b.width,f=b.height,g=b.child;"top"===a&&c.select(g).attr("viewBox","0 ".concat(-f," ").concat(d," ").concat(f)),e.range([0,d])}).on("draw",function(a){var d=c.event.detail.child,f="top"===a?i.top(e):i.bottom(e);f.decorate(z),b(c.select(d).datum(a)).call(y(f))}),I(h,[r(a)]).attr("class",function(a){return"y-axis ".concat(a,"-axis")}).style("width",q(a)).on("measure",function(a){var b=c.event.detail,d=b.width,e=b.height,f=b.child;"left"===a&&c.select(f).attr("viewBox","".concat(-d," 0 ").concat(d," ").concat(e)),g.range([e,0])}).on("draw",function(a){var d=c.event.detail.child,e="left"===a?j.left(g):j.right(g);e.decorate(B),b(c.select(d).datum(a)).call(A(e))}),h.each(function(a,b,c){return c[b].requestRedraw()}),C(h,a,d)})},O=b.exclude(/range\w*/,/tickFormat/);return b.rebindAll(N,e,O,b.prefix("x")),b.rebindAll(N,g,O,b.prefix("y")),b.rebindAll(N,y,b.prefix("x")),b.rebindAll(N,A,b.prefix("y")),N.xOrient=function(){return arguments.length?(s=k(0>=arguments.length?void 0:arguments[0]),N):s},N.yOrient=function(){return arguments.length?(r=k(0>=arguments.length?void 0:arguments[0]),N):r},N.xDecorate=function(){return arguments.length?(z=0>=arguments.length?void 0:arguments[0],N):z},N.yDecorate=function(){return arguments.length?(B=0>=arguments.length?void 0:arguments[0],N):B},N.chartLabel=function(){return arguments.length?(l=k(0>=arguments.length?void 0:arguments[0]),N):l},N.xLabel=function(){return arguments.length?(n=k(0>=arguments.length?void 0:arguments[0]),N):n},N.yLabel=function(){return arguments.length?(o=k(0>=arguments.length?void 0:arguments[0]),N):o},N.xAxisHeight=function(){return arguments.length?(p=k(0>=arguments.length?void 0:arguments[0]),N):p},N.yAxisWidth=function(){return arguments.length?(q=k(0>=arguments.length?void 0:arguments[0]),N):q},N.webglPlotArea=function(){return arguments.length?(t=0>=arguments.length?void 0:arguments[0],N):t},N.canvasPlotArea=function(){return arguments.length?(u=0>=arguments.length?void 0:arguments[0],N):u},N.svgPlotArea=function(){return arguments.length?(v=0>=arguments.length?void 0:arguments[0],N):v},N.decorate=function(){return arguments.length?(C=0>=arguments.length?void 0:arguments[0],N):C},N.useDevicePixelRatio=function(){return arguments.length?(x=0>=arguments.length?void 0:arguments[0],N):x},N},m=function(){for(var a={xScale:d.scaleIdentity(),yScale:d.scaleIdentity(),xAxis:{bottom:e.axisBottom,top:e.axisTop},yAxis:{right:e.axisRight,left:e.axisLeft}},b=arguments.length,c=Array(b),f=0;f<b;f++)c[f]=arguments[f];return 1!==c.length||c[0].domain||c[0].range?Object.assign(a,{xScale:c[0]||a.xScale,yScale:c[1]||a.yScale}):Object.assign(a,c[0])},n=function(a){return"function"==typeof a?a:function(){return a}},o=function(a,c){return function(){var d=n(""),e=c,f=function(){},g=l.apply(void 0,arguments),h=function(b){a(g,e),g.decorate(function(a,b,c){a.enter().select(".x-label").style("height","1em").style("line-height","1em");var e=g.yOrient()(b);a.enter().append("div").attr("class","y-label-container").style("grid-column","left"===e?1:5).style("-ms-grid-column","left"===e?1:5).style("grid-row",3).style("-ms-grid-row",3).style("width","1em").style("display","flex").style("align-items","center").style("justify-content","center").style("white-space","nowrap").append("div").attr("class","y-label").style("transform","rotate(-90deg)"),a.select(".y-label-container>.y-label").text(d),f(a,b,c)}),b.call(g)};return b.rebindAll(h,g,b.include(/^x/,/^y/,"chartLabel")),h.yLabel=function(){return arguments.length?(d=n(0>=arguments.length?void 0:arguments[0]),h):d},h.plotArea=function(){return arguments.length?(e=0>=arguments.length?void 0:arguments[0],h):e},h.decorate=function(){return arguments.length?(f=0>=arguments.length?void 0:arguments[0],h):f},h}},p=o(function(a,b){return a.svgPlotArea(b)},g.seriesSvgLine),q=o(function(a,b){return a.canvasPlotArea(b)},g.seriesCanvasLine);a.chartCanvasCartesian=q,a.chartCartesian=l,a.chartSvgCartesian=p,Object.defineProperty(a,"__esModule",{value:!0})});

CHANGELOG.md

@@ -6,2 +6,28 @@ # Change Log
 
+## [5.0.1](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-chart@5.0.0...@d3fc/d3fc-chart@5.0.1) (2020-09-01)
+
+**Note:** Version bump only for package @d3fc/d3fc-chart
+
+
+
+
+
+# [5.0.0](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-chart@4.0.7...@d3fc/d3fc-chart@5.0.0) (2020-08-14)
+
+
+### Features
+
+* add pixelRatio property to webgl series ([08c2de1](https://github.com/d3fc/d3fc/commit/08c2de1))
+* added useDevicePixelRatio property to cartesian chart ([737d140](https://github.com/d3fc/d3fc/commit/737d140))
+* d3fc-element exposes the underlying element via lifecycle events ([c58807e](https://github.com/d3fc/d3fc/commit/c58807e))
+
+
+### BREAKING CHANGES
+
+* webgl series must now expose a pixelRatio property
+
+
+
+
+
 ## [4.0.7](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-chart@4.0.6...@d3fc/d3fc-chart@4.0.7) (2020-07-14)
@@ -8,0 +34,0 @@

package.json

 {
   "name": "@d3fc/d3fc-chart",
-  "version": "4.0.7",
+  "version": "5.0.1",
   "description": "A simple Cartesian chart component that renders to canvas or SVG.",
@@ -26,5 +26,5 @@ "license": "MIT",
     "@d3fc/d3fc-data-join": "^6.0.1",
-    "@d3fc/d3fc-element": "^6.0.1",
+    "@d3fc/d3fc-element": "^6.1.0",
     "@d3fc/d3fc-rebind": "^6.0.1",
-    "@d3fc/d3fc-series": "^5.1.3"
+    "@d3fc/d3fc-series": "^6.0.1"
   },
@@ -38,3 +38,3 @@ "peerDependencies": {
   },
-  "gitHead": "3c6890b82dbb430bafd52420c0dd506861f16f5d"
+  "gitHead": "bed60ca8c84c6010bb0cc0f3643aead633c81204"
 }

README.md

@@ -269,2 +269,6 @@ # d3fc-chart
 
+<a name="cartesian_useDevicePixelRatio" href="#cartesian_useDevicePixelRatio">#</a> *cartesian*.**useDevicePixelRatio**(*value*)
+
+If the boolean *value* is specified, sets whether the Canvas / WebGL should be scaled based on the resolution of the display device, and returns the Cartesian chart. If *value* is not specified, returns the current value.
+
 <a name="cartesian_chartLabel" href="#cartesian_chartLabel">#</a> *cartesian*.**chartLabel**(*label*)
@@ -271,0 +275,0 @@ <a name="cartesian_xLabel" href="#cartesian_xLabel">#</a> *cartesian*.**xLabel**(*label*)

src/cartesian.js

@@ -26,2 +26,3 @@ import { select, event } from 'd3-selection';
     let isContextLost = false;
+    let useDevicePixelRatio = true;
     let xAxisStore = store('tickFormat', 'ticks', 'tickArguments', 'tickSize', 'tickSizeInner', 'tickSizeOuter', 'tickValues', 'tickPadding', 'tickCenterLabel');
@@ -77,7 +78,7 @@ let xDecorate = () => { };
                 .classed('plot-area', true)
-                .on('draw', (d, i, nodes) => {
-                    const canvas = select(nodes[i])
-                        .select('canvas')
-                        .node();
-                    webglPlotArea.context(isContextLost ? null : canvas.getContext('webgl'))
+                .attr('use-device-pixel-ratio', useDevicePixelRatio)
+                .on('draw', (d) => {
+                    const { child, pixelRatio } = event.detail;
+                    webglPlotArea.context(isContextLost ? null : child.getContext('webgl'))
+                        .pixelRatio(pixelRatio)
                         .xScale(xScale)
@@ -103,10 +104,15 @@ .yScale(yScale);
                 .classed('plot-area', true)
-                .on('draw', (d, i, nodes) => {
-                    const canvas = select(nodes[i])
-                        .select('canvas')
-                        .node();
-                    canvasPlotArea.context(canvas.getContext('2d'))
+                .attr('use-device-pixel-ratio', useDevicePixelRatio)
+                .on('draw', (d) => {
+                    const { child, pixelRatio } = event.detail;
+                    const context = child.getContext('2d');
+                    context.save();
+                    if (useDevicePixelRatio) {
+                        context.scale(pixelRatio, pixelRatio);
+                    }
+                    canvasPlotArea.context(context)
                         .xScale(xScale)
                         .yScale(yScale);
                     canvasPlotArea(d);
+                    context.restore();
                 });
@@ -117,6 +123,6 @@
                 .on('draw', (d, i, nodes) => {
+                    const { child } = event.detail;
                     svgPlotArea.xScale(xScale)
                         .yScale(yScale);
-                    transitionPropagator(select(nodes[i]))
-                        .select('svg')
+                    transitionPropagator(select(child).datum(d))
                         .call(svgPlotArea);
@@ -128,7 +134,6 @@ });
                 .style('height', xAxisHeight(data))
-                .on('measure', (d, i, nodes) => {
-                    const { width, height } = event.detail;
+                .on('measure', (d) => {
+                    const { width, height, child } = event.detail;
                     if (d === 'top') {
-                        select(nodes[i])
-                            .select('svg')
+                        select(child)
                             .attr('viewBox', `0 ${-height} ${width} ${height}`);
@@ -138,7 +143,7 @@ }
                 })
-                .on('draw', (d, i, nodes) => {
+                .on('draw', (d) => {
+                    const { child } = event.detail;
                     const xAxisComponent = d === 'top' ? xAxis.top(xScale) : xAxis.bottom(xScale);
                     xAxisComponent.decorate(xDecorate);
-                    transitionPropagator(select(nodes[i]))
-                        .select('svg')
+                    transitionPropagator(select(child).datum(d))
                         .call(xAxisStore(xAxisComponent));
@@ -150,7 +155,6 @@ });
                 .style('width', yAxisWidth(data))
-                .on('measure', (d, i, nodes) => {
-                    const { width, height } = event.detail;
+                .on('measure', (d) => {
+                    const { width, height, child } = event.detail;
                     if (d === 'left') {
-                        select(nodes[i])
-                            .select('svg')
+                        select(child)
                             .attr('viewBox', `${-width} 0 ${width} ${height}`);
@@ -160,7 +164,7 @@ }
                 })
-                .on('draw', (d, i, nodes) => {
+                .on('draw', (d) => {
+                    const { child } = event.detail;
                     const yAxisComponent = d === 'left' ? yAxis.left(yScale) : yAxis.right(yScale);
                     yAxisComponent.decorate(yDecorate);
-                    transitionPropagator(select(nodes[i]))
-                        .select('svg')
+                    transitionPropagator(select(child).datum(d))
                         .call(yAxisStore(yAxisComponent));
@@ -275,2 +279,9 @@ });
     };
+    cartesian.useDevicePixelRatio = (...args) => {
+        if (!args.length) {
+            return useDevicePixelRatio;
+        }
+        useDevicePixelRatio = args[0];
+        return cartesian;
+    };
 
@@ -277,0 +288,0 @@ return cartesian;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84645

increased by3.29%

Lines of code

869

increased by4.2%

Number of lines in readme file

323

increased by1.25%

Dependency changes

• + Added@d3fc/d3fc-series@6.1.3(transitive)

• + Added@d3fc/d3fc-webgl@3.2.1(transitive)

• - Removed@d3fc/d3fc-series@5.1.3(transitive)

• - Removed@d3fc/d3fc-webgl@2.0.2(transitive)

• Updated@d3fc/d3fc-element@^6.1.0

• Updated@d3fc/d3fc-series@^6.0.1