cfpb-chart-builder - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

config/environment.js

@@ -21,4 +21,15 @@ /* ==========================================================================
 
+/**
+ * Convenience settings for various project directory paths.
+ */
+const paths = {
+  unprocessed: './src/js',
+  processed:   './dist',
+  modules:     './node_modules',
+  test:        './test'
+};
+
 module.exports = {
-  envvars
+  envvars,
+  paths
 };

gulp/tasks/styles.js

@@ -0,13 +1,14 @@
+const autoprefixer = require( 'autoprefixer' );
+const config = require( '../config' );
+const configPkg = config.pkg;
+const configBanner = config.banner;
+const handleErrors = require( '../utils/handle-errors' );
 const gulp = require( 'gulp' );
-const gulpAutoprefixer = require( 'gulp-autoprefixer' );
 const gulpCssmin = require( 'gulp-cssmin' );
 const gulpHeader = require( 'gulp-header' );
 const gulpLess = require( 'gulp-less' );
+const gulpPostcss = require( 'gulp-postcss' );
 const gulpSourcemaps = require( 'gulp-sourcemaps' );
 const gulpRename = require( 'gulp-rename' );
-const mqr = require( 'gulp-mq-remove' );
-const config = require( '../config' );
-const configPkg = config.pkg;
-const configBanner = config.banner;
-const handleErrors = require( '../utils/handle-errors' );
+const postcssUnmq = require( 'postcss-unmq' );
 
@@ -23,10 +24,12 @@ /**
     .on( 'error', handleErrors )
-    .pipe( gulpAutoprefixer( {
-      browsers: [
-        'last 2 version',
-        'not ie <= 8',
-        'android 4',
-        'BlackBerry 7',
-        'BlackBerry 10' ]
-    } ) )
+    .pipe( gulpPostcss( [
+      autoprefixer( {
+        browsers: [
+          'last 2 version',
+          'not ie <= 8',
+          'android 4',
+          'BlackBerry 7',
+          'BlackBerry 10' ]
+      } )
+    ] ) )
     .pipe( gulpHeader( configBanner, { pkg: configPkg } ) )
@@ -45,5 +48,7 @@ .pipe( gulpSourcemaps.write( '.' ) )
     .on( 'error', handleErrors )
-    .pipe( gulpAutoprefixer( {
-      browsers: [ 'ie 9' ]
-    } ) )
+    .pipe( gulpPostcss( [
+      autoprefixer( {
+        browsers: [ 'ie 9' ]
+      } )
+    ] ) )
     .pipe( gulpCssmin() )
@@ -61,8 +66,10 @@ .pipe( gulpRename( {
     .on( 'error', handleErrors )
-    .pipe( gulpAutoprefixer( {
-      browsers: [ 'ie 7-8' ]
-    } ) )
-    .pipe( mqr( {
-      width: '75em'
-    } ) )
+    .pipe( gulpPostcss( [
+      postcssUnmq( {
+        width: '75em'
+      } ),
+      autoprefixer( {
+        browsers: [ 'ie 7-8' ]
+      } )
+    ] ) )
     .pipe( gulpCssmin() )
@@ -85,10 +92,12 @@ .pipe( gulpRename( {
     .on( 'error', handleErrors )
-    .pipe( gulpAutoprefixer( {
-      browsers: [
-        'last 2 version',
-        'not ie <= 8',
-        'android 4',
-        'BlackBerry 7',
-        'BlackBerry 10' ]
-    } ) )
+    .pipe( gulpPostcss( [
+      autoprefixer( {
+        browsers: [
+          'last 2 version',
+          'not ie <= 8',
+          'android 4',
+          'BlackBerry 7',
+          'BlackBerry 10' ]
+      } )
+    ] ) )
     .pipe( gulp.dest( config.styles.dest ) );
@@ -103,10 +112,12 @@ return stream;
     .on( 'error', handleErrors )
-    .pipe( gulpAutoprefixer( {
-      browsers: [
-        'last 2 version',
-        'not ie <= 8',
-        'android 4',
-        'BlackBerry 7',
-        'BlackBerry 10' ]
-    } ) )
+    .pipe( gulpPostcss( [
+      autoprefixer( {
+        browsers: [
+          'last 2 version',
+          'not ie <= 8',
+          'android 4',
+          'BlackBerry 7',
+          'BlackBerry 10' ]
+      } )
+    ] ) )
     .pipe( gulpRename( {
@@ -113,0 +124,0 @@ suffix: '.min'

gulp/tasks/test.js

@@ -1,43 +0,87 @@
-const configTest = require( '../config' ).test;
+const fancyLog = require( 'fancy-log' );
+const fsHelper = require( '../utils/fs-helper' );
 const gulp = require( 'gulp' );
-const gulpIstanbul = require( 'gulp-istanbul' );
-const gulpMocha = require( 'gulp-mocha' );
+const minimist = require( 'minimist' );
+const spawn = require( 'child_process' ).spawn;
+const paths = require( '../../config/environment' ).paths;
 
 /**
- * Run Mocha JavaScript unit tests.
+ * Run JavaScript unit tests.
  * @param {Function} cb - Callback function to call on completion.
  */
 function testUnitScripts( cb ) {
-  gulp.src( configTest.src )
-    .pipe( gulpIstanbul( {
-      includeUntested: false
-    } ) )
-    .pipe( gulpIstanbul.hookRequire() )
-    .on( 'finish', function() {
-      gulp.src( configTest.tests + '/unit_tests/**/*.js' )
-        .pipe( gulpMocha( {
-          reporter: configTest.reporter ? 'spec' : 'nyan'
-        } ) )
-        .pipe( gulpIstanbul.writeReports( {
-          dir: configTest.tests + '/unit_test_coverage'
-        } ) )
+  const params = minimist( process.argv.slice( 3 ) ) || {};
 
-        .pipe( gulpIstanbul.enforceThresholds( {
+  /* If --specs=path/to/js/spec flag is added on the command-line,
+     pass the value to mocha to test individual unit test files. */
+  let specs = params.specs;
 
-          /* Lowering this until we finish writing tests for the charts.
-             Otherwise gulp watch terminates when the threshold isn't met. */
-          thresholds: { global: 40 }
-        } ) )
+  /* Set path defaults for source files.
+     Remove ./ from beginning of path,
+     which collectCoverageFrom doesn't support. */
+  const pathSrc = paths.unprocessed.substring( 2 );
 
-        .on( 'end', cb );
-    } );
+  // Set regex defaults.
+  let fileTestRegex = 'unit_tests/';
+  let fileSrcPath = pathSrc + '/';
+
+  // If --specs flag is passed, adjust regex defaults.
+  if ( specs ) {
+    fileSrcPath += specs;
+    // If the --specs argument is a file, strip it off.
+    if ( specs.slice( -3 ) === '.js' ) {
+      // TODO: Perform a more robust replacement here.
+      fileSrcPath = fileSrcPath.replace( '-spec', '' );
+      fileTestRegex += specs;
+    } else {
+
+      // Ensure there's a trailing slash.
+      if ( specs.slice( -1 ) !== '/' ) {
+        specs += '/';
+      }
+
+      fileSrcPath += '**/*.js';
+      fileTestRegex += specs + '.*-spec.js';
+    }
+  } else {
+    fileSrcPath += '**/*.js';
+    fileTestRegex += '.*-spec.js';
+  }
+
+  /*
+    The --no-cache flag is needed so the transforms don't cache.
+    If they are cached, preprocessor-handlebars.js can't find handlebars. See
+    https://facebook.github.io/jest/docs/en/troubleshooting.html#caching-issues
+  */
+  const jestOptions = [
+    '--no-cache',
+    '--config=jest.config.js',
+    `--collectCoverageFrom=${ fileSrcPath }`,
+    `--testRegex=${ fileTestRegex }`
+  ];
+
+  if ( params.travis ) {
+    jestOptions.push( '--maxWorkers=2' );
+  }
+
+  spawn(
+    fsHelper.getBinary( 'jest-cli', 'jest.js', '../bin' ),
+    jestOptions,
+    { stdio: 'inherit' }
+  ).once( 'close', code => {
+    if ( code ) {
+      fancyLog( 'Unit tests exited with code ' + code );
+      process.exit( 1 );
+    }
+    fancyLog( 'Unit tests done!' );
+    cb();
+  } );
 }
 
-gulp.task( 'test:unit', testUnitScripts );
+gulp.task( 'test:unit:scripts', testUnitScripts );
 
-gulp.task( 'test',
-  gulp.series(
-    'lint',
-    'test:unit'
+gulp.task( 'test:unit',
+  gulp.parallel(
+    'test:unit:scripts'
   )
 );

gulpfile.js

@@ -19,2 +19,10 @@ /*
 
+// Define the test task.
+gulp.task( 'test',
+  gulp.parallel(
+    'lint',
+    'test:unit'
+  )
+);
+
 gulp.task( 'build',
@@ -21,0 +29,0 @@ gulp.parallel(

package.json

 {
   "name": "cfpb-chart-builder",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Charts for the Consumer Financial Protection Bureau",
@@ -37,5 +37,5 @@ "main": "src/js/index.js",
   "dependencies": {
-    "cf-core": "^4.10.0",
-    "cf-layout": "^4.5.1",
-    "cf-typography": "^4.2.1",
+    "cf-core": "4.10.0",
+    "cf-layout": "5.0.0",
+    "cf-typography": "5.0.1",
     "core-js": "2.5.7",
@@ -46,8 +46,8 @@ "highcharts": "5.0.11",
   "devDependencies": {
+    "autoprefixer": "9.1.5",
     "babel-core": "7.0.0-beta.3",
+    "babel-jest": "23.4.2",
     "babel-loader": "7.1.5",
     "babel-preset-env": "^7.0.0-beta.3",
     "browser-sync": "2.24.6",
-    "chai": "3.5.0",
-    "chai-as-promised": "7.1.1",
     "compression": "1.7.3",
@@ -58,3 +58,2 @@ "cors": "2.8.4",
     "gulp": "4.0.0",
-    "gulp-autoprefixer": "4.1.0",
     "gulp-changed": "3.2.0",
@@ -66,15 +65,12 @@ "gulp-connect": "5.5.0",
     "gulp-imagemin": "4.1.0",
-    "gulp-istanbul": "1.1.3",
     "gulp-less": "3.4.0",
-    "gulp-mocha": "3.0.1",
-    "gulp-mq-remove": "0.0.2",
     "gulp-notify": "3.2.0",
+    "gulp-postcss": "8.0.0",
     "gulp-rename": "1.4.0",
     "gulp-sourcemaps": "2.6.4",
-    "jsdom": "11.12.0",
-    "jsdom-global": "3.0.2",
+    "jest": "23.5.0",
+    "jest-cli": "23.5.0",
     "less": "2.7.2",
     "minimist": "1.2.0",
-    "mock-require": "3.0.2",
-    "pretty-hrtime": "1.0.3",
+    "postcss-unmq": "1.0.2",
     "request": "2.88.0",
@@ -81,0 +77,0 @@ "require-dir": "1.0.0",

src/js/charts/index.js

 const charts = {};
 charts.bar = require( './BarChart' );
 charts.GeoMap = require( './GeoMap' );
-charts.line = require( './LineChart' );
-charts.LineComparison = require( './LineChartComparison' );
+charts.LineChart = require( './LineChart' );
+charts.LineChartComparison = require( './LineChartComparison' );
+charts.LineChartIndex = require( './LineChartIndex' );
 charts.tileMap = require( './TileMap' );
 
 module.exports = charts;

src/js/charts/LineChart.js

@@ -16,4 +16,4 @@ const getFirstNumber = require( '../utils/calculation' ).getFirstNumber;
  *
- * @param  {array} array  An array of values to check
- * @returns {string}    Appropriate y-axis title
+ * @param {Array} array - An array of values to check.
+ * @returns {string} Appropriate y-axis title.
  */
@@ -32,7 +32,7 @@ function _getYAxisUnits( array ) {
 /**
- * _getYAxisLabel - Get the text of the y-axis title
+ * _getYAxisLabel - Get the text of the y-axis title.
  *
- * @param  {array} chartData  An array of values to check
- * @param  {sting} yAxisLabel  A string to use for the y-axis label.
- * @returns {string}    Appropriate y-axis title
+ * @param {Array} chartData - An array of values to check.
+ * @param {sting} yAxisLabel - A string to use for the y-axis label.
+ * @returns {string} Appropriate y-axis title.
  */
@@ -63,4 +63,4 @@ function _getYAxisLabel( chartData, yAxisLabel ) {
  *
- * @param  {int} value  Data point's value
- * @returns {int}        Data point's value over million or billion.
+ * @param {number} value - Data point's value
+ * @returns {number} Data point's value over million or billion.
  */
@@ -82,180 +82,178 @@ function _getTickValue( value ) {
 
-/**
- * @param {Object} props - Options to pass to highcharts when creating a chart.
- * @returns {Object} A highchart chart.
- */
-function LineChart( props ) {
-  props.data = process.originations( props.data[0], props.metadata );
-  const options = {
-    chart: {
-      marginRight: 0,
-      marginTop: 100,
-      zoomType: 'none'
-    },
-    className: 'cfpb-chart_line',
-    description: props.description,
-    credits: false,
-    rangeSelector: {
-      selected: 'all',
-      height: 35,
-      inputEnabled: false,
-      buttonPosition: {
-        x: 0,
-        y: 0
+class LineChart {
+  constructor( { el, description, data, metadata, yAxisLabel } ) {
+    data = process.originations( data[0], metadata );
+
+    const options = {
+      chart: {
+        marginRight: 0,
+        marginTop: 100,
+        zoomType: 'none'
       },
-      buttonTheme: {
-        // border radius.
-        r: 5,
-        width: 70
+      className: 'cfpb-chart_line',
+      description: description,
+      credits: false,
+      rangeSelector: {
+        selected: 'all',
+        height: 35,
+        inputEnabled: false,
+        buttonPosition: {
+          x: 0,
+          y: 0
+        },
+        buttonTheme: {
+          // border radius.
+          r: 5,
+          width: 70
+        },
+        buttons: [ {
+          type: 'year',
+          count: 1,
+          text: '1y'
+        },
+        {
+          type: 'year',
+          count: 3,
+          text: '3y'
+        },
+        {
+          type: 'year',
+          count: 5,
+          text: '5y'
+        },
+        {
+          type: 'all',
+          text: 'All'
+        }
+        ]
       },
-      buttons: [ {
-        type: 'year',
-        count: 1,
-        text: '1y'
+      legend: {
+        enabled: true,
+        floating: true,
+        layout: 'vertical',
+        verticalAlign: 'top',
+        useHTML: true
       },
-      {
-        type: 'year',
-        count: 3,
-        text: '3y'
+      plotOptions: {
+        series: {
+          states: {
+            hover: {
+              enabled: false
+            }
+          }
+        }
       },
-      {
-        type: 'year',
-        count: 5,
-        text: '5y'
+      navigator: {
+        maskFill: 'rgba(0, 0, 0, 0.05)',
+        series: {
+          lineWidth: 2
+        }
       },
-      {
-        type: 'all',
-        text: 'All'
-      }
-      ]
-    },
-    legend: {
-      enabled: true,
-      floating: true,
-      layout: 'vertical',
-      verticalAlign: 'top',
-      useHTML: true
-    },
-    plotOptions: {
-      series: {
-        states: {
-          hover: {
-            enabled: false
+      xAxis: {
+        startOnTick: true,
+        tickLength: 5,
+        type: 'datetime',
+        dateTimeLabelFormats: {
+          month: '%b<br/>%Y',
+          year: '%b<br/>%Y'
+        },
+        plotLines: [ {
+          value: data.projectedDate.timestamp,
+          label: {
+            text: 'Values after ' + data.projectedDate.label + ' are projected',
+            rotation: 0,
+            useHTML: true
           }
-        }
-      }
-    },
-    navigator: {
-      maskFill: 'rgba(0, 0, 0, 0.05)',
-      series: {
-        lineWidth: 2
-      }
-    },
-    xAxis: {
-      startOnTick: true,
-      tickLength: 5,
-      type: 'datetime',
-      dateTimeLabelFormats: {
-        month: '%b<br/>%Y',
-        year: '%b<br/>%Y'
+        } ]
       },
-      plotLines: [ {
-        value: props.data.projectedDate.timestamp,
-        label: {
-          text: 'Values after ' + props.data.projectedDate.label + ' are projected',
-          rotation: 0,
-          useHTML: true
+      yAxis: {
+        showLastLabel: true,
+        opposite: false,
+        className: 'axis-label',
+        title: {
+          text: _getYAxisLabel( data.adjusted, yAxisLabel ),
+          offset: 0,
+          reserveSpace: false
+        },
+        labels: {
+          formatter: function() {
+            return _getTickValue( this.value );
+          }
         }
-      } ]
-    },
-    yAxis: {
-      showLastLabel: true,
-      opposite: false,
-      className: 'axis-label',
-      title: {
-        text: _getYAxisLabel( props.data.adjusted, props.yAxisLabel ),
-        offset: 0,
-        reserveSpace: false
       },
-      labels: {
+      tooltip: {
+        useHTML: true,
         formatter: function() {
-          return _getTickValue( this.value );
+          let tooltip = Highcharts.dateFormat( '%B %Y', this.x );
+          for ( let i = 0; i < this.points.length; i++ ) {
+            const point = this.points[i];
+            tooltip += "<br><span class='highcharts-color-" +
+                       point.series.colorIndex + "'></span> " +
+                       point.series.name + ': ' + Highcharts.numberFormat( point.y, 0 );
+          }
+          return tooltip;
         }
-      }
-    },
-    tooltip: {
-      useHTML: true,
-      formatter: function() {
-        let tooltip = Highcharts.dateFormat( '%B %Y', this.x );
-        for ( let i = 0; i < this.points.length; i++ ) {
-          const point = this.points[i];
-          tooltip += "<br><span class='highcharts-color-" +
-                     point.series.colorIndex + "'></span> " +
-                     point.series.name + ': ' + Highcharts.numberFormat( point.y, 0 );
-        }
-        return tooltip;
-      }
-    },
-    series: [
-      {
-        name: 'Seasonally adjusted',
-        data: props.data.adjusted,
-        legendIndex: 1,
-        tooltip: {
-          valueDecimals: 0
-        },
-        zoneAxis: 'x',
-        zones: [ {
-          value: props.data.projectedDate.timestamp
-        } ]
       },
-      {
-        name: 'Unadjusted',
-        data: props.data.unadjusted,
-        legendIndex: 2,
-        tooltip: {
-          valueDecimals: 0
+      series: [
+        {
+          name: 'Seasonally adjusted',
+          data: data.adjusted,
+          legendIndex: 1,
+          tooltip: {
+            valueDecimals: 0
+          },
+          zoneAxis: 'x',
+          zones: [ {
+            value: data.projectedDate.timestamp
+          } ]
         },
-        zoneAxis: 'x',
-        zones: [ {
-          value: props.data.projectedDate.timestamp
+        {
+          name: 'Unadjusted',
+          data: data.unadjusted,
+          legendIndex: 2,
+          tooltip: {
+            valueDecimals: 0
+          },
+          zoneAxis: 'x',
+          zones: [ {
+            value: data.projectedDate.timestamp
+          } ]
+        }
+      ],
+      responsive: {
+        rules: [ {
+          condition: {
+            // chart width, not window width.
+            minWidth: 600
+          },
+          // Add more left margin space for vertical label on large screens.
+          chartOptions: {
+            chart: {
+              marginRight: 0,
+              marginTop: 100,
+              marginLeft: 70,
+              zoomType: 'none'
+            }
+          }
         } ]
       }
-    ],
-    responsive: {
-      rules: [ {
-        condition: {
-          // chart width, not window width.
-          minWidth: 600
-        },
-        // Add more left margin space for vertical label on large screens.
-        chartOptions: {
-          chart: {
-            marginRight: 0,
-            marginTop: 100,
-            marginLeft: 70,
-            zoomType: 'none'
-          }
-        }
-      } ]
-    }
-  };
+    };
 
-  return Highcharts.stockChart( props.el, options, function( chart ) {
-    // label(str, x, y, shape, anchorX, anchorY, useHTML, baseline, className)
-    chart.renderer.label(
-      'Select time range',
-      null,
-      null,
-      null,
-      null,
-      null,
-      true,
-      null,
-      'range-selector-label'
-    ).add();
-  } );
-
+    return Highcharts.stockChart( el, options, function( chart ) {
+      // label(str, x, y, shape, anchorX, anchorY, useHTML, baseline, className)
+      chart.renderer.label(
+        'Select time range',
+        null,
+        null,
+        null,
+        null,
+        null,
+        true,
+        null,
+        'range-selector-label'
+      ).add();
+    } );
+  }
 }
 
 module.exports = LineChart;

src/js/charts/LineChartComparison.js

@@ -16,4 +16,4 @@ const getFirstNumber = require( '../utils/calculation' ).getFirstNumber;
  *
- * @param  {array} array  An array of values to check
- * @returns {string}    Appropriate y-axis title
+ * @param {Array} array - An array of values to check
+ * @returns {string} Appropriate y-axis title
  */
@@ -48,4 +48,4 @@ function _getYAxisUnits( array ) {
  *
- * @param  {int} value  Data point's value
- * @returns {int}        Data point's value over million or billion.
+ * @param {number} value - Data point's value
+ * @returns {number} Data point's value over million or billion.
  */
@@ -52,0 +52,0 @@ function _getTickValue( value ) {

src/js/index.js

@@ -30,6 +30,9 @@ require( 'core-js/es6/symbol' );
       case 'line-comparison':
-        this.highchart = new createChart.LineComparison( chartOptions );
+        this.highchart = new createChart.LineChartComparison( chartOptions );
         break;
+      case 'line-index':
+        this.highchart = new createChart.LineChartIndex( chartOptions );
+        break;
       case 'line':
-        this.highchart = createChart.line( chartOptions );
+        this.highchart = new createChart.LineChart( chartOptions );
         break;
@@ -36,0 +39,0 @@ case 'bar':

src/js/utils/process-json.js

@@ -7,4 +7,4 @@ const getTileMapColor = require( './get-tile-map-color' );
  *
- * @param {Number} index - counter starting at 0 representing the month and year for a data point. 0 is January 2000, 1 is February 2000, etc.
- * @returns {Number} UTC timestamp in milliseconds representing the month and year for the given date index.
+ * @param {number} index - counter starting at 0 representing the month and year for a data point. 0 is January 2000, 1 is February 2000, etc.
+ * @returns {number} UTC timestamp in milliseconds representing the month and year for the given date index.
  */
@@ -23,4 +23,4 @@ function formatDate( index ) {
  *
- * @param {(number|string)} date - UTC timestamp in milliseconds representing the month and year for a given data point, e.g. 1477958400000, OR a string in Month + YYYY format for a given data point, e.g. "January 2000"
- * @returns {Obj} object with UTC timestamp in milliseconds and the human-readable version of the month and year for the given date.
+ * @param {number|string} date - UTC timestamp in milliseconds representing the month and year for a given data point, e.g. 1477958400000, OR a string in Month + YYYY format for a given data point, e.g. "January 2000"
+ * @returns {Object} object with UTC timestamp in milliseconds and the human-readable version of the month and year for the given date.
  */
@@ -66,4 +66,4 @@ function convertDate( date ) {
  *
- * @param {Number} datasets - Raw JSON from mortgage-performance API
- * @returns {Obj} datasets - Nested array
+ * @param {number} datasets - Raw JSON from mortgage-performance API
+ * @returns {Object} datasets - Nested array
  */
@@ -91,5 +91,5 @@ function processDelinquencies( datasets ) {
  *
- * @param {Number} data - response from requested JSON file
- * @param {String} group - optional parameter for specifying if the chart requires use of a "group" property in the JSON, for example the charts with a group of "Younger than 30" will filter data to only include values matching that group
- * @returns {Obj} data - object with adjusted and unadjusted value arrays containing timestamps and a number value
+ * @param {number} data - response from requested JSON file
+ * @param {string} group - optional parameter for specifying if the chart requires use of a "group" property in the JSON, for example the charts with a group of "Younger than 30" will filter data to only include values matching that group
+ * @returns {Object} data - object with adjusted and unadjusted value arrays containing timestamps and a number value
  */
@@ -149,5 +149,5 @@ function processNumOriginationsData( data, group ) {
  *
- * @param {Number} data - response from requested JSON file
- * @param {String} group - optional parameter for specifying if the chart requires use of a "group" property in the JSON, for example the charts with a group of "Younger than 30" will filter data to only include values matching that group
- * @returns {Obj} data - object with adjusted and unadjusted value arrays containing timestamps and a number value
+ * @param {number} data - response from requested JSON file
+ * @param {string} group - optional parameter for specifying if the chart requires use of a "group" property in the JSON, for example the charts with a group of "Younger than 30" will filter data to only include values matching that group
+ * @returns {Object} data - object with adjusted and unadjusted value arrays containing timestamps and a number value
  */
@@ -190,3 +190,3 @@ function processYoyData( data, group ) {
  * @param {Array} valuesList - list of values from the data, containing an array with timestamp representing the month and year at index 0, and the value at index 1. Requires at least six months of data (six array items).
- * @returns {Number} a timestamp.
+ * @returns {number} a timestamp.
  */
@@ -203,4 +203,4 @@ function getProjectedTimestamp( valuesList ) {
  *
- * @param {Number} timestamp - UTC timestamp representing the milliseconds elapsed since the UNIX epoch, for the month when each graph begins displaying projected data
- * @returns {String} projectedDate - text with the Month and Year of the projected data cutoff point, for use in labeling projected date in graphs
+ * @param {number} timestamp - UTC timestamp representing the milliseconds elapsed since the UNIX epoch, for the month when each graph begins displaying projected data
+ * @returns {string} projectedDate - text with the Month and Year of the projected data cutoff point, for use in labeling projected date in graphs
  */
@@ -217,3 +217,3 @@ function getProjectedDate( timestamp ) {
 /**
- * @param  {Object} data - Data to process.
+ * @param {Object} data - Data to process.
  * @returns {Object} The processed data.
@@ -220,0 +220,0 @@ */

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2102733

increased by0.14%

Dev dependency count

36

decreased by-10%

Number of package files

94

increased by5.62%

Lines of code

31622

increased by1.89%

Worsened metrics

Number of low supply chain risk alerts

4

increased by33.33%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedcf-layout@5.0.0(transitive)

• + Addedcf-typography@5.0.1(transitive)

• - Removedcf-layout@4.8.0(transitive)

• - Removedcf-typography@4.10.2(transitive)

• Updatedcf-core@4.10.0

• Updatedcf-layout@5.0.0

• Updatedcf-typography@5.0.1