@windborne/grapher 1.0.21 → 1.0.24

package/src/grapher.scss

@@ -2,17 +2,17 @@
   $primary-graph-body-height: 400px,
   $secondary-graph-body-height: 50px,
 
-  $background-color-1: #2a2a2b,
-  $background-color-2: #3e3e40,
+  $background-color-1: #131313,
+  $background-color-2: #1e1e1e,
 
   $tooltip-line-color: #CCC,
   $tooltip-background-color: rgba(0, 0, 0, 0.6),
   $tooltip-text-color: #F0F0F0,
   $vertical-line-color: #CCC,
 
-  $axis-line-color: silver,
-  $axis-line-width: 2px,
-  $axis-tick-color: #505053,
+  $axis-line-color: rgb(192, 192, 192, 0.3),
+  $axis-line-width: 1px,
+  $axis-tick-color: rgb(192, 192, 192, 0.3),
   $axis-text-color: #E0E0E3,
 
   $range-selection-text-color: silver,
@@ -24,15 +24,18 @@
   $range-selection-button-border: null,
   $range-selection-selected-button-border: null,
 
-  $range-graph-selection-bar-size: 14px,
+  $range-graph-selection-background-color: rgba(0, 0, 0, 0.3),
   $range-graph-selection-range-color: rgba(255, 255, 255, 0.1),
   $range-graph-selection-outline-color: #AAA,
   $range-graph-selection-bar-color: #808083,
   $range-graph-selection-bar-track-color: #303033,
   $range-graph-selection-bar-rifles-color: #FFF,
+  $range-graph-selection-bar-height: 14px,
   $range-graph-handle-color: #AAA,
   $range-graph-handle-fill-color: #666,
   $range-graph-axis-text-color: #9f9f9f,
+  $range-graph-tick-highlighted-color: #FFF,
+  $range-graph-text-highlighted-color: #FFF,
 
   $annotation-background-color: rgba(255, 255, 255, 0.3),
 
@@ -52,6 +55,7 @@
   $new-grapher-color: #DDD
 ) {
   $x-axis-height: 20px;
+  $x-axis-dual-height: 30px;
   $padding: 10px;
 
   $axis-z-index: 0;
@@ -431,6 +435,7 @@
 
   .range-graph-container {
     display: flex;
+    margin-top: 10px;
   }
 
   .graph-body {
@@ -580,25 +585,11 @@
     &.x-axis {
       width: 1px;
       height: $x-axis-height;
-      display: block;
-
-      .axis-item {
-        text {
-          text-anchor: middle;
-        }
-
-        &.axis-item-first {
-          text {
-            text-anchor: start;
-          }
-        }
-
-        &.axis-item-last {
-          text {
-            text-anchor: end;
-          }
-        }
+      
+      &.x-axis-dual {
+        height: $x-axis-dual-height;
       }
+      display: block;
     }
 
     &.y-axis {
@@ -606,7 +597,6 @@
 
       .axis-item text {
         text-anchor: end;
-        alignment-baseline: middle;
       }
 
       .y-axis-label {
@@ -634,11 +624,6 @@
       stroke-width: $axis-line-width;
     }
 
-    .axis-line-shadow {
-      stroke: $axis-tick-color;
-      stroke-width: 1px;
-    }
-
     .axis-item {
       path {
         stroke: $axis-tick-color;
@@ -652,7 +637,7 @@
 
       &.axis-item-major {
         .axis-tick {
-          stroke-width: 2px;
+          stroke-width: 1px;
         }
       }
 
@@ -666,15 +651,19 @@
 
   .range-selection-graph {
     width: 100%;
-    padding-bottom: $range-graph-selection-bar-size;
+    background-color: $range-graph-selection-background-color;
+    height: calc(#{$secondary-graph-body-height} + #{$range-graph-selection-bar-height}); 
 
     .graph-body-secondary {
       height: $secondary-graph-body-height;
 
+      canvas {
+        height: 100%;
+      }
+
       svg {
         position: absolute;
         left: 0;
-        height: $secondary-graph-body-height;
         width: 100%;
         overflow: visible;
 
@@ -683,31 +672,65 @@
           cursor: ew-resize;
         }
 
-        .selection-bar {
-          fill: $range-graph-selection-bar-color;
-          cursor: ew-resize;
+
+        .target-selection-outline {
+          stroke: $range-graph-selection-outline-color;
+          fill: none;
         }
 
         .selection-bar-track {
           fill: $range-graph-selection-bar-track-color;
         }
 
+        .selection-bar {
+          fill: $range-graph-selection-bar-color;
+          cursor: ew-resize;
+        }
+
         .selection-bar-rifles {
-          fill: none;
-          stroke-width: 1;
           stroke: $range-graph-selection-bar-rifles-color;
+          stroke-width: 1px;
+          cursor: ew-resize;
+        }
+
+        .selection-bar-handle-hit {
+          cursor: ew-resize;
         }
 
         .selection-bar-handle {
           stroke: $range-graph-handle-color;
-          stroke-width: 1;
           fill: $range-graph-handle-fill-color;
+          stroke-width: 1px;
           cursor: ew-resize;
+          transition: stroke-width 0.15s ease, fill 0.15s ease;
         }
 
-        .target-selection-outline {
-          stroke: $range-graph-selection-outline-color;
-          fill: none;
+        .selection-handle {
+          .selection-handle-hit {
+            cursor: ew-resize;
+          }
+
+          .selection-handle-line {
+            stroke: $range-graph-handle-color;
+            stroke-width: 1;
+            transition: stroke-width 0.15s ease;
+          }
+
+          &:hover .selection-handle-line {
+            stroke-width: 3;
+          }
+
+          &.selection-handle-dragging .selection-handle-line {
+            stroke-width: 3;
+          }
+
+          &:hover .selection-bar-handle {
+            stroke-width: 2px;
+          }
+
+          &.selection-handle-dragging .selection-bar-handle {
+            stroke-width: 2px;
+          }
         }
 
         .axis-item {
@@ -720,9 +743,19 @@
           }
 
           path {
-            stroke: $axis-tick-color;
+            stroke: $range-graph-axis-text-color;
             stroke-width: 1px;
           }
+          
+          &.axis-item-highlighted {
+            path {
+              stroke: $range-graph-tick-highlighted-color;
+            }
+            
+            text {
+              fill: $range-graph-text-highlighted-color;
+            }
+          }
         }
       }
     }
@@ -841,8 +874,12 @@
           $range-graph-selection-bar-color: #B0B0B7,
           $range-graph-selection-bar-track-color: #EEE,
           $range-graph-selection-bar-rifles-color: #333,
+          $range-graph-selection-bar-height: 14px,
           $range-graph-handle-color: #333,
           $range-graph-handle-fill-color: #B0B0B7,
+          $range-graph-axis-text-color: #555,
+          $range-graph-tick-highlighted-color: #000,
+          $range-graph-text-highlighted-color: #000,
 
           $annotation-background-color: rgba(0, 0, 0, 0.3),
 
@@ -898,8 +935,12 @@
           $range-graph-selection-bar-color: #B0B0B7,
           $range-graph-selection-bar-track-color: #EEE,
           $range-graph-selection-bar-rifles-color: #333,
+          $range-graph-selection-bar-height: 14px,
           $range-graph-handle-color: #333,
           $range-graph-handle-fill-color: #B0B0B7,
+          $range-graph-axis-text-color: #333,
+          $range-graph-tick-highlighted-color: #000,
+          $range-graph-text-highlighted-color: #000,
 
           $annotation-background-color: rgba(0, 0, 0, 0.3),
 

package/src/helpers/color_to_vector.js

@@ -23,10 +23,15 @@ export default function colorToVector(color) {
         ];
     }
 
-    if (typeof color !== 'string' || !/^#[\dA-F]{6}$/i.test(color)) {
+    if (typeof color !== 'string' || !/^#[\dA-F]{3}$|^#[\dA-F]{6}$/i.test(color)) {
         throw new Error(`Color must be a hex string: ${color}`);
     }
 
+    // support for short hex codes, expanding 3-digit hex to 6-digit
+    if (color.length === 4) {
+        color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+    }
+
     const r = parseInt(color.substr(1, 2),  16)/255;
     const g = parseInt(color.substr(3, 2),  16)/255;
     const b = parseInt(color.substr(5, 2),  16)/255;

package/src/helpers/colors.js

@@ -1,27 +1,93 @@
 export const LINE_COLORS = [
-    '#F1C232',
-    '#1259f8',
-    '#cb4b4b',
-    '#4da74d',
-    '#9440ed',
-    '#61e0ed',
-    '#ed6d2c',
-    '#ed13c6',
-    '#bbed59'
+  "#F1C232",
+  "#1259f8",
+  "#cb4b4b",
+  "#4da74d",
+  "#9440ed",
+  "#61e0ed",
+  "#ed6d2c",
+  "#ed13c6",
+  "#bbed59",
 ];
 
 export default function getColor(seriesColor, i, multigrapherSeriesIndex) {
-    if (typeof seriesColor === 'string') {
-        return seriesColor;
+  if (typeof seriesColor === "string") {
+    return seriesColor;
+  }
+
+  if (typeof seriesColor === "number") {
+    return LINE_COLORS[seriesColor % LINE_COLORS.length];
+  }
+
+  if (multigrapherSeriesIndex !== undefined) {
+    return LINE_COLORS[multigrapherSeriesIndex % LINE_COLORS.length];
+  }
+
+  return LINE_COLORS[i % LINE_COLORS.length];
+}
+
+/**
+ * Applies reduced opacity to a color
+ * @param {string} color 
+ * @param {number} opacityFactor 
+ * @returns {string}
+ */
+export function applyReducedOpacity(color, opacityFactor) {
+  if (!color) return color;
+
+  if (color.startsWith("rgba(")) {
+    const matches = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+    if (matches) {
+      const [, r, g, b, a] = matches;
+      const newAlpha = parseFloat(a) * opacityFactor;
+      return `rgba(${r}, ${g}, ${b}, ${newAlpha})`;
     }
+  }
 
-    if (typeof seriesColor === 'number') {
-        return LINE_COLORS[seriesColor % LINE_COLORS.length];
+  if (color.startsWith("rgb(")) {
+    const matches = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (matches) {
+      const [, r, g, b] = matches;
+      return `rgba(${r}, ${g}, ${b}, ${opacityFactor})`;
     }
+  }
 
-    if (multigrapherSeriesIndex !== undefined) {
-        return LINE_COLORS[multigrapherSeriesIndex % LINE_COLORS.length];
+  if (color.startsWith("#")) {
+    let hex = color.slice(1);
+    if (hex.length === 3) {
+      hex = hex
+        .split("")
+        .map((char) => char + char)
+        .join("");
     }
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacityFactor})`;
+  }
+
+  return color;
+}
 
-    return LINE_COLORS[i % LINE_COLORS.length];
+/**
+ * Applies reduced opacity to a gradient
+ * @param {Array<[number, string]>} gradient 
+ * @param {number} opacityFactor 
+ * @returns {Array<[number, string]>}
+ */
+export function applyReducedOpacityToGradient(gradient, opacityFactor) {
+  if (!gradient || !Array.isArray(gradient)) {
+    return gradient;
+  }
+
+  return gradient.map((stop) => {
+    if (Array.isArray(stop) && stop.length === 2) {
+      const [position, color] = stop;
+      const translucentColor = applyReducedOpacity(color, opacityFactor);
+      return [position, translucentColor];
+    } else if (typeof stop === "string") {
+      return applyReducedOpacity(stop, opacityFactor);
+    }
+    return stop;
+  });
 }

package/src/helpers/custom_prop_types.js

@@ -65,7 +65,7 @@ const SingleSeries = PropTypes.shape({
     background: PropTypes.object,
     hideFromKey: PropTypes.bool,
     showIndividualPoints: PropTypes.bool,
-    rendering: PropTypes.oneOf(['line', 'bar', 'area']), // defaults to line
+    rendering: PropTypes.oneOf(['line', 'bar', 'area', 'shadow']), // defaults to line
     negativeColor: PropTypes.string, // only applies to bar
     gradient: PropTypes.array, // only applies to area
     zeroLineWidth: PropTypes.number, // only applies to bar and area
@@ -75,6 +75,7 @@ const SingleSeries = PropTypes.shape({
     tooltipWidth: PropTypes.number,
     hasAreaBottom: PropTypes.bool,
     shadowColor: PropTypes.string,
+    gradient: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.array])), // gradient colors or [position, color] pairs
     rangeKey: PropTypes.string
 });
 

package/src/helpers/place_grid.js

@@ -248,6 +248,225 @@ function placeDatesGrid({ min, max, precision, expectedLabelSize, labelPadding,
     return ticks.filter(({ pixelValue }) => pixelValue <= totalSize && pixelValue >= 0);
 }
 
+function placeTimeOnlyGrid({ min, max, precision, expectedLabelSize, labelPadding, totalSize, skipFirst=false, skipLast=false, scale='linear', formatter, inverted=false, formatOptions={} }) {
+    const paddedLabelSize = expectedLabelSize + 2*labelPadding;
+    const ticks = [];
+    const placementParams = { scale, min, max, inverted, totalSize, precision, formatter, formatOptions, dates: true };
+
+    const desiredCount = Math.floor(totalSize/paddedLabelSize);
+    const span = max - min;
+    
+    let unit, amount;
+    
+    const hourSpan = span / (60 * 60 * 1000);
+    const minuteSpan = span / (60 * 1000);
+    
+    if (hourSpan <= desiredCount * 8) {
+        unit = 'h';
+        amount = Math.max(1, Math.ceil(hourSpan / desiredCount));
+        if (amount <= 6) {
+        } else if (amount <= 12) {
+            amount = 12;
+        } else if (amount <= 24) {
+            amount = 24;
+        } else {
+            amount = Math.ceil(amount / 24) * 24;
+        }
+    } else {
+        unit = 'h';
+        amount = 24;
+    }
+    
+    if (!skipFirst) {
+        ticks.push(placeTickByPixel(0, {...placementParams, justTime: true}, {position: 'first'}));
+    }
+    
+    let currentDate = new Date(min);
+    
+    if (unit === 'h') {
+        currentDate.setMinutes(0, 0, 0);
+        if (amount === 24) {
+            currentDate.setHours(0);
+        } else if (amount === 12) {
+            const currentHour = currentDate.getHours();
+            const alignedHour = currentHour < 12 ? 0 : 12;
+            currentDate.setHours(alignedHour);
+        } else {
+            const currentHour = currentDate.getHours();
+            const alignedHour = Math.floor(currentHour / amount) * amount;
+            currentDate.setHours(alignedHour);
+        }
+    } else if (unit === 'm') {
+        currentDate.setSeconds(0, 0);
+        const currentMinute = currentDate.getMinutes();
+        const alignedMinute = Math.floor(currentMinute / amount) * amount;
+        currentDate.setMinutes(alignedMinute);
+    } else if (unit === 's') {
+        currentDate.setMilliseconds(0);
+        const currentSecond = currentDate.getSeconds();
+        const alignedSecond = Math.floor(currentSecond / amount) * amount;
+        currentDate.setSeconds(alignedSecond);
+    }
+    
+    while (currentDate < min) {
+        if (unit === 'h') {
+            currentDate = new Date(currentDate.valueOf() + amount * 60 * 60 * 1000);
+        } else if (unit === 'm') {
+            currentDate = new Date(currentDate.valueOf() + amount * 60 * 1000);
+        } else if (unit === 's') {
+            currentDate = new Date(currentDate.valueOf() + amount * 1000);
+        }
+    }
+    
+    while (currentDate < max) {
+        const tick = placeTick(currentDate, {...placementParams, justTime: true});
+        
+        const reservedSpaceForLast = expectedLabelSize + labelPadding;
+        const maxPixelForMiddleTicks = totalSize - reservedSpaceForLast;
+        
+        if (ticks.length && (tick.pixelValue - ticks[ticks.length - 1].pixelValue) < (expectedLabelSize + labelPadding)) {
+        } else if (tick.pixelValue + expectedLabelSize < maxPixelForMiddleTicks) {
+            ticks.push(tick);
+        } else {
+            break;
+        }
+        
+        if (unit === 'h') {
+            currentDate = new Date(currentDate.valueOf() + amount * 60 * 60 * 1000);
+        } else if (unit === 'm') {
+            currentDate = new Date(currentDate.valueOf() + amount * 60 * 1000);
+        } else if (unit === 's') {
+            currentDate = new Date(currentDate.valueOf() + amount * 1000);
+        } else {
+            break;
+        }
+    }
+    
+    if (!skipLast) {
+        const lastTick = placeTick(max, {...placementParams, justTime: true}, {position: 'last'});
+        if (ticks.length === 0 || (lastTick.pixelValue - ticks[ticks.length - 1].pixelValue) >= (expectedLabelSize + labelPadding/2)) {
+            ticks.push(lastTick);
+        } else {
+            ticks[ticks.length - 1] = lastTick;
+        }
+    }
+    
+    return ticks.filter(({ pixelValue }) => pixelValue <= totalSize && pixelValue >= 0);
+}
+
+function placeDateOnlyGrid({ min, max, precision, expectedLabelSize, labelPadding, totalSize, skipFirst=false, skipLast=false, scale='linear', formatter, inverted=false, formatOptions={} }) {
+    const paddedLabelSize = expectedLabelSize + 2*labelPadding;
+    const ticks = [];
+    
+    const minYear = new Date(min).getFullYear();
+    const maxYear = new Date(max).getFullYear();
+    const spanMultipleYears = minYear !== maxYear;
+
+    const customDateFormatter = (date, options) => {
+        const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        const d = new Date(date);
+        const month = monthNames[d.getMonth()];
+        const day = d.getDate();
+        const year = d.getFullYear();
+        
+        if (spanMultipleYears) {
+            return `${month} ${day} ${year}`;
+        } else {
+            return `${month} ${day}`;
+        }
+    };
+    
+    const placementParams = { scale, min, max, inverted, totalSize, precision, formatter: customDateFormatter, formatOptions, dates: true };
+    
+    const span = max - min;
+    const hourSpan = span / (60 * 60 * 1000);
+    
+    let { amount, unit } = getEvenDateTickSpacing(span, totalSize/paddedLabelSize, formatOptions.unitOverride);
+    
+    if ((unit === 'h' || unit === 'm' || unit === 's') && hourSpan >= 48) {
+        unit = 'd';
+        amount = Math.max(1, Math.ceil(hourSpan / 24 / Math.floor(totalSize/paddedLabelSize)));
+    } else if ((unit === 'h' || unit === 'm' || unit === 's') && hourSpan < 48) {
+        const startTick = placeTick(min, {...placementParams, justDate: true}, {position: 'first'});
+        const endTick = placeTick(max, {...placementParams, justDate: true}, {position: 'last'});
+        
+        const ticks = [startTick];
+        if ((endTick.pixelValue - startTick.pixelValue) >= (expectedLabelSize + labelPadding)) {
+            ticks.push(endTick);
+        }
+        
+        return ticks.filter(({ pixelValue }) => pixelValue <= totalSize && pixelValue >= 0);
+    }
+    
+    if (!skipFirst) {
+        ticks.push(placeTickByPixel(0, {...placementParams, justDate: true}, {position: 'first'}));
+    }
+    
+    let currentDate = new Date(min);
+    
+    if (unit === 'month') {
+        currentDate = startOfDayInTimezone(currentDate, formatOptions.timeZone);
+        currentDate.setDate(1);
+    } else if (unit === 'd') {
+        currentDate = startOfDayInTimezone(currentDate, formatOptions.timeZone);
+        currentDate.setHours(0, 0, 0, 0);
+    }
+    
+    while (currentDate < max) {
+        let delta = 24*60*60*1000;
+        
+        if (unit === 'month') {
+            delta = 0;
+            if (currentDate.getMonth() === 11) {
+                currentDate = new Date(currentDate.getFullYear() + 1, 0, 1);
+            } else {
+                currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+            }
+        } else if (unit === 'year') {
+            currentDate = new Date(currentDate.getFullYear() + 1, 0, 1);
+            delta = 0;
+        } else if (unit === 'd') {
+            delta = amount * 24 * 60 * 60 * 1000;
+        }
+        
+        if (delta > 0) {
+            currentDate = new Date(currentDate.valueOf() + delta);
+        }
+        
+        const tick = placeTick(currentDate, {...placementParams, justDate: true});
+        
+        const reservedSpaceForLast = expectedLabelSize + labelPadding;
+        const maxPixelForMiddleTicks = totalSize - reservedSpaceForLast;
+        
+        if (ticks.length && (tick.pixelValue - ticks[ticks.length - 1].pixelValue) < (expectedLabelSize + (labelPadding || 0))) {
+            continue;
+        }
+        
+        if (tick.pixelValue + expectedLabelSize < maxPixelForMiddleTicks) {
+            ticks.push(tick);
+        } else {
+            break;
+        }
+    }
+    
+    if (!skipLast) {
+        const lastTick = placeTick(max, {...placementParams, justDate: true}, {position: 'last'});
+        if (ticks.length === 0 || (lastTick.pixelValue - ticks[ticks.length - 1].pixelValue) >= (expectedLabelSize + labelPadding/2)) {
+            ticks.push(lastTick);
+        } else {
+            ticks[ticks.length - 1] = lastTick;
+        }
+    }
+
+    if (ticks.length === 0 && hourSpan >= 48) {
+        ticks.push(placeTickByPixel(0, {...placementParams, justDate: true}, {position: 'first'}));
+    }
+    
+    return ticks.filter(({ pixelValue }) => pixelValue <= totalSize && pixelValue >= 0);
+}
+
+export { placeTimeOnlyGrid, placeDateOnlyGrid };
+
 export default function placeGrid(opts) {
     if (opts.dates) {
         return placeDatesGrid(opts);