@datarailsshared/dr_renderer 1.2.11 → 1.2.12

package/src/charts/dr_gauge_chart.js

@@ -1,566 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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/dr-renderer-helpers.js

@@ -1,58 +0,0 @@
-function backendSortingKeysAreNotEmpty(keys) {
-    return !!keys && (!!keys.row_keys && !!keys.row_keys.length || !!keys.col_keys && !!keys.col_keys.length);
-}
-
-function capitalize(string) {
-    if (typeof string !== 'string') return '';
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-function clamp(min, v, max) {
-    return Math.min(max, Math.max(v, min));
-}
-
-function isNumber(n) {
-    return !isNaN(parseFloat(n)) && isFinite(n);
-}
-
-function mergeDeep(target, ...sources) {
-    const isObject = (obj) => obj && typeof obj === 'object' && !Array.isArray(obj);
-
-    if (!isObject(target)) return target;
-
-    sources.forEach((source) => {
-        if (!isObject(source)) return;
-
-        Object.keys(source).forEach((key) => {
-            const targetValue = target[key];
-            const sourceValue = source[key];
-
-            if (isObject(targetValue) && isObject(sourceValue)) {
-                target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue);
-            } else {
-                target[key] = sourceValue;
-            }
-        });
-    });
-
-    return target;
-}
-
-function removeSVGTextCorrection(svgEl, corr = 'yCorr') {
-    Object.defineProperty(svgEl, corr, {
-        set: function() {},
-        get: function() {
-            return 0;
-        }
-    });
-    return svgEl;
-}
-
-module.exports = {
-    backendSortingKeysAreNotEmpty,
-    capitalize,
-    clamp,
-    isNumber,
-    mergeDeep,
-    removeSVGTextCorrection,
-}