mapd3 - npm Package Compare versions

Comparing version 0.15.1 to 0.15.2

.eslintrc.json

@@ -211,3 +211,3 @@ {
     "space-before-blocks": 2, // makes things look consistent with keyword spacing.
-    "space-before-function-paren": 2, // distinguishes keyword invocation from function invocation.
+    // "space-before-function-paren": 2, // distinguishes keyword invocation from function invocation.
     // "space-before-function-parentheses": 0, // removed.
@@ -214,0 +214,0 @@ // "space-before-keywords": 0, // removed.

examples/examples.js

@@ -32,2 +32,5 @@ /**
   * @param {number} [config.lineCount=4] The number of lines
+  * @param {Array.<number>} [config.stringMinMaxLength=[4, 8]] Length of generated strings
+  * @param {number} [config.randomStepSize=50] Random pixel range to step vertically between each generated points
+  * @param {number} [config.nullRatio=null] Percentage of generated values that are null
 
@@ -52,3 +55,6 @@ * @returns {object} The dataManager instance.
   groupCount: 1,
-  lineCount: 4
+  lineCount: 4,
+  stringMinMaxLength: [5, 10],
+  randomStepSize: 50,
+  nullRatio: 10
 })
@@ -204,2 +210,5 @@
 
+  * <line>
+  * @param {string} [config.dotsToShow="none"] Which dots to show on line chart, all, isolated, nonw
+
   * @returns {object} The chart instance.
@@ -289,3 +298,6 @@ * @memberof Chart
   yLabel: "Y Axis Label",
-  y2Label: "Y2 Axis Label"
+  y2Label: "Y2 Axis Label",
+
+  // line
+  dotsToShow: "none" // all, isolated, none
 })
@@ -292,0 +304,0 @@

package.json

 {
   "name": "mapd3",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "A fast chart library for the fastest DB",
@@ -21,3 +21,3 @@ "main": "dist/mapd3.js",
     "clean": "yarn cache clean && rm -rf node_modules",
-    "test": "mocha-webpack test/**/*.spec.js --require test/setup.js --webpack-config webpack.config-spec.js --watch",
+    "test": "mocha-webpack test/**/*.spec.js --require test/setup.js --webpack-env.dev --webpack-config webpack.config-spec.js --watch",
     "format": "eslint \"src/**/*.js\" --fix"
@@ -51,10 +51,11 @@ },
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.36",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.41",
-    "@babel/preset-env": "^7.0.0-beta.36",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^8.0.0-beta.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-cli": "6.24.1",
+    "babel-core": "6.26.0",
+    "babel-eslint": "7.2.3",
+    "babel-loader": "7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "1.6.0",
     "chai": "^4.1.2",
     "css-loader": "^0.28.7",
+    "documentation": "4.0.0-rc.1",
     "eslint": "^4.18.2",
@@ -76,4 +77,2 @@ "extract-text-webpack-plugin": "^3.0.2",
     "webpack": "^3.10.0",
-    "webpack-dev-server": "^1.16.2",
-    "webpack-livereload-plugin": "^0.9.0",
     "webpack-node-externals": "^1.6.0",
@@ -80,0 +79,0 @@ "yargs": "^10.0.3"

src/bundle.js

@@ -15,2 +15,3 @@ import * as d3 from "./charts/helpers/d3-service"
 import {colors} from "./charts/helpers/colors.js"
+import autoFormatter from "./charts/helpers/auto-format.js"
 require("./styles/mapd3.scss")
@@ -32,3 +33,4 @@
   colors,
-  d3
+  d3,
+  autoFormatter
 }

src/charts/axis.js

@@ -46,3 +46,4 @@ import * as d3 from "./helpers/d3-service"
     y2Scale: null,
-    hasSecondAxis: null
+    hasSecondAxis: null,
+    measureNameLookup: null
   }
@@ -94,3 +95,7 @@
     if (typeof config.xAxisFormat === "function") {
-      cache.xAxis.tickFormat(config.xAxisFormat)
+      const dimensionName = scales.measureNameLookup("x")
+      const hasFormatterForDimension = config.xAxisFormat(null, dimensionName)
+      if (hasFormatterForDimension) {
+        cache.xAxis.tickFormat(d => config.xAxisFormat(d, dimensionName))
+      }
     } else if (config.keyType === "time") {
@@ -120,2 +125,8 @@ if (config.xAxisFormat && config.xAxisFormat !== "auto") {
 
+  function getYAutoFormat () {
+    const yExtent = config.yDomain === "auto" ? scales.yScale.domain() : config.yDomain
+    const yFormat = autoFormat(yExtent, config.numberFormat)
+    return d3.format(yFormat)
+  }
+
   function formatYAxis (axis) {
@@ -126,7 +137,11 @@ if (!scales.yScale) {
     if (typeof config.yAxisFormat === "function") {
-      axis.tickFormat(config.yAxisFormat)
+      const measureName = scales.measureNameLookup("y")
+      const hasFormatterForMeasure = config.yAxisFormat(null, measureName)
+      if (hasFormatterForMeasure) {
+        axis.tickFormat(d => config.yAxisFormat(d, measureName))
+      } else {
+        axis.tickFormat(getYAutoFormat())
+      }
     } else if (config.yAxisFormat === "auto") {
-      const yExtent = config.yDomain === "auto" ? scales.yScale.domain() : config.yDomain
-      const yFormat = autoFormat(yExtent, config.numberFormat)
-      axis.tickFormat(d3.format(yFormat))
+      axis.tickFormat(getYAutoFormat())
     } else if (typeof config.yAxisFormat === "string") {
@@ -139,2 +154,8 @@ axis.tickFormat(d3.format(config.yAxisFormat))
 
+  function getY2AutoFormat () {
+    const y2Extent = config.y2Domain === "auto" ? scales.y2Scale.domain() : config.y2Domain
+    const y2Format = autoFormat(y2Extent, config.numberFormat)
+    return d3.format(y2Format)
+  }
+
   function formatY2Axis (axis) {
@@ -145,7 +166,15 @@ if (!scales.y2Scale) {
     if (typeof config.y2AxisFormat === "function") {
-      axis.tickFormat(config.y2AxisFormat)
+      const measureName = scales.measureNameLookup("y2")
+      if (measureName) {
+        const hasFormatterForMeasure = config.y2AxisFormat(null, measureName)
+        if (hasFormatterForMeasure) {
+          axis.tickFormat(d => config.y2AxisFormat(d, measureName))
+        } else {
+          axis.tickFormat(getY2AutoFormat())
+        }
+      } else {
+        axis.tickFormat(d => config.y2AxisFormat(d))
+      }
     } else if (config.y2AxisFormat === "auto") {
-      const y2Extent = config.y2Domain === "auto" ? scales.y2Scale.domain() : config.y2Domain
-      const y2Format = autoFormat(y2Extent, config.numberFormat)
-      axis.tickFormat(d3.format(y2Format))
+      axis.tickFormat(getY2AutoFormat())
     } else if (typeof config.y2AxisFormat === "string") {
@@ -152,0 +181,0 @@ axis.tickFormat(d3.format(config.y2AxisFormat))

src/charts/chart.js

@@ -76,2 +76,3 @@ import * as d3 from "./helpers/d3-service"
     sortBy: null,
+    fillData: false,
 
@@ -133,3 +134,6 @@ xTitle: "",
     barSpacingPercent: 10,
-    selectedKeys: []
+    selectedKeys: [],
+
+    // line
+    dotsToShow: "none"
   }
@@ -361,3 +365,3 @@
     dataObject.data = cloneData(_data[keys.SERIES])
-    const cleanedData = dataManager.cleanData(_data, config.keyType, config.sortBy)
+    const cleanedData = dataManager.cleanData(_data, config.keyType, config.sortBy, config.fillData)
     Object.assign(dataObject, cleanedData)
@@ -364,0 +368,0 @@

src/charts/clip-path.js

@@ -37,5 +37,6 @@ import {override} from "./helpers/common"
 
+    const HEIGHT_PADDING = 4
     cache.clipPath
       .attr("width", config.markPanelWidth)
-      .attr("height", config.chartHeight)
+      .attr("height", config.chartHeight + HEIGHT_PADDING)
   }
@@ -42,0 +43,0 @@

src/charts/data-manager.js

@@ -15,3 +15,5 @@ import * as d3 from "./helpers/d3-service"
     lineCount: 4,
-    stringMinMaxLength: [4, 8]
+    stringMinMaxLength: [4, 8],
+    randomStepSize: 50,
+    nullRatio: null
   }
@@ -40,9 +42,9 @@ const cache = {
     let value = d3.randomUniform(..._range)()
-    const variabilityDivider = 10
-    const randomWalkStepSize = (_range[1] - _range[0]) / variabilityDivider
+    const randomWalkStepSize = (_range[1] - _range[0]) / config.randomStepSize
     const rnd = d3.randomNormal(0, 1)
-    return _dataKeys.map((d) => {
+    return _dataKeys.map(d => {
+      const isRandomNull = config.nullRatio && (Math.random() * 100 / config.nullRatio) < 1
       value = clamp(value + rnd() * randomWalkStepSize, _range)
       return {
-        value,
+        value: isRandomNull ? null : value,
         key: config.keyType === "time" ? d.toISOString() : d
@@ -70,3 +72,4 @@ }
       group: d < config.groupCount ? d : 0,
-      values: generateSeries(dataKeys, config.range)
+      values: generateSeries(dataKeys, config.range),
+      measureName: `Measure ${d}`
     }))
@@ -86,3 +89,3 @@
 
-  function cleanData (_data, _keyType, _sortBy) {
+  function cleanData (_data, _keyType, _sortBy, _fillData) {
     const dataBySeries = cloneData(_data[keys.SERIES])
@@ -95,3 +98,5 @@ dataBySeries.forEach((serie) => {
         }
-        d[keys.VALUE] = Number(d[keys.VALUE])
+        if (_fillData) {
+          d[keys.VALUE] = Number(d[keys.VALUE])
+        }
       })
@@ -114,6 +119,10 @@ })
       // fill data
-      const filled = allKeys.map(d => ({
-        key: d,
-        value: (typeof keyValues[d] === "undefined") ? null : keyValues[d]
-      }))
+      let filled = serie[keys.VALUES]
+      if (_fillData) {
+        filled = allKeys.map(d => ({
+          key: d,
+          value: (typeof keyValues[d] === "undefined") ? null : keyValues[d]
+        }))
+      }
+
       // sort
@@ -204,2 +213,8 @@ serie[keys.VALUES] = sortData(filled, _keyType)
     const keyFromInvertedX = invertScale(_scales.xScale, _mouseX, _keyType)
+
+    if (_keyType === "string") {
+      // if we are keying on strings, simply find the value via a key match
+      return _dataObject.dataByKey.find(d => d[keys.KEY] === keyFromInvertedX)
+    }
+
     const bisectLeft = d3.bisector(getKey).left
@@ -206,0 +221,0 @@ const dataEntryIndex = bisectLeft(_dataObject.dataByKey, keyFromInvertedX)

src/charts/helpers/constants.js

@@ -11,2 +11,8 @@ export const keys = {
 
+export const dotsToShow = {
+  ALL: "all",
+  NONE: "none",
+  ISOLATED: "isolated"
+}
+
 export const LEFT_AXIS_GROUP_INDEX = "0"
@@ -13,0 +19,0 @@ export const RIGHT_AXIS_GROUP_INDEX = "1"

src/charts/helpers/formatters.js

@@ -63,7 +63,7 @@ import * as d3 from "./d3-service"
     format = ".2f"
-  } else if ((max - min) <= 100) {
+  } else if ((max - min) < 100) {
     format = ".1f"
-  } else if ((max - min) <= 1000) {
+  } else if ((max - min) < 1000) {
     format = ".0f"
-  } else if ((max - min) <= 100000) {
+  } else if ((max - min) < 100000) {
     format = ".2s"
@@ -134,4 +134,7 @@ } else {
 export function formatTooltipNumber (d) {
+  if (d === null) {
+    return "null"
+  }
   // comma separator, max 2 decimals
   return d3.format(",")(Math.round(d * 100) / 100)
 }

src/charts/hover.js

@@ -105,6 +105,6 @@ import * as d3 from "./helpers/d3-service"
         const leftAxisGroup = data.groupKeys[LEFT_AXIS_GROUP_INDEX]
-        if (leftAxisGroup && leftAxisGroup.indexOf(d[keys.ID]) > -1) {
-          return scales.yScale(d[keys.VALUE])
+        if (leftAxisGroup && leftAxisGroup.indexOf(d.group) > -1) {
+          return scales.yScale(d.value)
         } else {
-          return scales.y2Scale ? scales.y2Scale(d[keys.VALUE]) : scales.yScale(d[keys.VALUE])
+          return scales.y2Scale ? scales.y2Scale(d.value) : scales.yScale(d.value)
         }
@@ -115,2 +115,3 @@ })
       .style("fill", getColor)
+      .classed("hidden", d => d[keys.VALUE] === null)
 
@@ -129,4 +130,5 @@ dots.exit().remove()
     const dotsData = dotsStack.map((d) => {
-      const dot = {value: d[0][1]}
-      dot[keys.ID] = d.key
+      const dot = {}
+      dot.value = d[0][1]
+      dot.group = d.key
       return dot
@@ -133,0 +135,0 @@ })

src/charts/line.js

 import * as d3 from "./helpers/d3-service"
 
-import {keys, dashStylesTranslation} from "./helpers/constants"
+import {keys, dashStylesTranslation, LEFT_AXIS_GROUP_INDEX, dotsToShow} from "./helpers/constants"
 import {override} from "./helpers/common"
@@ -13,2 +13,3 @@
     xDomain: "auto",
+    dotsToShow: "none",
 
@@ -48,14 +49,24 @@ chartHeight: null
 
+  function isDefined (d) {
+    return typeof d[keys.VALUE] !== "undefined" && d[keys.VALUE] !== null
+  }
+
+  function isInDomain (d) {
+    return (d[keys.KEY] >= config.xDomain[0] && d[keys.KEY] <= config.xDomain[1])
+  }
+
   function drawLines () {
     const seriesLine = d3.line()
-      .x((d) => scales.xScale(d[keys.KEY]))
-      .y((d) => scales.yScale(d[keys.VALUE]))
+      .x(d => scales.xScale(d[keys.KEY]))
+      .y(d => scales.yScale(d[keys.VALUE]))
+      .defined(isDefined)
 
     const seriesLine2 = d3.line()
-      .x((d) => scales.xScale(d[keys.KEY]))
-      .y((d) => scales.y2Scale(d[keys.VALUE]))
+      .x(d => scales.xScale(d[keys.KEY]))
+      .y(d => scales.y2Scale(d[keys.VALUE]))
+      .defined(isDefined)
 
     if (Array.isArray(config.xDomain)) {
-      seriesLine.defined((d) => d[keys.KEY] >= config.xDomain[0] && d[keys.KEY] <= config.xDomain[1])
-      seriesLine2.defined((d) => d[keys.KEY] >= config.xDomain[0] && d[keys.KEY] <= config.xDomain[1])
+      seriesLine.defined((d) => isDefined(d) || isInDomain(d))
+      seriesLine2.defined((d) => isDefined(d) || isInDomain(d))
     }
@@ -67,3 +78,3 @@
     }
-    const lines = cache.root.selectAll(".mark")
+    const lines = cache.root.selectAll(".mark.line")
       .data(lineData)
@@ -94,2 +105,78 @@
 
+  function filterNulls (_data) {
+    return _data.map(d => ({
+      ...d,
+      values: d.values.filter(dB => dB.value !== null)
+    }))
+  }
+
+  function filterIsolated (_data) {
+    return _data.map(d => ({
+      ...d,
+      values: d.values.filter((dB, iB, pD) => {
+        const prevIndex = Math.max(iB - 1, 0)
+        const nextIndex = Math.min(iB + 1, pD.length - 1)
+        return dB.value !== null &&
+          pD[prevIndex].value === null &&
+          pD[nextIndex].value === null
+      })
+    }))
+  }
+
+  function drawDots () {
+    const dotData = data.dataBySeries
+    let dotDataFiltered = dotData
+    if (Array.isArray(config.chartType)) {
+      dotDataFiltered = dotData.filter((d, i) => config.chartType[i] === "line")
+    }
+
+    if (config.dotsToShow === dotsToShow.ALL) {
+      dotDataFiltered = filterNulls(dotDataFiltered)
+    } else if (config.dotsToShow === dotsToShow.ISOLATED) {
+      dotDataFiltered = filterIsolated(dotDataFiltered)
+    } else if (config.dotsToShow === dotsToShow.NONE) {
+      cache.root.selectAll(".dot-group").remove()
+      return null
+    }
+
+    const dotGroups = cache.root.selectAll(".dot-group")
+      .data(dotDataFiltered)
+
+    const dotGroupsSelection = dotGroups.enter()
+      .append("g")
+      .merge(dotGroups)
+      .attr("class", "dot-group")
+      .attr("clip-path", `url(#mark-clip-${config.chartId})`)
+
+    dotGroups.exit().remove()
+
+    const dots = dotGroupsSelection.selectAll(".mark.dot")
+      .data(d => d.values.map(dB => ({
+        value: dB[keys.VALUE],
+        group: d[keys.ID],
+        key: dB[keys.KEY],
+        id: d[keys.ID]
+      })))
+
+    dots.enter()
+      .append("circle")
+      .merge(dots)
+      .attr("class", "mark dot")
+      .attr("cx", (d) => scales.xScale(d.key))
+      .attr("cy", (d) => {
+        const leftAxisGroup = data.groupKeys[LEFT_AXIS_GROUP_INDEX]
+        if (leftAxisGroup && leftAxisGroup.indexOf(d.group) > -1) {
+          return scales.yScale(d.value)
+        } else {
+          return scales.y2Scale ? scales.y2Scale(d.value) : scales.yScale(d.value)
+        }
+      })
+      .attr("r", 2)
+      .style("fill", getColor)
+
+    dots.exit().remove()
+
+    return this
+  }
+
   function drawAreas () {
@@ -100,2 +187,3 @@ const seriesArea = d3.area()
       .y1(() => config.chartHeight)
+      .defined(isDefined)
 
@@ -107,4 +195,5 @@ const seriesArea2 = d3.area()
       .curve(d3.curveCatmullRom)
+      .defined(isDefined)
 
-    const areas = cache.root.selectAll(".mark")
+    const areas = cache.root.selectAll(".mark.area")
       .data(data.dataBySeries)
@@ -174,2 +263,3 @@
       drawLines()
+      drawDots()
     } else if (config.chartType === "stackedArea") {
@@ -176,0 +266,0 @@ drawStackedAreas()

src/charts/scale.js

@@ -99,2 +99,18 @@ import * as d3 from "./helpers/d3-service"
 
+  function buildMeasureNameLookup () {
+    return d => {
+      if (d === "x") {
+        return data.data[0].dimensionName
+      } else if (d === "y") {
+        const groupKey = data.groupKeys[LEFT_AXIS_GROUP_INDEX][0]
+        return data.dataBySeries[groupKey].measureName
+      } else if (d === "y2") {
+        const groupKey = data.groupKeys[RIGHT_AXIS_GROUP_INDEX][0]
+        return data.dataBySeries[groupKey].measureName
+      } else {
+        return data.dataBySeries[d] && data.dataBySeries[d].measureName
+      }
+    }
+  }
+
   function buildChartTypeScale () {
@@ -135,2 +151,3 @@ const ids = data.dataBySeries.map(getID)
     const chartTypeScale = buildChartTypeScale()
+    const measureNameLookup = buildMeasureNameLookup()
 
@@ -151,3 +168,4 @@ let yDomain = null
       styleScale,
-      chartTypeScale
+      chartTypeScale,
+      measureNameLookup
     }
@@ -177,2 +195,3 @@ }
     const chartTypeScale = buildChartTypeScale()
+    const measureNameLookup = buildMeasureNameLookup()
 
@@ -211,3 +230,4 @@ let yScale = null
       styleScale,
-      chartTypeScale
+      chartTypeScale,
+      measureNameLookup
     }
@@ -214,0 +234,0 @@ }

src/charts/tooltip.js

@@ -37,3 +37,4 @@ import * as d3 from "./helpers/d3-service"
     colorScale: null,
-    styleScale: null
+    styleScale: null,
+    measureNameLookup: null
   }
@@ -148,7 +149,10 @@
 
-  function formatValue (_value, _format, _index) {
-    if (Array.isArray(_format) && _format[_index]) {
-      return applyFormat(_value, _format[_index])
+  function formatTooltipValue (_value, _id) {
+    const measureName = scales.measureNameLookup(_id)
+    const hasFormatterForMeasure = typeof config.tooltipFormat === "function" &&
+      config.tooltipFormat(null, measureName)
+    if (hasFormatterForMeasure) {
+      return config.tooltipFormat(_value, measureName)
     } else {
-      return applyFormat(_value, _format)
+      return formatTooltipNumber(_value)
     }
@@ -166,3 +170,3 @@ }
     const tooltipItem = tooltipItemsUpdate.selectAll(".section")
-      .data((d, i) => {
+      .data((d) => {
         const legendData = [
@@ -181,3 +185,4 @@ {
         if (typeof d[keys.VALUE] !== "undefined") {
-          const formattedValue = formatValue(d[keys.VALUE], config.tooltipFormat, i)
+          const value = d[keys.VALUE]
+          const formattedValue = formatTooltipValue(value, d.id)
           legendData.push({key: "value", value: formattedValue})
@@ -184,0 +189,0 @@ }

webpack.config-spec.js

@@ -19,2 +19,9 @@ const path = require("path")
     rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|doc|dist|dev)/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
       {test: /\.scss$/, loader: "null-loader"},
@@ -21,0 +28,0 @@ {test: /\.css$/, loader: "null-loader"}

webpack.config.js

@@ -1,8 +0,7 @@
-const webpack = require("webpack")
-const path = require("path")
-const LiveReloadPlugin = require("webpack-livereload-plugin")
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
-const bundleIndexPath = path.resolve("./src/bundle.js")
+const webpack = require("webpack");
+const path = require("path");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const bundleIndexPath = path.resolve("./src/bundle.js");
 
-const config = (env) => {
+const config = env => {
   if (env.prod) {
@@ -31,9 +30,5 @@ return {
             test: /\.js$/,
-            exclude: /(node_modules)/,
+            exclude: /(node_modules|doc|dist|dev)/,
             use: {
-              loader: "babel-loader",
-              options: {
-                presets: ["@babel/preset-env"],
-                cacheDirectory: false
-              }
+              loader: "babel-loader"
             }
@@ -54,3 +49,3 @@ },
       ]
-    }
+    };
   } else if (env.dev) {
@@ -79,9 +74,5 @@ return {
             test: /\.js$/,
-            exclude: /(node_modules)/,
+            exclude: /(node_modules|doc|dist|dev)/,
             use: {
-              loader: "babel-loader",
-              options: {
-                presets: ["@babel/preset-env"],
-                cacheDirectory: false
-              }
+              loader: "babel-loader"
             }
@@ -101,8 +92,8 @@ },
       ]
-    }
+    };
   } else {
-    return
+    return;
   }
-}
+};
 
-module.exports = config
+module.exports = config;

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

1151345

increased by5.94%

Dev dependency count

27

decreased by-3.57%

Number of package files

60

increased by1.69%

Lines of code

6903

increased by6.25%

No dependency changes