udp-stencil-component-library 1.0.0

package/dist/components/p-DLWUrvpt.js

@@ -0,0 +1,284 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import * as am5 from '@amcharts/amcharts5/index';
+import * as am5xy from '@amcharts/amcharts5/xy';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
+import { a as addAxisLabelsToXYChart } from './p-Dh0ptk6J.js';
+import { d as defineCustomElement$8 } from './p-BEwTqpWE.js';
+import { d as defineCustomElement$7 } from './p-TrvRIo8e.js';
+import { d as defineCustomElement$6 } from './p-hRee3qYx.js';
+import { d as defineCustomElement$5 } from './p-BGjVmQGN.js';
+import { d as defineCustomElement$4 } from './p-DeS7YSzc.js';
+import { d as defineCustomElement$3 } from './p-ZeWoGdjP.js';
+import { d as defineCustomElement$2 } from './p-C-wDzVCk.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const udpBarChartCss = "";
+
+const UdpBarChart = /*@__PURE__*/ proxyCustomElement(class UdpBarChart extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.data = undefined;
+        this.valueField = undefined;
+        this.labelField = undefined;
+        this.title = undefined;
+        this.subheader = undefined;
+        this.size = 'medium';
+        this.customCardStyle = {};
+        this.kpisPosition = 'left';
+        this.kpis = undefined;
+        this.xLabel = undefined;
+        this.yLabel = undefined;
+        this.hideAdornment = false;
+        this.valueFields = undefined;
+        this.stacked = false;
+        this.showBullets = false;
+        this.barWidth = undefined;
+        this.chartId = 'udp-bar-chart';
+    }
+    makeSeries(chart, xAxis, yAxis, serieName, fieldName, root, singleSerie) {
+        var series = chart.series.push(am5xy.ColumnSeries.new(root, {
+            name: serieName,
+            stacked: this.stacked,
+            xAxis: xAxis,
+            yAxis: yAxis,
+            valueYField: fieldName,
+            categoryXField: this.labelField,
+        }));
+        series.columns.template.setAll({
+            tooltipText: singleSerie ? '{valueY}' : '{name}: {valueY}',
+            width: this.barWidth ? am5.percent(this.barWidth) : null,
+            tooltipY: 0,
+            strokeOpacity: 0,
+        });
+        if (singleSerie) {
+            series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
+            series.columns.template.adapters.add('fill', function (_, target) {
+                return chart.get('colors').getIndex(series.columns.indexOf(target));
+            });
+            series.columns.template.adapters.add('stroke', function (_, target) {
+                return chart.get('colors').getIndex(series.columns.indexOf(target));
+            });
+        }
+        series.data.setAll(this.data);
+        if (this.showBullets) {
+            series.bullets.push(function () {
+                var _a;
+                return am5.Bullet.new(root, {
+                    locationY: 0.5,
+                    sprite: am5.Label.new(root, {
+                        text: '{valueY}',
+                        fill: (_a = root === null || root === void 0 ? void 0 : root.interfaceColors) === null || _a === void 0 ? void 0 : _a.get('alternativeText'),
+                        centerY: am5.p50,
+                        centerX: am5.p50,
+                        populateText: true,
+                    }),
+                });
+            });
+        }
+        series.appear();
+    }
+    async renderChart() {
+        var _a, _b, _c, _d;
+        if (!this.valueField && (!this.valueFields || ((_a = this.valueFields) === null || _a === void 0 ? void 0 : _a.length) == 0))
+            return;
+        // sometimes the element cannot be found right away so loop umtil it loads
+        if (((_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot) == null || this.el.shadowRoot.getElementById(this.chartId) == null) {
+            await setTimeout(this.renderChart, 50);
+        }
+        if (this.chartRoot) {
+            this.chartRoot.dispose();
+        }
+        this.chartRoot = am5.Root.new(this.el.shadowRoot.getElementById(this.chartId));
+        this.chartRoot.setThemes([am5themes_Animated.new(this.chartRoot)]);
+        // Create chart
+        // https://www.amcharts.com/docs/v5/charts/xy-chart/
+        var chart = this.chartRoot.container.children.push(am5xy.XYChart.new(this.chartRoot, {
+            panX: true,
+            panY: true,
+            wheelX: 'panX',
+            wheelY: 'zoomX',
+            pinchZoomX: true,
+            paddingLeft: 0,
+            paddingRight: 1,
+            layout: this.chartRoot.verticalLayout,
+        }));
+        // Add cursor
+        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+        var cursor = chart.set('cursor', am5xy.XYCursor.new(this.chartRoot, {}));
+        cursor.lineY.set('visible', false);
+        // Create axes
+        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+        var xRenderer = am5xy.AxisRendererX.new(this.chartRoot, {
+            minGridDistance: 30,
+            minorGridEnabled: true,
+            cellStartLocation: 0.1,
+            cellEndLocation: 0.9,
+        });
+        if (!this.valueFields || ((_c = this.valueFields) === null || _c === void 0 ? void 0 : _c.length) == 0) {
+            xRenderer.labels.template.setAll({
+                rotation: -90,
+                centerY: am5.p50,
+                centerX: am5.p100,
+                paddingRight: 15,
+            });
+        }
+        xRenderer.grid.template.setAll({
+            location: 1,
+        });
+        var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(this.chartRoot, {
+            maxDeviation: 0.3,
+            categoryField: this.labelField,
+            renderer: xRenderer,
+            tooltip: am5.Tooltip.new(this.chartRoot, {}),
+        }));
+        xAxis.data.setAll(this.data);
+        var yRenderer = am5xy.AxisRendererY.new(this.chartRoot, {
+            strokeOpacity: 0.1,
+        });
+        xAxis.get('renderer').labels.template.setAll({
+            maxHeight: 75,
+            oversizedBehavior: 'truncate', // or "wrap" if you want to wrap the text instead
+            textAlign: 'center',
+            ellipsis: '...',
+        });
+        var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(this.chartRoot, {
+            maxDeviation: 0.3,
+            renderer: yRenderer,
+        }));
+        addAxisLabelsToXYChart(this.chartRoot, chart, this.xLabel, this.yLabel);
+        // Create series
+        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+        if (((_d = this.valueFields) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+            var legend = chart.children.push(am5.Legend.new(this.chartRoot, {
+                centerX: am5.percent(50),
+                x: am5.percent(50),
+                marginTop: 15,
+                marginBottom: 15,
+            }));
+            this.valueFields.forEach((field) => {
+                this.makeSeries(chart, xAxis, yAxis, field.fieldLabel, field.fieldName, this.chartRoot, false);
+            });
+            legend.data.setAll(chart.series.values);
+        }
+        else {
+            this.makeSeries(chart, xAxis, yAxis, 'Series 1', this.valueField, this.chartRoot, true);
+        }
+        // Make stuff animate on load
+        // https://www.amcharts.com/docs/v5/concepts/animations/
+        chart.appear(1000, 100);
+    }
+    disconnectedCallback() {
+        // Clean up chart instance on component removal
+        if (this.chartRoot) {
+            this.chartRoot.dispose();
+        }
+    }
+    componentDidLoad() {
+        this.renderChart();
+    }
+    render() {
+        return (h("chart-container", { key: '7c30ec34b3e24393c851075e241089645a0482f4', adjustChartWidthForKpis: true, chartId: this.chartId, title: this.title, subheader: this.subheader, size: this.size, customWidth: this.customWidth, customHeight: this.customHeight, customCardWidth: this.customCardWidth, customCardStyle: this.customCardStyle, kpisPosition: this.kpisPosition, kpis: this.kpis, hideAdornment: this.hideAdornment }));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "valueField": ["renderChart"],
+        "labelField": ["renderChart"],
+        "data": ["renderChart"],
+        "xLabel": ["renderChart"],
+        "yLabel": ["renderChart"],
+        "valueFields": ["renderChart"],
+        "stacked": ["renderChart"],
+        "showBullets": ["renderChart"]
+    }; }
+    static get style() { return udpBarChartCss; }
+}, [1, "udp-bar-chart", {
+        "data": [16],
+        "valueField": [1, "value-field"],
+        "labelField": [1, "label-field"],
+        "title": [1],
+        "subheader": [1],
+        "size": [1],
+        "customWidth": [2, "custom-width"],
+        "customHeight": [2, "custom-height"],
+        "customCardWidth": [2, "custom-card-width"],
+        "customCardStyle": [16, "custom-card-style"],
+        "kpisPosition": [1, "kpis-position"],
+        "kpis": [16],
+        "xLabel": [1, "x-label"],
+        "yLabel": [1, "y-label"],
+        "hideAdornment": [4, "hide-adornment"],
+        "valueFields": [16, "value-fields"],
+        "stacked": [4],
+        "showBullets": [4, "show-bullets"],
+        "barWidth": [2, "bar-width"],
+        "makeSeries": [64]
+    }, undefined, {
+        "valueField": ["renderChart"],
+        "labelField": ["renderChart"],
+        "data": ["renderChart"],
+        "xLabel": ["renderChart"],
+        "yLabel": ["renderChart"],
+        "valueFields": ["renderChart"],
+        "stacked": ["renderChart"],
+        "showBullets": ["renderChart"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-bar-chart", "chart-container", "chart-kpi", "stencil-icon-button", "udp-adornment", "udp-ambient-card", "udp-ambient-tool-tip", "udp-badge", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-bar-chart":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpBarChart);
+            }
+            break;
+        case "chart-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "chart-kpi":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "stencil-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "udp-adornment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "udp-ambient-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "udp-ambient-tool-tip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "udp-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { UdpBarChart as U, defineCustomElement as d };
+//# sourceMappingURL=p-DLWUrvpt.js.map
+
+//# sourceMappingURL=p-DLWUrvpt.js.map

package/dist/components/p-DLWUrvpt.js.map

@@ -0,0 +1 @@
+{"file":"p-DLWUrvpt.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/charts/udp-bar-chart/udp-bar-chart.css?tag=udp-bar-chart&encapsulation=shadow","src/components/my-component/UI/charts/udp-bar-chart/udp-bar-chart.tsx"],"sourcesContent":["","import { h, Component, Prop, Element, Watch, Build, Method } from '@stencil/core';\n\nimport * as am5 from '@amcharts/amcharts5/index';\nimport * as am5xy from '@amcharts/amcharts5/xy';\nimport am5themes_Animated from '@amcharts/amcharts5/themes/Animated';\nimport { addAxisLabelsToXYChart } from '../chartUtils';\nconst generateMockData = () => {\n  const countries = ['USA', 'China', 'Japan', 'Germany', 'UK', 'France', 'India', 'Spain', 'Netherlands', 'South Korea', 'Canada'];\n  return countries.map(c => ({ country: c, value: Math.random() * 2000 }));\n};\n@Component({\n  tag: 'udp-bar-chart',\n  styleUrl: 'udp-bar-chart.css',\n  shadow: true,\n})\nexport class UdpBarChart {\n  @Element() el: HTMLElement;\n\n  @Prop() data: { [key: string]: any }[] = Build.isDev ? generateMockData() : undefined;\n  @Prop() valueField: string = Build.isDev ? 'value' : undefined;\n  @Prop() labelField: string = Build.isDev ? 'country' : undefined;\n  @Prop() title: string = Build.isDev ? 'Test Header' : undefined;\n  @Prop() subheader: string = Build.isDev ? 'Test subheader' : undefined;\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop() customWidth?: number; // Rather then setting a size you can set a custom width\n  @Prop() customHeight?: number; // Rather then setting a size you can set a custom height\n  @Prop() customCardWidth?: number; // Rather then setting a size you can set a custom card width\n  @Prop() customCardStyle?: { [key: string]: string } = {};\n  @Prop() kpisPosition: 'left' | 'top' = 'left';\n  @Prop() kpis: { value: string; label: string }[] = Build.isDev\n    ? [\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n      ]\n    : undefined;\n  @Prop() xLabel: string = Build.isDev ? 'Test X Label' : undefined;\n  @Prop() yLabel: string = Build.isDev ? 'Test Y Label' : undefined;\n  @Prop() hideAdornment: boolean = false;\n  @Prop() valueFields: {fieldName: string, fieldLabel: string}[] = undefined;\n  @Prop() stacked: boolean = false;\n  @Prop() showBullets: boolean = false;\n  @Prop() barWidth: number = undefined;\n\n  private chartId = 'udp-bar-chart';\n  private chartRoot: am5.Root;\n\n  @Method()\n  makeSeries(chart, xAxis, yAxis, serieName, fieldName, root, singleSerie) {\n    var series = chart.series.push(\n      am5xy.ColumnSeries.new(root, {\n        name: serieName,\n        stacked: this.stacked,\n        xAxis: xAxis,\n        yAxis: yAxis,\n        valueYField: fieldName,\n        categoryXField: this.labelField,\n      }),\n    );\n\n    series.columns.template.setAll({\n      tooltipText: singleSerie ? '{valueY}' : '{name}: {valueY}',\n      width: this.barWidth ? am5.percent(this.barWidth) : null,\n      tooltipY: 0,\n      strokeOpacity: 0,\n    });\n\n    if (singleSerie) {\n      series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });\n      series.columns.template.adapters.add('fill', function (_, target) {\n        return chart.get('colors').getIndex(series.columns.indexOf(target));\n      });\n\n      series.columns.template.adapters.add('stroke', function (_, target) {\n        return chart.get('colors').getIndex(series.columns.indexOf(target));\n      });\n    }\n\n    series.data.setAll(this.data);\n\n    if (this.showBullets) {\n      series.bullets.push(function () {\n        return am5.Bullet.new(root, {\n          locationY: 0.5,\n          sprite: am5.Label.new(root, {\n            text: '{valueY}',\n            fill: root?.interfaceColors?.get('alternativeText'),\n            centerY: am5.p50,\n            centerX: am5.p50,\n            populateText: true,\n          }),\n        });\n      });\n    }\n\n    series.appear();\n  }\n\n  @Watch('valueField')\n  @Watch('labelField')\n  @Watch('data')\n  @Watch('xLabel')\n  @Watch('yLabel')\n  @Watch('valueFields')\n  @Watch('stacked')\n  @Watch('showBullets')\n  async renderChart() {\n    if (!this.valueField && (!this.valueFields || this.valueFields?.length == 0)) return;\n    // sometimes the element cannot be found right away so loop umtil it loads\n    if (this.el?.shadowRoot == null || this.el.shadowRoot.getElementById(this.chartId) == null) {\n      await setTimeout(this.renderChart, 50);\n    }\n    if (this.chartRoot) {\n      this.chartRoot.dispose();\n    }\n    this.chartRoot = am5.Root.new(this.el.shadowRoot.getElementById(this.chartId));\n\n    this.chartRoot.setThemes([am5themes_Animated.new(this.chartRoot)]);\n\n    // Create chart\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/\n    var chart = this.chartRoot.container.children.push(\n      am5xy.XYChart.new(this.chartRoot, {\n        panX: true,\n        panY: true,\n        wheelX: 'panX',\n        wheelY: 'zoomX',\n        pinchZoomX: true,\n        paddingLeft: 0,\n        paddingRight: 1,\n        layout: this.chartRoot.verticalLayout,\n      }),\n    );\n\n    // Add cursor\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/\n    var cursor = chart.set('cursor', am5xy.XYCursor.new(this.chartRoot, {}));\n    cursor.lineY.set('visible', false);\n\n    // Create axes\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/\n    var xRenderer = am5xy.AxisRendererX.new(this.chartRoot, {\n      minGridDistance: 30,\n      minorGridEnabled: true,\n      cellStartLocation: 0.1,\n      cellEndLocation: 0.9,\n    });\n\n    if (!this.valueFields || this.valueFields?.length == 0) {\n      xRenderer.labels.template.setAll({\n        rotation: -90,\n        centerY: am5.p50,\n        centerX: am5.p100,\n        paddingRight: 15,\n      });\n    }\n\n    xRenderer.grid.template.setAll({\n      location: 1,\n    });\n\n    var xAxis = chart.xAxes.push(\n      am5xy.CategoryAxis.new(this.chartRoot, {\n        maxDeviation: 0.3,\n        categoryField: this.labelField,\n        renderer: xRenderer,\n        tooltip: am5.Tooltip.new(this.chartRoot, {}),\n      }),\n    );\n    xAxis.data.setAll(this.data);\n\n    var yRenderer = am5xy.AxisRendererY.new(this.chartRoot, {\n      strokeOpacity: 0.1,\n    });\n\n    xAxis.get('renderer').labels.template.setAll({\n      maxHeight: 75,\n      oversizedBehavior: 'truncate', // or \"wrap\" if you want to wrap the text instead\n      textAlign: 'center',\n      ellipsis: '...',\n    });\n\n    var yAxis = chart.yAxes.push(\n      am5xy.ValueAxis.new(this.chartRoot, {\n        maxDeviation: 0.3,\n        renderer: yRenderer,\n      }),\n    );\n\n    addAxisLabelsToXYChart(this.chartRoot, chart, this.xLabel, this.yLabel);\n    // Create series\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/\n    if (this.valueFields?.length > 0) {\n      var legend = chart.children.push(\n        am5.Legend.new(this.chartRoot, {\n          centerX: am5.percent(50),\n          x: am5.percent(50),\n          marginTop: 15,\n          marginBottom: 15,\n        }),\n      );\n      this.valueFields.forEach((field) => {\n        this.makeSeries(chart, xAxis, yAxis, field.fieldLabel, field.fieldName, this.chartRoot, false);\n      });\n      legend.data.setAll(chart.series.values);\n    } else {\n      this.makeSeries(chart, xAxis, yAxis, 'Series 1', this.valueField, this.chartRoot, true);\n    }\n\n    // Make stuff animate on load\n    // https://www.amcharts.com/docs/v5/concepts/animations/\n    chart.appear(1000, 100);\n  }\n\n  disconnectedCallback() {\n    // Clean up chart instance on component removal\n    if (this.chartRoot) {\n      this.chartRoot.dispose();\n    }\n  }\n  componentDidLoad() {\n    this.renderChart();\n  }\n  render() {\n    return (\n      <chart-container\n        adjustChartWidthForKpis\n        chartId={this.chartId}\n        title={this.title}\n        subheader={this.subheader}\n        size={this.size}\n        customWidth={this.customWidth}\n        customHeight={this.customHeight}\n        customCardWidth={this.customCardWidth}\n        customCardStyle={this.customCardStyle}\n        kpisPosition={this.kpisPosition}\n        kpis={this.kpis}\n        hideAdornment={this.hideAdornment}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DNxY-i6k.js

@@ -0,0 +1,261 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import * as am5 from '@amcharts/amcharts5/index';
+import { p as parseValueToNumber, a as addAxisLabelsToXYChart } from './p-Dh0ptk6J.js';
+import * as am5xy from '@amcharts/amcharts5/xy';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
+import { d as defineCustomElement$8 } from './p-BEwTqpWE.js';
+import { d as defineCustomElement$7 } from './p-TrvRIo8e.js';
+import { d as defineCustomElement$6 } from './p-hRee3qYx.js';
+import { d as defineCustomElement$5 } from './p-BGjVmQGN.js';
+import { d as defineCustomElement$4 } from './p-DeS7YSzc.js';
+import { d as defineCustomElement$3 } from './p-ZeWoGdjP.js';
+import { d as defineCustomElement$2 } from './p-C-wDzVCk.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const udpDistributionChartCss = "";
+
+const isNumberList = (obj) => {
+    // Check if obj is an array
+    if (!Array.isArray(obj)) {
+        return false;
+    }
+    // Check if every element in the array is a number
+    return obj.every(element => typeof element === 'number');
+};
+function getHistogramData(source) {
+    const maxCols = 10;
+    // Init
+    let data = [];
+    let min = Math.round(Math.min.apply(null, source));
+    let max = Math.max.apply(null, source);
+    let range = max - min;
+    let step = parseFloat((range / maxCols).toFixed(1));
+    // Create items
+    for (let i = 0; i < maxCols; i++) {
+        let from = min + i * step;
+        let to = min + (i + 1) * step;
+        data.push({
+            from: from,
+            to: to,
+            count: 0,
+        });
+    }
+    // Calculate range of the values
+    for (let i = 0; i < source.length; i++) {
+        let value = source[i];
+        let item = data.find(function (el) {
+            return value >= el.from && value <= el.to;
+        });
+        if (item)
+            item.count++;
+    }
+    return data;
+}
+const UdpDistributionChart = /*@__PURE__*/ proxyCustomElement(class UdpDistributionChart extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.data = undefined;
+        this.title = undefined;
+        this.subheader = undefined;
+        this.size = 'medium';
+        this.kpis = undefined;
+        this.xLabel = undefined;
+        this.yLabel = undefined;
+        this.customCardStyle = {};
+        this.kpisPosition = 'left';
+        this.hideAdornment = false;
+        this.chartId = 'udp-histogram';
+    }
+    transformData() {
+        if (!this.data || this.data.length === 0 || (this.valueField === null && !this.data.every(item => typeof item === 'number')))
+            return;
+        if (!this.data || this.data.length === 0)
+            return;
+        let isolatedData;
+        if (this.valueField)
+            isolatedData = this.data.map(row => parseValueToNumber(row[this.valueField]));
+        else
+            isolatedData = this.data;
+        if (!isNumberList(isolatedData))
+            return;
+        this.transformedData = getHistogramData(isolatedData);
+    }
+    async renderChart() {
+        // sometimes the element cannot be found right away so loop until it loads
+        if (this.el.shadowRoot.getElementById(this.chartId) == null) {
+            await setTimeout(this.renderChart, 50);
+        }
+        if (this.chartRoot) {
+            this.chartRoot.dispose();
+        }
+        this.chartRoot = am5.Root.new(this.el.shadowRoot.getElementById(this.chartId));
+        this.chartRoot.setThemes([am5themes_Animated.new(this.chartRoot)]);
+        // Create chart
+        // https://www.amcharts.com/docs/v5/charts/xy-chart/
+        var chart = this.chartRoot.container.children.push(am5xy.XYChart.new(this.chartRoot, {
+            panX: false,
+            panY: false,
+            wheelX: 'panX',
+            wheelY: 'zoomX',
+            layout: this.chartRoot.verticalLayout,
+        }));
+        // Add legend
+        // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
+        // var legend = chart.children.push(
+        //   am5.Legend.new(this.chartRoot, {
+        //     centerX: am5.p50,
+        //     x: am5.p50
+        //   })
+        // );
+        // Create axes
+        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+        var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(this.chartRoot, {
+            categoryField: 'from',
+            renderer: am5xy.AxisRendererX.new(this.chartRoot, {
+                minGridDistance: 30,
+            }),
+            tooltip: am5.Tooltip.new(this.chartRoot, {}),
+        }));
+        xAxis.data.setAll(this.transformedData);
+        console.log(this.transformedData);
+        var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(this.chartRoot, {
+            maxPrecision: 0,
+            renderer: am5xy.AxisRendererY.new(this.chartRoot, {}),
+        }));
+        addAxisLabelsToXYChart(this.chartRoot, chart, this.xLabel, this.yLabel);
+        // Add series
+        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+        var series = chart.series.push(am5xy.ColumnSeries.new(this.chartRoot, {
+            xAxis: xAxis,
+            yAxis: yAxis,
+            valueYField: 'count',
+            categoryXField: 'from',
+        }));
+        series.columns.template.setAll({
+            tooltipText: `{from}-{to}`,
+            width: am5.percent(90),
+            tooltipY: 0,
+        });
+        series.bullets.push(function (x) {
+            return am5.Bullet.new(x, {
+                locationY: 0.5,
+                sprite: am5.Label.new(x, {
+                    text: '{valueY}',
+                    fill: x.interfaceColors.get('alternativeText'),
+                    centerY: am5.p50,
+                    centerX: am5.p50,
+                    populateText: true,
+                }),
+            });
+        });
+        series.data.setAll(this.transformedData);
+        series.appear();
+        // Make stuff animate on load
+        // https://www.amcharts.com/docs/v5/concepts/animations/
+        chart.appear(1000, 100);
+    }
+    disconnectedCallback() {
+        // Clean up chart instance on component removal
+        if (this.chartRoot) {
+            this.chartRoot.dispose();
+        }
+    }
+    componentDidLoad() {
+        this.transformData();
+    }
+    render() {
+        return (h("chart-container", { key: 'ec2411671163172bca67d785b0705b22d6ffea67', adjustChartWidthForKpis: true, chartId: this.chartId, title: this.title, subheader: this.subheader, size: this.size, kpis: this.kpis, customWidth: this.customWidth, customHeight: this.customHeight, customCardWidth: this.customCardWidth, customCardStyle: this.customCardStyle, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment }));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "valueField": ["transformData"],
+        "data": ["transformData"],
+        "xLabel": ["transformData"],
+        "yLabel": ["transformData"],
+        "transformedData": ["renderChart"]
+    }; }
+    static get style() { return udpDistributionChartCss; }
+}, [1, "udp-distribution-chart", {
+        "data": [16],
+        "valueField": [1, "value-field"],
+        "xAxisLabel": [1, "x-axis-label"],
+        "title": [1],
+        "subheader": [1],
+        "size": [1],
+        "kpis": [16],
+        "xLabel": [1, "x-label"],
+        "yLabel": [1, "y-label"],
+        "customWidth": [2, "custom-width"],
+        "customHeight": [2, "custom-height"],
+        "customCardWidth": [2, "custom-card-width"],
+        "customCardStyle": [16, "custom-card-style"],
+        "kpisPosition": [1, "kpis-position"],
+        "hideAdornment": [4, "hide-adornment"],
+        "transformedData": [32]
+    }, undefined, {
+        "valueField": ["transformData"],
+        "data": ["transformData"],
+        "xLabel": ["transformData"],
+        "yLabel": ["transformData"],
+        "transformedData": ["renderChart"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-distribution-chart", "chart-container", "chart-kpi", "stencil-icon-button", "udp-adornment", "udp-ambient-card", "udp-ambient-tool-tip", "udp-badge", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-distribution-chart":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpDistributionChart);
+            }
+            break;
+        case "chart-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "chart-kpi":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "stencil-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "udp-adornment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "udp-ambient-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "udp-ambient-tool-tip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "udp-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { UdpDistributionChart as U, defineCustomElement as d };
+//# sourceMappingURL=p-DNxY-i6k.js.map
+
+//# sourceMappingURL=p-DNxY-i6k.js.map

package/dist/components/p-DNxY-i6k.js.map

@@ -0,0 +1 @@
+{"file":"p-DNxY-i6k.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/charts/udp-distribution-chart/udp-distribution-chart.css?tag=udp-distribution-chart&encapsulation=shadow","src/components/my-component/UI/charts/udp-distribution-chart/udp-distribution-chart.tsx"],"sourcesContent":["","import { Component, Build, Prop, Element, h, Watch, State } from '@stencil/core';\n\nimport * as am5 from '@amcharts/amcharts5/index';\nimport { addAxisLabelsToXYChart } from '../chartUtils';\nimport * as am5xy from '@amcharts/amcharts5/xy';\nimport am5themes_Animated from '@amcharts/amcharts5/themes/Animated';\nimport { parseValueToNumber } from '../chartUtils';\n\nconst isNumberList = (obj: any): boolean => {\n  // Check if obj is an array\n  if (!Array.isArray(obj)) {\n    return false;\n  }\n\n  // Check if every element in the array is a number\n  return obj.every(element => typeof element === 'number');\n};\n\nconst generateMockData = (n: number, mean: number, stdDev: number): number[] => {\n  const randomNumbers: number[] = [];\n\n  for (let i = 0; i < n / 2; i++) {\n    const u1 = Math.random();\n    const u2 = Math.random();\n    const z0 = Math.sqrt(-2.0 * Math.log(u1)) * Math.cos(2.0 * Math.PI * u2);\n    const z1 = Math.sqrt(-2.0 * Math.log(u1)) * Math.sin(2.0 * Math.PI * u2);\n\n    randomNumbers.push(mean + z0 * stdDev);\n    randomNumbers.push(mean + z1 * stdDev);\n  }\n\n  // If n is odd, remove the last element to get exactly n elements\n  if (randomNumbers.length > n) {\n    randomNumbers.pop();\n  }\n\n  return randomNumbers;\n};\n\nfunction getHistogramData(source: number[]): { from: number; to: number; count: number }[] {\n  const maxCols = 10;\n  // Init\n  let data = [];\n  let min = Math.round(Math.min.apply(null, source));\n  let max = Math.max.apply(null, source);\n  let range = max - min;\n  let step = parseFloat((range / maxCols).toFixed(1));\n\n  // Create items\n  for (let i = 0; i < maxCols; i++) {\n    let from = min + i * step;\n    let to = min + (i + 1) * step;\n    data.push({\n      from: from,\n      to: to,\n      count: 0,\n    });\n  }\n\n  // Calculate range of the values\n  for (let i = 0; i < source.length; i++) {\n    let value = source[i];\n    let item = data.find(function (el) {\n      return value >= el.from && value <= el.to;\n    });\n    if (item) item.count++;\n  }\n  return data;\n}\n\n@Component({\n  tag: 'udp-distribution-chart',\n  styleUrl: 'udp-distribution-chart.css',\n  shadow: true,\n})\nexport class UdpDistributionChart {\n  @Element() el: HTMLElement;\n  @Prop() data: any[] = Build.isDev ? generateMockData(1000, 100, 10) : undefined;\n  @Prop() valueField: string;\n  @Prop() xAxisLabel: string;\n  @Prop() title: string = Build.isDev ? 'Test header' : undefined;\n  @Prop() subheader: string = Build.isDev ? 'Test SubHeader' : undefined;\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop() kpis: { value: string; label: string }[] = Build.isDev\n    ? [\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n      ]\n    : undefined;\n  @Prop() xLabel: string = Build.isDev ? 'Test X Label' : undefined;\n  @Prop() yLabel: string = Build.isDev ? 'Test Y Label' : undefined;\n  @Prop() customWidth?: number; // Rather then setting a size you can set a custom width\n  @Prop() customHeight?: number; // Rather then setting a size you can set a custom height\n  @Prop() customCardWidth?: number; // Rather then setting a size you can set a custom card width\n  @Prop() customCardStyle?: {[key: string]: string} = {};\n  @Prop() kpisPosition: 'left' | 'top' = 'left';\n  @Prop() hideAdornment: boolean = false;\n\n  private chartId = 'udp-histogram';\n  private chartRoot: am5.Root;\n  @State() transformedData: { from: number; to: number; count: number }[];\n\n  @Watch('valueField')\n  @Watch('data')\n  @Watch('xLabel')\n  @Watch('yLabel')\n  transformData() {\n    if (!this.data || this.data.length === 0 || (this.valueField === null && !this.data.every(item => typeof item === 'number'))) return;\n\n    if (!this.data || this.data.length === 0) return;\n    let isolatedData;\n    if (this.valueField) isolatedData = this.data.map(row => parseValueToNumber(row[this.valueField]));\n    else isolatedData = this.data;\n    if (!isNumberList(isolatedData)) return;\n\n    this.transformedData = getHistogramData(isolatedData);\n  }\n\n  @Watch('transformedData')\n  async renderChart() {\n    // sometimes the element cannot be found right away so loop until it loads\n    if (this.el.shadowRoot.getElementById(this.chartId) == null) {\n      await setTimeout(this.renderChart, 50);\n    }\n    if (this.chartRoot) {\n      this.chartRoot.dispose();\n    }\n    this.chartRoot = am5.Root.new(this.el.shadowRoot.getElementById(this.chartId));\n\n    this.chartRoot.setThemes([am5themes_Animated.new(this.chartRoot)]);\n\n    // Create chart\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/\n    var chart = this.chartRoot.container.children.push(\n      am5xy.XYChart.new(this.chartRoot, {\n        panX: false,\n        panY: false,\n        wheelX: 'panX',\n        wheelY: 'zoomX',\n        layout: this.chartRoot.verticalLayout,\n      }),\n    );\n\n    // Add legend\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/\n    // var legend = chart.children.push(\n    //   am5.Legend.new(this.chartRoot, {\n    //     centerX: am5.p50,\n    //     x: am5.p50\n    //   })\n    // );\n\n    // Create axes\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/\n    var xAxis = chart.xAxes.push(\n      am5xy.CategoryAxis.new(this.chartRoot, {\n        categoryField: 'from',\n        renderer: am5xy.AxisRendererX.new(this.chartRoot, {\n          minGridDistance: 30,\n        }),\n        tooltip: am5.Tooltip.new(this.chartRoot, {}),\n      }),\n    );\n\n    xAxis.data.setAll(this.transformedData);\n    console.log(this.transformedData);\n    var yAxis = chart.yAxes.push(\n      am5xy.ValueAxis.new(this.chartRoot, {\n        maxPrecision: 0,\n        renderer: am5xy.AxisRendererY.new(this.chartRoot, {}),\n      }),\n    );\n\n    addAxisLabelsToXYChart(this.chartRoot, chart, this.xLabel, this.yLabel);\n\n    // Add series\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/\n    var series = chart.series.push(\n      am5xy.ColumnSeries.new(this.chartRoot, {\n        xAxis: xAxis,\n        yAxis: yAxis,\n        valueYField: 'count',\n        categoryXField: 'from',\n      }),\n    );\n\n    series.columns.template.setAll({\n      tooltipText: `{from}-{to}`,\n      width: am5.percent(90),\n      tooltipY: 0,\n    });\n\n    series.bullets.push(function (x) {\n      return am5.Bullet.new(x, {\n        locationY: 0.5,\n        sprite: am5.Label.new(x, {\n          text: '{valueY}',\n          fill: x.interfaceColors.get('alternativeText'),\n          centerY: am5.p50,\n          centerX: am5.p50,\n          populateText: true,\n        }),\n      });\n    });\n\n    series.data.setAll(this.transformedData);\n    series.appear();\n\n    // Make stuff animate on load\n    // https://www.amcharts.com/docs/v5/concepts/animations/\n    chart.appear(1000, 100);\n  }\n\n  disconnectedCallback() {\n    // Clean up chart instance on component removal\n    if (this.chartRoot) {\n      this.chartRoot.dispose();\n    }\n  }\n  componentDidLoad() {\n    this.transformData();\n  }\n  render() {\n    return (\n      <chart-container\n        adjustChartWidthForKpis\n        chartId={this.chartId}\n        title={this.title}\n        subheader={this.subheader}\n        size={this.size}\n        kpis={this.kpis}\n        customWidth={this.customWidth}\n        customHeight={this.customHeight}\n        customCardWidth={this.customCardWidth}\n        customCardStyle={this.customCardStyle}\n        kpisPosition={this.kpisPosition}\n        hideAdornment={this.hideAdornment}\n      />\n    );\n  }\n}\n"],"version":3}