udp-stencil-component-library 1.0.0

package/dist/collection/components/my-component/UI/charts/udp-charts-example.js

@@ -0,0 +1,11 @@
+import { h, Host } from "@stencil/core";
+/**
+ * component used to render examples of all the charts. Mostly used for dev purposes
+ */
+export class UdpChartsExample {
+    render() {
+        return (h(Host, { key: 'c1a4e7e66f96b4c6315e0cb339ec524a10672dad', style: { display: 'flex', flexWrap: 'wrap' } }, h("udp-donut-chart", { key: '19121ccc35efe6c2a4b0c13645422e8d1ea86ff8', size: "small", kpisPosition: 'top' }), h("udp-distribution-chart", { key: 'c02b436e39244188dbe4a5009f78f0552c7ef8b2' }), h("udp-bar-chart", { key: '568b7338c71e0fe1a48667648b5bb8e1874207d2' }), h("udp-line-chart", { key: '0af9eae3f59079c20133371d49052348f0efdc05', size: "large" })));
+    }
+    static get is() { return "udp-charts-example"; }
+}
+//# sourceMappingURL=udp-charts-example.js.map

package/dist/collection/components/my-component/UI/charts/udp-charts-example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-charts-example.js","sourceRoot":"","sources":["../../../../../src/components/my-component/UI/charts/udp-charts-example.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAIH,MAAM,OAAO,gBAAgB;IAC3B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE;YAChD,wEAAiB,IAAI,EAAC,OAAO,EAAC,YAAY,EAAC,KAAK,GAAE;YAClD,gFAA0B;YAC1B,uEAAiB;YACjB,uEAAgB,IAAI,EAAC,OAAO,GAAG,CAC1B,CACR,CAAC;IACN,CAAC;;CACA","sourcesContent":["import { h, Component, Host } from '@stencil/core';\n\n/**\n * component used to render examples of all the charts. Mostly used for dev purposes\n */\n@Component({\n  tag: 'udp-charts-example',\n})\nexport class UdpChartsExample {\n  render() {\n    return (\n      <Host style={{ display: 'flex', flexWrap: 'wrap' }}>\n        <udp-donut-chart size=\"small\" kpisPosition='top'/>\n        <udp-distribution-chart />\n        <udp-bar-chart />\n        <udp-line-chart size=\"large\" />\n      </Host>\n    );\n}\n}"]}

package/dist/collection/components/my-component/UI/charts/udp-distribution-chart/udp-distribution-chart.js

@@ -0,0 +1,513 @@
+import { Build, h } from "@stencil/core";
+import * as am5 from "@amcharts/amcharts5/index";
+import { addAxisLabelsToXYChart } from "../chartUtils";
+import * as am5xy from "@amcharts/amcharts5/xy";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+import { parseValueToNumber } from "../chartUtils";
+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');
+};
+const generateMockData = (n, mean, stdDev) => {
+    const randomNumbers = [];
+    for (let i = 0; i < n / 2; i++) {
+        const u1 = Math.random();
+        const u2 = Math.random();
+        const z0 = Math.sqrt(-2.0 * Math.log(u1)) * Math.cos(2.0 * Math.PI * u2);
+        const z1 = Math.sqrt(-2.0 * Math.log(u1)) * Math.sin(2.0 * Math.PI * u2);
+        randomNumbers.push(mean + z0 * stdDev);
+        randomNumbers.push(mean + z1 * stdDev);
+    }
+    // If n is odd, remove the last element to get exactly n elements
+    if (randomNumbers.length > n) {
+        randomNumbers.pop();
+    }
+    return randomNumbers;
+};
+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;
+}
+export class UdpDistributionChart {
+    constructor() {
+        this.data = Build.isDev ? generateMockData(1000, 100, 10) : undefined;
+        this.title = Build.isDev ? 'Test header' : undefined;
+        this.subheader = Build.isDev ? 'Test SubHeader' : undefined;
+        this.size = 'medium';
+        this.kpis = Build.isDev
+            ? [
+                { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },
+                { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },
+                { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },
+            ]
+            : undefined;
+        this.xLabel = Build.isDev ? 'Test X Label' : undefined;
+        this.yLabel = Build.isDev ? 'Test Y Label' : 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 }));
+    }
+    static get is() { return "udp-distribution-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-distribution-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-distribution-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "attribute": "data",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "Build.isDev ? generateMockData(1000, 100, 10) : undefined"
+            },
+            "valueField": {
+                "type": "string",
+                "attribute": "value-field",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "xAxisLabel": {
+                "type": "string",
+                "attribute": "x-axis-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "title": {
+                "type": "string",
+                "attribute": "title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "Build.isDev ? 'Test header' : undefined"
+            },
+            "subheader": {
+                "type": "string",
+                "attribute": "subheader",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "Build.isDev ? 'Test SubHeader' : undefined"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "kpis": {
+                "type": "unknown",
+                "attribute": "kpis",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ value: string; label: string }[]",
+                    "resolved": "{ value: string; label: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "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"
+            },
+            "xLabel": {
+                "type": "string",
+                "attribute": "x-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "Build.isDev ? 'Test X Label' : undefined"
+            },
+            "yLabel": {
+                "type": "string",
+                "attribute": "y-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "Build.isDev ? 'Test Y Label' : undefined"
+            },
+            "customWidth": {
+                "type": "number",
+                "attribute": "custom-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "customHeight": {
+                "type": "number",
+                "attribute": "custom-height",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "customCardWidth": {
+                "type": "number",
+                "attribute": "custom-card-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "customCardStyle": {
+                "type": "unknown",
+                "attribute": "custom-card-style",
+                "mutable": false,
+                "complexType": {
+                    "original": "{[key: string]: string}",
+                    "resolved": "{ [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "kpisPosition": {
+                "type": "string",
+                "attribute": "kpis-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'top'",
+                    "resolved": "\"left\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "hideAdornment": {
+                "type": "boolean",
+                "attribute": "hide-adornment",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "transformedData": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "valueField",
+                "methodName": "transformData"
+            }, {
+                "propName": "data",
+                "methodName": "transformData"
+            }, {
+                "propName": "xLabel",
+                "methodName": "transformData"
+            }, {
+                "propName": "yLabel",
+                "methodName": "transformData"
+            }, {
+                "propName": "transformedData",
+                "methodName": "renderChart"
+            }];
+    }
+}
+//# sourceMappingURL=udp-distribution-chart.js.map

package/dist/collection/components/my-component/UI/charts/udp-distribution-chart/udp-distribution-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-distribution-chart.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/charts/udp-distribution-chart/udp-distribution-chart.tsx"],"names":[],"mappings":"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","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"]}