Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@d3fc/d3fc-chart
Advanced tools
@d3fc/d3fc-chart - npm Package Compare versions
Comparing version 3.0.2 to 3.1.0
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-selection'), require('d3-scale'), require('d3-shape'), require('d3-path'), require('d3-array')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'd3-selection', 'd3-scale', 'd3-shape', 'd3-path', 'd3-array'], factory) : | ||
| (global = global || self, factory(global.fc = global.fc || {}, global.d3, global.d3, global.d3, global.d3, global.d3)); | ||
| }(this, function (exports, d3Selection, d3Scale, d3Shape, d3Path, d3Array) { 'use strict'; | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@d3fc/d3fc-rebind'), require('d3-selection'), require('d3-scale'), require('@d3fc/d3fc-axis'), require('@d3fc/d3fc-data-join'), require('@d3fc/d3fc-series')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', '@d3fc/d3fc-rebind', 'd3-selection', 'd3-scale', '@d3fc/d3fc-axis', '@d3fc/d3fc-data-join', '@d3fc/d3fc-series'], factory) : | ||
| (global = global || self, factory(global.fc = global.fc || {}, global.fc, global.d3, global.d3, global.fc, global.fc, global.fc)); | ||
| }(this, function (exports, d3fcRebind, d3Selection, d3Scale, d3fcAxis, d3fcDataJoin, d3fcSeries) { 'use strict'; | ||
| var d3Scale__default = 'default' in d3Scale ? d3Scale['default'] : d3Scale; | ||
| var d3Shape__default = 'default' in d3Shape ? d3Shape['default'] : d3Shape; | ||
| var createReboundMethod = ((target, source, name) => { | ||
| const method = source[name]; | ||
| if (typeof method !== 'function') { | ||
| throw new Error(`Attempt to rebind ${name} which isn't a function on the source object`); | ||
| } | ||
| return (...args) => { | ||
| var value = method.apply(source, args); | ||
| return value === source ? target : value; | ||
| }; | ||
| }); | ||
| var rebind = ((target, source, ...names) => { | ||
| for (const name of names) { | ||
| target[name] = createReboundMethod(target, source, name); | ||
| } | ||
| return target; | ||
| }); | ||
| const createTransform = transforms => name => transforms.reduce((name, fn) => name && fn(name), name); | ||
| var rebindAll = ((target, source, ...transforms) => { | ||
| const transform = createTransform(transforms); | ||
| for (const name of Object.keys(source)) { | ||
| const result = transform(name); | ||
| if (result) { | ||
| target[result] = createReboundMethod(target, source, name); | ||
| } | ||
| } | ||
| return target; | ||
| }); | ||
| var regexify = (strsOrRegexes => strsOrRegexes.map(strOrRegex => typeof strOrRegex === 'string' ? new RegExp(`^${strOrRegex}$`) : strOrRegex)); | ||
| var exclude = ((...exclusions) => { | ||
| exclusions = regexify(exclusions); | ||
| return name => exclusions.every(exclusion => !exclusion.test(name)) && name; | ||
| }); | ||
| var include = ((...inclusions) => { | ||
| inclusions = regexify(inclusions); | ||
| return name => inclusions.some(inclusion => inclusion.test(name)) && name; | ||
| }); | ||
| const capitalizeFirstLetter = str => str[0].toUpperCase() + str.slice(1); | ||
| var prefix = (prefix => name => prefix + capitalizeFirstLetter(name)); | ||
| // "Caution: avoid interpolating to or from the number zero when the interpolator is used to generate | ||
| // a string (such as with attr). | ||
| // Very small values, when stringified, may be converted to scientific notation and | ||
| // cause a temporarily invalid attribute or style property value. | ||
| // For example, the number 0.0000001 is converted to the string "1e-7". | ||
| // This is particularly noticeable when interpolating opacity values. | ||
| // To avoid scientific notation, start or end the transition at 1e-6, | ||
| // which is the smallest value that is not stringified in exponential notation." | ||
| // - https://github.com/mbostock/d3/wiki/Transitions#d3_interpolateNumber | ||
| const effectivelyZero = 1e-6; // Wrapper around d3's selectAll/data data-join, which allows decoration of the result. | ||
| // This is achieved by appending the element to the enter selection before exposing it. | ||
| // A default transition of fade in/out is also implicitly added but can be modified. | ||
| var dataJoin = ((element, className) => { | ||
| element = element || 'g'; | ||
| let key = (_, i) => i; | ||
| let explicitTransition = null; | ||
| const dataJoin = function (container, data) { | ||
| data = data || (d => d); | ||
| const implicitTransition = container.selection ? container : null; | ||
| if (implicitTransition) { | ||
| container = container.selection(); | ||
| } | ||
| const selected = container.selectAll((d, i, nodes) => Array.from(nodes[i].childNodes).filter(node => node.nodeType === 1)).filter(className == null ? element : `${element}.${className}`); | ||
| let update = selected.data(data, key); | ||
| const enter = update.enter().append(element).attr('class', className); | ||
| let exit = update.exit(); // automatically merge in the enter selection | ||
| update = update.merge(enter); // if transitions are enabled apply a default fade in/out transition | ||
| const transition = implicitTransition || explicitTransition; | ||
| if (transition) { | ||
| update = update.transition(transition).style('opacity', 1); | ||
| enter.style('opacity', effectivelyZero); | ||
| exit = exit.transition(transition).style('opacity', effectivelyZero); | ||
| } | ||
| exit.remove(); | ||
| update.enter = () => enter; | ||
| update.exit = () => exit; | ||
| return update; | ||
| }; | ||
| dataJoin.element = (...args) => { | ||
| if (!args.length) { | ||
| return element; | ||
| } | ||
| element = args[0]; | ||
| return dataJoin; | ||
| }; | ||
| dataJoin.className = (...args) => { | ||
| if (!args.length) { | ||
| return className; | ||
| } | ||
| className = args[0]; | ||
| return dataJoin; | ||
| }; | ||
| dataJoin.key = (...args) => { | ||
| if (!args.length) { | ||
| return key; | ||
| } | ||
| key = args[0]; | ||
| return dataJoin; | ||
| }; | ||
| dataJoin.transition = (...args) => { | ||
| if (!args.length) { | ||
| return explicitTransition; | ||
| } | ||
| explicitTransition = args[0]; | ||
| return dataJoin; | ||
| }; | ||
| return dataJoin; | ||
| }); | ||
| const identity = d => d; | ||
| const axisBase = (orient, scale, custom = {}) => { | ||
| let tickArguments = [10]; | ||
| let tickValues = null; | ||
| let decorate = () => {}; | ||
| let tickFormat = null; | ||
| let tickSizeOuter = 6; | ||
| let tickSizeInner = 6; | ||
| let tickPadding = 3; | ||
| const svgDomainLine = d3Shape.line(); | ||
| const dataJoin$1 = dataJoin('g', 'tick').key(identity); | ||
| const domainPathDataJoin = dataJoin('path', 'domain'); | ||
| const defaultLabelOffset = () => ({ | ||
| offset: [0, tickSizeInner + tickPadding] | ||
| }); | ||
| const defaultTickPath = () => ({ | ||
| path: [[0, 0], [0, tickSizeInner]] | ||
| }); | ||
| const labelOffset = custom.labelOffset || defaultLabelOffset; | ||
| const tickPath = custom.tickPath || defaultTickPath; // returns a function that creates a translation based on | ||
| // the bound data | ||
| const containerTranslate = (scale, trans) => { | ||
| let offset = 0; | ||
| if (scale.bandwidth) { | ||
| offset = scale.bandwidth() / 2; | ||
| if (scale.round()) { | ||
| offset = Math.round(offset); | ||
| } | ||
| } | ||
| return d => trans(scale(d) + offset, 0); | ||
| }; | ||
| const translate = (x, y) => isVertical() ? `translate(${y}, ${x})` : `translate(${x}, ${y})`; | ||
| const pathTranspose = arr => isVertical() ? arr.map(d => [d[1], d[0]]) : arr; | ||
| const isVertical = () => orient === 'left' || orient === 'right'; | ||
| const tryApply = (fn, args, defaultVal) => scale[fn] ? scale[fn].apply(scale, args) : defaultVal; | ||
| const axis = selection => { | ||
| if (selection.selection) { | ||
| dataJoin$1.transition(selection); | ||
| domainPathDataJoin.transition(selection); | ||
| } | ||
| selection.each((data, index, group) => { | ||
| const element = group[index]; | ||
| const container = d3Selection.select(element); | ||
| if (!element.__scale__) { | ||
| container.attr('fill', 'none').attr('font-size', 10).attr('font-family', 'sans-serif').attr('text-anchor', orient === 'right' ? 'start' : orient === 'left' ? 'end' : 'middle'); | ||
| } // Stash a snapshot of the new scale, and retrieve the old snapshot. | ||
| const scaleOld = element.__scale__ || scale; | ||
| element.__scale__ = scale.copy(); | ||
| const ticksArray = tickValues == null ? tryApply('ticks', tickArguments, scale.domain()) : tickValues; | ||
| const tickFormatter = tickFormat == null ? tryApply('tickFormat', tickArguments, identity) : tickFormat; | ||
| const sign = orient === 'bottom' || orient === 'right' ? 1 : -1; | ||
| const withSign = ([x, y]) => [x, sign * y]; // add the domain line | ||
| const range = scale.range(); | ||
| const domainPathData = pathTranspose([[range[0], sign * tickSizeOuter], [range[0], 0], [range[1], 0], [range[1], sign * tickSizeOuter]]); | ||
| const domainLine = domainPathDataJoin(container, [data]); | ||
| domainLine.attr('d', svgDomainLine(domainPathData)).attr('stroke', '#000'); | ||
| const g = dataJoin$1(container, ticksArray); | ||
| const labelOffsets = ticksArray.map((d, i) => labelOffset(d, i, ticksArray)); | ||
| const tickPaths = ticksArray.map((d, i) => tickPath(d, i, ticksArray)); // enter | ||
| g.enter().attr('transform', containerTranslate(scaleOld, translate)).append('path').attr('stroke', '#000'); | ||
| g.enter().append('text').attr('transform', (d, i) => translate(...withSign(labelOffsets[i].offset))).attr('fill', '#000'); // exit | ||
| g.exit().attr('transform', containerTranslate(scale, translate)); // update | ||
| g.select('path').attr('visibility', (d, i) => tickPaths[i].hidden && 'hidden').attr('d', (d, i) => svgDomainLine(pathTranspose(tickPaths[i].path.map(withSign)))); | ||
| g.select('text').attr('visibility', (d, i) => labelOffsets[i].hidden && 'hidden').attr('transform', (d, i) => translate(...withSign(labelOffsets[i].offset))).attr('dy', () => { | ||
| let offset = '0em'; | ||
| if (isVertical()) { | ||
| offset = '0.32em'; | ||
| } else if (orient === 'bottom') { | ||
| offset = '0.71em'; | ||
| } | ||
| return offset; | ||
| }).text(tickFormatter); | ||
| g.attr('transform', containerTranslate(scale, translate)); | ||
| decorate(g, data, index); | ||
| }); | ||
| }; | ||
| axis.tickFormat = (...args) => { | ||
| if (!args.length) { | ||
| return tickFormat; | ||
| } | ||
| tickFormat = args[0]; | ||
| return axis; | ||
| }; | ||
| axis.tickSize = (...args) => { | ||
| if (!args.length) { | ||
| return tickSizeInner; | ||
| } | ||
| tickSizeInner = tickSizeOuter = Number(args[0]); | ||
| return axis; | ||
| }; | ||
| axis.tickSizeInner = (...args) => { | ||
| if (!args.length) { | ||
| return tickSizeInner; | ||
| } | ||
| tickSizeInner = Number(args[0]); | ||
| return axis; | ||
| }; | ||
| axis.tickSizeOuter = (...args) => { | ||
| if (!args.length) { | ||
| return tickSizeOuter; | ||
| } | ||
| tickSizeOuter = Number(args[0]); | ||
| return axis; | ||
| }; | ||
| axis.tickPadding = (...args) => { | ||
| if (!args.length) { | ||
| return tickPadding; | ||
| } | ||
| tickPadding = args[0]; | ||
| return axis; | ||
| }; | ||
| axis.decorate = (...args) => { | ||
| if (!args.length) { | ||
| return decorate; | ||
| } | ||
| decorate = args[0]; | ||
| return axis; | ||
| }; | ||
| axis.scale = (...args) => { | ||
| if (!args.length) { | ||
| return scale; | ||
| } | ||
| scale = args[0]; | ||
| return axis; | ||
| }; | ||
| axis.ticks = (...args) => { | ||
| tickArguments = [...args]; | ||
| return axis; | ||
| }; | ||
| axis.tickArguments = (...args) => { | ||
| if (!args.length) { | ||
| return tickArguments.slice(); | ||
| } | ||
| tickArguments = args[0] == null ? [] : [...args[0]]; | ||
| return axis; | ||
| }; | ||
| axis.tickValues = (...args) => { | ||
| if (!args.length) { | ||
| return tickValues.slice(); | ||
| } | ||
| tickValues = args[0] == null ? [] : [...args[0]]; | ||
| return axis; | ||
| }; | ||
| axis.orient = () => orient; | ||
| return axis; | ||
| }; | ||
| const axis = (orient, scale) => { | ||
| let tickCenterLabel = false; | ||
| const labelOffset = (tick, index, ticksArray) => { | ||
| let x = 0; | ||
| let y = base.tickSizeInner() + base.tickPadding(); | ||
| let hidden = false; | ||
| if (tickCenterLabel) { | ||
| const thisPosition = scale(tick); | ||
| const nextPosition = index < ticksArray.length - 1 ? scale(ticksArray[index + 1]) : scale.range()[1]; | ||
| x = (nextPosition - thisPosition) / 2; | ||
| y = base.tickPadding(); | ||
| hidden = index === ticksArray.length - 1 && thisPosition === nextPosition; | ||
| } | ||
| return { | ||
| offset: [x, y], | ||
| hidden | ||
| }; | ||
| }; | ||
| const base = axisBase(orient, scale, { | ||
| labelOffset | ||
| }); | ||
| const axis = selection => { | ||
| return base(selection); | ||
| }; | ||
| axis.tickCenterLabel = (...args) => { | ||
| if (!args.length) { | ||
| return tickCenterLabel; | ||
| } | ||
| tickCenterLabel = args[0]; | ||
| return axis; | ||
| }; | ||
| rebindAll(axis, base); | ||
| return axis; | ||
| }; | ||
| const axisTop = scale => axis('top', scale); | ||
| const axisBottom = scale => axis('bottom', scale); | ||
| const axisLeft = scale => axis('left', scale); | ||
| const axisRight = scale => axis('right', scale); | ||
| var store = (function () { | ||
@@ -475,2 +82,3 @@ var data = {}; | ||
| var svgPlotArea = null; | ||
| var isContextLost = false; | ||
| var xAxisStore = store('tickFormat', 'ticks', 'tickArguments', 'tickSize', 'tickSizeInner', 'tickSizeOuter', 'tickValues', 'tickPadding', 'tickCenterLabel'); | ||
@@ -486,17 +94,17 @@ | ||
| var containerDataJoin = dataJoin('d3fc-group', 'cartesian-chart'); | ||
| var webglDataJoin = dataJoin('d3fc-canvas', 'webgl-plot-area'); | ||
| var canvasDataJoin = dataJoin('d3fc-canvas', 'canvas-plot-area'); | ||
| var svgDataJoin = dataJoin('d3fc-svg', 'svg-plot-area'); | ||
| var xAxisDataJoin = dataJoin('d3fc-svg', 'x-axis').key(function (d) { | ||
| var containerDataJoin = d3fcDataJoin.dataJoin('d3fc-group', 'cartesian-chart'); | ||
| var webglDataJoin = d3fcDataJoin.dataJoin('d3fc-canvas', 'webgl-plot-area'); | ||
| var canvasDataJoin = d3fcDataJoin.dataJoin('d3fc-canvas', 'canvas-plot-area'); | ||
| var svgDataJoin = d3fcDataJoin.dataJoin('d3fc-svg', 'svg-plot-area'); | ||
| var xAxisDataJoin = d3fcDataJoin.dataJoin('d3fc-svg', 'x-axis').key(function (d) { | ||
| return d; | ||
| }); | ||
| var yAxisDataJoin = dataJoin('d3fc-svg', 'y-axis').key(function (d) { | ||
| var yAxisDataJoin = d3fcDataJoin.dataJoin('d3fc-svg', 'y-axis').key(function (d) { | ||
| return d; | ||
| }); | ||
| var chartLabelDataJoin = dataJoin('div', 'chart-label'); | ||
| var xLabelDataJoin = dataJoin('div', 'x-label').key(function (d) { | ||
| var chartLabelDataJoin = d3fcDataJoin.dataJoin('div', 'chart-label'); | ||
| var xLabelDataJoin = d3fcDataJoin.dataJoin('div', 'x-label').key(function (d) { | ||
| return d; | ||
| }); | ||
| var yLabelDataJoin = dataJoin('div', 'y-label').key(function (d) { | ||
| var yLabelDataJoin = d3fcDataJoin.dataJoin('div', 'y-label').key(function (d) { | ||
| return d; | ||
@@ -531,5 +139,15 @@ }); | ||
| var canvas = d3Selection.select(nodes[i]).select('canvas').node(); | ||
| webglPlotArea.context(canvas.getContext('webgl')).xScale(xScale).yScale(yScale); | ||
| webglPlotArea.context(isContextLost ? null : canvas.getContext('webgl')).xScale(xScale).yScale(yScale); | ||
| webglPlotArea(d); | ||
| }); | ||
| container.select('.webgl-plot-area>canvas').on('webglcontextlost', function () { | ||
| console.warn('WebGLRenderingContext lost'); | ||
| d3Selection.event.preventDefault(); | ||
| isContextLost = true; | ||
| container.node().requestRedraw(); | ||
| }).on('webglcontextrestored', function () { | ||
| console.info('WebGLRenderingContext restored'); | ||
| isContextLost = false; | ||
| container.node().requestRedraw(); | ||
| }); | ||
| canvasDataJoin(container, canvasPlotArea ? [data] : []).classed('plot-area', true).on('draw', function (d, i, nodes) { | ||
@@ -585,9 +203,9 @@ var canvas = d3Selection.select(nodes[i]).select('canvas').node(); | ||
| var scaleExclusions = exclude(/range\w*/, // the scale range is set via the component layout | ||
| var scaleExclusions = d3fcRebind.exclude(/range\w*/, // the scale range is set via the component layout | ||
| /tickFormat/ // use axis.tickFormat instead (only present on linear scales) | ||
| ); | ||
| rebindAll(cartesian, xScale, scaleExclusions, prefix('x')); | ||
| rebindAll(cartesian, yScale, scaleExclusions, prefix('y')); | ||
| rebindAll(cartesian, xAxisStore, prefix('x')); | ||
| rebindAll(cartesian, yAxisStore, prefix('y')); | ||
| d3fcRebind.rebindAll(cartesian, xScale, scaleExclusions, d3fcRebind.prefix('x')); | ||
| d3fcRebind.rebindAll(cartesian, yScale, scaleExclusions, d3fcRebind.prefix('y')); | ||
| d3fcRebind.rebindAll(cartesian, xAxisStore, d3fcRebind.prefix('x')); | ||
| d3fcRebind.rebindAll(cartesian, yAxisStore, d3fcRebind.prefix('y')); | ||
@@ -719,8 +337,8 @@ cartesian.xOrient = function () { | ||
| xAxis: { | ||
| bottom: axisBottom, | ||
| top: axisTop | ||
| bottom: d3fcAxis.axisBottom, | ||
| top: d3fcAxis.axisTop | ||
| }, | ||
| yAxis: { | ||
| right: axisRight, | ||
| left: axisLeft | ||
| right: d3fcAxis.axisRight, | ||
| left: d3fcAxis.axisLeft | ||
| } | ||
@@ -772,3 +390,3 @@ }; | ||
| rebindAll(cartesianBase, cartesian, include(/^x/, /^y/, 'chartLabel')); | ||
| d3fcRebind.rebindAll(cartesianBase, cartesian, d3fcRebind.include(/^x/, /^y/, 'chartLabel')); | ||
@@ -806,238 +424,9 @@ cartesianBase.yLabel = function () { | ||
| var functor$2 = (d => typeof d === 'function' ? d : () => d); | ||
| // Checks that passed properties are 'defined', meaning that calling them with (d, i) returns non null values | ||
| function defined() { | ||
| const outerArguments = arguments; | ||
| return function (d, i) { | ||
| for (let c = 0, j = outerArguments.length; c < j; c++) { | ||
| if (outerArguments[c](d, i) == null) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| }; | ||
| } | ||
| // determines the offset required along the cross scale based | ||
| // on the series alignment | ||
| var alignOffset = ((align, width) => { | ||
| switch (align) { | ||
| case 'left': | ||
| return width / 2; | ||
| case 'right': | ||
| return -width / 2; | ||
| default: | ||
| return 0; | ||
| } | ||
| }); | ||
| var createBase = (initialValues => { | ||
| const env = Object.assign({}, initialValues); | ||
| const base = () => {}; | ||
| Object.keys(env).forEach(key => { | ||
| base[key] = (...args) => { | ||
| if (!args.length) { | ||
| return env[key]; | ||
| } | ||
| env[key] = args[0]; | ||
| return base; | ||
| }; | ||
| }); | ||
| return base; | ||
| }); | ||
| var xyBase = (() => { | ||
| let baseValue = () => 0; | ||
| let crossValue = d => d.x; | ||
| let mainValue = d => d.y; | ||
| let align = 'center'; | ||
| let bandwidth = () => 5; | ||
| let orient = 'vertical'; | ||
| const base = createBase({ | ||
| decorate: () => {}, | ||
| defined: (d, i) => defined(baseValue, crossValue, mainValue)(d, i), | ||
| xScale: d3Scale.scaleIdentity(), | ||
| yScale: d3Scale.scaleIdentity() | ||
| }); | ||
| base.values = (d, i) => { | ||
| const width = bandwidth(d, i); | ||
| const offset = alignOffset(align, width); | ||
| const xScale = base.xScale(); | ||
| const yScale = base.yScale(); | ||
| if (orient === 'vertical') { | ||
| const y = yScale(mainValue(d, i), i); | ||
| const y0 = yScale(baseValue(d, i), i); | ||
| const x = xScale(crossValue(d, i), i) + offset; | ||
| return { | ||
| d, | ||
| x, | ||
| y, | ||
| y0, | ||
| width, | ||
| height: y - y0, | ||
| origin: [x, y], | ||
| baseOrigin: [x, y0], | ||
| transposedX: x, | ||
| transposedY: y | ||
| }; | ||
| } else { | ||
| const y = xScale(mainValue(d, i), i); | ||
| const y0 = xScale(baseValue(d, i), i); | ||
| const x = yScale(crossValue(d, i), i) + offset; | ||
| return { | ||
| d, | ||
| x, | ||
| y, | ||
| y0, | ||
| width, | ||
| height: y - y0, | ||
| origin: [y, x], | ||
| baseOrigin: [y0, x], | ||
| transposedX: y, | ||
| transposedY: x | ||
| }; | ||
| } | ||
| }; | ||
| base.xValues = () => orient === 'vertical' ? [crossValue] : [baseValue, mainValue]; | ||
| base.yValues = () => orient !== 'vertical' ? [crossValue] : [baseValue, mainValue]; | ||
| base.baseValue = (...args) => { | ||
| if (!args.length) { | ||
| return baseValue; | ||
| } | ||
| baseValue = functor$2(args[0]); | ||
| return base; | ||
| }; | ||
| base.crossValue = (...args) => { | ||
| if (!args.length) { | ||
| return crossValue; | ||
| } | ||
| crossValue = functor$2(args[0]); | ||
| return base; | ||
| }; | ||
| base.mainValue = (...args) => { | ||
| if (!args.length) { | ||
| return mainValue; | ||
| } | ||
| mainValue = functor$2(args[0]); | ||
| return base; | ||
| }; | ||
| base.bandwidth = (...args) => { | ||
| if (!args.length) { | ||
| return bandwidth; | ||
| } | ||
| bandwidth = functor$2(args[0]); | ||
| return base; | ||
| }; | ||
| base.align = (...args) => { | ||
| if (!args.length) { | ||
| return align; | ||
| } | ||
| align = args[0]; | ||
| return base; | ||
| }; | ||
| base.orient = (...args) => { | ||
| if (!args.length) { | ||
| return orient; | ||
| } | ||
| orient = args[0]; | ||
| return base; | ||
| }; | ||
| return base; | ||
| }); | ||
| const red = '#c60'; | ||
| const green = '#6c0'; | ||
| const black = '#000'; | ||
| const gray = '#ddd'; | ||
| const darkGray = '#999'; | ||
| var colors = { | ||
| red, | ||
| green, | ||
| black, | ||
| gray, | ||
| darkGray | ||
| }; | ||
| var seriesSvgLine = (() => { | ||
| const base = xyBase(); | ||
| const lineData = d3Shape.line().x((d, i) => base.values(d, i).transposedX).y((d, i) => base.values(d, i).transposedY); | ||
| const join = dataJoin('path', 'line'); | ||
| const line = selection => { | ||
| if (selection.selection) { | ||
| join.transition(selection); | ||
| } | ||
| lineData.defined(base.defined()); | ||
| selection.each((data, index, group) => { | ||
| const path = join(d3Selection.select(group[index]), [data]); | ||
| path.enter().attr('fill', 'none').attr('stroke', colors.black); | ||
| path.attr('d', lineData); | ||
| base.decorate()(path, data, index); | ||
| }); | ||
| }; | ||
| rebindAll(line, base, exclude('baseValue', 'bandwidth', 'align')); | ||
| rebind(line, join, 'key'); | ||
| rebind(line, lineData, 'curve'); | ||
| return line; | ||
| }); | ||
| var seriesCanvasLine = (() => { | ||
| const base = xyBase(); | ||
| const lineData = d3Shape.line().x((d, i) => base.values(d, i).transposedX).y((d, i) => base.values(d, i).transposedY); | ||
| const line = data => { | ||
| const context = lineData.context(); | ||
| context.beginPath(); | ||
| context.strokeStyle = colors.black; | ||
| context.fillStyle = 'transparent'; | ||
| base.decorate()(context, data); | ||
| lineData.defined(base.defined())(data); | ||
| context.fill(); | ||
| context.stroke(); | ||
| context.closePath(); | ||
| }; | ||
| rebindAll(line, base, exclude('baseValue', 'bandwidth', 'align')); | ||
| rebind(line, lineData, 'curve', 'context'); | ||
| return line; | ||
| }); | ||
| var cartesian = cartesianBase(function (cartesian, plotArea) { | ||
| return cartesian.svgPlotArea(plotArea); | ||
| }, seriesSvgLine); | ||
| }, d3fcSeries.seriesSvgLine); | ||
| var cartesian$1 = cartesianBase(function (cartesian, plotArea) { | ||
| return cartesian.canvasPlotArea(plotArea); | ||
| }, seriesCanvasLine); | ||
| }, d3fcSeries.seriesCanvasLine); | ||
@@ -1044,0 +433,0 @@ exports.chartCanvasCartesian = cartesian$1; |
@@ -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="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","webgl-plot-area"),F=r("d3fc-canvas","canvas-plot-area"),G=r("d3fc-svg","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]:[]).classed("plot-area",!0).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(),d.strokeStyle=L.black,d.fillStyle="transparent",a.decorate()(d,c),b.defined(a.defined())(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})}); | ||
| (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})}); |
@@ -6,2 +6,14 @@ # Change Log | ||
| # [3.1.0](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-chart@3.0.2...@d3fc/d3fc-chart@3.1.0) (2020-03-19) | ||
| ### Features | ||
| * add fill to webgl boxplot ([7ea7859](https://github.com/d3fc/d3fc/commit/7ea7859)) | ||
| * add handling for context lost ([2f4b391](https://github.com/d3fc/d3fc/commit/2f4b391)) | ||
| ## [3.0.2](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-chart@3.0.1...@d3fc/d3fc-chart@3.0.2) (2020-02-18) | ||
@@ -8,0 +20,0 @@ |
| { | ||
| "name": "@d3fc/d3fc-chart", | ||
| "version": "3.0.2", | ||
| "version": "3.1.0", | ||
| "description": "A simple Cartesian chart component that renders to canvas or SVG.", | ||
@@ -26,12 +26,12 @@ "license": "MIT", | ||
| "devDependencies": { | ||
| "@d3fc/d3fc-annotation": "^2.4.42", | ||
| "@d3fc/d3fc-extent": "^3.1.7", | ||
| "@d3fc/d3fc-annotation": "^2.5.0", | ||
| "@d3fc/d3fc-extent": "^3.2.0", | ||
| "d3": "^4.2.5" | ||
| }, | ||
| "dependencies": { | ||
| "@d3fc/d3fc-axis": "^2.2.5", | ||
| "@d3fc/d3fc-data-join": "^5.0.11", | ||
| "@d3fc/d3fc-element": "^5.3.28", | ||
| "@d3fc/d3fc-axis": "^2.3.0", | ||
| "@d3fc/d3fc-data-join": "^5.1.0", | ||
| "@d3fc/d3fc-element": "^5.4.0", | ||
| "@d3fc/d3fc-rebind": "^5.0.10", | ||
| "@d3fc/d3fc-series": "^4.4.17", | ||
| "@d3fc/d3fc-series": "^4.5.0", | ||
| "d3-scale": "^1.0.3", | ||
@@ -43,3 +43,3 @@ "d3-selection": "^1.0.2" | ||
| }, | ||
| "gitHead": "6562a4dc0cea7adeb693f94c5844e5be081f53fc" | ||
| "gitHead": "8a27597494353a1441a1a71ca06707d9e28c4381" | ||
| } |
@@ -25,2 +25,3 @@ import { select, event } from 'd3-selection'; | ||
| let svgPlotArea = null; | ||
| let isContextLost = false; | ||
| let xAxisStore = store('tickFormat', 'ticks', 'tickArguments', 'tickSize', 'tickSizeInner', 'tickSizeOuter', 'tickValues', 'tickPadding', 'tickCenterLabel'); | ||
@@ -80,3 +81,3 @@ let xDecorate = () => { }; | ||
| .node(); | ||
| webglPlotArea.context(canvas.getContext('webgl')) | ||
| webglPlotArea.context(isContextLost ? null : canvas.getContext('webgl')) | ||
| .xScale(xScale) | ||
@@ -87,2 +88,15 @@ .yScale(yScale); | ||
| container.select('.webgl-plot-area>canvas') | ||
| .on('webglcontextlost', () => { | ||
| console.warn('WebGLRenderingContext lost'); | ||
| event.preventDefault(); | ||
| isContextLost = true; | ||
| container.node().requestRedraw(); | ||
| }) | ||
| .on('webglcontextrestored', () => { | ||
| console.info('WebGLRenderingContext restored'); | ||
| isContextLost = false; | ||
| container.node().requestRedraw(); | ||
| }); | ||
| canvasDataJoin(container, canvasPlotArea ? [data] : []) | ||
@@ -89,0 +103,0 @@ .classed('plot-area', true) |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-13.24%
140125
- Lines of code
- decreased by-28.38%
1201
Dependency changes
Updated@d3fc/d3fc-axis@^2.3.0
Updated@d3fc/d3fc-data-join@^5.1.0
Updated@d3fc/d3fc-element@^5.4.0
Updated@d3fc/d3fc-series@^4.5.0