@datarailsshared/dr_renderer 1.2.234-rocket → 1.2.236

package/.circleci/config.yml

@@ -31,6 +31,12 @@ jobs:
       - run:
           name: Authenticate with registry
           command: echo "//registry.npmjs.org/:_authToken=$npm_TOKEN" > ~/repo/.npmrc
+      - run:
+          name: Install dependencies 
+          command: npm install
+      - run:
+          name: Run npm test
+          command: npm test
       - run:
           name: Publish package
           command: npm publish . --access=public

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+};

package/jest.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+    clearMocks: true,
+    setupFilesAfterEnv: ['regenerator-runtime/runtime'],
+    testPathIgnorePatterns: [
+        "/node_modules/",
+    ],
+    transformIgnorePatterns: [
+        "<rootDir>/node_modules/(?!jquery|lodash|moment/)",
+    ],
+    collectCoverage: true,
+    collectCoverageFrom: [
+        '**/*.js',
+        '!**/*.config.js',
+        '!**/build/**',
+        '!**/coverage/**',
+        '!**/node_modules/**',
+        '!**/vendor/**'
+    ],
+    // coverageThreshold: {
+    //     "global": {
+    //         "branches": 100,
+    //         "functions": 100,
+    //         "lines": 100,
+    //         "statements": 100
+    //     }
+    // },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.234-rocket",
+  "version": "1.2.236",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",
@@ -9,7 +9,8 @@
     "tables"
   ],
   "scripts": {
-    "login": "npm login"
+    "login": "npm login",
+    "test": "jest --coverage"
   },
   "author": "Sergey Spivakov",
   "repository": {
@@ -17,6 +18,21 @@
     "url": "git+https://bitbucket.org/datarails/dr_renderer.git"
   },
   "license": "",
+  "dependencies": {
+    "jquery": "^3.6.0",
+    "lodash": "^4.17.20",
+    "regenerator-runtime": "^0.13.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@testing-library/dom": "^7.2.1",
+    "@testing-library/jest-dom": "^5.5.0",
+    "babel-jest": "^25.5.1",
+    "jest": "^25.3.0",
+    "moment": "^2.29.1",
+    "serve": "^11.3.0"
+  },
   "bugs": {
     "url": ""
   },
@@ -24,5 +40,10 @@
   "whitelistedNonPeerDependencies": [],
   "main": "src/index.js",
   "module": "src/index.js",
-  "sideEffects": false
+  "sideEffects": false,
+  "jest": {
+    "setupFiles": [
+      "./setup-jest.js"
+    ]
+  }
 }

package/src/highcharts_renderer.js

@@ -466,7 +466,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             highchartsRenderer.getOthersName(opts) :
             undefined;
         var drOthersInColumn = lodash.find(
-            pivotData.getColKeys(), 
+            pivotData.getColKeys(),
             keys => keys.length && (lodash.includes(keys, 'DR_Others') || lodash.includes(keys, othersName))
         );
 
@@ -494,7 +494,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (!cols && is_drill_down_pie) {
                     cols = this.point.name;
                 }
-                
+
                 if (drOthersInColumn) {
                     if (!lodash.isArray(cols) && othersName === cols) {
                         cols = ['DR_Others'];
@@ -619,6 +619,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         var func = function () {
             const isWaterfallBreakdown = this.series.options.className === SERIES_CLASSNAMES.WATERFALL_BREAKDOWN;
+            const isTrendSeries = this.series.options.className === SERIES_CLASSNAMES.TREND_SERIES;
 
             var y = parseFloat(this.y);
             if (pivotData) {
@@ -629,7 +630,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
                 if (pivotData.rowAttrs.length == 0
                     || this.series.options.className === 'totalSeries'
-                    || this.series.options.className === 'trendSeries') {
+                    || isTrendSeries) {
                     rows = [];
                 }
                 var cols = this.key;
@@ -664,7 +665,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         series_text += ': '
                     }
 
-                    if (pivotData.rowAttrs.length == 0) {
+                    if (pivotData.rowAttrs.length == 0 && !isTrendSeries) {
                         series_text = ': ';
                     }
 
@@ -672,13 +673,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         const modifiedRowsAndCols = highchartsRenderer.transformRowsAndColsForBreakdown(rows, cols, this.point, opts);
                         rows = modifiedRowsAndCols.rows;
                         cols = modifiedRowsAndCols.cols;
-                    }    
+                    }
 
                     var aggr = pivotData.getAggregator(rows, cols);
 
                     let formatted_value_to_return = $.pivotUtilities.getFormattedNumber(y, null, opts);
                     if (aggr.value() || isWaterfallBreakdown) {
-                        formatted_value_to_return = $.pivotUtilities.getFormattedNumber(isWaterfallBreakdown ? y : aggr.value(), aggr, opts);
+                        formatted_value_to_return = $.pivotUtilities.getFormattedNumber(
+                            isWaterfallBreakdown || isTrendSeries ? y : aggr.value(), aggr, opts
+                        );
                     }
 
                     let wrappedFormattedValue = highchartsRenderer.getSpanWrapper(formatted_value_to_return);
@@ -1034,7 +1037,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             if (row_n_value && row_n_value.length > 0) {
                 ob.name = row_n_value.join(highchartsRenderer.delimer).replace('DR_Others', othersName);
             }
-
             lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
                 var val = agg.value();
@@ -1085,7 +1087,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
                 trendSeries.className = 'trendSeries';
-                trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
+                trendSeries.name = highchartsRenderer.getTrendSeriesName(trendSeries);
                 trendSeries.dashStyle = 'shortdot';
                 trendSeries.type = 'line';
                 trendSeries.data = trendSeries.data.map((el, index) => a + b * (index + 1));
@@ -1251,10 +1253,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             if (opts.trendLine) {
                 const a = ((ySum * squareXSum) - (xSum * xySum)) / ((n * squareXSum) - (xSum * xSum));
                 const b = ((n * xySum) -  (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
-
                 const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
                 trendSeries.className = 'trendSeries';
-                trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
+                trendSeries.name = highchartsRenderer.getTrendSeriesName(trendSeries);
                 trendSeries.dashStyle = 'shortdot';
                 trendSeries.type = 'line';
                 trendSeries.data = trendSeries.data.map((data, index) => ({name: data.name, y: a + b * (index + 1)}));
@@ -1262,7 +1263,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (colors && colors[i]) {
                     trendSeries.color = colors[i];
                 }
-
                 trendSerieses.push(trendSeries);
             }
             i++;
@@ -1279,7 +1279,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         let weights = { line: 2,spline: 3 ,area:-2, areaspline: -1, scatter:4, column: 1 };
-
         if (opts.comboOptions && lodash.includes(chartType,'combo') && !lodash.isEqual(row_n_keys, EMPTY_ROW_N_KEYS)) {
             chart_series.forEach((series, seriesIndex) => {
                 const savedSeriesOption = lodash.find(opts.comboOptions.seriesOptions, {series: series.name});
@@ -1617,7 +1616,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     highchartsRenderer.getDataLabelsStylesForDrillDown = function(additionOptions) {
         let result = highchartsRenderer.getDataLabelsOptions(additionOptions, { dataLabels: {} });
 
-        if (!result.dataLabels) return {}; 
+        if (!result.dataLabels) return {};
         return {
             activeDataLabelStyle: {
                 color: result.dataLabels.color,
@@ -3173,7 +3172,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.ptRenderWaterfallBreakdown = function (pivotData, opts, drilldownFunc, chartType) {
         let chartOptions = {};
-        const additionOptions = opts.chartOptions 
+        const additionOptions = opts.chartOptions
             ? opts.chartOptions
             : highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN);
 
@@ -5101,102 +5100,34 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.addTemplateDataToCalcModel = function (selectedTemplate, calcModelOptions) {
         highchartsRenderer.setWidgetFieldsToTemplate(selectedTemplate);
+
+        const scenarioName = 'scenario';
         const fields = highchartsRenderer.objectCopyJsonMethod(selectedTemplate.fields);
+        const fieldScenarioAlias = _.find(fields, field => (field.alias || '').toLowerCase() === scenarioName)
+        const fieldScenario = _.find(fields, field => (field.name || '').toLowerCase() === scenarioName)
+        const filters = calcModelOptions.config && calcModelOptions.config.filters;
+
+        const filterFields = [];
+        const valueFields = [];
+        const dateFields = [];
+        const dataTypeFields = [];
+        const dataSeriesFields = [];
+
+        let scenarioField = lodash.get(calcModelOptions, 'config.scenario', undefined) || fieldScenarioAlias || fieldScenario;
+        let fieldOb;
 
-        const fillData = (fieldsArr, ignoreFieldsIdToRemove = []) => {
-            const destinationArr = [];
+        const fillData = (fieldsArr, destinationArr) => {
             lodash.forEach(fieldsArr, function (valObj) {
-                const fieldOb = lodash.find(fields, { id: valObj.id });
+                fieldOb = lodash.find(fields, { id: valObj.id });
                 if (fieldOb) {
                     destinationArr.push(fieldOb);
-                    !ignoreFieldsIdToRemove.includes(fieldOb.id) && lodash.remove(fields, { id: fieldOb.id });
+                    lodash.remove(fields, { id: fieldOb.id });
                 }
             });
-
-            return destinationArr;
         }
 
-        const canAssignPredefinedField = (() => {
-            const assignedFields = {};
-
-            return function (predefinedData, type, field, bindValue, oppositeValue) {
-                if (!assignedFields[type]) {
-                    assignedFields[type] = [];
-                }
-
-                const isFieldMatch = predefinedData.regex.test((field[bindValue] || ''));
-
-                const isFieldTypeCorrect = predefinedData.allowedFieldTypes
-                    ? predefinedData.allowedFieldTypes.includes(field.type) : true;
-
-                const isFieldAssigned = assignedFields[type].includes(field[bindValue].toLowerCase())
-                    || assignedFields[type].includes(field[oppositeValue].toLowerCase());
-
-                if (!(isFieldMatch && isFieldTypeCorrect)) return false;
-
-                const loweredFieldValue = field[bindValue].toLowerCase();
-                assignedFields[type].push(loweredFieldValue, loweredFieldValue.replaceAll('_', ' '));
-
-                return !isFieldAssigned;
-            }
-        })();
-
-        const predefinedField = {
-            value: {
-                regex: /posting[_\s]amount/i,
-                allowedFieldTypes: ['Float', 'Integer'],
-                fields: [],
-            },
-            dataType: {
-                regex: /data[_\s]type/i,
-                allowedFieldTypes: ['Text'],
-                fields: [],
-            },
-            date: {
-                regex: /reporting[_\s]month/i,
-                allowedFieldTypes: ['Date'],
-                fields: [],
-            },
-            filters: {
-                isMultipleFields: true,
-                regex: /^(scenario|DR_ACC_L0)$/i,
-                fields: [],
-            },
-            dataSeries: {
-                isMultipleFields: true,
-                regex: /^(scenario|account[_\s]full|entity|intercompany|posting[_\s]currency|reporting[_\s]currency|report[_\s]field|USER_TO_DR_ACC_KEY|USER_TO_DR_KPI_KEY)$/i,
-                fields: [],
-            },
-        };
-
-        if (!lodash.get(calcModelOptions, 'config', false)) {
-            /**
-             * alias stronger than name (order in array is important)
-             * Firstly we try to get predefined field by aliases and then fill in by names
-             * */
-            const fieldsDataQueueConfig = [
-                { value: 'alias', opposite: 'name' },
-                { value: 'name', opposite: 'alias' }
-            ];
-
-            for (const key in predefinedField) {
-                lodash.forEach(fieldsDataQueueConfig, ({value, opposite}) => {
-                    const ignoredFields = predefinedField[key].ignoreAssignedFields;
-                    const result = predefinedField[key].isMultipleFields
-                        ? lodash.filter(fields, field => canAssignPredefinedField(predefinedField[key], key, field, value, opposite, ignoredFields))
-                        : [lodash.find(fields, field => canAssignPredefinedField(predefinedField[key], key, field, value, opposite, ignoredFields))].filter(f => !!f);
-
-                    if (result && result.length) {
-                        predefinedField[key].fields.push(...result);
-                    }
-                });
-            }
-        }
-
-        const filters = lodash.get(calcModelOptions, 'config.filters', predefinedField.filters.fields);
-
         lodash.forEach(filters, function (filterObj) {
-            const fieldOb = lodash.find(fields, { id: filterObj.id });
+            fieldOb = lodash.find(fields, { id: filterObj.id });
             if (!fieldOb) return;
 
             filterObj.values = filterObj.values && lodash.map(filterObj.values, highchartsRenderer.decodeFunc);
@@ -5214,23 +5145,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         });
 
-        const storedGroupByFields = lodash.get(calcModelOptions, 'config.group_by', predefinedField.dataSeries.fields);
-        const storedDateFields = [lodash.get(calcModelOptions, 'config.date_field', predefinedField.date.fields[0])].filter(f => !!f);
-        const storedAggFields = [lodash.get(calcModelOptions, 'config.agg_field', predefinedField.value.fields[0])].filter(f => !!f);
-        const storedDataTypeFields = [lodash.get(calcModelOptions, 'config.data_type_field', predefinedField.dataType.fields[0])].filter(f => !!f);
-        const scenarioField = lodash.get(calcModelOptions, 'config.scenario', lodash.find(predefinedField.filters.fields, filter => [filter.name, filter.alias].includes('scenario')));
-
-        /**
-         * We can have several common fields, so we should ignore deleting during fillData
-         * */
-        const commonFieldsId = [scenarioField.id];
-        const filterFields = fillData(filters, commonFieldsId);
-        const valueFields = fillData(storedAggFields, commonFieldsId);
-        const dateFields = fillData(storedDateFields, commonFieldsId);
-        const dataTypeFields = fillData(storedDataTypeFields, commonFieldsId);
-        const dataSeriesFields = fillData(storedGroupByFields, commonFieldsId);
+        const storedGroupByFields = lodash.get(calcModelOptions, 'config.group_by', []);
+        const storedDateFields = [lodash.get(calcModelOptions, 'config.date_field', undefined)].filter(f => !!f);
+        const storedAggFields = [lodash.get(calcModelOptions, 'config.agg_field', undefined)].filter(f => !!f);
+        const storedDataTypeFields = [lodash.get(calcModelOptions, 'config.data_type_field', undefined)].filter(f => !!f);
 
-        lodash.remove(fields, _field => commonFieldsId.includes(_field.id));
+        fillData(storedGroupByFields, dataSeriesFields);
+        fillData(storedDateFields, dateFields);
+        fillData(storedAggFields, valueFields);
+        fillData(storedDataTypeFields, dataTypeFields);
+        fillData(filters, filterFields);
 
         calcModelOptions.pivot = {
             fieldsArray: fields,
@@ -5738,7 +5662,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return valToReturn;
     };
 
-    
+
     highchartsRenderer.getChartAxisLabel = function(type) {
         return highchartsRenderer.chartsTypesInfo[type] ? highchartsRenderer.chartsTypesInfo[type].axisName : CHART_AXIS_DEFAULT_LABEL;
     };
@@ -6573,7 +6497,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     value_name: 'show',
                     default_value: true,
                     disabled_str: '!{var}.show_out_of_x_axis && !{var}.show_out_of_data_series && !{var}.show_value && !{var}.show_x_axis && !{var}.show_data_series',
-                    disabled_fn: (value) => !value.show_out_of_x_axis 
+                    disabled_fn: (value) => !value.show_out_of_x_axis
                         && !value.show_out_of_data_series
                         && !value.show_value
                         && !value.show_x_axis
@@ -6614,8 +6538,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: '[X Axis]',
                     value_name: 'show_x_axis',
                     default_value: true,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
                 {
@@ -6623,8 +6547,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: '[Data Series]',
                     value_name: 'show_data_series',
                     default_value: true,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
                 {
@@ -6632,8 +6556,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: 'Value',
                     value_name: 'show_value',
                     default_value: true,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
                 {
@@ -6641,8 +6565,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: '% Out of [X Axis]',
                     value_name: 'show_out_of_x_axis',
                     default_value: false,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
                 {
@@ -6650,8 +6574,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: '% Out of [Data Series]',
                     value_name: 'show_out_of_data_series',
                     default_value: false,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
             ]
@@ -6957,7 +6881,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipDescription: 'The category (usually an independent variable) is shown on the x-axis and should be between 2 to 5 total columns. ',
             legendTooltipTitle: 'Drag one field to further configure your x-axis.',
             legendTooltipDescription: 'The breakdown subdivides the chart by a category field for further analysis of what’s contributing to the increase or decrease.',
-        }, 
+        },
         'combo-chart': {
             name: 'Combo Chart ',
             label: 'Combo Chart ',
@@ -7769,7 +7693,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     _.forEach(Object.keys(dates), key => {
                         const dateConfiguration = dates[key];
                         const timestamp = dateConfiguration.timestamp;
-                        if (timestamp) {               
+                        if (timestamp) {
                             const dateTzOffsetInSeconds = new Date(timestamp * 1000).getTimezoneOffset() * 60;
                             dateConfiguration.displayedValue = new Date((timestamp + dateTzOffsetInSeconds) * 1000)
                                 .toLocaleDateString();
@@ -8068,7 +7992,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (!(format && highchartsRenderer.isDateFormat(dateString, format) || highchartsRenderer.isDate(dateString))) {
             return null;
         }
-        const utcDate = format 
+        const utcDate = format
             ? moment_lib.utc(dateString, format, true)
             : moment_lib.utc(dateString);
         return utcDate.startOf('day').unix();
@@ -8086,7 +8010,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         let filters = [];
-        
+
         if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
             const colFilter = highchartsRenderer.createFilterObject(widget.cols[0]);
             const labels = [];
@@ -8114,7 +8038,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             col_value,
                             highchartsRenderer.getDateFieldFormat(widget, widget.cols[index])
                         );
-    
+
                         if ($.isEmptyObject(datetrange)) {
                             return;
                         }
@@ -8785,7 +8709,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.getDateFieldFormat = function(widget, dateField) {
-        const aggregationConfig = widget.options && widget.options.date_aggregation_configs 
+        const aggregationConfig = widget.options && widget.options.date_aggregation_configs
             ? _.find(widget.options.date_aggregation_configs, { field_id: dateField.id })
             : null;
 
@@ -8835,6 +8759,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     }
 
+    highchartsRenderer.getTrendSeriesName = function(series) {
+        return series.name ? 'Trend Line (' + series.name + ')' : 'Trend Line';
+    }
+
     return highchartsRenderer;
 };
 

package/tests/highcharts_renderer.test.js

@@ -0,0 +1,48 @@
+import * as $ from 'jquery';
+import * as lodash from 'lodash';
+import * as moment from 'moment';
+import initPivotTable from "../src/pivottable";
+import initDRPivotTable from "../src/dr_pivottable";
+
+const getHighchartsRenderer = require('../src/highcharts_renderer');
+const DataFormatter = require('../src/dataformatter');
+const DEFAULT_USER_COLORS = {
+    colors: ['#008aff', '#91e7e7', '#f37789', '#ffdc65', '#0e569d', '#bbe0ff', '#57b2ff', '#5ecfb9', '#c7ffda', '#179ab9'],
+    variance_color: null
+};
+
+let highchartsRenderer = {};
+let _window = window;
+let _document = document;
+
+describe('highcharts_renderer', () => {
+    beforeAll(() => {
+        const Highcharts = {
+            opt: {},
+            setOptions: function(value) {Highcharts.opt = value;},
+            numberFormat: function(value) { return value ;},
+            getOptions: function() { return Highcharts.opt; }
+        };
+        _window.DataFormatter = DataFormatter;
+        initPivotTable($, _window, _document);
+        initDRPivotTable($, _window, _document);
+
+        highchartsRenderer = getHighchartsRenderer($, _document, Highcharts, DEFAULT_USER_COLORS, highchartsRenderer,
+            DataFormatter, lodash, moment, true)
+    })
+
+    describe('function isSystemField', () => {
+        it('system name', () => {
+            const field = {
+                name: 'Doc_ID'
+            };
+            expect(highchartsRenderer.isSystemField(field)).toBe(true)
+        });
+        it('not system name', () => {
+            const field = {
+                name: 'field name'
+            };
+            expect(highchartsRenderer.isSystemField(field)).toBe(false)
+        });
+    });
+});