@d3fc/d3fc-chart - npm Package Compare versions

Comparing version 2.6.16 to 2.7.0

build/d3fc-chart.js

@@ -7,2 +7,5 @@ (function (global, factory) {
 
+    var d3Scale__default = 'default' in d3Scale ? d3Scale['default'] : d3Scale;
+    var d3Shape__default = 'default' in d3Shape ? d3Shape['default'] : d3Shape;
+
     var createReboundMethod = ((target, source, name) => {
@@ -470,2 +473,3 @@ const method = source[name];
       var xOrient = functor('bottom');
+      var webglPlotArea = null;
       var canvasPlotArea = null;
@@ -484,3 +488,4 @@ var svgPlotArea = null;
       var containerDataJoin = dataJoin('d3fc-group', 'cartesian-chart');
-      var canvasDataJoin = dataJoin('d3fc-canvas', 'plot-area');
+      var webglDataJoin = dataJoin('d3fc-canvas', 'gl-plot-area');
+      var canvasDataJoin = dataJoin('d3fc-canvas', 'canvas-plot-area');
       var svgDataJoin = dataJoin('d3fc-svg', 'plot-area');
@@ -525,4 +530,9 @@ var xAxisDataJoin = dataJoin('d3fc-svg', 'x-axis').key(function (d) {
           }).text(yLabel(data));
-          canvasDataJoin(container, canvasPlotArea ? [data] : []).on('draw', function (d, i, nodes) {
+          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(canvas.getContext('webgl')).xScale(xScale).yScale(yScale);
+            webglPlotArea(d);
+          });
+          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);
@@ -665,2 +675,11 @@ canvasPlotArea(d);
 
+      cartesian.webglPlotArea = function () {
+        if (!arguments.length) {
+          return webglPlotArea;
+        }
+
+        webglPlotArea = arguments.length <= 0 ? undefined : arguments[0];
+        return cartesian;
+      };
+
       cartesian.canvasPlotArea = function () {
@@ -788,3 +807,3 @@ if (!arguments.length) {
 
-    // Checks that passes properties are 'defined', meaning that calling them with (d, i) returns non null values
+    // Checks that passed properties are 'defined', meaning that calling them with (d, i) returns non null values
     function defined() {
@@ -791,0 +810,0 @@ const outerArguments = arguments;

build/d3fc-chart.min.js

@@ -1,1 +0,1 @@
-(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports,require("d3-selection"),require("d3-scale"),require("d3-shape"),require("d3-path"),require("d3-array")):"function"==typeof define&&define.amd?define(["exports","d3-selection","d3-scale","d3-shape","d3-path","d3-array"],b):(a=a||self,b(a.fc=a.fc||{},a.d3,a.d3,a.d3,a.d3,a.d3))})(this,function(a,b,c,d){'use strict';function e(){const a=arguments;return function(b,d){for(let e=0,c=a.length;e<c;e++)if(null==a[e](b,d))return!1;return!0}}var f=(a,b,c)=>{const d=b[c];if("function"!=typeof d)throw new Error(`Attempt to rebind ${c} which isn't a function on the source object`);return(...c)=>{var e=d.apply(b,c);return e===b?a:e}},g=(a,b,...c)=>{for(const d of c)a[d]=f(a,b,d);return a};const h=a=>b=>a.reduce((a,b)=>a&&b(a),b);var i=(a,b,...c)=>{const d=h(c);for(const e of Object.keys(b)){const c=d(e);c&&(a[c]=f(a,b,e))}return a},j=a=>a.map(a=>"string"==typeof a?new RegExp(`^${a}$`):a),k=(...a)=>(a=j(a),b=>a.every(a=>!a.test(b))&&b),l=(...a)=>(a=j(a),b=>a.some(a=>a.test(b))&&b);const m=a=>a[0].toUpperCase()+a.slice(1);var n=a=>b=>a+m(b);const o=1e-6;var p=(a,b)=>{a=a||"g";let c=(a,b)=>b,d=null;const e=function(e,f){f=f||(a=>a);const g=e.selection?e:null;g&&(e=e.selection());const h=e.selectAll((a,b,c)=>Array.from(c[b].childNodes).filter(a=>1===a.nodeType)).filter(null==b?a:`${a}.${b}`);let i=h.data(f,c);const j=i.enter().append(a).attr("class",b);let k=i.exit();i=i.merge(j);const l=g||d;return l&&(i=i.transition(l).style("opacity",1),j.style("opacity",o),k=k.transition(l).style("opacity",o)),k.remove(),i.enter=()=>j,i.exit=()=>k,i};return e.element=(...b)=>b.length?(a=b[0],e):a,e.className=(...a)=>a.length?(b=a[0],e):b,e.key=(...a)=>a.length?(c=a[0],e):c,e.transition=(...a)=>a.length?(d=a[0],e):d,e};const q=a=>a,r=(a,c,e={})=>{let f=[10],h=null,i=()=>{},j=null,k=6,l=6,m=3;const n=d.line(),o=p("g","tick").key(q),r=p("path","domain"),s=()=>({offset:[0,l+m]}),t=()=>({path:[[0,0],[0,l]]}),u=e.labelOffset||s,v=e.tickPath||t,w=(a,b)=>{var c=Math.round;let e=0;return a.bandwidth&&(e=a.bandwidth()/2,a.round()&&(e=c(e))),c=>b(a(c)+e,0)},x=(a,b)=>z()?`translate(${b}, ${a})`:`translate(${a}, ${b})`,y=a=>z()?a.map(a=>[a[1],a[0]]):a,z=()=>"left"===a||"right"===a,A=(a,b,d)=>c[a]?c[a].apply(c,b):d,B=d=>{d.selection&&(o.transition(d),r.transition(d)),d.each((d,e,l)=>{const m=l[e],p=b.select(m);m.__scale__||p.attr("fill","none").attr("font-size",10).attr("font-family","sans-serif").attr("text-anchor","right"===a?"start":"left"===a?"end":"middle");const s=m.__scale__||c;m.__scale__=c.copy();const t=null==h?A("ticks",f,c.domain()):h,B=null==j?A("tickFormat",f,q):j,C="bottom"===a||"right"===a?1:-1,D=([a,b])=>[a,C*b],E=c.range(),F=y([[E[0],C*k],[E[0],0],[E[1],0],[E[1],C*k]]),G=r(p,[d]);G.attr("d",n(F)).attr("stroke","#000");const H=o(p,t),g=t.map((a,b)=>u(a,b,t)),I=t.map((a,b)=>v(a,b,t));H.enter().attr("transform",w(s,x)).append("path").attr("stroke","#000"),H.enter().append("text").attr("transform",(a,b)=>x(...D(g[b].offset))).attr("fill","#000"),H.exit().attr("transform",w(c,x)),H.select("path").attr("visibility",(a,b)=>I[b].hidden&&"hidden").attr("d",(a,b)=>n(y(I[b].path.map(D)))),H.select("text").attr("visibility",(a,b)=>g[b].hidden&&"hidden").attr("transform",(a,b)=>x(...D(g[b].offset))).attr("dy",()=>{let b="0em";return z()?b="0.32em":"bottom"===a&&(b="0.71em"),b}).text(B),H.attr("transform",w(c,x)),i(H,d,e)})};return B.tickFormat=(...a)=>a.length?(j=a[0],B):j,B.tickSize=(...a)=>a.length?(l=k=+a[0],B):l,B.tickSizeInner=(...a)=>a.length?(l=+a[0],B):l,B.tickSizeOuter=(...a)=>a.length?(k=+a[0],B):k,B.tickPadding=(...a)=>a.length?(m=a[0],B):m,B.decorate=(...a)=>a.length?(i=a[0],B):i,B.scale=(...a)=>a.length?(c=a[0],B):c,B.ticks=(...a)=>(f=[...a],B),B.tickArguments=(...a)=>a.length?(f=null==a[0]?[]:[...a[0]],B):f.slice(),B.tickValues=(...a)=>a.length?(h=null==a[0]?[]:[...a[0]],B):h.slice(),B.orient=()=>a,B},s=(a,b)=>{let c=!1;const d=(a,d,f)=>{let g=0,h=e.tickSizeInner()+e.tickPadding(),i=!1;if(c){const c=b(a),j=d<f.length-1?b(f[d+1]):b.range()[1];g=(j-c)/2,h=e.tickPadding(),i=d===f.length-1&&c===j}return{offset:[g,h],hidden:i}},e=r(a,b,{labelOffset:d}),f=a=>e(a);return f.tickCenterLabel=(...a)=>a.length?(c=a[0],f):c,i(f,e),f},t=a=>s("top",a),u=a=>s("bottom",a),v=a=>s("left",a),w=a=>s("right",a);var x=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},y="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;}",z=document.createElement("style");z.setAttribute("type","text/css"),document.querySelector("head").appendChild(z),z.styleSheet?z.styleSheet.cssText+=y:z.textContent+=y;var A=function(a){return"function"==typeof a?a:function(){return a}},B=function(){var a=C.apply(void 0,arguments),c=a.xScale,e=a.yScale,f=a.xAxis,g=a.yAxis,h=A(""),j=A(""),l=A(""),m=A(null),o=A(null),q=A("right"),r=A("bottom"),s=null,t=null,u=x("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel"),v=function(){},w=x("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel"),y=function(){},z=function(){},B=p("d3fc-group","cartesian-chart"),D=p("d3fc-canvas","plot-area"),E=p("d3fc-svg","plot-area"),F=p("d3fc-svg","x-axis").key(function(a){return a}),G=p("d3fc-svg","y-axis").key(function(a){return a}),H=p("div","chart-label"),I=p("div","x-label").key(function(a){return a}),J=p("div","y-label").key(function(a){return a}),K=function(a){return function(b){return a.selection?b.transition(a):b}},L=function(a){var k=K(a);a.each(function(a,d,i){var n=B(b.select(i[d]),[a]);n.enter().attr("auto-resize",""),H(n,[r(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(h(a)),I(n,[r(a)]).attr("class",function(a){return"x-label ".concat(a,"-label")}).text(j(a)),J(n,[q(a)]).attr("class",function(a){return"y-label ".concat(a,"-label")}).text(l(a)),D(n,s?[a]:[]).on("draw",function(a,d,f){var g=b.select(f[d]).select("canvas").node();s.context(g.getContext("2d")).xScale(c).yScale(e),s(a)}),E(n,t?[a]:[]).on("draw",function(a,d,f){t.xScale(c).yScale(e),k(b.select(f[d])).select("svg").call(t)}),F(n,[r(a)]).attr("class",function(a){return"x-axis ".concat(a,"-axis")}).style("height",m(a)).on("measure",function(a,d,e){var f=b.event.detail,g=f.width,h=f.height;"top"===a&&b.select(e[d]).select("svg").attr("viewBox","0 ".concat(-h," ").concat(g," ").concat(h)),c.range([0,g])}).on("draw",function(a,d,e){var g="top"===a?f.top(c):f.bottom(c);g.decorate(v),k(b.select(e[d])).select("svg").call(u(g))}),G(n,[q(a)]).attr("class",function(a){return"y-axis ".concat(a,"-axis")}).style("width",o(a)).on("measure",function(a,c,d){var f=b.event.detail,g=f.width,h=f.height;"left"===a&&b.select(d[c]).select("svg").attr("viewBox","".concat(-g," 0 ").concat(g," ").concat(h)),e.range([h,0])}).on("draw",function(a,c,d){var f="left"===a?g.left(e):g.right(e);f.decorate(y),k(b.select(d[c])).select("svg").call(w(f))}),n.each(function(a,b,c){return c[b].requestRedraw()}),z(n,a,d)})},M=k(/range\w*/,/tickFormat/);return i(L,c,M,n("x")),i(L,e,M,n("y")),i(L,u,n("x")),i(L,w,n("y")),L.xOrient=function(){return arguments.length?(r=A(0>=arguments.length?void 0:arguments[0]),L):r},L.yOrient=function(){return arguments.length?(q=A(0>=arguments.length?void 0:arguments[0]),L):q},L.xDecorate=function(){return arguments.length?(v=0>=arguments.length?void 0:arguments[0],L):v},L.yDecorate=function(){return arguments.length?(y=0>=arguments.length?void 0:arguments[0],L):y},L.chartLabel=function(){return arguments.length?(h=A(0>=arguments.length?void 0:arguments[0]),L):h},L.xLabel=function(){return arguments.length?(j=A(0>=arguments.length?void 0:arguments[0]),L):j},L.yLabel=function(){return arguments.length?(l=A(0>=arguments.length?void 0:arguments[0]),L):l},L.xAxisHeight=function(){return arguments.length?(m=A(0>=arguments.length?void 0:arguments[0]),L):m},L.yAxisWidth=function(){return arguments.length?(o=A(0>=arguments.length?void 0:arguments[0]),L):o},L.canvasPlotArea=function(){return arguments.length?(s=0>=arguments.length?void 0:arguments[0],L):s},L.svgPlotArea=function(){return arguments.length?(t=0>=arguments.length?void 0:arguments[0],L):t},L.decorate=function(){return arguments.length?(z=0>=arguments.length?void 0:arguments[0],L):z},L},C=function(){for(var a={xScale:c.scaleIdentity(),yScale:c.scaleIdentity(),xAxis:{bottom:u,top:t},yAxis:{right:w,left:v}},b=arguments.length,d=Array(b),e=0;e<b;e++)d[e]=arguments[e];return 1!==d.length||d[0].domain||d[0].range?Object.assign(a,{xScale:d[0]||a.xScale,yScale:d[1]||a.yScale}):Object.assign(a,d[0])},D=function(a){return"function"==typeof a?a:function(){return a}},E=function(a,b){return function(){var c=D(""),d=b,e=function(){},f=B.apply(void 0,arguments),g=function(b){a(f,d),f.decorate(function(a,b,d){a.enter().select(".x-label").style("height","1em").style("line-height","1em");var g=f.yOrient()(b);a.enter().append("div").attr("class","y-label-container").style("grid-column","left"===g?1:5).style("-ms-grid-column","left"===g?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(c),e(a,b,d)}),b.call(f)};return i(g,f,l(/^x/,/^y/,"chartLabel")),g.yLabel=function(){return arguments.length?(c=D(0>=arguments.length?void 0:arguments[0]),g):c},g.plotArea=function(){return arguments.length?(d=0>=arguments.length?void 0:arguments[0],g):d},g.decorate=function(){return arguments.length?(e=0>=arguments.length?void 0:arguments[0],g):e},g}},F=a=>"function"==typeof a?a:()=>a,G=(a,b)=>"left"===a?b/2:"right"===a?-b/2:0,H=a=>{const b=Object.assign({},a),c=()=>{};return Object.keys(b).forEach(a=>{c[a]=(...d)=>d.length?(b[a]=d[0],c):b[a]}),c},I=()=>{let a=()=>0,b=a=>a.x,f=a=>a.y,g="center",h=()=>5,j="vertical";const k=H({decorate:()=>{},defined:(c,d)=>e(a,b,f)(c,d),xScale:c.scaleIdentity(),yScale:c.scaleIdentity()});return k.values=(c,d)=>{const e=h(c,d),i=G(g,e),l=k.xScale(),m=k.yScale();if("vertical"===j){const g=m(f(c,d),d),h=m(a(c,d),d),j=l(b(c,d),d)+i;return{d:c,x:j,y:g,y0:h,width:e,height:g-h,origin:[j,g],baseOrigin:[j,h],transposedX:j,transposedY:g}}else{const g=l(f(c,d),d),h=l(a(c,d),d),j=m(b(c,d),d)+i;return{d:c,x:j,y:g,y0:h,width:e,height:g-h,origin:[g,j],baseOrigin:[h,j],transposedX:g,transposedY:j}}},k.xValues=()=>"vertical"===j?[b]:[a,f],k.yValues=()=>"vertical"===j?[a,f]:[b],k.baseValue=(...b)=>b.length?(a=F(b[0]),k):a,k.crossValue=(...a)=>a.length?(b=F(a[0]),k):b,k.mainValue=(...a)=>a.length?(f=F(a[0]),k):f,k.bandwidth=(...a)=>a.length?(h=F(a[0]),k):h,k.align=(...a)=>a.length?(g=a[0],k):g,k.orient=(...a)=>a.length?(j=a[0],k):j,k};var J={red:"#c60",green:"#6c0",black:"#000",gray:"#ddd",darkGray:"#999"},K=E(function(a,b){return a.svgPlotArea(b)},()=>{const a=I(),c=d.line().x((b,c)=>a.values(b,c).transposedX).y((b,c)=>a.values(b,c).transposedY),e=p("path","line"),f=d=>{d.selection&&e.transition(d),c.defined(a.defined()),d.each((d,f,g)=>{const h=e(b.select(g[f]),[d]);h.enter().attr("fill","none").attr("stroke",J.black),h.attr("d",c),a.decorate()(h,d,f)})};return i(f,a,k("baseValue","bandwidth","align")),g(f,e,"key"),g(f,c,"curve"),f}),L=E(function(a,b){return a.canvasPlotArea(b)},()=>{const a=I(),b=d.line().x((b,c)=>a.values(b,c).transposedX).y((b,c)=>a.values(b,c).transposedY),c=c=>{const d=b.context();d.beginPath(),b.defined(a.defined())(c),d.strokeStyle=J.black,d.fillStyle="transparent",a.decorate()(d,c),d.fill(),d.stroke(),d.closePath()};return i(c,a,k("baseValue","bandwidth","align")),g(c,b,"curve","context"),c});a.chartCanvasCartesian=L,a.chartCartesian=B,a.chartSvgCartesian=K,Object.defineProperty(a,"__esModule",{value:!0})});
+(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports,require("d3-selection"),require("d3-scale"),require("d3-shape"),require("d3-path"),require("d3-array")):"function"==typeof define&&define.amd?define(["exports","d3-selection","d3-scale","d3-shape","d3-path","d3-array"],b):(a=a||self,b(a.fc=a.fc||{},a.d3,a.d3,a.d3,a.d3,a.d3))})(this,function(a,b,c,d){'use strict';function e(){const a=arguments;return function(b,d){for(let e=0,c=a.length;e<c;e++)if(null==a[e](b,d))return!1;return!0}}var f="default"in c?c["default"]:c,g="default"in d?d["default"]:d,h=(a,b,c)=>{const d=b[c];if("function"!=typeof d)throw new Error(`Attempt to rebind ${c} which isn't a function on the source object`);return(...c)=>{var e=d.apply(b,c);return e===b?a:e}},i=(a,b,...c)=>{for(const d of c)a[d]=h(a,b,d);return a};const j=a=>b=>a.reduce((a,b)=>a&&b(a),b);var k=(a,b,...c)=>{const d=j(c);for(const e of Object.keys(b)){const c=d(e);c&&(a[c]=h(a,b,e))}return a},l=a=>a.map(a=>"string"==typeof a?new RegExp(`^${a}$`):a),m=(...a)=>(a=l(a),b=>a.every(a=>!a.test(b))&&b),n=(...a)=>(a=l(a),b=>a.some(a=>a.test(b))&&b);const o=a=>a[0].toUpperCase()+a.slice(1);var p=a=>b=>a+o(b);const q=1e-6;var r=(a,b)=>{a=a||"g";let c=(a,b)=>b,d=null;const e=function(e,f){f=f||(a=>a);const g=e.selection?e:null;g&&(e=e.selection());const h=e.selectAll((a,b,c)=>Array.from(c[b].childNodes).filter(a=>1===a.nodeType)).filter(null==b?a:`${a}.${b}`);let i=h.data(f,c);const j=i.enter().append(a).attr("class",b);let k=i.exit();i=i.merge(j);const l=g||d;return l&&(i=i.transition(l).style("opacity",1),j.style("opacity",q),k=k.transition(l).style("opacity",q)),k.remove(),i.enter=()=>j,i.exit=()=>k,i};return e.element=(...b)=>b.length?(a=b[0],e):a,e.className=(...a)=>a.length?(b=a[0],e):b,e.key=(...a)=>a.length?(c=a[0],e):c,e.transition=(...a)=>a.length?(d=a[0],e):d,e};const s=a=>a,t=(a,c,e={})=>{let f=[10],h=null,i=()=>{},j=null,k=6,l=6,m=3;const n=d.line(),o=r("g","tick").key(s),p=r("path","domain"),q=()=>({offset:[0,l+m]}),t=()=>({path:[[0,0],[0,l]]}),u=e.labelOffset||q,v=e.tickPath||t,w=(a,b)=>{var c=Math.round;let e=0;return a.bandwidth&&(e=a.bandwidth()/2,a.round()&&(e=c(e))),c=>b(a(c)+e,0)},x=(a,b)=>z()?`translate(${b}, ${a})`:`translate(${a}, ${b})`,y=a=>z()?a.map(a=>[a[1],a[0]]):a,z=()=>"left"===a||"right"===a,A=(a,b,d)=>c[a]?c[a].apply(c,b):d,B=d=>{d.selection&&(o.transition(d),p.transition(d)),d.each((d,e,l)=>{const m=l[e],q=b.select(m);m.__scale__||q.attr("fill","none").attr("font-size",10).attr("font-family","sans-serif").attr("text-anchor","right"===a?"start":"left"===a?"end":"middle");const r=m.__scale__||c;m.__scale__=c.copy();const t=null==h?A("ticks",f,c.domain()):h,B=null==j?A("tickFormat",f,s):j,C="bottom"===a||"right"===a?1:-1,D=([a,b])=>[a,C*b],E=c.range(),F=y([[E[0],C*k],[E[0],0],[E[1],0],[E[1],C*k]]),G=p(q,[d]);G.attr("d",n(F)).attr("stroke","#000");const H=o(q,t),g=t.map((a,b)=>u(a,b,t)),I=t.map((a,b)=>v(a,b,t));H.enter().attr("transform",w(r,x)).append("path").attr("stroke","#000"),H.enter().append("text").attr("transform",(a,b)=>x(...D(g[b].offset))).attr("fill","#000"),H.exit().attr("transform",w(c,x)),H.select("path").attr("visibility",(a,b)=>I[b].hidden&&"hidden").attr("d",(a,b)=>n(y(I[b].path.map(D)))),H.select("text").attr("visibility",(a,b)=>g[b].hidden&&"hidden").attr("transform",(a,b)=>x(...D(g[b].offset))).attr("dy",()=>{let b="0em";return z()?b="0.32em":"bottom"===a&&(b="0.71em"),b}).text(B),H.attr("transform",w(c,x)),i(H,d,e)})};return B.tickFormat=(...a)=>a.length?(j=a[0],B):j,B.tickSize=(...a)=>a.length?(l=k=+a[0],B):l,B.tickSizeInner=(...a)=>a.length?(l=+a[0],B):l,B.tickSizeOuter=(...a)=>a.length?(k=+a[0],B):k,B.tickPadding=(...a)=>a.length?(m=a[0],B):m,B.decorate=(...a)=>a.length?(i=a[0],B):i,B.scale=(...a)=>a.length?(c=a[0],B):c,B.ticks=(...a)=>(f=[...a],B),B.tickArguments=(...a)=>a.length?(f=null==a[0]?[]:[...a[0]],B):f.slice(),B.tickValues=(...a)=>a.length?(h=null==a[0]?[]:[...a[0]],B):h.slice(),B.orient=()=>a,B},u=(a,b)=>{let c=!1;const d=(a,d,f)=>{let g=0,h=e.tickSizeInner()+e.tickPadding(),i=!1;if(c){const c=b(a),j=d<f.length-1?b(f[d+1]):b.range()[1];g=(j-c)/2,h=e.tickPadding(),i=d===f.length-1&&c===j}return{offset:[g,h],hidden:i}},e=t(a,b,{labelOffset:d}),f=a=>e(a);return f.tickCenterLabel=(...a)=>a.length?(c=a[0],f):c,k(f,e),f},v=a=>u("top",a),w=a=>u("bottom",a),x=a=>u("left",a),y=a=>u("right",a);var z=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},A="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;}",B=document.createElement("style");B.setAttribute("type","text/css"),document.querySelector("head").appendChild(B),B.styleSheet?B.styleSheet.cssText+=A:B.textContent+=A;var C=function(a){return"function"==typeof a?a:function(){return a}},D=function(){var a=E.apply(void 0,arguments),c=a.xScale,e=a.yScale,f=a.xAxis,g=a.yAxis,h=C(""),i=C(""),j=C(""),l=C(null),n=C(null),o=C("right"),q=C("bottom"),s=null,t=null,u=null,v=z("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel"),w=function(){},x=z("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel"),y=function(){},A=function(){},B=r("d3fc-group","cartesian-chart"),D=r("d3fc-canvas","gl-plot-area"),F=r("d3fc-canvas","canvas-plot-area"),G=r("d3fc-svg","plot-area"),H=r("d3fc-svg","x-axis").key(function(a){return a}),I=r("d3fc-svg","y-axis").key(function(a){return a}),J=r("div","chart-label"),K=r("div","x-label").key(function(a){return a}),L=r("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 k=M(a);a.each(function(a,d,m){var p=B(b.select(m[d]),[a]);p.enter().attr("auto-resize",""),J(p,[q(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(h(a)),K(p,[q(a)]).attr("class",function(a){return"x-label ".concat(a,"-label")}).text(i(a)),L(p,[o(a)]).attr("class",function(a){return"y-label ".concat(a,"-label")}).text(j(a)),D(p,s?[a]:[]).attr("set-webgl-viewport","").classed("plot-area",!0).on("draw",function(a,d,f){var g=b.select(f[d]).select("canvas").node();s.context(g.getContext("webgl")).xScale(c).yScale(e),s(a)}),F(p,t?[a]:[]).classed("plot-area",!0).on("draw",function(a,d,f){var g=b.select(f[d]).select("canvas").node();t.context(g.getContext("2d")).xScale(c).yScale(e),t(a)}),G(p,u?[a]:[]).on("draw",function(a,d,f){u.xScale(c).yScale(e),k(b.select(f[d])).select("svg").call(u)}),H(p,[q(a)]).attr("class",function(a){return"x-axis ".concat(a,"-axis")}).style("height",l(a)).on("measure",function(a,d,e){var f=b.event.detail,g=f.width,h=f.height;"top"===a&&b.select(e[d]).select("svg").attr("viewBox","0 ".concat(-h," ").concat(g," ").concat(h)),c.range([0,g])}).on("draw",function(a,d,e){var g="top"===a?f.top(c):f.bottom(c);g.decorate(w),k(b.select(e[d])).select("svg").call(v(g))}),I(p,[o(a)]).attr("class",function(a){return"y-axis ".concat(a,"-axis")}).style("width",n(a)).on("measure",function(a,c,d){var f=b.event.detail,g=f.width,h=f.height;"left"===a&&b.select(d[c]).select("svg").attr("viewBox","".concat(-g," 0 ").concat(g," ").concat(h)),e.range([h,0])}).on("draw",function(a,c,d){var f="left"===a?g.left(e):g.right(e);f.decorate(y),k(b.select(d[c])).select("svg").call(x(f))}),p.each(function(a,b,c){return c[b].requestRedraw()}),A(p,a,d)})},O=m(/range\w*/,/tickFormat/);return k(N,c,O,p("x")),k(N,e,O,p("y")),k(N,v,p("x")),k(N,x,p("y")),N.xOrient=function(){return arguments.length?(q=C(0>=arguments.length?void 0:arguments[0]),N):q},N.yOrient=function(){return arguments.length?(o=C(0>=arguments.length?void 0:arguments[0]),N):o},N.xDecorate=function(){return arguments.length?(w=0>=arguments.length?void 0:arguments[0],N):w},N.yDecorate=function(){return arguments.length?(y=0>=arguments.length?void 0:arguments[0],N):y},N.chartLabel=function(){return arguments.length?(h=C(0>=arguments.length?void 0:arguments[0]),N):h},N.xLabel=function(){return arguments.length?(i=C(0>=arguments.length?void 0:arguments[0]),N):i},N.yLabel=function(){return arguments.length?(j=C(0>=arguments.length?void 0:arguments[0]),N):j},N.xAxisHeight=function(){return arguments.length?(l=C(0>=arguments.length?void 0:arguments[0]),N):l},N.yAxisWidth=function(){return arguments.length?(n=C(0>=arguments.length?void 0:arguments[0]),N):n},N.webglPlotArea=function(){return arguments.length?(s=0>=arguments.length?void 0:arguments[0],N):s},N.canvasPlotArea=function(){return arguments.length?(t=0>=arguments.length?void 0:arguments[0],N):t},N.svgPlotArea=function(){return arguments.length?(u=0>=arguments.length?void 0:arguments[0],N):u},N.decorate=function(){return arguments.length?(A=0>=arguments.length?void 0:arguments[0],N):A},N},E=function(){for(var a={xScale:c.scaleIdentity(),yScale:c.scaleIdentity(),xAxis:{bottom:w,top:v},yAxis:{right:y,left:x}},b=arguments.length,d=Array(b),e=0;e<b;e++)d[e]=arguments[e];return 1!==d.length||d[0].domain||d[0].range?Object.assign(a,{xScale:d[0]||a.xScale,yScale:d[1]||a.yScale}):Object.assign(a,d[0])},F=function(a){return"function"==typeof a?a:function(){return a}},G=function(a,b){return function(){var c=F(""),d=b,e=function(){},f=D.apply(void 0,arguments),g=function(b){a(f,d),f.decorate(function(a,b,d){a.enter().select(".x-label").style("height","1em").style("line-height","1em");var g=f.yOrient()(b);a.enter().append("div").attr("class","y-label-container").style("grid-column","left"===g?1:5).style("-ms-grid-column","left"===g?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(c),e(a,b,d)}),b.call(f)};return k(g,f,n(/^x/,/^y/,"chartLabel")),g.yLabel=function(){return arguments.length?(c=F(0>=arguments.length?void 0:arguments[0]),g):c},g.plotArea=function(){return arguments.length?(d=0>=arguments.length?void 0:arguments[0],g):d},g.decorate=function(){return arguments.length?(e=0>=arguments.length?void 0:arguments[0],g):e},g}},H=a=>"function"==typeof a?a:()=>a,I=(a,b)=>"left"===a?b/2:"right"===a?-b/2:0,J=a=>{const b=Object.assign({},a),c=()=>{};return Object.keys(b).forEach(a=>{c[a]=(...d)=>d.length?(b[a]=d[0],c):b[a]}),c},K=()=>{let a=()=>0,b=a=>a.x,f=a=>a.y,g="center",h=()=>5,j="vertical";const k=J({decorate:()=>{},defined:(c,d)=>e(a,b,f)(c,d),xScale:c.scaleIdentity(),yScale:c.scaleIdentity()});return k.values=(c,d)=>{const e=h(c,d),i=I(g,e),l=k.xScale(),m=k.yScale();if("vertical"===j){const g=m(f(c,d),d),h=m(a(c,d),d),j=l(b(c,d),d)+i;return{d:c,x:j,y:g,y0:h,width:e,height:g-h,origin:[j,g],baseOrigin:[j,h],transposedX:j,transposedY:g}}else{const g=l(f(c,d),d),h=l(a(c,d),d),j=m(b(c,d),d)+i;return{d:c,x:j,y:g,y0:h,width:e,height:g-h,origin:[g,j],baseOrigin:[h,j],transposedX:g,transposedY:j}}},k.xValues=()=>"vertical"===j?[b]:[a,f],k.yValues=()=>"vertical"===j?[a,f]:[b],k.baseValue=(...b)=>b.length?(a=H(b[0]),k):a,k.crossValue=(...a)=>a.length?(b=H(a[0]),k):b,k.mainValue=(...a)=>a.length?(f=H(a[0]),k):f,k.bandwidth=(...a)=>a.length?(h=H(a[0]),k):h,k.align=(...a)=>a.length?(g=a[0],k):g,k.orient=(...a)=>a.length?(j=a[0],k):j,k};var L={red:"#c60",green:"#6c0",black:"#000",gray:"#ddd",darkGray:"#999"},M=G(function(a,b){return a.svgPlotArea(b)},()=>{const a=K(),c=d.line().x((b,c)=>a.values(b,c).transposedX).y((b,c)=>a.values(b,c).transposedY),e=r("path","line"),f=d=>{d.selection&&e.transition(d),c.defined(a.defined()),d.each((d,f,g)=>{const h=e(b.select(g[f]),[d]);h.enter().attr("fill","none").attr("stroke",L.black),h.attr("d",c),a.decorate()(h,d,f)})};return k(f,a,m("baseValue","bandwidth","align")),i(f,e,"key"),i(f,c,"curve"),f}),N=G(function(a,b){return a.canvasPlotArea(b)},()=>{const a=K(),b=d.line().x((b,c)=>a.values(b,c).transposedX).y((b,c)=>a.values(b,c).transposedY),c=c=>{const d=b.context();d.beginPath(),b.defined(a.defined())(c),d.strokeStyle=L.black,d.fillStyle="transparent",a.decorate()(d,c),d.fill(),d.stroke(),d.closePath()};return k(c,a,m("baseValue","bandwidth","align")),i(c,b,"curve","context"),c});a.chartCanvasCartesian=N,a.chartCartesian=D,a.chartSvgCartesian=M,Object.defineProperty(a,"__esModule",{value:!0})});

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [2.7.0](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-chart@2.6.16...@d3fc/d3fc-chart@2.7.0) (2020-01-03)
+
+
+### Features
+
+* add set-webgl-viewport to d3fc-canvas ([6c870e4](https://github.com/d3fc/d3fc/commit/6c870e4))
+* webgl series implementations ([233ed25](https://github.com/d3fc/d3fc/commit/233ed25))
+
+
+
+
+
 ## [2.6.16](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-chart@2.6.15...@d3fc/d3fc-chart@2.6.16) (2019-11-28)
@@ -8,0 +20,0 @@

package.json

 {
   "name": "@d3fc/d3fc-chart",
-  "version": "2.6.16",
+  "version": "2.7.0",
   "description": "A simple Cartesian chart component that renders to canvas or SVG.",
@@ -26,3 +26,3 @@ "license": "MIT",
   "devDependencies": {
-    "@d3fc/d3fc-annotation": "^2.4.14",
+    "@d3fc/d3fc-annotation": "^2.4.15",
     "@d3fc/d3fc-extent": "^3.1.7",
@@ -34,5 +34,5 @@ "d3": "^4.2.5"
     "@d3fc/d3fc-data-join": "^5.0.11",
-    "@d3fc/d3fc-element": "^5.2.16",
+    "@d3fc/d3fc-element": "^5.3.0",
     "@d3fc/d3fc-rebind": "^5.0.10",
-    "@d3fc/d3fc-series": "^4.1.1",
+    "@d3fc/d3fc-series": "^4.2.0",
     "d3-scale": "^1.0.3",
@@ -44,3 +44,3 @@ "d3-selection": "^1.0.2"
   },
-  "gitHead": "de82a1a109ddce4b5721fc4e0d2039ddd497817d"
+  "gitHead": "e031afe3755ffe2fc98b9c17671ca2c1a8e29d05"
 }

README.md

@@ -234,5 +234,8 @@ # d3fc-chart
 <a name="cartesian_canvasPlotArea" href="#cartesian_canvasPlotArea">#</a> *cartesian*.**canvasPlotArea**(*component*)  
+<a name="cartesian_webglPlotArea" href="#cartesian_webglPlotArea">#</a> *cartesian*.**webglPlotArea**(*component*)  
 
 If *component* is specified, sets the component to render onto the SVG/canvas, and returns the Cartesian chart. If *component* is not specified, returns the existing component.
 
+If *canvasPlotArea* or *webglPlotArea* is used, the relavent *context* is automatically applied to the chart.
+
 For series that contain a very high number of data-points, rendering to canvas can reduce the rendering time and improve performance. For components that require user-interaction, rendering to SVG can simplify their implementation.
@@ -239,0 +242,0 @@

src/cartesian.js

@@ -22,2 +22,3 @@ import { select, event } from 'd3-selection';
     let xOrient = functor('bottom');
+    let webglPlotArea = null;
     let canvasPlotArea = null;
@@ -32,3 +33,4 @@ let svgPlotArea = null;
     const containerDataJoin = dataJoin('d3fc-group', 'cartesian-chart');
-    const canvasDataJoin = dataJoin('d3fc-canvas', 'plot-area');
+    const webglDataJoin = dataJoin('d3fc-canvas', 'gl-plot-area');
+    const canvasDataJoin = dataJoin('d3fc-canvas', 'canvas-plot-area');
     const svgDataJoin = dataJoin('d3fc-svg', 'plot-area');
@@ -72,3 +74,17 @@ const xAxisDataJoin = dataJoin('d3fc-svg', 'x-axis')
 
+            webglDataJoin(container, webglPlotArea ? [data] : [])
+                .attr('set-webgl-viewport','')
+                .classed('plot-area', true)
+                .on('draw', (d, i, nodes) => {
+                    const canvas = select(nodes[i])
+                        .select('canvas')
+                        .node();
+                    webglPlotArea.context(canvas.getContext('webgl'))
+                        .xScale(xScale)
+                        .yScale(yScale);
+                    webglPlotArea(d);
+                });
+
             canvasDataJoin(container, canvasPlotArea ? [data] : [])
+                .classed('plot-area', true)
                 .on('draw', (d, i, nodes) => {
@@ -211,2 +227,9 @@ const canvas = select(nodes[i])
     };
+    cartesian.webglPlotArea = (...args) => {
+        if (!args.length) {
+            return webglPlotArea;
+        }
+        webglPlotArea = args[0];
+        return cartesian;
+    };
     cartesian.canvasPlotArea = (...args) => {
@@ -213,0 +236,0 @@ if (!args.length) {

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

154738

increased by1.81%

Lines of code

1676

increased by2.44%

Number of lines in readme file

292

increased by1.04%

Dependency changes

• Updated@d3fc/d3fc-element@^5.3.0

• Updated@d3fc/d3fc-series@^4.2.0