d3fc-flexi-chart - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

build/d3fc-flexi-chart.js

@@ -24,3 +24,3 @@ (function(g,f){typeof exports==='object'&&typeof module!=='undefined'?f(exports,require('d3-selection'),require('@d3fc/d3fc-data-join'),require('@d3fc/d3fc-rebind'),require('d3-scale'),require('@d3fc/d3fc-axis')):typeof define==='function'&&define.amd?define(['exports','d3-selection','@d3fc/d3fc-data-join','@d3fc/d3fc-rebind','d3-scale','@d3fc/d3fc-axis'],f):(g=g||self,f(g.fcFlexi={},g.d3,g.fc,g.fc,g.d3,g.fc));}(this,function(exports, d3Selection, d3fcDataJoin, d3fcRebind, d3Scale, d3fcAxis){'use strict';// Adapted from https://github.com/substack/insert-css
 
-  var map = function map(d) {
+  var mapping = function mapping(d) {
     return d;
@@ -141,3 +141,3 @@ };
         var surface = layer.element == 'd3fc-svg' ? 'svg' : 'canvas';
-        var layerData = map(data, i, layer);
+        var layerData = mapping(data, i, layers);
         d3Selection.select(nodes[i]).select(surface).datum(layerData).call(layer);
@@ -210,8 +210,8 @@ });
 
-  chart.map = function () {
+  chart.mapping = function () {
     if (!arguments.length) {
-      return map;
+      return mapping;
     }
 
-    map = arguments.length <= 0 ? undefined : arguments[0];
+    mapping = arguments.length <= 0 ? undefined : arguments[0];
     return chart;
@@ -218,0 +218,0 @@ };

build/d3fc-flexi-chart.min.js

@@ -1,1 +0,1 @@
-(function(g,f){typeof exports==="object"&&typeof module!=="undefined"?f(exports,require("d3-selection"),require("@d3fc/d3fc-data-join"),require("@d3fc/d3fc-rebind"),require("d3-scale"),require("@d3fc/d3fc-axis")):typeof define==="function"&&define.amd?define(["exports","d3-selection","@d3fc/d3fc-data-join","@d3fc/d3fc-rebind","d3-scale","@d3fc/d3fc-axis"],f):(g=g||self,f(g.fcFlexi={},g.d3,g.fc,g.fc,g.d3,g.fc))})(this,function(exports,d3Selection,d3fcDataJoin,d3fcRebind,d3Scale,d3fcAxis){"use strict";var css="d3fc-group.flexi-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.flexi-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;-ms-grid-row:1;-ms-grid-row:1;}\nd3fc-group.flexi-chart>.top-axis{grid-column:3;-ms-grid-column:3;grid-row:2;-ms-grid-row:2;}\nd3fc-group.flexi-chart>.left-label{width:1.2em;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.flexi-chart>.left-axis{grid-column:2;-ms-grid-column:2;grid-row:3;-ms-grid-row:3;white-space:nowrap;}\nd3fc-group.flexi-chart>.plot-area{overflow:hidden;grid-column:3;-ms-grid-column:3;grid-row:3;-ms-grid-row:3;}\nd3fc-group.flexi-chart>.right-axis{grid-column:4;-ms-grid-column:4;grid-row:3;-ms-grid-row:3;white-space:nowrap;}\nd3fc-group.flexi-chart>.right-label{width:1.2em;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.flexi-chart>.bottom-axis{grid-column:3;-ms-grid-column:3;grid-row:4;-ms-grid-row:4;}\nd3fc-group.flexi-chart>.bottom-label{height:1.2em;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.flexi-chart>.left-axis>.axis-component,d3fc-group.flexi-chart>.right-axis>.axis-component{width:3em;height:100%;display:inline-block;}\nd3fc-group.flexi-chart>.top-axis>.axis-component,d3fc-group.flexi-chart>.bottom-axis>.axis-component{height:2em;}\nd3fc-group.flexi-chart>.plot-area>d3fc-svg,d3fc-group.flexi-chart>.plot-area>d3fc-canvas{height:100%;}\nd3fc-group.flexi-chart>.left-label>.label,d3fc-group.flexi-chart>.right-label>.label{transform:rotate(-90deg);white-space:nowrap;}\n";var styleElement=document.createElement("style");styleElement.setAttribute("type","text/css");document.querySelector("head").appendChild(styleElement);if(styleElement.styleSheet){styleElement.styleSheet.cssText+=css}else{styleElement.textContent+=css}var functor=function functor(v){return typeof v==="function"?v:function(){return v}};var chart=function(){var leftLabel=functor("");var rightLabel=functor("");var topLabel=functor("");var bottomLabel=functor("");var layers=[];var map=function map(d){return d};var decorate=function decorate(){};var containerDataJoin=d3fcDataJoin.dataJoin("d3fc-group","flexi-chart");var labelDataJoin=d3fcDataJoin.dataJoin("div","label-container").key(function(d){return d});var axisDataJoin=d3fcDataJoin.dataJoin("div","axis").key(function(d){return d});var axisComponentJoin=d3fcDataJoin.dataJoin("d3fc-svg","axis-component").key(function(d){return d});var layerDataJoin=function dataJoin(container,data){var selected=container.selectAll(".plot-area");var update=selected.data(data,function(d){return d});var enter=update.enter().append(function(d){return document.createElement(d.element)}).attr("class","plot-area");update.exit().remove();return update.merge(enter)};var propagateTransition=function propagateTransition(maybeTransition){return function(selection){return maybeTransition.selection?selection.transition(maybeTransition):selection}};var chart=function chart(selection){var transitionPropagator=propagateTransition(selection);var axes=[{id:"left",vertical:true,label:leftLabel},{id:"right",vertical:true,label:rightLabel},{id:"bottom",vertical:false,label:bottomLabel},{id:"top",vertical:false,label:topLabel}];selection.each(function(data,index,group){var container=containerDataJoin(d3Selection.select(group[index]),[data]);container.enter().attr("auto-resize","");var chartLabels=labelDataJoin(container,axes);chartLabels.enter().append("div").classed("label",true);chartLabels.attr("class",function(d){return"label ".concat(d.id,"-label")}).select(".label").text(function(d){return d.label(data)});var layerUsesAxis=function layerUsesAxis(name){return function(p){return p.yOrient()()===name||p.xOrient()()===name}};var anyLayerUsesAxis=function anyLayerUsesAxis(name){return layers.some(layerUsesAxis(name))};var drawAxis=function drawAxis(axisContainer,axis){var axisLayers=layers.filter(layerUsesAxis(axis.id));axisComponentJoin(axisContainer,axisLayers).style("height",function(d){return!axis.vertical&&d.xAxisHeight()(data)}).style("width",function(d){return axis.vertical&&d.yAxisWidth()(data)}).on("measure",function(d,i,nodes){var _event$detail=d3Selection.event.detail,width=_event$detail.width,height=_event$detail.height;if(axis.id==="top"||axis.id==="left"){d3Selection.select(nodes[i]).select("svg").attr("viewBox",axis.id==="top"?"0 ".concat(-height," ").concat(width," ").concat(height):"".concat(-width," 0 ").concat(width," ").concat(height))}}).on("draw",function(d,i,nodes){var axisComponent=d["".concat(axis.id,"Axis")]();var axisContainer=transitionPropagator(d3Selection.select(nodes[i]));axisContainer.select("svg").call(axisComponent)})};axisDataJoin(container,axes.filter(function(a){return anyLayerUsesAxis(a.id)})).attr("class",function(d){return"axis ".concat(d.id,"-axis")}).each(function(d,i,nodes){return drawAxis(d3Selection.select(nodes[i]),d)});layerDataJoin(container,layers).on("measure",function(layer){var _event$detail2=d3Selection.event.detail,width=_event$detail2.width,height=_event$detail2.height;layer.yScale().range([height,0]);layer.xScale().range([0,width])}).on("draw",function(layer,i,nodes){var surface=layer.element=="d3fc-svg"?"svg":"canvas";var layerData=map(data,i,layer);d3Selection.select(nodes[i]).select(surface).datum(layerData).call(layer)});container.each(function(d,i,nodes){return nodes[i].requestRedraw()});decorate(container,data,index)})};chart.leftLabel=function(){if(!arguments.length){return leftLabel}leftLabel=functor(arguments.length<=0?undefined:arguments[0]);return chart};chart.rightLabel=function(){if(!arguments.length){return rightLabel}rightLabel=functor(arguments.length<=0?undefined:arguments[0]);return chart};chart.topLabel=function(){if(!arguments.length){return topLabel}topLabel=functor(arguments.length<=0?undefined:arguments[0]);return chart};chart.bottomLabel=function(){if(!arguments.length){return bottomLabel}bottomLabel=functor(arguments.length<=0?undefined:arguments[0]);return chart};chart.layers=function(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}if(!args.length){return layers}layers=Array.isArray(args[0])?args[0]:args;return chart};chart.decorate=function(){if(!arguments.length){return decorate}decorate=arguments.length<=0?undefined:arguments[0];return chart};chart.map=function(){if(!arguments.length){return map}map=arguments.length<=0?undefined:arguments[0];return chart};return chart};var store=function(){var data={};var store=function store(target){for(var _i=0,_Object$keys=Object.keys(data);_i<_Object$keys.length;_i++){var key=_Object$keys[_i];target[key](data[key])}return target};for(var _len=arguments.length,names=new Array(_len),_key=0;_key<_len;_key++){names[_key]=arguments[_key]}var _loop=function _loop(){var name=_names[_i2];store[name]=function(){if(!arguments.length){return data[name]}data[name]=arguments.length<=0?undefined:arguments[0];return store}};for(var _i2=0,_names=names;_i2<_names.length;_i2++){_loop()}return store};var functor$1=function functor(v){return typeof v==="function"?v:function(){return v}};var layer=function(){var _getArguments=getArguments.apply(void 0,arguments),xScale=_getArguments.xScale,yScale=_getArguments.yScale,xAxis=_getArguments.xAxis,yAxis=_getArguments.yAxis;var xAxisHeight=functor$1(null);var yAxisWidth=functor$1(null);var yOrient=functor$1("right");var xOrient=functor$1("bottom");var plotArea=null;var xAxisStore=store("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel");var xDecorate=function xDecorate(){};var yAxisStore=store("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel");var yDecorate=function yDecorate(){};var layer=function layer(selection){plotArea.xScale(xScale).yScale(yScale)};layer.xScale=function(){return xScale};layer.yScale=function(){return yScale};layer.leftAxis=function(){return yAxisStore(yAxis.left(yScale).decorate(yDecorate))};layer.rightAxis=function(){return yAxisStore(yAxis.right(yScale).decorate(yDecorate))};layer.topAxis=function(){return xAxisStore(xAxis.top(xScale).decorate(xDecorate))};layer.bottomAxis=function(){return xAxisStore(xAxis.bottom(xScale).decorate(xDecorate))};var scaleExclusions=d3fcRebind.exclude(/range\w*/,/tickFormat/);d3fcRebind.rebindAll(layer,xScale,scaleExclusions,d3fcRebind.prefix("x"));d3fcRebind.rebindAll(layer,yScale,scaleExclusions,d3fcRebind.prefix("y"));d3fcRebind.rebindAll(layer,xAxisStore,d3fcRebind.prefix("x"));d3fcRebind.rebindAll(layer,yAxisStore,d3fcRebind.prefix("y"));layer.xAxisHeight=function(){if(!arguments.length){return xAxisHeight}xAxisHeight=functor$1(arguments.length<=0?undefined:arguments[0]);return layer};layer.yAxisWidth=function(){if(!arguments.length){return yAxisWidth}yAxisWidth=functor$1(arguments.length<=0?undefined:arguments[0]);return layer};layer.xOrient=function(){if(!arguments.length){return xOrient}xOrient=functor$1(arguments.length<=0?undefined:arguments[0]);return layer};layer.yOrient=function(){if(!arguments.length){return yOrient}yOrient=functor$1(arguments.length<=0?undefined:arguments[0]);return layer};layer.plotArea=function(){if(!arguments.length){return plotArea}plotArea=arguments.length<=0?undefined:arguments[0];return layer};layer.xDecorate=function(){if(!arguments.length){return xDecorate}xDecorate=arguments.length<=0?undefined:arguments[0];return layer};layer.yDecorate=function(){if(!arguments.length){return yDecorate}yDecorate=arguments.length<=0?undefined:arguments[0];return layer};return layer};var getArguments=function getArguments(){var defaultSettings={xScale:d3Scale.scaleIdentity(),yScale:d3Scale.scaleIdentity(),xAxis:{bottom:d3fcAxis.axisBottom,top:d3fcAxis.axisTop},yAxis:{right:d3fcAxis.axisRight,left:d3fcAxis.axisLeft}};for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}if(args.length===1&&!args[0].domain&&!args[0].range){return Object.assign(defaultSettings,args[0])}return Object.assign(defaultSettings,{xScale:args[0]||defaultSettings.xScale,yScale:args[1]||defaultSettings.yScale})};var layer$1=function(){var base=layer.apply(void 0,arguments);var propagateTransition=function propagateTransition(maybeTransition){return function(selection){return maybeTransition.selection?selection.transition(maybeTransition):selection}};var svgLayer=function svgLayer(selection){var transitionPropagator=propagateTransition(selection);base(selection);transitionPropagator(selection).call(base.plotArea())};d3fcRebind.rebindAll(svgLayer,base);svgLayer.element="d3fc-svg";return svgLayer};var layer$2=function(){var base=layer.apply(void 0,arguments);var canvasLayer=function canvasLayer(selection){base(selection);var canvas=selection.node();var data=selection.datum();base.plotArea().context(canvas.getContext("2d"))(data)};d3fcRebind.rebindAll(canvasLayer,base);canvasLayer.element="d3fc-canvas";return canvasLayer};exports.canvasLayer=layer$2;exports.chart=chart;exports.svgLayer=layer$1;Object.defineProperty(exports,"__esModule",{value:true})});
+(function(g,f){typeof exports==="object"&&typeof module!=="undefined"?f(exports,require("d3-selection"),require("@d3fc/d3fc-data-join"),require("@d3fc/d3fc-rebind"),require("d3-scale"),require("@d3fc/d3fc-axis")):typeof define==="function"&&define.amd?define(["exports","d3-selection","@d3fc/d3fc-data-join","@d3fc/d3fc-rebind","d3-scale","@d3fc/d3fc-axis"],f):(g=g||self,f(g.fcFlexi={},g.d3,g.fc,g.fc,g.d3,g.fc))})(this,function(exports,d3Selection,d3fcDataJoin,d3fcRebind,d3Scale,d3fcAxis){"use strict";var css="d3fc-group.flexi-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.flexi-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;-ms-grid-row:1;-ms-grid-row:1;}\nd3fc-group.flexi-chart>.top-axis{grid-column:3;-ms-grid-column:3;grid-row:2;-ms-grid-row:2;}\nd3fc-group.flexi-chart>.left-label{width:1.2em;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.flexi-chart>.left-axis{grid-column:2;-ms-grid-column:2;grid-row:3;-ms-grid-row:3;white-space:nowrap;}\nd3fc-group.flexi-chart>.plot-area{overflow:hidden;grid-column:3;-ms-grid-column:3;grid-row:3;-ms-grid-row:3;}\nd3fc-group.flexi-chart>.right-axis{grid-column:4;-ms-grid-column:4;grid-row:3;-ms-grid-row:3;white-space:nowrap;}\nd3fc-group.flexi-chart>.right-label{width:1.2em;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.flexi-chart>.bottom-axis{grid-column:3;-ms-grid-column:3;grid-row:4;-ms-grid-row:4;}\nd3fc-group.flexi-chart>.bottom-label{height:1.2em;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.flexi-chart>.left-axis>.axis-component,d3fc-group.flexi-chart>.right-axis>.axis-component{width:3em;height:100%;display:inline-block;}\nd3fc-group.flexi-chart>.top-axis>.axis-component,d3fc-group.flexi-chart>.bottom-axis>.axis-component{height:2em;}\nd3fc-group.flexi-chart>.plot-area>d3fc-svg,d3fc-group.flexi-chart>.plot-area>d3fc-canvas{height:100%;}\nd3fc-group.flexi-chart>.left-label>.label,d3fc-group.flexi-chart>.right-label>.label{transform:rotate(-90deg);white-space:nowrap;}\n";var styleElement=document.createElement("style");styleElement.setAttribute("type","text/css");document.querySelector("head").appendChild(styleElement);if(styleElement.styleSheet){styleElement.styleSheet.cssText+=css}else{styleElement.textContent+=css}var functor=function functor(v){return typeof v==="function"?v:function(){return v}};var chart=function(){var leftLabel=functor("");var rightLabel=functor("");var topLabel=functor("");var bottomLabel=functor("");var layers=[];var mapping=function mapping(d){return d};var decorate=function decorate(){};var containerDataJoin=d3fcDataJoin.dataJoin("d3fc-group","flexi-chart");var labelDataJoin=d3fcDataJoin.dataJoin("div","label-container").key(function(d){return d});var axisDataJoin=d3fcDataJoin.dataJoin("div","axis").key(function(d){return d});var axisComponentJoin=d3fcDataJoin.dataJoin("d3fc-svg","axis-component").key(function(d){return d});var layerDataJoin=function dataJoin(container,data){var selected=container.selectAll(".plot-area");var update=selected.data(data,function(d){return d});var enter=update.enter().append(function(d){return document.createElement(d.element)}).attr("class","plot-area");update.exit().remove();return update.merge(enter)};var propagateTransition=function propagateTransition(maybeTransition){return function(selection){return maybeTransition.selection?selection.transition(maybeTransition):selection}};var chart=function chart(selection){var transitionPropagator=propagateTransition(selection);var axes=[{id:"left",vertical:true,label:leftLabel},{id:"right",vertical:true,label:rightLabel},{id:"bottom",vertical:false,label:bottomLabel},{id:"top",vertical:false,label:topLabel}];selection.each(function(data,index,group){var container=containerDataJoin(d3Selection.select(group[index]),[data]);container.enter().attr("auto-resize","");var chartLabels=labelDataJoin(container,axes);chartLabels.enter().append("div").classed("label",true);chartLabels.attr("class",function(d){return"label ".concat(d.id,"-label")}).select(".label").text(function(d){return d.label(data)});var layerUsesAxis=function layerUsesAxis(name){return function(p){return p.yOrient()()===name||p.xOrient()()===name}};var anyLayerUsesAxis=function anyLayerUsesAxis(name){return layers.some(layerUsesAxis(name))};var drawAxis=function drawAxis(axisContainer,axis){var axisLayers=layers.filter(layerUsesAxis(axis.id));axisComponentJoin(axisContainer,axisLayers).style("height",function(d){return!axis.vertical&&d.xAxisHeight()(data)}).style("width",function(d){return axis.vertical&&d.yAxisWidth()(data)}).on("measure",function(d,i,nodes){var _event$detail=d3Selection.event.detail,width=_event$detail.width,height=_event$detail.height;if(axis.id==="top"||axis.id==="left"){d3Selection.select(nodes[i]).select("svg").attr("viewBox",axis.id==="top"?"0 ".concat(-height," ").concat(width," ").concat(height):"".concat(-width," 0 ").concat(width," ").concat(height))}}).on("draw",function(d,i,nodes){var axisComponent=d["".concat(axis.id,"Axis")]();var axisContainer=transitionPropagator(d3Selection.select(nodes[i]));axisContainer.select("svg").call(axisComponent)})};axisDataJoin(container,axes.filter(function(a){return anyLayerUsesAxis(a.id)})).attr("class",function(d){return"axis ".concat(d.id,"-axis")}).each(function(d,i,nodes){return drawAxis(d3Selection.select(nodes[i]),d)});layerDataJoin(container,layers).on("measure",function(layer){var _event$detail2=d3Selection.event.detail,width=_event$detail2.width,height=_event$detail2.height;layer.yScale().range([height,0]);layer.xScale().range([0,width])}).on("draw",function(layer,i,nodes){var surface=layer.element=="d3fc-svg"?"svg":"canvas";var layerData=mapping(data,i,layers);d3Selection.select(nodes[i]).select(surface).datum(layerData).call(layer)});container.each(function(d,i,nodes){return nodes[i].requestRedraw()});decorate(container,data,index)})};chart.leftLabel=function(){if(!arguments.length){return leftLabel}leftLabel=functor(arguments.length<=0?undefined:arguments[0]);return chart};chart.rightLabel=function(){if(!arguments.length){return rightLabel}rightLabel=functor(arguments.length<=0?undefined:arguments[0]);return chart};chart.topLabel=function(){if(!arguments.length){return topLabel}topLabel=functor(arguments.length<=0?undefined:arguments[0]);return chart};chart.bottomLabel=function(){if(!arguments.length){return bottomLabel}bottomLabel=functor(arguments.length<=0?undefined:arguments[0]);return chart};chart.layers=function(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}if(!args.length){return layers}layers=Array.isArray(args[0])?args[0]:args;return chart};chart.decorate=function(){if(!arguments.length){return decorate}decorate=arguments.length<=0?undefined:arguments[0];return chart};chart.mapping=function(){if(!arguments.length){return mapping}mapping=arguments.length<=0?undefined:arguments[0];return chart};return chart};var store=function(){var data={};var store=function store(target){for(var _i=0,_Object$keys=Object.keys(data);_i<_Object$keys.length;_i++){var key=_Object$keys[_i];target[key](data[key])}return target};for(var _len=arguments.length,names=new Array(_len),_key=0;_key<_len;_key++){names[_key]=arguments[_key]}var _loop=function _loop(){var name=_names[_i2];store[name]=function(){if(!arguments.length){return data[name]}data[name]=arguments.length<=0?undefined:arguments[0];return store}};for(var _i2=0,_names=names;_i2<_names.length;_i2++){_loop()}return store};var functor$1=function functor(v){return typeof v==="function"?v:function(){return v}};var layer=function(){var _getArguments=getArguments.apply(void 0,arguments),xScale=_getArguments.xScale,yScale=_getArguments.yScale,xAxis=_getArguments.xAxis,yAxis=_getArguments.yAxis;var xAxisHeight=functor$1(null);var yAxisWidth=functor$1(null);var yOrient=functor$1("right");var xOrient=functor$1("bottom");var plotArea=null;var xAxisStore=store("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel");var xDecorate=function xDecorate(){};var yAxisStore=store("tickFormat","ticks","tickArguments","tickSize","tickSizeInner","tickSizeOuter","tickValues","tickPadding","tickCenterLabel");var yDecorate=function yDecorate(){};var layer=function layer(selection){plotArea.xScale(xScale).yScale(yScale)};layer.xScale=function(){return xScale};layer.yScale=function(){return yScale};layer.leftAxis=function(){return yAxisStore(yAxis.left(yScale).decorate(yDecorate))};layer.rightAxis=function(){return yAxisStore(yAxis.right(yScale).decorate(yDecorate))};layer.topAxis=function(){return xAxisStore(xAxis.top(xScale).decorate(xDecorate))};layer.bottomAxis=function(){return xAxisStore(xAxis.bottom(xScale).decorate(xDecorate))};var scaleExclusions=d3fcRebind.exclude(/range\w*/,/tickFormat/);d3fcRebind.rebindAll(layer,xScale,scaleExclusions,d3fcRebind.prefix("x"));d3fcRebind.rebindAll(layer,yScale,scaleExclusions,d3fcRebind.prefix("y"));d3fcRebind.rebindAll(layer,xAxisStore,d3fcRebind.prefix("x"));d3fcRebind.rebindAll(layer,yAxisStore,d3fcRebind.prefix("y"));layer.xAxisHeight=function(){if(!arguments.length){return xAxisHeight}xAxisHeight=functor$1(arguments.length<=0?undefined:arguments[0]);return layer};layer.yAxisWidth=function(){if(!arguments.length){return yAxisWidth}yAxisWidth=functor$1(arguments.length<=0?undefined:arguments[0]);return layer};layer.xOrient=function(){if(!arguments.length){return xOrient}xOrient=functor$1(arguments.length<=0?undefined:arguments[0]);return layer};layer.yOrient=function(){if(!arguments.length){return yOrient}yOrient=functor$1(arguments.length<=0?undefined:arguments[0]);return layer};layer.plotArea=function(){if(!arguments.length){return plotArea}plotArea=arguments.length<=0?undefined:arguments[0];return layer};layer.xDecorate=function(){if(!arguments.length){return xDecorate}xDecorate=arguments.length<=0?undefined:arguments[0];return layer};layer.yDecorate=function(){if(!arguments.length){return yDecorate}yDecorate=arguments.length<=0?undefined:arguments[0];return layer};return layer};var getArguments=function getArguments(){var defaultSettings={xScale:d3Scale.scaleIdentity(),yScale:d3Scale.scaleIdentity(),xAxis:{bottom:d3fcAxis.axisBottom,top:d3fcAxis.axisTop},yAxis:{right:d3fcAxis.axisRight,left:d3fcAxis.axisLeft}};for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}if(args.length===1&&!args[0].domain&&!args[0].range){return Object.assign(defaultSettings,args[0])}return Object.assign(defaultSettings,{xScale:args[0]||defaultSettings.xScale,yScale:args[1]||defaultSettings.yScale})};var layer$1=function(){var base=layer.apply(void 0,arguments);var propagateTransition=function propagateTransition(maybeTransition){return function(selection){return maybeTransition.selection?selection.transition(maybeTransition):selection}};var svgLayer=function svgLayer(selection){var transitionPropagator=propagateTransition(selection);base(selection);transitionPropagator(selection).call(base.plotArea())};d3fcRebind.rebindAll(svgLayer,base);svgLayer.element="d3fc-svg";return svgLayer};var layer$2=function(){var base=layer.apply(void 0,arguments);var canvasLayer=function canvasLayer(selection){base(selection);var canvas=selection.node();var data=selection.datum();base.plotArea().context(canvas.getContext("2d"))(data)};d3fcRebind.rebindAll(canvasLayer,base);canvasLayer.element="d3fc-canvas";return canvasLayer};exports.canvasLayer=layer$2;exports.chart=chart;exports.svgLayer=layer$1;Object.defineProperty(exports,"__esModule",{value:true})});

examples/index.js

@@ -49,2 +49,28 @@ // const flexi = fcFlexi.flexiChart();
   
+const sinCosLayer = fcFlexi.svgLayer(d3.scaleLinear(), d3.scaleLinear())
+  .yOrient('left')
+  .yDomain([-1.1, 1.1])
+  .xDomain([0, 12])
+  .plotArea(multiSvg);
+
+const bar1Layer = fcFlexi.canvasLayer(d3.scaleLinear(), d3.scaleLinear())
+  .xOrient('none')
+  .yDomain([0, 100])
+  .xDomain([0, 12])
+  .plotArea(bar1Canvas)
+  .yDecorate(s => {
+    d3.select(s.node().parentNode).selectAll('path').style('stroke-width', '2px').style('stroke', bar1Color);
+    s.selectAll('text').style('stroke', bar1Color);
+  });
+
+const bar2Layer = fcFlexi.canvasLayer(d3.scaleLinear(), d3.scaleLinear())
+  .xOrient('none')
+  .yDomain([0, 200])
+  .xDomain([0, 12])
+  .plotArea(bar2Canvas)
+  .yDecorate(s => {
+    d3.select(s.node().parentNode).selectAll('path').style('stroke-width', '2px').style('stroke', bar2Color);
+    s.selectAll('text').style('stroke', bar2Color);
+  });
+
 var chart = fcFlexi.chart()
@@ -54,36 +80,11 @@ .bottomLabel('Value')
   .leftLabel('Sine / Cosine')
-  .layers(
-    fcFlexi.svgLayer(d3.scaleLinear(), d3.scaleLinear())
-      .yOrient('left')
-      .yDomain([-1.1, 1.1])
-      .xDomain([0, 12])
-      .plotArea(multiSvg),
-    fcFlexi.canvasLayer(d3.scaleLinear(), d3.scaleLinear())
-      .xOrient('none')
-      .yDomain([0, 100])
-      .xDomain([0, 12])
-      .plotArea(bar1Canvas)
-      .yDecorate(s => {
-        d3.select(s.node().parentNode).selectAll('path').style('stroke-width', '2px').style('stroke', bar1Color);
-        s.selectAll('text').style('stroke', bar1Color);
-      }),
-    fcFlexi.canvasLayer(d3.scaleLinear(), d3.scaleLinear())
-      .xOrient('none')
-      .yDomain([0, 200])
-      .xDomain([0, 12])
-      .plotArea(bar2Canvas)
-      .yDecorate(s => {
-        d3.select(s.node().parentNode).selectAll('path').style('stroke-width', '2px').style('stroke', bar2Color);
-        s.selectAll('text').style('stroke', bar2Color);
-      })
-  )
-  .map((data, index) => {
-    switch(index)
-    {
-      case 0:
-        return sinCos;
-      case 1:
-        return bars1;
-      case 2:
-        return bars2;
+  .layers([sinCosLayer, bar1Layer, bar2Layer])
+  .mapping((data, index, layers) => {
+    switch(layers[index]) {
+      case sinCosLayer:
+        return data.sinCos;
+      case bar1Layer:
+        return data.bars1;
+      case bar2Layer:
+        return data.bars2;
     }
@@ -90,0 +91,0 @@ })

package.json

 {
   "name": "d3fc-flexi-chart",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A flexible alternative to the d3fc cartesian chart",
@@ -5,0 +5,0 @@ "license": "MIT",

ReadMe.md

@@ -90,13 +90,12 @@ # d3fc-flexi-chart
 
-// the d3fc-flexi-chart component, which uses d3fc-element for layout
-// of the standard features of a chart (axes, labels, plot area)
+var layer = fcFlexi.canvasLayer(d3.scaleLinear(), d3.scaleLinear())
+  .yDomain(yExtent(data))
+  .xDomain(xExtent(data))
+  .plotArea(multi);
+
+// the d3fc-flexi-chart component
 var chart = fcFlexi.chart()
   .leftLabel('Sine / Cosine')
   .bottomLabel('Value')
-  .layers(
-    fcFlexi.canvasLayer(d3.scaleLinear(), d3.scaleLinear())
-      .yDomain(yExtent(data))
-      .xDomain(xExtent(data))
-      .plotArea(multi)
-  );
+  .layers([layer]);
 
@@ -171,2 +170,27 @@ // render
 
+<a name="chart_layers" href="#chart_layers">#</a> *chart*.**layers**(*layerArray*)  
+
+If *layerArray* is specified, sets the array of layer components that this chart should render and returns this chart. If *layerArray* is not specified, returns the current array of layers.
+
+<a name="chart_mapping" href="#chart_mapping">#</a> *chart*.**mapping**(*mappingFunc*)
+
+If *mappingFunc* is specified, sets the mapping function to the specified function, and returns this chart. If *mappingFunc* is not specified, returns the current mapping function.
+
+When rendering the layers, the mapping function is invoked once for each of the layer supplied via the *layers* property. The purpose of the mapping function is to return the data supplied to each of these layers. The default mapping is the identity function, `(d) => d`, which results in each layer being supplied with the same data as the chart.
+
+The mapping function is invoked with the data bound to the chart, (*data*), the index of the current series (*index*) and the array of layers (*layers*). A common pattern for the mapping function is to switch on the layer type. For example, a chart could be used to render "price" as well as "volume", with different yScales. In this case, the following would be a suitable mapping function:
+
+```javascript
+const chart = fcFlexi.chart()
+    .layers([price, volume])
+    .mapping((data, index, layers) => {
+      switch(layers[index]) {
+        case price:
+          return data.price;
+        case volume:
+          return data.volume;
+      }
+    });
+```
+
 <a name="chart_decorate" href="#chart_decorate">#</a> *chart*.**decorate**(*decorateFunc*)
@@ -173,0 +197,0 @@

src/chart.js

@@ -15,3 +15,3 @@ import { select, event } from 'd3-selection';
   let layers = [];
-  let map = d => d;
+  let mapping = d => d;
   let decorate = () => { };
@@ -100,3 +100,3 @@
           const surface = (layer.element == 'd3fc-svg') ? 'svg' : 'canvas';
-          const layerData = map(data, i, layer);
+          const layerData = mapping(data, i, layers);
           select(nodes[i]).select(surface).datum(layerData).call(layer);
@@ -155,7 +155,7 @@ });
 
-  chart.map = (...args) => {
+  chart.mapping = (...args) => {
     if (!args.length) {
-        return map;
+        return mapping;
     }
-    map = args[0];
+    mapping = args[0];
     return chart;
@@ -162,0 +162,0 @@ };

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

138714

increased by1.19%

Number of lines in readme file

258

increased by10.26%

Worsened metrics

Lines of code

860

decreased by-0.23%

No dependency changes