@datarailsshared/dr_renderer 1.2.462 → 1.3.1-27.merge

package/.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  datarails-cicd-orb: datarails/datarails-cicd-orb@dev:primary
+  datarails-cicd-orb: datarails-ns/datarails-cicd-orb@dev:primary
 
 defaults: &defaults
   working_directory: ~/repo
@@ -24,7 +24,7 @@ jobs:
               postfix="-$CIRCLE_BRANCH"
             fi
 
-            VERSION="1.2.$CIRCLE_BUILD_NUM$postfix"
+            VERSION="1.3.$CIRCLE_BUILD_NUM$postfix"
             sed -i s/{{cicd_version}}/$VERSION/g ./package.json
             cat ./package.json
       - run:
@@ -40,8 +40,8 @@ jobs:
           name: Publish package
           command: npm publish . --access=public
       - datarails-cicd-orb/add-ssh-id:
-          private_key_env_var: bitbucket_deploy_private_encoded
-          public_key_env_var: bitbucket_deploy_pub_encoded
+          private_key_env_var: github_deploy_private_encoded
+          public_key_env_var: github_deploy_pub_encoded
           is_public_key_encoded: true
           is_private_key_encoded: true
       - run:
@@ -52,14 +52,20 @@ jobs:
               postfix="-$CIRCLE_BRANCH"
             fi
 
-            VERSION="1.2.$CIRCLE_BUILD_NUM$postfix"
+            VERSION="1.3.$CIRCLE_BUILD_NUM$postfix"
             git config --global user.email noreplay@circleci.com
             git config --global user.name circleci
             git config --global -l
             git tag -a "$CIRCLE_BRANCH/$VERSION" -m "circleci build"
-            ssh -o "StrictHostKeyChecking no" -T git@bitbucket.org
+            # Test SSH connection to GitHub
+            output=$(ssh -o "StrictHostKeyChecking no" -T git@github.com 2>&1 || true)
+            echo "$output"
+            if ! echo "$output" | grep -q "Hi.*You've successfully authenticated"; then
+              echo "Failed to authenticate with GitHub"
+              exit 1
+            fi
+            # Push the tag after successful authentication
             git push --tags origin
-            echo 555
 workflows:
   version: 2
   npm-publish:

package/.github/workflows/build-deploy.yml

@@ -0,0 +1,29 @@
+name: NPM Build and Publish
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - 'master'
+  push:
+    branches:
+      - 'master'
+
+concurrency:
+  group: '${{ github.ref }}-${{ github.workflow }}'
+  cancel-in-progress: true
+
+jobs:
+  npm-workflow:
+    name: Build, Test and Publish
+    uses: datarails/dr_github_reusable/.github/workflows/npm-build-publish.yml@main
+    with:
+      access_level: 'public'
+      branch_postfix: true
+      main_branch: 'master'
+      runner: ${{ vars.GITHUB_RUNNER || 'datarails-dev' }}
+      skip_publish: ${{ github.event_name != 'pull_request' }}
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      SSH_PRIVATE_KEY: ${{ secrets.GITHUB_PRIVATE_KEY }} 
+      

package/CODEOWNERS

@@ -0,0 +1 @@
+* @Datarails/RnD_Team_Dragons 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.462",
+  "version": "1.3.1-27.merge",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/charts/dr_donut_chart.js

@@ -0,0 +1,163 @@
+const helpers = require('./../dr-renderer-helpers');
+
+function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disableAnimation) {
+    const additionOptions = opts.chartOptions
+        ? opts.chartOptions
+        : highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.DONUT_CHART);
+    let totalLabel;
+
+    this.render = function () {
+        return highchartsRenderer.ptCreateElementAndDraw(this.getConfig(), opts);
+    };
+
+    this.getConfig = function () {
+        const config = {
+            chart: this.getChartConfig(),
+            plotOptions: this.getPlotOptionsConfig(),
+            colors: this.getColorSettings(),
+            tooltip: this.getTooltipConfig(),
+            legend: highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true),
+        };
+
+        config.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, config, additionOptions, opts);
+        highchartsRenderer.setTitleAndSubTitle(config, opts, additionOptions);
+        helpers.disableLegendInteractionIfRequired(config, additionOptions);
+        this.setDrilldownConfig(config);
+
+        return config;
+    };
+
+    this.getChartConfig = function () {
+        const chartConfiguration = {
+            type: 'pie',
+            events: {
+                drilldown: function (e) {
+                    if (drilldownFunc) drilldownFunc(e, this, 'drilldown');
+                },
+                drillup: function (e) {
+                    if (drilldownFunc) drilldownFunc(e, this, 'drillup');
+                },
+                render: this.drawTotalLabel,
+            },
+            animation: !disableAnimation,
+        };
+        this.setChartPositioning(chartConfiguration);
+
+        return chartConfiguration;
+    };
+
+    this.getPlotOptionsConfig = function () {
+        const plotOptions = {
+            series: {
+                animation: !disableAnimation,
+                dataLabels: {
+                    allowOverlap: additionOptions && additionOptions.label_pie ? additionOptions.label_pie.overlap : false,
+                    enabled: additionOptions && additionOptions.label_pie ? additionOptions.label_pie.show : false,
+                    formatter: highchartsRenderer.pieDataLabelFormatter(pivotData, opts, true),
+                    style: highchartsRenderer.getDataLabelsStyle(additionOptions),
+                },
+                showInLegend: true,
+                innerSize: '75%',
+                states: {
+                    hover: {
+                        halo: {
+                            size: 0,
+                        },
+                    },
+                },
+            },
+        };
+        plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, plotOptions.series);
+
+        return plotOptions;
+    };
+
+    this.getColorSettings = function () {
+        return additionOptions && additionOptions.chart
+            ? highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset)
+            : undefined;
+    };
+
+    this.getTooltipConfig = function () {
+        return {
+            headerFormat: '',
+            pointFormatter: highchartsRenderer.pieDrillDownFormatterToTooltip(pivotData, opts),
+        };
+    };
+
+    this.drawTotalLabel = function () {
+        const chart = this;
+        const series = chart.series[0];
+
+        const aggTotal = pivotData.getAggregator([], []);
+        const formattedValue =
+            additionOptions && additionOptions.customTotalValueFormatFn
+                ? additionOptions.customTotalValueFormatFn(series.total)
+                : aggTotal.format(series.total, true);
+
+        if (totalLabel) {
+            totalLabel.destroy();
+        }
+
+        totalLabel = chart.renderer
+            .text(
+                `<tspan
+				style="font-size: ${series.center[2] / 12}px; font-weight: 600; fill: #333333;">
+				${formattedValue}
+			 </tspan>
+			 <tspan
+				dy="${series.center[2] / 8}"
+				x="0"
+				style="font-size: ${series.center[2] / 16}px; fill: #6D6E6F;">
+				${(additionOptions.total_value_label && additionOptions.total_value_label.total_value_label_text) || 'Total'}
+			 </tspan>`,
+            )
+            .css({
+                textAnchor: 'middle',
+                dominantBaseline: 'text-before-edge',
+            })
+            .attr('y', '0')
+            .add();
+
+        const rect = totalLabel.element.getBoundingClientRect();
+        const x = series.center[0] + chart.plotLeft;
+        const y = chart.plotTop + series.center[1] - rect.height / 2;
+
+        totalLabel.attr({ x, y });
+    };
+
+    this.setDrilldownConfig = function (chartConfig) {
+        if (drilldownFunc) {
+            chartConfig.drilldown = {};
+        } else if (!pivotData.isDrillDownDisabled) {
+            chartConfig.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                pivotData,
+                chartConfig,
+                additionOptions,
+                opts,
+            );
+        } else {
+            chartConfig.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
+        }
+    };
+
+    this.setChartPositioning = function (chart) {
+        const chartPositioning = additionOptions.chart_position;
+        if (!!chartPositioning) {
+            Object.assign(chart, {
+                margin: [
+                    chartPositioning.margin_top,
+                    chartPositioning.margin_right,
+                    chartPositioning.margin_bottom,
+                    chartPositioning.margin_left,
+                ],
+                spacingTop: chartPositioning.spacing_top,
+                spacingBottom: chartPositioning.spacing_bottom,
+                spacingLeft: chartPositioning.spacing_left,
+                spacingRight: chartPositioning.spacing_right,
+            });
+        }
+    };
+}
+
+module.exports = { DrDonutChart };

package/src/charts/dr_gauge_categories_summary_chart.js

@@ -0,0 +1,323 @@
+const _ = require('lodash');
+const helpers = require("../dr-renderer-helpers");
+const {DrGaugeChart} = require("./dr_gauge_chart");
+
+const GAUGE_CATEGORIES_SUMMARY_OPTIONS_DEFAULT = {
+    gauge: {
+        background: "#fff",
+        startAngle: -90,
+        endAngle: 90,
+        thickness: 17,
+        tickLength: 0,
+        tickWidth: 0,
+        valueOffset: [0, 0, 0, 0],
+        offset: [12, 8, 12, 8],
+        goalIcon: '',
+        goalIconSize: [0, 0],
+        pivot: {
+            radius: 0,
+            color: "#808080",
+        },
+        colors: {
+            meta: "#333",
+            goal: "#4646CE",
+        },
+    },
+    goal: {
+        title: "Goal",
+        value: 1000000,
+    },
+    isAbsoluteValue: false,
+    segments: [
+        {
+            title: 'Completed',
+            count: 0,
+            isCompletionParameter: true,
+            color: '#037C5A',
+        },
+        {
+            title: 'Overdue',
+            count: 0,
+            color: '#BF1D30',
+        },
+        {
+            title: 'Pending',
+            count: 0,
+            color: '#FFA310',
+        },
+        {
+            title: 'Remaining',
+            count: 0,
+            color: '#F0F1F4',
+        }],
+};
+
+function DrGaugeCategoriesSummaryChart(pivotData, opts) {
+    this.completionPercentage = 0;
+
+    this.render = function () {
+        return DrGaugeChart.highchartsRenderer.ptCreateElementAndDraw(this.configChart(), opts);
+    };
+
+    this.createPlotBands = function (options) {
+        const {
+            segments,
+            goal: { value: goalValue },
+            gauge: { thickness },
+        } = options;
+
+        let bands = segments.map((item, index) => {
+            return {
+                from: item.from,
+                to: item.to,
+                color: item.color,
+                thickness: thickness,
+                title: item.title,
+            };
+        });
+
+        if (bands.length === 0) {
+            bands = [
+                {
+                    from: 0,
+                    to: 100,
+                    color: '#F0F1F4',
+                    thickness: thickness,
+                    title: 'None',
+                }
+            ]
+        }
+
+        // clamp last segment
+        bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
+
+        return bands;
+    };
+
+    this.getDefaultValueForChart = function (type, existing_options) {
+        return DrGaugeChart.highchartsRenderer.getDefaultValueForChart(type, existing_options);
+    };
+
+    this.mergeOptions = function (options) {
+        return helpers.mergeDeep(
+            JSON.parse(JSON.stringify(GAUGE_CATEGORIES_SUMMARY_OPTIONS_DEFAULT)),
+            this.getDefaultValueForChart(DrGaugeChart.highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY),
+            options
+        );
+    };
+
+    this.prepareSegments = function (options) {
+        let segmentsSumAggregator = 0;
+        let segmentsOutput = [];
+        for (let i = 0; i < options.segments.length; i++) {
+            let currentSegment = options.segments[i];
+            segmentsOutput.push(
+                {
+                    from: segmentsSumAggregator,
+                    to: segmentsSumAggregator += currentSegment.count,
+                    color: currentSegment.color,
+                    name: currentSegment.title,
+                }
+            );
+        }
+        segmentsOutput = segmentsOutput.filter(
+            (segment) => {
+                return segment.from !== segment.to;
+            }
+        );
+        options.segments = segmentsOutput;
+        options.goal = {
+            title: '',
+            value: segmentsSumAggregator,
+        };
+    }
+
+    this.getCompletionPercentage = function (options) {
+        const countOfCompletedItems = options.segments.find(segment => !!segment.isCompletionParameter)?.count || 0;
+        const totalCount = options.segments.reduce((acc, segment) => acc + segment.count, 0);
+        if (totalCount === 0) {
+            return 0;
+        }
+        return Math.round(countOfCompletedItems / totalCount * 100);
+    }
+
+    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.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.completionPercentage}%
+            </span>
+            <span style="font-weight: 600; font-size: 0.75em; line-height: 1; color: ${
+            options.gauge.colors.meta
+        };">Completed</span>
+        </span>`;
+    };
+
+    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.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(DrGaugeChart.getValueLabelPosition(chart, options)).css({
+            transform: "translateX(-50%) translateY(-100%)",
+        });
+
+        return label;
+    };
+
+
+    this.getPaneDimensions = function (chart, options) {
+        const {renderer} = chart;
+        const {offset} = options.gauge;
+
+        const offsetBottom = options.gauge.valueOffset[0] + options.gauge.valueOffset[2] + offset[2];
+
+        const radiuses = [chart.chartWidth / 2 - Math.max(offset[1], offset[3]), chart.chartHeight - offsetBottom - offset[0]];
+
+        radiuses.push((chart.chartWidth / 2 - offset[1]) / Math.sin(Math.abs(Math.PI / 2)));
+        radiuses.push((chart.chartHeight - offsetBottom - offset[0]) / Math.cos(Math.abs(Math.PI / 2)));
+
+        return {
+            radius: Math.min(...radiuses),
+            center: [chart.chartWidth / 2, chart.chartHeight - offsetBottom],
+        };
+    };
+
+    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;
+        });
+    };
+
+    this.setCustomElements = function (chart, options) {
+        chart.label = this.createValueLabel(chart, options);
+        chart.startBorder = DrGaugeChart.createBorder(chart, options, "start");
+        chart.endBorder = DrGaugeChart.createBorder(chart, options, "end");
+    };
+
+    this.updateCustomElements = function (chart, options) {
+        chart.startBorder.attr(DrGaugeChart.getBorderPosition(chart, options, "start"));
+        chart.endBorder.attr(DrGaugeChart.getBorderPosition(chart, options, "end"));
+        chart.label.attr(DrGaugeChart.getValueLabelPosition(chart, options));
+    };
+
+    this.moveCustomElementsToFront = function (chart) {
+        chart.startBorder.toFront();
+        chart.endBorder.toFront();
+    };
+
+    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);
+                    },
+                    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);
+                    }
+                },
+                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: false
+                },
+                lineWidth: 0,
+                plotBands: this.plotBands,
+            },
+
+            series: [
+                {
+                    name: null,
+                    data: [this.clampValueToPane(this.value)],
+                    dataLabels: [
+                        {
+                            enabled: false,
+                        },
+                    ],
+                    dial: {
+                        radius: "0",
+                        backgroundColor: "rgba(0, 0, 0, 0)",
+                        baseWidth: 2 * this.options.gauge.pivot.radius,
+                        baseLength: "0%",
+                        rearLength: "0%",
+                    },
+                    pivot: {
+                        backgroundColor: "rgba(0, 0, 0, 0)",
+                        radius: this.options.gauge.pivot.radius,
+                    },
+                },
+            ],
+        };
+    };
+
+
+    this.options = this.mergeOptions(opts.chartOptions);
+    this.completionPercentage = this.getCompletionPercentage(this.options);
+    this.prepareSegments(this.options);
+    this.aggregation = pivotData.getAggregator([], []);
+    this.format = this.aggregation.widget_values_format;
+    this.goal = this.options.goal;
+    this.plotBands = this.createPlotBands(this.options);
+    this.ticks = DrGaugeChart.createTicks(this.plotBands, this.options);
+    this.value = DrGaugeChart.getValue(pivotData, opts);
+    this.max = this.ticks[this.ticks.length - 1];
+    this.min = this.ticks[0];
+}
+
+module.exports = {DrGaugeCategoriesSummaryChart, GAUGE_CATEGORIES_SUMMARY_OPTIONS_DEFAULT};