udp-stencil-component-library 1.0.0

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

@@ -0,0 +1,454 @@
+import { h, Build } from "@stencil/core";
+import * as am5 from "@amcharts/amcharts5/index";
+import * as am5percent from "@amcharts/amcharts5/percent";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+const generateMockData = (length) => {
+    const countries = [
+        'USA',
+        'China',
+        'Japan',
+        'Germany',
+        'UK',
+        'Frandce',
+        'India',
+        'Spain',
+        'Netherlands',
+        'South Korea',
+        'Guatemala',
+        'Peru',
+        'Brazil',
+        'Honduras',
+        'Hungary',
+        'Romania',
+        'North Korea',
+        'Indonesia',
+        'Australia',
+        'Ukraine',
+    ];
+    return countries.map(c => ({ label: c, value: Math.random() * 2000 })).slice(0, length);
+};
+export class UdpDonutChart {
+    constructor() {
+        this.data = Build.isDev ? generateMockData(10) : undefined;
+        this.valueField = Build.isDev ? 'value' : '';
+        this.labelField = Build.isDev ? 'label' : '';
+        this.title = Build.isDev ? 'Test header' : undefined;
+        this.subheader = Build.isDev ? 'Test SubHeader' : undefined;
+        this.hideLegend = false;
+        this.size = 'medium';
+        this.customCardStyle = {};
+        this.kpisPosition = 'left';
+        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.hideAdornment = false;
+        this.chartId = 'udp-donut-chart';
+    }
+    async renderChart() {
+        // sometimes the element cannot be found right away so loop umtil it loads
+        if (this.el.shadowRoot.getElementById(this.chartId) === null) {
+            await setTimeout(this.renderChart, 50);
+        }
+        if (this.chartRoot) {
+            this.chartRoot.dispose();
+        }
+        if (!this.valueField)
+            return;
+        this.chartRoot = am5.Root.new(this.el.shadowRoot.getElementById(this.chartId));
+        // Set themes
+        // https://www.amcharts.com/docs/v5/concepts/themes/
+        this.chartRoot.setThemes([am5themes_Animated.new(this.chartRoot)]);
+        // Create chart
+        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+        let chart = this.chartRoot.container.children.push(am5percent.PieChart.new(this.chartRoot, {
+            layout: this.chartRoot.verticalLayout,
+            innerRadius: am5.percent(65),
+        }));
+        // Create series
+        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
+        let series = chart.series.push(am5percent.PieSeries.new(this.chartRoot, {
+            valueField: Build.isDev ? 'value' : this.valueField,
+            categoryField: Build.isDev ? 'label' : this.labelField,
+            alignLabels: false,
+        }));
+        series.labels.template.setAll({
+            textType: 'circular',
+            centerX: 0,
+            centerY: 0,
+            text: `{${this.valueField}}`,
+            tooltipText: `{${this.labelField}}: {${this.valueField}}`,
+            oversizedBehavior: 'truncate',
+            maxWidth: 100,
+            maxHeight: 100,
+            ellipsis: '...',
+        });
+        series.labels.template.adapters.add('y', function (y, target) {
+            let dataItem = target.dataItem;
+            if (dataItem) {
+                //@ts-ignore
+                let tick = dataItem.get('tick');
+                if (tick) {
+                    //@ts-ignore
+                    if (dataItem.get('valuePercentTotal') < 5) {
+                        target.set('forceHidden', true);
+                        //@ts-ignore
+                        tick.set('forceHidden', true);
+                    }
+                    else {
+                        target.set('forceHidden', false);
+                        //@ts-ignore
+                        tick.set('forceHidden', false);
+                    }
+                }
+                return y;
+            }
+        });
+        // Set data
+        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
+        series.data.setAll(this.data);
+        // Create legend
+        // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
+        let legend = this.size !== 'small' && !this.hideLegend
+            ? chart.children.push(am5.Legend.new(this.chartRoot, {
+                centerX: am5.percent(50),
+                x: am5.percent(50),
+                marginTop: 15,
+                marginBottom: 15,
+            }))
+            : null;
+        legend === null || legend === void 0 ? void 0 : legend.data.setAll(series.dataItems);
+        if (legend && this.size !== 'small') {
+            // Set maxWidth for labels within the legend items
+            legend.labels.template.setAll({
+                maxWidth: this.chartRoot.width() * 0.24,
+                oversizedBehavior: 'truncate', // Ensures text wraps if it exceeds maxWidth
+            });
+        }
+        // Play initial series animation
+        // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
+        series.appear(1000, 100);
+    }
+    componentDidLoad() {
+        this.renderChart();
+    }
+    disconnectedCallback() {
+        // Clean up chart instance on component removal
+        if (this.chartRoot) {
+            this.chartRoot.dispose();
+        }
+    }
+    render() {
+        return (h("chart-container", { key: '5c5a6d1ff4b8c87e3239045ab15c0e652e43d781', kpis: this.kpis, 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, hideAdornment: this.hideAdornment }));
+    }
+    static get is() { return "udp-donut-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-donut-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-donut-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "attribute": "data",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: any }[]",
+                    "resolved": "{ [key: string]: any; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "Build.isDev ? generateMockData(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,
+                "defaultValue": "Build.isDev ? 'value' : ''"
+            },
+            "labelField": {
+                "type": "string",
+                "attribute": "label-field",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "Build.isDev ? 'label' : ''"
+            },
+            "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"
+            },
+            "hideLegend": {
+                "type": "boolean",
+                "attribute": "hide-legend",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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'"
+            },
+            "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'"
+            },
+            "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"
+            },
+            "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 elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "valueField",
+                "methodName": "renderChart"
+            }, {
+                "propName": "labelField",
+                "methodName": "renderChart"
+            }, {
+                "propName": "hideLegend",
+                "methodName": "renderChart"
+            }, {
+                "propName": "data",
+                "methodName": "renderChart"
+            }];
+    }
+}
+//# sourceMappingURL=udp-donut-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"udp-donut-chart.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/charts/udp-donut-chart/udp-donut-chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Prop, Element, Build, Watch } from '@stencil/core';\n\nimport * as am5 from '@amcharts/amcharts5/index';\nimport * as am5percent from '@amcharts/amcharts5/percent';\nimport am5themes_Animated from '@amcharts/amcharts5/themes/Animated';\n\nconst generateMockData = (length: number) => {\n  const countries = [\n    'USA',\n    'China',\n    'Japan',\n    'Germany',\n    'UK',\n    'Frandce',\n    'India',\n    'Spain',\n    'Netherlands',\n    'South Korea',\n    'Guatemala',\n    'Peru',\n    'Brazil',\n    'Honduras',\n    'Hungary',\n    'Romania',\n    'North Korea',\n    'Indonesia',\n    'Australia',\n    'Ukraine',\n  ];\n  return countries.map(c => ({ label: c, value: Math.random() * 2000 })).slice(0, length);\n};\n@Component({\n  tag: 'udp-donut-chart',\n  styleUrl: 'udp-donut-chart.css',\n  shadow: true,\n})\nexport class UdpDonutChart {\n  @Element() el: HTMLElement;\n\n  @Prop() data: { [key: string]: any }[] = Build.isDev ? generateMockData(10) : undefined;\n  @Prop() valueField: string = Build.isDev ? 'value' : '';\n  @Prop() labelField: string = Build.isDev ? 'label' : '';\n  @Prop() title: string = Build.isDev ? 'Test header' : undefined;\n  @Prop() subheader: string = Build.isDev ? 'Test SubHeader' : undefined;\n  @Prop() hideLegend: boolean = false;\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() hideAdornment: boolean = false;\n\n  private chartId = 'udp-donut-chart';\n  private chartRoot: am5.Root;\n\n  @Watch('valueField')\n  @Watch('labelField')\n  @Watch('hideLegend')\n  @Watch('data')\n  async renderChart() {\n    // sometimes the element cannot be found right away so loop umtil 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    if (!this.valueField) return;\n\n    this.chartRoot = am5.Root.new(this.el.shadowRoot.getElementById(this.chartId));\n\n    // Set themes\n    // https://www.amcharts.com/docs/v5/concepts/themes/\n    this.chartRoot.setThemes([am5themes_Animated.new(this.chartRoot)]);\n\n    // Create chart\n    // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/\n    let chart = this.chartRoot.container.children.push(\n      am5percent.PieChart.new(this.chartRoot, {\n        layout: this.chartRoot.verticalLayout,\n        innerRadius: am5.percent(65),\n      }),\n    );\n\n    // Create series\n    // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series\n    let series = chart.series.push(\n      am5percent.PieSeries.new(this.chartRoot, {\n        valueField: Build.isDev ? 'value' : this.valueField,\n        categoryField: Build.isDev ? 'label' : this.labelField,\n        alignLabels: false,\n      }),\n    );\n\n    series.labels.template.setAll({\n      textType: 'circular',\n      centerX: 0,\n      centerY: 0,\n      text: `{${this.valueField}}`,\n      tooltipText: `{${this.labelField}}: {${this.valueField}}`,\n      oversizedBehavior: 'truncate',\n      maxWidth: 100,\n      maxHeight: 100,\n      ellipsis: '...',\n    });\n    series.labels.template.adapters.add('y', function (y, target) {\n      let dataItem = target.dataItem;\n      if (dataItem) {\n        //@ts-ignore\n        let tick = dataItem.get('tick');\n        if (tick) {\n          //@ts-ignore\n          if ((dataItem.get('valuePercentTotal') as number) < 5) {\n            target.set('forceHidden', true);\n            //@ts-ignore\n            tick.set('forceHidden', true);\n          } else {\n            target.set('forceHidden', false);\n            //@ts-ignore\n            tick.set('forceHidden', false);\n          }\n        }\n        return y;\n      }\n    });\n\n    // Set data\n    // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data\n    series.data.setAll(this.data);\n\n    // Create legend\n    // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/\n    let legend =\n      this.size !== 'small' && !this.hideLegend\n        ? 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        : null;\n\n    legend?.data.setAll(series.dataItems);\n    if (legend && this.size !== 'small') {\n      // Set maxWidth for labels within the legend items\n      legend.labels.template.setAll({\n        maxWidth: this.chartRoot.width() * 0.24,\n        oversizedBehavior: 'truncate', // Ensures text wraps if it exceeds maxWidth\n      });\n    }\n\n    // Play initial series animation\n    // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series\n    series.appear(1000, 100);\n  }\n\n  componentDidLoad() {\n    this.renderChart();\n  }\n\n  disconnectedCallback() {\n    // Clean up chart instance on component removal\n    if (this.chartRoot) {\n      this.chartRoot.dispose();\n    }\n  }\n  render() {\n    return (\n      <chart-container\n        kpis={this.kpis}\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        hideAdornment={this.hideAdornment}\n      />\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/charts/udp-line-chart/udp-line-chart.css

@@ -0,0 +1,5 @@
+#udp-line-chart{
+    height: 500px;
+    width: 500px;
+    z-index: 1000;
+}