@datarailsshared/dr_renderer 1.2.10 → 1.2.11

package/.circleci/config.yml

@@ -20,7 +20,7 @@ jobs:
           name: Prepare publish version
           command: |
             postfix=""
-            if [[ "${CIRCLE_BRANCH}" != prod ]] ; then
+            if [[ "${CIRCLE_BRANCH}" != master ]] ; then
               postfix="-$CIRCLE_BRANCH"
             fi
 
@@ -76,7 +76,7 @@ workflows:
           filters:
             branches:
               only:
-                - /prod.*/
+                - /master/
                 - /tigers/
                 - /bratans/
                 - /dragons/

package/README.md

@@ -13,6 +13,11 @@ This project was generated by amazing Datarails R&D team
     let default_colors = ["#106bd0", "#00cee8", "#95c8d8", "#89cff0", "#FE746D", "#6ADC4C", "#9B9AD9", "#ff8000", "#C11B12", "#5a41f9"];
     let hr = dr_renderer.getInitHighchartsRenderer($, document, default_colors, Highcharts);
 
+## Development
+### Types
+To be able to compile types with `npm run build:types` you need to install typescript globally:
+
+```npm i -g typescript```
 
 ## Publish to npm
 Just merge to prod branch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",
@@ -10,7 +10,8 @@
   ],
   "scripts": {
     "login": "npm login",
-    "test": "jest --coverage"
+    "test": "jest --coverage",
+    "build:types": "tsc --build --verbose"
   },
   "author": "Sergey Spivakov",
   "repository": {

package/src/charts/dr_gauge_chart.js

@@ -0,0 +1,566 @@
+const _ = require('lodash');
+const { DrChartTooltip } = require("../dr_chart_tooltip");
+const helpers = require("../dr-renderer-helpers");
+
+const GAUGE_OPTIONS_DEFAULT = {
+    gauge: {
+        background: "#fff",
+        startAngle: -90,
+        endAngle: 90,
+        thickness: 16,
+        tickLength: 40,
+        tickWidth: 2,
+        valueOffset: [20, 0, 8, 0],
+        offset: [8, 8, 8, 8],
+        goalIcon:
+            "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE2IDE1IiBmaWxsPSJub25lIj4KICAgIDxwYXRoIGQ9Ik04IDBMOS43OTYxMSA1LjUyNzg2SDE1LjYwODVMMTAuOTA2MiA4Ljk0NDI3TDEyLjcwMjMgMTQuNDcyMUw4IDExLjA1NTdMMy4yOTc3MiAxNC40NzIxTDUuMDkzODMgOC45NDQyN0wwLjM5MTU0OCA1LjUyNzg2SDYuMjAzODlMOCAwWiIgZmlsbD0iIzQ2NDZDRSIvPgo8L3N2Zz4=",
+        goalIconSize: [16, 16],
+        pivot: {
+            radius: 5,
+            color: "#808080",
+        },
+        colors: {
+            meta: "#6D6E6F",
+            goal: "#4646CE",
+        },
+    },
+    goal: {
+        title: "Goal",
+        value: 1000000,
+    },
+    isAbsoluteValue: false,
+    segments: [
+        {
+            from: 0,
+            to: 50,
+            title: "Low",
+            color: "#BF1D30",
+        },
+        {
+            from: 51,
+            to: 90,
+            title: "Medium",
+            color: "#FFA310",
+        },
+        {
+            from: 91,
+            to: 100,
+            title: "High",
+            color: "#037C5A",
+        },
+    ],
+};
+
+function DrGaugeChart(pivotData, opts) {
+    this.render = function () {
+        return DrGaugeChart.highchartsRenderer.ptCreateElementAndDraw(this.configChart(), opts);
+    };
+
+    this.formatValue = function (data_type, number_format, value, widget_values_format) {
+        return DrGaugeChart.highchartsRenderer.formatValue(data_type, number_format, value, widget_values_format);
+    };
+
+    this.getDefaultValueForChart = function (type, existing_options) {
+        return DrGaugeChart.highchartsRenderer.getDefaultValueForChart(type, existing_options);
+    };
+
+    this.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions, opts, chartOptions) {
+        return DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries(
+            pivotData,
+            colors,
+            onlyNumbers,
+            isUniqueVals,
+            additionOptions,
+            opts,
+            chartOptions
+        );
+    };
+
+    this.getSingleValueAgg = function (opts, aggfunc, base) {
+        return DrGaugeChart.highchartsRenderer.getSingleValueAgg(opts, aggfunc, base);
+    };
+
+    this.isLeftQuarter = function (value, max = this.max) {
+        return value < max / 2;
+    };
+
+    this.createPlotBands = function (options) {
+        const {
+            segments,
+            isAbsoluteValue,
+            goal: { value: goalValue },
+            gauge: { thickness },
+        } = options;
+
+        const bands = segments.map((item, index) => {
+            const itemFrom = !!index ? item.from - 1 : item.from;
+            return {
+                from: isAbsoluteValue ? itemFrom : (itemFrom * goalValue) / 100,
+                to: isAbsoluteValue ? item.to : (item.to * goalValue) / 100,
+                color: item.color,
+                thickness: thickness,
+                title: item.title,
+            };
+        });
+
+        // clamp last segment
+        bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
+
+        return bands;
+    };
+
+    this.createTicks = function (plotBands, options) {
+        return _.uniq([plotBands[0].from || 0, ...plotBands.map((b) => b.to), options.goal.value]).sort((a, b) => a - b);
+    };
+
+    this.mergeOptions = function (options) {
+        return helpers.mergeDeep(
+            JSON.parse(JSON.stringify(GAUGE_OPTIONS_DEFAULT)),
+            this.getDefaultValueForChart(DrGaugeChart.highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED),
+            options
+        );
+    };
+
+    this.getAngleForValue = function (
+        value,
+        min = this.min,
+        max = this.max,
+        startAngle = this.options.gauge.startAngle,
+        endAngle = this.options.gauge.endAngle
+    ) {
+        const degrees = ((value - min) / (max - min)) * (endAngle - startAngle);
+        const radians = degrees * (Math.PI / 180);
+        return radians;
+    };
+
+    this.formatValue = function (value, format = this.format) {
+        return helpers.isNumber(value) ? DrGaugeChart.highchartsRenderer.formatValue("n", format, value).value : value;
+    };
+
+    this.toPercent = function (value) {
+        return `${Math.round((value * 100) / (this.options.isAbsoluteValue ? this.max : this.goal.value))}%`;
+    };
+
+    this.formatValueLabel = function (value, options) {
+        return `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: ${
+            options.label.font_size
+        }px;">
+            <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: ${options.label.font_color}">
+                ${this.formatValue(value)}
+                ${
+                    options.label.show_percentage_in_value
+                        ? `<span style="font-size: 0.5833em; font-weight: 600; color: ${
+                              options.gauge.colors.meta
+                          };">(${this.toPercent(value)})</span>`
+                        : ""
+                }
+            </span>
+            <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: ${
+                options.gauge.colors.meta
+            };">Current status</span>
+        </span>`;
+    };
+
+    this.formatTickLabel = function (value, options) {
+        const isGoal = value === options.goal.value;
+        const isLeftQuarter = this.isLeftQuarter(value);
+        const formattedValue = this.formatValue(value);
+
+        const goalStyles = isGoal ? `padding-${isLeftQuarter ? "right" : "left"}: 12px;` : "";
+        const goalValue = isGoal
+            ? `<span style="font-size: 1.125em; color: ${options.gauge.colors.goal};">${formattedValue}</span>`
+            : `<span style="color: ${options.label.font_color};">${formattedValue}</span>`;
+        const goalTitle =
+            isGoal && options.label.show_goal_name && options.goal.title
+                ? `<span style="font-size: 0.75em; color: ${options.gauge.colors.goal};">${options.goal.title}</span>`
+                : "";
+        const percentage = options.label.show_percentage_in_segments
+            ? `<span style="font-size: 0.75em; color: ${options.gauge.colors.meta}; font-weight: 400;">(${this.toPercent(
+                  value
+              )})</span>`
+            : "";
+
+        return `<span style="
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-weight: 600;
+            font-size: ${options.label.font_size}px;
+            ${goalStyles}
+        ">
+            ${goalValue}
+            ${goalTitle}
+            ${percentage}
+        </span>`;
+    };
+
+    this.getValue = function (pivotData, opts) {
+        const lineSeries = this.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, {});
+
+        let total = _.flatten(lineSeries
+            .map((s) => s.data.map((v) => v))
+            .filter((v) => !_.isNaN(v))
+        );
+
+        let aggfunc = (a, b) => a + b;
+        let base = 0;
+        let singleValueAgg = this.getSingleValueAgg(
+            {
+                value: {
+                    value: "Sum",
+                },
+            },
+            aggfunc,
+            base
+        );
+
+        aggfunc = singleValueAgg.aggfunc;
+        base = singleValueAgg.base;
+
+        const aggregator = pivotData.getAggregator([], []);
+        const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
+
+        return value;
+    };
+
+    this.getBorderPosition = function (chart, options, position) {
+        const { center, size } = chart.pane[0].options;
+        const {
+            gauge: { tickLength, tickWidth },
+        } = options;
+
+        return {
+            x: position === "start" ? center[0] - size / 2 + tickLength / 2 : center[0] + size / 2 - tickLength / 2,
+            y: center[1] + tickWidth / 2,
+        };
+    };
+
+    this.createBorder = function (chart, options, position) {
+        return chart.renderer
+            .arc(
+                Object.assign(this.getBorderPosition(chart, options, position), {
+                    r: options.gauge.thickness / 2,
+                    innerR: 0,
+                    start: 0,
+                    end: Math.PI,
+                })
+            )
+            .attr({
+                fill:
+                    position === "start"
+                        ? chart.yAxis[0].options.plotBands[0].color
+                        : chart.yAxis[0].options.plotBands.slice(-1)[0].color,
+            })
+            .add()
+            .toFront();
+    };
+
+    this.getGoalIconPosition = function (chart, options) {
+        const { center, size } = chart.pane[0].options;
+        const radius = size / 2;
+        const {
+            gauge: { goalIconSize },
+            goal: { value },
+        } = options;
+
+        return {
+            x: center[0] - radius * Math.sin(Math.PI / 2 - this.getAngleForValue(value)) - goalIconSize[0] / 2,
+            y: center[1] - radius * Math.cos(Math.PI / 2 - this.getAngleForValue(value)) - goalIconSize[1] / 2,
+        };
+    };
+
+    this.createGoalIcon = function (chart, options) {
+        const point = this.getGoalIconPosition(chart, options);
+        return chart.renderer
+            .image(options.gauge.goalIcon, point.x, point.y, options.gauge.goalIconSize[0], options.gauge.goalIconSize[1])
+            .add()
+            .toFront();
+    };
+
+    this.getValueLabelPosition = function (chart, options) {
+        const { center } = chart.pane[0].options;
+        return {
+            x: center[0],
+            y: center[1] + options.gauge.valueOffset[0],
+        };
+    };
+
+    this.createValueLabel = function (chart, options) {
+        const label = chart.renderer.text(this.formatValueLabel(this.value, options), 0, 0, true).add().toFront();
+
+        helpers.removeSVGTextCorrection(label, "yCorr");
+
+        label.attr(this.getValueLabelPosition(chart, options)).css({
+            transform: "translateX(-50%)",
+        });
+
+        return label;
+    };
+
+    this.getPaneDimensions = function (chart, options) {
+        const { renderer } = chart;
+        const valueLabel = this.createValueLabel(chart, this.options);
+        const { offset } = options.gauge;
+        const { height: labelH } = valueLabel.getBBox();
+
+        const offsetBottom = labelH + options.gauge.valueOffset[0] + options.gauge.valueOffset[2] + offset[2];
+        valueLabel.destroy();
+
+        const radiuses = [chart.chartWidth / 2 - Math.max(offset[1], offset[3]), chart.chartHeight - offsetBottom - offset[0]];
+        if (options.label.show) {
+            this.ticks.forEach((tick) => {
+                const label = renderer.label(this.formatTickLabel(tick, options), 0, 0, null, null, null, true).add();
+                const angle = this.getAngleForValue(tick);
+                // depends on label width
+                radiuses.push(
+                    (chart.chartWidth / 2 - label.bBox.width - Math.max(offset[1], offset[3])) /
+                        Math.sin(Math.abs(Math.PI / 2 - angle))
+                );
+                // depends on label height
+                radiuses.push(
+                    (chart.chartHeight - offsetBottom - label.bBox.height / 2 - offset[0]) /
+                        Math.cos(Math.abs(Math.PI / 2 - angle))
+                );
+                label.destroy();
+            });
+        } else {
+            // reserve space for the goal icon
+            const angle = this.getAngleForValue(options.goal.value);
+            const [iconW, iconH] = options.gauge.goalIconSize;
+            radiuses.push((chart.chartWidth / 2 - iconW / 2 - offset[1]) / Math.sin(Math.abs(Math.PI / 2 - angle)));
+            radiuses.push((chart.chartHeight - offsetBottom - iconH / 2 - offset[0]) / Math.cos(Math.abs(Math.PI / 2 - angle)));
+        }
+
+        return {
+            radius: Math.min(...radiuses),
+            center: [chart.chartWidth / 2, chart.chartHeight - offsetBottom],
+        };
+    };
+
+    this.setTicksStyles = function (chart, options) {
+        Object.keys(chart.yAxis[0].ticks).forEach((i) => {
+            const tick = chart.yAxis[0].ticks[i];
+            const isLeftQuarter = this.isLeftQuarter(tick.pos);
+
+            if (tick.pos === options.goal.value) {
+                tick.mark.attr({
+                    stroke: options.gauge.colors.goal,
+                    "stroke-dasharray": 2,
+                    "pointer-events": "none",
+                });
+            }
+
+            if (!tick.label) return;
+
+            // align left querter's labels
+            tick.label.css({
+                transform: `translate(${isLeftQuarter ? "-100%" : 0}, 0)`,
+            });
+        });
+    };
+
+    this.addTooltips = function (chart, options) {
+        if (!options.tooltips.show) {
+            return false;
+        }
+
+        const drTooltip = new DrChartTooltip(chart, {
+            fontSize: options.tooltips.font_size,
+            fontFamily: options.tooltips.font_style,
+            color: options.tooltips.font_color,
+        });
+
+        // segment title tooltip
+        if (options.tooltips.show_segment_name) {
+            chart.yAxis[0].plotLinesAndBands.forEach((band, i) => {
+                drTooltip.add(band.options.title, band.svgElem.element, {
+                    direction: "top",
+                    followPointer: true,
+                });
+            });
+        }
+
+        // value label tooltip
+        if (options.tooltips.show_percentage_in_value && !options.label.show_percentage_in_value) {
+            drTooltip.add(this.toPercent(this.value), chart.label.element, {
+                direction: "top",
+            });
+        }
+
+        // segment name tooltips
+        Object.keys(chart.yAxis[0].ticks).forEach((i) => {
+            const tick = chart.yAxis[0].ticks[i];
+            const isLeftQuarter = this.isLeftQuarter(tick.pos);
+
+            // goal tooltip if lebels are hidden
+            if (tick.pos === options.goal.value && !options.label.show) {
+                drTooltip.add(
+                    `${
+                        options.label.show_goal_name ? options.goal.title || "" : ""
+                    }<span style="font-weight: 600">${this.formatValue(options.goal.value)}</span>`,
+                    chart.goalIcon.element,
+                    {
+                        direction: isLeftQuarter ? "left" : "right",
+                    }
+                );
+            }
+
+            // segment label percentage tooltips
+            if (tick.label && options.tooltips.show_percentage_in_segments && !options.label.show_percentage_in_segments) {
+                drTooltip.add(this.toPercent(tick.pos), tick.label.element, {
+                    direction: isLeftQuarter ? "left" : "right",
+                });
+            }
+        });
+    };
+
+    this.setPane = function (chart, options) {
+        const { radius, center } = this.getPaneDimensions(chart, options);
+        chart.pane[0].options.size = 2 * radius;
+        chart.pane[0].options.center = center;
+        chart.yAxis[0].options.plotBands.forEach((band) => {
+            band.outerRadius = radius - (options.gauge.tickLength - options.gauge.thickness) / 2;
+        });
+        chart.series[0].options.dial.radius = Math.round((100 * (radius - options.gauge.tickLength - 10)) / radius) + "%";
+    };
+
+    this.setCustomElements = function (chart, options) {
+        chart.label = this.createValueLabel(chart, options);
+        chart.startBorder = this.createBorder(chart, options, "start");
+        chart.endBorder = this.createBorder(chart, options, "end");
+        chart.goalIcon = this.createGoalIcon(chart, options);
+    };
+
+    this.updateCustomElements = function (chart, options) {
+        chart.startBorder.attr(this.getBorderPosition(chart, options, "start"));
+        chart.endBorder.attr(this.getBorderPosition(chart, options, "end"));
+        chart.goalIcon.attr(this.getGoalIconPosition(chart, options));
+        chart.label.attr(this.getValueLabelPosition(chart, options));
+    };
+
+    this.moveCustomElementsToFront = function (chart) {
+        chart.startBorder.toFront();
+        chart.endBorder.toFront();
+        chart.goalIcon.toFront();
+    };
+
+    this.clampValueToPane = function (value, max = this.max, min = this.min) {
+        const correction = Math.abs(max - min) * 0.02;
+        return helpers.clamp(min - correction, value, max + correction);
+    };
+
+    this.configChart = function () {
+        return {
+            title: {
+                text: null,
+            },
+            subtitle: null,
+            exporting: {
+                allowHTML: true,
+            },
+            tooltip: {
+                enabled: false,
+            },
+            chart: {
+                type: "gauge",
+                backgroundColor: this.options.gauge.background,
+                plotBackgroundColor: null,
+                plotBackgroundImage: null,
+                plotBorderWidth: 0,
+                plotShadow: false,
+                events: {
+                    render: ({ target: chart }) => {
+                        this.moveCustomElementsToFront(chart);
+                        this.setTicksStyles(chart, this.options);
+                    },
+                    beforeRedraw: ({ target: chart }) => {
+                        this.setPane(chart, this.options);
+                        this.updateCustomElements(chart, this.options);
+                    },
+                    beforeRender: ({ target: chart }) => {
+                        this.setPane(chart, this.options);
+                        this.setCustomElements(chart, this.options);
+                    },
+                    load: ({ target: chart }) => {
+                        this.addTooltips(chart, this.options);
+                    },
+                },
+                margin: [0, 0, 0, 0],
+                spacing: [0, 0, 0, 0],
+            },
+
+            pane: {
+                startAngle: -90,
+                endAngle: 90,
+                background: null,
+                center: [0, 0],
+            },
+
+            // the value axis
+            yAxis: {
+                min: this.min,
+                max: this.max,
+                tickPositions: this.ticks,
+                tickPosition: "inside",
+                tickColor: this.options.gauge.background,
+                tickLength: this.options.gauge.tickLength,
+                tickWidth: this.options.gauge.tickWidth,
+                minorTickInterval: null,
+
+                labels: {
+                    enabled: !!this.options.label.show,
+                    distance: 0,
+                    verticalAlign: "middle",
+                    allowOverlap: true,
+                    align: "left",
+                    style: {
+                        whiteSpace: "nowrap",
+                        width: "auto",
+                    },
+                    formatter: ({ value }) => {
+                        return this.formatTickLabel(value, this.options);
+                    },
+                    useHTML: true,
+                },
+                lineWidth: 0,
+                plotBands: this.plotBands,
+            },
+
+            series: [
+                {
+                    name: null,
+                    data: [this.clampValueToPane(this.value)],
+                    dataLabels: [
+                        {
+                            enabled: false,
+                        },
+                    ],
+                    dial: {
+                        radius: "70%",
+                        backgroundColor: this.options.gauge.pivot.color,
+                        baseWidth: 2 * this.options.gauge.pivot.radius,
+                        baseLength: "0%",
+                        rearLength: "0%",
+                    },
+                    pivot: {
+                        backgroundColor: this.options.gauge.pivot.color,
+                        radius: this.options.gauge.pivot.radius,
+                    },
+                },
+            ],
+        };
+    };
+
+    this.originalOptions = opts;
+    this.options = this.mergeOptions(opts.chartOptions);
+    this.aggregation = pivotData.getAggregator([], []);
+    this.format = this.aggregation.widget_values_format;
+    this.goal = this.options.goal;
+    this.plotBands = this.createPlotBands(this.options);
+    this.ticks = this.createTicks(this.plotBands, this.options);
+    this.value = this.getValue(pivotData, opts);
+    this.max = this.ticks[this.ticks.length - 1];
+    this.min = this.ticks[0];
+}
+
+module.exports = { DrGaugeChart, GAUGE_OPTIONS_DEFAULT };

package/src/dataformatter.d.ts

@@ -0,0 +1,13 @@
+declare interface IFormatValueResult {
+    value: string,
+    align?: 'right' | '',
+    color?: 'Red' | 'Green' | 'White' | 'Blue' | 'Magenta' | 'Yellow' | 'Cyan' | 'Black' | '',
+    pattern: string
+}
+
+declare class DataFormatterImpl {
+    formatValue(type: string, format: string, value: number, overrideFormat?: string): IFormatValueResult
+}
+
+declare const DataFormatter: DataFormatterImpl;
+export = DataFormatter;

package/src/dataformatter.js

@@ -1,3 +1,5 @@
+const _ = require('lodash');
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -350,7 +352,7 @@ var DataFormatterImpl = function () {
 
             n = this.roundDecimals(n, decimals).toString().split('.');
             var integerPart = n[0];
-            var decimalPart = n[1] || 0;
+            var decimalPart = _.padEnd(String(n[1] || 0), decimals, '0');
 
             return this.applyNumberPattern(integerPart, patternIntegerPart) + this.locale.decimalSeparator + this.applyNumberPattern(decimalPart, patternDecimalPart, n[1] && n[1][0] == '0' ? '' : 'right');
         }
@@ -1026,9 +1028,49 @@ var DataFormatterImpl = function () {
 
             return result;
         }
+    }, {
+        key: 'formatValue',
+        value: function formatValue(data_type, number_format, value, override_values_format) {
+            if (!number_format) {
+                number_format = 'General';
+            }
+
+            if (Number.isNaN(value)) {
+                return { value: "#Error" };
+            }
+
+            if (data_type === 'n' && value != null) {
+                if (override_values_format) {
+                    number_format = override_values_format;
+                }
+
+                if (number_format.indexOf('[kilo]') >= 0) {
+                    value = value / 1000;
+                    number_format = number_format.replace('[kilo]', '');
+                } else if (number_format.indexOf('[mega]') >= 0) {
+                    value = value / 1000000;
+                    number_format = number_format.replace('[mega]', '');
+                } else if (number_format.indexOf('[kilomega]') >= 0) {
+                    number_format = number_format.replace('[kilomega]', '');
+                }
+
+                return this.format(value, 'Number', number_format);
+            } else if (data_type === 'd') {
+                number_format = number_format.split(';')[0];
+                let d;
+                if (value instanceof Date || typeof value === 'string') {
+                    d = new Date(value);
+                } else {
+                    d = new Date(value * 1000);
+                }
+                return this.format(d.toString(), 'DateTime', number_format);
+            } else {
+                return value;
+            }
+        }
     }]);
 
     return DataFormatterImpl;
 }();
 
-module.exports = new DataFormatterImpl();
+module.exports = new DataFormatterImpl();