Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
mapd3 - npm Package Compare versions
Comparing version 0.7.0 to 0.8.0
@@ -1,9 +0,17 @@ | ||
| /* | ||
| to do: | ||
| - on | ||
| - destroy | ||
| - tooltip | ||
| - brush | ||
| - dataManager | ||
| */ | ||
| /** | ||
| * A data generator for MapD3 charts | ||
| * @namespace DataManager | ||
| * @name DataManager | ||
| * @returns {object} The dataManager instance. | ||
| * @example | ||
| * mapd3.DataManager() | ||
| * .setConfig({ | ||
| * keyType: "time", | ||
| * range: [0, 100], | ||
| * pointCount: 200, | ||
| * groupCount: 2, | ||
| * lineCount: 4 | ||
| * }) | ||
| * .generateTestDataset() | ||
| */ | ||
@@ -14,12 +22,95 @@ const keyType = "number" // time, number, string | ||
| const dataManager = mapd3.DataManager() | ||
| .setConfig({ | ||
| keyType, | ||
| range: [0, 100], | ||
| pointCount: 100, | ||
| groupCount: 2 | ||
| }) | ||
| /** | ||
| * Configure the data manager | ||
| * @name setConfig | ||
| * @param {object} config A config object. | ||
| * @param {string} [config.keyType="number"] The x axis type: number, string, time | ||
| * @param {Array.<number>} [config.range=[0, 100]] The value range | ||
| * @param {number} [config.pointCount=200] The number of points | ||
| * @param {number} [config.groupCount=2] The number of groups, 2 for adding a y2 axis | ||
| * @param {number} [config.lineCount=4] The number of lines | ||
| * @returns {object} The dataManager instance. | ||
| * @memberof DataManager | ||
| * @instance | ||
| * @example | ||
| * mapd3.DataManager() | ||
| * .setConfig({ | ||
| * keyType, | ||
| * range: [0, 100], | ||
| * pointCount: 200, | ||
| * groupCount: 2, | ||
| * lineCount: 4 | ||
| * }) | ||
| */ | ||
| dataManager.setConfig({ | ||
| keyType, | ||
| range: [0, 100], | ||
| pointCount: 2000, | ||
| groupCount: 1, | ||
| lineCount: 4 | ||
| }) | ||
| /** | ||
| * Generate some test data | ||
| * @name generateTestDataset | ||
| * @returns {object} A data object | ||
| * @memberof DataManager | ||
| * @instance | ||
| * @example | ||
| * mapd3.DataManager() | ||
| * .setConfig({ | ||
| * keyType: "time", | ||
| * range: [0, 100], | ||
| * pointCount: 200, | ||
| * groupCount: 2, | ||
| * lineCount: 4 | ||
| * }) | ||
| * .generateTestDataset() | ||
| * | ||
| * { | ||
| * "series": [{ | ||
| * "label": "Label 0", | ||
| * "id": 0, | ||
| * "group": 0, | ||
| * "values": [{ | ||
| * "value": 16.85, | ||
| * "key": "2017-11-07T05:00:00.000Z" | ||
| * }, { | ||
| * "value": 17.94, | ||
| * "key": "2017-11-08T05:00:00.000Z" | ||
| * }, { | ||
| * "value": 19.03, | ||
| * "key": "2017-11-09T05:00:00.000Z" | ||
| * }, { | ||
| * "value": 18.97, | ||
| * "key": "2017-11-10T05:00:00.000Z" | ||
| * }] | ||
| * }, { | ||
| * "label": "Label 1", | ||
| * "id": 1, | ||
| * "group": 1, | ||
| * "values": [{ | ||
| * "value": 13.31, | ||
| * "key": "2017-11-07T05:00:00.000Z" | ||
| * }, { | ||
| * "value": 13.15, | ||
| * "key": "2017-11-08T05:00:00.000Z" | ||
| * }, { | ||
| * "value": 15.76, | ||
| * "key": "2017-11-09T05:00:00.000Z" | ||
| * }, { | ||
| * "value": 17.74, | ||
| * "key": "2017-11-10T05:00:00.000Z" | ||
| * }] | ||
| * }] | ||
| * } | ||
| * | ||
| */ | ||
| const data = dataManager.generateTestDataset() | ||
| /** | ||
| * A base chart for line/area/stacked charts. | ||
| * A base chart for line/area/stacked area/bar/stacked bar charts. | ||
| * @namespace Chart | ||
@@ -31,2 +122,9 @@ * @name Chart | ||
| * mapd3.Chart(document.querySelector('.chart')) | ||
| * .setConfig({ | ||
| * width: 800, | ||
| * height: 400, | ||
| * keyType: "time", | ||
| * chartType: "line" | ||
| * }) | ||
| * .setData(data) | ||
| */ | ||
@@ -36,230 +134,183 @@ const chart = mapd3.Chart(document.querySelector(".chart1")) | ||
| /** | ||
| * Configure the chart | ||
| * @name setConfig | ||
| * @param {object} config A config object. | ||
| * @param {string} config.keyType Data type of x values: time, number, string | ||
| * @param {string} config.chartType The type of marks: line, area, stackedArea | ||
| * @param {number} config.width Outer chart width, including margins | ||
| * @param {number} config.height Outer chart height, including margins | ||
| * @param {object} config.margin Margin object {top, right, bottom, left} | ||
| * @param {string} config.grid Grid visibility: horizontal, vertical, full | ||
| * @param {string} config.xAxisFormat d3-format string for x axis | ||
| * @param {string} config.yAxisFormat d3-format string for y axis | ||
| * @param {string} config.yTicks Suggestion for the number of y ticks | ||
| * @param {Array.<string>} config.colorSchema List of {key, value} colors to use on marks | ||
| * @param {number} config.tickSkip The number of ticks to skip to simplify the x axis | ||
| * @returns {object} The chart instance. | ||
| * @memberof Chart | ||
| * @instance | ||
| * @example | ||
| * mapd3.Chart(document.querySelector('.chart')) | ||
| * .setConfig({ | ||
| * width: 100 | ||
| * }) | ||
| */ | ||
| * Configure the chart | ||
| * @name setConfig | ||
| * @param {object} config A config object. | ||
| * @param {number} [config.width=800] Outer chart width, including margins | ||
| * @param {number} [config.height=500] Outer chart height, including margins | ||
| * @param {.<string, number>} [config.margin=margin: {top: 48, right: 32, bottom: 48, left: 32}] Margin object | ||
| * @param {string} [config.keyType="time"] Data type of x values: time, number, string | ||
| * @param {string} [config.chartType="line"] The type of marks: line, area, stackedArea, bar, stacked bar | ||
| * @param {boolean} [config.isAnimated=false] If using animated opening | ||
| * @param {number} [config.animationDuration=1500] Animated opening duration | ||
| * <scale> | ||
| * @param {Array.<string>} [config.colorSchema] List of {key, value} colors to use on marks | ||
| * @param {string} [config.defaultColor="skyblue"] Color for marks that doesn't match anything on the colorSchema | ||
| * @param {(Array.<number>|"auto")} [config.xDomain="auto"] Set X axis domain or "auto" for using data extent | ||
| * @param {(Array.<number>|"auto")} [config.yDomain="auto"] Set Y axis domain or "auto" for using data extent | ||
| * @param {(Array.<number>|"auto")} [config.yDomain="auto"] Set 2nd Y axis domain or "auto" for using data extent | ||
| * <axis> | ||
| * @param {number} [config.tickPadding=5] Padding between tick and tick label | ||
| * @param {number} [config.tickSizes=5] Tick length | ||
| * @param {string} [config.xTickSkip="auto"] Indication for number of X ticks or "auto" | ||
| * @param {string} [config.yTicks="auto"] Indication for number of Y ticks or "auto" | ||
| * @param {string} [config.y2Ticks="auto"] Indication for number of Y2 ticks or "auto" | ||
| * @param {string} [config.xAxisFormat="auto"] Format string for the X axis or "auto" | ||
| * @param {string} [config.yAxisFormat=".2f"] Format string for the Y axis | ||
| * @param {string} [config.y2AxisFormat=".2f"] Format string for the Y2 axis | ||
| * @param {string} [config.grid="horizontal"] Background grid: horizontal, vertical, full | ||
| * @param {number} [config.axisTransitionDuration=0] Animated transition duration | ||
| * <hover> | ||
| * @param {string} [config.dotRadius=4] Radius of hover dots | ||
| * <tooltip> | ||
| * @param {string} [config.valueFormat=".2f"] Format string for values in tooltip/legend | ||
| * @param {number} [config.mouseChaseDuration=0] Duration of lag between cursor and tooltip | ||
| * @param {string} [config.dateFormat="%b %d, %Y"] Format string for title when it's a date | ||
| * <legend> | ||
| * @param {number|string} [config.legendXPosition="auto"] Legend x position or "auto" to dock right | ||
| * @param {number|string} [config.legendYPosition="auto"] Legend y position or "auto" to dock top | ||
| * @param {string} [config.legendTitle="Dataset"] Legend title | ||
| * @param {boolean} [config.legendIsEnabled=true] Enable legend | ||
| * <binning> | ||
| * @param {string} [config.binningResolution="1mo"] Selected resolution | ||
| * @param {boolean} [config.binningIsAuto=true] If "Auto" is selected | ||
| * @param {string} [config.binningToggles=["10y", "1y", "1q", "1mo"] List of bins to select | ||
| * @param {boolean} [config.binningIsEnabled=true] Enable binning | ||
| * <domain> | ||
| * @param {string} [config.xDomainEditorFormat="%b %d, %Y"] Format string for x domain editor | ||
| * @param {string} [config.yDomainEditorFormat=".2f"] Format string for y domain editor | ||
| * @param {string} [config.y2DomainEditorFormat=".2f"] Format string for y domain editor | ||
| * @param {boolean} [config.domainEditorIsEnabled=true] Enable domain editing | ||
| * <brush range> | ||
| * @param {object<Date>|number} [config.brushRangeMin="Jan 01, 2001"] Brush min range to display and to set brush | ||
| * @param {object<Date>|number} [config.brushRangeMax="Jan 02, 2002"] Brush max range to display and to set brush | ||
| * @param {boolean} [config.brushRangeIsEnabled=true] Enable brush range editor | ||
| * <brush> | ||
| * @param {boolean} [config.brushIsEnabled=true] Enable brush | ||
| * <label> | ||
| * @param {string} [config.xLabel="X Axis Label"] X axis label | ||
| * @param {string} [config.yLabel="Y Axis Label"] Y axis label | ||
| * @param {string} [config.y2Label="Y2 Axis Label"] Y2 axis label | ||
| * @returns {object} The chart instance. | ||
| * @memberof Chart | ||
| * @instance | ||
| * @example | ||
| * mapd3.Chart(document.querySelector('.chart')) | ||
| * .setConfig({ | ||
| * width: 100 | ||
| * }) | ||
| */ | ||
| chart.setConfig({ | ||
| // common | ||
| width: 800, | ||
| height: 400, | ||
| margin: { | ||
| top: 16, | ||
| right: 32, | ||
| bottom: 40, | ||
| left: 64 | ||
| top: 32, | ||
| right: 70, | ||
| bottom: 64, | ||
| left: 70 | ||
| }, | ||
| keyType, // time, number, string | ||
| chartType, // line, area, stackedArea, bar, stackedBar | ||
| // intro animation | ||
| isAnimated: false, | ||
| animationDuration: 1500, | ||
| // scale | ||
| colorSchema: palette, | ||
| defaultColor: "skyblue", | ||
| xDomain: "auto", | ||
| yDomain: "auto", | ||
| y2Domain: "auto", | ||
| // axis | ||
| tickPadding: 5, | ||
| tickSizes: 8, | ||
| yTicks: "auto", | ||
| y2Ticks: "auto", | ||
| xTickSkip: "auto", | ||
| xAxisFormat: "auto", | ||
| yAxisFormat: ".2f", | ||
| y2AxisFormat: ".2f", | ||
| grid: "horizontal", | ||
| xAxisFormat: "%x", | ||
| yAxisFormat: ".1f", | ||
| yTicks: 5, | ||
| colorSchema: mapd3.colors.mapdColors.map((d, i) => ({key: i, value: d})), | ||
| keyType, | ||
| chartType, | ||
| tickSkip: 20 | ||
| }) | ||
| axisTransitionDuration: 0, | ||
| /** | ||
| * Set the X title | ||
| * @name setXTitle | ||
| * @param {object} data The new x title. | ||
| * @returns {object} The chart instance. | ||
| * @memberof Chart | ||
| * @instance | ||
| * @example | ||
| * mapd3.Chart(document.querySelector('.chart')) | ||
| * .setXTitle("X Title") | ||
| */ | ||
| chart.setXTitle("X Title") | ||
| // hover | ||
| dotRadius: 4, | ||
| /** | ||
| * Set the Y title | ||
| * @name setYTitle | ||
| * @param {object} data The new y title. | ||
| * @returns {object} The chart instance. | ||
| * @memberof Chart | ||
| * @instance | ||
| * @example | ||
| * mapd3.Chart(document.querySelector('.chart')) | ||
| * .setYTitle("Y Title") | ||
| */ | ||
| chart.setYTitle("Y Title") | ||
| // tooltip | ||
| valueFormat: ".2f", | ||
| mouseChaseDuration: 0, | ||
| tooltipHeight: 48, | ||
| tooltipWidth: 160, | ||
| dateFormat: "%b %d, %Y", | ||
| /** | ||
| * Set the data | ||
| * @name setData | ||
| * @param {object} data The data object. | ||
| * @returns {object} The chart instance. | ||
| * @memberof Chart | ||
| * @instance | ||
| * @example | ||
| * mapd3.Chart(document.querySelector('.chart')) | ||
| * .setData({ | ||
| * "series": [{ | ||
| * "label": "line A", | ||
| * "id": 1, | ||
| * "group": 1, | ||
| * "values": [{ | ||
| * "value": 3.7868887622782648, | ||
| * "key": 0 | ||
| * }] | ||
| * }, { | ||
| * "label": "line B", | ||
| * "id": 2, | ||
| * "group": 1, | ||
| * "values": [{ | ||
| * "value": 56.994525844854344, | ||
| * "key": 0 | ||
| * }] | ||
| * }, { | ||
| * "label": "line C", | ||
| * "id": 3, | ||
| * "group": 2, | ||
| * "values": [{ | ||
| * "value": 10.118456503844255, | ||
| * "key": 0 | ||
| * }] | ||
| * }] | ||
| *}) | ||
| */ | ||
| // legend | ||
| legendXPosition: "auto", | ||
| legendYPosition: "auto", | ||
| legendTitle: "Dataset", | ||
| legendIsEnabled: true, | ||
| chart.setData(data) | ||
| // binning | ||
| binningResolution: "1mo", | ||
| binningIsAuto: true, | ||
| binningToggles: ["10y", "1y", "1q", "1mo"], | ||
| binningIsEnabled: true, | ||
| // domain | ||
| domainEditorIsEnabled: true, | ||
| xDomainEditorFormat: "%b %d, %Y", | ||
| yDomainEditorFormat: ".2f", | ||
| y2DomainEditorFormat: ".2f", | ||
| /** | ||
| * Forces a render, for example after using setConfig. | ||
| * Automatically called by setData, Uses cached data. | ||
| * @name render | ||
| * @returns {object} The chart instance. | ||
| * @memberof Chart | ||
| * @instance | ||
| * @example | ||
| * mapd3.Chart(document.querySelector('.chart')) | ||
| * .setConfig({width: 100}) | ||
| * .render() | ||
| */ | ||
| chart.setConfig({width: 700}) | ||
| .render() | ||
| // brush range | ||
| brushRangeMin: "Jan 01, 2001", | ||
| brushRangeMax: "Jan 02, 2002", | ||
| brushRangeIsEnabled: true, | ||
| /** | ||
| * A simple tooltip. | ||
| * @namespace Tooltip | ||
| * @name Tooltip | ||
| * @param {object} chart The chart object to apply the tooltip to | ||
| * @returns {object} The tooltip instance. | ||
| * @example | ||
| * var chart = mapd3.Chart(document.querySelector('.chart')) | ||
| * mapd3.Tooltip(chart) | ||
| */ | ||
| mapd3.Tooltip(chart) | ||
| // brush | ||
| brushIsEnabled: true, | ||
| // label | ||
| xLabel: "X Axis Label", | ||
| yLabel: "Y Axis Label", | ||
| y2Label: "Y2 Axis Label" | ||
| }) | ||
| /** | ||
| * A simple Legend. | ||
| * @namespace Legend | ||
| * @name Legend | ||
| * @param {object} chart The chart object to apply the legend to | ||
| * @returns {object} The legend instance. | ||
| * @example | ||
| * var chart = mapd3.Chart(document.querySelector('.chart')) | ||
| * mapd3.Legend(chart) | ||
| */ | ||
| /** | ||
| * Set the content | ||
| * @name setContent | ||
| * @param {object} series The data series. | ||
| * @returns {object} The legend instance. | ||
| * @memberof Legend | ||
| * @instance | ||
| * @example | ||
| * mapd3.Legend(document.querySelector('.chart')) | ||
| * .setContent(data.series) | ||
| */ | ||
| /** | ||
| * Set the title | ||
| * @name setTitle | ||
| * @param {string} title The new title. | ||
| * @returns {object} The legend instance. | ||
| * @memberof Legend | ||
| * @instance | ||
| * @example | ||
| * mapd3.Legend(document.querySelector('.chart')) | ||
| * .setTitle("title") | ||
| */ | ||
| /** | ||
| * Set size | ||
| * @name setSize | ||
| * @param {number} width Can be a number or "auto". | ||
| * @param {number} height Can be a number or "auto". | ||
| * @returns {object} The legend instance. | ||
| * @memberof Legend | ||
| * @instance | ||
| * @example | ||
| * mapd3.Legend(document.querySelector('.chart')) | ||
| * .setSize(100, "auto") | ||
| */ | ||
| /** | ||
| * Set position | ||
| * @name setPosition | ||
| * @param {number} xPosition X position. | ||
| * @returns {object} The legend instance. | ||
| * @memberof Legend | ||
| * @instance | ||
| * @example | ||
| * mapd3.Legend(document.querySelector('.chart')) | ||
| * .setPosition(100) | ||
| */ | ||
| /** | ||
| * Show | ||
| * @name show | ||
| * @returns {object} The legend instance. | ||
| * @memberof Legend | ||
| * @instance | ||
| * @example | ||
| * mapd3.Legend(document.querySelector('.chart')) | ||
| * .show() | ||
| */ | ||
| /** | ||
| * Hide | ||
| * @name hide | ||
| * @returns {object} The legend instance. | ||
| * @memberof Legend | ||
| * @instance | ||
| * @example | ||
| * mapd3.Legend(document.querySelector('.chart')) | ||
| * .hide() | ||
| */ | ||
| mapd3.Legend(chart) | ||
| .setContent(data.series) | ||
| .setTitle("Title") | ||
| .setSize(80, "auto") | ||
| .setPosition(680) | ||
| .show() | ||
| * Set data and render | ||
| * @name setData | ||
| * @returns {object} The chart instance. | ||
| * @memberof Chart | ||
| * @instance | ||
| * @example | ||
| * mapd3.Chart(document.querySelector('.chart')) | ||
| * .setData(data) | ||
| */ | ||
| chart.setData(data) | ||
| /** | ||
| * Some hover marks. | ||
| * @namespace Hover | ||
| * @name Hover | ||
| * @param {object} chart The chart object to apply the hover to | ||
| * @returns {object} The hover instance. | ||
| * @example | ||
| * var chart = mapd3.Chart(document.querySelector('.chart')) | ||
| * mapd3.Hover(chart) | ||
| */ | ||
| mapd3.Hover(chart) | ||
| * Forces a render, for example after using setConfig. | ||
| * Automatically called by setData, Uses cached data. | ||
| * @name render | ||
| * @returns {object} The chart instance. | ||
| * @memberof Chart | ||
| * @instance | ||
| * @example | ||
| * mapd3.Chart(document.querySelector('.chart')) | ||
| * .setConfig({width: 100}) | ||
| * .render() | ||
| */ | ||
| chart.render() |
| { | ||
| "name": "mapd3", | ||
| "version": "0.7.0", | ||
| "version": "0.8.0", | ||
| "description": "A fast chart library for the fastest DB", | ||
@@ -14,3 +14,4 @@ "main": "dist/mapd3.js", | ||
| "styles": "grunt lint && grunt sass && grunt cssmin", | ||
| "docs": "documentation build -f \"html\" examples/examples.js -o doc", | ||
| "docs:build": "documentation build -f \"html\" examples/examples.js -o doc", | ||
| "docs:serve": "documentation serve --watch examples/examples.js -o doc", | ||
| "prod": "webpack --mode=prod --watch", | ||
@@ -17,0 +18,0 @@ "dev": "webpack --mode=dev --watch", |
@@ -1,1 +0,31 @@ | ||
| # MapD3 | ||
| # MapD3 | ||
| MapD3 is a D3v4 charts library developed for [MapD Immerse](https://www.mapd.com/platform/immerse/). It is in active development, currently at 0.7.0. We will accept PRs and bug reports once we reach 1.0.0. | ||
| The main component is `mapd3.chart`, which is a wrapper for a suite of sub-components, like axis, tooltip, marks, labels, etc. The chart type is nothing more than a configuration option (currently line, area, stacked area, bar, stacked bar). | ||
| ## Documentation | ||
| The [documentation](https://mapd.github.io/mapd3/doc/) is generated with [documentationjs](http://documentation.js.org/). | ||
| The chart API is very simple: instantiate a chart, set configuration, set data, which automatically triggers a render, otherwise explicitely call render. | ||
| ```javascript | ||
| mapd3.Chart(document.querySelector('.chart')) | ||
| .setConfig({ | ||
| width: 800, | ||
| height: 400, | ||
| keyType: "time", | ||
| chartType: "line" | ||
| }) | ||
| .setData(data) | ||
| ``` | ||
| A complete example, including the use of a data generator, is available in the [/dev](dev/line_chart.html) folder. | ||
| ## Development | ||
| Look in [/package.json](package.json) for the build scripts. It is available as an [npm](https://www.npmjs.com/package/mapd3) package. | ||
| ## TO DO | ||
| * Finish the Immerse integration | ||
| * Unit test suite | ||
| * Polish bar charts, add grouped bar | ||
| * Release 1.0.0 |
@@ -29,3 +29,5 @@ import * as d3 from "./helpers/d3-service" | ||
| hoverZoneSize: 30, | ||
| tickSpacing: 40 | ||
| tickSpacing: 40, | ||
| dateFormat: "%b %d, %Y", | ||
| numberFormat: ".2f" | ||
| } | ||
@@ -36,3 +38,3 @@ | ||
| yScale: null, | ||
| yScale2: null, | ||
| y2Scale: null, | ||
| hasSecondAxis: null | ||
@@ -48,3 +50,3 @@ } | ||
| yAxis: null, | ||
| yAxis2: null, | ||
| y2Axis: null, | ||
| horizontalGridLines: null, | ||
@@ -75,7 +77,3 @@ verticalGridLines: null | ||
| function buildAxis () { | ||
| cache.xAxis = d3.axisBottom(scales.xScale) | ||
| .tickSize(config.tickSizes, 0) | ||
| .tickPadding(config.tickPadding) | ||
| function formatXAxis () { | ||
| if (config.keyType === "time") { | ||
@@ -94,8 +92,32 @@ if (config.xAxisFormat && config.xAxisFormat !== "auto") { | ||
| } | ||
| } | ||
| function formatYAxis (axis) { | ||
| if (config.yAxisFormat === "auto") { | ||
| let yFormat = config.numberFormat | ||
| const yExtent = scales.yScale.domain() | ||
| if ((yExtent[1] - yExtent[0]) > 10000) { | ||
| yFormat = ".0s" | ||
| } else if ((yExtent[1] - yExtent[0]) > 1000) { | ||
| yFormat = ".2s" | ||
| } | ||
| axis.tickFormat(d3.format(yFormat)) | ||
| } else if (typeof config.yAxisFormat === "string") { | ||
| axis.tickFormat(d3.format(config.yAxisFormat)) | ||
| } | ||
| } | ||
| function buildAxis () { | ||
| cache.xAxis = d3.axisBottom(scales.xScale) | ||
| .tickSize(config.tickSizes, 0) | ||
| .tickPadding(config.tickPadding) | ||
| formatXAxis() | ||
| cache.yAxis = d3.axisLeft(scales.yScale) | ||
| .tickSize([config.tickSizes]) | ||
| .tickPadding(config.tickPadding) | ||
| .tickFormat(d3.format(config.yAxisFormat)) | ||
| formatYAxis(cache.yAxis) | ||
| if (Number.isInteger(config.yTicks)) { | ||
@@ -108,9 +130,10 @@ cache.yAxis.ticks(config.yTicks) | ||
| if (scales.hasSecondAxis) { | ||
| cache.yAxis2 = d3.axisRight(scales.yScale2) | ||
| cache.y2Axis = d3.axisRight(scales.y2Scale) | ||
| .tickSize([config.tickSizes]) | ||
| .tickPadding(config.tickPadding) | ||
| .tickFormat(d3.format(config.y2AxisFormat)) | ||
| formatYAxis(cache.y2Axis) | ||
| if (!isNaN(config.y2Ticks)) { | ||
| cache.yAxis2.ticks(config.y2Ticks) | ||
| cache.y2Axis.ticks(config.y2Ticks) | ||
| } | ||
@@ -140,3 +163,3 @@ } | ||
| .ease(config.ease) | ||
| .call(cache.yAxis2) | ||
| .call(cache.y2Axis) | ||
| } | ||
@@ -143,0 +166,0 @@ |
@@ -22,3 +22,3 @@ import {keys} from "./helpers/constants" | ||
| yScale: null, | ||
| yScale2: null | ||
| y2Scale: null | ||
| } | ||
@@ -25,0 +25,0 @@ |
| import * as d3 from "./helpers/d3-service" | ||
| import {override} from "./helpers/common" | ||
| import {override, stringToType} from "./helpers/common" | ||
| import {blurOnEnter} from "./interactors" | ||
@@ -18,3 +18,4 @@ | ||
| keyType: "time", | ||
| rangeFormat: "%b %d, %Y" | ||
| dateFormat: "%b %d, %Y", | ||
| numberFormat: ".2f" | ||
| } | ||
@@ -55,4 +56,5 @@ | ||
| .on("blur", function change () { | ||
| cache.rangeMax = cache.inputMax.text() | ||
| dispatcher.call("rangeChange", this, {value: cache.rangeMax, type: "max"}) | ||
| const domain = scales.xScale.domain() | ||
| cache.rangeMax = stringToType(cache.inputMax.text(), config.keyType) | ||
| dispatcher.call("rangeChange", this, {extent: [domain[0], cache.rangeMax]}) | ||
| }) | ||
@@ -71,4 +73,5 @@ .call(blurOnEnter) | ||
| .on("blur", function change () { | ||
| cache.rangeMin = cache.inputMin.text() | ||
| dispatcher.call("rangeChange", this, {value: cache.rangeMin, type: "min"}) | ||
| const domain = scales.xScale.domain() | ||
| cache.rangeMin = stringToType(cache.inputMin.text(), config.keyType) | ||
| dispatcher.call("rangeChange", this, {extent: [cache.rangeMin, domain[1]]}) | ||
| }) | ||
@@ -83,7 +86,7 @@ .call(blurOnEnter) | ||
| if (config.keyType === "time") { | ||
| const format = d3.utcFormat(config.rangeFormat) | ||
| const format = d3.utcFormat(config.dateFormat) | ||
| rangeMin = format(new Date(rangeMin)) | ||
| rangeMax = format(new Date(rangeMax)) | ||
| } else { | ||
| const format = d3.format(config.rangeFormat) | ||
| const format = d3.format(config.numberFormat) | ||
| rangeMin = format(rangeMin) | ||
@@ -90,0 +93,0 @@ rangeMax = format(rangeMax) |
@@ -67,3 +67,2 @@ import * as d3 from "./helpers/d3-service" | ||
| // tooltip | ||
| valueFormat: ".2f", | ||
| mouseChaseDuration: 0, | ||
@@ -73,5 +72,8 @@ tooltipEase: d3.easeQuadInOut, | ||
| tooltipWidth: 160, | ||
| dateFormat: "%b %d, %Y", | ||
| seriesOrder: [], | ||
| // format | ||
| dateFormat: "%b %d, %Y", | ||
| numberFormat: ".2f", | ||
| // legend | ||
@@ -91,5 +93,2 @@ legendXPosition: "auto", | ||
| domainEditorIsEnabled: true, | ||
| xDomainEditorFormat: "%b %d, %Y", | ||
| yDomainEditorFormat: ".2f", | ||
| y2DomainEditorFormat: ".2f", | ||
@@ -99,3 +98,2 @@ // brush range | ||
| brushRangeMax: null, | ||
| rangeFormat: "%b %d, %Y", | ||
| brushRangeIsEnabled: true, | ||
@@ -115,3 +113,3 @@ | ||
| yScale: null, | ||
| yScale2: null, | ||
| y2Scale: null, | ||
| hasSecondAxis: null, | ||
@@ -307,5 +305,2 @@ colorScale: null | ||
| .setScales(scales) | ||
| .setXDomain(config.xDomain) | ||
| .setYDomain(config.yDomain) | ||
| .setY2Domain(config.y2Domain) | ||
| .drawDomainEditor() | ||
@@ -312,0 +307,0 @@ .setVisibility(config.domainEditorIsEnabled) |
@@ -42,3 +42,3 @@ import * as d3 from "./helpers/d3-service" | ||
| return { | ||
| value, | ||
| value: value.toFixed(2), | ||
| key: config.keyType === "time" ? d.toISOString() : d | ||
@@ -45,0 +45,0 @@ } |
| import * as d3 from "./helpers/d3-service" | ||
| import {override} from "./helpers/common" | ||
| import {override, stringToType} from "./helpers/common" | ||
| import {blurOnEnter} from "./interactors" | ||
@@ -18,5 +18,10 @@ | ||
| keyType: null, | ||
| xDomainEditorFormat: "%b %d, %Y", | ||
| yDomainEditorFormat: ".2f", | ||
| y2DomainEditorFormat: ".2f" | ||
| dateFormat: "%b %d, %Y", | ||
| numberFormat: ".2f", | ||
| xDomain: "auto", | ||
| yDomain: "auto", | ||
| y2Domain: "auto", | ||
| xLock: false, | ||
| yLock: false, | ||
| y2Lock: false | ||
| } | ||
@@ -47,3 +52,3 @@ | ||
| yScale: null, | ||
| yScale2: null, | ||
| y2Scale: null, | ||
| hasSecondAxis: null | ||
@@ -58,17 +63,15 @@ } | ||
| cache.chartHeight = config.height - config.margin.top - config.margin.bottom | ||
| const xDomain = cache.xDomain === "auto" ? scales.xScale.domain() : cache.xDomain | ||
| const yDomain = cache.yDomain === "auto" ? scales.yScale.domain() : cache.yDomain | ||
| const y2Domain = (cache.y2Domain === "auto" && scales.y2Scale) ? scales.y2Scale.domain() : cache.y2Domain | ||
| const xDomain = config.xDomain === "auto" ? scales.xScale.domain() : config.xDomain | ||
| const yDomain = config.yDomain === "auto" ? scales.yScale.domain() : config.yDomain | ||
| const y2Domain = (config.y2Domain === "auto" && scales.y2Scale) ? scales.y2Scale.domain() : config.y2Domain | ||
| let xFormatter = (d) => d | ||
| if (config.xDomainEditorFormat) { | ||
| if (config.keyType === "time") { | ||
| xFormatter = d3.timeFormat(config.xDomainEditorFormat) | ||
| } | ||
| if (config.keyType === "time") { | ||
| xFormatter = d3.utcFormat(config.dateFormat) | ||
| } else if (config.keyType === "number") { | ||
| xFormatter = d3.format(config.xDomainEditorFormat) | ||
| xFormatter = d3.format(config.numberFormat) | ||
| } | ||
| const yFormatter = d3.format(config.yDomainEditorFormat) | ||
| const y2Formatter = d3.format(config.y2DomainEditorFormat) | ||
| const yFormatter = d3.format(config.numberFormat) | ||
| const y2Formatter = d3.format(config.numberFormat) | ||
@@ -113,3 +116,4 @@ if (!cache.root) { | ||
| .on("blur", function change () { | ||
| dispatcher.call("domainChange", this, {value: this.innerText, axis: "y", type: "max"}) | ||
| const domain = scales.yScale.domain() | ||
| dispatcher.call("domainChange", this, {axis: "y", extent: [domain[0], Number(this.innerText)]}) | ||
| }) | ||
@@ -123,3 +127,4 @@ .call(blurOnEnter) | ||
| .on("blur", function change () { | ||
| dispatcher.call("domainChange", this, {value: this.innerText, axis: "y", type: "min"}) | ||
| const domain = scales.yScale.domain() | ||
| dispatcher.call("domainChange", this, {axis: "y", extent: [Number(this.innerText), domain[1]]}) | ||
| }) | ||
@@ -143,3 +148,4 @@ .call(blurOnEnter) | ||
| .on("blur", function change () { | ||
| dispatcher.call("domainChange", this, {value: this.innerText, axis: "y2", type: "max"}) | ||
| const domain = scales.y2Scale.domain() | ||
| dispatcher.call("domainChange", this, {axis: "y2", extent: [domain[0], Number(this.innerText)]}) | ||
| }) | ||
@@ -153,3 +159,4 @@ .call(blurOnEnter) | ||
| .on("blur", function change () { | ||
| dispatcher.call("domainChange", this, {value: this.innerText, axis: "y2", type: "min"}) | ||
| const domain = scales.y2Scale.domain() | ||
| dispatcher.call("domainChange", this, {axis: "y2", extent: [Number(this.innerText), domain[1]]}) | ||
| }) | ||
@@ -173,3 +180,5 @@ .call(blurOnEnter) | ||
| .on("blur", function change () { | ||
| dispatcher.call("domainChange", this, {value: this.innerText, axis: "x", type: "min"}) | ||
| const domain = scales.xScale.domain() | ||
| const min = stringToType(this.innerText, config.keyType) | ||
| dispatcher.call("domainChange", this, {axis: "x", extent: [min, domain[1]]}) | ||
| }) | ||
@@ -183,3 +192,5 @@ .call(blurOnEnter) | ||
| .on("blur", function change () { | ||
| dispatcher.call("domainChange", this, {value: this.innerText, axis: "x", type: "max"}) | ||
| const domain = scales.xScale.domain() | ||
| const max = stringToType(this.innerText, config.keyType) | ||
| dispatcher.call("domainChange", this, {axis: "x", extent: [domain[0], max]}) | ||
| }) | ||
@@ -237,2 +248,3 @@ .call(blurOnEnter) | ||
| cache.yLockIcon | ||
| .classed("locked", config.yLock) | ||
| .style("width", `${LOCK_SIZE}px`) | ||
@@ -256,2 +268,3 @@ .style("height", `${LOCK_SIZE}px`) | ||
| cache.y2LockIcon | ||
| .classed("locked", config.y2Lock) | ||
| .style("width", `${LOCK_SIZE}px`) | ||
@@ -274,2 +287,3 @@ .style("height", `${LOCK_SIZE}px`) | ||
| cache.xLockIcon | ||
| .classed("locked", config.xLock) | ||
| .style("width", `${LOCK_SIZE}px`) | ||
@@ -318,32 +332,2 @@ .style("height", `${LOCK_SIZE}px`) | ||
| function setXDomain (_xDomain) { | ||
| cache.xDomain = _xDomain | ||
| return this | ||
| } | ||
| function setYDomain (_yDomain) { | ||
| cache.yDomain = _yDomain | ||
| return this | ||
| } | ||
| function setY2Domain (_y2Domain) { | ||
| cache.y2Domain = _y2Domain | ||
| return this | ||
| } | ||
| function setXLock (_xLock) { | ||
| cache.xLock = _xLock | ||
| return this | ||
| } | ||
| function setYLock (_yLock) { | ||
| cache.yLock = _yLock | ||
| return this | ||
| } | ||
| function setY2Lock (_y2Lock) { | ||
| cache.y2Lock = _y2Lock | ||
| return this | ||
| } | ||
| function setVisibility (_shouldBeVisible) { | ||
@@ -375,8 +359,2 @@ cache.isEnabled = _shouldBeVisible | ||
| setConfig, | ||
| setXDomain, | ||
| setYDomain, | ||
| setY2Domain, | ||
| setXLock, | ||
| setYLock, | ||
| setY2Lock, | ||
| drawDomainEditor, | ||
@@ -383,0 +361,0 @@ setVisibility, |
@@ -72,1 +72,11 @@ import {keys} from "./constants" | ||
| } | ||
| export function stringToType (str, type) { | ||
| let converted = str | ||
| if (type === "time") { | ||
| converted = new Date(str) | ||
| } else if (type === "number") { | ||
| converted = Number(str) | ||
| } | ||
| return converted | ||
| } |
@@ -23,3 +23,3 @@ import * as d3 from "./helpers/d3-service" | ||
| yScale: null, | ||
| yScale2: null, | ||
| y2Scale: null, | ||
| hasSecondAxis: null, | ||
@@ -110,3 +110,3 @@ colorScale: null | ||
| } else { | ||
| return scales.yScale2(d[keys.VALUE]) | ||
| return scales.y2Scale(d[keys.VALUE]) | ||
| } | ||
@@ -113,0 +113,0 @@ }) |
@@ -24,3 +24,3 @@ import * as d3 from "./helpers/d3-service" | ||
| yScale: null, | ||
| yScale2: null | ||
| y2Scale: null | ||
| } | ||
@@ -60,3 +60,3 @@ | ||
| .x((d) => scales.xScale(d[keys.DATA])) | ||
| .y((d) => scales.yScale2(d[keys.VALUE])) | ||
| .y((d) => scales.y2Scale(d[keys.VALUE])) | ||
| .curve(d3.curveCatmullRom) | ||
@@ -93,3 +93,3 @@ | ||
| .x((d) => scales.xScale(d[keys.DATA])) | ||
| .y0((d) => scales.yScale2(d[keys.VALUE])) | ||
| .y0((d) => scales.y2Scale(d[keys.VALUE])) | ||
| .y1(() => cache.chartHeight) | ||
@@ -96,0 +96,0 @@ .curve(d3.curveCatmullRom) |
@@ -148,3 +148,3 @@ import * as d3 from "./helpers/d3-service" | ||
| let yScale2 = null | ||
| let y2Scale = null | ||
| if (hasSecondAxis) { | ||
@@ -159,3 +159,3 @@ let y2Domain = null | ||
| yScale2 = yScale.copy() | ||
| y2Scale = yScale.copy() | ||
| .domain(y2Domain) | ||
@@ -168,3 +168,3 @@ } | ||
| yScale, | ||
| yScale2, | ||
| y2Scale, | ||
| colorScale | ||
@@ -171,0 +171,0 @@ } |
@@ -18,4 +18,2 @@ import * as d3 from "./helpers/d3-service" | ||
| valueFormat: ".2f", | ||
| // Animations | ||
@@ -29,2 +27,3 @@ mouseChaseDuration: 0, | ||
| dateFormat: "%b %d, %Y", | ||
| numberFormat: ".2f", | ||
| seriesOrder: [], | ||
@@ -109,3 +108,3 @@ | ||
| const content = cache.content | ||
| const formatter = d3.format(config.valueFormat) | ||
| const formatter = d3.format(config.numberFormat) | ||
@@ -112,0 +111,0 @@ const tooltipItems = cache.tooltipBody.selectAll(".tooltip-item") |
@@ -13,20 +13,5 @@ module.exports = function (grunt) { | ||
| } | ||
| ], | ||
| devFiles = [ | ||
| { | ||
| expand: true, | ||
| cwd: 'src/styles/', | ||
| src: ['mapd3.scss'], | ||
| dest: './demos/css', | ||
| ext: '.css' | ||
| } | ||
| ]; | ||
| grunt.config.set('sass', { | ||
| dev: { | ||
| options: { | ||
| style: 'expanded' | ||
| }, | ||
| files: devFiles | ||
| }, | ||
| dist: { | ||
@@ -33,0 +18,0 @@ options: { |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.25%
2894855
- Lines of code
- increased by0.1%
6790
- Number of lines in readme file
- increased by3000%
31
Worsened metrics
- Number of package files
- decreased by-1.47%
67
No dependency changes