mapd3 - npm Package Compare versions

Comparing version 0.11.0 to 0.12.0

package.json

 {
   "name": "mapd3",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A fast chart library for the fastest DB",
@@ -5,0 +5,0 @@ "main": "dist/mapd3.js",

src/charts/axis.js

 import * as d3 from "./helpers/d3-service"
-import {override} from "./helpers/common"
+import {override, getSizes} from "./helpers/common"
 import {autoFormat, multiFormat, getExtractFormatter} from "./helpers/formatters"
@@ -57,5 +57,2 @@
   function build () {
-    cache.chartWidth = config.width - config.margin.left - config.margin.right
-    cache.chartHeight = config.height - config.margin.top - config.margin.bottom
-
     if (!cache.root) {
@@ -75,2 +72,6 @@ cache.root = cache.container.append("g")
 
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
+
     cache.root.attr("transform", `translate(${config.margin.left}, ${config.margin.top})`)
@@ -77,0 +78,0 @@ }

src/charts/bar.js

 import {keys} from "./helpers/constants"
-import {override} from "./helpers/common"
+import {override, getSizes} from "./helpers/common"
 
@@ -43,5 +43,2 @@ export default function Bar (_container) {
   function build () {
-    cache.chartWidth = config.width - config.margin.left - config.margin.right
-    cache.chartHeight = config.height - config.margin.top - config.margin.bottom
-
     if (!cache.root) {
@@ -51,2 +48,6 @@ cache.root = cache.container.append("g")
     }
+
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
   }
@@ -59,5 +60,7 @@
 
-    let barData = data.dataBySeries
+    let barData = []
     if (Array.isArray(config.chartType)) {
-      barData = barData.filter((d, i) => config.chartType[i] === "bar")
+      barData = data.dataBySeries.filter((d, i) => config.chartType[i] === "bar")
+    } else if(config.chartType === "bar") {
+      barData = data.dataBySeries
     }
@@ -163,6 +166,6 @@
 
-    if (config.chartType === "bar" || Array.isArray(config.chartType)) {
+    if (config.chartType === "stackedBar") {
+      drawStackedBars()
+    } else {
       drawBars()
-    } else if (config.chartType === "stackedBar") {
-      drawStackedBars()
     }
@@ -169,0 +172,0 @@ }

src/charts/binning.js

@@ -14,4 +14,2 @@ import * as d3 from "./helpers/d3-service"
     },
-    width: 800,
-    height: 500,
     autoLabel: "auto",
@@ -18,0 +16,0 @@ binningToggles: [],

src/charts/brush-range-editor.js

 import * as d3 from "./helpers/d3-service"
 
-import {override, stringToType} from "./helpers/common"
+import {override, stringToType, getSizes} from "./helpers/common"
 import {blurOnEnter} from "./interactors"
@@ -42,5 +42,2 @@
   function buildSVG () {
-    cache.chartWidth = config.width - config.margin.left - config.margin.right
-    cache.chartHeight = config.height - config.margin.top - config.margin.bottom
-
     if (!cache.root) {
@@ -81,2 +78,6 @@ cache.root = cache.container
 
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
+
     const domain = scales.xScale.domain()
@@ -83,0 +84,0 @@ let rangeMin = config.brushRangeMin === null ? domain[0] : config.brushRangeMin

src/charts/brush.js

 import * as d3 from "./helpers/d3-service"
-import {invertScale, override} from "./helpers/common"
+import {invertScale, override, getSizes} from "./helpers/common"
 
@@ -43,5 +43,2 @@ export default function Brush (_container) {
   function buildSVG () {
-    cache.chartWidth = Math.max(config.width - config.margin.left - config.margin.right, 0)
-    cache.chartHeight = Math.max(config.height - config.margin.top - config.margin.bottom, 0)
-
     if (!cache.root) {
@@ -56,2 +53,6 @@ cache.root = cache.container.append("g")
     }
+
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
   }
@@ -58,0 +59,0 @@

src/charts/chart.js

@@ -5,3 +5,3 @@ import * as d3 from "./helpers/d3-service"
 import {keys} from "./helpers/constants"
-import {cloneData, override, throttle, rebind} from "./helpers/common"
+import {cloneData, override, throttle, rebind, getSizes} from "./helpers/common"
 
@@ -130,2 +130,3 @@ import Scale from "./scale"
     maskingRectangle: null,
+    width: null, height: null,
     chartWidth: null, chartHeight: null,
@@ -154,7 +155,2 @@ xAxis: null, yAxis: null, yAxis2: null
   function build () {
-    const w = config.width === "auto" ? cache.container.clientWidth : config.width
-    const h = config.height === "auto" ? cache.container.clientHeight : config.height
-    cache.chartWidth = Math.max(w - config.margin.left - config.margin.right, 0)
-    cache.chartHeight = Math.max(h - config.margin.top - config.margin.bottom, 0)
-
     if (!cache.svg) {
@@ -213,5 +209,11 @@ const template = `<div class="mapd3 mapd3-container">
 
+    const {width, height, chartWidth, chartHeight} = getSizes(config, cache)
+    cache.width = width
+    cache.height = height
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
+
     cache.svg
-      .attr("width", config.width)
-      .attr("height", config.height)
+      .attr("width", cache.width)
+      .attr("height", cache.height)
 
@@ -325,3 +327,3 @@ cache.headerGroup
         .attr("width", 0)
-        .attr("x", config.width - config.margin.right)
+        .attr("x", cache.width - config.margin.right)
         .on("end", () => cache.maskingRectangle.remove())
@@ -328,0 +330,0 @@ }

src/charts/clip-path.js

 import * as d3 from "./helpers/d3-service"
-import {override} from "./helpers/common"
+import {override, getSizes} from "./helpers/common"
 
@@ -29,5 +29,2 @@ /**
   function build () {
-    cache.chartWidth = config.width - config.margin.left - config.margin.right
-    cache.chartHeight = config.height - config.margin.top - config.margin.bottom
-
     if (!cache.clipPath) {
@@ -40,2 +37,6 @@ cache.clipPath = cache.container.append('defs')
 
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
+
     cache.clipPath
@@ -42,0 +43,0 @@ .attr('width', cache.chartWidth)

src/charts/domain-editor.js

 import * as d3 from "./helpers/d3-service"
 
-import {override, stringToType} from "./helpers/common"
+import {override, stringToType, getSizes} from "./helpers/common"
 import {blurOnEnter} from "./interactors"
@@ -61,4 +61,2 @@
   function build () {
-    cache.chartWidth = config.width - config.margin.left - config.margin.right
-    cache.chartHeight = config.height - config.margin.top - config.margin.bottom
     const xDomain = config.xDomain === "auto" ? scales.xScale.domain() : config.xDomain
@@ -273,2 +271,6 @@ const yDomain = (config.yDomain === "auto" && scales.yScale) ? scales.yScale.domain() : config.yDomain
 
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
+
     if (config.xDomainEditorIsEnabled) {
@@ -275,0 +277,0 @@ cache.xHitZone.style("display", "block")

src/charts/helpers/common.js

@@ -90,1 +90,19 @@ import {keys} from "./constants"
 }
+
+export function getSizes (config, cache) {
+  const width = config.width === "auto"
+    ? (cache.container && cache.container.clientWidth || 0)
+    : config.width
+  const height = config.height === "auto"
+    ? (cache.container && cache.container.clientHeight || 0)
+    : config.height
+  const chartWidth = Math.max(width - config.margin.left - config.margin.right, 0)
+  const chartHeight = Math.max(height - config.margin.top - config.margin.bottom, 0)
+
+  return {
+    width,
+    height,
+    chartWidth,
+    chartHeight
+  }
+}

src/charts/hover.js

 import * as d3 from "./helpers/d3-service"
 
 import {keys, LEFT_AXIS_GROUP_INDEX, RIGHT_AXIS_GROUP_INDEX} from "./helpers/constants"
-import {override} from "./helpers/common"
+import {override, getSizes} from "./helpers/common"
 
@@ -52,5 +52,2 @@ export default function Hover (_container) {
   function build () {
-    cache.chartWidth = config.width - config.margin.left - config.margin.right
-    cache.chartHeight = config.height - config.margin.top - config.margin.bottom
-
     if (!cache.root) {
@@ -61,2 +58,6 @@ cache.root = cache.container.append("g")
     }
+
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
   }
@@ -63,0 +64,0 @@

src/charts/label.js

 import * as d3 from "./helpers/d3-service"
 
-import {override} from "./helpers/common"
+import {override, getSizes} from "./helpers/common"
 
@@ -35,5 +35,2 @@ export default function Label (_container) {
   function build () {
-    cache.chartWidth = config.width - config.margin.left - config.margin.right
-    cache.chartHeight = config.height - config.margin.top - config.margin.bottom
-
     if (!cache.root) {
@@ -91,11 +88,15 @@ cache.root = cache.container
 
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
+
     cache.xAxisLabel
-        .text(config.xLabel)
-        .style("max-width", `${cache.chartWidth}px`)
-        .style("top", function top () {
-          const LABEL_PADDING = 18
-          const textHeight = this.getBoundingClientRect().height
-          return `${config.height - textHeight - LABEL_PADDING}px`
-        })
-        .style("left", `${config.margin.left + cache.chartWidth / 2}px`)
+      .text(config.xLabel)
+      .style("max-width", `${cache.chartWidth}px`)
+      .style("top", function top () {
+        const LABEL_PADDING = 18
+        const textHeight = this.getBoundingClientRect().height || LABEL_PADDING
+        return `${config.height - textHeight - LABEL_PADDING}px`
+      })
+      .style("left", `${config.margin.left + cache.chartWidth / 2}px`)
 
@@ -102,0 +103,0 @@ cache.yAxisLabel

src/charts/line.js

 import * as d3 from "./helpers/d3-service"
 
 import {keys, dashStylesTranslation} from "./helpers/constants"
-import {override} from "./helpers/common"
+import {override, getSizes} from "./helpers/common"
 
@@ -47,5 +47,2 @@ export default function Line (_container) {
   function build () {
-    cache.chartWidth = config.width - config.margin.left - config.margin.right
-    cache.chartHeight = config.height - config.margin.top - config.margin.bottom
-
     if (!cache.root) {
@@ -55,2 +52,6 @@ cache.root = cache.container.append("g")
     }
+
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
   }
@@ -57,0 +58,0 @@

src/charts/scale.js

 import * as d3 from "./helpers/d3-service"
 
 import {keys, LEFT_AXIS_GROUP_INDEX, RIGHT_AXIS_GROUP_INDEX} from "./helpers/constants"
-import {getUnique, override} from "./helpers/common"
+import {getUnique, override, getSizes} from "./helpers/common"
 
@@ -26,2 +26,7 @@ export default function Scale () {
 
+  const cache = {
+    chartWidth: null,
+    chartHeight: null
+  }
+
   let data = {
@@ -44,7 +49,12 @@ dataByKey: null,
 
+  function getScaleSizes () {
+    const {chartWidth, chartHeight} = getSizes(config, cache)
+    cache.chartWidth = chartWidth
+    cache.chartHeight = chartHeight
+  }
+
   function buildXScale (_allKeys) {
-    const chartWidth = config.width - config.margin.left - config.margin.right
     let xScale = null
     let domain = null
-    const markW =  hasBars(config.chartType) ? chartWidth / _allKeys.length : 0
+    const markW =  hasBars(config.chartType) ? cache.chartWidth / _allKeys.length : 0
 
@@ -73,3 +83,3 @@ if (config.keyType === "time") {
     xScale.domain(domain)
-      .range([markW / 2, chartWidth - markW / 2])
+      .range([markW / 2, cache.chartWidth - markW / 2])
 
@@ -80,6 +90,5 @@ return xScale
   function buildYScale (_extent) {
-    const chartHeight = config.height - config.margin.top - config.margin.bottom
     const yScale = d3.scaleLinear()
         .domain(_extent)
-        .rangeRound([chartHeight, 0])
+        .rangeRound([cache.chartHeight, 0])
 
@@ -224,2 +233,3 @@ return yScale
   function getScales () {
+    getScaleSizes()
     if (config.chartType === "stackedBar"
@@ -226,0 +236,0 @@ || config.chartType === "stackedArea") {

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

843682

increased by0.2%

Lines of code

6353

increased by0.65%

No dependency changes