mapd3 - npm Package Compare versions

Comparing version 0.15.2 to 0.15.3

examples/examples.js

@@ -143,5 +143,8 @@ /**
   * @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 {object} [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 {string} [config.extractType=null] The type of date to convert to from a number corresponding to a date part: isodow, month, quarter, hour, minute
+  * @param {function} [config.ease=d3.easeLinear] Axis transition easing
+  * @param {boolean} [config.useScrolling=false] If using horizontal scrolling when the bar width gets under a threshold
 
@@ -158,2 +161,6 @@ * @param {boolean} [config.isAnimated=false] If using animated opening
 
+  * <data>
+  * @param {string} [config.sortBy = alphaAscending] Sorting of columns in stack bar: totalAscending, totalDescending, alphaAscending, alphaDescending
+  * @param {boolean} [config.fillData=false] If replacing nulls with zeroes
+
   * <axis>
@@ -165,7 +172,8 @@ * @param {number} [config.tickPadding=5] Padding between tick and tick label
   * @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|function} [config.xAxisFormat="auto"] Format string for the X axis, "auto" or a formatting function
+  * @param {string} [config.yAxisFormat=".2f"] Format string for the Y axis, "auto" or a formatting function
+  * @param {string} [config.y2AxisFormat=".2f"] Format string for the Y2 axis, "auto" or a formatting function
   * @param {string} [config.grid="horizontal"] Background grid: horizontal, vertical, full
   * @param {number} [config.axisTransitionDuration=0] Animated transition duration
+  * @param {boolean} [config.labelsAreRotated=false] If x axis ticks should be rotated
 
@@ -176,10 +184,18 @@ * <hover>
   * <tooltip>
-  * @param {string} [config.valueFormat=".2f"] Format string for values in tooltip/legend
+  * @param {string} [config.tooltipFormat=".2f"] Format string for the tooltip values, "auto" or a formatting function
+  * @param {string} [config.tooltipTitleFormat=null] Format string for the tooltip title, "auto" or a formatting function
+  * @param {string} [config.tooltipTitle=""] Tooltip title
   * @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
+  * @param {function} [config.tooltipEase=d3.easeQuadInOut] Easing function for the tooltip following
+  * @param {boolean} [config.tooltipIsEnabled="true"] If tooltip is enabled
 
+  <format>
+  * @param {string} [config.dateFormat="%b %d, %Y"] Default format for brush range and tooltip dates
+  * @param {string} [config.inputDateFormat="%m-%d-%Y"] Default format for domain input date
+  * @param {number} [config.numberFormat=".2f"] Default format for brush range, domain input and axis numbers
+
   * <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 {string} [config.legendTitle=""] Legend title
   * @param {boolean} [config.legendIsEnabled=true] Enable legend
@@ -194,10 +210,12 @@
   * <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
+  * @param {boolean} [config.xLock=false] If x axis domain is locked
+  * @param {boolean} [config.yLock=false] If y axis domain is locked
+  * @param {boolean} [config.y2Lock=false] If y2 axis domain is locked
+  * @param {boolean} [config.xDomainEditorIsEnabled=true] Enable x domain editing
+  * @param {boolean} [config.yDomainEditorIsEnabled=true] Enable y domain editing
+  * @param {boolean} [config.y2DomainEditorIsEnabled=true] Enable y2 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 {object<Date>|number} [config.brushRangeMin=null] Brush min range to display and to set brush
+  * @param {object<Date>|number} [config.brushRangeMax=null] Brush max range to display and to set brush
   * @param {boolean} [config.brushRangeIsEnabled=true] Enable brush range editor
@@ -209,9 +227,13 @@
   * <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
+  * @param {string} [config.xLabel=""] X axis label
+  * @param {string} [config.yLabel=""] Y axis label
+  * @param {string} [config.y2Label=""] Y2 axis label
 
   * <line>
-  * @param {string} [config.dotsToShow="none"] Which dots to show on line chart, all, isolated, nonw
+  * @param {string} [config.dotsToShow="none"] Which dots to show on line chart, all, isolated, none
 
+  * <bar>
+  * @param {number} [config.barSpacingPercent="none"] Bar charts gutter width as a % of the bar width
+  * @param {Array.<string>} [config.selectedKeys=[]] Dimming all bars except for those listed in this array. Empty = none dimmed
+
   * @returns {object} The chart instance.
@@ -238,2 +260,5 @@ * @memberof Chart
   chartType, // line, area, stackedArea, bar, stackedBar
+  extractType: null, // isodow, month, quarter, hour, minute
+  ease: d3.easeLinear,
+  useScrolling: false,
 
@@ -251,2 +276,6 @@ // intro animation
 
+  // data
+  sortBy: "alphaAscending", // totalAscending, totalDescending, alphaAscending, alphaDescending
+  fillData: false,
+
   // axis
@@ -263,2 +292,3 @@ tickPadding: 5,
   axisTransitionDuration: 0,
+  labelsAreRotated: false,
 
@@ -269,7 +299,15 @@ // hover
   // tooltip
-  valueFormat: ".2f",
+  tooltipFormat: ".2f",
+  tooltipTitleFormat: null,
   mouseChaseDuration: 0,
+  tooltipEase: d3.easeQuadInOut,
   tooltipHeight: 48,
   tooltipWidth: 160,
+  tooltipIsEnabled: true,
+  tooltipTitle: null,
+
+  // format
   dateFormat: "%b %d, %Y",
+  inputDateFormat: "%m-%d-%Y",
+  numberFormat: ".2f",
 
@@ -279,3 +317,3 @@ // legend
   legendYPosition: "auto",
-  legendTitle: "Dataset",
+  legendTitle: "",
   legendIsEnabled: true,
@@ -290,10 +328,12 @@
   // domain
-  domainEditorIsEnabled: true,
-  xDomainEditorFormat: "%b %d, %Y",
-  yDomainEditorFormat: ".2f",
-  y2DomainEditorFormat: ".2f",
+  xLock: false,
+  yLock: false,
+  y2Lock: false,
+  xDomainEditorIsEnabled: true,
+  yDomainEditorIsEnabled: true,
+  y2DomainEditorIsEnabled: true,
 
   // brush range
-  brushRangeMin: "Jan 01, 2001",
-  brushRangeMax: "Jan 02, 2002",
+  brushRangeMin: null,
+  brushRangeMax: null,
   brushRangeIsEnabled: true,
@@ -305,6 +345,10 @@
   // label
-  xLabel: "X Axis Label",
-  yLabel: "Y Axis Label",
-  y2Label: "Y2 Axis Label",
+  xLabel: "",
+  yLabel: "",
+  y2Label: "",
 
+  // bar
+  barSpacingPercent: 10,
+  selectedKeys: [],
+
   // line
@@ -339,1 +383,115 @@ dotsToShow: "none" // all, isolated, none
 chart.render()
+
+/**
+  * Get access to the event manager
+  * @name getEvents
+  * @returns {object} The EventManager instance
+  * @memberof Chart
+  * @instance
+  * @example
+  * mapd3.Chart(document.querySelector('.chart'))
+  * .getEvents()
+  */
+
+/**
+  * Get access to all exposed events
+  * @namespace EventManager
+  * @name EventManager
+  * @param {function} onBrush: brushStart, brushMove, brushEnd
+  * @param {function} onBinning: change
+  * @param {function} onDomainEditor: domainChange, domainLockToggle
+  * @param {function} onBrushRangeEditor: rangeChange
+  * @param {function} onLabel: axisLabelChange
+  * @param {function} onHover: hover
+  * @param {function} onPanel: mouseOverPanel, mouseOutPanel, mouseMovePanel
+  */
+
+/**
+  * Brush events
+  * @name onBrush
+  * @param {string} [name] Event name: brushStart, brushMove, brushEnd
+  * @param {function} [callback] Event callback
+
+  * @returns {object} The event instance.
+  * @memberof EventManager
+  * @instance
+  * @example
+  * mapd3.Chart(document.querySelector('.chart'))
+  * .getEvents()
+  * .onBrush("brushStart", (d) => console.log(d))
+  */
+/**
+  * Binning selector events
+  * @name onBinning
+  * @param {string} [name] Event name: change
+  * @param {function} [callback] Event callback
+
+  * @returns {object} The event instance.
+  * @memberof EventManager
+  * @instance
+  */
+/**
+  * Domain editor events
+  * @name onDomainEditor
+  * @param {string} [name] Event name: domainChange, domainLockToggle
+  * @param {function} [callback] Event callback
+
+  * @returns {object} The event instance.
+  * @memberof EventManager
+  * @instance
+  */
+/**
+  * Brush range editor events
+  * @name onBrushRangeEditor
+  * @param {string} [name] Event name: rangeChange
+  * @param {function} [callback] Event callback
+
+  * @returns {object} The event instance.
+  * @memberof EventManager
+  * @instance
+  */
+/**
+  * Label editor events
+  * @name onLabel
+  * @param {string} [name] Event name: axisLabelChange
+  * @param {function} [callback] Event callback
+
+  * @returns {object} The event instance.
+  * @memberof EventManager
+  * @instance
+  */
+/**
+  * Hover events
+  * @name onHover
+  * @param {string} [name] Event name: hover
+  * @param {function} [callback] Event callback
+
+  * @returns {object} The event instance.
+  * @memberof EventManager
+  * @instance
+  */
+/**
+  * Panel mouse events
+  * @name onPanel
+  * @param {string} [name] Event name: mouseOverPanel, mouseOutPanel, mouseMovePanel
+  * @param {function} [callback] Event callback
+
+  * @returns {object} The event instance.
+  * @memberof EventManager
+  * @instance
+  */
+
+chart.getEvents()
+  .onBrush("brushStart", (d) => console.log(d))
+  .onBrush("brushMove", (d) => console.log(d))
+  .onBrush("brushEnd", (d) => console.log(d))
+  .onBrush("brushClear", (d) => console.log(d))
+  .onBinning("change", (d) => console.log(d))
+  .onDomainEditor("domainChange", (d) => console.log(d))
+  .onDomainEditor("domainLockToggle", (d) => console.log(d))
+  .onBrushRangeEditor("rangeChange", (d) => console.log(d))
+  .onLabel("axisLabelChange", (d) => console.log(d))
+  .onHover("hover", (d) => console.log(d))
+  .onPanel("mouseOverPanel", (d) => console.log(d))
+  .onPanel("mouseOutPanel", (d) => console.log(d))
+  .onPanel("mouseMovePanel", (d) => console.log(d))

package.json

 {
   "name": "mapd3",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "A fast chart library for the fastest DB",
@@ -44,2 +44,6 @@ "main": "dist/mapd3.js",
   "homepage": "https://github.com/mapd/mapd3",
+  "browserslist": [
+    "last 2 versions",
+    "not ie 10"
+  ],
   "dependencies": {
@@ -51,2 +55,3 @@ "base-64": "^0.1.0",
   "devDependencies": {
+    "autoprefixer": "^8.5.1",
     "babel-cli": "6.24.1",
@@ -71,2 +76,3 @@ "babel-core": "6.26.0",
     "null-loader": "^0.1.1",
+    "postcss-loader": "^2.1.5",
     "requirejs-plugins": "^1.0.2",
@@ -73,0 +79,0 @@ "sanitize-html": "^1.13.0",

src/charts/axis.js

@@ -30,3 +30,2 @@ import * as d3 from "./helpers/d3-service"
     tickSpacing: 40,
-    dateFormat: "%b %d, %Y",
     numberFormat: ".2f",
@@ -62,5 +61,22 @@ extractType: null,
     horizontalGridLines: null,
-    verticalGridLines: null
+    verticalGridLines: null,
+    xLabelsShouldRotate: false
   }
 
+  const APPROX_FONT_WIDTH = 5
+  const LABEL_SPACING = 2
+
+  const X_TICK_LABEL_SETTINGS = {
+    DEFAULT_XPOS: 0,
+    DEFAULT_YPOS: 11,
+    DEFAULT_DY: ".71em",
+    DEFAULT_TRANSFORM: null,
+    DEFAULT_ANCHOR: "middle",
+    ROTATED_XPOS: 9,
+    ROTATED_YPOS: 0,
+    ROTATED_DY: ".35em",
+    ROTATED_TRANSFORM: "rotate(90)",
+    ROTATED_ANCHOR: "start"
+  }
+
   function build () {
@@ -80,2 +96,4 @@ if (!cache.root) {
 
+    cache.xLabelsShouldRotate = shouldXLabelsRotate()
+
     const DOMAIN_LINE_WIDTH = 1
@@ -221,9 +239,23 @@ cache.yAxisRoot
 
+  function shouldXLabelsRotate () {
+    const width = config.markPanelWidth
+    const labels = scales.xScale.domain()
+    const totalLabelsWidth = labels.reduce(
+      (total, d) => total + d.length * APPROX_FONT_WIDTH + LABEL_SPACING * APPROX_FONT_WIDTH,
+      0
+    )
+
+    if (totalLabelsWidth >= width) {
+      return true
+    }
+    return false
+  }
+
   function rotateXLabels () {
     cache.xAxisRoot.select(".axis.x").selectAll("text")
-      .attr("y", 0)
-      .attr("x", 9)
-      .attr("dy", ".35em")
-      .attr("transform", "rotate(90)")
-      .style("text-anchor", "start")
+      .attr("y", X_TICK_LABEL_SETTINGS.ROTATED_YPOS)
+      .attr("x", X_TICK_LABEL_SETTINGS.ROTATED_XPOS)
+      .attr("dy", X_TICK_LABEL_SETTINGS.ROTATED_DY)
+      .attr("transform", X_TICK_LABEL_SETTINGS.ROTATED_TRANSFORM)
+      .style("text-anchor", X_TICK_LABEL_SETTINGS.ROTATED_ANCHOR)
 
@@ -233,7 +265,15 @@ return this
 
+  function unRotateXLabels () {
+    cache.xAxisRoot.select(".axis.x").selectAll("text")
+      .attr("x", X_TICK_LABEL_SETTINGS.DEFAULT_XPOS)
+      .attr("y", X_TICK_LABEL_SETTINGS.DEFAULT_YPOS)
+      .attr("dy", X_TICK_LABEL_SETTINGS.DEFAULT_DY)
+      .attr("transform", X_TICK_LABEL_SETTINGS.DEFAULT_TRANSFORM)
+      .style("text-anchor", X_TICK_LABEL_SETTINGS.DEFAULT_ANCHOR)
+  }
+
   function getNumberOfLabelsToSkip () {
-    const APPROX_FONT_WIDTH = 5
     const labels = scales.xScale.domain()
     let longestLabelApproxWidth = null
-    if (config.labelsAreRotated) {
+    if (config.labelsAreRotated === true || (config.labelsAreRotated === "auto" && shouldXLabelsRotate())) {
       longestLabelApproxWidth = APPROX_FONT_WIDTH
@@ -252,4 +292,6 @@ } else {
 
-    if (config.labelsAreRotated) {
+    if (config.labelsAreRotated === true || (config.labelsAreRotated === "auto" && cache.xLabelsShouldRotate)) {
       rotateXLabels()
+    } else if (config.labelsAreRotated === "auto" && !cache.xLabelsShouldRotate) {
+      unRotateXLabels()
     }
@@ -256,0 +298,0 @@

src/charts/chart.js

@@ -65,3 +65,2 @@ import * as d3 from "./helpers/d3-service"
     y2AxisFormat: ".2f",
-    tooltipFormat: ".2f",
     tickSizes: 8,
@@ -73,3 +72,3 @@ yTicks: "auto",
     axisTransitionDuration: 0,
-    labelsAreRotated: false,
+    labelsAreRotated: "auto",
 
@@ -80,5 +79,2 @@ // data
 
-    xTitle: "",
-    yTitle: "",
-
     // hover
@@ -88,2 +84,4 @@ dotRadius: 4,
     // tooltip
+    tooltipFormat: ".2f",
+    tooltipTitleFormat: null,
     mouseChaseDuration: 0,
@@ -100,3 +98,2 @@ tooltipEase: d3.easeQuadInOut,
     numberFormat: ".2f",
-    tooltipTitleFormat: null,
 
@@ -103,0 +100,0 @@ // legend

src/charts/data-manager.js

@@ -175,2 +175,3 @@ import * as d3 from "./helpers/d3-service"
       .keys(dataBySeries.map(getID))
+      .value((d, key) => d[key] || 0)
       .order(d3.stackOrderNone)
@@ -177,0 +178,0 @@ .offset(d3.stackOffsetNone)

src/charts/label.js

@@ -40,9 +40,5 @@ import * as d3 from "./helpers/d3-service"
         .attr("class", "label-group")
-        .style("position", "absolute")
-        .style("top", 0)
-        .style("white-space", "nowrap")
 
       cache.xAxisLabel = cache.root.append("div")
         .attr("class", "axis-label x")
-        .style("position", "absolute")
         .attr("contentEditable", true)
@@ -57,7 +53,5 @@ .on("blur", function blur () {
         })
-        .style("transform", "translate(-50%)")
 
       cache.yAxisLabel = cache.root.append("div")
         .attr("class", "axis-label y")
-        .style("position", "absolute")
         .attr("contentEditable", true)
@@ -72,8 +66,5 @@ .on("blur", function blur () {
         })
-        .style("left", 0)
-        .style("transform", "translate(-50%) rotate(-90deg)")
 
       cache.y2AxisLabel = cache.root.append("div")
         .attr("class", "axis-label y2")
-        .style("position", "absolute")
         .attr("contentEditable", true)
@@ -88,3 +79,2 @@ .on("blur", function blur () {
         })
-        .style("transform", "translate(-50%) rotate(90deg)")
     }
@@ -91,0 +81,0 @@

webpack.config.js

@@ -37,3 +37,20 @@ const webpack = require("webpack");
             test: /\.(sass|scss)$/,
-            use: ExtractTextPlugin.extract(["css-loader", "sass-loader"])
+            use: ExtractTextPlugin.extract({
+              use: [
+                {
+                  loader: "css-loader"
+                },
+                {
+                  loader: "postcss-loader",
+                  options: {
+                    config: {
+                      path: "postcss.config.js"
+                    }
+                  }
+                },
+                {
+                  loader: "sass-loader"
+                }
+              ]
+            })
           }
@@ -40,0 +57,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

1160681

increased by0.81%

Number of package files

61

increased by1.67%

Lines of code

7124

increased by3.2%

Worsened metrics

Dev dependency count

29

increased by7.41%

No dependency changes