mapd3 - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

package.json

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

src/charts/bar.js

@@ -55,2 +55,3 @@ import {keys} from "./helpers/constants"
     const barW = cache.chartWidth / stack[0].length
+    const MIN_BAR_HEIGHT = 1
 
@@ -86,2 +87,3 @@ let barData = data.dataBySeries
       .attr("class", "mark rect")
+      .attr('clip-path', 'url(#mark-clip)')
       .merge(bars)
@@ -99,5 +101,5 @@ .attr("x", (d) => scales.xScale(d[keys.KEY]) - barW / 2)
         if (d[keys.GROUP] === 0) {
-          return cache.chartHeight - scales.yScale(d[keys.VALUE])
+          return Math.max(cache.chartHeight - scales.yScale(d[keys.VALUE]), MIN_BAR_HEIGHT)
         } else {
-          return cache.chartHeight - scales.y2Scale(d[keys.VALUE])
+          return Math.max(cache.chartHeight - scales.y2Scale(d[keys.VALUE]), MIN_BAR_HEIGHT)
         }
@@ -133,2 +135,3 @@ })
       .attr("class", "mark")
+      .attr('clip-path', 'url(#mark-clip)')
       .merge(stackedBars)
@@ -135,0 +138,0 @@ .attr("x", (d) => scales.xScale(d.data[keys.KEY])- barW / 2)

src/charts/chart.js

@@ -20,2 +20,3 @@ import * as d3 from "./helpers/d3-service"
 import DataManager from "./data-manager"
+import ClipPath from "./clip-path"
 
@@ -195,3 +196,4 @@ export default function Chart (_container) {
         brushRangeEditor: BrushRangeEditor(cache.headerGroup),
-        label: Label(cache.container)
+        label: Label(cache.container),
+        clipPath: ClipPath(cache.svg)
       }
@@ -292,2 +294,6 @@
 
+    components.clipPath
+      .setConfig(config)
+      .render()
+
     triggerIntroAnimation()
@@ -294,0 +300,0 @@ return this

src/charts/helpers/d3-service.js

@@ -31,2 +31,4 @@ export {
 	timeYear,
+	utcYear,
+	utcDay,
 	area,
@@ -33,0 +35,0 @@ curveCatmullRom,

src/charts/helpers/formatters.js

@@ -98,2 +98,37 @@ import * as d3 from "./d3-service"
       : formatYear)(date);
-}
+}
+
+/**
+ *  Format dates when binned by quarter, decade, century
+*/
+export function formatOddDateBin(specifier, value) {
+  switch (specifier) {
+    // reproducing the old line chart behavior, even if it's wrong
+    case "1w":
+      return `${d3.utcFormat("%b %d")(value)} - ${d3.utcFormat("%b %d,")(d3.utcDay.offset(value, 6))}`
+    case "1c":
+      return `${d3.utcFormat("%Y")(value)} - ${d3.utcFormat("%Y")(d3.utcYear.offset(value, 99))}`
+    case "10y":
+      return `${d3.utcFormat("%Y")(value)} - ${d3.utcFormat("%Y")(d3.utcYear.offset(value, 9))}`
+    case "1q":
+      const monthNumber = d3.utcFormat('%m')(value) // convert to integer month (01 - 12)
+      return `Q${Math.floor((parseInt(monthNumber, 10) + 3) / 3)} ${d3.utcFormat('%Y')(value)}`;
+    default:
+      return
+  }
+}
+
+// translate bin from human readable code to d3 time format specifier
+export const binTranslation = {
+  "1y": "%Y",
+  "1mo": "%b %Y",
+  "1s": "%b %d, %Y %H:%M:%S",
+  "1m": "%b %d, %Y %H:%M",
+  "1h": "%b %d, %Y %H:%M",
+  "1d": "%b %d, %Y"
+}
+
+export function formatTooltipNumber(d) {
+  // comma separator, max 2 decimals
+  return d3.format(",")(Math.round(d * 100) / 100)
+}

src/charts/line.js

@@ -34,3 +34,2 @@ import * as d3 from "./helpers/d3-service"
     svg: null,
-    clipPath: null,
     chartHeight: null,
@@ -56,17 +55,2 @@ }
     }
-
-    if (!cache.clipPath) {
-      cache.container.select(function () {
-        const svg = d3.select(this.parentNode)
-        cache.clipPath = svg
-          .insert('defs', ':first-child') // inserts the <defs> el at the top
-          .append('clipPath')
-          .attr('id', 'line-clip')
-          .append('rect')
-      })
-    }
-
-    cache.clipPath
-      .attr('width', cache.chartWidth)
-      .attr('height', cache.chartHeight)
   }
@@ -99,3 +83,3 @@
       .attr("class", "mark line")
-      .attr('clip-path', 'url(#line-clip)')
+      .attr('clip-path', 'url(#mark-clip)')
       .classed("y2-line", (d) => d[keys.GROUP] > 0)
@@ -138,3 +122,3 @@ .attr("d", (d) => {
       .attr("class", "mark area")
-      .attr('clip-path', 'url(#line-clip)')
+      .attr('clip-path', 'url(#mark-clip)')
       .classed("y2-area", (d) => d[keys.GROUP] > 0)
@@ -167,3 +151,3 @@ .attr("d", (d) => {
       .attr("class", "mark stacked-area")
-      .attr('clip-path', 'url(#line-clip)')
+      .attr('clip-path', 'url(#mark-clip)')
       .attr("d", seriesLine)
@@ -170,0 +154,0 @@ .style("stroke", "none")

src/charts/tooltip.js

@@ -5,2 +5,3 @@ import * as d3 from "./helpers/d3-service"
 import {cloneData, override} from "./helpers/common"
+import {binTranslation, formatOddDateBin, multiFormat, formatTooltipNumber} from "./helpers/formatters"
 
@@ -25,2 +26,4 @@ export default function Tooltip (_container, isLegend = false) {
     // from chart
+    binningResolution: null,
+    binningIsAuto: null,
     chartType: null,
@@ -137,18 +140,2 @@ colorSchema: ["skyblue"],
 
-  function autoFormat (d) {
-    let yFormat = ".2f"
-    if (d < 1) {
-      yFormat = ".2f"
-    } else if (d < 100) {
-      yFormat = ".1f"
-    } else if (d < 1000) {
-      yFormat = ".0f"
-    } else if (d < 100000) {
-      yFormat = ".2s"
-    } else {
-      yFormat = ".2s"
-    }
-    return yFormat
-  }
-
   function drawContent () {
@@ -217,3 +204,3 @@ const tooltipItems = cache.tooltipBody.selectAll(".tooltip-item")
         } else if (d.key === "value") {
-          selection.html(d3.format(autoFormat(d.value))(d.value))
+          selection.html(formatTooltipNumber(d.value))
         } else {
@@ -244,4 +231,17 @@ selection.html(d.value)
 
-    if (typeof title === "object") {
-      title = d3.utcFormat(config.dateFormat)(title)
+    // format date if we have a date
+    if (title instanceof Date) {
+      const { binningResolution } = config;
+      let specifier = binTranslation[binningResolution]
+
+      if (specifier) {
+        title = d3.utcFormat(specifier)(title)
+      } else if (["1w", "1q", "10y", "1c"].indexOf(binningResolution) > -1) {
+        // handle bin translation for bin types not available in d3-time (century, decade, quarter)
+        title = formatOddDateBin(binningResolution, title)
+      } else {
+        title = d3.utcFormat(config.dateFormat)(title)
+      }
+    } else if (!isNaN(title)) {
+      title = formatTooltipNumber(title)
     }
@@ -248,0 +248,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

841998

increased by0.78%

Number of package files

56

increased by1.82%

Lines of code

6312

increased by1.51%

No dependency changes